@x12i/tokens 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 x12i
+
+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

@@ -1,3 +1,62 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @x12i/tokens
+
+Design tokens for the Unified UI Kit. One W3C DTCG JSON source, compiled by
+Style Dictionary into everything the kit needs.
+
+| Output | Path | Use |
+| --- | --- | --- |
+| CSS custom properties, prefixed `--kit-` | `@x12i/tokens/css/*.css` | Runtime theming |
+| Tailwind v4 `@theme` mapping | `@x12i/tokens/tailwind.css` | Utility classes that read the same variables |
+| Typed TypeScript constants | `@x12i/tokens` | Charts and canvases that need raw values |
+| Tokens Studio JSON | `@x12i/tokens/tokens-studio.json` | Syncing with Figma |
+| DTCG source | `@x12i/tokens/dtcg/*` | Your own tooling |
+
+Most apps want [`@x12i/themes`](../themes), which packages the CSS files with
+system-preference defaults. Use this package directly for the TypeScript
+constants or the Tailwind mapping.
+
+## Tiers
+
+- **Primitive** (`src/dtcg/primitive`): raw values such as `color.neutral.9` and
+  `space.3`. Color primitives are never referenced by components.
+- **Semantic** (`src/dtcg/semantic`): meaning by role, such as `color.bg.surface`
+  and `color.accent.default`. Themes (`themes/`) and densities (`density/`) each
+  define the same paths with different values.
+- **Component** (`src/dtcg/component`): per-component values, only when no
+  semantic token fits, such as `button.height.md`.
+
+## Usage
+
+```ts
+import { cssVar, themes } from "@x12i/tokens";
+
+cssVar("color.bg.surface"); // "var(--kit-color-bg-surface)"
+themes.dark.color.chart.categorical["1"]; // a hex string, for canvas code
+```
+
+Tailwind v4:
+
+```css
+@import "tailwindcss";
+@import "@x12i/themes/themes.css";
+@import "@x12i/tokens/tailwind.css";
+```
+
+Utilities mirror token paths, for example `bg-bg-surface` and `text-text-secondary`.
+The mapping uses `@theme inline`, so switching `data-theme` needs no rebuild.
+
+## Scripts
+
+- `pnpm build:tokens` compiles the DTCG source. The TypeScript constants land in
+  `src/generated` (git-ignored) and are bundled by `pnpm build`.
+- `pnpm generate:ramps` rewrites `src/dtcg/primitive/color.json` from the ramp
+  recipes in `scripts/generate-ramps.mjs`. The committed JSON is the source of
+  truth afterwards.
+- `pnpm test` runs the contrast test, which computes the ratio of every semantic
+  text and background pair in every theme (4.5:1 for text, 3:1 for UI, and 7:1
+  and 4.5:1 for `hc`) and fails on a regression.
+
+## Status
+
+Color values are placeholders until the visual target is signed off. The
+categorical palette still needs a color-blindness check.

package/dist/css/base.css

