Merge pull request #37 from audiophore/feat/color-tokens-export

feat(tokens): export palette as brand.css + brand.json

Author: IamMrCupp

.github/workflows/build.yml

@@ -36,8 +36,8 @@ jobs:
 
       - name: Verify checked-in assets match build output
         run: |
-          git diff --exit-code -- logos/ || {
-            echo "::error::Generated assets in logos/ differ from checked-in versions."
+          git diff --exit-code -- logos/ tokens/ || {
+            echo "::error::Generated assets in logos/ or tokens/ differ from checked-in versions."
             echo "::error::Run 'make' locally and commit the result."
             exit 1
           }

Makefile

@@ -5,6 +5,7 @@
 #   make svgs       # only SVGs
 #   make pngs       # only PNGs (requires SVGs to exist)
 #   make favicons   # only favicons
+#   make tokens     # only color tokens (brand.css + brand.json)
 #   make docs       # only BRANDING.md
 #   make clean      # remove all generated assets
 #   make check      # CI check: exit 1 if BRANDING.md is out of sync
@@ -16,7 +17,7 @@ PYTHON := python3
 SCRIPTS := scripts
 ASSETS := logos
 
-.PHONY: all build svgs pngs favicons docs clean check install help
+.PHONY: all build svgs pngs favicons tokens docs clean check install help
 
 all: build docs
 
@@ -27,6 +28,7 @@ help:
 	@echo "  svgs     - generate only SVGs"
 	@echo "  pngs     - generate only PNGs (requires SVGs)"
 	@echo "  favicons - generate only favicons"
+	@echo "  tokens   - generate color tokens (brand.css + brand.json)"
 	@echo "  docs     - regenerate BRANDING.md from brand.toml"
 	@echo "  clean    - remove all generated assets"
 	@echo "  check    - verify BRANDING.md is in sync with brand.toml"
@@ -44,6 +46,9 @@ pngs:
 favicons:
 	$(PYTHON) $(SCRIPTS)/build.py favicon
 
+tokens:
+	$(PYTHON) $(SCRIPTS)/build.py tokens
+
 docs:
 	$(PYTHON) $(SCRIPTS)/render_branding_md.py
 

brand.toml

@@ -41,6 +41,18 @@ wash_dark   = "#0a0e1a"   # neutral dark surface
 # Edit BRANDING.md descriptions only by editing this section.
 primary_accent = "mid_highs"   # the single "brand color" when only one is allowed
 
+# ──────────────────────────────────────────────────────────────────────
+# Token export
+#
+# Downstream consumers (the website, hardware render/CAD scripts) should
+# reference the palette, not hand-copy hexes. `make tokens` emits
+# tokens/brand.css (:root custom properties) + tokens/brand.json straight
+# from [colors.*] above — change a hex there and both regenerate.
+# ──────────────────────────────────────────────────────────────────────
+
+[tokens]
+css_prefix = "ap"   # CSS custom-property namespace → --ap-highs, --ap-ink, …
+
 # ──────────────────────────────────────────────────────────────────────
 # Symbol layout
 #

scripts/build.py

@@ -7,6 +7,8 @@
   - logos/png/*.png     (all rasters at all configured sizes)
   - logos/favicon/*.png (favicon sizes)
   - logos/favicon/favicon.ico (multi-resolution legacy favicon)
+  - tokens/brand.css    (palette as :root CSS custom properties)
+  - tokens/brand.json   (palette as structured JSON)
 
 Usage:
     python scripts/build.py            # Build everything
@@ -20,6 +22,7 @@
 from __future__ import annotations
 
 import argparse
+import json
 import os
 import shutil
 import subprocess
@@ -41,6 +44,9 @@
 SVG_DIR = ASSETS_DIR / "svg"
 PNG_DIR = ASSETS_DIR / "png"
 FAVICON_DIR = ASSETS_DIR / "favicon"
+# Non-logo machine-readable exports (palette tokens) live one level up from
+# logos/ so consumers can grab just the tokens without the whole asset tree.
+TOKENS_DIR = ROOT / "tokens"
 
 
 # ─── Config helpers ─────────────────────────────────────────────────
@@ -374,28 +380,81 @@ def build_favicons(cfg: dict) -> list[Path]:
     return written
 
 
+# ─── Token export (CSS + JSON) ──────────────────────────────────────
+
+def _css_var(prefix: str, key: str) -> str:
+    """Map a palette key to a CSS custom-property name: mid_highs → --ap-mid-highs."""
+    return f"--{prefix}-{key.replace('_', '-')}"
+
+
+def write_tokens(cfg: dict) -> list[Path]:
+    """Export the palette as tokens/brand.css (:root vars) + tokens/brand.json.
+
+    Sourced straight from [colors.*] so consumers reference the brand
+    instead of hand-copying hexes. tomllib preserves insertion order, so
+    output is deterministic.
+    """
+    prefix = cfg["tokens"]["css_prefix"]
+    spectrum = cfg["colors"]["spectrum"]
+    neutrals = cfg["colors"]["neutrals"]
+    semantics = cfg["colors"]["semantics"]
+
+    # CSS
+    lines = [
+        "/* Audiophore brand color tokens — generated from brand.toml by scripts/build.py.",
+        " * Do not edit by hand; run `make tokens`. */",
+        ":root {",
+        "  /* Spectrum — each maps to an FFT band (high → low). */",
+    ]
+    lines += [f"  {_css_var(prefix, k)}: {v};" for k, v in spectrum.items()]
+    lines.append("  /* Neutrals. */")
+    lines += [f"  {_css_var(prefix, k)}: {v};" for k, v in neutrals.items()]
+    lines.append("  /* Semantic aliases. */")
+    lines += [
+        f"  {_css_var(prefix, k)}: var({_css_var(prefix, target)});"
+        for k, target in semantics.items()
+    ]
+    lines.append("}")
+    css = "\n".join(lines) + "\n"
+
+    # JSON
+    data = {
+        "meta": {"name": cfg["meta"]["name"], "slug": cfg["meta"]["slug"]},
+        "spectrum": dict(spectrum),
+        "neutrals": dict(neutrals),
+        "semantics": {k: neutrals.get(t) or spectrum.get(t) for k, t in semantics.items()},
+    }
+    js = json.dumps(data, indent=2) + "\n"
+
+    css_path = TOKENS_DIR / "brand.css"
+    json_path = TOKENS_DIR / "brand.json"
+    css_path.write_text(css)
+    json_path.write_text(js)
+    return [css_path, json_path]
+
+
 # ─── Cleanup and CLI ────────────────────────────────────────────────
 
 def clean():
     """Remove all generated assets."""
