@chai-ui/tokens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kazarazat
+
+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,56 @@
+# @chai-ui/tokens
+
+The single source of truth for color, space, radius, type, and motion values
+across CHAI UI. One JSON file in, three consumers out:
+
+```
+src/tokens.json  →  dist/css/tokens.css        (CSS custom properties)
+                 →  dist/js/index.js/.d.ts      (typed JS/TS exports)
+                 →  dist/figma/tokens.figma.json (Figma token set)
+```
+
+## Editing tokens
+
+Edit `src/tokens.json` only. It's a DTCG-flavored format: every leaf is
+`{ "$value": ... }`, and a value can reference another token with
+`{color.root.green-50}` — see `color.semantic.*` for examples of referencing
+`color.root.*`. Always add new components against `color.semantic.*` (or add
+a new semantic alias) rather than `color.root.*` directly, so a future
+re-theme only touches the root palette.
+
+Run `pnpm build` (from here, or `pnpm --filter @chai-ui/tokens build` from
+the repo root) to regenerate `dist/`.
+
+## Using the tokens
+
+**CSS**
+
+```css
+@import "@chai-ui/tokens/css";
+
+.my-thing {
+  background: var(--chai-color-semantic-control-surface);
+  padding: var(--chai-space-4);
+}
+```
+
+**JS / TS**
+
+```ts
+import { tokens, flatTokens } from "@chai-ui/tokens";
+
+tokens.color.semantic.accent; // "#009747"
+flatTokens["color.semantic.accent"]; // same value, flat lookup
+```
+
+**Figma**
+
+`dist/figma/tokens.figma.json` is shaped for the [Tokens Studio for Figma]
+plugin (Import → JSON). It's also a reasonable starting point for a manual
+Figma Variables import if you'd rather not add the plugin — the values are
+already resolved, so no reference-following is required at the Figma end.
+
+This is a design-tokens pipeline only: it does not keep Figma *components*
+in sync with the code components.
+
+[Tokens Studio for Figma]: https://tokens.studio/

package/dist/css/tokens.css

