diff --git a/packages/sdds-cs/api/sdds-cs.api.md b/packages/sdds-cs/api/sdds-cs.api.md index 07aafb4174..d340ae2741 100644 --- a/packages/sdds-cs/api/sdds-cs.api.md +++ b/packages/sdds-cs/api/sdds-cs.api.md @@ -467,6 +467,7 @@ icon?: ReactNode; export const Autocomplete: FunctionComponent(props: Omit, "view" | "size" | "disabled" | "readOnly" | "labelPlacement"> & Pick, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "clear" | "negative" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | undefined; + view?: "default" | "accent" | "negative" | "clear" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; @@ -3402,7 +3404,7 @@ true: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "clear" | "negative" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | undefined; + view?: "default" | "accent" | "negative" | "clear" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; diff --git a/packages/sdds-cs/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-cs/src/components/Autocomplete/Autocomplete.config.ts index 77660c3309..5e34ea352a 100644 --- a/packages/sdds-cs/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-cs/src/components/Autocomplete/Autocomplete.config.ts @@ -49,6 +49,49 @@ export const config = { ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.dropdownBorderColor}: var(--surface-solid-primary); + `, + negative: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldClearColor}: var(--text-primary); + + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); + + ${tokens.textFieldBackgroundColor}: var(--surface-solid-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-card); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldTextBeforeColor}: var(--text-secondary); + ${tokens.textFieldTextAfterColor}: var(--text-secondary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-negative); + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: var(--text-accent); + ${tokens.textFieldContentSlotRightColorHover}: var(--text-accent-hover); + ${tokens.textFieldContentSlotRightColorActive}: var(--text-accent-active); + + ${tokens.focusColor}: var(--surface-accent); + ${tokens.textFieldIndicatorColor}: var(--surface-negative); + ${tokens.textFieldOptionalColor}: var(--text-tertiary); + + ${tokens.textFieldBorderColor}: var(--outline-negative); + ${tokens.textFieldBorderColorHover}: var(--outline-negative-hover); + ${tokens.textFieldBorderColorFocus}: var(--outline-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-accent); + ${tokens.itemColor}: var(--text-primary); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.dropdownBorderColor}: var(--surface-solid-primary); `, }, diff --git a/packages/sdds-cs/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/sdds-cs/src/components/Autocomplete/Autocomplete.stories.tsx index 53b772fa36..e39eb52312 100644 --- a/packages/sdds-cs/src/components/Autocomplete/Autocomplete.stories.tsx +++ b/packages/sdds-cs/src/components/Autocomplete/Autocomplete.stories.tsx @@ -6,9 +6,7 @@ import { IconPlasma } from '@salutejs/plasma-icons'; import { Autocomplete } from './Autocomplete'; -const sizes = ['s']; -const views = ['default']; -const labelPlacements = ['outer']; +const views = ['default', 'negative']; const suggestions = [ { label: 'Алексей Смирнов' }, @@ -79,18 +77,6 @@ const meta: Meta = { type: 'select', }, }, - size: { - options: sizes, - control: { - type: 'inline-radio', - }, - }, - labelPlacement: { - options: labelPlacements, - control: { - type: 'inline-radio', - }, - }, requiredPlacement: { options: ['left', 'right'], control: { @@ -113,8 +99,6 @@ const meta: Meta = { }, args: { view: 'default', - size: 's', - labelPlacement: 'outer', disabled: false, readOnly: false, label: 'Label', diff --git a/packages/sdds-cs/src/components/Combobox/Combobox.config.ts b/packages/sdds-cs/src/components/Combobox/Combobox.config.ts index f24b211b93..7618e44e6f 100644 --- a/packages/sdds-cs/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-cs/src/components/Combobox/Combobox.config.ts @@ -26,6 +26,10 @@ export const config = { ${tokens.textFieldLeftHelperColor}: var(--text-secondary); ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldBorderColor}: var(--outline-solid-primary); + ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); + ${tokens.textFieldBorderColorFocus}: var(--outline-accent); + ${tokens.textFieldContentSlotColor}: var(--text-secondary); ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); @@ -36,10 +40,56 @@ export const config = { ${tokens.textFieldIndicatorColor}: var(--surface-negative); ${tokens.textFieldOptionalColor}: var(--text-tertiary); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); + ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); + ${tokens.textFieldChipColor}: var(--text-primary); + ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); + ${tokens.textFieldChipColorHover}: var(--text-primary); + ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); + ${tokens.textFieldChipColorActive}: var(--text-primary); + ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); + ${tokens.textFieldChipColorReadOnly}: var(--text-primary); + ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); + ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipOpacityReadonly}: 0.72; + ${tokens.dropdownBorderColor}: var(--surface-solid-primary); + + ${tokens.disclosureIconColor}: var(--text-accent); + ${tokens.disclosureIconColorHover}: var(--text-accent-hover); + ${tokens.itemBackgroundHover}: var(--surface-transparent-accent); + `, + negative: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldClearColor}: var(--text-primary); + + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); + + ${tokens.textFieldBackgroundColor}: var(--surface-solid-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-card); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldTextBeforeColor}: var(--text-secondary); + ${tokens.textFieldTextAfterColor}: var(--text-secondary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-negative); + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.textFieldBorderColor}: var(--outline-negative); + ${tokens.textFieldBorderColorHover}: var(--outline-negative-hover); ${tokens.textFieldBorderColorFocus}: var(--outline-accent); + ${tokens.textFieldContentSlotColor}: var(--text-secondary); + ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); + ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: var(--text-accent); + ${tokens.textFieldContentSlotRightColorHover}: var(--text-accent-hover); + ${tokens.textFieldContentSlotRightColorActive}: var(--text-accent-active); + + ${tokens.textFieldIndicatorColor}: var(--surface-negative); + ${tokens.textFieldOptionalColor}: var(--text-tertiary); + ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); ${tokens.textFieldChipColor}: var(--text-primary); ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); @@ -53,6 +103,7 @@ export const config = { ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); ${tokens.textFieldChipOpacityReadonly}: 0.72; ${tokens.dropdownBorderColor}: var(--surface-solid-primary); + ${tokens.disclosureIconColor}: var(--text-accent); ${tokens.disclosureIconColorHover}: var(--text-accent-hover); ${tokens.itemBackgroundHover}: var(--surface-transparent-accent); diff --git a/packages/sdds-cs/src/components/Combobox/Combobox.stories.tsx b/packages/sdds-cs/src/components/Combobox/Combobox.stories.tsx index 4b33dda478..4423f72928 100644 --- a/packages/sdds-cs/src/components/Combobox/Combobox.stories.tsx +++ b/packages/sdds-cs/src/components/Combobox/Combobox.stories.tsx @@ -10,9 +10,7 @@ type StorySelectProps = ComponentProps & { enableContentLeft?: boolean; }; -const view = ['default']; -const size = ['s']; -const labelPlacement = ['outer']; +const view = ['default', 'negative']; const chip = ['default', 'secondary', 'accent']; const variant = ['normal', 'tight']; @@ -21,24 +19,12 @@ const meta: Meta = { decorators: [InSpacingDecorator], component: Combobox, argTypes: { - size: { - options: size, - control: { - type: 'select', - }, - }, view: { options: view, control: { type: 'select', }, }, - labelPlacement: { - options: labelPlacement, - control: { - type: 'select', - }, - }, chipView: { options: chip, control: { @@ -99,10 +85,8 @@ const meta: Meta = { }, args: { label: 'Label', - labelPlacement: 'outer', placeholder: 'Placeholder', helperText: 'Helper text', - size: 's', view: 'default', chipView: 'default', enableContentLeft: false,