From 37415619d2676eede159651797fa0fe12f6df834 Mon Sep 17 00:00:00 2001
From: Brian Holmes <briangregoryholmes@gmail.com>
Date: Thu, 14 Dec 2023 13:48:02 -0500
Subject: [PATCH] properly extend tailwind colors with custom theme overwrite

---
 web-common/tailwind.config.cjs | 45 +++++++++++++---------------------
 1 file changed, 17 insertions(+), 28 deletions(-)

diff --git a/web-common/tailwind.config.cjs b/web-common/tailwind.config.cjs
index e743d67c8a6..c2200d85d0c 100644
--- 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: [],