@@ -0,0 +1,130 @@
+/* Generated by @chai-ui/tokens/build.mjs — do not edit by hand. */
+:root {
+  --chai-color-root-gray-0: #000000;
+  --chai-color-root-gray-10: #1a1a1a;
+  --chai-color-root-gray-30: #4a4a4a;
+  --chai-color-root-gray-40: #666666;
+  --chai-color-root-gray-50: #8b8b8b;
+  --chai-color-root-gray-60: #9e9e9e;
+  --chai-color-root-gray-75: #c2c2c2;
+  --chai-color-root-gray-85: #e0e0e0;
+  --chai-color-root-gray-90: #e9e9e9;
+  --chai-color-root-gray-97: #f8f8f8;
+  --chai-color-root-gray-100: #ffffff;
+  --chai-color-root-green-30: #005324;
+  --chai-color-root-green-40: #006d32;
+  --chai-color-root-green-50: #009747;
+  --chai-color-root-green-60: #57b06c;
+  --chai-color-root-green-80: #96f6c5;
+  --chai-color-root-green-95: #e9f4e6;
+  --chai-color-root-amber-40: #a8681c;
+  --chai-color-root-amber-50: #c98226;
+  --chai-color-root-amber-80: #f0d3a4;
+  --chai-color-root-red-40: #a13c33;
+  --chai-color-root-red-50: #c14e42;
+  --chai-color-root-red-80: #f0c2bc;
+  --chai-color-semantic-text-on-accent: #ffffff;
+  --chai-color-semantic-accent: #009747;
+  --chai-color-semantic-accent-hover: #006d32;
+  --chai-color-semantic-accent-subtle: #e9f4e6;
+  --chai-color-semantic-accent-soft: #96f6c5;
+  --chai-color-semantic-accent-text: #006d32;
+  --chai-color-semantic-warning: #c98226;
+  --chai-color-semantic-warning-subtle: #f0d3a4;
+  --chai-color-semantic-danger: #c14e42;
+  --chai-color-semantic-danger-subtle: #f0c2bc;
+  --chai-color-semantic-control-surface: #f8f8f8;
+  --chai-color-semantic-control-surface-hover: #e9e9e9;
+  --chai-color-semantic-control-surface-raised: #ffffff;
+  --chai-color-semantic-control-track: #e0e0e0;
+  --chai-color-semantic-control-divider: #e0e0e0;
+  --chai-color-semantic-control-border: #8b8b8b;
+  --chai-color-semantic-control-border-soft: #9e9e9e;
+  --chai-color-semantic-control-border-faint: #c2c2c2;
+  --chai-color-semantic-control-text-strong: #1a1a1a;
+  --chai-color-semantic-control-text: #4a4a4a;
+  --chai-color-semantic-control-text-muted: #666666;
+  --chai-color-semantic-overlay: rgba(0, 0, 0, 0.5);
+  --chai-color-semantic-on-overlay: #ffffff;
+  --chai-color-semantic-scrim: rgba(0, 0, 0, 0.6);
+  --chai-color-semantic-media-backdrop: #000000;
+  --chai-space-0: 0px;
+  --chai-space-1: 4px;
+  --chai-space-2: 8px;
+  --chai-space-3: 12px;
+  --chai-space-4: 16px;
+  --chai-space-5: 24px;
+  --chai-space-6: 32px;
+  --chai-space-7: 48px;
+  --chai-space-8: 64px;
+  --chai-radius-sm: 6px;
+  --chai-radius-md: 10px;
+  --chai-radius-lg: 16px;
+  --chai-radius-full: 999px;
+  --chai-type-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --chai-type-family-mono: 'IBM Plex Mono', ui-monospace, monospace;
+  --chai-type-family-material: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
+  --chai-type-size-xs: 12px;
+  --chai-type-size-sm: 14px;
+  --chai-type-size-md: 16px;
+  --chai-type-size-lg: 20px;
+  --chai-type-size-xl: 26px;
+  --chai-type-size-2xl: 34px;
+  --chai-type-size-title-large: 22px;
+  --chai-type-size-title-medium: 16px;
+  --chai-type-size-body-large: 16px;
+  --chai-type-size-body-medium: 14px;
+  --chai-type-size-label-large: 14px;
+  --chai-type-size-label-small: 11px;
+  --chai-type-weight-regular: 440;
+  --chai-type-weight-medium: 540;
+  --chai-type-weight-semibold: 620;
+  --chai-type-weight-material-regular: 400;
+  --chai-type-weight-material-medium: 500;
+  --chai-type-leading-tight: 1.15;
+  --chai-type-leading-base: 1.45;
+  --chai-type-leading-loose: 1.7;
+  --chai-type-leading-title-large: 28px;
+  --chai-type-leading-title-medium: 24px;
+  --chai-type-leading-body-large: 24px;
+  --chai-type-leading-body-medium: 20px;
+  --chai-type-leading-label-large: 20px;
+  --chai-type-leading-label-small: 16px;
+  --chai-type-tracking-title-large: 0px;
+  --chai-type-tracking-title-medium: 0.15px;
+  --chai-type-tracking-body-large: 0.5px;
+  --chai-type-tracking-body-medium: 0.25px;
+  --chai-type-tracking-label-large: 0.1px;
+  --chai-type-tracking-label-small: 0.5px;
+  --chai-motion-duration-fast: 120ms;
+  --chai-motion-duration-base: 200ms;
+  --chai-motion-duration-slow: 360ms;
+  --chai-motion-duration-steep: 900ms;
+  --chai-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --chai-motion-easing-growth: cubic-bezier(0.34, 1.2, 0.64, 1);
+  --chai-shadow-menu: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --chai-gradient-ai: linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6);
+}
+
+/* Material Design 3 roles, driven by Chai tokens (color.material in src/tokens.json). */
+:root {
+  --md-sys-color-primary: var(--chai-color-semantic-accent);
+  --md-sys-color-on-primary: var(--chai-color-semantic-control-surface-raised);
+  --md-sys-color-primary-container: var(--chai-color-semantic-accent-soft);
+  --md-sys-color-on-primary-container: var(--chai-color-semantic-accent-text);
+  --md-sys-color-secondary: var(--chai-color-semantic-accent);
+  --md-sys-color-secondary-container: var(--chai-color-semantic-accent-soft);
+  --md-sys-color-on-secondary-container: var(--chai-color-semantic-accent-text);
+  --md-sys-color-tertiary-container: var(--chai-color-semantic-accent-soft);
+  --md-sys-color-on-tertiary-container: var(--chai-color-semantic-accent-text);
+  --md-sys-color-error: var(--chai-color-semantic-danger);
+  --md-sys-color-on-error-container: var(--chai-color-semantic-danger);
+  --md-sys-color-surface: var(--chai-color-semantic-control-surface-raised);
+  --md-sys-color-surface-container-low: var(--chai-color-semantic-control-surface);
+  --md-sys-color-surface-container-high: var(--chai-color-semantic-control-surface-hover);
+  --md-sys-color-surface-container-highest: var(--chai-color-semantic-control-track);
+  --md-sys-color-on-surface: var(--chai-color-semantic-control-text-strong);
+  --md-sys-color-on-surface-variant: var(--chai-color-semantic-control-text);
+  --md-sys-color-outline: var(--chai-color-semantic-control-border);
+  --md-sys-color-shadow: var(--chai-color-semantic-media-backdrop);
+}

package/dist/figma/tokens.figma.json

