@stapel/tokens-antd 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stapel contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# @stapel/tokens-antd
+
+The Ant Design leg of the **token bridge** (frontend-guidelines §2.4; owner
+decision §38 T3). It projects `@stapel/tokens` L2 core tokens onto an Ant Design
+`ConfigProvider` theme — so integrating a `@stapel/*-react` pair's default skin
+already carries the user's theme, light and dark.
+
+There is exactly **one** L2 → design-system role mapping table, and it lives in
+`@stapel/tokens` (`bridgeColorRoles` + the radius/font-size roles). This package
+only renames those neutral roles to antd's flat token field names and picks the
+`light`/`dark` half — it holds no colour decisions of its own, so it and
+`@stapel/tokens-mui` cannot drift.
+
+## Usage
+
+```tsx
+import { toAntdTheme } from "@stapel/tokens-antd";
+import { ConfigProvider } from "antd";
+
+<ConfigProvider theme={{ token: toAntdTheme(mode) }}>
+  <App />
+</ConfigProvider>;
+```
+
+`toAntdTheme(mode)` returns just the flat `theme.token`. For a config that also
+flips antd's **derived** neutrals (borders, hovers, fills) to the dark palette —
+not only the seed tokens — spread the full config instead:
+
+```tsx
+import { toAntdThemeConfig } from "@stapel/tokens-antd";
+
+<ConfigProvider theme={toAntdThemeConfig(mode)}>
+  <App />
+</ConfigProvider>;
+```
+
+## The mapping (frontend-guidelines §2.4)
+
+| `@stapel/tokens` role | L2 core token | antd `theme.token` |
+| --- | --- | --- |
+| `brand` | `accent` | `colorPrimary` |
+| `success` | `text-positive` | `colorSuccess` |
+| `warning` | `text-warning` | `colorWarning` |
+| `danger` | `text-negative` | `colorError` |
+| `info` | `text-info` | `colorInfo` |
+| `bgContainer` | `upperground-primary` | `colorBgContainer` / `colorBgElevated` |
+| `bgLayout` | `background-primary` | `colorBgLayout` |
+| `textPrimary` | `text-primary` | `colorText` |
+| `link` | `text-brand` | `colorLink` |
+| radius `md` | — | `borderRadius` |
+| font-size `md` | — | `fontSize` |
+
+`antd` is a peer dependency — the consuming app brings its own copy.

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import type { ThemeConfig } from "antd";
+/** Light or dark — the half of every L2 core token's `{light,dark}` pair. */
+export type ThemeMode = "light" | "dark";
+/** The flat antd token map (`ThemeConfig["token"]`), never undefined. */
+export type AntdThemeToken = NonNullable<ThemeConfig["token"]>;
+/**
+ * `@stapel/tokens` L2 → antd `theme.token` (frontend-guidelines §2.4 table).
+ * Pure: same `mode` in, same object out; reads no globals.
+ */
+export declare function toAntdTheme(mode: ThemeMode): AntdThemeToken;
+/**
+ * The full antd `ThemeConfig`: {@link toAntdTheme}'s token plus the algorithm
+ * that recomputes antd's derived neutrals for the mode (so dark is actually
+ * dark, not just dark seeds over a light surface). Pass straight to
+ * `<ConfigProvider theme={toAntdThemeConfig(mode)}>`.
+ */
+export declare function toAntdThemeConfig(mode: ThemeMode): ThemeConfig;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -0,0 +1,66 @@
+/**
+ * `@stapel/tokens-antd` — the Ant Design leg of the token bridge
+ * (frontend-guidelines §2.4, owner decision §38 T3). It translates the ONE
+ * neutral role table in `@stapel/tokens` (`bridgeColorRoles` + the radius/
+ * font-size roles) into Ant Design's flat `ConfigProvider` theme token. The
+ * L2 → role decision is NOT duplicated here — this file only renames roles to
+ * antd field names and picks the light/dark half, so it and `@stapel/tokens-mui`
+ * cannot drift.
+ *
+ * ```tsx
+ * import { toAntdTheme } from "@stapel/tokens-antd";
+ * import { ConfigProvider } from "antd";
+ *
+ * <ConfigProvider theme={{ token: toAntdTheme(mode) }}>
+ *   <App />
+ * </ConfigProvider>
+ * ```
+ *
+ * For a config that also flips antd's derived neutrals (borders/hovers/fills)
+ * to the dark palette — not just the seed tokens — use `toAntdThemeConfig(mode)`
+ * 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. */
+function role(name, mode) {
+    return colors[bridgeColorRoles[name]][mode];
+}
+/**
+ * `@stapel/tokens` L2 → antd `theme.token` (frontend-guidelines §2.4 table).
+ * Pure: same `mode` in, same object out; reads no globals.
+ */
+export function toAntdTheme(mode) {
+    return {
+        colorPrimary: role("brand", mode),
+        colorLink: role("link", mode),
+        colorLinkHover: role("brandHover", mode),
+        colorSuccess: role("success", mode),
+        colorWarning: role("warning", mode),
+        colorError: role("danger", mode),
+        colorInfo: role("info", mode),
+        colorText: role("textPrimary", mode),
+        colorTextSecondary: role("textSecondary", mode),
+        colorBgContainer: role("bgContainer", mode),
+        colorBgLayout: role("bgLayout", mode),
+        colorBgElevated: role("bgContainer", mode),
+        colorBorder: role("border", mode),
+        colorBorderSecondary: role("borderSecondary", mode),
+        borderRadius: radii[bridgeRadiusRole],
+        fontSize: fontSize[bridgeFontSizeRole].fontSize,
+        fontFamily: fontFamily.sans,
+    };
+}
+/**
+ * The full antd `ThemeConfig`: {@link toAntdTheme}'s token plus the algorithm
+ * that recomputes antd's derived neutrals for the mode (so dark is actually
+ * dark, not just dark seeds over a light surface). Pass straight to
+ * `<ConfigProvider theme={toAntdThemeConfig(mode)}>`.
+ */
+export function toAntdThemeConfig(mode) {
+    return {
+        algorithm: mode === "dark" ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+        token: toAntdTheme(mode),
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@stapel/tokens-antd",
+  "version": "0.1.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": {
+    "type": "git",
+    "url": "https://github.com/usestapel/stapel-react.git",
+    "directory": "packages/tokens-antd"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json",
+    "README.md"
+  ],
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "4 KB"
+    }
+  ],
+  "peerDependencies": {
+    "antd": ">=5.20.0 <7"
+  },
+  "dependencies": {
+    "@stapel/tokens": "^0.3.0"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.2.0",
+    "antd": "^6.5.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "size-limit": "^11.2.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "vitest run",
+    "lint": "eslint .",
+    "size": "size-limit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,85 @@
+/**
+ * `@stapel/tokens-antd` — the Ant Design leg of the token bridge
+ * (frontend-guidelines §2.4, owner decision §38 T3). It translates the ONE
+ * neutral role table in `@stapel/tokens` (`bridgeColorRoles` + the radius/
+ * font-size roles) into Ant Design's flat `ConfigProvider` theme token. The
+ * L2 → role decision is NOT duplicated here — this file only renames roles to
+ * antd field names and picks the light/dark half, so it and `@stapel/tokens-mui`
+ * cannot drift.
+ *
+ * ```tsx
+ * import { toAntdTheme } from "@stapel/tokens-antd";
+ * import { ConfigProvider } from "antd";
+ *
+ * <ConfigProvider theme={{ token: toAntdTheme(mode) }}>
+ *   <App />
+ * </ConfigProvider>
+ * ```
+ *
+ * For a config that also flips antd's derived neutrals (borders/hovers/fills)
+ * to the dark palette — not just the seed tokens — use `toAntdThemeConfig(mode)`
+ * and spread it directly: `<ConfigProvider theme={toAntdThemeConfig(mode)}>`.
+ */
+import { theme as antdTheme } from "antd";
+import type { ThemeConfig } from "antd";
+import {
+  bridgeColorRoles,
+  bridgeFontSizeRole,
+  bridgeRadiusRole,
+  colors,
+  fontFamily,
+  fontSize,
+  radii,
+} from "@stapel/tokens";
+import type { BridgeColorRole } 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. */
+function role(name: BridgeColorRole, mode: ThemeMode): string {
+  return colors[bridgeColorRoles[name]][mode];
+}
+
+/** The flat antd token map (`ThemeConfig["token"]`), never undefined. */
+export type AntdThemeToken = NonNullable<ThemeConfig["token"]>;
+
+/**
+ * `@stapel/tokens` L2 → antd `theme.token` (frontend-guidelines §2.4 table).
+ * Pure: same `mode` in, same object out; reads no globals.
+ */
+export function toAntdTheme(mode: ThemeMode): AntdThemeToken {
+  return {
+    colorPrimary: role("brand", mode),
+    colorLink: role("link", mode),
+    colorLinkHover: role("brandHover", mode),
+    colorSuccess: role("success", mode),
+    colorWarning: role("warning", mode),
+    colorError: role("danger", mode),
+    colorInfo: role("info", mode),
+    colorText: role("textPrimary", mode),
+    colorTextSecondary: role("textSecondary", mode),
+    colorBgContainer: role("bgContainer", mode),
+    colorBgLayout: role("bgLayout", mode),
+    colorBgElevated: role("bgContainer", mode),
+    colorBorder: role("border", mode),
+    colorBorderSecondary: role("borderSecondary", mode),
+    borderRadius: radii[bridgeRadiusRole],
+    fontSize: fontSize[bridgeFontSizeRole].fontSize,
+    fontFamily: fontFamily.sans,
+  };
+}
+
+/**
+ * The full antd `ThemeConfig`: {@link toAntdTheme}'s token plus the algorithm
+ * that recomputes antd's derived neutrals for the mode (so dark is actually
+ * dark, not just dark seeds over a light surface). Pass straight to
+ * `<ConfigProvider theme={toAntdThemeConfig(mode)}>`.
+ */
+export function toAntdThemeConfig(mode: ThemeMode): ThemeConfig {
+  return {
+    algorithm:
+      mode === "dark" ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+    token: toAntdTheme(mode),
+  };
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "_comment": "Self-contained on purpose: standalone-buildable per frontend-standard §7. Mirrors the root tsconfig.base.json settings.",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "exactOptionalPropertyTypes": true,
+    "isolatedModules": true,
+    "isolatedDeclarations": true,
+    "verbatimModuleSyntax": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}