@@ -0,0 +1,243 @@
+/**
+ * Do not edit directly. Generated by @x12i/tokens from src/dtcg.
+ */
+
+:root {
+  --kit-border-width-1: 1px;
+  --kit-border-width-2: 2px;
+  --kit-color-black: #000000;
+  --kit-color-white: #ffffff;
+  --kit-color-neutral-1: #07090e;
+  --kit-color-neutral-2: #0f1217;
+  --kit-color-neutral-3: #181b20;
+  --kit-color-neutral-4: #24262c;
+  --kit-color-neutral-5: #32353c;
+  --kit-color-neutral-6: #44484e;
+  --kit-color-neutral-7: #5d6067;
+  --kit-color-neutral-8: #777a82;
+  --kit-color-neutral-9: #92959d;
+  --kit-color-neutral-10: #b0b4bc;
+  --kit-color-neutral-11: #e7ebf4;
+  --kit-color-neutral-12: #f8faff;
+  --kit-color-accent-1: #0a0c25;
+  --kit-color-accent-2: #12163a;
+  --kit-color-accent-3: #1d2059;
+  --kit-color-accent-4: #282d74;
+  --kit-color-accent-5: #373e94;
+  --kit-color-accent-6: #444cb2;
+  --kit-color-accent-7: #5057dc;
+  --kit-color-accent-8: #5d67ee;
+  --kit-color-accent-9: #6e7cfd;
+  --kit-color-accent-10: #8b9bff;
+  --kit-color-accent-11: #e1e7ff;
+  --kit-color-accent-12: #f4f6ff;
+  --kit-color-success-1: #011408;
+  --kit-color-success-2: #00220f;
+  --kit-color-success-3: #003219;
+  --kit-color-success-4: #004424;
+  --kit-color-success-5: #005a31;
+  --kit-color-success-6: #006d3c;
+  --kit-color-success-7: #008148;
+  --kit-color-success-8: #009253;
+  --kit-color-success-9: #19a661;
+  --kit-color-success-10: #59bc81;
+  --kit-color-success-11: #d0f2da;
+  --kit-color-success-12: #effaf2;
+  --kit-color-warning-1: #180d00;
+  --kit-color-warning-2: #271700;
+  --kit-color-warning-3: #3a2400;
+  --kit-color-warning-4: #4d3200;
+  --kit-color-warning-5: #654200;
+  --kit-color-warning-6: #7b5100;
+  --kit-color-warning-7: #916100;
+  --kit-color-warning-8: #a46e00;
+  --kit-color-warning-9: #bb7e00;
+  --kit-color-warning-10: #d09945;
+  --kit-color-warning-11: #fae4c7;
+  --kit-color-warning-12: #fdf6ec;
+  --kit-color-danger-1: #210505;
+  --kit-color-danger-2: #340909;
+  --kit-color-danger-3: #4f0a0d;
+  --kit-color-danger-4: #691214;
+  --kit-color-danger-5: #861d1f;
+  --kit-color-danger-6: #a12628;
+  --kit-color-danger-7: #c51d28;
+  --kit-color-danger-8: #d73337;
+  --kit-color-danger-9: #e9504d;
+  --kit-color-danger-10: #f97770;
+  --kit-color-danger-11: #ffdfdc;
+  --kit-color-danger-12: #fff4f3;
+  --kit-color-info-1: #00121d;
+  --kit-color-info-2: #001e2d;
+  --kit-color-info-3: #002d42;
+  --kit-color-info-4: #003d58;
+  --kit-color-info-5: #005172;
+  --kit-color-info-6: #00628a;
+  --kit-color-info-7: #0075a3;
+  --kit-color-info-8: #0084b8;
+  --kit-color-info-9: #0097d2;
+  --kit-color-info-10: #4cb0e5;
+  --kit-color-info-11: #d0edff;
+  --kit-color-info-12: #eef9ff;
+  --kit-color-categorical-light-1: #2971c6;
+  --kit-color-categorical-light-2: #ac5700;
+  --kit-color-categorical-light-3: #008758;
+  --kit-color-categorical-light-4: #a8488d;
+  --kit-color-categorical-light-5: #867000;
+  --kit-color-categorical-light-6: #00818c;
+  --kit-color-categorical-light-7: #b94642;
+  --kit-color-categorical-light-8: #8059bb;
+  --kit-color-categorical-dark-1: #70adfb;
+  --kit-color-categorical-dark-2: #e99355;
+  --kit-color-categorical-dark-3: #53c48e;
+  --kit-color-categorical-dark-4: #e189c5;
+  --kit-color-categorical-dark-5: #c5a93b;
+  --kit-color-categorical-dark-6: #00c1d0;
+  --kit-color-categorical-dark-7: #f28881;
+  --kit-color-categorical-dark-8: #b897f0;
+  --kit-color-sequential-1: #e9f3ff;
+  --kit-color-sequential-2: #bcd9ff;
+  --kit-color-sequential-3: #8ebfff;
+  --kit-color-sequential-4: #5ea4fd;
+  --kit-color-sequential-5: #478ade;
+  --kit-color-sequential-6: #3f72b2;
+  --kit-color-sequential-7: #3f5b7f;
+  --kit-color-sequential-8: #384453;
+  --kit-color-sequential-9: #242f3d;
+  --kit-color-diverging-1: #2a6cba;
+  --kit-color-diverging-2: #5e8dc9;
+  --kit-color-diverging-3: #8dadd7;
+  --kit-color-diverging-4: #bdcee3;
+  --kit-color-diverging-5: #eeeeee;
+  --kit-color-diverging-6: #dfc7b7;
+  --kit-color-diverging-7: #cea081;
+  --kit-color-diverging-8: #bb7949;
+  --kit-color-diverging-9: #a45300;
+  --kit-font-family-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Hebrew', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
+  --kit-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  --kit-font-weight-regular: 400;
+  --kit-font-weight-medium: 500;
+  --kit-font-weight-semibold: 600;
+  --kit-font-size-12: 12px;
+  --kit-font-size-13: 13px;
+  --kit-font-size-14: 14px;
+  --kit-font-size-16: 16px;
+  --kit-font-size-20: 20px;
+  --kit-font-size-24: 24px;
+  --kit-font-size-30: 30px;
+  --kit-font-size-48: 48px;
+  --kit-font-line-height-16: 16px;
+  --kit-font-line-height-20: 20px;
+  --kit-font-line-height-22: 22px;
+  --kit-font-line-height-24: 24px;
+  --kit-font-line-height-28: 28px;
+  --kit-font-line-height-32: 32px;
+  --kit-font-line-height-38: 38px;
+  --kit-font-line-height-56: 56px;
+  --kit-radius-2: 2px;
+  --kit-radius-4: 4px;
+  --kit-radius-6: 6px;
+  --kit-radius-8: 8px;
+  --kit-radius-12: 12px;
+  --kit-radius-16: 16px;
+  --kit-radius-full: 9999px;
+  --kit-size-12: 12px;
+  --kit-size-16: 16px;
+  --kit-size-20: 20px;
+  --kit-size-24: 24px;
+  --kit-size-28: 28px;
+  --kit-size-32: 32px;
+  --kit-size-40: 40px;
+  --kit-size-44: 44px;
+  --kit-size-48: 48px;
+  --kit-size-56: 56px;
+  --kit-space-0: 0px;
+  --kit-space-1: 4px;
+  --kit-space-2: 8px;
+  --kit-space-3: 12px;
+  --kit-space-4: 16px;
+  --kit-space-5: 20px;
+  --kit-space-6: 24px;
+  --kit-space-8: 32px;
+  --kit-space-10: 40px;
+  --kit-space-12: 48px;
+  --kit-space-16: 64px;
+  --kit-space-20: 80px;
+  --kit-space-24: 96px;
+  --kit-space-0-5: 2px;
+  --kit-icon-stroke-width: 1.5;
+  --kit-duration-instant: 90ms;
+  --kit-duration-fast: 150ms;
+  --kit-duration-base: 240ms;
+  --kit-duration-slow: 400ms;
+  --kit-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --kit-easing-enter: cubic-bezier(0, 0, 0, 1);
+  --kit-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+  --kit-z-base: 0;
+  --kit-z-sticky: 10;
+  --kit-z-dropdown: 100;
+  --kit-z-overlay: 200;
+  --kit-z-modal: 300;
+  --kit-z-toast: 400;
+  --kit-z-tooltip: 500;
+  --kit-breakpoint-xs: 480px;
+  --kit-breakpoint-sm: 640px;
+  --kit-breakpoint-md: 768px;
+  --kit-breakpoint-lg: 1024px;
+  --kit-breakpoint-xl: 1280px;
+  --kit-breakpoint-2xl: 1536px;
+  --kit-border-width-default: var(--kit-border-width-1);
+  --kit-border-width-emphasis: var(--kit-border-width-2);
+  --kit-border-width-focus: var(--kit-border-width-2);
+  --kit-radius-control: var(--kit-radius-6);
+  --kit-radius-panel: var(--kit-radius-8);
+  --kit-radius-overlay: var(--kit-radius-12);
+  --kit-radius-pill: var(--kit-radius-full);
+  --kit-size-icon-xs: var(--kit-size-12);
+  --kit-size-icon-sm: var(--kit-size-16);
+  --kit-size-icon-md: var(--kit-size-20);
+  --kit-size-icon-lg: var(--kit-size-24);
+  --kit-size-target-min: var(--kit-size-24);
+  --kit-size-target-touch: var(--kit-size-44);
+  --kit-text-display-size: var(--kit-font-size-48);
+  --kit-text-display-line-height: var(--kit-font-line-height-56);
+  --kit-text-display-weight: var(--kit-font-weight-semibold);
+  --kit-text-h1-size: var(--kit-font-size-30);
+  --kit-text-h1-line-height: var(--kit-font-line-height-38);
+  --kit-text-h1-weight: var(--kit-font-weight-semibold);
+  --kit-text-h2-size: var(--kit-font-size-24);
+  --kit-text-h2-line-height: var(--kit-font-line-height-32);
+  --kit-text-h2-weight: var(--kit-font-weight-semibold);
+  --kit-text-h3-size: var(--kit-font-size-20);
+  --kit-text-h3-line-height: var(--kit-font-line-height-28);
+  --kit-text-h3-weight: var(--kit-font-weight-semibold);
+  --kit-text-h4-size: var(--kit-font-size-16);
+  --kit-text-h4-line-height: var(--kit-font-line-height-24);
+  --kit-text-h4-weight: var(--kit-font-weight-semibold);
+  --kit-text-body-size: var(--kit-font-size-14);
+  --kit-text-body-line-height: var(--kit-font-line-height-22);
+  --kit-text-body-weight: var(--kit-font-weight-regular);
+  --kit-text-label-size: var(--kit-font-size-13);
+  --kit-text-label-line-height: var(--kit-font-line-height-20);
+  --kit-text-label-weight: var(--kit-font-weight-medium);
+  --kit-text-caption-size: var(--kit-font-size-12);
+  --kit-text-caption-line-height: var(--kit-font-line-height-16);
+  --kit-text-caption-weight: var(--kit-font-weight-regular);
+  --kit-text-code-size: var(--kit-font-size-13);
+  --kit-text-code-line-height: var(--kit-font-line-height-20);
+  --kit-text-code-weight: var(--kit-font-weight-regular);
+  --kit-badge-height-sm: var(--kit-size-16);
+  --kit-badge-height-md: var(--kit-size-20);
+  --kit-button-height-xs: var(--kit-size-control-xs);
+  --kit-button-height-sm: var(--kit-size-control-sm);
+  --kit-button-height-md: var(--kit-size-control-md);
+  --kit-button-height-lg: var(--kit-size-control-lg);
+  --kit-button-height-xl: var(--kit-size-control-xl);
+  --kit-button-padding-inline-xs: var(--kit-space-control-inline-xs);
+  --kit-button-padding-inline-sm: var(--kit-space-control-inline-sm);
+  --kit-button-padding-inline-md: var(--kit-space-control-inline-md);
+  --kit-button-padding-inline-lg: var(--kit-space-control-inline-lg);
+  --kit-button-padding-inline-xl: var(--kit-space-control-inline-xl);
+  --kit-button-gap: var(--kit-space-control-gap);
+  --kit-grid-row-height: var(--kit-size-control-lg);
+}

