feat(DatePicker): implement design tokens

src/components/Icon/Icon.tsx

@@ -92,7 +92,11 @@ const Icon = ({
   );
 
   if (hasFixedSize) {
-    return <IconBox $size={size}>{icon}</IconBox>;
+    return (
+      <IconBox $size={size} className="sscds-iconbox">
+        {icon}
+      </IconBox>
+    );
   }
 
   return icon;

src/components/SingleDatePicker/SingleDatePicker.stories.tsx

@@ -76,3 +76,21 @@ export const YearPickerDatePicker: StoryFn = () => {
     />
   );
 };
+
+export const DarkMode: StoryFn = () => {
+  const [dateValue, handleChangeDate] = useState<Date | null>(null);
+
+  return (
+    <SingleDatePicker
+      placeholder="Custom placeholder"
+      value={dateValue}
+      defaultIsOpen
+      onChange={handleChangeDate}
+    />
+  );
+};
+DarkMode.parameters = {
+  themes: {
+    themeOverride: 'Dark',
+  },
+};

src/components/_internal/BaseDateRangePicker/styles.ts

@@ -1,33 +1,38 @@
 import { css } from 'styled-components';
 
-import { getColor } from '../../../utils';
-
 export const dateRangePickerStyles = css`
   .react-datepicker__day--in-selecting-range {
-    background-color: ${getColor('neutral.0')};
-    color: ${getColor('neutral.900')};
+    background-color: var(--sscds-color-neutral-0);
+    color: var(--sscds-color-text-default);
   }
   .react-datepicker__day--in-range {
-    background-color: ${getColor('primary.50')};
-    color: ${getColor('neutral.900')};
+    background-color: var(--sscds-color-background-selectable-active);
+    color: var(--sscds-color-text-default);
     border-radius: 0;
   }
   .react-datepicker__day--selected,
   .react-datepicker__day--range-start,
   .react-datepicker__day--range-end,
   .react-datepicker__day--selecting-range-start {
-    background-color: ${getColor('primary.500')};
+    background-color: var(--sscds-color-primary-9);
     font-weight: var(--sscds-font-weight-elementlabel-strong);
-    color: ${getColor('neutral.0')};
+    color: var(--sscds-color-text-white);
   }
   .react-datepicker__day--selected,
   .react-datepicker__day--selecting-range-start {
-    border-radius: 4px;
+    border-radius: var(--sscds-radii-default);
   }
   .react-datepicker__day--range-start {
-    border-radius: 4px 0 0 4px;
+    border-radius: var(--sscds-radii-rounded) 0 0 var(--sscds-radii-rounded);
   }
   .react-datepicker__day--range-end {
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 var(--sscds-radii-rounded) var(--sscds-radii-rounded) 0;
+  }
+
+  .react-datepicker__day--in-range:not(
+      .react-datepicker__day--range-start,
+      .react-datepicker__day--range-end
+    ):hover {
+    border-radius: 0;
   }
 `;

src/components/_internal/BaseSingleDatePicker/CustomHeader.tsx

@@ -1,13 +1,8 @@
 import styled from 'styled-components';
 import { useMemo } from 'react';
 
-import { PaddingTypes } from '../../layout/Padbox/Padbox.enums';
-import { SSCIconNames } from '../../../theme/icons/icons.enums';
-import { getColor, getRadii } from '../../../utils';
-import { ColorTypes } from '../../../theme/colors.enums';
-import { Icon } from '../../Icon';
 import { Inline, Padbox } from '../../layout';
