@stapel/tokens-antd 0.1.0 → 0.3.0

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAYxC,6EAA6E;AAC7E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAOzC,yEAAyE;AACzE,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;AAE/D;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,cAAc,CAoB3D;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS,GAAG,WAAW,CAM9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAaxC,6EAA6E;AAC7E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AA8CzC,yEAAyE;AACzE,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;AAE/D;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,cAAc,CAoB3D;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS,GAAG,WAAW,CAM9D"}

package/dist/index.js

@@ -21,10 +21,49 @@
  * and spread it directly: `<ConfigProvider theme={toAntdThemeConfig(mode)}>`.
  */
 import { theme as antdTheme } from "antd";
-import { bridgeColorRoles, bridgeFontSizeRole, bridgeRadiusRole, colors, fontFamily, fontSize, radii, } from "@stapel/tokens";
-/** Resolve a neutral colour role to its hex for `mode` via the shared table. */
+import { bridgeColorRoles, bridgeFontSizeRole, bridgeRadiusRole, colors, cssVar, fontFamily, fontSize, radii, } from "@stapel/tokens";
+/**
+ * Resolve a neutral colour role to a real hex for `mode` (owner audit
+ * 2026-07-17, §54 theme-bridge root cause): a host that customizes its OWN
+ * brand colour does so exactly as `@stapel/tokens`' README prescribes — copy
+ * `theme.default.json` to `stapel.theme.json`, edit the `ramps`, run
+ * `pnpm gen:tokens` — which regenerates THAT HOST's `tokens.css` custom
+ * properties (`--stapel-color-<role>`). It does NOT and CANNOT change this
+ * published package's own compiled-in `colors` object — that snapshot is
+ * frozen at `@stapel/tokens`' OWN publish time to `@stapel/tokens`' OWN
+ * default theme, forever, regardless of what any host does. Feeding `colors`
+ * straight into antd's `ConfigProvider` (the previous implementation) is why
+ * every default skin rendered Stapel's stock brand colour instead of the
+ * host's, no matter how correctly the host had customized its tokens: the
+ * bridge was never wired to read them.
+ *
+ * The fix reads the LIVE `--stapel-color-<role>` custom property off
+ * `document.documentElement` at call time — the exact value the host's own
+ * (re)generated `tokens.css` sets, already resolved through whichever
+ * `data-theme` is active — and falls back to the static default only where
+ * there is no DOM to read (SSR, tests, a host that never loaded
+ * `tokens.css`). This is the one change that makes "the skin takes its theme
+ * from the bridge automatically" (the doc comment on every default skin)
+ * literally true for a host's brand colour, not just its light/dark mode.
+ */
+function readLiveCssVar(name, fallback) {
+    if (typeof document === "undefined")
+        return fallback;
+    // `getPropertyValue` wants the BARE custom-property name (`--stapel-color-x`);
+    // `cssVar()` deliberately returns the `var(--stapel-color-x)` wrapper for
+    // embedding in a CSS value, which `getPropertyValue` would never match —
+    // stripped back off here rather than duplicating the `--stapel-` prefix.
+    const propertyName = cssVar(`color-${name}`).slice("var(".length, -1);
+    const value = getComputedStyle(document.documentElement)
+        .getPropertyValue(propertyName)
+        .trim();
+    return value.length > 0 ? value : fallback;
+}
+/** Resolve a neutral colour role to its hex for `mode` via the shared table,
+ * preferring the host's live CSS custom property over the compiled-in default. */
 function role(name, mode) {
-    return colors[bridgeColorRoles[name]][mode];
+    const token = bridgeColorRoles[name];
+    return readLiveCssVar(token, colors[token][mode]);
 }
 /**
  * `@stapel/tokens` L2 → antd `theme.token` (frontend-guidelines §2.4 table).

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AAE1C,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,MAAM,EACN,UAAU,EACV,QAAQ,EACR,KAAK,GACN,MAAM,gBAAgB,CAAC;AAMxB,gFAAgF;AAChF,SAAS,IAAI,CAAC,IAAqB,EAAE,IAAe;IAClD,OAAO,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AAC9C,CAAC;AAKD;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,IAAe;IACzC,OAAO;QACL,YAAY,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;QACjC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;QAC7B,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;QACxC,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;QACnC,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;QACnC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;QAChC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;QAC7B,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;QACpC,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;QAC/C,gBAAgB,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;QAC3C,aAAa,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC;QACrC,eAAe,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;QAC1C,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;QACjC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC;QACnD,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC;QACrC,QAAQ,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC,QAAQ;QAC/C,UAAU,EAAE,UAAU,CAAC,IAAI;KAC5B,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,IAAe;IAC/C,OAAO;QACL,SAAS,EACP,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,gBAAgB;QACxE,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;KACzB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AAE1C,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,MAAM,EACN,MAAM,EACN,UAAU,EACV,QAAQ,EACR,KAAK,GACN,MAAM,gBAAgB,CAAC;AAMxB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAS,cAAc,CAAC,IAAmB,EAAE,QAAgB;IAC3D,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,QAAQ,CAAC;IACrD,+EAA+E;IAC/E,0EAA0E;IAC1E,yEAAyE;IACzE,yEAAyE;IACzE,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC;SACrD,gBAAgB,CAAC,YAAY,CAAC;SAC9B,IAAI,EAAE,CAAC;IACV,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;AAC7C,CAAC;AAED;kFACkF;AAClF,SAAS,IAAI,CAAC,IAAqB,EAAE,IAAe;IAClD,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACpD,CAAC;AAKD;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,IAAe;IACzC,OAAO;QACL,YAAY,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC;QACjC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;QAC7B,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;QACxC,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;QACnC,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;QACnC,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;QAChC,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;QAC7B,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;QACpC,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;QAC/C,gBAAgB,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;QAC3C,aAAa,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC;QACrC,eAAe,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;QAC1C,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;QACjC,oBAAoB,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC;QACnD,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC;QACrC,QAAQ,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC,QAAQ;QAC/C,UAAU,EAAE,UAAU,CAAC,IAAI;KAC5B,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,IAAe;IAC/C,OAAO;QACL,SAAS,EACP,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,gBAAgB;QACxE,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;KACzB,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stapel/tokens-antd",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Token bridge (frontend-guidelines §2.4, §38 T3): projects @stapel/tokens L2 core tokens onto an Ant Design ConfigProvider theme. `toAntdTheme(mode)` → theme.token; `toAntdThemeConfig(mode)` → the full ThemeConfig (algorithm + token). Pure functions, one mapping table shared with @stapel/tokens-mui. Not components.",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
     "antd": ">=5.20.0 <7"
   },
   "dependencies": {
-    "@stapel/tokens": "^0.3.0"
+    "@stapel/tokens": "^0.4.0"
   },
   "devDependencies": {
     "@size-limit/preset-small-lib": "^11.2.0",

package/src/index.ts

@@ -27,18 +27,58 @@ import {
   bridgeFontSizeRole,
   bridgeRadiusRole,
   colors,
+  cssVar,
   fontFamily,
   fontSize,
   radii,
 } from "@stapel/tokens";
-import type { BridgeColorRole } from "@stapel/tokens";
+import type { BridgeColorRole, CoreTokenName } from "@stapel/tokens";
 
 /** Light or dark — the half of every L2 core token's `{light,dark}` pair. */
 export type ThemeMode = "light" | "dark";
 
