Revert "fix(new-hope): add new tokens to calendar and datepicker"

This reverts commit ab09961.
Yakutoc · Dec 4, 2024 · 0ed452c · 0ed452c
1 parent 03cfd27
commit 0ed452c
Show file tree

Hide file tree

Showing 9 changed files with 5 additions and 31 deletions.
diff --git a/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts b/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts
@@ -34,8 +34,6 @@ export const innerTokens = {
 export const tokens = {
     calendarWidth: '--plasma-calendar-width',
     calendarHeight: '--plasma-calendar-height',
-    calendarBorderWidth: '--plasma-calendar-border-width',
-    calendarBorderColor: '--plasma-calendar-border-color',
 
     /* Токены размера сетки лет */
     calendarYearsPadding: '--plasma-calendar-years-padding',
@@ -110,7 +108,6 @@ export const tokens = {
     calendarHeaderFontLineHeight: '--plasma-calendar-header-line-height',
     calendarHeaderFontWeight: '--plasma-calendar-header-font-weight',
     calendarHeaderFontWeightBold: '--plasma-calendar-header-font-weight-bold',
-    calendarHeaderArrowColor: '--plasma-calendar-header-arrow-color',
 
     /* Токены стрелок навигации календаря */
     iconButtonColor: '--plasma-calendar-icon-button-color',

diff --git a/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.styles.ts b/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.styles.ts
@@ -10,7 +10,6 @@ export const StyledCalendar = css`
 
     width: var(${tokens.calendarWidth});
     height: var(${tokens.calendarHeight});
-    border: var(${tokens.calendarBorderWidth}) solid var(${tokens.calendarBorderColor});
 `;
 
 export const IsOutOfRange = styled.div`

diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts
@@ -5,7 +5,6 @@ import { component, mergeConfig } from '../../../../engines';
 import { iconButtonConfig, iconButtonTokens } from '../../../IconButton';
 import { flexCenter } from '../../mixins';
 import { addFocus } from '../../../../mixins';
-import { IconDisclosureDownFill } from '../../../_Icon';
 
 const mergedIconButtonConfig = mergeConfig(iconButtonConfig);
 const IconButton = component(mergedIconButtonConfig);
@@ -132,7 +131,3 @@ export const StyledHeaderDouble = styled.button`
         outlineRadius: '0.563rem',
     })};
 `;
-
-export const StyledHeaderArrow = styled(IconDisclosureDownFill)`
-    color: var(${tokens.calendarHeaderArrowColor}, var(${tokens.calendarContentPrimaryColor}));
-`;
diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 
-import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
+import { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
 import { CalendarState } from '../../store/types';
 import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';
 import type { DateObject } from '../../Calendar.types';
@@ -17,7 +17,6 @@ import {
     StyledHeaderDate,
     StyledHeaderDouble,
     StyledNavigation,
-    StyledHeaderArrow,
 } from './CalendarHeader.styles';
 
 /**
@@ -59,7 +58,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
                         <StyledHeaderDate>{MONTH_NAMES[locale][date.monthIndex]}</StyledHeaderDate>
                         <StyledHeaderDate>
                             {date.year}
-                            <StyledHeaderArrow color="inherit" size={size === 'xs' ? 'xs' : 's'} />
+                            <IconDisclosureDownFill color="inherit" size={size === 'xs' ? 'xs' : 's'} />
                         </StyledHeaderDate>
                     </>
                 );
@@ -69,7 +68,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
                 return (
                     <StyledHeaderDate>
                         {date.year}
-                        <StyledHeaderArrow color="inherit" size={size === 'xs' ? 'xs' : 's'} />
+                        <IconDisclosureDownFill color="inherit" size={size === 'xs' ? 'xs' : 's'} />
                     </StyledHeaderDate>
                 );
             }
@@ -80,7 +79,7 @@ export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
                 return (
                     <StyledHeaderDate>
                         {yearValue}—{yearValue + YEAR_RENDER_COUNT - 1}
-                        <StyledHeaderArrow color="inherit" size={size === 'xs' ? 'xs' : 's'} />
+                        <IconDisclosureDownFill color="inherit" size={size === 'xs' ? 'xs' : 's'} />
                     </StyledHeaderDate>
                 );
             }

diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts
@@ -127,17 +127,13 @@ export const tokens = {
     textFieldTextBeforeMargin: '--plasma-date-picker-textfield__before-text-margin',
     textFieldTextAfterMargin: '--plasma-date-picker-textfield__after-text-margin',
     textFieldContentSlotColor: '--plasma-date-picker-textfield__content-color',
-    textFieldContentRightSlotColor: '--plasma-date-picker-textfield__content-right-color',
-    textFieldContentRightSlotColorHover: '--plasma-date-picker-textfield__content-right-color-hover',
 
     /** Токены календаря */
     calendarPaddingTop: '--plasma-date-picker-calendar-padding-top',
     calendarShadow: '--plasma-date-picker-calendar-shadow',
     calendarBorderRadius: '--plasma-date-picker-calendar-border-radius',
     calendarWidth: '--plasma-date-picker-calendar-width',
     calendarHeight: '--plasma-date-picker-calendar-height',
-    calendarBorderWidth: '--plasma-date-picker-calendar-border-width',
-    calendarBorderColor: '--plasma-date-picker-calendar-border-width',
 
     calendarYearsPadding: '--plasma-date-picker-calendar__years-padding',
     calendarYearItemBorderRadius: '--plasma-date-picker-calendar__year-item-border-radius',
@@ -200,7 +196,6 @@ export const tokens = {
     calendarHeaderFontLineHeight: '--plasma-date-picker-calendar__header-line-height',
     calendarHeaderFontWeight: '--plasma-date-picker-calendar__header-font-weight',
     calendarHeaderFontWeightBold: '--plasma-date-picker-calendar__header-font-weight-bold',
-    calendarHeaderArrowColor: '--plasma-date-picker-calendar__header-arrow-color',
 
     iconButtonColor: '--plasma-date-picker-icon-button__color',
     iconButtonBackgroundColor: '--plasma-date-picker-icon-button__background-color',

diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.styles.ts
@@ -40,8 +40,6 @@ export const baseCalendarTokens = `
 
     ${calendarBaseTokens.calendarWidth}: var(${tokens.calendarWidth});
     ${calendarBaseTokens.calendarHeight}: var(${tokens.calendarHeight});
