@tangle-network/brand 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.17.0
+
+### Minor Changes
+
+- ffd18ec: `palettes` exports Brand's resolved colors (light, dark, websiteLight, websiteDark) for renderers that cannot read CSS variables, such as PDF, canvas, WebGL, email and the theme-color meta. `scripts/gen-palette.mjs` generates them from tokens.css and named-themes.css, and the build fails when they are stale.
+
 ## 1.16.0
 
 ### Minor Changes

package/README.md

@@ -101,6 +101,8 @@ import { Logo, TangleKnot } from "@tangle-network/brand";
 
 ## Palette and typography
 
+Renderers that cannot read CSS variables (PDF, canvas, WebGL, email, the `theme-color` meta) import `palettes` from `@tangle-network/brand`: resolved hex values for `light`, `dark`, `websiteLight` and `websiteDark`, generated from the stylesheets by `pnpm gen:palette`. Pages styled with CSS keep using the variables.
+
 The base surface ladder is the one GTM proved out: dark is indigo-lifted `#0a0a14` / `#191826` / `#221f33` / `#2c2942`; light is a cool `#eceef3` canvas, white paper cards and overlays, and `#f1f2f7` nested wells. The cast stays below 0.1 chroma and ink stays achromatic, so indigo still reads as the interaction accent, not the base field. Existing named products may supply deliberate surface overrides.
 
 Chrome radii are 6/8/10/12px in both base modes; the composer has its own 26px role. Inter leads body and display stacks, with Geist fallbacks; Geist Mono leads code with JetBrains Mono and system fallbacks. Runtime font/radius registrations retain their public override names; tests keep Tailwind registration defaults aligned with the canonical declarations.

package/dist/index.d.ts

@@ -12,4 +12,175 @@ export declare function TangleKnot({ size, className }: {
 }): React.JSX.Element;
 export declare function Logo({ size, variant, suffix, className }: LogoProps): React.JSX.Element;
 //#endregion
