Skip to content

Commit

Permalink
fix(cs): edit tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@iljs
iljs committed Aug 20, 2024
1 parent 35e20c5 commit 84549a8
Show file tree
Hide file tree
Showing 9 changed files with 46 additions and 112 deletions.
3 changes: 0 additions & 3 deletions packages/sdds-cs/api/sdds-cs.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -620,7 +620,6 @@ export { CellTextboxTitle }
export const Checkbox: FunctionComponent<PropsType< {
size: {
s: PolymorphicClassName;
m: PolymorphicClassName;
};
view: {
default: PolymorphicClassName;
Expand Down Expand Up @@ -1329,7 +1328,6 @@ export { ProgressProps }
export const Radiobox: FunctionComponent<PropsType< {
size: {
s: PolymorphicClassName;
m: PolymorphicClassName;
};
view: {
default: PolymorphicClassName;
Expand Down Expand Up @@ -1755,7 +1753,6 @@ export const Slider: FunctionComponent<PropsType< {
view: {
default: PolymorphicClassName;
accent: PolymorphicClassName;
gradient: PolymorphicClassName;
};
size: {
s: PolymorphicClassName;
Expand Down
38 changes: 19 additions & 19 deletions packages/sdds-cs/src/components/Button/Button.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const config = {
view: {
accent: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonValueColor}: var(--on-light-accent-minor);
${buttonTokens.buttonBackgroundColor}: var(--surface-accent);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
Expand All @@ -20,19 +20,19 @@ export const config = {
secondary: css`
${buttonTokens.buttonColor}: var(--text-primary);
${buttonTokens.buttonValueColor}: var(--text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-solid-primary);
${buttonTokens.buttonColorHover}: var(--text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
${buttonTokens.buttonColorActive}: var(--text-primary);
${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
`,
clear: css`
${buttonTokens.buttonColor}: var(--text-primary);
${buttonTokens.buttonValueColor}: var(--text-secondary);
${buttonTokens.buttonColor}: var(--text-accent);
${buttonTokens.buttonValueColor}: var(--text-accent-minor);
${buttonTokens.buttonBackgroundColor}: var(--surface-clear);
${buttonTokens.buttonColorHover}: var(--text-primary-hover);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-clear);
${buttonTokens.buttonColorActive}: var(--text-primary-active);
${buttonTokens.buttonColorHover}: var(--text-accent-minor-hover);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-accent);
${buttonTokens.buttonColorActive}: var(--text-accent-minor-active);
${buttonTokens.buttonBackgroundColorActive}: var(--surface-clear);
`,
},
Expand All @@ -42,12 +42,12 @@ export const config = {
${buttonTokens.buttonWidth}: 11.25rem;
${buttonTokens.buttonPadding}: 1rem;
${buttonTokens.buttonRadius}: 0.625rem;
${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
Expand All @@ -59,12 +59,12 @@ export const config = {
sr: css`
${buttonTokens.buttonHeight}: 2.5rem;
${buttonTokens.buttonWidth}: 11.25rem;
${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
Expand Down
29 changes: 4 additions & 25 deletions packages/sdds-cs/src/components/Checkbox/Checkbox.config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,17 @@ import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components
export const config = {
defaults: {
view: 'accent',
size: 'm',
size: 's',
focused: 'true',
},
variations: {
size: {
s: css`
${checkboxTokens.margin}: 0;
${checkboxTokens.triggerMargin}: 0.063rem 0;
${checkboxTokens.triggerSize}: 0.875rem;
${checkboxTokens.triggerBorderRadius}: 0.25rem;
${checkboxTokens.contentTopOffset}: 0;
${checkboxTokens.contentLeftOffset}: 0.5rem;
${checkboxTokens.descriptionMarginTop}: 0.125rem;
${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family);
${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size);
${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style);
${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height);
`,
m: css`
${checkboxTokens.margin}: 0;
${checkboxTokens.triggerMargin}: 0.125rem 0;
${checkboxTokens.triggerMargin}: 0;
${checkboxTokens.triggerSize}: 1.25rem;
${checkboxTokens.triggerBorderRadius}: 0.375rem;
${checkboxTokens.contentTopOffset}: 0.125rem;
${checkboxTokens.contentTopOffset}: 0rem;
${checkboxTokens.contentLeftOffset}: 0.75rem;
${checkboxTokens.descriptionMarginTop}: 0.125rem;
${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand All @@ -56,7 +35,7 @@ export const config = {
${checkboxTokens.fillColor}: var(--text-primary);
${checkboxTokens.iconColor}: var(--inverse-text-primary);
${checkboxTokens.descriptionColor}: var(--text-secondary);
${checkboxTokens.triggerBorderColor}: var(--text-secondary);
${checkboxTokens.triggerBorderColor}: var(--outline-accent);
`,
secondary: css`
${checkboxTokens.fillColor}: var(--text-secondary);
Expand Down
4 changes: 2 additions & 2 deletions packages/sdds-cs/src/components/Checkbox/Checkbox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export const Default: Story = {
description: 'Description',
disabled: false,
singleLine: false,
size: 'm',
size: 's',
view: 'accent',
focused: true,
},
Expand Down Expand Up @@ -226,7 +226,7 @@ const StoryLive = (args) => {

export const Live: Story = {
args: {
size: 'm',
size: 's',
view: 'accent',
singleLine: false,
focused: true,
Expand Down
28 changes: 3 additions & 25 deletions packages/sdds-cs/src/components/Radiobox/Radiobox.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components
export const config = {
defaults: {
view: 'accent',
size: 'm',
size: 's',
focused: 'true',
},
variations: {
Expand All @@ -12,34 +12,12 @@ export const config = {
*/
size: {
s: css`
${radioboxTokens.margin}: 0;
${radioboxTokens.triggerMargin}: 0;
${radioboxTokens.triggerSize}: 1rem;
${radioboxTokens.triggerBorderRadius}: 1.125rem;
${radioboxTokens.ellipseSize}: 0.5rem;
${radioboxTokens.contentTopOffset}: 0;
${radioboxTokens.contentLeftOffset}: 0.5rem;
${radioboxTokens.descriptionMarginTop}: 0.125rem;
${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family);
${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size);
${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style);
${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height);
`,
m: css`
${radioboxTokens.margin}: 0;
${radioboxTokens.triggerMargin}: 0.063rem 0;
${radioboxTokens.triggerSize}: 1.375rem;
${radioboxTokens.triggerBorderRadius}: 1.125rem;
${radioboxTokens.ellipseSize}: 0.625rem;
${radioboxTokens.contentTopOffset}: 0.125rem;
${radioboxTokens.contentTopOffset}: 0;
${radioboxTokens.contentLeftOffset}: 0.625rem;
${radioboxTokens.descriptionMarginTop}: 0.125rem;
${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
Expand All @@ -64,7 +42,7 @@ export const config = {
${radioboxTokens.fillColor}: var(--text-primary);
${radioboxTokens.ellipseColor}: var(--inverse-text-primary);
${radioboxTokens.descriptionColor}: var(--text-secondary);
${radioboxTokens.triggerBorderColor}: var(--text-secondary);
${radioboxTokens.triggerBorderColor}: var(--outline-accent);
`,
secondary: css`
${radioboxTokens.fillColor}: var(--text-secondary);
Expand Down
6 changes: 3 additions & 3 deletions packages/sdds-cs/src/components/Radiobox/Radiobox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const onChange = action('onChange');
const onFocus = action('onFocus');
const onBlur = action('onBlur');

const sizes = ['m', 's'];
const sizes = ['s'];
const views = ['default', 'secondary', 'tertiary', 'paragraph', 'accent', 'positive', 'warning', 'negative'];

const meta: Meta<RadioboxProps> = {
Expand Down Expand Up @@ -92,7 +92,7 @@ export const Default: Story = {
description: 'Description',
disabled: false,
singleLine: false,
size: 'm',
size: 's',
view: 'accent',
},
render: (args) => <StoryDefault {...args} />,
Expand Down Expand Up @@ -129,7 +129,7 @@ const StoryLive = (props: RadioboxProps) => {

export const Live: Story = {
args: {
size: 'm',
size: 's',
view: 'accent',
singleLine: false,
focused: true,
Expand Down
44 changes: 12 additions & 32 deletions packages/sdds-cs/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,26 +40,6 @@ export const config = {
${sliderTokens.fillColor}: var(--surface-accent);
${sliderTokens.textFieldColor}: var(--text-secondary);
${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary);
${sliderTokens.textFieldCaretColor}: var(--text-primary);
${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary);
${sliderTokens.textFiledFocusColor}: var(--text-primary);
${sliderTokens.textFieldActiveColor}: var(--text-primary);
`,
gradient: css`
${sliderTokens.labelColor}: var(--text-primary);
${sliderTokens.rangeValueColor}: var(--text-secondary);
${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary);
${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card);
${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient);
${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary);
${sliderTokens.fillColor}: var(--surface-accent-gradient);
${sliderTokens.textFieldColor}: var(--text-secondary);
${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary);
${sliderTokens.textFieldCaretColor}: var(--text-primary);
Expand All @@ -77,12 +57,12 @@ export const config = {
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
${sliderTokens.rangeMinValueMargin}: 0.5rem;
${sliderTokens.rangeMaxValueMargin}: 0.5rem;
Expand Down Expand Up @@ -116,12 +96,12 @@ export const config = {
${sliderTokens.textFieldHeight}: 2.5rem;
${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem;
${sliderTokens.textFieldBorderRadius}: 0.625rem;
${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family);
${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size);
${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style);
${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight);
${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height);
${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family);
${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size);
${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style);
${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight);
${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height);
`,
},
disabled: {
Expand Down
2 changes: 1 addition & 1 deletion packages/sdds-cs/src/components/Slider/Slider.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type { StoryObj, Meta } from '@storybook/react';
import { Slider } from './Slider';

const sizes = ['s'];
const views = ['default', 'accent', 'gradient'];
const views = ['default', 'accent'];
const labelPlacements = ['outer', 'inner'];
const rangeValuesPlacement = ['outer', 'inner'];

Expand Down
4 changes: 2 additions & 2 deletions packages/sdds-cs/src/components/Switch/Switch.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ export const config = {
view: {
default: css`
${switchTokens.trackBackgroundColorOn}: var(--surface-accent);
${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-secondary);
${switchTokens.thumbBackgroundColor}: var(--on-dark-text-primary);
${switchTokens.trackBackgroundColorOff}: var(--surface-solid-default);
${switchTokens.thumbBackgroundColor}: var(--on-dark-surface-solid-default);
${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);
`,
},
Expand Down

0 comments on commit 84549a8

Please sign in to comment.