From c7862d7a4154940dea6dd0d8e001a77ad7ab3dd0 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Wed, 2 Oct 2024 11:18:54 +0100
Subject: [PATCH] chore: abolish TW safelist, pre-compute theme values

---
 package.json                                  |   2 +-
 .../PricingCards.stories.tsx.snap             |  22 +-
 src/core/styles/colors/Colors.stories.tsx     |  33 +-
 .../__snapshots__/Colors.stories.tsx.snap     | 211 +++---
 src/core/styles/colors/utils.ts               | 602 ++++++++++++++++--
 tailwind.config.js                            |  15 +-
 6 files changed, 730 insertions(+), 155 deletions(-)

diff --git a/package.json b/package.json
index 5705828e..cd922202 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.6.4",
+  "version": "14.6.5",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
diff --git a/src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap b/src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap
index 4ee0c271..3539c0fb 100644
--- a/src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap
+++ b/src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap
@@ -290,7 +290,7 @@ exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
 <div class=" p-32">
   <div class="@container flex justify-center">
     <div class="flex flex-col items-center @[920px]:flex-row gap-8">
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
         <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000  transition-[colors,opacity] opacity-25">
         </div>
         <div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px]:flex-none">
@@ -385,7 +385,7 @@ exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
           </use>
         </svg>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
         <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000  transition-[colors,opacity] opacity-25">
         </div>
         <div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px]:flex-none">
@@ -480,7 +480,7 @@ exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
           </use>
         </svg>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
         <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000  transition-[colors,opacity] opacity-25">
         </div>
         <div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px]:flex-none">
@@ -1344,8 +1344,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
 <div class=" p-32">
   <div class="@container flex justify-center">
     <div class="grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4 gap-8">
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden backdrop-blur">
-        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden backdrop-blur">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -1454,8 +1454,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
           </div>
         </div>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden backdrop-blur">
-        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden backdrop-blur">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -1567,8 +1567,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
           </div>
         </div>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden backdrop-blur">
-        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden backdrop-blur">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
@@ -1691,8 +1691,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
           </div>
         </div>
       </div>
-      <div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden backdrop-blur">
-        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
+      <div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group  min-w-[272px] overflow-hidden backdrop-blur">
+        <div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
         </div>
         <div class="relative z-10 flex flex-col gap-24 ">
           <div>
diff --git a/src/core/styles/colors/Colors.stories.tsx b/src/core/styles/colors/Colors.stories.tsx
index 75f67d01..c10417a1 100644
--- a/src/core/styles/colors/Colors.stories.tsx
+++ b/src/core/styles/colors/Colors.stories.tsx
@@ -1,19 +1,21 @@
 import React from "react";
 import { colorNames } from "./types";
+import { determineThemeColor } from "./utils";
+import Icon from "../../Icon";
 
 export default {
   title: "CSS/Colors",
 };
 
-const colorSet = (colors) =>
+const colorSet = (colors, useClass = "") =>
   colors.map((color) => (
     <div
       key={color}
       className="rounded-lg w-128 ui-shadow-lg-soft flex flex-col"
     >
       <div
-        className={`h-[100px] rounded-t-lg`}
-        style={{ backgroundColor: `var(--color-${color})` }}
+        className={`h-[100px] rounded-t-lg ${useClass ?? ""}`}
+        style={{ backgroundColor: useClass ? `` : `var(--color-${color})` }}
       />
       <div className="p-12 flex flex-col flex-1">
         <p className="ui-text-p2 font-semibold flex-1">{color}</p>
@@ -100,3 +102,28 @@ export const GUIColors = {
     },
   },
 };
+
+export const DynamicTheming = {
+  render: () => (
+    <div className="flex items-center">
+      <div className="flex flex-wrap gap-24">
+        {colorSet(["orange-300"], "bg-orange-300")}
+      </div>
+      <Icon name="icon-gui-arrow-right" size="48" additionalCSS="m-16"></Icon>
+      <div className="flex flex-wrap gap-24">
+        {colorSet(
+          ["orange-900"],
+          determineThemeColor("dark", "light", "bg-orange-300"),
+        )}
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "We can generate alternatives for a color based on the theme. Example usage: `determineThemeColor('dark', 'light', 'bg-orange-300')` - this takes a base theme of 'dark', a target theme of 'light', and the colour to convert.",
+      },
+    },
+  },
+};
diff --git a/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap b/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
index 6b0ab306..30118d8b 100644
--- a/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
+++ b/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
@@ -1,9 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CSS/Colors DynamicTheming smoke-test 1`] = `
+<div class="flex items-center">
+  <div class="flex flex-wrap gap-24">
+    <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+      <div class="h-[100px] rounded-t-lg bg-orange-300">
+      </div>
+      <div class="p-12 flex flex-col flex-1">
+        <p class="ui-text-p2 font-semibold flex-1">
+          orange-300
+        </p>
+        <p class="ui-text-p3 font-normal text-neutral-800">
+          #ffc4ae
+        </p>
+        <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+          rgb(255, 196, 174)
+        </p>
+      </div>
+    </div>
+  </div>
+  <svg class=" m-16"
+       style="width: 48px; height: 48px;"
+  >
+    <use xlink:href="#sprite-icon-gui-arrow-right">
+    </use>
+  </svg>
+  <div class="flex flex-wrap gap-24">
+    <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
+      <div class="h-[100px] rounded-t-lg bg-orange-900">
+      </div>
+      <div class="p-12 flex flex-col flex-1">
+        <p class="ui-text-p2 font-semibold flex-1">
+          orange-900
+        </p>
+        <p class="ui-text-p3 font-normal text-neutral-800">
+          #b82202
+        </p>
+        <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+          rgb(184, 34, 2)
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`CSS/Colors GUIColors smoke-test 1`] = `
 <div class="flex flex-wrap gap-24">
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-default-light);"
     >
     </div>
@@ -20,7 +65,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-hover-light);"
     >
     </div>
@@ -37,7 +82,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-active-light);"
     >
     </div>
@@ -54,7 +99,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-default-dark);"
     >
     </div>
@@ -71,7 +116,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-hover-dark);"
     >
     </div>
@@ -88,7 +133,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-active-dark);"
     >
     </div>
@@ -105,7 +150,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-blue-focus);"
     >
     </div>
@@ -122,7 +167,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-unavailable);"
     >
     </div>
@@ -139,7 +184,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-success-green);"
     >
     </div>
@@ -156,7 +201,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-error-red);"
     >
     </div>
@@ -173,7 +218,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-focus);"
     >
     </div>
@@ -190,7 +235,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-focus-outline);"
     >
     </div>
@@ -207,7 +252,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-gui-visited);"
     >
     </div>
@@ -229,7 +274,7 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
 exports[`CSS/Colors NeutralColors smoke-test 1`] = `
 <div class="flex flex-wrap gap-24">
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-000);"
     >
     </div>