package/dist/css/density-comfortable.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly. Generated by @x12i/tokens from src/dtcg.
+ */
+
+[data-density="comfortable"] {
+  --kit-size-control-xs: var(--kit-size-28);
+  --kit-size-control-sm: var(--kit-size-32);
+  --kit-size-control-md: var(--kit-size-40);
+  --kit-size-control-lg: var(--kit-size-48);
+  --kit-size-control-xl: var(--kit-size-56);
+  --kit-space-control-inline-xs: var(--kit-space-3);
+  --kit-space-control-inline-sm: var(--kit-space-3);
+  --kit-space-control-inline-md: var(--kit-space-4);
+  --kit-space-control-inline-lg: var(--kit-space-5);
+  --kit-space-control-inline-xl: var(--kit-space-6);
+  --kit-space-control-gap: var(--kit-space-3);
+}

package/dist/css/density-compact.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly. Generated by @x12i/tokens from src/dtcg.
+ */
+
+[data-density="compact"] {
+  --kit-size-control-xs: var(--kit-size-20);
+  --kit-size-control-sm: var(--kit-size-24);
+  --kit-size-control-md: var(--kit-size-28);
+  --kit-size-control-lg: var(--kit-size-32);
+  --kit-size-control-xl: var(--kit-size-40);
+  --kit-space-control-inline-xs: var(--kit-space-1);
+  --kit-space-control-inline-sm: var(--kit-space-1);
+  --kit-space-control-inline-md: var(--kit-space-2);
+  --kit-space-control-inline-lg: var(--kit-space-3);
+  --kit-space-control-inline-xl: var(--kit-space-4);
+  --kit-space-control-gap: var(--kit-space-1);
+}

