@tuuject/koi-tokens 0.0.0-stage → 0.1.0

package/LICENSE

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

@@ -1,3 +1,40 @@
-# Temporary Holding Version
+# @tuuject/koi-tokens
 
-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.
+Koi's design tokens, generated from one source (`src/tokens.json`): colors, palettes, type, spacing, radii, sizes, shadows, blur, layers and each component's own dimensions.
+
+Most apps get these through `@tuuject/koi-react` and its Panda design system. Use this package directly for a non-Panda page, a React Native app, or your own tooling.
+
+## Exports
+
+| Import | What |
+| --- | --- |
+| `@tuuject/koi-tokens/tokens.css` | Every token as a CSS variable. Light by default; `<html data-theme="dark">` and `data-palette="rose"` swap themes. |
+| `@tuuject/koi-tokens/theme-init.js` | Inline in `<head>`: sets `data-theme` from the OS before first paint, follows OS changes, exposes `koiSetTheme`, `koiSetFont`, `koiSetPalette`. |
+| `@tuuject/koi-tokens/panda` | The Panda CSS preset (tokens, semantic tokens, text styles, keyframes). You do not need it when using `designSystem: '@tuuject/koi-react'`. |
+| `@tuuject/koi-tokens/dimensions` | Every size as a plain number in px, including per-component sizes. |
+| `@tuuject/koi-tokens/palette` | Palettes at runtime: `palettes`, `createColors(palette, theme)`, `checkPalette(palette)`. |
+| `@tuuject/koi-tokens/native` | Pre-resolved colors per theme and numbers for React Native. |
+| `@tuuject/koi-tokens/fonts.css` | The optional ChillRoundF subsets (`<html data-font="chill">`). |
+| `@tuuject/koi-tokens/tokens.json` | The source data. |
+
+## Plain CSS
+
+```html
+<link rel="stylesheet" href="/node_modules/@tuuject/koi-tokens/tokens.css" />
+<script src="/node_modules/@tuuject/koi-tokens/theme-init.js"></script>
+```
+
+Then style with the variables (`var(--surface)`, `var(--text-muted)`, `var(--radius-lg)`…). The `koi-type-*` classes apply Koi's text styles.
+
+## Panda CSS
+
+```ts
+import { defineConfig } from '@pandacss/dev';
+import koiPreset from '@tuuject/koi-tokens/panda';
+
+export default defineConfig({
+  presets: ['@pandacss/preset-base', koiPreset],
+});
+```
+
+If you use `@tuuject/koi-react`, skip this and set `designSystem: '@tuuject/koi-react'` instead: that preset already contains the tokens, and adding both would duplicate them.

package/dist/dimensions.d.ts

@@ -0,0 +1,150 @@
+export declare const space: {
+    readonly "1": 4;
+    readonly "2": 8;
+    readonly "3": 12;
+    readonly "4": 16;
+    readonly "5": 20;
+    readonly "6": 24;
+    readonly "8": 32;
+    readonly "10": 40;
+    readonly "12": 48;
+    readonly "16": 64;
+};
+export declare const radii: {
+    readonly sm: 6;
+    readonly lg: 8;
+    readonly xl: 12;
+    readonly "2xl": 16;
+    readonly panel: 24;
+    readonly dialog: 32;
+    readonly bar: 36;
+    readonly full: 9999;
+};
+export declare const sizes: {
+    readonly "control-sm": 28;
+    readonly "control-md": 36;
+    readonly "control-lg": 44;
+    readonly icon: 16;
+    readonly "icon-sm": 14;
+    readonly "icon-xs": 12;
+    readonly "icon-lg": 18;
+};
+export declare const layers: {
+    readonly dialog: 900;
+    readonly popup: 950;
+    readonly toast: 1000;
+    readonly tooltip: 1000;
+};
+export declare const components: {
+    readonly focusRing: {
+        readonly width: 2;
+        readonly offset: 2;
+    };
+    readonly stroke: {
+        readonly hairline: 1;
+        readonly check: 1.5;
+    };
+    readonly spinner: {
+        readonly sizeSm: 16;
+        readonly sizeMd: 20;
+        readonly sizeLg: 32;
+        readonly stroke: 3;
+    };
+    readonly closeButton: {
+        readonly size: 24;
+    };
+    readonly popup: {
+        readonly offset: 4;
+    };
+    readonly field: {
+        readonly lineHeight: 20;
+        readonly paddingXSm: 10;
+        readonly paddingXMd: 12;
+        readonly paddingXLg: 14;
+        readonly gap: 6;
+        readonly iconOffset: 2;
+        readonly chevronInset: 10;
+        readonly chevronSpace: 36;
+    };
+    readonly textarea: {
+        readonly minHeight: 80;
+    };
+    readonly table: {
+        readonly rowHeight: 48;
+    };
+    readonly badge: {
+        readonly height: 22;
+        readonly paddingX: 10;
+        readonly dot: 6;
+    };
+    readonly avatar: {
+        readonly sizeXl: 64;
+        readonly fontSm: 12;
+        readonly fontMd: 14;
+        readonly fontLg: 16;
+        readonly fontXl: 24;
+    };
+    readonly alert: {
+        readonly iconOffset: 2;
+    };
+    readonly dialog: {
+        readonly widthSm: 400;
+        readonly widthMd: 520;
+        readonly widthLg: 720;
+    };
+    readonly checkbox: {
+        readonly box: 16;
+        readonly offset: 2;
+    };
+    readonly radio: {
+        readonly dot: 6;
+    };
+    readonly switch: {
+        readonly trackWidth: 36;
+        readonly trackHeight: 20;
+        readonly thumb: 14;
+        readonly thumbInset: 3;
+    };
+    readonly progress: {
+        readonly trackSm: 4;
+        readonly trackMd: 8;
+        readonly trackLg: 12;
+    };
+    readonly pagination: {
+        readonly gapWidth: 24;
+    };
+    readonly tag: {
+        readonly paddingX: 10;
+        readonly remove: 16;
+        readonly removeOverhang: 4;
+    };
+    readonly toast: {
+        readonly width: 360;
+        readonly iconOffset: 3;
+        readonly closableInset: 44;
+        readonly enterOffset: 12;
+    };
+    readonly tooltip: {
+        readonly maxWidth: 240;
+        readonly offset: 8;
+    };
+    readonly selectPanel: {
+        readonly maxHeight: 360;
+        readonly chevronOverhang: 2;
+    };
+    readonly link: {
+        readonly underline: 2;
+        readonly radius: 2;
+        readonly iconGap: 2;
+    };
+    readonly chatBubble: {
+        readonly paddingX: 12;
+        readonly paddingY: 8;
+        readonly maxWidth: 480;
+    };
+    readonly prose: {
+        readonly quoteRule: 4;
+        readonly headRule: 2;
+        readonly kbdDepth: 3;
+    };
+};

