feat(plasma-new-hope): separate classes & tokens

salute-developers · Oct 26, 2023 · 3706cc7 · 3706cc7
1 parent fa417e9
commit 3706cc7
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 149 deletions.
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
@@ -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
@@ -47,17 +47,20 @@ const active = () => `
     }
 `;
 
+/*
+ *  Если использовать токены и классы из ./tokens rollup ругается на этот миксин
+ */
 export const selectedMixin = () => `
     outline: none;
     cursor: pointer;
 
-    &:hover:not(.selected) {
+    &:hover:not(.item-selected) {
         background-color: var(--plasma-colors-surface-liquid02);
         
         ${active()};
     };
 
-    &.selected {
+    &.item-selected {
         border: 0;
         background-color: var(--plasma-colors-primary);
         color: var(--plasma-colors-background-primary);
@@ -70,7 +73,7 @@ export const selectedMixin = () => `
         font-weight: var(--plasma-typo-body-s-bold-font-weight);
     };
 
-    &.current {
+    &.item-current {
         border: 0.063rem solid var(--plasma-colors-primary);
 
         &:hover {
@@ -86,7 +89,7 @@ export const selectedMixin = () => `
         }
     };
 
-    &.hovered:hover {
+    &.item-hovered:hover {
         background-color: var(--plasma-colors-accent);
         color: var(--plasma-colors-background-primary);
         cursor: pointer;
@@ -101,86 +104,3 @@ export const selectedMixin = () => `
 
     ${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
@@ -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/...ages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts b/...ages/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,7 +24,7 @@ const sideInRange = () => `
         position: absolute;
         width: 0.313rem;
         height: 1.875rem;
-        background: var(--plasma-colors-surface-liquid02);
+        background: var(${tokens.colorSurfaceLiquid02});
     }
 `;
 
@@ -33,49 +34,51 @@ export const StyledDay = styled.div<{ offset: number }>`
 
     ${flexCenter()};
 
-    &.left {
+    &.${String(classes.daySideLeft)} {
         &:before {
             left: ${({ offset }) => `${offset}px`};
         }
     }
 
-    &.right {
+    &.${String(classes.daySideRight)} {
         &:before {
             right: ${({ offset }) => `${offset}px`};
         }
     }
 
-    &.side-in-range {
+    &.${String(classes.daySideInRange)} {
         ${sideInRange()};
     }
 
-    &.in-range {
+    &.${String(classes.dayInRange)} {
         ${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;
+        ${selectedMixin()};
+        ${addFocus()};
+    }
 `;
 
 const disabledDay = () => `
     --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});
 
     cursor: not-allowed;
     opacity: 0.4;
@@ -84,6 +87,7 @@ const disabledDay = () => `
 `;
 
 const disabledCurrentDay = () => `
+    ${disabledDay()};
     --add-focus-outline-offset: 0.125rem;
 `;
 
@@ -101,20 +105,20 @@ export const StyledDayRoot = styled.div<DayProps & FocusProps>`
     ${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 +137,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
@@ -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/CalendarHeader/CalendarHeader.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts
@@ -1,25 +1,24 @@
 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;
+
+    ${flexSpaceBetween()};
 `;
 
 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;
+
+    ${flexSpaceBetween()};
 `;
 
 export const StyledHeaderDouble = styled.h4`
@@ -44,9 +43,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;
+
+    ${flexSpaceBetween()};
 `;
 
 export const StyledArrow = styled(buttonFocus)`