Merge pull request #13973 from ethereum/design-token-colors-and-tags

Design token colors and tags for Pablo

Author: pettinarip

src/components/ui/tag.tsx

@@ -9,9 +9,9 @@ const tagVariants = cva(
       status: {
         normal: "bg-background-highlight text-body-medium border-body-medium",
         tag: "bg-primary-low-contrast text-primary border-primary",
-        success: "bg-success-light text-success border-success",
-        error: "bg-error-light text-error border-error",
-        warning: "bg-warning-light text-warning border-warning",
+        success: "bg-success-light text-success border-success-border",
+        error: "bg-error-light text-error border-error-border",
+        warning: "bg-warning-light text-warning-dark border-warning-border",
       },
       variant: {
         subtle: "border-transparent",
@@ -33,17 +33,32 @@ const tagVariants = cva(
       {
         variant: "solid",
         status: "success",
-        className: "bg-success",
+        className: "bg-success text-success-light",
       },
       {
         variant: "solid",
         status: "error",
-        className: "bg-error",
+        className: "bg-error text-error-light",
       },
       {
         variant: "solid",
         status: "warning",
-        className: "bg-warning",
+        className: "bg-warning text-warning-light",
+      },
+      {
+        variant: "outline",
+        status: "success",
+        className: "text-success-border",
+      },
+      {
+        variant: "outline",
+        status: "error",
+        className: "text-error-border",
+      },
+      {
+        variant: "outline",
+        status: "warning",
+        className: "text-warning-border",
       },
     ],
     defaultVariants: {

src/styles/colors.css

@@ -72,8 +72,8 @@
     --yellow-500: 38, 92%, 50%; /* #F59E0B */
     --yellow-600: 32, 95%, 44%; /* #D97706 */
     --yellow-700: 26, 90%, 37%; /* #B45309 */
-    --yellow-800: 23, 83%, 31%; /* #92400E */
-    --yellow-900: 22, 78%, 26%; /* #78350F */
+    --yellow-800: 23, 88%, 22%; /* #6B2D07 */
+    --yellow-900: 22, 84%, 15%; /* #471E06 */ 	
 
     --red-50: 0, 86%, 97%; /* #fef2f2 */
     --red-100: 0, 93%, 94%; /* #fee2e2 */
@@ -84,7 +84,7 @@
     --red-600: 0, 72%, 51%; /* #dc2626 */
     --red-700: 0, 74%, 42%; /* #b91c1c */
     --red-800: 0, 70%, 35%; /* #991b1b */
-    --red-900: 0, 63%, 31%; /* #7f1d1d */
+    --red-900: 0, 82%, 19%; /* #5A0909 */
 
     --green-50: 138, 76%, 97%; /* #F0FDF4 */
     --green-100: 141, 84%, 93%; /* #DCFCE7 */
@@ -94,8 +94,8 @@
     --green-500: 142, 71%, 45%; /* #22C55E */
     --green-600: 142, 76%, 36%; /* #16A34A */
     --green-700: 142, 72%, 29%; /* #15803D */
-    --green-800: 143, 64%, 24%; /* #166534 */
-    --green-900: 144, 61%, 20%; /* #14532D */
+    --green-800: 143, 74%, 19%; /* #0D5629 */
+    --green-900: 143, 79%, 11%; /* #063418 */
 
     --orange-100: 30, 100%, 94%; /* #FFF0DB */
     --orange-800: 10, 76%, 28%; /* #7D2711 */

src/styles/semantic-tokens.css

@@ -44,12 +44,18 @@
 
     --success: var(--green-600);
     --success-light: var(--green-100);
+    --success-dark: var(--green-900);
+    --success-border: var(--green-700);
 
     --error: var(--red-700);
     --error-light: var(--red-100);
+    --error-dark: var(--red-900);
+    --error-border: var(--red-800);
 
-    --warning: var(--yellow-400);
+    --warning: var(--yellow-300);
     --warning-light: var(--yellow-100);
+    --warning-dark: var(--yellow-900);
+    --warning-border: var(--yellow-700);
 
     /**
     /* Gradients (radial, conic, or linear over 3 stops)
@@ -146,7 +152,20 @@
     --accent-c: var(--teal-400);
     --accent-c-hover: var(--teal-300);
 
+    --success: var(--green-600);
+    --success-light: var(--green-100);
+    --success-dark: var(--green-900);
+    --success-border: var(--green-400);
+
+    --error: var(--red-700);
+    --error-light: var(--red-100);
+    --error-dark: var(--red-900);
+    --error-border: var(--red-300);
+
     --warning: var(--yellow-300);
+    --warning-light: var(--yellow-100);
+    --warning-dark: var(--yellow-900);
+    --warning-border: var(--yellow-200);
 
     /* Gradients (dark mode adjustments) */
     --radial-a-opacity-1: 0.16;

tailwind.config.ts

@@ -184,16 +184,22 @@ const config = {
         success: {
           DEFAULT: "hsla(var(--success))",
           light: "hsla(var(--success-light))",
+          dark: "hsla(var(--success-dark))",
+          border: "hsla(var(--success-border))",
         },
 
         error: {
           DEFAULT: "hsla(var(--error))",
           light: "hsla(var(--error-light))",
+          dark: "hsla(var(--error-dark))",
+          border: "hsla(var(--error-border))",
         },
 
         warning: {
           DEFAULT: "hsla(var(--warning))",
           light: "hsla(var(--warning-light))",
+          dark: "hsla(var(--warning-dark))",
+          border: "hsla(var(--warning-border))",
         },
 
         /** @deprecated */