-export type { LogoProps };
+//#region src/palette.generated.d.ts
+/** A theme's resolved roles: hex strings, or rgba() where the token is translucent. */
+interface BrandPalette {
+  canvas: string;
+  card: string;
+  well: string;
+  nested: string;
+  overlay: string;
+  deepest: string;
+  hairline: string;
+  ink: string;
+  inkSecondary: string;
+  inkMuted: string;
+  accent: string;
+  accentHover: string;
+  onAccent: string;
+  accentText: string;
+  danger: string;
+  successBg: string;
+  successBorder: string;
+  successText: string;
+  warningBg: string;
+  warningBorder: string;
+  warningText: string;
+  dangerBg: string;
+  dangerBorder: string;
+  dangerText: string;
+  infoBg: string;
+  infoBorder: string;
+  infoText: string;
+  brandVibrant: string;
+  brandCool: string;
+  brandGlow: string;
+  brandPurple: string;
+}
+/** Resolved palettes for the canonical light and dark themes and the website named theme. */
+export declare const palettes: {
+  readonly light: {
+    readonly canvas: "#eceef3";
+    readonly card: "#ffffff";
+    readonly well: "#f6f7fa";
+    readonly nested: "#f1f2f7";
+    readonly overlay: "#ffffff";
+    readonly deepest: "#ffffff";
+    readonly hairline: "#c7c6d6";
+    readonly ink: "#2d2d2d";
+    readonly inkSecondary: "#3f3f3f";
+    readonly inkMuted: "#4c4c4c";
+    readonly accent: "#4c3fc5";
+    readonly accentHover: "#5a50d6";
+    readonly onAccent: "#ffffff";
+    readonly accentText: "#3c32e9";
+    readonly danger: "#b41d1d";
+    readonly successBg: "#ecfdf5";
+    readonly successBorder: "#a7f3d0";
+    readonly successText: "#047857";
+    readonly warningBg: "#fffbeb";
+    readonly warningBorder: "#fde68a";
+    readonly warningText: "#ab4f09";
+    readonly dangerBg: "#fff1f2";
+    readonly dangerBorder: "#fecdd3";
+    readonly dangerText: "#b91c1c";
+    readonly infoBg: "#f0f9ff";
+    readonly infoBorder: "#bae6fd";
+    readonly infoText: "#0369a1";
+    readonly brandVibrant: "#6366f1";
+    readonly brandCool: "#818cf8";
+    readonly brandGlow: "#a5aafc";
+    readonly brandPurple: "#6366f1";
+  };
+  readonly dark: {
+    readonly canvas: "#0a0a14";
+    readonly card: "#191826";
+    readonly well: "#12111f";
+    readonly nested: "#221f33";
+    readonly overlay: "#2c2942";
+    readonly deepest: "#050509";
+    readonly hairline: "#2a293d";
+    readonly ink: "#e6e6e6";
+    readonly inkSecondary: "#c7c7c7";
+    readonly inkMuted: "#b5b5b5";
+    readonly accent: "#4c3fc5";
+    readonly accentHover: "#5a50d6";
+    readonly onAccent: "#ffffff";
+    readonly accentText: "#a5b4fc";
+    readonly danger: "#d52044";
+    readonly successBg: "#2f5146";
+    readonly successBorder: "#3c7760";
+    readonly successText: "#5ed7a4";
+    readonly warningBg: "#4b4232";
+    readonly warningBorder: "#7a6236";
+    readonly warningText: "#f4c14f";
+    readonly dangerBg: "#5a3b40";
+    readonly dangerBorder: "#7d4d53";
+    readonly dangerText: "#ffada9";
+    readonly infoBg: "#2d4e67";
+    readonly infoBorder: "#3d7292";
+    readonly infoText: "#67cdff";
+    readonly brandVibrant: "#6366f1";
+    readonly brandCool: "#818cf8";
+    readonly brandGlow: "#a5aafc";
+    readonly brandPurple: "#c7d2fe";
+  };
+  readonly websiteLight: {
+    readonly canvas: "#f5f5fb";
+    readonly card: "#ffffff";
+    readonly well: "#fafafd";
+    readonly nested: "#ececf6";
+    readonly overlay: "#ffffff";
+    readonly deepest: "#ffffff";
+    readonly hairline: "#dbdbea";
+    readonly ink: "#191c24";
+    readonly inkSecondary: "#3a3a50";
+    readonly inkMuted: "#5e5e7a";
+    readonly accent: "#4c3fc5";
+    readonly accentHover: "#5a50d6";
+    readonly onAccent: "#ffffff";
+    readonly accentText: "#3c32e9";
+    readonly danger: "#b41d1d";
+    readonly successBg: "#ecfdf5";
+    readonly successBorder: "#a7f3d0";
+    readonly successText: "#047857";
+    readonly warningBg: "#fffbeb";
+    readonly warningBorder: "#fde68a";
+    readonly warningText: "#ab4f09";
+    readonly dangerBg: "#fff1f2";
+    readonly dangerBorder: "#fecdd3";
+    readonly dangerText: "#b91c1c";
+    readonly infoBg: "#f0f9ff";
+    readonly infoBorder: "#bae6fd";
+    readonly infoText: "#0369a1";
+    readonly brandVibrant: "#6366f1";
+    readonly brandCool: "#818cf8";
+    readonly brandGlow: "#a5aafc";
+    readonly brandPurple: "#6366f1";
+  };
+  readonly websiteDark: {
+    readonly canvas: "#0c0b1d";
+    readonly card: "#1d1b38";
+    readonly well: "#141328";
+    readonly nested: "#222041";
+    readonly overlay: "#262448";
+    readonly deepest: "#080814";
+    readonly hairline: "#33315f";
+    readonly ink: "#fdfdfd";
+    readonly inkSecondary: "#aaa8b8";
+    readonly inkMuted: "#9496bc";
+    readonly accent: "#4c3fc5";
+    readonly accentHover: "#5a50d6";
+    readonly onAccent: "#ffffff";
+    readonly accentText: "#a5b4fc";
+    readonly danger: "#d52044";
+    readonly successBg: "#2f5146";
+    readonly successBorder: "#3c7760";
+    readonly successText: "#5ed7a4";
+    readonly warningBg: "#4b4232";
+    readonly warningBorder: "#7a6236";
+    readonly warningText: "#f4c14f";
+    readonly dangerBg: "#5a3b40";
+    readonly dangerBorder: "#7d4d53";
+    readonly dangerText: "#ffada9";
+    readonly infoBg: "#2d4e67";
+    readonly infoBorder: "#3d7292";
+    readonly infoText: "#67cdff";
+    readonly brandVibrant: "#6366f1";
+    readonly brandCool: "#818cf8";
+    readonly brandGlow: "#a5aafc";
+    readonly brandPurple: "#c7d2fe";
+  };
+};
+//#endregion
+export type { BrandPalette, LogoProps };

package/dist/index.js

@@ -105,4 +105,141 @@ function Logo({ size = "md", variant = "full", suffix = null, className }) {
 	});
 }
 //#endregion
