fix: replace hard-coded TW tables with build-generated alternative

computed-colors.json

@@ -0,0 +1 @@
+[]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.6.5",
+  "version": "14.6.6",
   "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",
@@ -12,7 +12,8 @@
     "reset",
     "tailwind.config.js",
     "tailwind.extend.js",
-    "index.d.ts"
+    "index.d.ts",
+    "computed-colors.json"
   ],
   "types": "index.d.ts",
   "devDependencies": {
@@ -48,6 +49,7 @@
     "storybook-dark-mode": "^4.0.2",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",
+    "ts-node": "^10.9.2",
     "typescript": "5.6.2",
     "vite": "^5.2.12"
   },
@@ -56,7 +58,8 @@
     "build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap",
     "build:tsc": "tsc && node tsc.js && rm -r types",
     "build:cleanup": "mv dist/* . && rm -r dist",
-    "build": "yarn build:prebuild && yarn build:swc && node sprites.js && yarn build:tsc && yarn build:cleanup",
+    "build:colors": "ts-node scripts/compute-colors.ts",
+    "build": "yarn build:prebuild && yarn build:swc && node sprites.js && yarn build:colors && yarn build:tsc && yarn build:cleanup",
     "watch": "yarn build:swc -w",
     "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
     "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx}",

scripts/compute-colors.ts

@@ -0,0 +1,27 @@
+import {
+  numericalColors,
+  variants,
+  prefixes,
+} from "../src/core/styles/colors/types";
+
+import fs from "fs";
+import path from "path";
+
+const colorList = variants.flatMap((variant) =>
+  prefixes.flatMap((property) =>
+    numericalColors.flatMap((colorSet) =>
+      colorSet.map((color, index) => ({
+        dark: `${variant}${property}-${color}`,
+        light: `${variant}${property}-${colorSet[colorSet.length - index - 1]}`,
+      })),
+    ),
+  ),
+);
+
+const outputPath = path.join(__dirname, "..", "computed-colors.json");
+
+fs.writeFileSync(outputPath, JSON.stringify(colorList, null, 2), "utf-8");
+
+console.log(
+  `🎨 Tailwind theme classes have been computed and written to computed-colors.json.`,
+);

src/core/styles/colors/types.ts

@@ -5,21 +5,20 @@ export type ColorName =
   | (typeof guiColors)[number]
   | (typeof aliasedColors)[number];
 
-type ColorClassVariants =
-  | ""
-  | "hover:"
-  | "focus:"
-  | "group-hover:"
-  | "group-focus:";
+export const variants = ["", "hover:", "focus:", "group-hover:"] as const;
 
-type ColorClassPrefixes = "bg" | "text" | "from" | "to" | "border";
+type ColorClassVariants = (typeof variants)[number];
+
+export const prefixes = ["text", "bg", "from", "to", "border"] as const;
+
+type ColorClassPrefixes = (typeof prefixes)[number];
 
 export type Theme = "light" | "dark";
 
 export type ColorClass =
   `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;
 
-const neutralColors = [
+export const neutralColors = [
   "neutral-000",
   "neutral-100",
   "neutral-200",
@@ -36,7 +35,7 @@ const neutralColors = [
   "neutral-1300",
 ] as const;
 
-const orangeColors = [
+export const orangeColors = [
   "orange-100",
   "orange-200",
   "orange-300",
@@ -50,7 +49,7 @@ const orangeColors = [
   "orange-1100",
 ] as const;
 
-const secondaryColors = [
+export const yellowColors = [
   "yellow-100",
   "yellow-200",
   "yellow-300",
@@ -60,6 +59,9 @@ const secondaryColors = [
   "yellow-700",
   "yellow-800",
   "yellow-900",
+] as const;
+
+export const greenColors = [
   "green-100",
   "green-200",
   "green-300",
@@ -69,6 +71,9 @@ const secondaryColors = [
   "green-700",
   "green-800",
   "green-900",
+] as const;
+
+export const blueColors = [
   "blue-100",
   "blue-200",
   "blue-300",
@@ -78,6 +83,9 @@ const secondaryColors = [
   "blue-700",
   "blue-800",
   "blue-900",
+] as const;
+
+export const violetColors = [
   "violet-100",
   "violet-200",
   "violet-300",
@@ -87,6 +95,9 @@ const secondaryColors = [
   "violet-700",
   "violet-800",
   "violet-900",
+] as const;
+
+export const pinkColors = [
   "pink-100",
   "pink-200",
   "pink-300",
@@ -98,6 +109,14 @@ const secondaryColors = [
   "pink-900",
 ] as const;
 
+const secondaryColors = [
+  ...yellowColors,
+  ...greenColors,
+  ...blueColors,
+  ...violetColors,
+  ...pinkColors,
+] as const;
+
 const guiColors = [
   "gui-blue-default-light",
   "gui-blue-hover-light",
@@ -145,3 +164,13 @@ export const colorNames = {
   secondary: secondaryColors,
   gui: guiColors,
 };
+
+export const numericalColors = [
+  neutralColors,
+  orangeColors,
+  yellowColors,
+  greenColors,
+  blueColors,
+  violetColors,
+  pinkColors,
+];