From e99a454a670f08b752ee7a82aaab7ba576d99f6e Mon Sep 17 00:00:00 2001
From: Ilya <illja.by4ek@gmail.com>
Date: Thu, 24 Oct 2024 01:40:14 +0300
Subject: [PATCH] fix(new-hope): add new tokens to dropdown

---
 .../src/components/Dropdown/Dropdown.styles.ts    |  1 +
 .../src/components/Dropdown/Dropdown.tokens.ts    |  2 ++
 .../src/components/Dropdown/Dropdown.config.ts    | 15 +++++++++++++++
 3 files changed, 18 insertions(+)

diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.styles.ts b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.styles.ts
index f3951c32f7..5b026ac30b 100644
--- 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
index f00e1b4b9e..a9c6eaf4c8 100644
--- 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
index 76d9c31c5c..c80ce4e04a 100644
--- 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);
             `,
         },
     },