package/dist/css/density-default.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly. Generated by @x12i/tokens from src/dtcg.
+ */
+
+:root, [data-density="default"] {
+  --kit-size-control-xs: var(--kit-size-24);
+  --kit-size-control-sm: var(--kit-size-28);
+  --kit-size-control-md: var(--kit-size-32);
+  --kit-size-control-lg: var(--kit-size-40);
+  --kit-size-control-xl: var(--kit-size-48);
+  --kit-space-control-inline-xs: var(--kit-space-2);
+  --kit-space-control-inline-sm: var(--kit-space-2);
+  --kit-space-control-inline-md: var(--kit-space-3);
+  --kit-space-control-inline-lg: var(--kit-space-4);
+  --kit-space-control-inline-xl: var(--kit-space-5);
+  --kit-space-control-gap: var(--kit-space-2);
+}

package/dist/css/theme-dark.css

@@ -0,0 +1,60 @@
+/**
+ * Do not edit directly. Generated by @x12i/tokens from src/dtcg.
+ */
+
+[data-theme="dark"] {
+  --kit-color-scrim: rgba(0, 0, 0, 0.7);
+  --kit-shadow-raised: 0px 0px 0px 1px #ffffff14;
+  --kit-shadow-overlay: 0px 8px 24px 0px #00000080;
+  --kit-shadow-modal: 0px 16px 48px 0px #000000a6;
+  --kit-shadow-toast: 0px 8px 24px 0px #00000080;
+  --kit-color-accent-default: var(--kit-color-accent-8);
+  --kit-color-accent-hover: var(--kit-color-accent-7);
+  --kit-color-accent-active: var(--kit-color-accent-6);
+  --kit-color-accent-subtle: var(--kit-color-accent-3);
+  --kit-color-accent-on-accent: var(--kit-color-white);
+  --kit-color-bg-canvas: var(--kit-color-neutral-1);
+  --kit-color-bg-surface: var(--kit-color-neutral-2);
+  --kit-color-bg-raised: var(--kit-color-neutral-3);
+  --kit-color-bg-overlay: var(--kit-color-neutral-4);
+  --kit-color-bg-inverse: var(--kit-color-neutral-12);
+  --kit-color-border-subtle: var(--kit-color-neutral-4);
+  --kit-color-border-default: var(--kit-color-neutral-8);
+  --kit-color-border-strong: var(--kit-color-neutral-9);
+  --kit-color-border-focus: var(--kit-color-accent-9);
+  --kit-color-text-primary: var(--kit-color-neutral-12);
+  --kit-color-text-secondary: var(--kit-color-neutral-10);
+  --kit-color-text-tertiary: var(--kit-color-neutral-9);
+  --kit-color-text-disabled: var(--kit-color-neutral-6);
+  --kit-color-text-inverse: var(--kit-color-neutral-1);
+  --kit-color-text-link: var(--kit-color-accent-10);
+  --kit-color-status-success-background: var(--kit-color-success-2);
+  --kit-color-status-success-foreground: var(--kit-color-success-10);
+  --kit-color-status-success-border: var(--kit-color-success-6);
+  --kit-color-status-warning-background: var(--kit-color-warning-2);
+  --kit-color-status-warning-foreground: var(--kit-color-warning-10);
+  --kit-color-status-warning-border: var(--kit-color-warning-6);
+  --kit-color-status-danger-background: var(--kit-color-danger-2);
+  --kit-color-status-danger-foreground: var(--kit-color-danger-10);
+  --kit-color-status-danger-border: var(--kit-color-danger-6);
+  --kit-color-status-info-background: var(--kit-color-info-2);
+  --kit-color-status-info-foreground: var(--kit-color-info-10);
+  --kit-color-status-info-border: var(--kit-color-info-6);
+  --kit-color-chart-axis: var(--kit-color-neutral-10);
+  --kit-color-chart-grid: var(--kit-color-neutral-4);
+  --kit-color-chart-muted: var(--kit-color-neutral-8);
+  --kit-color-chart-reference: var(--kit-color-neutral-9);
+  --kit-color-chart-categorical-1: var(--kit-color-categorical-dark-1);
+  --kit-color-chart-categorical-2: var(--kit-color-categorical-dark-2);
+  --kit-color-chart-categorical-3: var(--kit-color-categorical-dark-3);
+  --kit-color-chart-categorical-4: var(--kit-color-categorical-dark-4);
+  --kit-color-chart-categorical-5: var(--kit-color-categorical-dark-5);
+  --kit-color-chart-categorical-6: var(--kit-color-categorical-dark-6);
+  --kit-color-chart-categorical-7: var(--kit-color-categorical-dark-7);
+  --kit-color-chart-categorical-8: var(--kit-color-categorical-dark-8);
+  --kit-color-chart-good: var(--kit-color-success-8);
+  --kit-color-chart-warning: var(--kit-color-warning-8);
+  --kit-color-chart-critical: var(--kit-color-danger-8);
+  --kit-color-selection: var(--kit-color-accent-4);
+  --kit-color-highlight: var(--kit-color-warning-4);
+}