@@ -0,0 +1,561 @@
+{
+  "global": {
+    "color": {
+      "root": {
+        "gray-0": {
+          "value": "#000000",
+          "type": "color"
+        },
+        "gray-10": {
+          "value": "#1a1a1a",
+          "type": "color"
+        },
+        "gray-30": {
+          "value": "#4a4a4a",
+          "type": "color"
+        },
+        "gray-40": {
+          "value": "#666666",
+          "type": "color"
+        },
+        "gray-50": {
+          "value": "#8b8b8b",
+          "type": "color"
+        },
+        "gray-60": {
+          "value": "#9e9e9e",
+          "type": "color"
+        },
+        "gray-75": {
+          "value": "#c2c2c2",
+          "type": "color"
+        },
+        "gray-85": {
+          "value": "#e0e0e0",
+          "type": "color"
+        },
+        "gray-90": {
+          "value": "#e9e9e9",
+          "type": "color"
+        },
+        "gray-97": {
+          "value": "#f8f8f8",
+          "type": "color"
+        },
+        "gray-100": {
+          "value": "#ffffff",
+          "type": "color"
+        },
+        "green-30": {
+          "value": "#005324",
+          "type": "color"
+        },
+        "green-40": {
+          "value": "#006d32",
+          "type": "color"
+        },
+        "green-50": {
+          "value": "#009747",
+          "type": "color",
+          "description": "The brand green: the Chai UI logo, primary actions, switches, focus rings"
+        },
+        "green-60": {
+          "value": "#57b06c",
+          "type": "color"
+        },
+        "green-80": {
+          "value": "#96f6c5",
+          "type": "color"
+        },
+        "green-95": {
+          "value": "#e9f4e6",
+          "type": "color"
+        },
+        "amber-40": {
+          "value": "#a8681c",
+          "type": "color"
+        },
+        "amber-50": {
+          "value": "#c98226",
+          "type": "color"
+        },
+        "amber-80": {
+          "value": "#f0d3a4",
+          "type": "color"
+        },
+        "red-40": {
+          "value": "#a13c33",
+          "type": "color"
+        },
+        "red-50": {
+          "value": "#c14e42",
+          "type": "color"
+        },
+        "red-80": {
+          "value": "#f0c2bc",
+          "type": "color"
+        }
+      },
+      "semantic": {
+        "text-on-accent": {
+          "value": "#ffffff",
+          "type": "color"
+        },
+        "accent": {
+          "value": "#009747",
+          "type": "color",
+          "description": "Fills, switches, icons, focus rings. 3.8:1 on white: not for small text."
+        },
+        "accent-hover": {
+          "value": "#006d32",
+          "type": "color"
+        },
+        "accent-subtle": {
+          "value": "#e9f4e6",
+          "type": "color"
+        },
+        "accent-soft": {
+          "value": "#96f6c5",
+          "type": "color",
+          "description": "The bright mint: the ready submit button, an open picker, a drop zone with a file dragged over it"
+        },
+        "accent-text": {
+          "value": "#006d32",
+          "type": "color",
+          "description": "Green text and small icons on light backgrounds (6.5:1 on white)"
+        },
+        "warning": {
+          "value": "#c98226",
+          "type": "color"
+        },
+        "warning-subtle": {
+          "value": "#f0d3a4",
+          "type": "color"
+        },
+        "danger": {
+          "value": "#c14e42",
+          "type": "color"
+        },
+        "danger-subtle": {
+          "value": "#f0c2bc",
+          "type": "color"
+        },
+        "control-surface": {
+          "value": "#f8f8f8",
+          "type": "color",
+          "description": "Input and card fill: the Composer bar, Media Analyzer, result card media area"
+        },
+        "control-surface-hover": {
+          "value": "#e9e9e9",
+          "type": "color",
+          "description": "Hover and pressed fill for buttons, menu items and chips"
+        },
+        "control-surface-raised": {
+          "value": "#ffffff",
+          "type": "color",
+          "description": "Menus, the result card action bar and info side"
+        },
+        "control-track": {
+          "value": "#e0e0e0",
+          "type": "color",
+          "description": "Switch track, video scrubber track"
+        },
+        "control-divider": {
+          "value": "#e0e0e0",
+          "type": "color",
+          "description": "Thin dividers and thumbnail borders"
+        },
+        "control-border": {
+          "value": "#8b8b8b",
+          "type": "color",
+          "description": "Borders of inputs, chips and outlined buttons"
+        },
+        "control-border-soft": {
+          "value": "#9e9e9e",
+          "type": "color",
+          "description": "Card outlines and the switch outline"
+        },
+        "control-border-faint": {
+          "value": "#c2c2c2",
+          "type": "color"
+        },
+        "control-text-strong": {
+          "value": "#1a1a1a",
+          "type": "color",
+          "description": "Menu and option text"
+        },
+        "control-text": {
+          "value": "#4a4a4a",
+          "type": "color",
+          "description": "Text typed into controls, chip text"
+        },
+        "control-text-muted": {
+          "value": "#666666",
+          "type": "color",
+          "description": "Icons, placeholders, switch handle (5.4:1 on control-surface)"
+        },
+        "overlay": {
+          "value": "rgba(0, 0, 0, 0.5)",
+          "type": "color",
+          "description": "Buttons sitting on top of media: play, collapse, remove"
+        },
+        "on-overlay": {
+          "value": "#ffffff",
+          "type": "color",
+          "description": "Icons on overlay buttons"
+        },
+        "scrim": {
+          "value": "rgba(0, 0, 0, 0.6)",
+          "type": "color",
+          "description": "Backdrop behind an expanded image or video"
+        },
+        "media-backdrop": {
+          "value": "#000000",
+          "type": "color",
+          "description": "Letterboxing behind video"
+        }
+      },
+      "material": {
+        "primary": {
+          "value": "#009747",
+          "type": "color"
+        },
+        "on-primary": {
+          "value": "#ffffff",
+          "type": "color"
+        },
+        "primary-container": {
+          "value": "#96f6c5",
+          "type": "color"
+        },
+        "on-primary-container": {
+          "value": "#006d32",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "#009747",
+          "type": "color"
+        },
+        "secondary-container": {
+          "value": "#96f6c5",
+          "type": "color"
+        },
+        "on-secondary-container": {
+          "value": "#006d32",
+          "type": "color"
+        },
+        "tertiary-container": {
+          "value": "#96f6c5",
+          "type": "color"
+        },
+        "on-tertiary-container": {
+          "value": "#006d32",
+          "type": "color"
+        },
+        "error": {
+          "value": "#c14e42",
+          "type": "color"
+        },
+        "on-error-container": {
+          "value": "#c14e42",
+          "type": "color"
+        },
+        "surface": {
+          "value": "#ffffff",
+          "type": "color"
+        },
+        "surface-container-low": {
+          "value": "#f8f8f8",
+          "type": "color"
+        },
+        "surface-container-high": {
+          "value": "#e9e9e9",
+          "type": "color"
+        },
+        "surface-container-highest": {
+          "value": "#e0e0e0",
+          "type": "color"
+        },
+        "on-surface": {
+          "value": "#1a1a1a",
+          "type": "color"
+        },
+        "on-surface-variant": {
+          "value": "#4a4a4a",
+          "type": "color"
+        },
+        "outline": {
+          "value": "#8b8b8b",
+          "type": "color"
+        },
+        "shadow": {
+          "value": "#000000",
+          "type": "color"
+        }
+      }
+    },
+    "space": {
+      "0": {
+        "value": "0px",
+        "type": "spacing"
+      },
+      "1": {
+        "value": "4px",
+        "type": "spacing"
+      },
+      "2": {
+        "value": "8px",
+        "type": "spacing"
+      },
+      "3": {
+        "value": "12px",
+        "type": "spacing"
+      },
+      "4": {
+        "value": "16px",
+        "type": "spacing"
+      },
+      "5": {
+        "value": "24px",
+        "type": "spacing"
+      },
+      "6": {
+        "value": "32px",
+        "type": "spacing"
+      },
+      "7": {
+        "value": "48px",
+        "type": "spacing"
+      },
+      "8": {
+        "value": "64px",
+        "type": "spacing"
+      }
+    },
+    "radius": {
+      "sm": {
+        "value": "6px",
+        "type": "borderRadius"
+      },
+      "md": {
+        "value": "10px",
+        "type": "borderRadius"
+      },
+      "lg": {
+        "value": "16px",
+        "type": "borderRadius"
+      },
+      "full": {
+        "value": "999px",
+        "type": "borderRadius"
+      }
+    },
+    "type": {
+      "family": {
+        "base": {
+          "value": "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+          "type": "fontFamilies"
+        },
+        "mono": {
+          "value": "'IBM Plex Mono', ui-monospace, monospace",
+          "type": "fontFamilies"
+        },
+        "material": {
+          "value": "'Roboto', -apple-system, BlinkMacSystemFont, sans-serif",
+          "type": "fontFamilies",
+          "description": "Material Design 3's own typeface primitive (m3.material.io/styles/typography), self-hosted via @fontsource/roboto. Used for the MD3 type-scale roles below and throughout the Composer, Media Analyzer and Result card."
+        }
+      },
+      "size": {
+        "xs": {
+          "value": "12px",
+          "type": "fontSizes"
+        },
+        "sm": {
+          "value": "14px",
+          "type": "fontSizes"
+        },
+        "md": {
+          "value": "16px",
+          "type": "fontSizes"
+        },
+        "lg": {
+          "value": "20px",
+          "type": "fontSizes"
+        },
+        "xl": {
+          "value": "26px",
+          "type": "fontSizes"
+        },
+        "2xl": {
+          "value": "34px",
+          "type": "fontSizes"
+        },
+        "title-large": {
+          "value": "22px",
+          "type": "fontSizes",
+          "description": "MD3 type scale: Title Large"
+        },
+        "title-medium": {
+          "value": "16px",
+          "type": "fontSizes",
+          "description": "MD3 type scale: Title Medium"
+        },
+        "body-large": {
+          "value": "16px",
+          "type": "fontSizes",
+          "description": "MD3 type scale: Body Large"
+        },
+        "body-medium": {
+          "value": "14px",
+          "type": "fontSizes",
+          "description": "MD3 type scale: Body Medium"
+        },
+        "label-large": {
+          "value": "14px",
+          "type": "fontSizes",
+          "description": "MD3 type scale: Label Large"
+        },
+        "label-small": {
+          "value": "11px",
+          "type": "fontSizes",
+          "description": "MD3 type scale: Label Small"
+        }
+      },
+      "weight": {
+        "regular": {
+          "value": "440",
+          "type": "fontWeights"
+        },
+        "medium": {
+          "value": "540",
+          "type": "fontWeights"
+        },
+        "semibold": {
+          "value": "620",
+          "type": "fontWeights"
+        },
+        "material-regular": {
+          "value": "400",
+          "type": "fontWeights",
+          "description": "MD3 type scale weight: Regular"
+        },
+        "material-medium": {
+          "value": "500",
+          "type": "fontWeights",
+          "description": "MD3 type scale weight: Medium"
+        }
+      },
+      "leading": {
+        "tight": {
+          "value": "1.15",
+          "type": "lineHeights"
+        },
+        "base": {
+          "value": "1.45",
+          "type": "lineHeights"
+        },
+        "loose": {
+          "value": "1.7",
+          "type": "lineHeights"
+        },
+        "title-large": {
+          "value": "28px",
+          "type": "lineHeights"
+        },
+        "title-medium": {
+          "value": "24px",
+          "type": "lineHeights"
+        },
+        "body-large": {
+          "value": "24px",
+          "type": "lineHeights"
+        },
+        "body-medium": {
+          "value": "20px",
+          "type": "lineHeights"
+        },
+        "label-large": {
+          "value": "20px",
+          "type": "lineHeights"
+        },
+        "label-small": {
+          "value": "16px",
+          "type": "lineHeights"
+        }
+      },
+      "tracking": {
+        "title-large": {
+          "value": "0px",
+          "type": "letterSpacing"
+        },
+        "title-medium": {
+          "value": "0.15px",
+          "type": "letterSpacing"
+        },
+        "body-large": {
+          "value": "0.5px",
+          "type": "letterSpacing"
+        },
+        "body-medium": {
+          "value": "0.25px",
+          "type": "letterSpacing"
+        },
+        "label-large": {
+          "value": "0.1px",
+          "type": "letterSpacing"
+        },
+        "label-small": {
+          "value": "0.5px",
+          "type": "letterSpacing"
+        }
+      }
+    },
+    "motion": {
+      "duration": {
+        "fast": {
+          "value": "120ms",
+          "type": "duration"
+        },
+        "base": {
+          "value": "200ms",
+          "type": "duration"
+        },
+        "slow": {
+          "value": "360ms",
+          "type": "duration"
+        },
+        "steep": {
+          "value": "900ms",
+          "type": "duration",
+          "description": "Long ambient duration: loading spinners and pulses while a model generates"
+        }
+      },
+      "easing": {
+        "standard": {
+          "value": "cubic-bezier(0.2, 0, 0, 1)",
+          "type": "other"
+        },
+        "growth": {
+          "value": "cubic-bezier(0.34, 1.2, 0.64, 1)",
+          "type": "other",
+          "description": "Slight overshoot — for content arriving, e.g. a result appearing"
+        }
+      }
+    },
+    "shadow": {
+      "menu": {
+        "value": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)",
+        "type": "boxShadow",
+        "description": "Floating menus and popovers"
+      }
+    },
+    "gradient": {
+      "ai": {
+        "value": "linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6)",
+        "type": "other",
+        "description": "The AI shimmer: text revealing after prompt optimization"
+      }
+    }
+  }
+}

