@tuuject/koi-tokens 0.0.0-stage → 0.1.0

package/dist/native.js

@@ -0,0 +1,380 @@
+// GENERATED by packages/tokens/scripts/build.mjs from src/tokens.json. Do not edit.
+// React Native has no CSS variables, no oklch() and no backdrop-filter: colors are pre-resolved per theme,
+// sizes are plain numbers (dp). Shadows are not exported: build them per platform (iOS shadow*, Android elevation).
+export { space, radii, sizes, layers, components } from './dimensions.js';
+export const colors = {
+    "light": {
+        "page-bg": "#ffffff",
+        "surface": "#ffffff",
+        "surface-muted": "#f3f4f6",
+        "surface-glass": "rgba(255, 255, 255, 0.8)",
+        "surface-glass-tint": "rgba(255, 255, 255, 0.8)",
+        "backdrop": "rgba(0, 0, 0, 0.4)",
+        "tooltip-bg": "#101828",
+        "tooltip-text": "#ffffff",
+        "text": "#000000",
+        "text-muted": "rgba(0, 0, 0, 0.6)",
+        "text-disabled": "rgba(0, 0, 0, 0.38)",
+        "text-brand": "#0069a8",
+        "border": "#e5e7eb",
+        "border-control": "#6a7282",
+        "border-control-hover": "#4a5565",
+        "divider": "rgba(0, 0, 0, 0.1)",
+        "focus-ring": "#0084d1",
+        "action": "#0069a8",
+        "action-hover": "#00598a",
+        "on-action": "#ffffff",
+        "action-subtle": "#dff2fe",
+        "action-subtle-hover": "#b8e6fe",
+        "on-action-subtle": "#00598a",
+        "control-checked": "#0069a8",
+        "link": "#bb4d00",
+        "link-border": "#ffd230",
+        "link-hover-bg": "#fef3c6",
+        "link-hover-border": "#fe9a00",
+        "danger": "#e7000b",
+        "danger-hover": "#c10007",
+        "info-surface": "#f0f9ff",
+        "info-border": "#b8e6fe",
+        "info-text": "#00598a",
+        "warning-surface": "#fefce8",
+        "warning-border": "#ffdf20",
+        "warning-text": "#894b00",
+        "error-surface": "#fef2f2",
+        "error-border": "#ffa2a2",
+        "error-text": "#c10007",
+        "error-control": "#e7000b",
+        "highlight": "#fef3c6",
+        "on-highlight": "#973c00",
+        "nav-item-text": "#364153",
+        "nav-item-hover": "#f9fafb",
+        "table-row-hover": "#f9fafb",
+        "nav-item-active": "#f3f4f6",
+        "skeleton": "#f3f4f6",
+        "skeleton-highlight": "#f9fafb",
+        "prose-text": "#364153",
+        "code-block-bg": "#1e2939",
+        "code-block-text": "#e5e7eb",
+        "primary-solid": "#0069a8",
+        "primary-solid-hover": "#00598a",
+        "on-primary-solid": "#ffffff",
+        "primary-soft": "#dff2fe",
+        "primary-soft-hover": "#b8e6fe",
+        "on-primary-soft": "#00598a",
+        "primary-fg": "#0069a8",
+        "primary-edge": "#0084d1",
+        "accent-solid": "#ffb900",
+        "accent-solid-hover": "#ffd230",
+        "on-accent-solid": "#461901",
+        "accent-soft": "#fef3c6",
+        "accent-soft-hover": "#fee685",
+        "on-accent-soft": "#973c00",
+        "accent-fg": "#bb4d00",
+        "accent-edge": "#e17100",
+        "secondary-solid": "#364153",
+        "secondary-solid-hover": "#1e2939",
+        "on-secondary-solid": "#ffffff",
+        "secondary-soft": "#f3f4f6",
+        "secondary-soft-hover": "#e5e7eb",
+        "on-secondary-soft": "#1e2939",
+        "secondary-fg": "#364153",
+        "secondary-edge": "#6a7282",
+        "warning-solid": "#fdc700",
+        "warning-solid-hover": "#ffdf20",
+        "on-warning-solid": "#432004",
+        "warning-soft": "#fef9c2",
+        "warning-soft-hover": "#fff085",
+        "on-warning-soft": "#894b00",
+        "warning-fg": "#a65f00",
+        "warning-edge": "#a65f00",
+        "error-solid": "#e7000b",
+        "error-solid-hover": "#c10007",
+        "on-error-solid": "#ffffff",
+        "error-soft": "#ffe2e2",
+        "error-soft-hover": "#ffc9c9",
+        "on-error-soft": "#9f0712",
+        "error-fg": "#c10007",
+        "error-edge": "#e7000b",
+        "primary-50": "#f0f9ff",
+        "primary-100": "#dff2fe",
+        "primary-200": "#b8e6fe",
+        "primary-300": "#74d4ff",
+        "primary-400": "#00bcff",
+        "primary-500": "#00a6f4",
+        "primary-600": "#0084d1",
+        "primary-700": "#0069a8",
+        "primary-800": "#00598a",
+        "primary-900": "#024a70",
+        "primary-950": "#052f4a",
+        "accent-50": "#fffbeb",
+        "accent-100": "#fef3c6",
+        "accent-200": "#fee685",
+        "accent-300": "#ffd230",
+        "accent-400": "#ffb900",
+        "accent-500": "#fe9a00",
+        "accent-600": "#e17100",
+        "accent-700": "#bb4d00",
+        "accent-800": "#973c00",
+        "accent-900": "#7b3306",
+        "accent-950": "#461901",
+        "secondary-50": "#f9fafb",
+        "secondary-100": "#f3f4f6",
+        "secondary-200": "#e5e7eb",
+        "secondary-300": "#d1d5dc",
+        "secondary-400": "#99a1af",
+        "secondary-500": "#6a7282",
+        "secondary-600": "#4a5565",
+        "secondary-700": "#364153",
+        "secondary-800": "#1e2939",
+        "secondary-900": "#101828",
+        "secondary-950": "#030712",
+        "warning-50": "#fefce8",
+        "warning-100": "#fef9c2",
+        "warning-200": "#fff085",
+        "warning-300": "#ffdf20",
+        "warning-400": "#fdc700",
+        "warning-500": "#f0b100",
+        "warning-600": "#d08700",
+        "warning-700": "#a65f00",
+        "warning-800": "#894b00",
+        "warning-900": "#733e0a",
+        "warning-950": "#432004",
+        "error-50": "#fef2f2",
+        "error-100": "#ffe2e2",
+        "error-200": "#ffc9c9",
+        "error-300": "#ffa2a2",
+        "error-400": "#ff6467",
+        "error-500": "#fb2c36",
+        "error-600": "#e7000b",
+        "error-700": "#c10007",
+        "error-800": "#9f0712",
+        "error-900": "#82181a",
+        "error-950": "#460809",
+        "white": "#ffffff",
+        "black": "#000000"
+    },
+    "dark": {
+        "page-bg": "#030712",
+        "surface": "#101828",
+        "surface-muted": "#1e2939",
+        "surface-glass": "rgba(3, 7, 18, 0.7)",
+        "surface-glass-tint": "rgba(5, 47, 74, 0.8)",
+        "backdrop": "rgba(0, 0, 0, 0.6)",
+        "tooltip-bg": "#f3f4f6",
+        "tooltip-text": "#000000",
+        "text": "#ffffff",
+        "text-muted": "rgba(255, 255, 255, 0.6)",
+        "text-disabled": "rgba(255, 255, 255, 0.38)",
+        "text-brand": "#74d4ff",
+        "border": "#1e2939",
+        "border-control": "#6a7282",
+        "border-control-hover": "#99a1af",
+        "divider": "rgba(255, 255, 255, 0.1)",
+        "focus-ring": "#00bcff",
+        "action": "#0069a8",
+        "action-hover": "#00598a",
+        "on-action": "#ffffff",
+        "action-subtle": "#052f4a",
+        "action-subtle-hover": "#024a70",
+        "on-action-subtle": "#b8e6fe",
+        "control-checked": "#0084d1",
+        "link": "#ffb900",
+        "link-border": "#973c00",
+        "link-hover-bg": "#461901",
+        "link-hover-border": "#e17100",
+        "danger": "#e7000b",
+        "danger-hover": "#c10007",
+        "info-surface": "#052f4a",
+        "info-border": "#00598a",
+        "info-text": "#b8e6fe",
+        "warning-surface": "#432004",
+        "warning-border": "#894b00",
+        "warning-text": "#fff085",
+        "error-surface": "#460809",
+        "error-border": "#9f0712",
+        "error-text": "#ffa2a2",
+        "error-control": "#ff6467",
+        "highlight": "#461901",
+        "on-highlight": "#fee685",
+        "nav-item-text": "#d1d5dc",
+        "nav-item-hover": "#101828",
+        "table-row-hover": "rgba(30, 41, 57, 0.5)",
+        "nav-item-active": "#1e2939",
+        "skeleton": "#1e2939",
+        "skeleton-highlight": "#364153",
+        "prose-text": "#d1d5dc",
+        "code-block-bg": "#1e2939",
+        "code-block-text": "#d1d5dc",
+        "primary-solid": "#0069a8",
+        "primary-solid-hover": "#00598a",
+        "on-primary-solid": "#ffffff",
+        "primary-soft": "#052f4a",
+        "primary-soft-hover": "#024a70",
+        "on-primary-soft": "#b8e6fe",
+        "primary-fg": "#74d4ff",
+        "primary-edge": "#00bcff",
+        "accent-solid": "#ffb900",
+        "accent-solid-hover": "#ffd230",
+        "on-accent-solid": "#461901",
+        "accent-soft": "#461901",
+        "accent-soft-hover": "#7b3306",
+        "on-accent-soft": "#fee685",
+        "accent-fg": "#ffb900",
+        "accent-edge": "#fe9a00",
+        "secondary-solid": "#e5e7eb",
+        "secondary-solid-hover": "#d1d5dc",
+        "on-secondary-solid": "#030712",
+        "secondary-soft": "#1e2939",
+        "secondary-soft-hover": "#364153",
+        "on-secondary-soft": "#f3f4f6",
+        "secondary-fg": "#d1d5dc",
+        "secondary-edge": "#6a7282",
+        "warning-solid": "#fdc700",
+        "warning-solid-hover": "#ffdf20",
+        "on-warning-solid": "#432004",
+        "warning-soft": "#432004",
+        "warning-soft-hover": "#733e0a",
+        "on-warning-soft": "#fff085",
+        "warning-fg": "#fdc700",
+        "warning-edge": "#f0b100",
+        "error-solid": "#e7000b",
+        "error-solid-hover": "#c10007",
+        "on-error-solid": "#ffffff",
+        "error-soft": "#460809",
+        "error-soft-hover": "#82181a",
+        "on-error-soft": "#ffc9c9",
+        "error-fg": "#ff6467",
+        "error-edge": "#ff6467",
+        "primary-50": "#f0f9ff",
+        "primary-100": "#dff2fe",
+        "primary-200": "#b8e6fe",
+        "primary-300": "#74d4ff",
+        "primary-400": "#00bcff",
+        "primary-500": "#00a6f4",
+        "primary-600": "#0084d1",
+        "primary-700": "#0069a8",
+        "primary-800": "#00598a",
+        "primary-900": "#024a70",
+        "primary-950": "#052f4a",
+        "accent-50": "#fffbeb",
+        "accent-100": "#fef3c6",
+        "accent-200": "#fee685",
+        "accent-300": "#ffd230",
+        "accent-400": "#ffb900",
+        "accent-500": "#fe9a00",
+        "accent-600": "#e17100",
+        "accent-700": "#bb4d00",
+        "accent-800": "#973c00",
+        "accent-900": "#7b3306",
+        "accent-950": "#461901",
+        "secondary-50": "#f9fafb",
+        "secondary-100": "#f3f4f6",
+        "secondary-200": "#e5e7eb",
+        "secondary-300": "#d1d5dc",
+        "secondary-400": "#99a1af",
+        "secondary-500": "#6a7282",
+        "secondary-600": "#4a5565",
+        "secondary-700": "#364153",
+        "secondary-800": "#1e2939",
+        "secondary-900": "#101828",
+        "secondary-950": "#030712",
+        "warning-50": "#fefce8",
+        "warning-100": "#fef9c2",
+        "warning-200": "#fff085",
+        "warning-300": "#ffdf20",
+        "warning-400": "#fdc700",
+        "warning-500": "#f0b100",
+        "warning-600": "#d08700",
+        "warning-700": "#a65f00",
+        "warning-800": "#894b00",
+        "warning-900": "#733e0a",
+        "warning-950": "#432004",
+        "error-50": "#fef2f2",
+        "error-100": "#ffe2e2",
+        "error-200": "#ffc9c9",
+        "error-300": "#ffa2a2",
+        "error-400": "#ff6467",
+        "error-500": "#fb2c36",
+        "error-600": "#e7000b",
+        "error-700": "#c10007",
+        "error-800": "#9f0712",
+        "error-900": "#82181a",
+        "error-950": "#460809",
+        "white": "#ffffff",
+        "black": "#000000"
+    }
+};
+export const blur = {
+    "panel": 24,
+    "float": 40
+};
+export const type = {
+    "display": {
+        "fontSize": 30,
+        "lineHeight": 38,
+        "fontWeight": "700"
+    },
+    "heading-1": {
+        "fontSize": 24,
+        "lineHeight": 32,
+        "fontWeight": "700"
+    },
+    "heading-2": {
+        "fontSize": 20,
+        "lineHeight": 28,
+        "fontWeight": "700"
+    },
+    "heading-3": {
+        "fontSize": 16,
+        "lineHeight": 24,
+        "fontWeight": "700"
+    },
+    "prose": {
+        "fontSize": 16,
+        "lineHeight": 28,
+        "fontWeight": "400"
+    },
+    "body": {
+        "fontSize": 14,
+        "lineHeight": 20,
+        "fontWeight": "400"
+    },
+    "small": {
+        "fontSize": 12,
+        "lineHeight": 16,
+        "fontWeight": "400"
+    },
+    "caption": {
+        "fontSize": 12,
+        "lineHeight": 16,
+        "fontWeight": "700"
+    },
+    "label": {
+        "fontSize": 14,
+        "lineHeight": 20,
+        "fontWeight": "700"
+    },
+    "button": {
+        "fontSize": 14,
+        "lineHeight": 20,
+        "fontWeight": "600"
+    },
+    "button-sm": {
+        "fontSize": 12,
+        "lineHeight": 16,
+        "fontWeight": "600"
+    }
+};
+export const fontStacks = {
+    "sans": "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif",
+    "chill": "\"ChillRoundF\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif"
+};
+export const motion = {
+    "springBezier": [
+        0.47,
+        1.64,
+        0.41,
+        0.8
+    ],
+    "fastMs": 150
+};

