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

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

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.styles.ts b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.styles.ts
@@ -20,6 +20,7 @@ export const Ul = styled.ul<{
     background: var(${constants.background});
     box-shadow: ${constants.boxShadow};
     border-radius: var(${tokens.borderRadius});
+    border: var(${tokens.borderWidth}) solid var(${tokens.borderColor});
 `;
 
 export const base = css``;
diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tokens.ts b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tokens.ts
@@ -14,6 +14,8 @@ export const tokens = {
     padding: '--plasma-dropdown-padding',
     disclosureIconColor: '--plasma-dropdown-disclosure-icon-color',
     disabledOpacity: '--plasma-dropdown-disabled-opacity',
+    borderColor: '--plasma-dropdown-border-color',
+    borderWidth: '--plasma-dropdown-border-width',
     focusColor: '--plasma-dropdown-focus-color', // Old
 
     dividerColor: '--plasma-dropdown-divider-color',

diff --git a/packages/sdds-cs/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-cs/src/components/Dropdown/Dropdown.config.ts
@@ -85,6 +85,10 @@ export const config = {
                 ${tokens.padding}: 0.125rem;
                 ${tokens.width}: 12.5rem;
                 ${tokens.borderRadius}: 0.625rem;
+                ${dropdownTokens.padding}: 0.125rem;
+                ${dropdownTokens.width}: 12.5rem;
+                ${dropdownTokens.borderRadius}: 0.625rem;
+                ${dropdownTokens.borderWidth}: 0.125rem;
 
                 ${tokens.itemHeight}: 1.5rem;
                 ${tokens.itemPadding}: 0.5rem 0.75rem;
@@ -159,6 +163,17 @@ export const config = {
         view: {
             default: css`
                 ${tokens.dividerColor}: var(--surface-transparent-tertiary);
+                ${tokens.disabledOpacity}: 0.4;
+                ${tokens.borderColor}: var(--outline-solid-primary);
+                ${tokens.focusColor}: var(--surface-accent);
+                ${tokens.background}: var(--surface-solid-card-brightness);
+                ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
+                ${tokens.disclosureIconColor}: var(--text-secondary);
+                ${tokens.itemBackground}: var(--surface-clear);
+                ${tokens.itemBackgroundHover}: var(--surface-transparent-accent);
+                ${tokens.itemColor}: var(--text-primary);
+                ${tokens.disclosureIconColor}: var(--text-accent);
+                ${tokens.dividerColor}: var(--surface-solid-primary);
             `,
         },
     },