@@ -246,7 +291,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-100);"
     >
     </div>
@@ -263,7 +308,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-200);"
     >
     </div>
@@ -280,7 +325,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-300);"
     >
     </div>
@@ -297,7 +342,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-400);"
     >
     </div>
@@ -314,7 +359,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-500);"
     >
     </div>
@@ -331,7 +376,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-600);"
     >
     </div>
@@ -348,7 +393,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-700);"
     >
     </div>
@@ -365,7 +410,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-800);"
     >
     </div>
@@ -382,7 +427,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-900);"
     >
     </div>
@@ -399,7 +444,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-1000);"
     >
     </div>
@@ -416,7 +461,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-1100);"
     >
     </div>
@@ -433,7 +478,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-1200);"
     >
     </div>
@@ -450,7 +495,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-neutral-1300);"
     >
     </div>
@@ -472,7 +517,7 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
 exports[`CSS/Colors OrangeColors smoke-test 1`] = `
 <div class="flex flex-wrap gap-24">
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-100);"
     >
     </div>
@@ -489,7 +534,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-200);"
     >
     </div>
@@ -506,7 +551,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-300);"
     >
     </div>
@@ -523,7 +568,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-400);"
     >
     </div>
@@ -540,7 +585,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-500);"
     >
     </div>
@@ -557,7 +602,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-600);"
     >
     </div>
@@ -574,7 +619,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-700);"
     >
     </div>
@@ -591,7 +636,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-800);"
     >
     </div>
@@ -608,7 +653,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-900);"
     >
     </div>
@@ -625,7 +670,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-1000);"
     >
     </div>
@@ -642,7 +687,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-orange-1100);"
     >
     </div>
@@ -664,7 +709,7 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
 exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
 <div class="flex flex-wrap gap-24">
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-100);"
     >
     </div>
@@ -681,7 +726,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-200);"
     >
     </div>
@@ -698,7 +743,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-300);"
     >
     </div>
@@ -715,7 +760,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-400);"
     >
     </div>
@@ -732,7 +777,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-500);"
     >
     </div>
@@ -749,7 +794,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-600);"
     >
     </div>
@@ -766,7 +811,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-700);"
     >
     </div>
@@ -783,7 +828,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-800);"
     >
     </div>
@@ -800,7 +845,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-yellow-900);"
     >
     </div>
@@ -817,7 +862,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-100);"
     >
     </div>
@@ -834,7 +879,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-200);"
     >
     </div>
@@ -851,7 +896,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-300);"
     >
     </div>
@@ -868,7 +913,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-400);"
     >
     </div>
@@ -885,7 +930,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-500);"
     >
     </div>
@@ -902,7 +947,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-600);"
     >
     </div>
@@ -919,7 +964,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-700);"
     >
     </div>
@@ -936,7 +981,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-800);"
     >
     </div>
@@ -953,7 +998,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-green-900);"
     >
     </div>
@@ -970,7 +1015,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-100);"
     >
     </div>
@@ -987,7 +1032,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-200);"
     >
     </div>
@@ -1004,7 +1049,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-300);"
     >
     </div>
@@ -1021,7 +1066,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-400);"
     >
     </div>
@@ -1038,7 +1083,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-500);"
     >
     </div>
@@ -1055,7 +1100,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-600);"
     >
     </div>
@@ -1072,7 +1117,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-700);"
     >
     </div>
@@ -1089,7 +1134,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-800);"
     >
     </div>
@@ -1106,7 +1151,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-blue-900);"
     >
     </div>
@@ -1123,7 +1168,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-100);"
     >
     </div>
@@ -1140,7 +1185,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-200);"
     >
     </div>
@@ -1157,7 +1202,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-300);"
     >
     </div>
@@ -1174,7 +1219,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-400);"
     >
     </div>
@@ -1191,7 +1236,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-500);"
     >
     </div>
@@ -1208,7 +1253,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-600);"
     >
     </div>
@@ -1225,7 +1270,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-700);"
     >
     </div>
@@ -1242,7 +1287,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-800);"
     >
     </div>
@@ -1259,7 +1304,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-violet-900);"
     >
     </div>
@@ -1276,7 +1321,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-100);"
     >
     </div>
@@ -1293,7 +1338,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-200);"
     >
     </div>
@@ -1310,7 +1355,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-300);"
     >
     </div>
@@ -1327,7 +1372,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-400);"
     >
     </div>
@@ -1344,7 +1389,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-500);"
     >
     </div>
@@ -1361,7 +1406,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-600);"
     >
     </div>
@@ -1378,7 +1423,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-700);"
     >
     </div>
@@ -1395,7 +1440,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-800);"
     >
     </div>
@@ -1412,7 +1457,7 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     </div>
   </div>
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-    <div class="h-[100px] rounded-t-lg"
+    <div class="h-[100px] rounded-t-lg "
          style="background-color: var(--color-pink-900);"
     >
     </div>
diff --git a/src/core/styles/colors/utils.ts b/src/core/styles/colors/utils.ts
index 2c6ea04f..4754b2ff 100644
--- a/src/core/styles/colors/utils.ts
+++ b/src/core/styles/colors/utils.ts
@@ -1,51 +1,567 @@
-import { ColorClass, colorNames, Theme } from "./types";
+import { ColorClass, Theme } from "./types";
 
-export const convertTailwindClassToVar = (className: string) =>
-  className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi, "var(--color-$2)");
+const colorMappings: { dark: ColorClass; light: ColorClass }[] = [
+  { dark: "text-neutral-000", light: "text-neutral-1300" },
+  { dark: "text-neutral-100", light: "text-neutral-1200" },
+  { dark: "text-neutral-200", light: "text-neutral-1100" },
+  { dark: "text-neutral-300", light: "text-neutral-1000" },
+  { dark: "text-neutral-400", light: "text-neutral-900" },
+  { dark: "text-neutral-500", light: "text-neutral-800" },
+  { dark: "text-neutral-600", light: "text-neutral-700" },
+  { dark: "text-neutral-700", light: "text-neutral-600" },
+  { dark: "text-neutral-800", light: "text-neutral-500" },
+  { dark: "text-neutral-900", light: "text-neutral-400" },
+  { dark: "text-neutral-1000", light: "text-neutral-300" },
+  { dark: "text-neutral-1100", light: "text-neutral-200" },
+  { dark: "text-neutral-1200", light: "text-neutral-100" },
+  { dark: "text-neutral-1300", light: "text-neutral-000" },
+  { dark: "text-orange-100", light: "text-orange-1100" },
+  { dark: "text-orange-200", light: "text-orange-1000" },
+  { dark: "text-orange-300", light: "text-orange-900" },
+  { dark: "text-orange-400", light: "text-orange-800" },
+  { dark: "text-orange-500", light: "text-orange-700" },
+  { dark: "text-orange-600", light: "text-orange-600" },
+  { dark: "text-orange-700", light: "text-orange-500" },
+  { dark: "text-orange-800", light: "text-orange-400" },
+  { dark: "text-orange-900", light: "text-orange-300" },
+  { dark: "text-orange-1000", light: "text-orange-200" },
+  { dark: "text-orange-1100", light: "text-orange-100" },
+  { dark: "text-yellow-100", light: "text-yellow-900" },
+  { dark: "text-yellow-200", light: "text-yellow-800" },
+  { dark: "text-yellow-300", light: "text-yellow-700" },
+  { dark: "text-yellow-400", light: "text-yellow-600" },
+  { dark: "text-yellow-500", light: "text-yellow-500" },
+  { dark: "text-yellow-600", light: "text-yellow-400" },
+  { dark: "text-yellow-700", light: "text-yellow-300" },
+  { dark: "text-yellow-800", light: "text-yellow-200" },
+  { dark: "text-yellow-900", light: "text-yellow-100" },
+  { dark: "text-green-100", light: "text-green-900" },
+  { dark: "text-green-200", light: "text-green-800" },
+  { dark: "text-green-300", light: "text-green-700" },
+  { dark: "text-green-400", light: "text-green-600" },
+  { dark: "text-green-500", light: "text-green-500" },
+  { dark: "text-green-600", light: "text-green-400" },
+  { dark: "text-green-700", light: "text-green-300" },
+  { dark: "text-green-800", light: "text-green-200" },
+  { dark: "text-green-900", light: "text-green-100" },
+  { dark: "text-blue-100", light: "text-blue-900" },
+  { dark: "text-blue-200", light: "text-blue-800" },
+  { dark: "text-blue-300", light: "text-blue-700" },
+  { dark: "text-blue-400", light: "text-blue-600" },
+  { dark: "text-blue-500", light: "text-blue-500" },
+  { dark: "text-blue-600", light: "text-blue-400" },
+  { dark: "text-blue-700", light: "text-blue-300" },
+  { dark: "text-blue-800", light: "text-blue-200" },
+  { dark: "text-blue-900", light: "text-blue-100" },
+  { dark: "text-violet-100", light: "text-violet-900" },
+  { dark: "text-violet-200", light: "text-violet-800" },
+  { dark: "text-violet-300", light: "text-violet-700" },
+  { dark: "text-violet-400", light: "text-violet-600" },
+  { dark: "text-violet-500", light: "text-violet-500" },
+  { dark: "text-violet-600", light: "text-violet-400" },
+  { dark: "text-violet-700", light: "text-violet-300" },
+  { dark: "text-violet-800", light: "text-violet-200" },
+  { dark: "text-violet-900", light: "text-violet-100" },
+  { dark: "text-pink-100", light: "text-pink-900" },
+  { dark: "text-pink-200", light: "text-pink-800" },
+  { dark: "text-pink-300", light: "text-pink-700" },
+  { dark: "text-pink-400", light: "text-pink-600" },
+  { dark: "text-pink-500", light: "text-pink-500" },
+  { dark: "text-pink-600", light: "text-pink-400" },
+  { dark: "text-pink-700", light: "text-pink-300" },
+  { dark: "text-pink-800", light: "text-pink-200" },
+  { dark: "text-pink-900", light: "text-pink-100" },
+
+  { dark: "bg-neutral-000", light: "bg-neutral-1300" },
+  { dark: "bg-neutral-100", light: "bg-neutral-1200" },
+  { dark: "bg-neutral-200", light: "bg-neutral-1100" },
+  { dark: "bg-neutral-300", light: "bg-neutral-1000" },
+  { dark: "bg-neutral-400", light: "bg-neutral-900" },
+  { dark: "bg-neutral-500", light: "bg-neutral-800" },
+  { dark: "bg-neutral-600", light: "bg-neutral-700" },
+  { dark: "bg-neutral-700", light: "bg-neutral-600" },
+  { dark: "bg-neutral-800", light: "bg-neutral-500" },
+  { dark: "bg-neutral-900", light: "bg-neutral-400" },
+  { dark: "bg-neutral-1000", light: "bg-neutral-300" },
+  { dark: "bg-neutral-1100", light: "bg-neutral-200" },
+  { dark: "bg-neutral-1200", light: "bg-neutral-100" },
+  { dark: "bg-neutral-1300", light: "bg-neutral-000" },
+  { dark: "bg-orange-100", light: "bg-orange-1100" },
+  { dark: "bg-orange-200", light: "bg-orange-1000" },
+  { dark: "bg-orange-300", light: "bg-orange-900" },
+  { dark: "bg-orange-400", light: "bg-orange-800" },
+  { dark: "bg-orange-500", light: "bg-orange-700" },
+  { dark: "bg-orange-600", light: "bg-orange-600" },
+  { dark: "bg-orange-700", light: "bg-orange-500" },
+  { dark: "bg-orange-800", light: "bg-orange-400" },
+  { dark: "bg-orange-900", light: "bg-orange-300" },
+  { dark: "bg-orange-1000", light: "bg-orange-200" },
+  { dark: "bg-orange-1100", light: "bg-orange-100" },
+  { dark: "bg-yellow-100", light: "bg-yellow-900" },
+  { dark: "bg-yellow-200", light: "bg-yellow-800" },
+  { dark: "bg-yellow-300", light: "bg-yellow-700" },
+  { dark: "bg-yellow-400", light: "bg-yellow-600" },
+  { dark: "bg-yellow-500", light: "bg-yellow-500" },
+  { dark: "bg-yellow-600", light: "bg-yellow-400" },
+  { dark: "bg-yellow-700", light: "bg-yellow-300" },
+  { dark: "bg-yellow-800", light: "bg-yellow-200" },
+  { dark: "bg-yellow-900", light: "bg-yellow-100" },
+  { dark: "bg-green-100", light: "bg-green-900" },
+  { dark: "bg-green-200", light: "bg-green-800" },
+  { dark: "bg-green-300", light: "bg-green-700" },
+  { dark: "bg-green-400", light: "bg-green-600" },
+  { dark: "bg-green-500", light: "bg-green-500" },
+  { dark: "bg-green-600", light: "bg-green-400" },
+  { dark: "bg-green-700", light: "bg-green-300" },
+  { dark: "bg-green-800", light: "bg-green-200" },
+  { dark: "bg-green-900", light: "bg-green-100" },
+  { dark: "bg-blue-100", light: "bg-blue-900" },
+  { dark: "bg-blue-200", light: "bg-blue-800" },
+  { dark: "bg-blue-300", light: "bg-blue-700" },
+  { dark: "bg-blue-400", light: "bg-blue-600" },
+  { dark: "bg-blue-500", light: "bg-blue-500" },
+  { dark: "bg-blue-600", light: "bg-blue-400" },
+  { dark: "bg-blue-700", light: "bg-blue-300" },
+  { dark: "bg-blue-800", light: "bg-blue-200" },
+  { dark: "bg-blue-900", light: "bg-blue-100" },
+  { dark: "bg-violet-100", light: "bg-violet-900" },
+  { dark: "bg-violet-200", light: "bg-violet-800" },
+  { dark: "bg-violet-300", light: "bg-violet-700" },
+  { dark: "bg-violet-400", light: "bg-violet-600" },
+  { dark: "bg-violet-500", light: "bg-violet-500" },
+  { dark: "bg-violet-600", light: "bg-violet-400" },
+  { dark: "bg-violet-700", light: "bg-violet-300" },
+  { dark: "bg-violet-800", light: "bg-violet-200" },
+  { dark: "bg-violet-900", light: "bg-violet-100" },
+  { dark: "bg-pink-100", light: "bg-pink-900" },
+  { dark: "bg-pink-200", light: "bg-pink-800" },
+  { dark: "bg-pink-300", light: "bg-pink-700" },
+  { dark: "bg-pink-400", light: "bg-pink-600" },
+  { dark: "bg-pink-500", light: "bg-pink-500" },
+  { dark: "bg-pink-600", light: "bg-pink-400" },
+  { dark: "bg-pink-700", light: "bg-pink-300" },
+  { dark: "bg-pink-800", light: "bg-pink-200" },
+  { dark: "bg-pink-900", light: "bg-pink-100" },
+
+  { dark: "from-neutral-000", light: "from-neutral-1300" },
+  { dark: "from-neutral-100", light: "from-neutral-1200" },
+  { dark: "from-neutral-200", light: "from-neutral-1100" },
+  { dark: "from-neutral-300", light: "from-neutral-1000" },
+  { dark: "from-neutral-400", light: "from-neutral-900" },
+  { dark: "from-neutral-500", light: "from-neutral-800" },
+  { dark: "from-neutral-600", light: "from-neutral-700" },
+  { dark: "from-neutral-700", light: "from-neutral-600" },
+  { dark: "from-neutral-800", light: "from-neutral-500" },
+  { dark: "from-neutral-900", light: "from-neutral-400" },
+  { dark: "from-neutral-1000", light: "from-neutral-300" },
+  { dark: "from-neutral-1100", light: "from-neutral-200" },
+  { dark: "from-neutral-1200", light: "from-neutral-100" },
+  { dark: "from-neutral-1300", light: "from-neutral-000" },
+  { dark: "from-orange-100", light: "from-orange-1100" },
+  { dark: "from-orange-200", light: "from-orange-1000" },
+  { dark: "from-orange-300", light: "from-orange-900" },
+  { dark: "from-orange-400", light: "from-orange-800" },
+  { dark: "from-orange-500", light: "from-orange-700" },
+  { dark: "from-orange-600", light: "from-orange-600" },
+  { dark: "from-orange-700", light: "from-orange-500" },
+  { dark: "from-orange-800", light: "from-orange-400" },
+  { dark: "from-orange-900", light: "from-orange-300" },
+  { dark: "from-orange-1000", light: "from-orange-200" },
+  { dark: "from-orange-1100", light: "from-orange-100" },
+  { dark: "from-yellow-100", light: "from-yellow-900" },
+  { dark: "from-yellow-200", light: "from-yellow-800" },
+  { dark: "from-yellow-300", light: "from-yellow-700" },
+  { dark: "from-yellow-400", light: "from-yellow-600" },
+  { dark: "from-yellow-500", light: "from-yellow-500" },
+  { dark: "from-yellow-600", light: "from-yellow-400" },
+  { dark: "from-yellow-700", light: "from-yellow-300" },
+  { dark: "from-yellow-800", light: "from-yellow-200" },
+  { dark: "from-yellow-900", light: "from-yellow-100" },
+  { dark: "from-green-100", light: "from-green-900" },
+  { dark: "from-green-200", light: "from-green-800" },
+  { dark: "from-green-300", light: "from-green-700" },
+  { dark: "from-green-400", light: "from-green-600" },
+  { dark: "from-green-500", light: "from-green-500" },
+  { dark: "from-green-600", light: "from-green-400" },
+  { dark: "from-green-700", light: "from-green-300" },
+  { dark: "from-green-800", light: "from-green-200" },
+  { dark: "from-green-900", light: "from-green-100" },
+  { dark: "from-blue-100", light: "from-blue-900" },
+  { dark: "from-blue-200", light: "from-blue-800" },
+  { dark: "from-blue-300", light: "from-blue-700" },
+  { dark: "from-blue-400", light: "from-blue-600" },
+  { dark: "from-blue-500", light: "from-blue-500" },
+  { dark: "from-blue-600", light: "from-blue-400" },
+  { dark: "from-blue-700", light: "from-blue-300" },
+  { dark: "from-blue-800", light: "from-blue-200" },
+  { dark: "from-blue-900", light: "from-blue-100" },
+  { dark: "from-violet-100", light: "from-violet-900" },
+  { dark: "from-violet-200", light: "from-violet-800" },
+  { dark: "from-violet-300", light: "from-violet-700" },
+  { dark: "from-violet-400", light: "from-violet-600" },
+  { dark: "from-violet-500", light: "from-violet-500" },
+  { dark: "from-violet-600", light: "from-violet-400" },
+  { dark: "from-violet-700", light: "from-violet-300" },
+  { dark: "from-violet-800", light: "from-violet-200" },
+  { dark: "from-violet-900", light: "from-violet-100" },
+  { dark: "from-pink-100", light: "from-pink-900" },
+  { dark: "from-pink-200", light: "from-pink-800" },
+  { dark: "from-pink-300", light: "from-pink-700" },
+  { dark: "from-pink-400", light: "from-pink-600" },
+  { dark: "from-pink-500", light: "from-pink-500" },
+  { dark: "from-pink-600", light: "from-pink-400" },
+  { dark: "from-pink-700", light: "from-pink-300" },
+  { dark: "from-pink-800", light: "from-pink-200" },
+  { dark: "from-pink-900", light: "from-pink-100" },
+
+  { dark: "to-neutral-000", light: "to-neutral-1300" },
+  { dark: "to-neutral-100", light: "to-neutral-1200" },
+  { dark: "to-neutral-200", light: "to-neutral-1100" },
+  { dark: "to-neutral-300", light: "to-neutral-1000" },
+  { dark: "to-neutral-400", light: "to-neutral-900" },
+  { dark: "to-neutral-500", light: "to-neutral-800" },
+  { dark: "to-neutral-600", light: "to-neutral-700" },
+  { dark: "to-neutral-700", light: "to-neutral-600" },
+  { dark: "to-neutral-800", light: "to-neutral-500" },
+  { dark: "to-neutral-900", light: "to-neutral-400" },
+  { dark: "to-neutral-1000", light: "to-neutral-300" },
+  { dark: "to-neutral-1100", light: "to-neutral-200" },
+  { dark: "to-neutral-1200", light: "to-neutral-100" },
+  { dark: "to-neutral-1300", light: "to-neutral-000" },
+  { dark: "to-orange-100", light: "to-orange-1100" },
+  { dark: "to-orange-200", light: "to-orange-1000" },
+  { dark: "to-orange-300", light: "to-orange-900" },
+  { dark: "to-orange-400", light: "to-orange-800" },
+  { dark: "to-orange-500", light: "to-orange-700" },
+  { dark: "to-orange-600", light: "to-orange-600" },
+  { dark: "to-orange-700", light: "to-orange-500" },
+  { dark: "to-orange-800", light: "to-orange-400" },
+  { dark: "to-orange-900", light: "to-orange-300" },
+  { dark: "to-orange-1000", light: "to-orange-200" },
+  { dark: "to-orange-1100", light: "to-orange-100" },
+  { dark: "to-yellow-100", light: "to-yellow-900" },
+  { dark: "to-yellow-200", light: "to-yellow-800" },
+  { dark: "to-yellow-300", light: "to-yellow-700" },
+  { dark: "to-yellow-400", light: "to-yellow-600" },
+  { dark: "to-yellow-500", light: "to-yellow-500" },
+  { dark: "to-yellow-600", light: "to-yellow-400" },
+  { dark: "to-yellow-700", light: "to-yellow-300" },
+  { dark: "to-yellow-800", light: "to-yellow-200" },
+  { dark: "to-yellow-900", light: "to-yellow-100" },
+  { dark: "to-green-100", light: "to-green-900" },
+  { dark: "to-green-200", light: "to-green-800" },
+  { dark: "to-green-300", light: "to-green-700" },
+  { dark: "to-green-400", light: "to-green-600" },
+  { dark: "to-green-500", light: "to-green-500" },
+  { dark: "to-green-600", light: "to-green-400" },
+  { dark: "to-green-700", light: "to-green-300" },
+  { dark: "to-green-800", light: "to-green-200" },
+  { dark: "to-green-900", light: "to-green-100" },
+  { dark: "to-blue-100", light: "to-blue-900" },
+  { dark: "to-blue-200", light: "to-blue-800" },
+  { dark: "to-blue-300", light: "to-blue-700" },
+  { dark: "to-blue-400", light: "to-blue-600" },
+  { dark: "to-blue-500", light: "to-blue-500" },
+  { dark: "to-blue-600", light: "to-blue-400" },
+  { dark: "to-blue-700", light: "to-blue-300" },
+  { dark: "to-blue-800", light: "to-blue-200" },
+  { dark: "to-blue-900", light: "to-blue-100" },
+  { dark: "to-violet-100", light: "to-violet-900" },
+  { dark: "to-violet-200", light: "to-violet-800" },
+  { dark: "to-violet-300", light: "to-violet-700" },
+  { dark: "to-violet-400", light: "to-violet-600" },
+  { dark: "to-violet-500", light: "to-violet-500" },
+  { dark: "to-violet-600", light: "to-violet-400" },
+  { dark: "to-violet-700", light: "to-violet-300" },
+  { dark: "to-violet-800", light: "to-violet-200" },
+  { dark: "to-violet-900", light: "to-violet-100" },
+  { dark: "to-pink-100", light: "to-pink-900" },
+  { dark: "to-pink-200", light: "to-pink-800" },
+  { dark: "to-pink-300", light: "to-pink-700" },
+  { dark: "to-pink-400", light: "to-pink-600" },
+  { dark: "to-pink-500", light: "to-pink-500" },
+  { dark: "to-pink-600", light: "to-pink-400" },
+  { dark: "to-pink-700", light: "to-pink-300" },
+  { dark: "to-pink-800", light: "to-pink-200" },
+  { dark: "to-pink-900", light: "to-pink-100" },
 
-const calculatePaletteRange = (
-  acc: { max: number; min: number },
-  color: string,
-) => {
-  const splitColor = color.split("-");
-  const numericalColor = Number(splitColor[splitColor.length - 1]);
+  { dark: "hover:text-neutral-000", light: "hover:text-neutral-1300" },
+  { dark: "hover:text-neutral-100", light: "hover:text-neutral-1200" },
+  { dark: "hover:text-neutral-200", light: "hover:text-neutral-1100" },
+  { dark: "hover:text-neutral-300", light: "hover:text-neutral-1000" },
+  { dark: "hover:text-neutral-400", light: "hover:text-neutral-900" },
+  { dark: "hover:text-neutral-500", light: "hover:text-neutral-800" },
+  { dark: "hover:text-neutral-600", light: "hover:text-neutral-700" },
+  { dark: "hover:text-neutral-700", light: "hover:text-neutral-600" },
+  { dark: "hover:text-neutral-800", light: "hover:text-neutral-500" },
+  { dark: "hover:text-neutral-900", light: "hover:text-neutral-400" },
+  { dark: "hover:text-neutral-1000", light: "hover:text-neutral-300" },
+  { dark: "hover:text-neutral-1100", light: "hover:text-neutral-200" },
+  { dark: "hover:text-neutral-1200", light: "hover:text-neutral-100" },
+  { dark: "hover:text-neutral-1300", light: "hover:text-neutral-000" },
+  { dark: "hover:text-orange-100", light: "hover:text-orange-1100" },
+  { dark: "hover:text-orange-200", light: "hover:text-orange-1000" },
+  { dark: "hover:text-orange-300", light: "hover:text-orange-900" },
+  { dark: "hover:text-orange-400", light: "hover:text-orange-800" },
+  { dark: "hover:text-orange-500", light: "hover:text-orange-700" },
+  { dark: "hover:text-orange-600", light: "hover:text-orange-600" },
+  { dark: "hover:text-orange-700", light: "hover:text-orange-500" },
+  { dark: "hover:text-orange-800", light: "hover:text-orange-400" },
+  { dark: "hover:text-orange-900", light: "hover:text-orange-300" },
+  { dark: "hover:text-orange-1000", light: "hover:text-orange-200" },
+  { dark: "hover:text-orange-1100", light: "hover:text-orange-100" },
+  { dark: "hover:text-yellow-100", light: "hover:text-yellow-900" },
+  { dark: "hover:text-yellow-200", light: "hover:text-yellow-800" },
+  { dark: "hover:text-yellow-300", light: "hover:text-yellow-700" },
+  { dark: "hover:text-yellow-400", light: "hover:text-yellow-600" },
+  { dark: "hover:text-yellow-500", light: "hover:text-yellow-500" },
+  { dark: "hover:text-yellow-600", light: "hover:text-yellow-400" },
+  { dark: "hover:text-yellow-700", light: "hover:text-yellow-300" },
+  { dark: "hover:text-yellow-800", light: "hover:text-yellow-200" },
+  { dark: "hover:text-yellow-900", light: "hover:text-yellow-100" },
+  { dark: "hover:text-green-100", light: "hover:text-green-900" },
+  { dark: "hover:text-green-200", light: "hover:text-green-800" },
+  { dark: "hover:text-green-300", light: "hover:text-green-700" },
+  { dark: "hover:text-green-400", light: "hover:text-green-600" },
+  { dark: "hover:text-green-500", light: "hover:text-green-500" },
+  { dark: "hover:text-green-600", light: "hover:text-green-400" },
+  { dark: "hover:text-green-700", light: "hover:text-green-300" },
+  { dark: "hover:text-green-800", light: "hover:text-green-200" },
+  { dark: "hover:text-green-900", light: "hover:text-green-100" },
+  { dark: "hover:text-blue-100", light: "hover:text-blue-900" },
+  { dark: "hover:text-blue-200", light: "hover:text-blue-800" },
+  { dark: "hover:text-blue-300", light: "hover:text-blue-700" },
+  { dark: "hover:text-blue-400", light: "hover:text-blue-600" },
+  { dark: "hover:text-blue-500", light: "hover:text-blue-500" },
+  { dark: "hover:text-blue-600", light: "hover:text-blue-400" },
+  { dark: "hover:text-blue-700", light: "hover:text-blue-300" },
+  { dark: "hover:text-blue-800", light: "hover:text-blue-200" },
+  { dark: "hover:text-blue-900", light: "hover:text-blue-100" },
+  { dark: "hover:text-violet-100", light: "hover:text-violet-900" },
+  { dark: "hover:text-violet-200", light: "hover:text-violet-800" },
+  { dark: "hover:text-violet-300", light: "hover:text-violet-700" },
+  { dark: "hover:text-violet-400", light: "hover:text-violet-600" },
+  { dark: "hover:text-violet-500", light: "hover:text-violet-500" },
+  { dark: "hover:text-violet-600", light: "hover:text-violet-400" },
+  { dark: "hover:text-violet-700", light: "hover:text-violet-300" },
+  { dark: "hover:text-violet-800", light: "hover:text-violet-200" },
+  { dark: "hover:text-violet-900", light: "hover:text-violet-100" },
+  { dark: "hover:text-pink-100", light: "hover:text-pink-900" },
+  { dark: "hover:text-pink-200", light: "hover:text-pink-800" },
+  { dark: "hover:text-pink-300", light: "hover:text-pink-700" },
+  { dark: "hover:text-pink-400", light: "hover:text-pink-600" },
+  { dark: "hover:text-pink-500", light: "hover:text-pink-500" },
+  { dark: "hover:text-pink-600", light: "hover:text-pink-400" },
+  { dark: "hover:text-pink-700", light: "hover:text-pink-300" },
+  { dark: "hover:text-pink-800", light: "hover:text-pink-200" },
+  { dark: "hover:text-pink-900", light: "hover:text-pink-100" },
 
-  return {
-    min: acc.min === -1 || numericalColor < acc.min ? numericalColor : acc.min,
-    max: acc.max === -1 || numericalColor > acc.max ? numericalColor : acc.max,
-  };
-};
+  { dark: "focus:text-neutral-000", light: "focus:text-neutral-1300" },
+  { dark: "focus:text-neutral-100", light: "focus:text-neutral-1200" },
+  { dark: "focus:text-neutral-200", light: "focus:text-neutral-1100" },
+  { dark: "focus:text-neutral-300", light: "focus:text-neutral-1000" },
+  { dark: "focus:text-neutral-400", light: "focus:text-neutral-900" },
+  { dark: "focus:text-neutral-500", light: "focus:text-neutral-800" },
+  { dark: "focus:text-neutral-600", light: "focus:text-neutral-700" },
+  { dark: "focus:text-neutral-700", light: "focus:text-neutral-600" },
+  { dark: "focus:text-neutral-800", light: "focus:text-neutral-500" },
+  { dark: "focus:text-neutral-900", light: "focus:text-neutral-400" },
+  { dark: "focus:text-neutral-1000", light: "focus:text-neutral-300" },
+  { dark: "focus:text-neutral-1100", light: "focus:text-neutral-200" },
+  { dark: "focus:text-neutral-1200", light: "focus:text-neutral-100" },
+  { dark: "focus:text-neutral-1300", light: "focus:text-neutral-000" },
+  { dark: "focus:text-orange-100", light: "focus:text-orange-1100" },
+  { dark: "focus:text-orange-200", light: "focus:text-orange-1000" },
+  { dark: "focus:text-orange-300", light: "focus:text-orange-900" },
+  { dark: "focus:text-orange-400", light: "focus:text-orange-800" },
+  { dark: "focus:text-orange-500", light: "focus:text-orange-700" },
+  { dark: "focus:text-orange-600", light: "focus:text-orange-600" },
+  { dark: "focus:text-orange-700", light: "focus:text-orange-500" },
+  { dark: "focus:text-orange-800", light: "focus:text-orange-400" },
+  { dark: "focus:text-orange-900", light: "focus:text-orange-300" },
+  { dark: "focus:text-orange-1000", light: "focus:text-orange-200" },
+  { dark: "focus:text-orange-1100", light: "focus:text-orange-100" },
+  { dark: "focus:text-yellow-100", light: "focus:text-yellow-900" },
+  { dark: "focus:text-yellow-200", light: "focus:text-yellow-800" },
+  { dark: "focus:text-yellow-300", light: "focus:text-yellow-700" },
+  { dark: "focus:text-yellow-400", light: "focus:text-yellow-600" },
+  { dark: "focus:text-yellow-500", light: "focus:text-yellow-500" },
+  { dark: "focus:text-yellow-600", light: "focus:text-yellow-400" },
+  { dark: "focus:text-yellow-700", light: "focus:text-yellow-300" },
+  { dark: "focus:text-yellow-800", light: "focus:text-yellow-200" },
+  { dark: "focus:text-yellow-900", light: "focus:text-yellow-100" },
+  { dark: "focus:text-green-100", light: "focus:text-green-900" },
+  { dark: "focus:text-green-200", light: "focus:text-green-800" },
+  { dark: "focus:text-green-300", light: "focus:text-green-700" },
+  { dark: "focus:text-green-400", light: "focus:text-green-600" },
+  { dark: "focus:text-green-500", light: "focus:text-green-500" },
+  { dark: "focus:text-green-600", light: "focus:text-green-400" },
+  { dark: "focus:text-green-700", light: "focus:text-green-300" },
+  { dark: "focus:text-green-800", light: "focus:text-green-200" },
+  { dark: "focus:text-green-900", light: "focus:text-green-100" },
+  { dark: "focus:text-blue-100", light: "focus:text-blue-900" },
+  { dark: "focus:text-blue-200", light: "focus:text-blue-800" },
+  { dark: "focus:text-blue-300", light: "focus:text-blue-700" },
+  { dark: "focus:text-blue-400", light: "focus:text-blue-600" },
+  { dark: "focus:text-blue-500", light: "focus:text-blue-500" },
+  { dark: "focus:text-blue-600", light: "focus:text-blue-400" },
+  { dark: "focus:text-blue-700", light: "focus:text-blue-300" },
+  { dark: "focus:text-blue-800", light: "focus:text-blue-200" },
+  { dark: "focus:text-blue-900", light: "focus:text-blue-100" },
+  { dark: "focus:text-violet-100", light: "focus:text-violet-900" },
+  { dark: "focus:text-violet-200", light: "focus:text-violet-800" },
+  { dark: "focus:text-violet-300", light: "focus:text-violet-700" },
+  { dark: "focus:text-violet-400", light: "focus:text-violet-600" },
+  { dark: "focus:text-violet-500", light: "focus:text-violet-500" },
+  { dark: "focus:text-violet-600", light: "focus:text-violet-400" },
+  { dark: "focus:text-violet-700", light: "focus:text-violet-300" },
+  { dark: "focus:text-violet-800", light: "focus:text-violet-200" },
+  { dark: "focus:text-violet-900", light: "focus:text-violet-100" },
+  { dark: "focus:text-pink-100", light: "focus:text-pink-900" },
+  { dark: "focus:text-pink-200", light: "focus:text-pink-800" },
+  { dark: "focus:text-pink-300", light: "focus:text-pink-700" },
+  { dark: "focus:text-pink-400", light: "focus:text-pink-600" },
+  { dark: "focus:text-pink-500", light: "focus:text-pink-500" },
+  { dark: "focus:text-pink-600", light: "focus:text-pink-400" },
+  { dark: "focus:text-pink-700", light: "focus:text-pink-300" },
+  { dark: "focus:text-pink-800", light: "focus:text-pink-200" },
+  { dark: "focus:text-pink-900", light: "focus:text-pink-100" },
+
+  {
+    dark: "group-hover:text-neutral-000",
+    light: "group-hover:text-neutral-1300",
+  },
+  {
+    dark: "group-hover:text-neutral-100",
+    light: "group-hover:text-neutral-1200",
+  },
+  {
+    dark: "group-hover:text-neutral-200",
+    light: "group-hover:text-neutral-1100",
+  },
+  {
+    dark: "group-hover:text-neutral-300",
+    light: "group-hover:text-neutral-1000",
+  },
+  {
+    dark: "group-hover:text-neutral-400",
+    light: "group-hover:text-neutral-900",
+  },
+  {
+    dark: "group-hover:text-neutral-500",
+    light: "group-hover:text-neutral-800",
+  },
+  {
+    dark: "group-hover:text-neutral-600",
+    light: "group-hover:text-neutral-700",
+  },
+  {
+    dark: "group-hover:text-neutral-700",
+    light: "group-hover:text-neutral-600",
+  },
+  {
+    dark: "group-hover:text-neutral-800",
+    light: "group-hover:text-neutral-500",
+  },
+  {
+    dark: "group-hover:text-neutral-900",
+    light: "group-hover:text-neutral-400",
+  },
+  {
+    dark: "group-hover:text-neutral-1000",
+    light: "group-hover:text-neutral-300",
+  },
+  {
+    dark: "group-hover:text-neutral-1100",
+    light: "group-hover:text-neutral-200",
+  },
+  {
+    dark: "group-hover:text-neutral-1200",
+    light: "group-hover:text-neutral-100",
+  },
+  {
+    dark: "group-hover:text-neutral-1300",
+    light: "group-hover:text-neutral-000",
+  },
+  {
+    dark: "group-hover:text-orange-100",
+    light: "group-hover:text-orange-1100",
+  },
+  {
+    dark: "group-hover:text-orange-200",
+    light: "group-hover:text-orange-1000",
+  },
+  { dark: "group-hover:text-orange-300", light: "group-hover:text-orange-900" },
+  { dark: "group-hover:text-orange-400", light: "group-hover:text-orange-800" },
+  { dark: "group-hover:text-orange-500", light: "group-hover:text-orange-700" },
+  { dark: "group-hover:text-orange-600", light: "group-hover:text-orange-600" },
+  { dark: "group-hover:text-orange-700", light: "group-hover:text-orange-500" },
+  { dark: "group-hover:text-orange-800", light: "group-hover:text-orange-400" },
+  { dark: "group-hover:text-orange-900", light: "group-hover:text-orange-300" },
+  {
+    dark: "group-hover:text-orange-1000",
+    light: "group-hover:text-orange-200",
+  },
+  {
+    dark: "group-hover:text-orange-1100",
+    light: "group-hover:text-orange-100",
+  },
+  { dark: "group-hover:text-yellow-100", light: "group-hover:text-yellow-900" },
+  { dark: "group-hover:text-yellow-200", light: "group-hover:text-yellow-800" },
+  { dark: "group-hover:text-yellow-300", light: "group-hover:text-yellow-700" },
+  { dark: "group-hover:text-yellow-400", light: "group-hover:text-yellow-600" },
+  { dark: "group-hover:text-yellow-500", light: "group-hover:text-yellow-500" },
+  { dark: "group-hover:text-yellow-600", light: "group-hover:text-yellow-400" },
+  { dark: "group-hover:text-yellow-700", light: "group-hover:text-yellow-300" },
+  { dark: "group-hover:text-yellow-800", light: "group-hover:text-yellow-200" },
+  { dark: "group-hover:text-yellow-900", light: "group-hover:text-yellow-100" },
+  { dark: "group-hover:text-green-100", light: "group-hover:text-green-900" },
+  { dark: "group-hover:text-green-200", light: "group-hover:text-green-800" },
+  { dark: "group-hover:text-green-300", light: "group-hover:text-green-700" },
+  { dark: "group-hover:text-green-400", light: "group-hover:text-green-600" },
+  { dark: "group-hover:text-green-500", light: "group-hover:text-green-500" },
+  { dark: "group-hover:text-green-600", light: "group-hover:text-green-400" },
+  { dark: "group-hover:text-green-700", light: "group-hover:text-green-300" },
+  { dark: "group-hover:text-green-800", light: "group-hover:text-green-200" },
+  { dark: "group-hover:text-green-900", light: "group-hover:text-green-100" },
+  { dark: "group-hover:text-blue-100", light: "group-hover:text-blue-900" },
+  { dark: "group-hover:text-blue-200", light: "group-hover:text-blue-800" },
+  { dark: "group-hover:text-blue-300", light: "group-hover:text-blue-700" },
+  { dark: "group-hover:text-blue-400", light: "group-hover:text-blue-600" },
+  { dark: "group-hover:text-blue-500", light: "group-hover:text-blue-500" },
+  { dark: "group-hover:text-blue-600", light: "group-hover:text-blue-400" },
+  { dark: "group-hover:text-blue-700", light: "group-hover:text-blue-300" },
+  { dark: "group-hover:text-blue-800", light: "group-hover:text-blue-200" },
+  { dark: "group-hover:text-blue-900", light: "group-hover:text-blue-100" },
+  { dark: "group-hover:text-violet-100", light: "group-hover:text-violet-900" },
+  { dark: "group-hover:text-violet-200", light: "group-hover:text-violet-800" },
+  { dark: "group-hover:text-violet-300", light: "group-hover:text-violet-700" },
+  { dark: "group-hover:text-violet-400", light: "group-hover:text-violet-600" },
+  { dark: "group-hover:text-violet-500", light: "group-hover:text-violet-500" },
+  { dark: "group-hover:text-violet-600", light: "group-hover:text-violet-400" },
+  { dark: "group-hover:text-violet-700", light: "group-hover:text-violet-300" },
+  { dark: "group-hover:text-violet-800", light: "group-hover:text-violet-200" },
+  { dark: "group-hover:text-violet-900", light: "group-hover:text-violet-100" },
+  { dark: "group-hover:text-pink-100", light: "group-hover:text-pink-900" },
+  { dark: "group-hover:text-pink-200", light: "group-hover:text-pink-800" },
+  { dark: "group-hover:text-pink-300", light: "group-hover:text-pink-700" },
+  { dark: "group-hover:text-pink-400", light: "group-hover:text-pink-600" },
+  { dark: "group-hover:text-pink-500", light: "group-hover:text-pink-500" },
+  { dark: "group-hover:text-pink-600", light: "group-hover:text-pink-400" },
+  { dark: "group-hover:text-pink-700", light: "group-hover:text-pink-300" },
+  { dark: "group-hover:text-pink-800", light: "group-hover:text-pink-200" },
+  { dark: "group-hover:text-pink-900", light: "group-hover:text-pink-100" },
+];
+
+export const convertTailwindClassToVar = (className: string) =>
+  className.replace(/(text|bg|from|to)-([a-z0-9-]+)/gi, "var(--color-$2)");
 
 export const determineThemeColor = (
   baseTheme: Theme,
   currentTheme: Theme,
   color: ColorClass,
-) => {
-  if (baseTheme === currentTheme) {
-    return color;
-  } else {
-    const splitColor = color.split("-");
-
-    if (splitColor.length >= 3) {
-      const property = splitColor.slice(0, splitColor.length - 2).join("-");
-      const palette = splitColor[splitColor.length - 2];
-      const variant = splitColor[splitColor.length - 1];
-
-      const paletteColors = Object.keys(colorNames).includes(palette)
-        ? colorNames[palette as keyof typeof colorNames]
-        : colorNames.secondary;
-
-      const { min, max } = paletteColors.reduce(
-        (acc, color) => calculatePaletteRange(acc, color),
-        {
-          min: -1,
-          max: -1,
-        },
-      );
-
-      return `${property}-${palette}-${(max + min - Number(variant)).toString().padStart(3, "0")}` as ColorClass;
-    } else {
-      return color;
-    }
-  }
-};
+) =>
+  baseTheme === currentTheme
+    ? color
+    : colorMappings.find((set) => set[baseTheme] === color)?.[currentTheme] ||
+      color;
diff --git a/tailwind.config.js b/tailwind.config.js
index 010519da..119d68bd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,20 +1,7 @@
 module.exports = {
   content: ["./src/**/*.{js,ts,tsx,mdx,stories.tsx}"],
-  safelist: [
-    "w-1/2",
-    "w-1/3",
-    "w-1/4",
-    "w-1/5",
-    "w-1/6",
-    { pattern: /^hljs.*/ },
-    { pattern: /^ui-.*/ },
-    {
-      pattern:
-        /^(text|bg|from|to)-(neutral|orange|yellow|green|blue|violet|pink)-[\d]{1,2}00.*/,
-      variants: ["hover", "focus", "group-hover"],
-    },
-  ],
   theme: {
+    safelist: [],
     screens: {
       // CSS custom properties can't be used in media queries
       xs: "428px",