Skip to content

Commit

Permalink
feat(new-hope): datepicker add more tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
iljs authored and Yakutoc committed Dec 4, 2024
1 parent afe89ed commit e8348bf
Show file tree
Hide file tree
Showing 30 changed files with 228 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ export type SelectedProps = {
* Цвет границы сегодняшнего дня.
*/
currentBorderColor?: string;
/**
* Толщина границы сегодняшнего дня.
*/
currentBorderWidth?: string;
/**
* Цвет фона нажатого элемента.
*/
Expand All @@ -48,6 +52,7 @@ export const addSelected = (args: SelectedProps) => {
selectedColor,
selectableBackgroundHover,
currentBorderColor,
currentBorderWidth,
} = args;

return `
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export const StyledItemRoot = styled.div<DateStructureProps & FocusProps>`
selectedColor: `var(${tokens.calendarSelectedItemColor})`,
selectableBackgroundHover: `var(${tokens.calendarSelectableItemBackgroundHover})`,
currentBorderColor: `var(${tokens.calendarCurrentItemBorderColor})`,
currentBorderWidth: `var(${tokens.calendarCurrentItemBorderWidth})`,
activeBackground: `var(${tokens.calendarActiveItemBackground})`,
activeColor: `var(${tokens.calendarActiveItemColor})`,
})};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit e8348bf

Please sign in to comment.