-    for d in (SVG_DIR, PNG_DIR, FAVICON_DIR):
+    for d in (SVG_DIR, PNG_DIR, FAVICON_DIR, TOKENS_DIR):
         if d.exists():
             shutil.rmtree(d)
             print(f"  removed {d.relative_to(ROOT)}")
-    for d in (SVG_DIR, PNG_DIR, FAVICON_DIR):
+    for d in (SVG_DIR, PNG_DIR, FAVICON_DIR, TOKENS_DIR):
         d.mkdir(parents=True, exist_ok=True)
 
 
 def ensure_dirs():
-    for d in (SVG_DIR, PNG_DIR, FAVICON_DIR):
+    for d in (SVG_DIR, PNG_DIR, FAVICON_DIR, TOKENS_DIR):
         d.mkdir(parents=True, exist_ok=True)
 
 
 def main():
     parser = argparse.ArgumentParser(description=__doc__.strip().split("\n")[0])
     parser.add_argument(
         "targets", nargs="*",
-        choices=["all", "symbol", "wordmark", "lockup", "png", "favicon", []],
+        choices=["all", "symbol", "wordmark", "lockup", "png", "favicon", "tokens", []],
         default=[],
         help="Which assets to build (default: all)",
     )
@@ -411,7 +470,7 @@ def main():
 
     targets = set(args.targets) if args.targets else {"all"}
     if "all" in targets:
-        targets = {"symbol", "wordmark", "lockup", "png", "favicon"}
+        targets = {"symbol", "wordmark", "lockup", "png", "favicon", "tokens"}
 
     if "symbol" in targets:
         print("Building symbol SVGs…")
@@ -433,6 +492,10 @@ def main():
         print("Building favicons…")
         for p in build_favicons(cfg):
             print(f"  {p.relative_to(ROOT)}")
+    if "tokens" in targets:
+        print("Exporting color tokens…")
+        for p in write_tokens(cfg):
+            print(f"  {p.relative_to(ROOT)}")
 
     print("\nDone.")
 

tokens/brand.css

@@ -0,0 +1,18 @@
+/* Audiophore brand color tokens — generated from brand.toml by scripts/build.py.
+ * Do not edit by hand; run `make tokens`. */
+:root {
+  /* Spectrum — each maps to an FFT band (high → low). */
+  --ap-highs: #00E5FF;
+  --ap-mid-highs: #00D4C8;
+  --ap-mids: #3DD68C;
+  --ap-mid-lows: #FFB020;
+  --ap-bass: #FF2D9C;
+  /* Neutrals. */
+  --ap-ink: #1a1f2e;
+  --ap-paper: #FFFFFF;
+  --ap-mute: #8b95a8;
+  --ap-wash-light: #f8f9fa;
+  --ap-wash-dark: #0a0e1a;
+  /* Semantic aliases. */
+  --ap-primary-accent: var(--ap-mid-highs);
+}

tokens/brand.json

@@ -0,0 +1,23 @@
+{
+  "meta": {
+    "name": "Audiophore",
+    "slug": "audiophore"
+  },
+  "spectrum": {
+    "highs": "#00E5FF",
+    "mid_highs": "#00D4C8",
+    "mids": "#3DD68C",
+    "mid_lows": "#FFB020",
+    "bass": "#FF2D9C"
+  },
+  "neutrals": {
+    "ink": "#1a1f2e",
+    "paper": "#FFFFFF",
+    "mute": "#8b95a8",
+    "wash_light": "#f8f9fa",
+    "wash_dark": "#0a0e1a"
+  },
+  "semantics": {
+    "primary_accent": "#00D4C8"
+  }
+}