diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts b/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts index 261fe65776..f043b842f1 100644 --- a/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; @@ -165,6 +167,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; @@ -239,6 +243,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; @@ -313,6 +319,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts index f706a3a68c..a8bc0ffe83 100644 --- a/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -166,6 +168,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -240,6 +244,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -315,6 +321,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts index df75141842..60b680b817 100644 --- a/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts @@ -173,6 +173,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -296,6 +298,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -419,6 +423,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -542,6 +548,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; ${tokens.calendarHeaderArrowGap}: 0; diff --git a/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts b/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts index ec01678d1c..8bd43c4895 100644 --- a/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts +++ b/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts @@ -130,6 +130,7 @@ export const tokens = { calendarSelectedItemColor: '--plasma-calendar-selected-item-color', calendarSelectableItemBackgroundHover: '--plasma-calendar-selectable-item-bg-hover', calendarCurrentItemBorderColor: '--plasma-calendar-current-item-border-color', + calendarCurrentItemBorderWidth: '--plasma-calendar-current-item-border-width', calendarCurrentItemBackgroundHover: '--plasma-calendar-current-item-bg-hover', calendarCurrentItemColorHover: '--plasma-calendar-current-item-color-hover', calendarCurrentItemChildBackgroundHover: '--plasma-calendar-current-item-child-bg-hover', diff --git a/packages/plasma-new-hope/src/components/Calendar/mixins/selected.ts b/packages/plasma-new-hope/src/components/Calendar/mixins/selected.ts index c43f51145c..1122f8e474 100644 --- a/packages/plasma-new-hope/src/components/Calendar/mixins/selected.ts +++ b/packages/plasma-new-hope/src/components/Calendar/mixins/selected.ts @@ -29,6 +29,10 @@ export type SelectedProps = { * Цвет границы сегодняшнего дня. */ currentBorderColor?: string; + /** + * Толщина границы сегодняшнего дня. + */ + currentBorderWidth?: string; /** * Цвет фона нажатого элемента. */ @@ -48,6 +52,7 @@ export const addSelected = (args: SelectedProps) => { selectedColor, selectableBackgroundHover, currentBorderColor, + currentBorderWidth, } = args; return ` @@ -75,7 +80,7 @@ export const addSelected = (args: SelectedProps) => { }; &.${classes.currentItem} { - border: 0.063rem solid ${currentBorderColor}; + border: ${currentBorderWidth} solid ${currentBorderColor}; &.${classes.selectedItem} { background-color: initial; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.ts index 0ae983f770..df72b7b5df 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.ts @@ -95,6 +95,7 @@ export const StyledItemRoot = styled.div` selectedColor: `var(${tokens.calendarSelectedItemColor})`, selectableBackgroundHover: `var(${tokens.calendarSelectableItemBackgroundHover})`, currentBorderColor: `var(${tokens.calendarCurrentItemBorderColor})`, + currentBorderWidth: `var(${tokens.calendarCurrentItemBorderWidth})`, activeBackground: `var(${tokens.calendarActiveItemBackground})`, activeColor: `var(${tokens.calendarActiveItemColor})`, })}; diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts index 79a00f454e..0c4642ed50 100644 --- a/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts +++ b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts @@ -137,7 +137,7 @@ export const tokens = { 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', + calendarBorderColor: '--plasma-date-picker-calendar-border-color', calendarYearsPadding: '--plasma-date-picker-calendar__years-padding', calendarYearItemBorderRadius: '--plasma-date-picker-calendar__year-item-border-radius', @@ -219,6 +219,7 @@ export const tokens = { calendarSelectedItemColor: '--plasma-date-picker-calendar__selected-item-color', calendarSelectableItemBackgroundHover: '--plasma-date-picker-calendar__selectable-item-background-hover', calendarCurrentItemBorderColor: '--plasma-date-picker-calendar__current-item-border-color', + calendarCurrentItemBorderWidth: '--plasma-date-picker-calendar__current-item-border-width', calendarCurrentItemBackgroundHover: '--plasma-date-picker-calendar__current-item-background-hover', calendarCurrentItemColorHover: '--plasma-date-picker-calendar__current-item-color-hover', calendarCurrentItemChildBackgroundHover: '--plasma-date-picker-calendar__current-item-child-background-hover', diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.styles.ts index 65e1ec62f1..b894ca0a58 100644 --- a/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.styles.ts +++ b/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.styles.ts @@ -19,6 +19,7 @@ export const baseCalendarTokens = ` ${calendarBaseTokens.calendarSelectedItemColor}: var(${tokens.calendarSelectedItemColor}); ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(${tokens.calendarSelectableItemBackgroundHover}); ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(${tokens.calendarCurrentItemBorderColor}); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: var(${tokens.calendarCurrentItemBorderWidth}); ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: var(${tokens.calendarCurrentItemBackgroundHover}); ${calendarBaseTokens.calendarCurrentItemColorHover}: var(${tokens.calendarCurrentItemColorHover}); ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(${tokens.calendarCurrentItemChildBackgroundHover}); diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts index 8853b3379a..9b582efe62 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts @@ -93,6 +93,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; @@ -167,6 +169,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; @@ -241,6 +245,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; @@ -315,6 +321,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts index 0bc64f131b..a2b246bb81 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts @@ -93,6 +93,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -168,6 +170,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -242,6 +246,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -317,6 +323,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.config.ts index 7427e1ad4f..a906a9e764 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.config.ts @@ -175,6 +175,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -298,6 +300,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -421,6 +425,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -544,6 +550,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; ${tokens.calendarHeaderArrowGap}: 0; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts index 8853b3379a..9b582efe62 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts @@ -93,6 +93,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; @@ -167,6 +169,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; @@ -241,6 +245,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; @@ -315,6 +321,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts index 0bc64f131b..a2b246bb81 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts @@ -93,6 +93,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -168,6 +170,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -242,6 +246,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -317,6 +323,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.config.ts index 1254870fa4..538d1747ff 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.config.ts @@ -180,6 +180,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -305,6 +307,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -430,6 +434,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -556,6 +562,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; ${tokens.calendarHeaderArrowGap}: 0; diff --git a/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts b/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts index 261fe65776..f043b842f1 100644 --- a/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; @@ -165,6 +167,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; @@ -239,6 +243,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; @@ -313,6 +319,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts index f706a3a68c..a8bc0ffe83 100644 --- a/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -166,6 +168,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -240,6 +244,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -315,6 +321,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts index 0fcfd9b11f..5b8a214370 100644 --- a/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts @@ -178,6 +178,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -303,6 +305,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -428,6 +432,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -554,6 +560,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; ${tokens.calendarHeaderArrowGap}: 0; diff --git a/packages/sdds-cs/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-cs/src/components/Calendar/CalendarBase.config.ts index 261fe65776..5e8568099f 100644 --- a/packages/sdds-cs/src/components/Calendar/CalendarBase.config.ts +++ b/packages/sdds-cs/src/components/Calendar/CalendarBase.config.ts @@ -8,24 +8,25 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-accent); ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-accent); ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-accent); + ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-accent); ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-transparent-accent); ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-primary); ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarHeaderArrowColor}: var(--text-accent); - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: var(--text-accent); ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); @@ -91,6 +92,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.125rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; @@ -165,6 +168,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.125rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; @@ -239,6 +244,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.125rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; @@ -313,6 +320,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.125rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/sdds-cs/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-cs/src/components/Calendar/CalendarDouble.config.ts index f706a3a68c..100cb6c3e1 100644 --- a/packages/sdds-cs/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-cs/src/components/Calendar/CalendarDouble.config.ts @@ -8,23 +8,23 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-accent); ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-accent); ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-accent); + ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-accent); ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-transparent-accent); ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-accent); ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-primary); ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarHeaderArrowColor}: var(--text-accent); ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); @@ -91,6 +91,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.125rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -166,6 +168,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.125rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -240,6 +244,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.125rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -315,6 +321,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.125rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/sdds-cs/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-cs/src/components/DatePicker/DatePicker.config.ts index 93009a6c8a..dfde797e15 100644 --- a/packages/sdds-cs/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-cs/src/components/DatePicker/DatePicker.config.ts @@ -49,20 +49,20 @@ export const config = { ${tokens.calendarShadow}: var(--shadow-down-soft-s); ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); ${tokens.calendarBackgroundColor}: var(--surface-solid-card); - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${tokens.calendarSelectedItemBackground}: var(--surface-accent); ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-accent); ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${tokens.calendarCurrentItemBackgroundHover}: transparent; ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-accent); + ${tokens.calendarActiveItemBackground}: var(--surface-accent); ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); ${tokens.calendarHoveredItemBackground}: var(--surface-accent); ${tokens.calendarHoveredItemColor}: var(--text-primary); ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${tokens.calendarContentPrimaryColor}: var(--text-primary); ${tokens.calendarContentSecondaryColor}: var(--text-secondary); ${tokens.calendarHeaderArrowColor}: var(--text-accent); ${tokens.calendarBorderColor}: var(--outline-solid-primary); @@ -187,6 +187,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.125rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; diff --git a/packages/sdds-cs/src/components/DatePicker/DatePicker.stories.tsx b/packages/sdds-cs/src/components/DatePicker/DatePicker.stories.tsx index c8ce6db3b9..08928d5a25 100644 --- a/packages/sdds-cs/src/components/DatePicker/DatePicker.stories.tsx +++ b/packages/sdds-cs/src/components/DatePicker/DatePicker.stories.tsx @@ -2,7 +2,7 @@ import React, { ComponentProps, useRef, useState } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; -import { IconPlasma } from '@salutejs/plasma-icons'; +import { IconPlasma, IconDisclosureDown } from '@salutejs/plasma-icons'; import { IconButton } from '../IconButton/IconButton'; @@ -87,7 +87,7 @@ const StoryDefault = ({ valueError={valueError} valueSuccess={valueSuccess} contentLeft={enableContentLeft ? : undefined} - contentRight={enableContentRight ? : undefined} + contentRight={enableContentRight ? : undefined} onBlur={onBlur} onFocus={onFocus} onToggle={(is) => setIsOpen(is)} @@ -151,7 +151,7 @@ const ActionButton = ({ size }) => { const iconSize = size === 'xs' ? 'xs' : 's'; return ( - + ); }; @@ -199,9 +199,13 @@ const StoryRange = ({ contentLeft={enableContentLeft ? : undefined} contentRight={enableContentRight ? : undefined} firstTextfieldContentLeft={enableFirstTextfieldContentLeft ? : undefined} - firstTextfieldContentRight={enableFirstTextfieldContentRight ? : undefined} + firstTextfieldContentRight={ + enableFirstTextfieldContentRight ? : undefined + } secondTextfieldContentLeft={enableSecondTextfieldContentLeft ? : undefined} - secondTextfieldContentRight={enableSecondTextfieldContentRight ? : undefined} + secondTextfieldContentRight={ + enableSecondTextfieldContentRight ? : undefined + } firstTextfieldTextBefore={ showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore } diff --git a/packages/sdds-dfa/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-dfa/src/components/Calendar/CalendarBase.config.ts index 261fe65776..f043b842f1 100644 --- a/packages/sdds-dfa/src/components/Calendar/CalendarBase.config.ts +++ b/packages/sdds-dfa/src/components/Calendar/CalendarBase.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; @@ -165,6 +167,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; @@ -239,6 +243,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; @@ -313,6 +319,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts index f706a3a68c..a8bc0ffe83 100644 --- a/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -166,6 +168,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -240,6 +244,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -315,6 +321,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/sdds-dfa/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-dfa/src/components/DatePicker/DatePicker.config.ts index df75141842..60b680b817 100644 --- a/packages/sdds-dfa/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-dfa/src/components/DatePicker/DatePicker.config.ts @@ -173,6 +173,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -296,6 +298,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -419,6 +423,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -542,6 +548,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; ${tokens.calendarHeaderArrowGap}: 0; diff --git a/packages/sdds-finportal/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-finportal/src/components/Calendar/CalendarBase.config.ts index 261fe65776..f043b842f1 100644 --- a/packages/sdds-finportal/src/components/Calendar/CalendarBase.config.ts +++ b/packages/sdds-finportal/src/components/Calendar/CalendarBase.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; @@ -165,6 +167,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; @@ -239,6 +243,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; @@ -313,6 +319,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/sdds-finportal/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-finportal/src/components/Calendar/CalendarDouble.config.ts index f706a3a68c..a8bc0ffe83 100644 --- a/packages/sdds-finportal/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-finportal/src/components/Calendar/CalendarDouble.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -166,6 +168,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -240,6 +244,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -315,6 +321,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/sdds-finportal/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-finportal/src/components/DatePicker/DatePicker.config.ts index f94644a9c3..e41aa3915b 100644 --- a/packages/sdds-finportal/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-finportal/src/components/DatePicker/DatePicker.config.ts @@ -173,6 +173,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -296,6 +298,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -419,6 +423,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -542,6 +548,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; ${tokens.calendarHeaderArrowGap}: 0; diff --git a/packages/sdds-serv/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-serv/src/components/Calendar/CalendarBase.config.ts index 261fe65776..f043b842f1 100644 --- a/packages/sdds-serv/src/components/Calendar/CalendarBase.config.ts +++ b/packages/sdds-serv/src/components/Calendar/CalendarBase.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; @@ -165,6 +167,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; @@ -239,6 +243,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; @@ -313,6 +319,8 @@ export const config = { ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts index f706a3a68c..a8bc0ffe83 100644 --- a/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts @@ -91,6 +91,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -166,6 +168,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -240,6 +244,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; @@ -315,6 +321,8 @@ export const config = { ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; diff --git a/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts index f94644a9c3..e41aa3915b 100644 --- a/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts @@ -173,6 +173,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -296,6 +298,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -419,6 +423,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; ${tokens.calendarHeaderArrowGap}: 0.5rem; @@ -542,6 +548,8 @@ export const config = { ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; ${tokens.calendarHeaderArrowGap}: 0;