fix(sdds-insol): tokens for Autocomplete, Select, Combobox updated

salute-developers · Dec 25, 2024 · 682860f · 682860f
1 parent ef5a388
commit 682860f
Show file tree

Hide file tree

Showing 16 changed files with 539 additions and 378 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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});