Bundle and export the color palette generation tools (#191)

* Extract the Leonardo theme generation into its own file.

* Use Vite to serve and bundle the color tools

* Copy the bundled sources to mobile.

* Remove colour studio CI job.

The build is already building it :D

---------

Co-authored-by: Robin <[email protected]>

Author: pixlwave

.github/workflows/automation.yaml

@@ -62,21 +62,3 @@ jobs:
             echo "$(git status)"
             exit 1
           fi
-
-  build-colour-studio:
-    name: Build color system generator
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
-      - name: Set up cache
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
-        with:
-          node-version: "lts/*"
-          cache: yarn
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-        working-directory: scripts/colour-studio
-      - name: Build generated files
-        run: yarn build
-        working-directory: scripts/colour-studio

Package.swift

@@ -9,6 +9,8 @@ let package = Package(
         .library(name: "CompoundDesignTokens", targets: ["CompoundDesignTokens"])
     ],
     targets: [
-        .target(name: "CompoundDesignTokens", path: "assets/ios/swift")
+        .target(name: "CompoundDesignTokens",
+                path: "assets/ios/swift",
+                resources: [.copy("Resources/theme.iife.js")])
     ]
 )

README.md

@@ -24,6 +24,7 @@ Tokens are exported to three platforms
 
 - [Development](./docs/development.md)
 - [Icons](./docs/icons.md)
+- [Colors](./docs/colors.md)
 - [Release](./docs/release.md)
 - [Synchronise with Figma](https://compound.element.io/?path=/docs/design-get-started--docs)
 

assets/android/res/theme.iife.js

@@ -0,0 +1,5 @@
+import Foundation
+
+public extension CompoundDesignTokens {
+    static let bundle = Bundle.module
+}

assets/ios/swift/CompoundDesignTokens+Bundle.swift

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.2/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.3/schema.json",
   "files": {
     "includes": ["**", "!**/assets", "!**/tokens", "!**/icons/$icons.json"]
   },

assets/ios/swift/Resources/theme.iife.js

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import type { Platform, Theme } from "./src/@types/index";
+import { copyThemeDist } from "./src/copyThemeDist";
 import * as setupStyleDictionary from "./src/setupStyleDictionary";
 import { generateCssIndex } from "./src/utils/generateCssIndex";
 import generateIconComponents from "./src/utils/generateIconComponents";
@@ -18,6 +19,7 @@ const platforms: Platform[] = ["web", "android", "ios"];
 
 await normalizeTokens();
 await generateIconComponents();
+await copyThemeDist();
 generateCssIndex();
 
 for (const platform of platforms) {

biome.json

@@ -0,0 +1,9 @@
+# 🎨 Colors
+
+All of Compound's color tokens are generated from a handful of *key colors* using a script based on Leonardo Color by Adobe. This repository includes a web applet which can be used to visualize the generated color palette and experiment with custom key colors. To launch it, run:
+
+```
+yarn dev:colors
+```
+
+Additionally when built, the design tokens package provides a set of JS utilities for generating color scales from custom key colors on the fly in apps, just like those seen in the web applet.

build.ts

@@ -4,9 +4,10 @@
   "description": "Compound design tokens",
   "sideEffects": false,
   "scripts": {
-    "build": "tsx ./build.ts",
+    "build": "vite build && tsx ./build.ts",
     "sync:icons": "tsx src/syncIcons.ts",
     "dev": "http-server .",
+    "dev:colors": "vite --open src/colors/applet.html",
     "format": "yarn exec biome -- format",
     "lint": "yarn exec biome -- lint",
     "check": "yarn exec biome -- check",
@@ -28,18 +29,18 @@
     "./*": "./*",
     "./assets/web/js": "./assets/web/js/index.js",
     "./assets/web/js/*": {
-      "import": "./assets/web/js/*.js",
-      "types": "./assets/web/js/*.d.ts"
+      "types": "./assets/web/js/*.d.ts",
+      "import": "./assets/web/js/*.js"
     },
     "./assets/web/icons": {
+      "types": "./assets/web/icons/index.d.ts",
       "import": "./assets/web/icons/index.js",
-      "require": "./assets/web/icons/index.cjs",
-      "types": "./assets/web/icons/index.d.ts"
+      "require": "./assets/web/icons/index.cjs"
     },
     "./assets/web/icons/*": {
+      "types": "./assets/web/icons/*.d.ts",
       "import": "./assets/web/icons/*.js",
-      "require": "./assets/web/icons/*.cjs",
-      "types": "./assets/web/icons/*.d.ts"
+      "require": "./assets/web/icons/*.cjs"
     }
   },
   "author": "",
@@ -53,6 +54,7 @@
     "url": "https://github.com/element-hq/compound-design-tokens"
   },
   "devDependencies": {
+    "@adobe/leonardo-contrast-colors": "^1.0.0",
     "@babel/core": "^7.24.7",
     "@babel/generator": "^7.24.7",
     "@babel/plugin-transform-react-jsx": "^7.24.7",
@@ -67,6 +69,8 @@
     "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.0.0",
+    "apca-w3": "^0.1.9",
+    "chroma-js": "^3.0.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.3.1",
     "http-server": "^14.1.1",
@@ -77,6 +81,7 @@
     "tsx": "^4.15.6",
     "typescript": "^5.4.5",
     "undici": "^7.2.0",
+    "vite": "^7.1.12",
     "zod": "^4.0.0"
   },
   "dependencies": {},