Skip to content

Commit

Permalink
feat(plasma-new-hope): separate classes & tokens; update snapshots
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich
TitanKuzmich committed Oct 27, 2023
1 parent beac7df commit 496b57b
Show file tree
Hide file tree
Showing 15 changed files with 144 additions and 217 deletions.
4 changes: 3 additions & 1 deletion packages/plasma-new-hope/src/components/Calendar/CalendarDouble/CalendarDouble.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
`;
Expand Down
139 changes: 22 additions & 117 deletions packages/plasma-new-hope/src/components/Calendar/shared/mixins.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;

/**
* Миксин для установки синтетического фокуса на выбранной кнопке.
Expand All @@ -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 {
Expand All @@ -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,
// });
24 changes: 24 additions & 0 deletions packages/plasma-new-hope/src/components/Calendar/shared/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
};
67 changes: 35 additions & 32 deletions ...ages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -12,7 +13,7 @@ const inRange = () => `
position: absolute;
width: 2.5rem;
height: 1.875rem;
background: var(--plasma-colors-surface-liquid02);
background: var(${tokens.colorSurfaceLiquid02});
}
`;

Expand All @@ -23,59 +24,60 @@ 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 = () => `
--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;
Expand All @@ -84,11 +86,12 @@ const disabledDay = () => `
`;

const disabledCurrentDay = () => `
${disabledDay()};
--add-focus-outline-offset: 0.125rem;
`;

export const StyledDayRoot = styled.div<DayProps & FocusProps>`
${bodyS()};
${String(bodyS)};
position: relative;
box-sizing: border-box;
Expand All @@ -98,23 +101,23 @@ export const StyledDayRoot = styled.div<DayProps & FocusProps>`
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()};
}
`;
Expand All @@ -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};
`;
Loading

0 comments on commit 496b57b

Please sign in to comment.