Merge pull request #13434 from TylerAPfledderer/refactor/shadcn-complimentary-colors

refactor(global.css): add complementary color semantics

Author: pettinarip

src/styles/global.css

@@ -4,7 +4,6 @@
 
 @layer base {
   :root {
-
     --font-inter: Inter, sans-serif;
     --font-mono: "IBM Plex Mono", Courier, monospace;
 
@@ -85,6 +84,24 @@
     /* ! Deprecating neutral */
     --neutral: white;
 
+    /* Complementary Set */
+    --attention: var(--yellow-500);
+    --attention-light: var(--yellow-200);
+    --attention-outline: var(--attention);
+
+    /* ? Keep "error" or rename to "fail" ? */
+    --error: var(--red-500);
+    --error-light: var(--red-100);
+    --error-outline: var(--error);
+    /* ! Deprecating error-neutral */
+    --error-neutral: var(--red-100);
+
+    --success: var(--green-500);
+    --success-light: var(--green-100);
+    --success-outline: var(--success);
+    /* ! Deprecating success-neutral */
+    --success-neutral: var(--green-100);
+
     /* Misc sematics: light mode */
     --tooltip-shadow: rgba(0, 0, 0, 0.24);
     --switch-background: var(--gray-300);
@@ -128,6 +145,17 @@
     /* ! Deprecating neutral */
     --neutral: var(--gray-900);
 
+    /* Complementary Set */
+    --attention-outline: var(--attention-light);
+
+    --error-light: var(--error-light);
+    /* ! Deprecating error-neutral */
+    --error-netural: var(--red-900);
+
+    --success-outline: var(--success-light);
+    /* ! Deprecating success-neutral */
+    --success-neutral: var(--green-900);
+
     /* Misc sematics: light mode */
     --tooltip-shadow: rgba(255, 255, 255, 0.24);
     --switch-background: rgba(255, 255, 255, 0.24);
@@ -146,15 +174,20 @@
 
 @layer base {
   body {
-    @apply bg-background font-body text-body text-sm lg:text-md;
+    @apply bg-background font-body text-sm text-body lg:text-md;
   }
 
   a {
     @apply text-primary underline;
   }
 
-  h1, h2, h3, h4, h5, h6 {
-    @apply font-bold
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-bold;
   }
 
   h1 {

tailwind.config.ts

@@ -63,6 +63,23 @@ const config = {
         "tooltip-shadow": "var(--tooltip-shadow)",
         "switch-background": "var(--switch-background)",
         "hub-hero-content-bg": "var(--hub-hero-content-bg)",
+        attention: {
+          DEFAULT: "var(--attention)",
+          light: "var(--attention-light)",
+          outline: "var(--attention-outline)",
+        },
+        error: {
+          DEFAULT: "var(--error)",
+          light: "var(--error-light)",
+          outline: "var(--error-outline)",
+          neutral: "var(--error-neutral)",
+        },
+        success: {
+          DEFAULT: "var(--success)",
+          light: "var(--success-light)",
+          outline: "var(--success-outline)",
+          neutral: "var(--success-neutral)",
+        },
       },
       backgroundImage: {
         "bg-main-gradient": "var(--bg-main-gradient)",