package/dist/css/theme-hc.css

@@ -0,0 +1,60 @@
+/**
+ * Do not edit directly. Generated by @x12i/tokens from src/dtcg.
+ */
+
+[data-theme="hc"] {
+  --kit-color-scrim: rgba(0, 0, 0, 0.9);
+  --kit-shadow-raised: 0px 0px 0px 0px #00000000;
+  --kit-shadow-overlay: 0px 0px 0px 0px #00000000;
+  --kit-shadow-modal: 0px 0px 0px 0px #00000000;
+  --kit-shadow-toast: 0px 0px 0px 0px #00000000;
+  --kit-color-accent-default: var(--kit-color-accent-10);
+  --kit-color-accent-hover: var(--kit-color-accent-11);
+  --kit-color-accent-active: var(--kit-color-accent-12);
+  --kit-color-accent-subtle: var(--kit-color-accent-1);
+  --kit-color-accent-on-accent: var(--kit-color-black);
+  --kit-color-bg-canvas: var(--kit-color-black);
+  --kit-color-bg-surface: var(--kit-color-black);
+  --kit-color-bg-raised: var(--kit-color-neutral-1);
+  --kit-color-bg-overlay: var(--kit-color-neutral-2);
+  --kit-color-bg-inverse: var(--kit-color-white);
+  --kit-color-border-subtle: var(--kit-color-neutral-8);
+  --kit-color-border-default: var(--kit-color-neutral-10);
+  --kit-color-border-strong: var(--kit-color-white);
+  --kit-color-border-focus: var(--kit-color-warning-10);
+  --kit-color-text-primary: var(--kit-color-white);
+  --kit-color-text-secondary: var(--kit-color-neutral-11);
+  --kit-color-text-tertiary: var(--kit-color-neutral-10);
+  --kit-color-text-disabled: var(--kit-color-neutral-8);
+  --kit-color-text-inverse: var(--kit-color-black);
+  --kit-color-text-link: var(--kit-color-accent-10);
+  --kit-color-status-success-background: var(--kit-color-black);
+  --kit-color-status-success-foreground: var(--kit-color-success-10);
+  --kit-color-status-success-border: var(--kit-color-success-10);
+  --kit-color-status-warning-background: var(--kit-color-black);
+  --kit-color-status-warning-foreground: var(--kit-color-warning-10);
+  --kit-color-status-warning-border: var(--kit-color-warning-10);
+  --kit-color-status-danger-background: var(--kit-color-black);
+  --kit-color-status-danger-foreground: var(--kit-color-danger-10);
+  --kit-color-status-danger-border: var(--kit-color-danger-10);
+  --kit-color-status-info-background: var(--kit-color-black);
+  --kit-color-status-info-foreground: var(--kit-color-info-10);
+  --kit-color-status-info-border: var(--kit-color-info-10);
+  --kit-color-chart-axis: var(--kit-color-neutral-11);
+  --kit-color-chart-grid: var(--kit-color-neutral-6);
+  --kit-color-chart-muted: var(--kit-color-neutral-9);
+  --kit-color-chart-reference: var(--kit-color-neutral-10);
+  --kit-color-chart-categorical-1: var(--kit-color-categorical-dark-1);
+  --kit-color-chart-categorical-2: var(--kit-color-categorical-dark-2);
+  --kit-color-chart-categorical-3: var(--kit-color-categorical-dark-3);
+  --kit-color-chart-categorical-4: var(--kit-color-categorical-dark-4);
+  --kit-color-chart-categorical-5: var(--kit-color-categorical-dark-5);
+  --kit-color-chart-categorical-6: var(--kit-color-categorical-dark-6);
+  --kit-color-chart-categorical-7: var(--kit-color-categorical-dark-7);
+  --kit-color-chart-categorical-8: var(--kit-color-categorical-dark-8);
+  --kit-color-chart-good: var(--kit-color-success-10);
+  --kit-color-chart-warning: var(--kit-color-warning-10);
+  --kit-color-chart-critical: var(--kit-color-danger-10);
+  --kit-color-selection: var(--kit-color-accent-5);
+  --kit-color-highlight: var(--kit-color-warning-5);
+}

