@chiralkit/tokens 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 xHadal
+
+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,21 @@
+# @chiralkit/tokens
+
+Shared design tokens (color, spacing, typography) for the chiralkit design system. Distributed as CSS custom properties (`tokens.css`) and as a TypeScript module for tooling that needs the raw values.
+
+Consumed by `@chiralkit/design-system` (Stencil components), `apps/web/`, `apps/workspace/`, and any stack authored under `kits/ui/registry/*/implementations/*` — the shared vocabulary that binds per-stack implementations together (see ADR 0002).
+
+## Install
+
+```sh
+pnpm add @chiralkit/tokens
+```
+
+Import the CSS once at the app entry:
+
+```ts
+import "@chiralkit/tokens/tokens.css";
+```
+
+## Status
+
+`0.1.0-alpha.0` — first published version. See the main repo: https://github.com/xHadal/chiralkit

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export declare const colors: {
+    readonly primary: "var(--ds-color-primary)";
+    readonly primaryHover: "var(--ds-color-primary-hover)";
+    readonly secondary: "var(--ds-color-secondary)";
+    readonly secondaryHover: "var(--ds-color-secondary-hover)";
+    readonly textOnPrimary: "var(--ds-color-text-on-primary)";
+    readonly textOnSecondary: "var(--ds-color-text-on-secondary)";
+};
+export declare const spacing: {
+    readonly xs: "var(--ds-spacing-xs)";
+    readonly sm: "var(--ds-spacing-sm)";
+    readonly md: "var(--ds-spacing-md)";
+    readonly lg: "var(--ds-spacing-lg)";
+    readonly xl: "var(--ds-spacing-xl)";
+};
+export declare const radius: {
+    readonly sm: "var(--ds-radius-sm)";
+    readonly md: "var(--ds-radius-md)";
+};
+export declare const font: {
+    readonly family: "var(--ds-font-family)";
+    readonly sizeMd: "var(--ds-font-size-md)";
+};
+//# 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":"AASA,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAMV,CAAC;AAEX,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAEX,eAAO,MAAM,IAAI;;;CAGP,CAAC"}

package/dist/index.js

@@ -0,0 +1,32 @@
+// TypeScript constants that reference the CSS custom properties defined in
+// `../tokens.css`. Consumers in JS/TS-native stacks (React) can import from
+// here to get typed token references without having to know CSS variable
+// naming conventions.
+//
+// Any token added to `tokens.css` should be mirrored here. In v0 this is
+// hand-maintained; a follow-up plan can auto-generate this file from the
+// CSS at build time.
+export const colors = {
+    primary: "var(--ds-color-primary)",
+    primaryHover: "var(--ds-color-primary-hover)",
+    secondary: "var(--ds-color-secondary)",
+    secondaryHover: "var(--ds-color-secondary-hover)",
+    textOnPrimary: "var(--ds-color-text-on-primary)",
+    textOnSecondary: "var(--ds-color-text-on-secondary)",
+};
+export const spacing = {
+    xs: "var(--ds-spacing-xs)",
+    sm: "var(--ds-spacing-sm)",
+    md: "var(--ds-spacing-md)",
+    lg: "var(--ds-spacing-lg)",
+    xl: "var(--ds-spacing-xl)",
+};
+export const radius = {
+    sm: "var(--ds-radius-sm)",
+    md: "var(--ds-radius-md)",
+};
+export const font = {
+    family: "var(--ds-font-family)",
+    sizeMd: "var(--ds-font-size-md)",
+};
+//# 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,2EAA2E;AAC3E,4EAA4E;AAC5E,yEAAyE;AACzE,sBAAsB;AACtB,EAAE;AACF,yEAAyE;AACzE,yEAAyE;AACzE,qBAAqB;AAErB,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE,yBAAyB;IAClC,YAAY,EAAE,+BAA+B;IAC7C,SAAS,EAAE,2BAA2B;IACtC,cAAc,EAAE,iCAAiC;IACjD,aAAa,EAAE,iCAAiC;IAChD,eAAe,EAAE,mCAAmC;CAC5C,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,EAAE,EAAE,sBAAsB;IAC1B,EAAE,EAAE,sBAAsB;IAC1B,EAAE,EAAE,sBAAsB;IAC1B,EAAE,EAAE,sBAAsB;IAC1B,EAAE,EAAE,sBAAsB;CAClB,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,EAAE,EAAE,qBAAqB;IACzB,EAAE,EAAE,qBAAqB;CACjB,CAAC;AAEX,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,MAAM,EAAE,uBAAuB;IAC/B,MAAM,EAAE,wBAAwB;CACxB,CAAC"}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@chiralkit/tokens",
+  "version": "0.1.0-alpha.0",
+  "license": "MIT",
+  "description": "Design tokens shared across all Chiralkit stacks",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./tokens.css"
+  },
+  "files": [
+    "dist",
+    "tokens.css"
+  ],
+  "devDependencies": {
+    "typescript": "^5.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist"
+  }
+}

package/tokens.css

@@ -0,0 +1,27 @@
+:root {
+    --ds-color-primary: oklch(0.58 0.178 307);
+    --ds-color-primary-hover: oklch(0.521 0.176 307);
+    --ds-color-secondary: #edf2f7;
+    --ds-color-secondary-hover: #e2e8f0;
+    --ds-color-text-on-primary: #ffffff;
+    --ds-color-text-on-secondary: #1a202c;
+
+    /*
+     * Canonical focus-ring color. Kept independent from --ds-color-primary
+     * so themes can retune the focus ring without also shifting the brand
+     * accent (WCAG 1.4.11 requires 3:1 non-text contrast on either surface;
+     * primary may not always meet that on a colored background).
+     */
+    --ds-color-focus: oklch(0.72 0.18 307);
+
+    --ds-spacing-xs: 4px;
+    --ds-spacing-sm: 8px;
+    --ds-spacing-md: 12px;
+    --ds-spacing-lg: 16px;
+    --ds-spacing-xl: 24px;
+
+    --ds-radius-sm: 4px;
+    --ds-radius-md: 10px;
+    --ds-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+    --ds-font-size-md: 14px;
+}