Merge pull request #504 from ably/automate-color-computation

[WEB-4025] replace hard-coded TW tables with build-generated alternative

.gitignore

@@ -8,4 +8,5 @@ yarn-error.log
 /reset
 .idea/*
 types
-index.d.ts
+index.d.ts
+computed-colors-*.json

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",
@@ -48,6 +48,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 +57,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:colors && yarn build:swc && node sprites.js && 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,72 @@
+import fs from "fs";
+import path from "path";
+import {
+  numericalColors,
+  variants,
+  prefixes,
+  Theme,
+  ComputedColors,
+} from "../src/core/styles/colors/types";
+
+const computeColors = (base: Theme) => {
+  if (base !== "dark" && base !== "light") {
+    throw new Error(`Invalid base theme: ${base}. Expected "dark" or "light".`);
+  }
+
+  const colors = {} as ComputedColors;
+
+  variants.forEach((variant) =>
+    prefixes.forEach((property) =>
+      numericalColors.forEach((colorSet) =>
+        colorSet.map((color, index) => {
+          if (base === "dark") {
+            colors[`${variant}${property}-${colorSet[index]}`] = {
+              light: `${variant}${property}-${colorSet[colorSet.length - index - 1]}`,
+            };
+          } else if (base === "light") {
+            colors[`${variant}${property}-${colorSet[index]}`] = {
+              dark: `${variant}${property}-${colorSet[colorSet.length - index - 1]}`,
+            };
+          }
+        }),
+      ),
+    ),
+  );
+
+  return colors;
+};
+
+const darkOutputPath = path.join(
+  __dirname,
+  "../src/core/styles/colors",
+  "computed-colors-dark.json",
+);
+const lightOutputPath = path.join(
+  __dirname,
+  "../src/core/styles/colors",
+  "computed-colors-light.json",
+);
+
+async function writeComputedColors() {
+  try {
+    await Promise.all([
+      fs.promises.writeFile(
+        darkOutputPath,
+        JSON.stringify(computeColors("dark"), null, 2),
+        "utf-8",
+      ),
+      fs.promises.writeFile(
+        lightOutputPath,
+        JSON.stringify(computeColors("light"), null, 2),
+        "utf-8",
+      ),
+    ]);
+    console.log(
+      `🎨 Tailwind theme classes have been computed and written to JSON files.`,
+    );
+  } catch {
+    console.error(`Error persisting computed colors.`);
+  }
+}
+
+writeComputedColors();

src/core/styles/colors/types.ts

@@ -5,21 +5,26 @@ export type ColorName =
   | (typeof guiColors)[number]
   | (typeof aliasedColors)[number];
 
-type ColorClassVariants =
-  | ""
-  | "hover:"
-  | "focus:"
-  | "group-hover:"
-  | "group-focus:";
+export const variants = [
+  "",
+  "hover:",
+  "focus:",
+  "group-hover:",
+  "group-focus:",
+] as const;
+
+type ColorClassVariants = (typeof variants)[number];
+
+export const prefixes = ["text", "bg", "from", "to", "border"] as const;
 
-type ColorClassPrefixes = "bg" | "text" | "from" | "to" | "border";
+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 +41,7 @@ const neutralColors = [
   "neutral-1300",
 ] as const;
 
-const orangeColors = [
+export const orangeColors = [
   "orange-100",
   "orange-200",
   "orange-300",
@@ -50,7 +55,7 @@ const orangeColors = [
   "orange-1100",
 ] as const;
 
-const secondaryColors = [
+export const yellowColors = [
   "yellow-100",
   "yellow-200",
   "yellow-300",
@@ -60,6 +65,9 @@ const secondaryColors = [
   "yellow-700",
   "yellow-800",
   "yellow-900",
+] as const;
+
+export const greenColors = [
   "green-100",
   "green-200",
   "green-300",
@@ -69,6 +77,9 @@ const secondaryColors = [
   "green-700",
   "green-800",
   "green-900",
+] as const;
+
+export const blueColors = [
   "blue-100",
   "blue-200",
   "blue-300",
@@ -78,6 +89,9 @@ const secondaryColors = [
   "blue-700",
   "blue-800",
   "blue-900",
+] as const;
+
+export const violetColors = [
   "violet-100",
   "violet-200",
   "violet-300",
@@ -87,6 +101,9 @@ const secondaryColors = [
   "violet-700",
   "violet-800",
   "violet-900",
+] as const;
+
+export const pinkColors = [
   "pink-100",
   "pink-200",
   "pink-300",
@@ -98,6 +115,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 +170,18 @@ export const colorNames = {
   secondary: secondaryColors,
   gui: guiColors,
 };
+
+export const numericalColors = [
+  neutralColors,
+  orangeColors,
+  yellowColors,
+  greenColors,
+  blueColors,
+  violetColors,
+  pinkColors,
+];
+
+export type ComputedColors = Record<
+  ColorClass,
+  Partial<Record<Theme, ColorClass>>
+>;