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..4417d8c08a 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} { 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..771fcdb5db 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', 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..dc78b51977 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,6 +198,8 @@ 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', }; 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..7a5ac33785 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}; 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..ef4519259f 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}); diff --git a/packages/sdds-insol/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-insol/src/components/Autocomplete/Autocomplete.config.ts index 395bb971d3..882b65d732 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); @@ -164,30 +188,31 @@ 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.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.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -203,7 +228,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 +237,16 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.padding}: 0.125rem; + ${tokens.margin}: 0.375rem; ${tokens.itemPadding}: 1.0625rem 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 +258,29 @@ 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.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -269,7 +296,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 +305,16 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.padding}: 0.125rem; + ${tokens.margin}: 0.25rem; ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 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 +324,31 @@ 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.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -335,7 +364,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 +373,16 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.padding}: 0.125rem; + ${tokens.margin}: 0.25rem; ${tokens.itemPadding}: 0.6875rem 0.75rem; ${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 +392,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; @@ -410,6 +441,7 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.padding}: 0.125rem; + ${tokens.margin}: 0.125rem; ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; @@ -429,13 +461,13 @@ 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); + ${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); `, outer: css``, }, @@ -446,11 +478,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..1d64a192f8 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,31 @@ 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.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -282,14 +307,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,18 +322,19 @@ 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; @@ -325,19 +351,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; @@ -354,27 +380,28 @@ export const config = { ${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.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -397,7 +424,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,18 +432,19 @@ 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; @@ -433,19 +461,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; @@ -459,30 +487,31 @@ export const config = { `, 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.textFieldLeftHelperOffset}: 0.25rem; ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); @@ -505,7 +534,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,18 +542,19 @@ 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; @@ -541,19 +571,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; @@ -567,12 +597,13 @@ 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.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; @@ -613,7 +644,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 +664,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; @@ -676,13 +708,13 @@ 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); + ${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); `, 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 } />