properly extend tailwind colors with custom theme overwrite

rilldata · Dec 14, 2023 · 3741561 · 3741561
1 parent 135177d
commit 3741561
Showing 1 changed file with 17 additions and 28 deletions.
diff --git a/web-common/tailwind.config.cjs b/web-common/tailwind.config.cjs
@@ -1,16 +1,4 @@
-const colors = require("tailwindcss/colors");
-const deprecatedColors = {
-  lightBlue: true,
-  warmGray: true,
-  trueGray: true,
-  coolGray: true,
-  blueGray: true
-}
-const newColors = {};
-for (const c in colors) {
-  if (c in deprecatedColors) continue;
-  newColors[c] = colors[c]
-}
+/** @type {import('tailwindcss').Config} */
 
 module.exports = {
    // need to add this for storybook
@@ -22,21 +10,22 @@ module.exports = {
   /** Once we have applied dark styling to all UI elements, remove this line */
   darkMode: "class",
   theme: {
-    colors: {
-      ...newColors,
-      blue: {
-        50: "var(--color-primary-50)",
-        100: "var(--color-primary-100)",
-        200: "var(--color-primary-200)",
-        300: "var(--color-primary-300)",
-        400: "var(--color-primary-400)",
-        500: "var(--color-primary-500)",
-        600: "var(--color-primary-600)",
-        700: "var(--color-primary-700)",
-        800: "var(--color-primary-800)",
-        900: "var(--color-primary-900)",
-        950: "var(--color-primary-950)",
-      },
+    extend: {
+      colors: {
+        blue: {
+          50: "var(--color-primary-50)",
+          100: "var(--color-primary-100)",
+          200: "var(--color-primary-200)",
+          300: "var(--color-primary-300)",
+          400: "var(--color-primary-400)",
+          500: "var(--color-primary-500)",
+          600: "var(--color-primary-600)",
+          700: "var(--color-primary-700)",
+          800: "var(--color-primary-800)",
+          900: "var(--color-primary-900)",
+          950: "var(--color-primary-950)",
+        },
+      }
     },
   },
   plugins: [],