package/dist/dimensions.js

@@ -0,0 +1,154 @@
+// GENERATED by packages/tokens/scripts/build.mjs from src/tokens.json. Do not edit.
+// Every size as a number in px (the spinner stroke is in 24-grid units). Same on every platform: Panda recipes
+// write `[${n}px]`, React Native and Tamagui use the numbers. `components` holds each component's own sizes;
+// `layers` is the stacking order (z-index) of things that float over the page.
+export const space = {
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "10": 40,
+    "12": 48,
+    "16": 64
+};
+export const radii = {
+    "sm": 6,
+    "lg": 8,
+    "xl": 12,
+    "2xl": 16,
+    "panel": 24,
+    "dialog": 32,
+    "bar": 36,
+    "full": 9999
+};
+export const sizes = {
+    "control-sm": 28,
+    "control-md": 36,
+    "control-lg": 44,
+    "icon": 16,
+    "icon-sm": 14,
+    "icon-xs": 12,
+    "icon-lg": 18
+};
+export const layers = {
+    "dialog": 900,
+    "popup": 950,
+    "toast": 1000,
+    "tooltip": 1000
+};
+export const components = {
+    "focusRing": {
+        "width": 2,
+        "offset": 2
+    },
+    "stroke": {
+        "hairline": 1,
+        "check": 1.5
+    },
+    "spinner": {
+        "sizeSm": 16,
+        "sizeMd": 20,
+        "sizeLg": 32,
+        "stroke": 3
+    },
+    "closeButton": {
+        "size": 24
+    },
+    "popup": {
+        "offset": 4
+    },
+    "field": {
+        "lineHeight": 20,
+        "paddingXSm": 10,
+        "paddingXMd": 12,
+        "paddingXLg": 14,
+        "gap": 6,
+        "iconOffset": 2,
+        "chevronInset": 10,
+        "chevronSpace": 36
+    },
+    "textarea": {
+        "minHeight": 80
+    },
+    "table": {
+        "rowHeight": 48
+    },
+    "badge": {
+        "height": 22,
+        "paddingX": 10,
+        "dot": 6
+    },
+    "avatar": {
+        "sizeXl": 64,
+        "fontSm": 12,
+        "fontMd": 14,
+        "fontLg": 16,
+        "fontXl": 24
+    },
+    "alert": {
+        "iconOffset": 2
+    },
+    "dialog": {
+        "widthSm": 400,
+        "widthMd": 520,
+        "widthLg": 720
+    },
+    "checkbox": {
+        "box": 16,
+        "offset": 2
+    },
+    "radio": {
+        "dot": 6
+    },
+    "switch": {
+        "trackWidth": 36,
+        "trackHeight": 20,
+        "thumb": 14,
+        "thumbInset": 3
+    },
+    "progress": {
+        "trackSm": 4,
+        "trackMd": 8,
+        "trackLg": 12
+    },
+    "pagination": {
+        "gapWidth": 24
+    },
+    "tag": {
+        "paddingX": 10,
+        "remove": 16,
+        "removeOverhang": 4
+    },
+    "toast": {
+        "width": 360,
+        "iconOffset": 3,
+        "closableInset": 44,
+        "enterOffset": 12
+    },
+    "tooltip": {
+        "maxWidth": 240,
+        "offset": 8
+    },
+    "selectPanel": {
+        "maxHeight": 360,
+        "chevronOverhang": 2
+    },
+    "link": {
+        "underline": 2,
+        "radius": 2,
+        "iconGap": 2
+    },
+    "chatBubble": {
+        "paddingX": 12,
+        "paddingY": 8,
+        "maxWidth": 480
+    },
+    "prose": {
+        "quoteRule": 4,
+        "headRule": 2,
+        "kbdDepth": 3
+    }
+};