-    ${calendarBaseTokens.calendarBorderWidth}: var(${tokens.calendarBorderWidth});
-    ${calendarBaseTokens.calendarBorderColor}: var(${tokens.calendarBorderColor});
 
     ${calendarBaseTokens.calendarYearsPadding}: var(${tokens.calendarYearsPadding});
     ${calendarBaseTokens.calendarYearItemBorderRadius}: var(${tokens.calendarYearItemBorderRadius});
@@ -103,7 +101,6 @@ export const baseCalendarTokens = `
     ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(${tokens.calendarHeaderFontLineHeight});
     ${calendarBaseTokens.calendarHeaderFontWeight}: var(${tokens.calendarHeaderFontWeight});
     ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(${tokens.calendarHeaderFontWeightBold});
-    ${calendarBaseTokens.calendarHeaderArrowColor}: var(${tokens.calendarHeaderArrowColor});
     
     ${calendarBaseTokens.iconButtonHeight}: var(${tokens.iconButtonHeight});
     ${calendarBaseTokens.iconButtonWidth}: var(${tokens.iconButtonWidth});

diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts
@@ -68,8 +68,6 @@ export const StyledInput = styled(TextField)`
     ${textFieldTokens.textBeforeMargin}: var(${tokens.textFieldTextBeforeMargin});
     ${textFieldTokens.textAfterMargin}: var(${tokens.textFieldTextAfterMargin});
     ${textFieldTokens.contentSlotColor}: var(${tokens.textFieldContentSlotColor}, var(${tokens.textFieldColor}));
-    ${textFieldTokens.contentSlotRightColor}: var(${tokens.textFieldContentRightSlotColor}, var(${textFieldTokens.contentSlotColor}));
-    ${textFieldTokens.contentSlotRightColorHover}: var(${tokens.textFieldContentRightSlotColorHover}, var(${textFieldTokens.contentSlotRightColor}));
 
     &.${classes.datePickerError} {
         ${textFieldTokens.backgroundColor}: var(${tokens.textFieldBackgroundErrorColor});

diff --git a/packages/sdds-cs/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-cs/src/components/DatePicker/DatePicker.config.ts
@@ -64,8 +64,6 @@ export const config = {
                 ${tokens.calendarOutlineFocusColor}: var(--surface-accent);
                 ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default);
                 ${tokens.calendarContentSecondaryColor}: var(--text-secondary);
-                ${tokens.calendarHeaderArrowColor}: var(--text-accent);
-                ${tokens.calendarBorderColor}: var(--outline-solid-primary);
 
                 ${tokens.iconButtonColor}: var(--text-accent);
                 ${tokens.iconButtonBackgroundColor}: var(--surface-clear);
@@ -74,9 +72,6 @@ export const config = {
                 ${tokens.iconButtonColorActive}: var(--text-primary-hover);
                 ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear);
                 ${tokens.iconButtonFocusColor}: var(--surface-accent);
-
-                ${tokens.textFieldContentRightSlotColor}: var(--text-accent);
-                ${tokens.textFieldContentRightSlotColorHover}: var(--text-accent-hover);
             `,
         },
         size: {
@@ -131,7 +126,6 @@ export const config = {
                 ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
                 ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
 
-                ${tokens.calendarBorderWidth}: 0.125rem;
                 ${tokens.calendarWidth}: 19.5rem;
                 ${tokens.calendarBorderRadius}: 0.875rem;
 

diff --git a/packages/sdds-cs/src/components/DatePicker/DatePicker.stories.tsx b/packages/sdds-cs/src/components/DatePicker/DatePicker.stories.tsx
@@ -151,7 +151,7 @@ const ActionButton = ({ size }) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return (
         <IconButton view="clear" size={size}>
-            <IconPlasma size={iconSize} color="var(--text-accent)" />
+            <IconPlasma size={iconSize} color="var(--text-primary)" />
         </IconButton>
     );
 };