package/dist/js/index.d.ts

@@ -0,0 +1,5 @@
+// Generated by @chai-ui/tokens/build.mjs — do not edit by hand.
+export declare const tokens: Record<string, unknown>;
+export declare const flatTokens: Record<string, string>;
+export declare const tokenRefs: Record<string, string>;
+export default tokens;

package/dist/js/index.js

@@ -0,0 +1,335 @@
+// Generated by @chai-ui/tokens/build.mjs — do not edit by hand.
+export const tokens = {
+  "color": {
+    "root": {
+      "gray-0": "#000000",
+      "gray-10": "#1a1a1a",
+      "gray-30": "#4a4a4a",
+      "gray-40": "#666666",
+      "gray-50": "#8b8b8b",
+      "gray-60": "#9e9e9e",
+      "gray-75": "#c2c2c2",
+      "gray-85": "#e0e0e0",
+      "gray-90": "#e9e9e9",
+      "gray-97": "#f8f8f8",
+      "gray-100": "#ffffff",
+      "green-30": "#005324",
+      "green-40": "#006d32",
+      "green-50": "#009747",
+      "green-60": "#57b06c",
+      "green-80": "#96f6c5",
+      "green-95": "#e9f4e6",
+      "amber-40": "#a8681c",
+      "amber-50": "#c98226",
+      "amber-80": "#f0d3a4",
+      "red-40": "#a13c33",
+      "red-50": "#c14e42",
+      "red-80": "#f0c2bc"
+    },
+    "semantic": {
+      "text-on-accent": "#ffffff",
+      "accent": "#009747",
+      "accent-hover": "#006d32",
+      "accent-subtle": "#e9f4e6",
+      "accent-soft": "#96f6c5",
+      "accent-text": "#006d32",
+      "warning": "#c98226",
+      "warning-subtle": "#f0d3a4",
+      "danger": "#c14e42",
+      "danger-subtle": "#f0c2bc",
+      "control-surface": "#f8f8f8",
+      "control-surface-hover": "#e9e9e9",
+      "control-surface-raised": "#ffffff",
+      "control-track": "#e0e0e0",
+      "control-divider": "#e0e0e0",
+      "control-border": "#8b8b8b",
+      "control-border-soft": "#9e9e9e",
+      "control-border-faint": "#c2c2c2",
+      "control-text-strong": "#1a1a1a",
+      "control-text": "#4a4a4a",
+      "control-text-muted": "#666666",
+      "overlay": "rgba(0, 0, 0, 0.5)",
+      "on-overlay": "#ffffff",
+      "scrim": "rgba(0, 0, 0, 0.6)",
+      "media-backdrop": "#000000"
+    },
+    "material": {
+      "primary": "#009747",
+      "on-primary": "#ffffff",
+      "primary-container": "#96f6c5",
+      "on-primary-container": "#006d32",
+      "secondary": "#009747",
+      "secondary-container": "#96f6c5",
+      "on-secondary-container": "#006d32",
+      "tertiary-container": "#96f6c5",
+      "on-tertiary-container": "#006d32",
+      "error": "#c14e42",
+      "on-error-container": "#c14e42",
+      "surface": "#ffffff",
+      "surface-container-low": "#f8f8f8",
+      "surface-container-high": "#e9e9e9",
+      "surface-container-highest": "#e0e0e0",
+      "on-surface": "#1a1a1a",
+      "on-surface-variant": "#4a4a4a",
+      "outline": "#8b8b8b",
+      "shadow": "#000000"
+    }
+  },
+  "space": {
+    "0": "0px",
+    "1": "4px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "24px",
+    "6": "32px",
+    "7": "48px",
+    "8": "64px"
+  },
+  "radius": {
+    "sm": "6px",
+    "md": "10px",
+    "lg": "16px",
+    "full": "999px"
+  },
+  "type": {
+    "family": {
+      "base": "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+      "mono": "'IBM Plex Mono', ui-monospace, monospace",
+      "material": "'Roboto', -apple-system, BlinkMacSystemFont, sans-serif"
+    },
+    "size": {
+      "xs": "12px",
+      "sm": "14px",
+      "md": "16px",
+      "lg": "20px",
+      "xl": "26px",
+      "2xl": "34px",
+      "title-large": "22px",
+      "title-medium": "16px",
+      "body-large": "16px",
+      "body-medium": "14px",
+      "label-large": "14px",
+      "label-small": "11px"
+    },
+    "weight": {
+      "regular": "440",
+      "medium": "540",
+      "semibold": "620",
+      "material-regular": "400",
+      "material-medium": "500"
+    },
+    "leading": {
+      "tight": "1.15",
+      "base": "1.45",
+      "loose": "1.7",
+      "title-large": "28px",
+      "title-medium": "24px",
+      "body-large": "24px",
+      "body-medium": "20px",
+      "label-large": "20px",
+      "label-small": "16px"
+    },
+    "tracking": {
+      "title-large": "0px",
+      "title-medium": "0.15px",
+      "body-large": "0.5px",
+      "body-medium": "0.25px",
+      "label-large": "0.1px",
+      "label-small": "0.5px"
+    }
+  },
+  "motion": {
+    "duration": {
+      "fast": "120ms",
+      "base": "200ms",
+      "slow": "360ms",
+      "steep": "900ms"
+    },
+    "easing": {
+      "standard": "cubic-bezier(0.2, 0, 0, 1)",
+      "growth": "cubic-bezier(0.34, 1.2, 0.64, 1)"
+    }
+  },
+  "shadow": {
+    "menu": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)"
+  },
+  "gradient": {
+    "ai": "linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6)"
+  }
+};
+
+/** Flat lookup, e.g. flatTokens["color.semantic.accent"] */
+export const flatTokens = {
+  "color.root.gray-0": "#000000",
+  "color.root.gray-10": "#1a1a1a",
+  "color.root.gray-30": "#4a4a4a",
+  "color.root.gray-40": "#666666",
+  "color.root.gray-50": "#8b8b8b",
+  "color.root.gray-60": "#9e9e9e",
+  "color.root.gray-75": "#c2c2c2",
+  "color.root.gray-85": "#e0e0e0",
+  "color.root.gray-90": "#e9e9e9",
+  "color.root.gray-97": "#f8f8f8",
+  "color.root.gray-100": "#ffffff",
+  "color.root.green-30": "#005324",
+  "color.root.green-40": "#006d32",
+  "color.root.green-50": "#009747",
+  "color.root.green-60": "#57b06c",
+  "color.root.green-80": "#96f6c5",
+  "color.root.green-95": "#e9f4e6",
+  "color.root.amber-40": "#a8681c",
+  "color.root.amber-50": "#c98226",
+  "color.root.amber-80": "#f0d3a4",
+  "color.root.red-40": "#a13c33",
+  "color.root.red-50": "#c14e42",
+  "color.root.red-80": "#f0c2bc",
+  "color.semantic.text-on-accent": "#ffffff",
+  "color.semantic.accent": "#009747",
+  "color.semantic.accent-hover": "#006d32",
+  "color.semantic.accent-subtle": "#e9f4e6",
+  "color.semantic.accent-soft": "#96f6c5",
+  "color.semantic.accent-text": "#006d32",
+  "color.semantic.warning": "#c98226",
+  "color.semantic.warning-subtle": "#f0d3a4",
+  "color.semantic.danger": "#c14e42",
+  "color.semantic.danger-subtle": "#f0c2bc",
+  "color.semantic.control-surface": "#f8f8f8",
+  "color.semantic.control-surface-hover": "#e9e9e9",
+  "color.semantic.control-surface-raised": "#ffffff",
+  "color.semantic.control-track": "#e0e0e0",
+  "color.semantic.control-divider": "#e0e0e0",
+  "color.semantic.control-border": "#8b8b8b",
+  "color.semantic.control-border-soft": "#9e9e9e",
+  "color.semantic.control-border-faint": "#c2c2c2",
+  "color.semantic.control-text-strong": "#1a1a1a",
+  "color.semantic.control-text": "#4a4a4a",
+  "color.semantic.control-text-muted": "#666666",
+  "color.semantic.overlay": "rgba(0, 0, 0, 0.5)",
+  "color.semantic.on-overlay": "#ffffff",
+  "color.semantic.scrim": "rgba(0, 0, 0, 0.6)",
+  "color.semantic.media-backdrop": "#000000",
+  "color.material.primary": "#009747",
+  "color.material.on-primary": "#ffffff",
+  "color.material.primary-container": "#96f6c5",
+  "color.material.on-primary-container": "#006d32",
+  "color.material.secondary": "#009747",
+  "color.material.secondary-container": "#96f6c5",
+  "color.material.on-secondary-container": "#006d32",
+  "color.material.tertiary-container": "#96f6c5",
+  "color.material.on-tertiary-container": "#006d32",
+  "color.material.error": "#c14e42",
+  "color.material.on-error-container": "#c14e42",
+  "color.material.surface": "#ffffff",
+  "color.material.surface-container-low": "#f8f8f8",
+  "color.material.surface-container-high": "#e9e9e9",
+  "color.material.surface-container-highest": "#e0e0e0",
+  "color.material.on-surface": "#1a1a1a",
+  "color.material.on-surface-variant": "#4a4a4a",
+  "color.material.outline": "#8b8b8b",
+  "color.material.shadow": "#000000",
+  "space.0": "0px",
+  "space.1": "4px",
+  "space.2": "8px",
+  "space.3": "12px",
+  "space.4": "16px",
+  "space.5": "24px",
+  "space.6": "32px",
+  "space.7": "48px",
+  "space.8": "64px",
+  "radius.sm": "6px",
+  "radius.md": "10px",
+  "radius.lg": "16px",
+  "radius.full": "999px",
+  "type.family.base": "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+  "type.family.mono": "'IBM Plex Mono', ui-monospace, monospace",
+  "type.family.material": "'Roboto', -apple-system, BlinkMacSystemFont, sans-serif",
+  "type.size.xs": "12px",
+  "type.size.sm": "14px",
+  "type.size.md": "16px",
+  "type.size.lg": "20px",
+  "type.size.xl": "26px",
+  "type.size.2xl": "34px",
+  "type.size.title-large": "22px",
+  "type.size.title-medium": "16px",
+  "type.size.body-large": "16px",
+  "type.size.body-medium": "14px",
+  "type.size.label-large": "14px",
+  "type.size.label-small": "11px",
+  "type.weight.regular": "440",
+  "type.weight.medium": "540",
+  "type.weight.semibold": "620",
+  "type.weight.material-regular": "400",
+  "type.weight.material-medium": "500",
+  "type.leading.tight": "1.15",
+  "type.leading.base": "1.45",
+  "type.leading.loose": "1.7",
+  "type.leading.title-large": "28px",
+  "type.leading.title-medium": "24px",
+  "type.leading.body-large": "24px",
+  "type.leading.body-medium": "20px",
+  "type.leading.label-large": "20px",
+  "type.leading.label-small": "16px",
+  "type.tracking.title-large": "0px",
+  "type.tracking.title-medium": "0.15px",
+  "type.tracking.body-large": "0.5px",
+  "type.tracking.body-medium": "0.25px",
+  "type.tracking.label-large": "0.1px",
+  "type.tracking.label-small": "0.5px",
+  "motion.duration.fast": "120ms",
+  "motion.duration.base": "200ms",
+  "motion.duration.slow": "360ms",
+  "motion.duration.steep": "900ms",
+  "motion.easing.standard": "cubic-bezier(0.2, 0, 0, 1)",
+  "motion.easing.growth": "cubic-bezier(0.34, 1.2, 0.64, 1)",
+  "shadow.menu": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)",
+  "gradient.ai": "linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6)"
+};
+
+/** Alias tokens and what they point at, e.g. tokenRefs["color.material.primary"] === "color.semantic.accent" */
+export const tokenRefs = {
+  "color.semantic.text-on-accent": "color.root.gray-100",
+  "color.semantic.accent": "color.root.green-50",
+  "color.semantic.accent-hover": "color.root.green-40",
+  "color.semantic.accent-subtle": "color.root.green-95",
+  "color.semantic.accent-soft": "color.root.green-80",
+  "color.semantic.accent-text": "color.root.green-40",
+  "color.semantic.warning": "color.root.amber-50",
+  "color.semantic.warning-subtle": "color.root.amber-80",
+  "color.semantic.danger": "color.root.red-50",
+  "color.semantic.danger-subtle": "color.root.red-80",
+  "color.semantic.control-surface": "color.root.gray-97",
+  "color.semantic.control-surface-hover": "color.root.gray-90",
+  "color.semantic.control-surface-raised": "color.root.gray-100",
+  "color.semantic.control-track": "color.root.gray-85",
+  "color.semantic.control-divider": "color.root.gray-85",
+  "color.semantic.control-border": "color.root.gray-50",
+  "color.semantic.control-border-soft": "color.root.gray-60",
+  "color.semantic.control-border-faint": "color.root.gray-75",
+  "color.semantic.control-text-strong": "color.root.gray-10",
+  "color.semantic.control-text": "color.root.gray-30",
+  "color.semantic.control-text-muted": "color.root.gray-40",
+  "color.semantic.on-overlay": "color.root.gray-100",
+  "color.semantic.media-backdrop": "color.root.gray-0",
+  "color.material.primary": "color.semantic.accent",
+  "color.material.on-primary": "color.semantic.control-surface-raised",
+  "color.material.primary-container": "color.semantic.accent-soft",
+  "color.material.on-primary-container": "color.semantic.accent-text",
+  "color.material.secondary": "color.semantic.accent",
+  "color.material.secondary-container": "color.semantic.accent-soft",
+  "color.material.on-secondary-container": "color.semantic.accent-text",
+  "color.material.tertiary-container": "color.semantic.accent-soft",
+  "color.material.on-tertiary-container": "color.semantic.accent-text",
+  "color.material.error": "color.semantic.danger",
+  "color.material.on-error-container": "color.semantic.danger",
+  "color.material.surface": "color.semantic.control-surface-raised",
+  "color.material.surface-container-low": "color.semantic.control-surface",
+  "color.material.surface-container-high": "color.semantic.control-surface-hover",
+  "color.material.surface-container-highest": "color.semantic.control-track",
+  "color.material.on-surface": "color.semantic.control-text-strong",
+  "color.material.on-surface-variant": "color.semantic.control-text",
+  "color.material.outline": "color.semantic.control-border",
+  "color.material.shadow": "color.semantic.media-backdrop"
+};
+
+export default tokens;

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@chai-ui/tokens",
+  "version": "0.1.0",
+  "description": "CHAI UI design tokens — single source of truth, built to CSS variables, TypeScript, and a Figma Tokens/Variables-plugin JSON.",
+  "license": "MIT",
+  "author": "kazarazat",
+  "homepage": "https://chai-ui.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kazarazat/chai-ui.git",
+    "directory": "packages/tokens"
+  },
+  "bugs": {
+    "url": "https://github.com/kazarazat/chai-ui/issues"
+  },
+  "keywords": [
+    "ai",
+    "generative-ai",
+    "design-system",
+    "ai-ui",
+    "design-tokens",
+    "css-variables",
+    "figma-tokens"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/js/index.js",
+  "types": "./dist/js/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/js/index.d.ts",
+      "import": "./dist/js/index.js"
+    },
+    "./css": "./dist/css/tokens.css",
+    "./figma": "./dist/figma/tokens.figma.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rimraf dist && node build.mjs",
+    "dev": "node build.mjs --watch",
+    "typecheck": "echo \"(no TS source to typecheck — tokens.json + a plain build.mjs only)\"",
+    "lint": "echo \"(no lint configured yet)\"",
+    "clean": "rimraf dist"
+  }
+}