Update tailwind color config

logancyang · Dec 28, 2024 · 4e6a9ac · 4e6a9ac
1 parent d5bf5dc
commit 4e6a9ac
Showing 1 changed file with 42 additions and 39 deletions.
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,6 +14,48 @@ module.exports = {
   },
   // https://github.com/tailwindlabs/tailwindcss/blob/main/stubs/config.full.js
   theme: {
+    textColor: {
+      normal: "var(--text-normal)",
+      muted: "var(--text-muted)",
+      faint: "var(--text-faint)",
+      "on-accent": "var(--text-on-accent)",
+      "on-accent-inverted": "var(--text-on-accent-inverted)",
+      success: "var(--text-success)",
+      warning: "var(--text-warning)",
+      error: "var(--text-error)",
+      accent: "var(--text-accent)",
+      "accent-hover": "var(--text-accent-hover)",
+      selection: "var(--text-selection)",
+      "highlight-bg": "var(--text-highlight-bg)",
+      bold: "var(--bold-color)",
+      italic: "var(--italic-color)",
+    },
+    backgroundColor: {
+      primary: "var(--background-primary)",
+      "primary-alt": "var(--background-primary-alt)",
+      secondary: "var(--background-secondary)",
+      "secondary-alt": "var(--background-secondary-alt)",
+      modifier: {
+        hover: "var(--background-modifier-hover)",
+        "active-hover": "var(--background-modifier-active-hover)",
+
+        error: "var(--background-modifier-error)",
+        "error-rgb": "rgba(var(--background-modifier-error-rgb),<alpha-value>)",
+        "error-hover": "var(--background-modifier-error-hover)",
+        success: "var(--background-modifier-success)",
+        "success-rgb": "rgba(var(--background-modifier-success-rgb),<alpha-value>)",
+        message: "var(--background-modifier-message)",
+        "form-field": "var(--background-form-field)",
+        dropdown: {
+          DEFAULT: "var(--dropdown-background)",
+        },
+      },
+    },
+    borderColor: {
+      border: "var(--background-modifier-border)",
+      "border-hover": "var(--background-modifier-border-hover)",
+      "border-focus": "var(--background-modifier-border-focus)",
+    },
     colors: {
       inherit: colors.inherit,
       current: colors.current,
@@ -55,52 +97,13 @@ module.exports = {
         0: "rgba(var(--mono-rgb-0),<alpha-value>)",
         100: "rgba(var(--mono-rgb-100),<alpha-value>)",
       },
-      background: {
-        primary: "var(--background-primary)",
-        "primary-alt": "var(--background-primary-alt)",
-        secondary: "var(--background-secondary)",
-        "secondary-alt": "var(--background-secondary-alt)",
-        modifier: {
-          hover: "var(--background-modifier-hover)",
-          "active-hover": "var(--background-modifier-active-hover)",
-          border: "var(--background-modifier-border)",
-          "border-hover": "var(--background-modifier-border-hover)",
-          "border-focus": "var(--background-modifier-border-focus)",
-          error: "var(--background-modifier-error)",
-          "error-rgb": "rgba(var(--background-modifier-error-rgb),<alpha-value>)",
-          "error-hover": "var(--background-modifier-error-hover)",
-          success: "var(--background-modifier-success)",
-          "success-rgb": "rgba(var(--background-modifier-success-rgb),<alpha-value>)",
-          message: "var(--background-modifier-message)",
-          "form-field": "var(--background-form-field)",
-          dropdown: {
-            DEFAULT: "var(--dropdown-background)",
-          },
-        },
-      },
       interactive: {
         normal: "var(--interactive-normal)",
         hover: "var(--interactive-hover)",
         accent: "var(--interactive-accent)",
         "accent-hsl": "hsl(var(--interactive-accent-hsl),<alpha-value>)",
         "accent-hover": "var(--interactive-accent-hover)",
       },
-      text: {
-        normal: "var(--text-normal)",
-        muted: "var(--text-muted)",
-        faint: "var(--text-faint)",
-        "on-accent": "var(--text-on-accent)",
-        "on-accent-inverted": "var(--text-on-accent-inverted)",
-        success: "var(--text-success)",
-        warning: "var(--text-warning)",
-        error: "var(--text-error)",
-        accent: "var(--text-accent)",
-        "accent-hover": "var(--text-accent-hover)",
-        selection: "var(--text-selection)",
-        "highlight-bg": "var(--text-highlight-bg)",
-        bold: "var(--bold-color)",
-        italic: "var(--italic-color)",
-      },
       caret: "var(--caret-color)",
       icon: {
         DEFAULT: "var(--icon-color)",