package/dist/palette-kit.d.ts

@@ -0,0 +1,35 @@
+export declare const SHADES: readonly ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'];
+export type Shade = (typeof SHADES)[number];
+/** One scale, light to dark: #rrggbb or rgba(r, g, b, a) per shade. */
+export type Scale = Readonly<Record<Shade, string>>;
+/** What a palette swaps. Same shape as a Tailwind theme's two brand scales. */
+export interface Palette {
+    readonly primary: Scale;
+    readonly accent: Scale;
+}
+export type Theme = 'light' | 'dark';
+/** A role's value in one theme: a literal color, or another token (at an alpha). */
+export type RoleValue = string | {
+    readonly ref: string;
+    readonly alpha?: number;
+};
+export interface PaletteKitData<Role extends string> {
+    /** Every role token per theme. */
+    readonly roles: Readonly<Record<Role, Readonly<Record<Theme, RoleValue>>>>;
+    /** The scales a palette doesn't swap (secondary-*, warning-*, error-*), plus white and black. */
+    readonly fixed: Readonly<Record<string, string>>;
+    /** src/contrast-pairs.json: [foreground, background, ground?]; text needs 4.5:1, ui 3:1. */
+    readonly pairs: Readonly<Record<'text' | 'ui', readonly (readonly string[])[]>>;
+}
+export interface ContrastFailure {
+    theme: Theme;
+    kind: 'text' | 'ui';
+    fg: string;
+    bg: string;
+    ratio: number;
+    need: number;
+}
+export declare function createPaletteKit<Role extends string>(data: PaletteKitData<Role>): {
+    createColors: (palette: Palette, theme: Theme) => Record<Role, string>;
+    checkPalette: (palette: Palette) => ContrastFailure[];
+};

