From 8f71cdb7f91628ce094f2ba733d20530ac38b926 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Fri, 22 Aug 2025 10:12:39 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(react)=20enhance=20DatePicker=20co?=
 =?UTF-8?q?mponent=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

update DatePicker token and css files with new css variables introduce
with the new tokens architectures
---
 .../components/Forms/DatePicker/Calendar.tsx  |  47 ++++---
 .../Forms/DatePicker/CalendarCell.tsx         |   7 +-
 .../Forms/DatePicker/DatePickerAux.tsx        |  18 +--
 .../components/Forms/DatePicker/_index.scss   | 120 +++++++++++-------
 .../Forms/DatePicker/index.stories.tsx        |   8 +-
 .../src/components/Forms/DatePicker/tokens.ts |  39 +++---
 6 files changed, 137 insertions(+), 102 deletions(-)

diff --git a/packages/react/src/components/Forms/DatePicker/Calendar.tsx b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
index beaeee7..c4136c1 100644
--- a/packages/react/src/components/Forms/DatePicker/Calendar.tsx
+++ b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -117,7 +117,7 @@ const CalendarAux = ({
   const monthItems: Array<Option> = useMemo(() => {
     // Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
     const numberOfMonths = state.focusedDate.calendar.getMonthsInYear(
-      state.focusedDate,
+      state.focusedDate
     );
     return range(1, numberOfMonths).map((monthNumber) => {
       const date = state.focusedDate.set({ month: monthNumber });
@@ -133,16 +133,15 @@ const CalendarAux = ({
 
   const yearItems: Array<Option> = useMemo(() => {
     const calendarCurrentUser = createCalendar(
-      new Intl.DateTimeFormat().resolvedOptions()
-        .calendar as CalendarIdentifier,
+      new Intl.DateTimeFormat().resolvedOptions().calendar as CalendarIdentifier
     );
     const minDate = toCalendar(
       new CalendarDate(new GregorianCalendar(), minYear, 1, 1),
-      calendarCurrentUser,
+      calendarCurrentUser
     );
     const maxDate = toCalendar(
       new CalendarDate(new GregorianCalendar(), maxYear, 12, 31),
-      calendarCurrentUser,
+      calendarCurrentUser
     );
     return range(minDate.year, maxDate.year).map((yearNumber) => {
       const date = state.focusedDate.set({ year: yearNumber });
@@ -158,7 +157,7 @@ const CalendarAux = ({
 
   const useDownshiftSelect = (
     key: string,
-    items: Array<Option>,
+    items: Array<Option>
   ): UseSelectReturnValue<Option> => {
     return useSelect({
       items,
@@ -215,12 +214,12 @@ const CalendarAux = ({
   const getToggleButtonProps = (
     key: string,
     items: Array<Option>,
-    downshift: UseSelectReturnValue<Option>,
+    downshift: UseSelectReturnValue<Option>
   ) => ({
     ...downshift.getToggleButtonProps(),
     onClick: () => {
       const selectedItem = items.find(
-        (item) => item.value === state.focusedDate[key as keyof CalendarDate],
+        (item) => item.value === state.focusedDate[key as keyof CalendarDate]
       );
       if (selectedItem) {
         downshift.selectItem(selectedItem);
@@ -228,7 +227,7 @@ const CalendarAux = ({
       downshift.toggleMenu();
     },
     "aria-label": t(
-      `components.forms.date_picker.${key}_select_button_aria_label`,
+      `components.forms.date_picker.${key}_select_button_aria_label`
     ),
   });
 
@@ -257,13 +256,14 @@ const CalendarAux = ({
         <div className="c__calendar__wrapper__header">
           <div className="c__calendar__wrapper__header__actions">
             <Button
-              color="tertiary-text"
+              variant="neutral"
+              color="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_before</span>}
               {...{
                 ...prevButtonOtherProps,
                 "aria-label": t(
-                  "components.forms.date_picker.previous_month_button_aria_label",
+                  "components.forms.date_picker.previous_month_button_aria_label"
                 ),
               }}
               disabled={isPrevButtonDisabled}
@@ -272,7 +272,8 @@ const CalendarAux = ({
             />
             <Button
               className="c__calendar__wrapper__header__actions__dropdown"
-              color="tertiary-text"
+              variant="neutral"
+              color="tertiary"
               size="small"
               iconPosition="right"
               icon={<span className="material-icons">arrow_drop_down</span>}
@@ -280,18 +281,19 @@ const CalendarAux = ({
               {...getToggleButtonProps("month", monthItems, downshiftMonth)}
             >
               {selectedMonthItemFormatter.format(
-                state.focusedDate.toDate(state.timeZone),
+                state.focusedDate.toDate(state.timeZone)
               )}
             </Button>
             <Button
-              color="tertiary-text"
+              variant="neutral"
+              color="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_next</span>}
               type="button"
               {...{
                 ...nextButtonOtherProps,
                 "aria-label": t(
-                  "components.forms.date_picker.next_month_button_aria_label",
+                  "components.forms.date_picker.next_month_button_aria_label"
                 ),
               }}
               disabled={isNextButtonDisabled}
@@ -300,7 +302,8 @@ const CalendarAux = ({
           </div>
           <div className="c__calendar__wrapper__header__actions">
             <Button
-              color="tertiary-text"
+              variant="neutral"
+              color="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_before</span>}
               onClick={() => state.focusPreviousSection(true)}
@@ -309,13 +312,14 @@ const CalendarAux = ({
                 state.minValue.year > state.focusedDate.add({ years: -1 }).year
               }
               aria-label={t(
-                "components.forms.date_picker.previous_year_button_aria_label",
+                "components.forms.date_picker.previous_year_button_aria_label"
               )}
               type="button"
             />
             <Button
               className="c__calendar__wrapper__header__actions__dropdown"
-              color="tertiary-text"
+              variant="neutral"
+              color="tertiary"
               size="small"
               iconPosition="right"
               icon={<span className="material-icons">arrow_drop_down</span>}
@@ -323,11 +327,12 @@ const CalendarAux = ({
               {...getToggleButtonProps("year", yearItems, downshiftYear)}
             >
               {yearItemsFormatter.format(
-                state.focusedDate.toDate(state.timeZone),
+                state.focusedDate.toDate(state.timeZone)
               )}
             </Button>
             <Button
-              color="tertiary-text"
+              variant="neutral"
+              color="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_next</span>}
               onClick={() => state.focusNextSection(true)}
@@ -336,7 +341,7 @@ const CalendarAux = ({
                 state.maxValue.year < state.focusedDate.add({ years: 1 }).year
               }
               aria-label={t(
-                "components.forms.date_picker.next_year_button_aria_label",
+                "components.forms.date_picker.next_year_button_aria_label"
               )}
               type="button"
             />
diff --git a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
index c10b604..fc1ca59 100644
--- a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
+++ b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
@@ -58,6 +58,7 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
       >
         <Button
           size="small"
+          variant={isSelected ? "brand" : "neutral"}
           color={
             (
               isRangeCalendar(state)
@@ -65,7 +66,7 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
                 : isSelected
             )
               ? "primary"
-              : "tertiary-text"
+              : "tertiary"
           }
           className={classNames(
             "c__calendar__wrapper__grid__week-row__button",
@@ -74,9 +75,9 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
                 isSelected,
               "c__calendar__wrapper__grid__week-row__button--today": isToday(
                 date,
-                getLocalTimeZone(),
+                getLocalTimeZone()
               ),
-            },
+            }
           )}
           type="button"
           disabled={isDisabled}
diff --git a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
index 5409f10..7c34715 100644
--- a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
@@ -76,7 +76,7 @@ const DatePickerAux = ({
 
   const isDateInvalid = useMemo(
     () => pickerState.validationState === "invalid" || props.state === "error",
-    [pickerState.validationState, props.state],
+    [pickerState.validationState, props.state]
   );
 
   return (
@@ -114,7 +114,7 @@ const DatePickerAux = ({
                   name={name && `${name}_start`}
                   value={convertDateValueToString(
                     pickerState.value?.start ?? null,
-                    props.timezone,
+                    props.timezone
                   )}
                 />
                 <input
@@ -122,7 +122,7 @@ const DatePickerAux = ({
                   name={name && `${name}_end`}
                   value={convertDateValueToString(
                     pickerState.value?.end ?? null,
-                    props.timezone,
+                    props.timezone
                   )}
                 />
               </>
@@ -132,7 +132,7 @@ const DatePickerAux = ({
                 name={name}
                 value={convertDateValueToString(
                   pickerState.value,
-                  props.timezone,
+                  props.timezone
                 )}
               />
             )}
@@ -148,9 +148,10 @@ const DatePickerAux = ({
                 aria-label={t(
                   pickerState.isOpen
                     ? "components.forms.date_picker.toggle_button_aria_label_close"
-                    : "components.forms.date_picker.toggle_button_aria_label_open",
+                    : "components.forms.date_picker.toggle_button_aria_label_open"
                 )}
-                color="tertiary-text"
+                variant="neutral"
+                color="tertiary"
                 size="small"
                 className="c__date-picker__wrapper__toggle"
                 icon={
@@ -166,7 +167,8 @@ const DatePickerAux = ({
                 "c__date-picker__inner__action--hidden":
                   labelAsPlaceholder || disabled,
               })}
-              color="tertiary-text"
+              variant="neutral"
+              color="tertiary"
               size="nano"
               icon={<span className="material-icons">close</span>}
               onClick={onClear}
@@ -176,7 +178,7 @@ const DatePickerAux = ({
                 }
               }}
               aria-label={t(
-                "components.forms.date_picker.clear_button_aria_label",
+                "components.forms.date_picker.clear_button_aria_label"
               )}
               disabled={disabled}
               type="button"
diff --git a/packages/react/src/components/Forms/DatePicker/_index.scss b/packages/react/src/components/Forms/DatePicker/_index.scss
index 33d8377..1ceca83 100644
--- a/packages/react/src/components/Forms/DatePicker/_index.scss
+++ b/packages/react/src/components/Forms/DatePicker/_index.scss
@@ -1,17 +1,20 @@
-@use 'src/utils' as *;
+@use "src/utils" as *;
 @use "../../../utils/responsive" as *;
 
 .c__date-picker {
   position: relative;
 
-
   &__wrapper {
     border-radius: var(--c--components--forms-datepicker--border-radius);
     border-width: var(--c--components--forms-datepicker--border-width);
     border-color: var(--c--components--forms-datepicker--border-color);
     border-style: var(--c--components--forms-datepicker--border-style);
     display: flex;
-    transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+    transition:
+      border var(--c--globals--transitions--duration)
+        var(--c--globals--transitions--ease-out),
+      border-radius var(--c--globals--transitions--duration)
+        var(--c--globals--transitions--ease-out);
     padding: 0 0.75rem;
     gap: 1rem;
     box-sizing: border-box;
@@ -51,7 +54,7 @@
       margin: -1px;
       overflow: hidden;
       padding: 0;
-      position: absolute
+      position: absolute;
     }
 
     &--clickable {
@@ -71,7 +74,7 @@
         }
 
         &:focus-visible {
-          background-color: var(--c--theme--colors--primary-100);
+          background-color: var(--c--contextuals--background--semantic--brand--tertiary);
           outline: none;
         }
       }
@@ -92,24 +95,24 @@
     }
   }
 
-
   /** Modifiers */
 
   &--disabled {
     .c__date-picker__wrapper {
-      color: var(--c--theme--colors--greyscale-600);
-      border-color: var(--c--components--forms-datepicker--border-color--disabled);
+      color: var(--c--contextuals--content--semantic--disabled--primary);
+      border-color: var(
+        --c--components--forms-datepicker--border-color--disabled
+      );
       cursor: default;
       pointer-events: none;
 
       &__toggle {
-        color: var(--c--theme--colors--greyscale-400);
+        color: var(--c--contextuals--content--semantic--disabled--tertiary);
       }
 
       .c__date-picker__inner {
-
         &__action {
-          color: var(--c--theme--colors--greyscale-400);
+          color: var(--c--contextuals--content--semantic--disabled--primary);
         }
 
         &__value {
@@ -125,28 +128,28 @@
 
   &--invalid {
     .c__date-picker__wrapper {
-      border-color: var(--c--theme--colors--danger-600);
+      border-color: var(--c--contextuals--border--semantic--error--primary);
       border-radius: var(--c--components--forms-datepicker--border-radius);
 
       &__toggle {
-        color: var(--c--theme--colors--danger-600);
+        color: var(--c--contextuals--content--semantic--error--primary);
       }
 
       label {
-        color: var(--c--theme--colors--danger-600);
+        color: var(--c--contextuals--content--semantic--error--primary);
       }
     }
 
     &:not(.c__date-picker--disabled) {
       &:hover {
         .c__date-picker__wrapper {
-          border-color: var(--c--theme--colors--danger-800);
+          border-color: var(--c--contextuals--border--semantic--error--secondary);
           &__toggle {
-            color: var(--c--theme--colors--danger-800);
+            color: var(--c--contextuals--content--semantic--error--secondary);
           }
 
           label {
-            color: var(--c--theme--colors--danger-800);
+            color: var(--c--contextuals--content--semantic--error--secondary);
           }
         }
       }
@@ -155,28 +158,28 @@
 
   &--success {
     .c__date-picker__wrapper {
-      border-color: var(--c--theme--colors--success-600);
+      border-color: var(--c--contextuals--border--semantic--success--secondary);
       border-radius: var(--c--components--forms-datepicker--border-radius);
 
       &__toggle {
-        color: var(--c--theme--colors--success-600);
+        color: var(--c--contextuals--content--semantic--success--secondary);
       }
 
       label {
-        color: var(--c--theme--colors--success-600);
+        color: var(--c--contextuals--content--semantic--success--secondary);
       }
     }
 
     &:not(.c__date-picker--disabled) {
       &:hover {
         .c__date-picker__wrapper {
-          border-color: var(--c--theme--colors--success-800);
+          border-color: var(--c--contextuals--border--semantic--success--primary);
           &__toggle {
-            color: var(--c--theme--colors--success-800);
+            color: var(--c--contextuals--content--semantic--success--primary);
           }
 
           label {
-            color: var(--c--theme--colors--success-800);
+            color: var(--c--contextuals--content--semantic--success--primary);
           }
         }
       }
@@ -186,8 +189,12 @@
   &:not(&--focused):not(&--invalid):not(&--disabled):not(&--success) {
     &:hover {
       .c__date-picker__wrapper {
-        border-radius: var(--c--components--forms-datepicker--border-radius--hover);
-        border-color: var(--c--components--forms-datepicker--border-color--hover);
+        border-radius: var(
+          --c--components--forms-datepicker--border-radius--hover
+        );
+        border-color: var(
+          --c--components--forms-datepicker--border-color--hover
+        );
       }
     }
   }
@@ -197,11 +204,17 @@
    * than :hover. But here hover has more css specificity, so we need !important.
    */
   @mixin focused-wrapper {
-    border-radius: var(--c--components--forms-datepicker--border-radius--focus) !important;
-    border-color: var(--c--components--forms-datepicker--border-color--focus) !important;
+    border-radius: var(
+      --c--components--forms-datepicker--border-radius--focus
+    ) !important;
+    border-color: var(
+      --c--components--forms-datepicker--border-color--focus
+    ) !important;
 
     .c__date-picker__wrapper__toggle {
-      color: var(--c--components--forms-datepicker--border-color--focus) !important;
+      color: var(
+        --c--components--forms-datepicker--border-color--focus
+      ) !important;
     }
 
     label {
@@ -230,7 +243,6 @@
     // So in order to make this work we use @media for the non-full-width fields and @container for the full-width.
 
     &__container {
-
       &:not(.c__field--full-width) {
         min-width: $component-min-width;
 
@@ -244,7 +256,6 @@
       }
 
       &.c__field--full-width {
-
         .c__date-picker__wrapper {
           // The container-type must absolutely not be parent of the calendar popover or otherwise the popover will
           // not be able to float above other DOM elements as a container-type: inline-size defines a new stacking
@@ -253,7 +264,6 @@
         }
 
         @container (max-width: #{$component-min-width}) {
-
           .c__date-picker__wrapper__icon {
             display: none;
           }
@@ -261,11 +271,8 @@
       }
     }
 
-
-
-
     &__separator {
-      background-color: var(--c--theme--colors--greyscale-400);
+      background-color: var(--c--contextuals--border--semantic--neutral--tertiary);
       height: px-to-rem(24px);
       width: px-to-rem(1px);
       margin: auto;
@@ -273,7 +280,6 @@
   }
 }
 
-
 .c__calendar {
   display: block;
   transform: translate(2px, 0);
@@ -285,7 +291,9 @@
 
     &--opened {
       @extend %shadow;
-      background-color: var(--c--components--forms-datepicker--menu-background-color);
+      background-color: var(
+        --c--components--forms-datepicker--menu-background-color
+      );
     }
 
     &__header {
@@ -318,22 +326,25 @@
 
         th {
           font-weight: var(--c--components--button--font-weight);
-          color: var(--c--theme--colors--greyscale-700);
+          color: var(--c--contextuals--content--semantic--neutral--secondary);
         }
       }
 
       &__week-row {
-
         td {
           padding: 0;
         }
 
         &__background {
           &--range {
-            background: var(--c--components--forms-datepicker--range-selection-background-color);
+            background: var(
+              --c--components--forms-datepicker--range-selection-background-color
+            );
 
             &:not(&--end):not(&--start):not(&--disabled) button {
-              color: var(--c--components--forms-datepicker--grid-cell--color--today);
+              color: var(
+                --c--components--forms-datepicker--grid-cell--color--today
+              );
             }
 
             &--end {
@@ -345,16 +356,23 @@
               border-bottom-left-radius: 100%;
             }
             &--disabled {
-              background: var(--c--components--forms-datepicker--range-selection-background-color--disabled);
+              background: var(
+                --c--components--forms-datepicker--range-selection-background-color--disabled
+              );
             }
           }
         }
         &__button {
           &--today {
-            border: 1px solid var(--c--components--forms-datepicker--grid-cell--border-color--today);
+            border: 1px solid
+              var(
+                --c--components--forms-datepicker--grid-cell--border-color--today
+              );
           }
           &--today:not(&--selected) {
-            color: var(--c--components--forms-datepicker--grid-cell--color--today);
+            color: var(
+              --c--components--forms-datepicker--grid-cell--color--today
+            );
           }
         }
         .c__button--small {
@@ -378,7 +396,9 @@
     overflow: auto;
     width: 100%;
     max-height: 25rem;
-    background-color: var(--c--components--forms-datepicker--menu-background-color);
+    background-color: var(
+      --c--components--forms-datepicker--menu-background-color
+    );
     transform: translate(2px, 0);
     display: none;
     z-index: 2;
@@ -401,15 +421,19 @@
       cursor: pointer;
 
       &--highlight {
-        background-color: var(--c--components--forms-datepicker--item-background-color--hover);
+        background-color: var(
+          --c--components--forms-datepicker--item-background-color--hover
+        );
       }
 
       &--selected {
-        background-color: var(--c--components--forms-datepicker--item-background-color--selected);
+        background-color: var(
+          --c--components--forms-datepicker--item-background-color--selected
+        );
       }
 
       &--disabled {
-        color: var(--c--theme--colors--greyscale-400);
+        color: var(--c--contextuals--content--semantic--disabled--primary);
         pointer-events: none;
       }
     }
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index d50189f..e3c6b7e 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -117,7 +117,7 @@ export const Controlled = () => {
   const [value, setValue] = useState<string | null>("2023-04-25T12:00:00.000Z");
   return (
     <div>
-      <div className="clr-greyscale-900">
+      <div className="clr-gray-900">
         Value: <span>{value?.toString()}</span>
       </div>
       <DatePicker
@@ -140,7 +140,7 @@ export const ReactHookForm = () => {
     resolver: yupResolver(
       Yup.object().shape({
         date: Yup.string().required(),
-      }),
+      })
     ),
   });
 
@@ -195,7 +195,7 @@ export const RangeControlled = () => {
   ]);
   return (
     <>
-      <div className="clr-greyscale-900">Value: {value?.join("  ")}</div>
+      <div className="clr-gray-900">Value: {value?.join("  ")}</div>
       <div
         style={{
           display: "flex",
@@ -226,7 +226,7 @@ export const RangeControlledFull = () => {
   ]);
   return (
     <>
-      <div className="clr-greyscale-900">Value: {value?.join("  ")}</div>
+      <div className="clr-gray-900">Value: {value?.join("  ")}</div>
       <div
         style={{
           display: "flex",
diff --git a/packages/react/src/components/Forms/DatePicker/tokens.ts b/packages/react/src/components/Forms/DatePicker/tokens.ts
index a8c8f8f..b8239da 100644
--- a/packages/react/src/components/Forms/DatePicker/tokens.ts
+++ b/packages/react/src/components/Forms/DatePicker/tokens.ts
@@ -1,29 +1,32 @@
 import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
-  "border-color": defaults.theme.colors["greyscale-300"],
-  "border-color--disabled": defaults.theme.colors["greyscale-200"],
-  "border-color--focus": defaults.theme.colors["primary-600"],
-  "border-color--hover": defaults.theme.colors["greyscale-500"],
+  "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
+  "border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
+  "border-color--focus": defaults.contextuals.border.semantic.brand.primary,
+  "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
   "border-radius": "8px",
   "border-radius--focus": "2px",
   "border-radius--hover": "2px",
   "border-style": "solid",
   "border-width": "1px",
-  "value-color": defaults.theme.colors["greyscale-900"],
-  "value-color--disabled": defaults.theme.colors["greyscale-800"],
-  "font-size": defaults.theme.font.sizes.l,
+  "value-color": defaults.contextuals.content.semantic.neutral.tertiary,
+  "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "font-size": defaults.globals.font.sizes.lg,
   height: "3.5rem",
-  "item-background-color--hover": defaults.theme.colors["greyscale-200"],
-  "item-background-color--selected": defaults.theme.colors["primary-100"],
-  "item-color": defaults.theme.colors["greyscale-800"],
-  "item-font-size": defaults.theme.font.sizes.l,
-  "background-color": defaults.theme.colors["greyscale-000"],
-  "menu-background-color": defaults.theme.colors["greyscale-000"],
-  "range-selection-background-color": defaults.theme.colors["primary-100"],
+  "item-background-color--hover":
+    defaults.contextuals.background.semantic.neutral["tertiary-hover"],
+  "item-background-color--selected":
+    defaults.contextuals.background.semantic.brand.tertiary,
+  "item-color": defaults.contextuals.content.semantic.neutral.primary,
+  "item-font-size": defaults.globals.font.sizes.md,
+  "background-color": defaults.contextuals.background.surface.primary,
+  "menu-background-color": defaults.contextuals.background.surface.primary,
+  "range-selection-background-color":
+    defaults.contextuals.background.semantic.brand.tertiary,
   "range-selection-background-color--disabled":
-    defaults.theme.colors["greyscale-100"],
-  "grid-cell--border-color--today": defaults.theme.colors["primary-600"],
-  "grid-cell--color--today": defaults.theme.colors["primary-600"],
-  "label-color--focus": defaults.theme.colors["primary-600"],
+    defaults.contextuals.background.semantic.neutral.tertiary,
+  "grid-cell--border-color--today": defaults.contextuals.border.semantic.brand.primary,
+  "grid-cell--color--today": defaults.contextuals.content.semantic.brand.primary,
+  "label-color--focus": defaults.contextuals.border.semantic.brand.secondary,
 });