-export { Logo, TangleKnot };
+//#region src/palette.generated.ts
+/** Resolved palettes for the canonical light and dark themes and the website named theme. */
+const palettes = {
+	light: {
+		canvas: "#eceef3",
+		card: "#ffffff",
+		well: "#f6f7fa",
+		nested: "#f1f2f7",
+		overlay: "#ffffff",
+		deepest: "#ffffff",
+		hairline: "#c7c6d6",
+		ink: "#2d2d2d",
+		inkSecondary: "#3f3f3f",
+		inkMuted: "#4c4c4c",
+		accent: "#4c3fc5",
+		accentHover: "#5a50d6",
+		onAccent: "#ffffff",
+		accentText: "#3c32e9",
+		danger: "#b41d1d",
+		successBg: "#ecfdf5",
+		successBorder: "#a7f3d0",
+		successText: "#047857",
+		warningBg: "#fffbeb",
+		warningBorder: "#fde68a",
+		warningText: "#ab4f09",
+		dangerBg: "#fff1f2",
+		dangerBorder: "#fecdd3",
+		dangerText: "#b91c1c",
+		infoBg: "#f0f9ff",
+		infoBorder: "#bae6fd",
+		infoText: "#0369a1",
+		brandVibrant: "#6366f1",
+		brandCool: "#818cf8",
+		brandGlow: "#a5aafc",
+		brandPurple: "#6366f1"
+	},
+	dark: {
+		canvas: "#0a0a14",
+		card: "#191826",
+		well: "#12111f",
+		nested: "#221f33",
+		overlay: "#2c2942",
+		deepest: "#050509",
+		hairline: "#2a293d",
+		ink: "#e6e6e6",
+		inkSecondary: "#c7c7c7",
+		inkMuted: "#b5b5b5",
+		accent: "#4c3fc5",
+		accentHover: "#5a50d6",
+		onAccent: "#ffffff",
+		accentText: "#a5b4fc",
+		danger: "#d52044",
+		successBg: "#2f5146",
+		successBorder: "#3c7760",
+		successText: "#5ed7a4",
+		warningBg: "#4b4232",
+		warningBorder: "#7a6236",
+		warningText: "#f4c14f",
+		dangerBg: "#5a3b40",
+		dangerBorder: "#7d4d53",
+		dangerText: "#ffada9",
+		infoBg: "#2d4e67",
+		infoBorder: "#3d7292",
+		infoText: "#67cdff",
+		brandVibrant: "#6366f1",
+		brandCool: "#818cf8",
+		brandGlow: "#a5aafc",
+		brandPurple: "#c7d2fe"
+	},
+	websiteLight: {
+		canvas: "#f5f5fb",
+		card: "#ffffff",
+		well: "#fafafd",
+		nested: "#ececf6",
+		overlay: "#ffffff",
+		deepest: "#ffffff",
+		hairline: "#dbdbea",
+		ink: "#191c24",
+		inkSecondary: "#3a3a50",
+		inkMuted: "#5e5e7a",
+		accent: "#4c3fc5",
+		accentHover: "#5a50d6",
+		onAccent: "#ffffff",
+		accentText: "#3c32e9",
+		danger: "#b41d1d",
+		successBg: "#ecfdf5",
+		successBorder: "#a7f3d0",
+		successText: "#047857",
+		warningBg: "#fffbeb",
+		warningBorder: "#fde68a",
+		warningText: "#ab4f09",
+		dangerBg: "#fff1f2",
+		dangerBorder: "#fecdd3",
+		dangerText: "#b91c1c",
+		infoBg: "#f0f9ff",
+		infoBorder: "#bae6fd",
+		infoText: "#0369a1",
+		brandVibrant: "#6366f1",
+		brandCool: "#818cf8",
+		brandGlow: "#a5aafc",
+		brandPurple: "#6366f1"
+	},
+	websiteDark: {
+		canvas: "#0c0b1d",
+		card: "#1d1b38",
+		well: "#141328",
+		nested: "#222041",
+		overlay: "#262448",
+		deepest: "#080814",
+		hairline: "#33315f",
+		ink: "#fdfdfd",
+		inkSecondary: "#aaa8b8",
+		inkMuted: "#9496bc",
+		accent: "#4c3fc5",
+		accentHover: "#5a50d6",
+		onAccent: "#ffffff",
+		accentText: "#a5b4fc",
+		danger: "#d52044",
+		successBg: "#2f5146",
+		successBorder: "#3c7760",
+		successText: "#5ed7a4",
+		warningBg: "#4b4232",
+		warningBorder: "#7a6236",
+		warningText: "#f4c14f",
+		dangerBg: "#5a3b40",
+		dangerBorder: "#7d4d53",
+		dangerText: "#ffada9",
+		infoBg: "#2d4e67",
+		infoBorder: "#3d7292",
+		infoText: "#67cdff",
+		brandVibrant: "#6366f1",
+		brandCool: "#818cf8",
+		brandGlow: "#a5aafc",
+		brandPurple: "#c7d2fe"
+	}
+};
+//#endregion
+export { Logo, TangleKnot, palettes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",
@@ -69,11 +69,12 @@
     "tailwind"
   ],
   "scripts": {
-    "build": "node scripts/gen-ladders.mjs --check && node scripts/gen-compat.mjs --check && tsdown",
+    "build": "node scripts/gen-ladders.mjs --check && node scripts/gen-compat.mjs --check && node scripts/gen-palette.mjs --check && tsdown",
     "gen:ladders": "node scripts/gen-ladders.mjs",
     "gen:compat": "node scripts/gen-compat.mjs",
     "check:compat": "node scripts/gen-ladders.mjs --check && node scripts/gen-compat.mjs --check && node --test scripts/gen-compat.test.mjs",
     "check:drift": "node --test scripts/tangle-drift.test.mjs",
-    "dev": "tsdown --watch"
+    "dev": "tsdown --watch",
+    "gen:palette": "node scripts/gen-palette.mjs"
   }
 }