package/dist/palette-kit.js

@@ -0,0 +1,96 @@
+// Palettes at runtime, on any platform (no DOM, no React Native). dist/palette.ts binds this to the generated data;
+// import from `@tuuject/koi-tokens/palette`, not from here.
+//
+// A palette swaps the primary-* and accent-* scales. Every role that points at them follows, in both themes.
+// Colors here are hex (#rrggbb) or rgba(): what React Native reads, and what a theme editor usually produces.
+export const SHADES = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'];
+function parse(v) {
+    const s = v.trim();
+    let m = s.match(/^#([0-9a-f]{6})$/i);
+    if (m) {
+        const h = m[1];
+        return { rgb: [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255), a: 1 };
+    }
+    m = s.match(/^rgba?\(\s*([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\s*\)$/);
+    if (m) {
+        return { rgb: [+m[1] / 255, +m[2] / 255, +m[3] / 255], a: m[4] === undefined ? 1 : +m[4] };
+    }
+    throw new Error(`Koi palettes take #rrggbb or rgba() colors, got "${v}"`);
+}
+function format({ rgb, a }) {
+    const b = rgb.map((x) => Math.round(x * 255));
+    if (a >= 1) {
+        return `#${b.map((x) => x.toString(16).padStart(2, '0')).join('')}`;
+    }
+    return `rgba(${b[0]}, ${b[1]}, ${b[2]}, ${+a.toFixed(4)})`;
+}
+const lin = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+const luminance = ([r, g, b]) => 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+const ratio = (a, b) => {
+    const A = luminance(a), B = luminance(b);
+    return (Math.max(A, B) + 0.05) / (Math.min(A, B) + 0.05);
+};
+const over = (fg, bg) => fg.rgb.map((x, i) => fg.a * x + (1 - fg.a) * bg[i]);
+const NEED = { text: 4.5, ui: 3 };
+export function createPaletteKit(data) {
+    const SWAP = /^(primary|accent)-(\d+)$/;
+    function resolve(name, theme, palette, seen) {
+        const swap = name.match(SWAP);
+        if (swap) {
+            return palette[swap[1]][swap[2]];
+        }
+        if (name in data.fixed) {
+            return data.fixed[name];
+        }
+        const role = data.roles[name];
+        if (!role) {
+            throw new Error(`Unknown color token "${name}"`);
+        }
+        if (seen.includes(name)) {
+            throw new Error(`Reference cycle: ${[...seen, name].join(' -> ')}`);
+        }
+        const v = role[theme];
+        if (typeof v === 'string') {
+            return v;
+        }
+        const base = resolve(v.ref, theme, palette, [...seen, name]);
+        if (v.alpha === undefined) {
+            return base;
+        }
+        const c = parse(base);
+        return format({ rgb: c.rgb, a: c.a * v.alpha });
+    }
+    /** Every role token's color for `palette` in `theme` (hex or rgba), ready for StyleSheet or a Tamagui theme. */
+    function createColors(palette, theme) {
+        const out = {};
+        for (const name of Object.keys(data.roles)) {
+            out[name] = resolve(name, theme, palette, []);
+        }
+        return out;
+    }
+    /**
+     * The contrast pairs `palette` fails, in either theme: empty when it's safe to use. Built-in palettes always
+     * pass (`pnpm contrast`); run this on a palette a user made before applying it.
+     */
+    function checkPalette(palette) {
+        const solid = (name, theme, ground) => {
+            const c = parse(resolve(name, theme, palette, []));
+            return c.a >= 1 ? c.rgb : over(c, solid(ground, theme, 'page-bg'));
+        };
+        const failures = [];
+        for (const kind of ['text', 'ui']) {
+            for (const [fg, bg, ground = 'page-bg'] of data.pairs[kind]) {
+                for (const theme of ['light', 'dark']) {
+                    const back = solid(bg, theme, ground);
+                    const c = parse(resolve(fg, theme, palette, []));
+                    const r = ratio(c.a >= 1 ? c.rgb : over(c, back), back);
+                    if (r < NEED[kind]) {
+                        failures.push({ theme, kind, fg, bg, ratio: +r.toFixed(2), need: NEED[kind] });
+                    }
+                }
+            }
+        }
+        return failures;
+    }
+    return { createColors, checkPalette };
+}