fix(new-hope): add new tokens to combobox

Yakutoc · Dec 4, 2024 · b0ca153 · b0ca153
1 parent 4dba484
commit b0ca153
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
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
@@ -38,7 +38,7 @@ export const Ul = styled.ul<{
 
 export const IconArrowWrapper = styled.div<{ disabled: boolean }>`
     line-height: 0;
-    color: var(${constants.disclosureIconColor});
+    color: var(${tokens.disclosureIconColor}, var(${constants.disclosureIconColor}));
     cursor: ${({ disabled }) => (disabled ? 'inherit' : 'pointer')};
 
     .${classes.arrowInverse} {
@@ -48,7 +48,9 @@ export const IconArrowWrapper = styled.div<{ disabled: boolean }>`
     &:hover,
     &:active {
         color: ${({ disabled }) =>
-            disabled ? `var(${constants.disclosureIconColor})` : `var(${constants.disclosureIconColorHover})`};
+            disabled
+                ? `var(${tokens.disclosureIconColor}, var(${constants.disclosureIconColor}))`
+                : `var(${tokens.disclosureIconColorHover}, var(${constants.disclosureIconColorHover}))`};
     }
 `;
 

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
@@ -34,6 +34,8 @@ export const tokens = {
     itemIconSize: '--plasma-combobox-item-icon-size',
     itemIconSizeTight: '--plasma-combobox-item-icon-size-tight',
     itemIconMargin: '--plasma-combobox-item-icon-margin',
+    itemBackground: '--plasma-combobox-item-background',
+    itemBackgroundHover: '--plasma-combobox-item-background-hover',
 
     cellPadding: '--plasma-combobox-cell-padding',
     cellPaddingLeftContent: '--plasma-combobox-cell-padding-left-content',
@@ -160,6 +162,9 @@ export const tokens = {
 
     spinnerSize: '--plasma-combobox-spinner-size',
     spinnerSizeTight: '--plasma-combobox-spinner-size-tight',
+
+    disclosureIconColor: '--plasma-combobox-disclosure-icon-color',
+    disclosureIconColorHover: '--plasma-combobox-disclosure-icon-color-hover',
 };
 
 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
@@ -61,10 +61,10 @@ export const StyledContentRight = styled.div`
 
 export const DisclosureIconWrapper = styled.div`
     line-height: 0;
-    color: var(${constants.disclosureIconColor});
+    color: var(${tokens.disclosureIconColor}, var(${constants.disclosureIconColor}));
 
     &:hover {
-        color: var(${constants.disclosureIconColorHover});
+        color: var(${tokens.disclosureIconColorHover}, var(${constants.disclosureIconColorHover}));
     }
 `;
 
@@ -98,7 +98,7 @@ export const Wrapper = styled.li<{ variant: ComboboxProps['variant'] }>`
     font-weight: var(${tokens.fontWeight});
     letter-spacing: var(${tokens.fontLetterSpacing});
     line-height: var(${tokens.fontLineHeight});
-    background-color: var(${constants.itemBackground});
+    background-color: var(${tokens.itemBackground}, var(${constants.itemBackground}));
     color: var(--text-primary);
     border-radius: var(${tokens.borderRadius});
     user-select: none;
@@ -108,11 +108,11 @@ export const Wrapper = styled.li<{ variant: ComboboxProps['variant'] }>`
 
     &:hover:not(.${classes.dropdownItemIsDisabled}) {
         cursor: pointer;
-        background-color: var(${constants.itemBackgroundHover});
+        background-color: var(${tokens.itemBackgroundHover}, var(${constants.itemBackgroundHover}));
     }
 
     &.${classes.dropdownItemIsActive} {
-        background-color: var(${constants.itemBackgroundHover});
+        background-color: var(${tokens.itemBackgroundHover}, var(${constants.itemBackgroundHover}));
     }
 
     &.${classes.dropdownItemIsDisabled} {

diff --git a/packages/sdds-cs/src/components/Combobox/Combobox.config.ts b/packages/sdds-cs/src/components/Combobox/Combobox.config.ts
@@ -37,6 +37,9 @@ export const config = {
                 ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary);
                 ${tokens.textFieldChipOpacityReadonly}: 0.72;
                 ${tokens.dropdownBorderColor}: var(--surface-solid-primary);
+                ${tokens.disclosureIconColor}: var(--text-accent);
+                ${tokens.disclosureIconColorHover}: var(--text-accent-hover);
+                ${tokens.itemBackgroundHover}: var(--surface-transparent-accent);
             `,
         },
         size: {