Merge pull request #13985 from ethereum/theme-border-colors

Theme - add border colors

Author: pettinarip

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);

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: {