feat: update DatePicker

Orfium · Apr 18, 2024 · 32ad8be · 32ad8be
1 parent e03dbcc
commit 32ad8be
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 52 deletions.
diff --git a/src/components/DatePicker/DatePickInput/DatePickInput.tsx b/src/components/DatePicker/DatePickInput/DatePickInput.tsx
@@ -89,8 +89,8 @@ const DatePickInput = React.forwardRef<HTMLInputElement, DatePickInputProps>(
         <Icon
           tabIndex={0}
           name="calendar"
-          size={tokens('addOn.iconSize.normal')}
-          color={tokens('addOn.iconColor')}
+          size={theme.dimension.sizing.get('icon.md')}
+          color={theme.tokens.colors.get('textColor.default.secondary')}
           onClick={handleIconClick}
           dataTestId="calendar_button"
           onKeyDown={(e) => {
@@ -100,7 +100,7 @@ const DatePickInput = React.forwardRef<HTMLInputElement, DatePickInputProps>(
           }}
         />
       ),
-      [handleIconClick, tokens]
+      [handleIconClick, theme.dimension.sizing, theme.tokens.colors]
     );
 
     const getLabel = useMemo(() => {

diff --git a/src/components/DatePicker/DatePicker.style.ts b/src/components/DatePicker/DatePicker.style.ts
@@ -1,21 +1,18 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 
-import { getDatePickerTokens } from './DatePicker.tokens';
 import type { Theme } from '../../theme';
 
 export const datePickerStyles =
   () =>
   (theme: Theme): SerializedStyles => {
-    const tokens = getDatePickerTokens(theme);
-
     return css`
       position: absolute;
-      background-color: ${tokens('date.backgroundColor.default')};
+      background-color: ${theme.tokens.colors.get('palette.tertiary.base')};
       z-index: 10;
       margin-top: ${theme.globals.spacing.get('4')};
-      box-shadow: ${tokens('boxShadow')};
-      border-radius: ${tokens('date.container.borderRadius')};
-      border-color: ${tokens('container.borderColor')};
+      box-shadow: ${theme.tokens.boxShadow.get('3')};
+      border-radius: ${theme.dimension.borderRadius.get('md')};
+      border-color: ${theme.tokens.colors.get('borderColor.decorative.default')};
     `;
   };
diff --git a/src/components/DatePicker/Day/Day.style.ts b/src/components/DatePicker/Day/Day.style.ts
@@ -32,23 +32,25 @@ export const dayWrapperStyle =
       text-align: center;
       cursor: pointer;
       position: relative;
-      color: ${isSelected ? tokens('date.textColor.active') : tokens('date.textColor.default')};
+      color: ${isSelected
+        ? theme.tokens.colors.get('textColor.inverted.primary')
+        : theme.tokens.colors.get('textColor.default.primary')};
       width: ${tokens('dateSize')};
       font-weight: ${isToday && 'bold'};
       opacity: ${isDisabled ? 0.5 : 1};
       background: ${isLast || isFirst
-        ? tokens('date.backgroundColor.active')
+        ? theme.tokens.colors.get('palette.primary.contrast')
         : (isSelected || isBetween) &&
           typeof isBetween !== 'undefined' &&
-          tokens('date.backgroundColor.focused')};
+          theme.tokens.colors.get('palette.tertiary.muted')};
       border-bottom-right-radius: ${isLast && isSelected && '100%'};
       border-top-right-radius: ${isLast && isSelected && '100%'};
       border-bottom-left-radius: ${isFirst && isSelected && '100%'};
       border-top-left-radius: ${isFirst && isSelected && '100%'};
 
       &:focus-visible {
-        background-color: ${tokens('date.backgroundColor.focused')};
-        border-radius: ${tokens('date.borderRadius.2')};
+        background-color: ${theme.tokens.colors.get('palette.tertiary.muted')};
+        border-radius: ${theme.dimension.borderRadius.get('circle')};
       }
 
       ${(isSelected || isLast || isFirst) &&
@@ -72,16 +74,14 @@ export const dayWrapperStyle =
 export const emptyDayStyle =
   ({ isBetween }: { isBetween: boolean }) =>
   (theme: Theme) => {
-    const tokens = getDatePickerTokens(theme);
-
     return css`
       vertical-align: middle;
       text-align: center;
       cursor: pointer;
       position: relative;
       background: ${isBetween
-        ? tokens('date.backgroundColor.focused')
-        : tokens('date.backgroundColor.default')};
+        ? theme.tokens.colors.get('palette.tertiary.muted')
+        : theme.tokens.colors.get('palette.tertiary.base')};
     `;
   };
 
@@ -92,23 +92,30 @@ export const dayStyle =
 
     return css`
       ${label02(theme)};
-      border: ${isSelected ? 0 : tokens('date.borderWidth')} solid
-        ${isToday ? tokens('date.borderColor.present') : tokens('date.borderColor.default')};
-      border-radius: ${(isToday || isSelected) && tokens('date.borderRadius.2')};
+      border: ${isSelected ? 0 : theme.dimension.borderWidth.get('default')} solid
+        ${isToday
+          ? theme.tokens.colors.get('borderColor.interactive.active')
+          : theme.tokens.colors.get('borderColor.decorative.transparent')};
+      border-radius: ${(isToday || isSelected) && theme.dimension.borderRadius.get('circle')};
       width: ${tokens('dateSize')};
       height: ${tokens('dateSize')};
-      color: ${isSelected ? tokens('date.textColor.active') : tokens('date.textColor.default')};
+      color: ${isSelected
+        ? theme.tokens.colors.get('textColor.inverted.primary')
+        : theme.tokens.colors.get('textColor.default.primary')};
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: ${isSelected ? tokens('date.backgroundColor.active') : 'transparent'};
+      background: ${isSelected
+        ? theme.tokens.colors.get('palette.primary.contrast')
+        : 'transparent'};
 
       ${!isDisabled &&
       `&:hover {
-            border-radius: ${tokens('date.borderRadius.2')};
+            border-radius: ${theme.dimension.borderRadius.get('circle')};
             background: ${
-              !isSelected && (!isBetween ? tokens('date.backgroundColor.focused') : 'transparent')
+              !isSelected &&
+              (!isBetween ? theme.tokens.colors.get('palette.tertiary.muted') : 'transparent')
             };
           }`}
     `;

diff --git a/src/components/DatePicker/Month/Month.style.ts b/src/components/DatePicker/Month/Month.style.ts
@@ -19,7 +19,7 @@ export const weekDayStyle =
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${tokens('date.textColor.weekday')};
+      color: ${theme.tokens.colors.get('textColor.default.secondary')};
       width: ${tokens('dateSize')};
       height: ${tokens('dateSize')};
       font-size: ${theme.globals.typography.fontSize.get('3')};
@@ -32,10 +32,8 @@ export const weekDayStyle =
 export const datesWrapperStyle =
   () =>
   (theme: Theme): SerializedStyles => {
-    const tokens = getDatePickerTokens(theme);
-
     return css`
       border-collapse: separate;
-      border-spacing: 0 ${tokens('rowPadding')};
+      border-spacing: 0 ${theme.dimension.spacing.get('md')};
     `;
   };
diff --git a/src/components/DatePicker/OverlayComponent/OverlayComponent.style.ts b/src/components/DatePicker/OverlayComponent/OverlayComponent.style.ts
@@ -4,51 +4,49 @@ import type { Theme } from 'theme';
 
 import { flex } from '../../../theme/functions';
 import { getDatePickerTokens } from '../DatePicker.tokens';
-import { getListItemTokens } from 'components/List/List.tokens';
 import { label02 } from 'components/Typography/Typography.config.styles';
 
 export const overlayWrapperStyle =
   () =>
   (theme: Theme): SerializedStyles => {
-    const tokens = getDatePickerTokens(theme);
-
     return css`
       ${flex};
-      border: ${tokens('date.borderWidth')} solid ${tokens('container.borderColor')};
-      border-radius: ${tokens('date.container.borderRadius')};
+      border: ${theme.dimension.borderWidth.get('default')} solid
+        ${theme.tokens.colors.get('borderColor.decorative.default')};
+      border-radius: ${theme.dimension.borderRadius.get('md')};
       width: fit-content;
+      background-color: ${theme.tokens.colors.get('backgroundColor.default')};
     `;
   };
 
 export const optionsWrapperStyle =
   () =>
   (theme: Theme): SerializedStyles => {
-    const tokens = getDatePickerTokens(theme);
-
     return css`
-      border-right: ${tokens('date.borderWidth')} solid ${tokens('container.borderColor')};
+      border-right: ${theme.dimension.borderWidth.get('default')} solid
+        ${theme.tokens.colors.get('borderColor.decorative.default')};
     `;
   };
 
 export const optionStyle =
   ({ isSelected }: { isSelected?: boolean }) =>
   (theme: Theme): SerializedStyles => {
-    const listItemTokens = getListItemTokens(theme);
-
     return css`
       ${label02(theme)};
       white-space: nowrap;
       padding: ${theme.globals.spacing.get('6')};
       font-weight: ${isSelected
         ? theme.globals.typography.fontWeight.get('medium')
         : theme.globals.typography.fontWeight.get('regular')};
-      color: ${isSelected && listItemTokens('textColor.active')};
+      color: ${isSelected && theme.tokens.colors.get('textColor.default.active')};
       cursor: pointer;
-      background-color: ${isSelected ? listItemTokens('backgroundColor.active') : 'transparent'};
+      background-color: ${isSelected
+        ? theme.tokens.colors.get('palette.tertiary.muted')
+        : 'transparent'};
       position: relative;
 
       &:hover {
-        background-color: ${listItemTokens('backgroundColor.active')};
+        background-color: ${theme.tokens.colors.get('palette.tertiary.muted')};
       }
     `;
   };
@@ -79,8 +77,9 @@ export const buttonsWrapperStyle =
       justify-content: flex-end;
       height: ${tokens('actionsContainer')};
       align-items: center;
-      gap: ${tokens('actionsSpacing')};
-      padding: 0 ${tokens('padding')};
-      border-top: ${tokens('date.borderWidth')} solid ${tokens('container.borderColor')};
+      gap: ${theme.dimension.spacing.get('sm')};
+      padding: 0 ${theme.dimension.spacing.get('xl')};
+      border-top: ${theme.dimension.borderWidth.get('default')} solid
+        ${theme.tokens.colors.get('borderColor.decorative.default')};
     `;
   };
diff --git a/src/components/DatePicker/OverlayComponent/components/MonthWrapper/MonthWrapper.style.ts b/src/components/DatePicker/OverlayComponent/components/MonthWrapper/MonthWrapper.style.ts
@@ -3,18 +3,14 @@ import { css } from '@emotion/react';
 import type { Theme } from 'theme';
 import { rem } from 'theme/utils';
 
-import { getDatePickerTokens } from 'components/DatePicker/DatePicker.tokens';
-
 export const monthWrapperStyle =
   () =>
   (theme: Theme): SerializedStyles => {
-    const tokens = getDatePickerTokens(theme);
-
     return css`
       display: flex;
       flex-direction: column;
-      gap: ${tokens('rowPadding')};
-      padding: ${tokens('padding')};
+      gap: ${theme.dimension.spacing.get('md')};
+      padding: ${theme.dimension.spacing.get('xl')};
     `;
   };