package/src/index.ts

@@ -1 +1,2 @@
 export { Logo, TangleKnot, type LogoProps } from "./logo.js";
+export { palettes, type BrandPalette } from "./palette.generated.js";

package/src/palette.generated.ts

@@ -0,0 +1,174 @@
+// GENERATED by scripts/gen-palette.mjs from tokens.css and named-themes.css; do not edit.
+// Brand's resolved colors for renderers that cannot read CSS variables: PDF, canvas,
+// WebGL, email and the theme-color meta. Pages styled with CSS use the variables.
+
+/** A theme's resolved roles: hex strings, or rgba() where the token is translucent. */
+export interface BrandPalette {
+  canvas: string;
+  card: string;
+  well: string;
+  nested: string;
+  overlay: string;
+  deepest: string;
+  hairline: string;
+  ink: string;
+  inkSecondary: string;
+  inkMuted: string;
+  accent: string;
+  accentHover: string;
+  onAccent: string;
+  accentText: string;
+  danger: string;
+  successBg: string;
+  successBorder: string;
+  successText: string;
+  warningBg: string;
+  warningBorder: string;
+  warningText: string;
+  dangerBg: string;
+  dangerBorder: string;
+  dangerText: string;
+  infoBg: string;
+  infoBorder: string;
+  infoText: string;
+  brandVibrant: string;
+  brandCool: string;
+  brandGlow: string;
+  brandPurple: string;
+}
+
+/** Resolved palettes for the canonical light and dark themes and the website named theme. */
+export const palettes = {
+  light: {
+    canvas: "#eceef3",
+    card: "#ffffff",
+    well: "#f6f7fa",
+    nested: "#f1f2f7",
+    overlay: "#ffffff",
+    deepest: "#ffffff",
+    hairline: "#c7c6d6",
+    ink: "#2d2d2d",
+    inkSecondary: "#3f3f3f",
+    inkMuted: "#4c4c4c",
+    accent: "#4c3fc5",
+    accentHover: "#5a50d6",
+    onAccent: "#ffffff",
+    accentText: "#3c32e9",
+    danger: "#b41d1d",
+    successBg: "#ecfdf5",
+    successBorder: "#a7f3d0",
+    successText: "#047857",
+    warningBg: "#fffbeb",
+    warningBorder: "#fde68a",
+    warningText: "#ab4f09",
+    dangerBg: "#fff1f2",
+    dangerBorder: "#fecdd3",
+    dangerText: "#b91c1c",
+    infoBg: "#f0f9ff",
+    infoBorder: "#bae6fd",
+    infoText: "#0369a1",
+    brandVibrant: "#6366f1",
+    brandCool: "#818cf8",
+    brandGlow: "#a5aafc",
+    brandPurple: "#6366f1",
+  },
+  dark: {
+    canvas: "#0a0a14",
+    card: "#191826",
+    well: "#12111f",
+    nested: "#221f33",
+    overlay: "#2c2942",
+    deepest: "#050509",
+    hairline: "#2a293d",
+    ink: "#e6e6e6",
+    inkSecondary: "#c7c7c7",
+    inkMuted: "#b5b5b5",
+    accent: "#4c3fc5",
+    accentHover: "#5a50d6",
+    onAccent: "#ffffff",
+    accentText: "#a5b4fc",
+    danger: "#d52044",
+    successBg: "#2f5146",
+    successBorder: "#3c7760",
+    successText: "#5ed7a4",
+    warningBg: "#4b4232",
+    warningBorder: "#7a6236",
+    warningText: "#f4c14f",
+    dangerBg: "#5a3b40",
+    dangerBorder: "#7d4d53",
+    dangerText: "#ffada9",
+    infoBg: "#2d4e67",
+    infoBorder: "#3d7292",
+    infoText: "#67cdff",
+    brandVibrant: "#6366f1",
+    brandCool: "#818cf8",
+    brandGlow: "#a5aafc",
+    brandPurple: "#c7d2fe",
+  },
+  websiteLight: {
+    canvas: "#f5f5fb",
+    card: "#ffffff",
+    well: "#fafafd",
+    nested: "#ececf6",
+    overlay: "#ffffff",
+    deepest: "#ffffff",
+    hairline: "#dbdbea",
+    ink: "#191c24",
+    inkSecondary: "#3a3a50",
+    inkMuted: "#5e5e7a",
+    accent: "#4c3fc5",
+    accentHover: "#5a50d6",
+    onAccent: "#ffffff",
+    accentText: "#3c32e9",
+    danger: "#b41d1d",
+    successBg: "#ecfdf5",
+    successBorder: "#a7f3d0",
+    successText: "#047857",
+    warningBg: "#fffbeb",
+    warningBorder: "#fde68a",
+    warningText: "#ab4f09",
+    dangerBg: "#fff1f2",
+    dangerBorder: "#fecdd3",
+    dangerText: "#b91c1c",
+    infoBg: "#f0f9ff",
+    infoBorder: "#bae6fd",
+    infoText: "#0369a1",
+    brandVibrant: "#6366f1",
+    brandCool: "#818cf8",
+    brandGlow: "#a5aafc",
+    brandPurple: "#6366f1",
+  },
+  websiteDark: {
+    canvas: "#0c0b1d",
+    card: "#1d1b38",
+    well: "#141328",
+    nested: "#222041",
+    overlay: "#262448",
+    deepest: "#080814",
+    hairline: "#33315f",
+    ink: "#fdfdfd",
+    inkSecondary: "#aaa8b8",
+    inkMuted: "#9496bc",
+    accent: "#4c3fc5",
+    accentHover: "#5a50d6",
+    onAccent: "#ffffff",
+    accentText: "#a5b4fc",
+    danger: "#d52044",
+    successBg: "#2f5146",
+    successBorder: "#3c7760",
+    successText: "#5ed7a4",
+    warningBg: "#4b4232",
+    warningBorder: "#7a6236",
+    warningText: "#f4c14f",
+    dangerBg: "#5a3b40",
+    dangerBorder: "#7d4d53",
+    dangerText: "#ffada9",
+    infoBg: "#2d4e67",
+    infoBorder: "#3d7292",
+    infoText: "#67cdff",
+    brandVibrant: "#6366f1",
+    brandCool: "#818cf8",
+    brandGlow: "#a5aafc",
+    brandPurple: "#c7d2fe",
+  },
+} as const satisfies Record<string, BrandPalette>;

package/src/palette.test.ts

@@ -0,0 +1,25 @@
+import { execFileSync } from "node:child_process";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+import { palettes } from "./palette.generated";
+
+describe("resolved palettes", () => {
+  it("are fresh against tokens.css and named-themes.css", () => {
+    const script = path.resolve(import.meta.dirname, "..", "scripts", "gen-palette.mjs");
+    expect(() => execFileSync(process.execPath, [script, "--check"], { stdio: "pipe" })).not.toThrow();
+  });
+
+  it("hold only concrete colors", () => {
+    for (const [theme, roles] of Object.entries(palettes)) {
+      for (const [role, value] of Object.entries(roles)) {
+        expect(value, `${theme}.${role}`).toMatch(/^(#[0-9a-f]{6}|rgba?\([^)]+\))$/);
+      }
+    }
+  });
+
+  it("keep the canonical planes", () => {
+    expect(palettes.light.card).toBe("#ffffff");
+    expect(palettes.light.canvas).not.toBe(palettes.light.card);
+    expect(palettes.dark.canvas).not.toBe(palettes.dark.card);
+  });
+});