add all new border colors from DS

ethereum · Sep 27, 2024 · d748254 · d748254
1 parent ff97053
commit d748254
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
@@ -23,8 +23,10 @@
     --background-medium: var(--gray-200);
     --background-high: var(--gray-300);
 
-    /* TODO: Add all border color tokens to match DS */
     --border: var(--gray-200);
+    --border-high-contrast: var(--gray-400);
+    --border-low-contrast: var(--gray-50);
+    --border-hover: var(--gray-300);
 
     --primary: var(--purple-600);
     --primary-high-contrast: var(--purple-800);
@@ -130,8 +132,10 @@
     --background-medium: var(--gray-600);
     --background-high: var(--gray-800);
 
-    /* TODO: Add all border color tokens to match DS */
     --border: var(--gray-600);
+    --border-high-contrast: var(--gray-300);
+    --border-low-contrast: var(--black);
+    --border-hover: var(--gray-500);
 
     --primary: var(--purple-400);
     --primary-high-contrast: var(--purple-200);

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -154,9 +154,11 @@ const config = {
           high: "hsla(var(--background-high))",
         },
 
-        // TODO: Add all border color tokens to match DS
         border: {
           DEFAULT: "hsla(var(--border))",
+          "high-contrast": "hsla(var(--border-high-contrast))",
+          "low-contrast": "hsla(var(--border-low-contrast))",
+          hover: "hsla(var(--border-hover))",
         },
 
         primary: {