-import { SpaceSizes } from '../../../theme';
+import IconButton from '../../ButtonV2/IconButton';
 
 const months = [
   'January',
@@ -27,47 +22,21 @@ const months = [
 const getYear = (date: Date) => date.getFullYear();
 const getMonth = (date: Date) => months[date.getMonth()];
 
-const ChangeMonthIconContainer = styled.div<{ direction: string }>`
-  transform: ${(props) =>
-      props.direction === 'right' ? 'rotate(270deg)' : 'rotate(90deg)'}
-    translate(0, -4px);
-  font-size: var(--sscds-font-size-elementlabel-md);
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const MonthSelector = styled.button`
-  border-radius: ${getRadii('default')};
-  border: 0;
-  background: transparent;
-  &:hover {
-    background-color: ${getColor(ColorTypes.primary50)};
-  }
-  &:hover svg {
-    color: ${getColor(ColorTypes.primary600)};
-  }
-`;
-
-function ChangeMonthIcon(props) {
-  return (
-    <ChangeMonthIconContainer {...props}>
-      <Icon color={ColorTypes.neutral600} name={SSCIconNames.angleDown} />
-    </ChangeMonthIconContainer>
-  );
-}
-
 const MonthIndicator = styled.button`
-  border-radius: ${getRadii('default')};
+  border-radius: var(--sscds-radii-default);
   border: 0;
   background: transparent;
   font-size: var(--sscds-font-size-elementlabel-md);
   font-weight: var(--sscds-font-weight-elementlabel-strong);
+  line-height: var(--sscds-font-size-50);
+  transition: var(--sscds-action-transition),
+    transform 50ms var(--sscds-transition-fn);
+
   &:hover {
-    color: ${getColor(ColorTypes.primary600)};
-    background-color: ${getColor(ColorTypes.primary50)};
+    background-color: var(--sscds-color-background-action-ghost-hover);
+  }
+  &:active {
+    transform: scale(0.98);
   }
 `;
 
@@ -103,26 +72,31 @@ export const DatePickerCustomHeader = ({
   ]);
 
   return (
-    <Inline stretch={2}>
-      <MonthSelector
-        aria-label="Previous month button"
-        type="button"
+    <Inline
+      align="center"
+      gap="xs"
+      stretch={2}
+      style={{ marginBlockEnd: 'var(--sscds-space-4x)' }}
+    >
+      <IconButton
+        iconName="angle-left"
+        label="Go to previous month"
+        size="sm"
+        variant="ghost"
         onClick={onClickLeft}
-      >
-        <ChangeMonthIcon direction="left" />
-      </MonthSelector>
+      />
       <MonthIndicator onClick={() => toggleYearPicker()}>
-        <Padbox paddingSize={SpaceSizes.md} paddingType={PaddingTypes.squish}>
-          {`${getMonth(date)} ${getYear(date)}`}
-        </Padbox>
+        <Padbox paddingSize="sm" paddingType="squish">{`${getMonth(
+          date,
+        )} ${getYear(date)}`}</Padbox>
       </MonthIndicator>
-      <MonthSelector
-        aria-label="Next month button"
-        type="button"
+      <IconButton
+        iconName="angle-right"
+        label="Go to next month"
+        size="sm"
+        variant="ghost"
         onClick={onClickRight}
-      >
-        <ChangeMonthIcon direction="right" />
-      </MonthSelector>
+      />
     </Inline>
   );
 };

src/components/_internal/BaseSingleDatePicker/SingleDatePicker.tsx

@@ -3,10 +3,11 @@ import styled from 'styled-components';
 import { noop } from 'ramda-adjunct';
 import ReactDatePicker from 'react-datepicker';
 
-import { datePickerStyles, singleDatePickerStyles } from './styles';
+import { datePickerStyles } from './styles';
 import { SingleDatePickerProps } from './SingleDatePicker.types';
 import { DatePickerCustomHeader } from './CustomHeader';
 import { CLX_COMPONENT } from '../../../theme/constants';
+import { Icon } from '../../Icon';
 
 /**
  * The imports in "react-datepicker" are strangely done and after migration to Vite
@@ -18,7 +19,6 @@ const DatePicker =
 
 const StyledDatePicker = styled.div`
   ${datePickerStyles}
-  ${singleDatePickerStyles}
 `;
 
 const SingleDatePicker = ({
@@ -45,6 +45,7 @@ const SingleDatePicker = ({
         dateFormat="d MMM, yyyy"
         disabled={isDisabled}
         endDate={endDate}
+        icon={<Icon name="calendar" size="sm" hasFixedSize />}
         maxDate={maxDate}
         minDate={minDate}
         open={defaultIsOpen}
@@ -71,6 +72,8 @@ const SingleDatePicker = ({
         showYearPicker={showYearPicker}
         startDate={startDate}
         yearItemNumber={24}
+        showIcon
+        toggleCalendarOnIconClick
         onChange={(newValue) => {
           if (showYearPicker) {
             setShowYearPicker(false);