-/** Resolve a neutral colour role to its hex for `mode` via the shared table. */
+/**
+ * Resolve a neutral colour role to a real hex for `mode` (owner audit
+ * 2026-07-17, §54 theme-bridge root cause): a host that customizes its OWN
+ * brand colour does so exactly as `@stapel/tokens`' README prescribes — copy
+ * `theme.default.json` to `stapel.theme.json`, edit the `ramps`, run
+ * `pnpm gen:tokens` — which regenerates THAT HOST's `tokens.css` custom
+ * properties (`--stapel-color-<role>`). It does NOT and CANNOT change this
+ * published package's own compiled-in `colors` object — that snapshot is
+ * frozen at `@stapel/tokens`' OWN publish time to `@stapel/tokens`' OWN
+ * default theme, forever, regardless of what any host does. Feeding `colors`
+ * straight into antd's `ConfigProvider` (the previous implementation) is why
+ * every default skin rendered Stapel's stock brand colour instead of the
+ * host's, no matter how correctly the host had customized its tokens: the
+ * bridge was never wired to read them.
+ *
+ * The fix reads the LIVE `--stapel-color-<role>` custom property off
+ * `document.documentElement` at call time — the exact value the host's own
+ * (re)generated `tokens.css` sets, already resolved through whichever
+ * `data-theme` is active — and falls back to the static default only where
+ * there is no DOM to read (SSR, tests, a host that never loaded
+ * `tokens.css`). This is the one change that makes "the skin takes its theme
+ * from the bridge automatically" (the doc comment on every default skin)
+ * literally true for a host's brand colour, not just its light/dark mode.
+ */
+function readLiveCssVar(name: CoreTokenName, fallback: string): string {
+  if (typeof document === "undefined") return fallback;
+  // `getPropertyValue` wants the BARE custom-property name (`--stapel-color-x`);
+  // `cssVar()` deliberately returns the `var(--stapel-color-x)` wrapper for
+  // embedding in a CSS value, which `getPropertyValue` would never match —
+  // stripped back off here rather than duplicating the `--stapel-` prefix.
+  const propertyName = cssVar(`color-${name}`).slice("var(".length, -1);
+  const value = getComputedStyle(document.documentElement)
+    .getPropertyValue(propertyName)
+    .trim();
+  return value.length > 0 ? value : fallback;
+}
+
+/** Resolve a neutral colour role to its hex for `mode` via the shared table,
+ * preferring the host's live CSS custom property over the compiled-in default. */
 function role(name: BridgeColorRole, mode: ThemeMode): string {
-  return colors[bridgeColorRoles[name]][mode];
+  const token = bridgeColorRoles[name];
+  return readLiveCssVar(token, colors[token][mode]);
 }
 
 /** The flat antd token map (`ThemeConfig["token"]`), never undefined. */