package/dist/css/theme-light.css

@@ -0,0 +1,60 @@
+/**
+ * Do not edit directly. Generated by @x12i/tokens from src/dtcg.
+ */
+
+:root, [data-theme="light"] {
+  --kit-color-scrim: rgba(7, 9, 14, 0.5);
+  --kit-shadow-raised: 0px 1px 3px 0px #0f12171a;
+  --kit-shadow-overlay: 0px 6px 16px -2px #0f121724;
+  --kit-shadow-modal: 0px 16px 40px -4px #0f12172e;
+  --kit-shadow-toast: 0px 8px 24px -4px #0f121729;
+  --kit-color-accent-default: var(--kit-color-accent-6);
+  --kit-color-accent-hover: var(--kit-color-accent-5);
+  --kit-color-accent-active: var(--kit-color-accent-4);
+  --kit-color-accent-subtle: var(--kit-color-accent-11);
+  --kit-color-accent-on-accent: var(--kit-color-white);
+  --kit-color-bg-canvas: var(--kit-color-neutral-12);
+  --kit-color-bg-surface: var(--kit-color-white);
+  --kit-color-bg-raised: var(--kit-color-white);
+  --kit-color-bg-overlay: var(--kit-color-white);
+  --kit-color-bg-inverse: var(--kit-color-neutral-2);
+  --kit-color-border-subtle: var(--kit-color-neutral-11);
+  --kit-color-border-default: var(--kit-color-neutral-8);
+  --kit-color-border-strong: var(--kit-color-neutral-7);
+  --kit-color-border-focus: var(--kit-color-accent-6);
+  --kit-color-text-primary: var(--kit-color-neutral-2);
+  --kit-color-text-secondary: var(--kit-color-neutral-6);
+  --kit-color-text-tertiary: var(--kit-color-neutral-7);
+  --kit-color-text-disabled: var(--kit-color-neutral-9);
+  --kit-color-text-inverse: var(--kit-color-neutral-12);
+  --kit-color-text-link: var(--kit-color-accent-5);
+  --kit-color-status-success-background: var(--kit-color-success-11);
+  --kit-color-status-success-foreground: var(--kit-color-success-3);
+  --kit-color-status-success-border: var(--kit-color-success-8);
+  --kit-color-status-warning-background: var(--kit-color-warning-11);
+  --kit-color-status-warning-foreground: var(--kit-color-warning-3);
+  --kit-color-status-warning-border: var(--kit-color-warning-8);
+  --kit-color-status-danger-background: var(--kit-color-danger-11);
+  --kit-color-status-danger-foreground: var(--kit-color-danger-3);
+  --kit-color-status-danger-border: var(--kit-color-danger-8);
+  --kit-color-status-info-background: var(--kit-color-info-11);
+  --kit-color-status-info-foreground: var(--kit-color-info-3);
+  --kit-color-status-info-border: var(--kit-color-info-8);
+  --kit-color-chart-axis: var(--kit-color-neutral-6);
+  --kit-color-chart-grid: var(--kit-color-neutral-11);
+  --kit-color-chart-muted: var(--kit-color-neutral-8);
+  --kit-color-chart-reference: var(--kit-color-neutral-7);
+  --kit-color-chart-categorical-1: var(--kit-color-categorical-light-1);
+  --kit-color-chart-categorical-2: var(--kit-color-categorical-light-2);
+  --kit-color-chart-categorical-3: var(--kit-color-categorical-light-3);
+  --kit-color-chart-categorical-4: var(--kit-color-categorical-light-4);
+  --kit-color-chart-categorical-5: var(--kit-color-categorical-light-5);
+  --kit-color-chart-categorical-6: var(--kit-color-categorical-light-6);
+  --kit-color-chart-categorical-7: var(--kit-color-categorical-light-7);
+  --kit-color-chart-categorical-8: var(--kit-color-categorical-light-8);
+  --kit-color-chart-good: var(--kit-color-success-6);
+  --kit-color-chart-warning: var(--kit-color-warning-6);
+  --kit-color-chart-critical: var(--kit-color-danger-6);
+  --kit-color-selection: var(--kit-color-accent-10);
+  --kit-color-highlight: var(--kit-color-warning-10);
+}