From 496b57bc57ad026d85beb94d755e938a26e28351 Mon Sep 17 00:00:00 2001 From: Krivonos Aleksandr Date: Thu, 26 Oct 2023 15:30:36 +0300 Subject: [PATCH] feat(plasma-new-hope): separate classes & tokens; update snapshots --- .../CalendarDouble/CalendarDouble.styles.ts | 4 +- .../src/components/Calendar/shared/mixins.ts | 139 +++--------------- .../src/components/Calendar/shared/tokens.ts | 24 +++ .../CalendarDayItem/CalendarDayItem.styles.ts | 67 +++++---- .../ui/CalendarDayItem/CalendarDayItem.tsx | 23 +-- .../ui/CalendarDays/CalendarDays.styles.ts | 2 +- .../CalendarHeader/CalendarHeader.styles.ts | 31 ++-- .../CalendarMonths/CalendarMonths.styles.ts | 23 ++- .../ui/CalendarMonths/CalendarMonths.tsx | 9 +- .../ui/CalendarYears/CalendarYears.styles.ts | 14 +- .../ui/CalendarYears/CalendarYears.tsx | 7 +- .../src/components/_Icon/IconRoot.tsx | 1 - .../plasma-new-hope/src/mixins/addFocus.ts | 3 - .../plasma-new-hope/src/mixins/fontStyles.ts | 12 +- packages/plasma-new-hope/src/utils/index.ts | 2 +- 15 files changed, 144 insertions(+), 217 deletions(-) create mode 100644 packages/plasma-new-hope/src/components/Calendar/shared/tokens.ts diff --git a/packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.styles.ts b/packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.styles.ts index d863ab9cd4..47fceb85ad 100644 --- a/packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.styles.ts @@ -1,6 +1,8 @@ import { css } from '@linaria/core'; import { styled } from '@linaria/react'; +import { tokens } from '../shared/tokens'; + export const StyledCalendar = css` position: relative; user-select: none; @@ -14,7 +16,7 @@ export const StyledCalendar = css` `; export const StyledSeparator = styled.div` - background-color: var(--plasma-colors-surface-liquid02); + background-color: var(${tokens.colorSurfaceLiquid02}); min-width: 0.063rem; margin: 0.5rem 0 1.5rem; `; diff --git a/packages/plasma-new-hope/src/components/Calendar/shared/mixins.ts b/packages/plasma-new-hope/src/components/Calendar/shared/mixins.ts index 180320c9f3..23b09c2ddb 100644 --- a/packages/plasma-new-hope/src/components/Calendar/shared/mixins.ts +++ b/packages/plasma-new-hope/src/components/Calendar/shared/mixins.ts @@ -2,17 +2,17 @@ import { styled } from '@linaria/react'; import { addFocus } from '../../../mixins/addFocus'; -export const flexCenter = () => ({ - display: 'flex', - 'justify-content': 'center', - 'align-items': 'center', -}); +export const flexCenter = ` + display: flex; + justify-content: center; + align-items: center; +`; -export const flexSpaceBetween = () => ({ - display: 'flex', - 'justify-content': 'space-between', - 'align-items': 'center', -}); +export const flexSpaceBetween = ` + display: flex; + justify-content: space-between; + align-items: center; +`; /** * Миксин для установки синтетического фокуса на выбранной кнопке. @@ -34,43 +34,36 @@ export const buttonFocus = styled.button` /** * Миксины для изменения стиля выбранного дня. */ -const active = () => ` +const active = ` &:active { background-color: var(--plasma-colors-primary); color: var(--plasma-colors-surface-solid03); - font-family: var(--plasma-typo-body-s-font-family); - font-size: var(--plasma-typo-body-s-font-size); - font-style: var(--plasma-typo-body-s-font-style); - letter-spacing: var(--plasma-typo-body-s-letter-spacing); - line-height: var(--plasma-typo-body-s-line-height); font-weight: var(--plasma-typo-body-s-bold-font-weight); } `; -export const selectedMixin = () => ` +/* + * Если использовать токены и классы из ./tokens rollup ругается на этот миксин + */ +export const selectedMixin = ` outline: none; cursor: pointer; - &:hover:not(.selected) { + &:hover:not(.item-selected) { background-color: var(--plasma-colors-surface-liquid02); - ${active()}; + ${String(active)}; }; - &.selected { + &.item-selected { border: 0; background-color: var(--plasma-colors-primary); color: var(--plasma-colors-background-primary); cursor: default; - font-family: var(--plasma-typo-body-s-font-family); - font-size: var(--plasma-typo-body-s-font-size); - font-style: var(--plasma-typo-body-s-font-style); - letter-spacing: var(--plasma-typo-body-s-letter-spacing); - line-height: var(--plasma-typo-body-s-line-height); font-weight: var(--plasma-typo-body-s-bold-font-weight); }; - &.current { + &.item-current { border: 0.063rem solid var(--plasma-colors-primary); &:hover { @@ -86,101 +79,13 @@ export const selectedMixin = () => ` } }; - &.hovered:hover { + &.item-hovered, &.item-hovered:hover { background-color: var(--plasma-colors-accent); color: var(--plasma-colors-background-primary); cursor: pointer; - font-family: var(--plasma-typo-body-s-font-family); - font-size: var(--plasma-typo-body-s-font-size); - font-style: var(--plasma-typo-body-s-font-style); - letter-spacing: var(--plasma-typo-body-s-letter-spacing); - line-height: var(--plasma-typo-body-s-line-height); font-weight: var(--plasma-typo-body-s-bold-font-weight); - ${active()}; + ${String(active)}; } - ${active()}; + ${String(active)}; `; - -// export const buttonFocus = styled.button` -// --add-focus-outline-offset: 0.125rem; -// --add-focus-outline-size: 0.063rem; -// --add-focus-outline-radius: 0.563rem; -// --add-focus-outline-transition: box-shadow 0.2s ease-in-out; -// --add-focus-outline-color: var(--plasma-colors-button-focused); -// ${addFocus()}; - -// border: none; -// background-color: transparent; -// padding: 0; -// `; - -// /** -// * Миксины для изменения стиля выбранного дня. -// */ -// const active = { -// '&:active': { -// 'background-color': 'var(--plasma-colors-primary)', -// color: 'var(--plasma-colors-surface-solid03)', -// 'font-family': 'var(--plasma-typo-body-s-font-family)', -// 'font-size': 'var(--plasma-typo-body-s-font-size)', -// 'font-style': 'var(--plasma-typo-body-s-font-style)', -// 'letter-spacing': 'var(--plasma-typo-body-s-letter-spacing)', -// 'line-height': 'var(--plasma-typo-body-s-line-height)', -// 'font-weight': 'var(--plasma-typo-body-s-bold-font-weight)', -// }, -// }; - -// export const selectedMixin = () => ({ -// outline: 'none', -// cursor: 'pointer', - -// '&.selected': { -// border: 0, -// 'background-color': 'var(--plasma-colors-primary)', -// color: 'var(--plasma-colors-background-primary)', -// cursor: 'default', -// 'font-family': 'var(--plasma-typo-body-s-font-family)', -// 'font-size': 'var(--plasma-typo-body-s-font-size)', -// 'font-style': 'var(--plasma-typo-body-s-font-style)', -// 'letter-spacing': 'var(--plasma-typo-body-s-letter-spacing)', -// 'line-height': 'var(--plasma-typo-body-s-line-height)', -// 'font-weight': 'var(--plasma-typo-body-s-bold-font-weight)', -// }, - -// '&:hover:not(.selected)': { -// 'background-color': 'var(--plasma-colors-surface-liquid02)', -// ...active, -// }, - -// '&.current': { -// border: '0.063rem solid var(--plasma-colors-primary)', - -// '&:hover': { -// border: '0.063rem solid var(--plasma-colors-primary)', -// 'background-color': 'transparent', -// color: 'var(--plasma-colors-primary)', -// ...active, - -// '& > div': { -// 'background-color': 'var(--plasma-colors-surface-liquid02)', -// 'min-width': 'var(--selected-min-width)', -// 'min-height': 'var(--selected-min-height)', -// }, -// }, -// }, - -// '&.hovered:hover': { -// 'background-color': 'var(--plasma-colors-accent)', -// color: 'var(--plasma-colors-background-primary)', -// cursor: 'pointer', -// 'font-family': 'var(--plasma-typo-body-s-font-family)', -// 'font-size': 'var(--plasma-typo-body-s-font-size)', -// 'font-style': 'var(--plasma-typo-body-s-font-style)', -// 'letter-spacing': 'var(--plasma-typo-body-s-letter-spacing)', -// 'line-height': 'var(--plasma-typo-body-s-line-height)', -// 'font-weight': 'var(--plasma-typo-body-s-bold-font-weight)', -// }, - -// ...active, -// }); diff --git a/packages/plasma-new-hope/src/components/Calendar/shared/tokens.ts b/packages/plasma-new-hope/src/components/Calendar/shared/tokens.ts new file mode 100644 index 0000000000..9bcfa7229d --- /dev/null +++ b/packages/plasma-new-hope/src/components/Calendar/shared/tokens.ts @@ -0,0 +1,24 @@ +export const classes = { + dayOfWeek: 'day-of-week', + dayDisabled: 'day-disabled', + dayDisabledCurrent: 'day-disabled-current', + daySideInRange: 'day-side-in-range', + dayInRange: 'day-in-range', + daySideLeft: 'day-side-left', + daySideRight: 'day-side-right', + selectableItem: 'item-selectable', + selectedItem: 'item-selected', + currentItem: 'item-current', + hoveredItem: 'item-hovered', +}; + +export const tokens = { + colorPrimary: '--plasma-colors-primary', + colorSecondary: '--plasma-colors-secondary', + colorTertiary: '--plasma-colors-tertiary', + colorAccent: '--plasma-colors-accent', + colorButtonFocused: '--plasma-colors-button-focused', + colorSurfaceLiquid02: '--plasma-colors-surface-liquid02', + colorSurfaceLiquid03: '--plasma-colors-surface-solid03', + colorBackgroundPrimary: '--plasma-colors-background-primary', +}; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts index 668e1c1d69..9c68b795e2 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts @@ -4,6 +4,7 @@ import { FocusProps } from '@salutejs/plasma-core'; import type { DayProps } from '../../shared/types'; import { flexCenter, selectedMixin } from '../../shared/mixins'; import { addFocus, bodyS } from '../../../../mixins'; +import { classes, tokens } from '../../shared/tokens'; const inRange = () => ` &:before { @@ -12,7 +13,7 @@ const inRange = () => ` position: absolute; width: 2.5rem; height: 1.875rem; - background: var(--plasma-colors-surface-liquid02); + background: var(${tokens.colorSurfaceLiquid02}); } `; @@ -23,51 +24,52 @@ const sideInRange = () => ` position: absolute; width: 0.313rem; height: 1.875rem; - background: var(--plasma-colors-surface-liquid02); + background: var(${tokens.colorSurfaceLiquid02}); } `; export const StyledDay = styled.div<{ offset: number }>` border-radius: 0.375rem; - align-items: center; - ${flexCenter()}; + ${String(flexCenter)}; - &.left { + &.${String(classes.dayInRange)} { + ${inRange()}; + } + + &.${String(classes.daySideInRange)} { + ${sideInRange()}; + } + + &.${String(classes.daySideLeft)} { &:before { left: ${({ offset }) => `${offset}px`}; } } - &.right { + &.${String(classes.daySideRight)} { &:before { right: ${({ offset }) => `${offset}px`}; } } - - &.side-in-range { - ${sideInRange()}; - } - - &.in-range { - ${inRange()}; - } `; const dayOfWeek = () => ` - color: var(--plasma-colors-tertiary); + color: var(${tokens.colorTertiary}); `; const selectable = () => ` - --add-focus-outline-offset: 0.063rem; - --add-focus-outline-size: 0.063rem; - --add-focus-outline-radius: 0.563rem; - --add-focus-outline-transition: box-shadow 0.2s ease-in-out; - --add-focus-outline-color: var(--plasma-colors-button-focused); - --selected-min-width: 2.25rem; - --selected-min-height: 1.75rem; - ${selectedMixin()}; - ${addFocus()}; + &.${String(classes.selectableItem)} { + --add-focus-outline-offset: 0.063rem; + --add-focus-outline-size: 0.063rem; + --add-focus-outline-radius: 0.563rem; + --add-focus-outline-transition: box-shadow 0.2s ease-in-out; + --add-focus-outline-color: var(${tokens.colorButtonFocused}); + --selected-min-width: 2.25rem; + --selected-min-height: 1.75rem; + ${String(selectedMixin)}; + ${addFocus()}; + } `; const disabledDay = () => ` @@ -75,7 +77,7 @@ const disabledDay = () => ` --add-focus-outline-size: 0.063rem; --add-focus-outline-radius: 0.563rem; --add-focus-outline-transition: box-shadow 0.2s ease-in-out; - --add-focus-outline-color: var(--plasma-colors-button-focused); + --add-focus-outline-color: var(${tokens.colorButtonFocused}); cursor: not-allowed; opacity: 0.4; @@ -84,11 +86,12 @@ const disabledDay = () => ` `; const disabledCurrentDay = () => ` + ${disabledDay()}; --add-focus-outline-offset: 0.125rem; `; export const StyledDayRoot = styled.div` - ${bodyS()}; + ${String(bodyS)}; position: relative; box-sizing: border-box; @@ -98,23 +101,23 @@ export const StyledDayRoot = styled.div` border-radius: 0.5rem; - ${flexCenter()}; + ${String(flexCenter)}; color: ${({ isDayInCurrentMonth }) => - isDayInCurrentMonth ? 'var(--plasma-colors-primary)' : 'var(--plasma-colors-secondary)'}; + isDayInCurrentMonth ? `var(${tokens.colorPrimary})` : `var(${tokens.colorSecondary})`}; visibility: ${({ isDayInCurrentMonth, isDouble }) => (!isDayInCurrentMonth && isDouble ? 'hidden' : 'visible')}; ${selectable()}; - &.day-of-week { + &.${String(classes.dayOfWeek)} { ${dayOfWeek()}; } - &.disabled { + &.${String(classes.dayDisabled)} { ${disabledDay()}; } - &.disabled-current { + &.${String(classes.dayDisabledCurrent)} { ${disabledCurrentDay()}; } `; @@ -133,5 +136,5 @@ export const StyledEvent = styled.div<{ color?: string }>` height: 0.188rem; border-radius: 50%; - background-color: ${({ color = 'var(--plasma-colors-accent)' }) => color}; + background-color: ${({ color = `var(${tokens.colorAccent})` }) => color}; `; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.tsx b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.tsx index bcea6867a8..30b4b28c85 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.tsx +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.tsx @@ -1,6 +1,7 @@ import React, { forwardRef, memo } from 'react'; import { cx } from '../../../../utils'; +import { classes } from '../../shared/tokens'; import type { CalendarDayItemProps } from './CalendarDayItem.types'; import { StyledDay, StyledDayRoot, StyledEvent, StyledEvents } from './CalendarDayItem.styles'; @@ -35,16 +36,17 @@ export const CalendarDayItem = memo( }, outerRef, ) => { - const selectableClass = !dayOfWeek && !disabled ? 'selectable' : undefined; - const selectedClass = isSelected ? 'selected' : undefined; - const hoveredClass = isHovered ? 'hovered' : undefined; - const dayOfWeekClass = dayOfWeek ? 'day-of-week' : undefined; - const disabledClass = disabled && !isCurrent ? 'disabled' : undefined; - const disabledCurrentClass = disabled && isCurrent ? 'disabled-current' : undefined; - const sideInRangeLeft = sideInRange === 'left' ? 'left' : undefined; - const sideInRangeRight = sideInRange === 'right' ? 'right' : undefined; - const sideInRangeClass = sideInRange ? 'side-in-range' : undefined; - const inRangeStyle = inRange ? 'in-range' : undefined; + const selectableClass = !dayOfWeek && !disabled ? classes.selectableItem : undefined; + const selectedClass = isSelected ? classes.selectedItem : undefined; + const currentClass = isCurrent ? classes.currentItem : undefined; + const hoveredClass = isHovered ? classes.hoveredItem : undefined; + const dayOfWeekClass = dayOfWeek ? classes.dayOfWeek : undefined; + const disabledClass = disabled && !isCurrent ? classes.dayDisabled : undefined; + const disabledCurrentClass = disabled && isCurrent ? classes.dayDisabledCurrent : undefined; + const sideInRangeLeft = sideInRange === 'left' ? classes.daySideLeft : undefined; + const sideInRangeRight = sideInRange === 'right' ? classes.daySideRight : undefined; + const sideInRangeClass = sideInRange ? classes.daySideInRange : undefined; + const inRangeStyle = inRange ? classes.dayInRange : undefined; const sideOffset = !isSelected && isCurrent ? -1 : 0; return ( @@ -54,6 +56,7 @@ export const CalendarDayItem = memo( dayOfWeekClass, selectableClass, selectedClass, + currentClass, disabledClass, disabledCurrentClass, hoveredClass, diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDays/CalendarDays.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDays/CalendarDays.styles.ts index 17ff102b3b..4da5a22d29 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDays/CalendarDays.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDays/CalendarDays.styles.ts @@ -3,7 +3,7 @@ import { styled } from '@linaria/react'; import { flexCenter } from '../../shared/mixins'; export const StyledFlex = styled.div` - ${flexCenter()}; + ${String(flexCenter)}; `; export const StyledCalendarDays = 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 index 5b19b7bb58..dc0a5aac9f 100644 --- 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 @@ -1,36 +1,34 @@ import { styled } from '@linaria/react'; -import { buttonFocus, flexCenter } from '../../shared/mixins'; +import { buttonFocus, flexCenter, flexSpaceBetween } from '../../shared/mixins'; import { h4Bold } from '../../../../mixins'; +import { tokens } from '../../shared/tokens'; export const StyledCalendarHeader = styled.div` - ${h4Bold()}; padding: 1rem 1.5rem 0; - display: flex; - justify-content: space-between; - align-items: center; + + ${String(flexSpaceBetween)}; + ${String(h4Bold)}; `; export const StyledHeader = styled(buttonFocus)` - ${h4Bold()}; - - color: var(--plasma-colors-primary); + color: var(${tokens.colorPrimary}); cursor: pointer; padding: 0.5rem 0; - display: flex; - justify-content: space-between; - align-items: center; + + ${String(h4Bold)}; + ${String(flexSpaceBetween)}; `; export const StyledHeaderDouble = styled.h4` - ${h4Bold()}; + ${String(h4Bold)}; margin-top: 0; margin-bottom: 0; padding: 0.5rem 0; flex: 1; - ${flexCenter()}; + ${String(flexCenter)}; &:first-of-type { margin-right: 3rem; @@ -44,9 +42,8 @@ export const StyledHeaderDouble = styled.h4` export const StyledArrows = styled.div` padding: 0.5rem 0; width: 5.5rem; - display: flex; - justify-content: space-between; - align-items: center; + + ${String(flexSpaceBetween)}; `; export const StyledArrow = styled(buttonFocus)` @@ -57,5 +54,5 @@ export const StyledArrow = styled(buttonFocus)` export const StyledNavigation = styled.div` width: 100%; - ${flexCenter()}; + ${String(flexCenter)}; `; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts index 498fef582f..1c57869c28 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts @@ -1,9 +1,8 @@ import { styled } from '@linaria/react'; -import type { FocusProps } from '@salutejs/plasma-core'; import { flexCenter, selectedMixin } from '../../shared/mixins'; -import type { MonthsProps } from '../../shared/types'; import { addFocus, bodyS } from '../../../../mixins'; +import { tokens } from '../../shared/tokens'; export const StyledCalendarMonths = styled.div` padding: 0.5rem 1.5rem 1.5rem; @@ -11,31 +10,29 @@ export const StyledCalendarMonths = styled.div` `; export const StyledFlex = styled.div` - display: flex; - justify-content: center; - align-items: center; + ${String(flexCenter)}; `; export const StyledMonth = styled.div` border-radius: 0.438rem; - ${flexCenter()}; + ${String(flexCenter)}; `; -const selectable = () => ` +const selectable = ` --add-focus-outline-offset: 0.063rem; --add-focus-outline-size: 0.063rem; --add-focus-outline-radius: 0.563rem; --add-focus-outline-transition: box-shadow 0.2s ease-in-out; - --add-focus-outline-color: var(--plasma-colors-button-focused); + --add-focus-outline-color: var(${tokens.colorButtonFocused}); --selected-min-width: 5.25rem; --selected-min-height: 3.25rem; - ${selectedMixin()}; + ${String(selectedMixin)}; ${addFocus()}; `; -export const StyledMonthRoot = styled.div` - ${bodyS()}; +export const StyledMonthRoot = styled.div` + ${String(bodyS)}; position: relative; box-sizing: border-box; @@ -46,6 +43,6 @@ export const StyledMonthRoot = styled.div` flex: 1; - ${flexCenter()}; - ${selectable()}; + ${String(flexCenter)}; + ${String(selectable)}; `; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx index edcc19ae42..415866a251 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef } from 'react'; import { cx } from '../../../../utils'; import { useMonths } from '../../shared/hooks'; +import { classes } from '../../shared/tokens'; import type { CalendarMonthsProps } from './CalendarMonths.types'; import { StyledCalendarMonths, StyledFlex, StyledMonth, StyledMonthRoot } from './CalendarMonths.styles'; @@ -54,17 +55,15 @@ export const CalendarMonths: React.FC = ({ {months.map((month, i) => ( {month.map(({ monthName, monthIndex, isSelected, isCurrent, monthFullName }, j) => { - const selectedClass = isSelected ? 'selected' : undefined; - const currentClass = !isSelected && isCurrent ? 'current' : undefined; + const selectedClass = isSelected ? classes.selectedItem : undefined; + const currentClass = !isSelected && isCurrent ? classes.currentItem : undefined; return ( getRefs(element, i, j)} tabIndex={i === selectIndexes?.[0] && j === selectIndexes?.[1] ? 0 : -1} - isCurrent={isCurrent} - isSelected={isSelected} onClick={handleOnChangeMonth} data-month-index={monthIndex} aria-selected={isSelected} diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.styles.ts index c98f9ac2b9..d4df86dfaf 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.styles.ts @@ -2,6 +2,7 @@ import { styled } from '@linaria/react'; import { flexCenter, selectedMixin } from '../../shared/mixins'; import { addFocus, bodyS } from '../../../../mixins'; +import { tokens } from '../../shared/tokens'; export const StyledCalendarYears = styled.div` padding: 0.5rem 1.5rem 1.5rem; @@ -9,13 +10,13 @@ export const StyledCalendarYears = styled.div` `; export const StyledFlex = styled.div` - ${flexCenter()}; + ${String(flexCenter)}; `; export const StyledYear = styled.div` border-radius: 0.438rem; - ${flexCenter()}; + ${String(flexCenter)}; `; const selectable = () => ` @@ -23,15 +24,15 @@ const selectable = () => ` --add-focus-outline-size: 0.063rem; --add-focus-outline-radius: 0.563rem; --add-focus-outline-transition: box-shadow 0.2s ease-in-out; - --add-focus-outline-color: var(--plasma-colors-button-focused); + --add-focus-outline-color: var(${tokens.colorButtonFocused}); --selected-min-width: 5.25rem; --selected-min-height: 3.25rem; - ${selectedMixin()}; + ${String(selectedMixin)}; ${addFocus()}; `; export const StyledYearRoot = styled.div` - ${bodyS()}; + ${String(bodyS)}; position: relative; box-sizing: border-box; @@ -42,7 +43,6 @@ export const StyledYearRoot = styled.div` flex: 1; - ${flexCenter()}; - + ${String(flexCenter)}; ${selectable()}; `; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx index 773c9c5638..944a1250ed 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef } from 'react'; import { cx } from '../../../../utils'; import { useYears } from '../../shared/hooks'; +import { classes } from '../../shared/tokens'; import type { CalendarYearsProps } from './CalendarYears.types'; import { StyledCalendarYears, StyledFlex, StyledYear, StyledYearRoot } from './CalendarYears.styles'; @@ -55,12 +56,12 @@ export const CalendarYears: React.FC = ({ {years.map((year, i) => ( {year.map(({ yearValue, isSelected, isCurrent }, j) => { - const selectedClass = isSelected ? 'selected' : undefined; - const currentClass = !isSelected && isCurrent ? 'current' : undefined; + const selectedClass = isSelected ? classes.selectedItem : undefined; + const currentClass = !isSelected && isCurrent ? classes.currentItem : undefined; return ( getRefs(element, i, j)} tabIndex={i === selectIndexes?.[0] && j === selectIndexes?.[1] ? 0 : -1} onClick={handleOnChangeYear} diff --git a/packages/plasma-new-hope/src/components/_Icon/IconRoot.tsx b/packages/plasma-new-hope/src/components/_Icon/IconRoot.tsx index f4f84a9241..61377acd07 100644 --- a/packages/plasma-new-hope/src/components/_Icon/IconRoot.tsx +++ b/packages/plasma-new-hope/src/components/_Icon/IconRoot.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { css } from '@linaria/core'; import { styled } from '@linaria/react'; const sizeMap = { diff --git a/packages/plasma-new-hope/src/mixins/addFocus.ts b/packages/plasma-new-hope/src/mixins/addFocus.ts index 44b87fb0e1..28a4fbef5a 100644 --- a/packages/plasma-new-hope/src/mixins/addFocus.ts +++ b/packages/plasma-new-hope/src/mixins/addFocus.ts @@ -31,6 +31,3 @@ export const addFocus = () => ` } } `; - -// transition: var(--add-focus-outline-transition); -// ${(props) => (props.lowPerformance ? 'unset' : 'box-shadow 0.2s ease-in-out')}; diff --git a/packages/plasma-new-hope/src/mixins/fontStyles.ts b/packages/plasma-new-hope/src/mixins/fontStyles.ts index 643067a542..ec2fc60574 100644 --- a/packages/plasma-new-hope/src/mixins/fontStyles.ts +++ b/packages/plasma-new-hope/src/mixins/fontStyles.ts @@ -1,4 +1,4 @@ -export const h4 = () => ` +export const h4 = ` font-family: var(--plasma-typo-h4-font-family); font-size: var(--plasma-typo-h4-font-size); font-style: var(--plasma-typo-h4-font-style); @@ -7,12 +7,12 @@ export const h4 = () => ` line-height: var(--plasma-typo-h4-line-height); `; -export const h4Bold = () => ` - ${h4()}; +export const h4Bold = ` + ${String(h4)}; font-weight: var(--plasma-typo-h4-bold-font-weight); `; -export const bodyS = () => ` +export const bodyS = ` font-family: var(--plasma-typo-body-s-font-family); font-size: var(--plasma-typo-body-s-font-size); font-style: var(--plasma-typo-body-s-font-style); @@ -21,7 +21,7 @@ export const bodyS = () => ` line-height: var(--plasma-typo-body-s-line-height); `; -export const bodySBold = () => ` - ${bodyS()} +export const bodySBold = ` + ${String(bodyS)} font-weight: var(--plasma-typo-body-s-bold-font-weight); `; diff --git a/packages/plasma-new-hope/src/utils/index.ts b/packages/plasma-new-hope/src/utils/index.ts index 3166f5396c..e2ee86cb91 100644 --- a/packages/plasma-new-hope/src/utils/index.ts +++ b/packages/plasma-new-hope/src/utils/index.ts @@ -1 +1 @@ -export const cx = (...classes: (string | undefined)[]) => classes.join(' '); +export const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' ');