diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- basic logic.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- basic logic.snap.png index c8c0f7216a..4405998c52 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- basic logic.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- basic logic.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- default.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- default.snap.png index 5f47cede4c..5455f01a72 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- default.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop chipView accent.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop chipView accent.snap.png index 4e44c56818..e38e416a58 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop chipView accent.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop chipView accent.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop chipView secondary.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop chipView secondary.snap.png index 80dde9d1df..5c40dff504 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop chipView secondary.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop chipView secondary.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop contentLeft.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop contentLeft.snap.png index b4913bae77..c3ca5b61b6 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop contentLeft.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop contentLeft.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop isTargetAmount.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop isTargetAmount.snap.png index 15a29f2ec5..ddca2e36e2 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop isTargetAmount.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop isTargetAmount.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop labelPlacement.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop labelPlacement.snap.png index 6653780091..4b1c2f4b4f 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop labelPlacement.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop labelPlacement.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png index 2a3a58bf1d..65e8e3eaf8 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size l.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size l.snap.png index dd3b40797e..d9d7a78587 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size l.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size l.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size m.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size m.snap.png index 5f47cede4c..5455f01a72 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size m.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size m.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size s.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size s.snap.png index 69085220c5..516098315d 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size s.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size s.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size xs.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size xs.snap.png index 481ac6f636..f7ef5f9ee9 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size xs.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop size xs.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- basic logic.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- basic logic.snap.png index f64b70cc33..e3aa4f4506 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- basic logic.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- basic logic.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- default.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- default.snap.png index e773f32e57..c5cf955db9 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- default.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop chipView accent.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop chipView accent.snap.png index c49461fe0f..7abd006af7 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop chipView accent.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop chipView accent.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop chipView secondary.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop chipView secondary.snap.png index d3252dc684..fd1de38cee 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop chipView secondary.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop chipView secondary.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop contentLeft.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop contentLeft.snap.png index ef3a8e05af..2140a86394 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop contentLeft.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop contentLeft.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop isTargetAmount.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop isTargetAmount.snap.png index f73f45fc2a..b18ec4e01c 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop isTargetAmount.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop isTargetAmount.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop labelPlacement.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop labelPlacement.snap.png index 2a7d309684..f0037e1a9f 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop labelPlacement.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop labelPlacement.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png index f109cd042a..fa314b5cd7 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size l.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size l.snap.png index 06fba9c936..aaf3e7814c 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size l.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size l.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size m.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size m.snap.png index e773f32e57..c5cf955db9 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size m.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size m.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size s.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size s.snap.png index 2444c18c1b..4ca8f1dee6 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size s.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size s.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size xs.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size xs.snap.png index 4da1ac6b0f..97249479b9 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size xs.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop size xs.snap.png differ diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.styles.ts b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.styles.ts index d11ec7239d..f7cc1264e1 100644 --- a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.styles.ts +++ b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.styles.ts @@ -36,7 +36,7 @@ export const Ul = styled.ul<{ overflow-y: scroll; border: var(${tokens.dropdownBorderWidth}) solid var(${tokens.dropdownBorderColor}); - margin: 0; + margin: var(${tokens.margin}) 0 0 0; padding: var(${tokens.padding}); `; diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tokens.ts b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tokens.ts index b944445b26..69c5fe8a24 100644 --- a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tokens.ts +++ b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tokens.ts @@ -110,11 +110,14 @@ export const tokens = { '--plasma-autocomplete-textfield-clear-indicator-label-placement-inner-right', textFieldClearIndicatorHintInnerRight: '--plasma-autocomplete-textfield-clear-indicator-hint-placement-inner-right', + textFieldBoxShadow: '--plasma-autocomplete-textfield-box-shadow', + // Токены для дропдауна background: '--plasma-autocomplete-background', boxShadow: '--plasma-autocomplete-box-shadow', borderRadius: '--plasma-autocomplete-border-radius', padding: '--plasma-autocomplete-padding', + margin: '--plasma-autocomplete-margin', dropdownBorderColor: '--plasma-select-dropdown-border-color', dropdownBorderWidth: '--plasma-select-dropdown-border-width', diff --git a/packages/plasma-new-hope/src/components/Autocomplete/ui/TextField/TextField.styles.ts b/packages/plasma-new-hope/src/components/Autocomplete/ui/TextField/TextField.styles.ts index c1bce45ae2..9288ab0a57 100644 --- a/packages/plasma-new-hope/src/components/Autocomplete/ui/TextField/TextField.styles.ts +++ b/packages/plasma-new-hope/src/components/Autocomplete/ui/TextField/TextField.styles.ts @@ -91,4 +91,5 @@ export const StyledTextField = styled(TextField)` ${textFieldTokens.clearIndicatorLabelPlacementInner}: var(${autocompleteTokens.textFieldClearIndicatorLabelPlacementInner}); ${textFieldTokens.clearIndicatorLabelPlacementInnerRight}: var(${autocompleteTokens.textFieldClearIndicatorLabelPlacementInnerRight}); ${textFieldTokens.clearIndicatorHintInnerRight}: var(${autocompleteTokens.textFieldClearIndicatorHintInnerRight}); + ${textFieldTokens.boxShadow}: var(${autocompleteTokens.textFieldBoxShadow}); `; diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts index a74b44cc6c..9f828817ae 100644 --- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts +++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts @@ -28,7 +28,8 @@ export const Ul = styled.ul<{ overflow: ${({ listOverflow }) => listOverflow || 'initial'}; border: var(${tokens.dropdownBorderWidth}) solid var(${tokens.dropdownBorderColor}); - margin: ${({ isInnerUl }) => (isInnerUl ? `calc(var(${tokens.padding}) * -1) 0 0 0` : 0)}; + margin: ${({ isInnerUl }) => + isInnerUl ? `calc(var(${tokens.padding}) * -1) 0 0 0` : `var(${tokens.margin}) 0 0 0`}; padding: var(${tokens.padding}) 0; .${classes.emptyStateWrapper} { @@ -52,7 +53,16 @@ export const IconArrowWrapper = styled.div<{ disabled: boolean }>` } `; -export const StyledArrow = styled(IconDisclosureDownCentered)``; +// TODO: Удалить после поддержки JS переменных в конфиге компонент +export const sizeMap: Record = { + xs: '1rem', + s: '1.5rem', +}; + +export const StyledArrow = styled(IconDisclosureDownCentered)` + width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; + height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; +`; export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tokens.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tokens.ts index 6a76193106..c7840e60be 100644 --- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tokens.ts +++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tokens.ts @@ -15,6 +15,7 @@ export const classes = { export const tokens = { borderRadius: '--plasma-combobox-border-radius', padding: '--plasma-combobox-padding', + margin: '--plasma-combobox-margin', focusOffset: '--plasma-combobox-focus-offset', fontFamily: '--plasma-combobox-font-family', @@ -191,6 +192,8 @@ export const tokens = { textFieldFocusColor: '--plasma-combobox-new-textfield-focus-color', + textFieldBoxShadow: '--plasma-select-textfield-box-shadow', + textFieldIndicatorColor: '--plasma-combobox-new-textfield-indicator-color', textFieldIndicatorSizeInner: '--plasma-combobox-new-textfield-indicator-size-inner', textFieldIndicatorSizeOuter: '--plasma-combobox-new-textfield-indicator-size-outer', @@ -218,6 +221,8 @@ export const tokens = { disclosureIconColor: '--plasma-combobox-disclosure-icon-color', disclosureIconColorHover: '--plasma-combobox-disclosure-icon-color-hover', + disclosureIconSize: '--plasma-select-disclosure-icon-size', + disclosureIconMargin: '--plasma-select-disclosure-icon-margin', }; export const constants = { diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.ts index 25e36ba738..c6d35a5d1e 100644 --- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.ts +++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.ts @@ -7,6 +7,7 @@ import { checkboxConfig, checkboxTokens } from '../../../../../../Checkbox'; import { indicatorConfig, indicatorTokens } from '../../../../../../Indicator'; import { cellConfig, cellTokens } from '../../../../../../Cell'; import type { ComboboxProps } from '../../../../Combobox.types'; +import { IconDisclosureRightCentered, IconDone } from '../../../../../../_Icon'; const mergedCheckboxConfig = mergeConfig(checkboxConfig); const Checkbox = component(mergedCheckboxConfig); @@ -50,6 +51,22 @@ export const StyledIndicator = styled(Indicator)` ${indicatorTokens.color}: var(${tokens.checkboxFillColor}); `; +// TODO: Удалить после поддержки JS переменных в конфиге компонент +export const sizeMap: Record = { + xs: '1rem', + s: '1.5rem', +}; + +export const StyledArrow = styled(IconDisclosureRightCentered)` + width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; + height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; +`; + +export const StyledIconDone = styled(IconDone)` + width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; + height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; +`; + export const StyledContentLeft = styled.div` display: inline-flex; `; @@ -61,6 +78,7 @@ export const StyledContentRight = styled.div` export const DisclosureIconWrapper = styled.div` line-height: 0; + margin: var(${tokens.disclosureIconMargin}); color: var(${tokens.disclosureIconColor}); &:hover { diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx index beff46bf93..bbbfcc52bd 100644 --- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx +++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx @@ -3,7 +3,6 @@ import React, { useRef, FC, useContext } from 'react'; import { sizeToIconSize, getItemId } from '../../../../utils'; import { classes } from '../../../../Combobox.tokens'; import { cx, isEmpty } from '../../../../../../../utils'; -import { IconDisclosureRightCentered, IconDone } from '../../../../../../_Icon'; import { Context } from '../../../../Combobox.context'; import { useDidMountEffect } from '../../../../../../../hooks'; @@ -18,6 +17,8 @@ import { StyledIndicator, StyledCheckboxWrapper, StyledCell, + StyledIconDone, + StyledArrow, } from './Item.styles'; export const Item: FC = ({ @@ -110,7 +111,7 @@ export const Item: FC = ({ {!multiple && checked.get(item.value) === 'dot' && } {!multiple && checked.get(item.value) === 'done' && ( - + )} @@ -132,7 +133,7 @@ export const Item: FC = ({ {!isEmpty(item.items) && ( - + )} diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts index 89c3371b83..1059fa72dc 100644 --- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts +++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts @@ -149,4 +149,5 @@ export const StyledTextField = styled(TextField)` ${textFieldTokens.clearIndicatorLabelPlacementInner}: var(${comboboxTokens.textFieldClearIndicatorLabelPlacementInner}); ${textFieldTokens.clearIndicatorLabelPlacementInnerRight}: var(${comboboxTokens.textFieldClearIndicatorLabelPlacementInnerRight}); ${textFieldTokens.clearIndicatorHintInnerRight}: var(${comboboxTokens.textFieldClearIndicatorHintInnerRight}); + ${textFieldTokens.boxShadow}: var(${comboboxTokens.textFieldBoxShadow}); `; diff --git a/packages/plasma-new-hope/src/components/Select/Select.styles.ts b/packages/plasma-new-hope/src/components/Select/Select.styles.ts index e6418d7277..d19a905149 100644 --- a/packages/plasma-new-hope/src/components/Select/Select.styles.ts +++ b/packages/plasma-new-hope/src/components/Select/Select.styles.ts @@ -22,7 +22,8 @@ export const Ul = styled.ul<{ max-height: ${({ listHeight }) => (listHeight ? getCorrectHeight(listHeight) : 'auto')}; overflow: ${({ listOverflow }) => listOverflow || 'initial'}; - margin: ${({ isInnerUl }) => (isInnerUl ? `calc(var(${tokens.padding}) * -1) 0 0 0` : 0)}; + margin: ${({ isInnerUl }) => + isInnerUl ? `calc(var(${tokens.padding}) * -1) 0 0 0` : `var(${tokens.margin}) 0 0 0`}; padding: calc(var(${tokens.padding}) + var(${tokens.dropdownBorderWidth}, 0rem)) 0; `; diff --git a/packages/plasma-new-hope/src/components/Select/Select.tokens.ts b/packages/plasma-new-hope/src/components/Select/Select.tokens.ts index eab5a36ac0..0d5acb0c8c 100644 --- a/packages/plasma-new-hope/src/components/Select/Select.tokens.ts +++ b/packages/plasma-new-hope/src/components/Select/Select.tokens.ts @@ -12,6 +12,7 @@ export const classes = { export const tokens = { borderRadius: '--plasma-select-border-radius', + margin: '--plasma-select-margin', padding: '--plasma-select-padding', fontFamily: '--plasma-select-font-family', @@ -197,8 +198,12 @@ export const tokens = { textFieldFocusColor: '--plasma-select-textfield-focus-color', + textFieldBoxShadow: '--plasma-select-textfield-box-shadow', + disclosureIconColor: '--plasma-select-disclosure-icon-color', disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover', + disclosureIconSize: '--plasma-select-disclosure-icon-size', + disclosureIconMargin: '--plasma-select-disclosure-icon-margin', }; export const constants = { diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.styles.ts index ddc5e6024d..4971873c64 100644 --- a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.styles.ts +++ b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.styles.ts @@ -7,6 +7,7 @@ import { checkboxConfig, checkboxTokens } from '../../../../../Checkbox'; import { cellConfig, cellTokens } from '../../../../../Cell'; import { indicatorConfig, indicatorTokens } from '../../../../../Indicator'; import type { SelectProps } from '../../../../Select.types'; +import { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon'; const mergedCheckboxConfig = mergeConfig(checkboxConfig); const Checkbox = component(mergedCheckboxConfig); @@ -70,7 +71,24 @@ export const StyledIndicator = styled(Indicator)` ${indicatorTokens.color}: var(${tokens.checkboxFillColor}); `; +// TODO: Удалить после поддержки JS переменных в конфиге компонент +export const sizeMap: Record = { + xs: '1rem', + s: '1.5rem', +}; + +export const StyledArrow = styled(IconDisclosureRightCentered)` + width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; + height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; +`; + +export const StyledIconDone = styled(IconDone)` + width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; + height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; +`; + export const DisclosureIconWrapper = styled.div` + margin: var(${tokens.disclosureIconMargin}); line-height: 0; color: var(${tokens.disclosureIconColor}); diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx index fc886d75db..60f7952e13 100644 --- a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx +++ b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx @@ -3,7 +3,6 @@ import React, { useRef, FC, useContext } from 'react'; import { sizeToIconSize, getItemId } from '../../../../utils'; import { classes } from '../../../../Select.tokens'; import { cx, isEmpty } from '../../../../../../utils'; -import { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon'; import { Context } from '../../../../Select.context'; import { useDidMountEffect } from '../../../../../../hooks'; @@ -18,6 +17,8 @@ import { StyledText, Wrapper, StyledCheckboxWrapper, + StyledArrow, + StyledIconDone, } from './Item.styles'; export const Item: FC = ({ @@ -111,7 +112,7 @@ export const Item: FC = ({ {!multiselect && checked.get(item.value) === 'dot' && } {!multiselect && checked.get(item.value) === 'done' && ( - + )} @@ -132,7 +133,7 @@ export const Item: FC = ({ {!isEmpty(item.items) && ( - + )} diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Button/Button.styles.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Button/Button.styles.tsx index e7ec6cb155..1c823910f0 100644 --- a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Button/Button.styles.tsx +++ b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Button/Button.styles.tsx @@ -24,7 +24,7 @@ export const StyledButton = styled(Button)<{ renderTarget: boolean }>` ${buttonTokens.buttonFontFamily}: var(${tokens.fontFamily}); ${buttonTokens.buttonFontSize}: var(${tokens.fontSize}); ${buttonTokens.buttonFontStyle}: var(${tokens.fontStyle}); - ${buttonTokens.buttonFontWeight}: 600; + ${buttonTokens.buttonFontWeight}: var(${tokens.fontWeight}); ${buttonTokens.buttonLetterSpacing}: var(${tokens.fontLetterSpacing}); ${buttonTokens.buttonLineHeight}: var(${tokens.fontLineHeight}); ${buttonTokens.buttonDisabledOpacity}: ${constants.opacity}; @@ -45,10 +45,19 @@ export const IconArrowWrapper = styled.div` } `; +// TODO: Удалить после поддержки JS переменных в конфиге компонент +export const sizeMap: Record = { + xs: '1rem', + s: '1.5rem', +}; + export const StyledArrow = styled(IconDisclosureDownCentered)` transition: color 0.3s ease-in, transform 0.15s ease-in; pointer-events: none; user-select: none; + + width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; + height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; `; export const ButtonWrapper = styled.div` diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.styles.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.styles.tsx index 029da66ba2..d465cd0223 100644 --- a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.styles.tsx +++ b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.styles.tsx @@ -145,6 +145,8 @@ export const StyledTextField = styled(TextField)<{ opened: boolean }>` ${textFieldTokens.focusColor}: var(${tokens.textFieldFocusColor}); + ${textFieldTokens.boxShadow}: var(${tokens.textFieldBoxShadow}); + /* TODO: #1544 */ & div.input-wrapper:focus-within { background-color: var(${tokens.textFieldBackgroundColorFocus}); @@ -167,4 +169,13 @@ export const IconArrowWrapper = styled.div<{ disabled: boolean }>` } `; -export const StyledArrow = styled(IconDisclosureDownCentered)``; +// TODO: Удалить после поддержки JS переменных в конфиге компонент +export const sizeMap: Record = { + xs: '1rem', + s: '1.5rem', +}; + +export const StyledArrow = styled(IconDisclosureDownCentered)` + width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; + height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`}; +`; diff --git a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureDownCentered.tsx b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureDownCentered.tsx index b3b34f6bf4..decb0f879f 100644 --- a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureDownCentered.tsx +++ b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureDownCentered.tsx @@ -1,8 +1,13 @@ -import React from 'react'; +import React, { HTMLAttributes } from 'react'; import { DisclosureDownCentered } from '../Icon.assets/DisclosureDownCentered'; import { IconRoot, IconProps } from '../IconRoot'; -export const IconDisclosureDownCentered: React.FC = ({ size = 'xs', color, className }) => { - return ; +export const IconDisclosureDownCentered: React.FC> = ({ + size = 'xs', + color, + className, + ...rest +}) => { + return ; }; diff --git a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureRightCentered.tsx b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureRightCentered.tsx index ac745a3034..4bd1a551f6 100644 --- a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureRightCentered.tsx +++ b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureRightCentered.tsx @@ -1,8 +1,13 @@ -import React from 'react'; +import React, { HTMLAttributes } from 'react'; import { DisclosureRightCentered } from '../Icon.assets/DisclosureRightCentered'; import { IconRoot, IconProps } from '../IconRoot'; -export const IconDisclosureRightCentered: React.FC = ({ size = 's', color, className }) => { - return ; +export const IconDisclosureRightCentered: React.FC> = ({ + size = 's', + color, + className, + ...rest +}) => { + return ; }; diff --git a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDone.tsx b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDone.tsx index a243e1fe2b..93ad37ea08 100644 --- a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDone.tsx +++ b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDone.tsx @@ -1,8 +1,13 @@ -import React from 'react'; +import React, { HTMLAttributes } from 'react'; import { Done } from '../Icon.assets/Done'; import { IconRoot, IconProps } from '../IconRoot'; -export const IconDone: React.FC = ({ size = 's', color, className }) => { - return ; +export const IconDone: React.FC> = ({ + size = 's', + color, + className, + ...rest +}) => { + return ; }; diff --git a/packages/sdds-insol/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-insol/src/components/Autocomplete/Autocomplete.config.ts index 395bb971d3..00ba369488 100644 --- a/packages/sdds-insol/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-insol/src/components/Autocomplete/Autocomplete.config.ts @@ -17,8 +17,8 @@ export const config = { ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); ${tokens.textFieldCaretColor}: var(--text-accent); ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); ${tokens.textFieldTextAfterColor}: var(--text-tertiary); @@ -38,6 +38,12 @@ export const config = { ${tokens.textFieldDividerColorHover}: var(--text-secondary); ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: var(--outline-clear); + ${tokens.textFieldBorderColorFocus}: var(--outline-solid-secondary); + ${tokens.textFieldBorderColorHover}: var(--outline-clear); + + ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); + ${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); @@ -47,21 +53,21 @@ export const config = { ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); + ${tokens.textFieldColor}: color-mix(in oklab, var(--text-positive) 70%, transparent); + ${tokens.textFieldClearColor}: color-mix(in oklab, var(--text-positive) 70%, transparent); ${tokens.textFieldPlaceholderColor}: var(--text-secondary); ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); ${tokens.textFieldCaretColor}: var(--text-accent); ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); ${tokens.textFieldTextAfterColor}: var(--text-tertiary); ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); + ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, var(--text-positive) 70%, transparent); ${tokens.textFieldFocusColor}: var(--text-accent); ${tokens.textFieldContentSlotColor}: var(--text-secondary); @@ -76,6 +82,12 @@ export const config = { ${tokens.textFieldDividerColorHover}: var(--surface-positive); ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: var(--outline-positive-minor); + ${tokens.textFieldBorderColorFocus}: var(--outline-positive-minor-active); + ${tokens.textFieldBorderColorHover}: var(--outline-positive-minor-hover); + + ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); + ${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); @@ -85,21 +97,21 @@ export const config = { ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); + ${tokens.textFieldColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); + ${tokens.textFieldClearColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); ${tokens.textFieldPlaceholderColor}: var(--text-secondary); ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); ${tokens.textFieldCaretColor}: var(--text-accent); ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); ${tokens.textFieldTextAfterColor}: var(--text-tertiary); ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); + ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); ${tokens.textFieldFocusColor}: var(--text-accent); ${tokens.textFieldContentSlotColor}: var(--text-secondary); @@ -114,6 +126,12 @@ export const config = { ${tokens.textFieldDividerColorHover}: var(--surface-warning); ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: var(--outline-warning-minor); + ${tokens.textFieldBorderColorFocus}: var(--outline-warning-minor-active); + ${tokens.textFieldBorderColorHover}: var(--outline-warning-minor-hover); + + ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); + ${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); @@ -123,21 +141,21 @@ export const config = { ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); + ${tokens.textFieldColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); + ${tokens.textFieldClearColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); ${tokens.textFieldPlaceholderColor}: var(--text-secondary); ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); ${tokens.textFieldCaretColor}: var(--text-accent); ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); ${tokens.textFieldTextAfterColor}: var(--text-tertiary); ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); + ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); ${tokens.textFieldFocusColor}: var(--text-accent); ${tokens.textFieldContentSlotColor}: var(--text-secondary); @@ -152,6 +170,12 @@ export const config = { ${tokens.textFieldDividerColorHover}: var(--surface-negative); ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: var(--outline-negative-minor); + ${tokens.textFieldBorderColorFocus}: var(--outline-negative-minor-active); + ${tokens.textFieldBorderColorHover}: var(--outline-negative-minor-hover); + + ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); + ${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); @@ -166,28 +190,36 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; - ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; - ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.625rem -0.0625rem 0rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -203,7 +235,7 @@ export const config = { ${tokens.textFieldIndicatorSizeInner}: 0.5rem; ${tokens.textFieldIndicatorSizeOuter}: 0.375rem; ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0; - ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.5rem auto auto -0.75rem; + ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.375rem auto auto -0.75rem; ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto; ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto; ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.5rem auto auto -0.875rem; @@ -212,15 +244,16 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.padding}: 0.125rem; - ${tokens.itemPadding}: 1.0625rem 1rem; + ${tokens.margin}: 0.375rem; + ${tokens.itemPadding}: 1.188rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -232,28 +265,36 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; - ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; - ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.625rem -0.125rem 0rem; + ${tokens.textFieldRightContentMargin}: -0.125rem 0rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); ${tokens.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -269,7 +310,7 @@ export const config = { ${tokens.textFieldIndicatorSizeInner}: 0.5rem; ${tokens.textFieldIndicatorSizeOuter}: 0.375rem; ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0; - ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.375rem auto auto -0.75rem; + ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.25rem auto auto -0.75rem; ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto; ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.6875rem auto auto; ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.25rem auto auto -0.875rem; @@ -278,15 +319,16 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.padding}: 0.125rem; - ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; + ${tokens.margin}: 0.25rem; + ${tokens.itemPadding}: 1.063rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -296,30 +338,38 @@ export const config = { `, s: css` ${tokens.textFieldHeight}: 2.5rem; - ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldPadding}: 0.75rem; ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; - ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; - ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.5rem -0.1875rem 0rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem 0rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); ${tokens.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -335,7 +385,7 @@ export const config = { ${tokens.textFieldIndicatorSizeInner}: 0.375rem; ${tokens.textFieldIndicatorSizeOuter}: 0.375rem; ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0; - ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.3125rem auto auto -0.6875rem; + ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.25rem auto auto -0.6875rem; ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto; ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto; ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.063rem auto auto -0.75rem; @@ -344,15 +394,16 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.padding}: 0.125rem; - ${tokens.itemPadding}: 0.6875rem 0.75rem; + ${tokens.margin}: 0.25rem; + ${tokens.itemPadding}: 0.813rem 0.625rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -362,11 +413,12 @@ export const config = { `, xs: css` ${tokens.textFieldHeight}: 2rem; - ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldPadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; - ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; - ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.375rem -0.0625rem 0rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem 0rem -0.0625rem 0.625rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; @@ -395,6 +447,13 @@ export const config = { ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -410,7 +469,8 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.padding}: 0.125rem; - ${tokens.itemPadding}: 0.5625rem 0.5rem; + ${tokens.margin}: 0.125rem; + ${tokens.itemPadding}: 0.563rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -429,13 +489,7 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); `, outer: css``, }, @@ -446,11 +500,11 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-primary); ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-secondary); + ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); `, }, diff --git a/packages/sdds-insol/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/sdds-insol/src/components/Autocomplete/Autocomplete.stories.tsx index ef1a2fddc7..e1ae18f29f 100644 --- a/packages/sdds-insol/src/components/Autocomplete/Autocomplete.stories.tsx +++ b/packages/sdds-insol/src/components/Autocomplete/Autocomplete.stories.tsx @@ -138,7 +138,7 @@ export default meta; const DefaultStory = (args: StoryProps) => { const { enableContentLeft, enableContentRight } = args; - const iconSize = args.size === 'xs' ? 'xs' : 's'; + const iconSize = args.size === 'xs' || args.size === 's' ? 'xs' : 's'; return ( { + return size === 'xs' || size === 's' ? 'xs' : 's'; +}; + const meta: Meta = { title: 'Data Entry/Combobox', decorators: [InSpacingDecorator], @@ -360,7 +364,7 @@ const SingleStory = (args: StorySelectProps) => { items={items} value={value} onChange={setValue} - contentLeft={args.enableContentLeft ? : undefined} + contentLeft={args.enableContentLeft ? : undefined} /> ); @@ -386,7 +390,7 @@ const MultipleStory = (args: StorySelectProps) => { items={items} value={value} onChange={setValue} - contentLeft={args.enableContentLeft ? : undefined} + contentLeft={args.enableContentLeft ? : undefined} /> ); diff --git a/packages/sdds-insol/src/components/Select/Select.config.ts b/packages/sdds-insol/src/components/Select/Select.config.ts index 287919be63..11c8a11ca0 100644 --- a/packages/sdds-insol/src/components/Select/Select.config.ts +++ b/packages/sdds-insol/src/components/Select/Select.config.ts @@ -15,8 +15,8 @@ export const config = { ${tokens.textFieldPlaceholderColor}: var(--text-secondary); ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); ${tokens.textFieldTextAfterColor}: var(--text-tertiary); ${tokens.textFieldLabelColor}: var(--text-primary); @@ -30,6 +30,12 @@ export const config = { ${tokens.textFieldIndicatorColor}: var(--surface-negative); ${tokens.textFieldOptionalColor}: var(--text-tertiary); + ${tokens.textFieldBorderColor}: var(--outline-clear); + ${tokens.textFieldBorderColorFocus}: var(--outline-solid-secondary); + ${tokens.textFieldBorderColorHover}: var(--outline-clear); + + ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); + ${tokens.buttonColor}: var(--inverse-text-primary); ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); ${tokens.buttonColorActive}: var(--inverse-text-primary-active); @@ -40,22 +46,22 @@ export const config = { ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.disclosureIconColor}: var(--text-accent); + ${tokens.disclosureIconColorHover}: var(--text-accent-hover); ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldColor}: color-mix(in oklab, var(--text-positive) 70%, transparent); ${tokens.textFieldPlaceholderColor}: var(--text-secondary); ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); ${tokens.textFieldTextAfterColor}: var(--text-tertiary); ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); + ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, var(--text-positive) 70%, transparent); ${tokens.textFieldFocusColor}: var(--text-accent); ${tokens.textFieldContentSlotColor}: var(--text-secondary); @@ -65,6 +71,12 @@ export const config = { ${tokens.textFieldIndicatorColor}: var(--surface-negative); ${tokens.textFieldOptionalColor}: var(--text-tertiary); + ${tokens.textFieldBorderColor}: var(--outline-positive-minor); + ${tokens.textFieldBorderColorFocus}: var(--outline-positive-minor-active); + ${tokens.textFieldBorderColorHover}: var(--outline-positive-minor-hover); + + ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); + ${tokens.buttonColor}: var(--on-dark-text-primary); ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); @@ -80,17 +92,17 @@ export const config = { ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); ${tokens.textFieldPlaceholderColor}: var(--text-secondary); ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); ${tokens.textFieldTextAfterColor}: var(--text-tertiary); ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); + ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); ${tokens.textFieldFocusColor}: var(--text-accent); ${tokens.textFieldContentSlotColor}: var(--text-secondary); @@ -100,6 +112,12 @@ export const config = { ${tokens.textFieldIndicatorColor}: var(--surface-negative); ${tokens.textFieldOptionalColor}: var(--text-tertiary); + ${tokens.textFieldBorderColor}: var(--outline-warning-minor); + ${tokens.textFieldBorderColorFocus}: var(--outline-warning-minor-active); + ${tokens.textFieldBorderColorHover}: var(--outline-warning-minor-hover); + + ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); + ${tokens.buttonColor}: var(--on-dark-text-primary); ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); @@ -115,17 +133,17 @@ export const config = { ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); ${tokens.textFieldPlaceholderColor}: var(--text-secondary); ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); ${tokens.textFieldTextAfterColor}: var(--text-tertiary); ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); + ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); ${tokens.textFieldFocusColor}: var(--text-accent); ${tokens.textFieldContentSlotColor}: var(--text-secondary); @@ -135,6 +153,12 @@ export const config = { ${tokens.textFieldIndicatorColor}: var(--surface-negative); ${tokens.textFieldOptionalColor}: var(--text-tertiary); + ${tokens.textFieldBorderColor}: var(--outline-negative-minor); + ${tokens.textFieldBorderColorFocus}: var(--outline-negative-minor-active); + ${tokens.textFieldBorderColorHover}: var(--outline-negative-minor-hover); + + ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); + ${tokens.buttonColor}: var(--on-dark-text-primary); ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); @@ -243,30 +267,38 @@ export const config = { size: { l: css` ${tokens.textFieldHeight}: 3.5rem; - ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldPadding}: 1rem 1.125rem 1rem 1.125rem; ${tokens.textFieldPaddingWithChips}: 0.375rem; ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; - ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; - ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.625rem -0.0625rem 0rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -282,14 +314,14 @@ export const config = { ${tokens.textFieldIndicatorSizeInner}: 0.5rem; ${tokens.textFieldIndicatorSizeOuter}: 0.375rem; ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0; - ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.5rem auto auto -0.75rem; + ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.375rem auto auto -0.75rem; ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto; ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto; ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.5rem auto auto -0.875rem; ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.5rem -0.875rem auto auto; ${tokens.textFieldClearIndicatorHintInnerRight}: 1.5rem -2.25rem auto auto; - ${tokens.textFieldChipGap}: 0.25rem; + ${tokens.textFieldChipGap}: 0.125rem; ${tokens.textFieldChipBorderRadius}: 0.5rem; ${tokens.textFieldChipWidth}: auto; ${tokens.textFieldChipHeight}: 2.75rem; @@ -297,25 +329,26 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; ${tokens.buttonPadding}: 1.5rem 0 1.5rem; ${tokens.padding}: 0.125rem; + ${tokens.margin}: 0.375rem; ${tokens.borderRadius}: 0.875rem; ${tokens.itemHeight}: 1.5rem; - ${tokens.itemPadding}: 1rem 1.125rem; - ${tokens.itemPaddingTight}: 0.75rem 1.125rem; + ${tokens.itemPadding}: 1rem; + ${tokens.itemPaddingTight}: 0.75rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemIconMargin}: 0 0.5rem 0 0; + ${tokens.itemIconMargin}: 0 0.625rem 0 0; ${tokens.itemIconSize}: 1.5rem; ${tokens.itemIconSizeTight}: 1.5rem; @@ -325,19 +358,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -348,33 +381,44 @@ export const config = { ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); ${tokens.indicatorSize}: 0.375rem; + + ${tokens.disclosureIconSize}: 1.5rem; + ${tokens.disclosureIconMargin}: 0 0 0 0.625rem; `, m: css` ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.textFieldPaddingWithChips}: 0.375rem; ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; - ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; - ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.625rem -0.125rem 0rem; + ${tokens.textFieldRightContentMargin}: -0.125rem 0rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); ${tokens.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -397,7 +441,7 @@ export const config = { ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.25rem -0.875rem auto auto; ${tokens.textFieldClearIndicatorHintInnerRight}: 1.25rem -2.25rem auto auto; - ${tokens.textFieldChipGap}: 0.25rem; + ${tokens.textFieldChipGap}: 0.125rem; ${tokens.textFieldChipBorderRadius}: 0.375rem; ${tokens.textFieldChipWidth}: auto; ${tokens.textFieldChipHeight}: 2.25rem; @@ -405,27 +449,28 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; ${tokens.buttonPadding}: 1.25rem 0 1.25rem; ${tokens.padding}: 0.125rem; + ${tokens.margin}: 0.25rem; ${tokens.borderRadius}: 0.75rem; ${tokens.itemHeight}: 1.5rem; ${tokens.itemPadding}: 0.75rem 0.875rem; ${tokens.itemPaddingTight}: 0.5rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemIconMargin}: 0 0.375rem 0 0; - ${tokens.itemIconSize}: 1.5rem; - ${tokens.itemIconSizeTight}: 1.5rem; + ${tokens.itemIconMargin}: 0 0.625rem 0 0; + ${tokens.itemIconSize}: 1.25rem; + ${tokens.itemIconSizeTight}: 1.25rem; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -433,19 +478,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -456,33 +501,44 @@ export const config = { ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); ${tokens.indicatorSize}: 0.375rem; + + ${tokens.disclosureIconSize}: 1.25rem; + ${tokens.disclosureIconMargin}: 0 0 0 0.625rem; `, s: css` ${tokens.textFieldHeight}: 2.5rem; - ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldPadding}: 0.75rem; ${tokens.textFieldPaddingWithChips}: 0.375rem; ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; - ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; - ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.5rem -0.1875rem 0rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem 0rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); ${tokens.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -505,7 +561,7 @@ export const config = { ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.063rem -0.75rem auto auto; ${tokens.textFieldClearIndicatorHintInnerRight}: 1.063rem -2.125rem auto auto; - ${tokens.textFieldChipGap}: 0.25rem; + ${tokens.textFieldChipGap}: 0.125rem; ${tokens.textFieldChipBorderRadius}: 0.25rem; ${tokens.textFieldChipWidth}: auto; ${tokens.textFieldChipHeight}: 1.75rem; @@ -513,27 +569,28 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; ${tokens.buttonPadding}: 1rem 0 1rem; ${tokens.padding}: 0.125rem; + ${tokens.margin}: 0.25rem; ${tokens.borderRadius}: 0.625rem; - ${tokens.itemHeight}: 1.5rem; - ${tokens.itemPadding}: 0.5rem 0.75rem; - ${tokens.itemPaddingTight}: 0.25rem 0.75rem; + ${tokens.itemHeight}: 1rem; + ${tokens.itemPadding}: 0.5rem 0.625rem; + ${tokens.itemPaddingTight}: 0.5rem 0.625rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemIconSize}: 1.5rem; + ${tokens.itemIconSize}: 1rem; ${tokens.itemIconSizeTight}: 1rem; - ${tokens.itemIconMargin}: 0 0.375rem 0 0; + ${tokens.itemIconMargin}: 0 0.5rem 0 0; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -541,19 +598,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -564,15 +621,20 @@ export const config = { ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); ${tokens.indicatorSize}: 0.375rem; + + ${tokens.disclosureIconSize}: 1rem; + ${tokens.disclosureIconMargin}: 0 0 0 0.625rem; + ${tokens.disclosureIconMargin}: 0 0 0 0.5rem; `, xs: css` ${tokens.textFieldHeight}: 2rem; - ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldPadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.textFieldPaddingWithChips}: 0.375rem; ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; - ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; - ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.375rem -0.0625rem 0rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem 0rem -0.0625rem 0.625rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; @@ -592,6 +654,13 @@ export const config = { ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); @@ -613,7 +682,7 @@ export const config = { ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 0.813rem -0.625rem auto auto; ${tokens.textFieldClearIndicatorHintInnerRight}: 0.813rem -1.875rem auto auto; - ${tokens.textFieldChipGap}: 0.25rem; + ${tokens.textFieldChipGap}: 0.125rem; ${tokens.textFieldChipBorderRadius}: 0.125rem; ${tokens.textFieldChipWidth}: auto; ${tokens.textFieldChipHeight}: 1.25rem; @@ -633,6 +702,7 @@ export const config = { ${tokens.buttonPadding}: 0.75rem 0 0.75rem; ${tokens.padding}: 0.125rem; + ${tokens.margin}: 0.125rem; ${tokens.borderRadius}: 0.5rem; ${tokens.itemHeight}: 1rem; @@ -641,7 +711,7 @@ export const config = { ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemIconSize}: 1rem; ${tokens.itemIconSizeTight}: 1rem; - ${tokens.itemIconMargin}: 0 0.25rem 0 0; + ${tokens.itemIconMargin}: 0 0.375rem 0 0; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -672,17 +742,14 @@ export const config = { ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); ${tokens.indicatorSize}: 0.375rem; + + ${tokens.disclosureIconSize}: 1rem; + ${tokens.disclosureIconMargin}: 0 0 0 0.375rem; `, }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); `, outer: css``, }, diff --git a/packages/sdds-insol/src/components/Select/Select.stories.tsx b/packages/sdds-insol/src/components/Select/Select.stories.tsx index 6a9e1e565c..5cec4fb99b 100644 --- a/packages/sdds-insol/src/components/Select/Select.stories.tsx +++ b/packages/sdds-insol/src/components/Select/Select.stories.tsx @@ -18,6 +18,10 @@ const labelPlacement = ['inner', 'outer']; const chip = ['default', 'secondary', 'accent']; const variant = ['normal', 'tight']; +const getIconSize = (size?: string) => { + return size === 'xs' || size === 's' ? 'xs' : 's'; +}; + const meta: Meta = { title: 'Data Entry/Select', decorators: [InSpacingDecorator], @@ -378,7 +382,9 @@ const SingleStory = (args: StorySelectProps) => { items={items} value={value} onChange={setValue} - contentLeft={args.enableContentLeft ? : undefined} + contentLeft={ + args.enableContentLeft ? : undefined + } /> ); @@ -406,7 +412,9 @@ const MultiselectStory = (args: StorySelectProps) => { items={items} value={value} onChange={setValue} - contentLeft={args.enableContentLeft ? : undefined} + contentLeft={ + args.enableContentLeft ? : undefined + } /> ); @@ -431,7 +439,9 @@ const PredefinedStory = (args: StorySelectProps) => { items={items} value={valueSingle} onChange={setValueSingle} - contentLeft={args.enableContentLeft ? : undefined} + contentLeft={ + args.enableContentLeft ? : undefined + } />
@@ -442,7 +452,9 @@ const PredefinedStory = (args: StorySelectProps) => { multiselect value={valueMultiple} onChange={setValueMultiple} - contentLeft={args.enableContentLeft ? : undefined} + contentLeft={ + args.enableContentLeft ? : undefined + } /> ); @@ -508,7 +520,9 @@ const CommonStory = (args: StorySelectProps) => { onChange={setValue} view="default" contentLeft={ - enableContentLeft ? : undefined + enableContentLeft ? ( + + ) : undefined } /> @@ -523,7 +537,9 @@ const CommonStory = (args: StorySelectProps) => { onChange={setValueMultiple} view="default" contentLeft={ - enableContentLeft ? : undefined + enableContentLeft ? ( + + ) : undefined } /> @@ -656,7 +672,9 @@ const CommonStory = (args: StorySelectProps) => { onChange={setValue} view="positive" contentLeft={ - enableContentLeft ? : undefined + enableContentLeft ? ( + + ) : undefined } /> @@ -671,7 +689,9 @@ const CommonStory = (args: StorySelectProps) => { onChange={setValueMultiple} view="positive" contentLeft={ - enableContentLeft ? : undefined + enableContentLeft ? ( + + ) : undefined } /> @@ -713,7 +733,9 @@ const CommonStory = (args: StorySelectProps) => { onChange={setValue} view="warning" contentLeft={ - enableContentLeft ? : undefined + enableContentLeft ? ( + + ) : undefined } /> @@ -728,7 +750,9 @@ const CommonStory = (args: StorySelectProps) => { onChange={setValueMultiple} view="warning" contentLeft={ - enableContentLeft ? : undefined + enableContentLeft ? ( + + ) : undefined } /> @@ -770,7 +794,9 @@ const CommonStory = (args: StorySelectProps) => { onChange={setValue} view="negative" contentLeft={ - enableContentLeft ? : undefined + enableContentLeft ? ( + + ) : undefined } /> @@ -785,7 +811,9 @@ const CommonStory = (args: StorySelectProps) => { onChange={setValueMultiple} view="negative" contentLeft={ - enableContentLeft ? : undefined + enableContentLeft ? ( + + ) : undefined } />