@tuuject/koi-tokens 0.0.0-stage → 0.1.0

package/dist/palette.d.ts

@@ -0,0 +1,779 @@
+import { type Palette } from './palette-kit.js';
+export { SHADES } from './palette-kit.js';
+export type { ContrastFailure, Palette, Scale, Shade, Theme } from './palette-kit.js';
+export declare const palettes: {
+    readonly koi: {
+        readonly primary: {
+            readonly "50": "#f0f9ff";
+            readonly "100": "#dff2fe";
+            readonly "200": "#b8e6fe";
+            readonly "300": "#74d4ff";
+            readonly "400": "#00bcff";
+            readonly "500": "#00a6f4";
+            readonly "600": "#0084d1";
+            readonly "700": "#0069a8";
+            readonly "800": "#00598a";
+            readonly "900": "#024a70";
+            readonly "950": "#052f4a";
+        };
+        readonly accent: {
+            readonly "50": "#fffbeb";
+            readonly "100": "#fef3c6";
+            readonly "200": "#fee685";
+            readonly "300": "#ffd230";
+            readonly "400": "#ffb900";
+            readonly "500": "#fe9a00";
+            readonly "600": "#e17100";
+            readonly "700": "#bb4d00";
+            readonly "800": "#973c00";
+            readonly "900": "#7b3306";
+            readonly "950": "#461901";
+        };
+    };
+    readonly rose: {
+        readonly primary: {
+            readonly "50": "#fff1f2";
+            readonly "100": "#ffe4e6";
+            readonly "200": "#fecdd3";
+            readonly "300": "#fda4af";
+            readonly "400": "#fb7185";
+            readonly "500": "#f43f5e";
+            readonly "600": "#e11d48";
+            readonly "700": "#be123c";
+            readonly "800": "#9f1239";
+            readonly "900": "#881337";
+            readonly "950": "#4c0519";
+        };
+        readonly accent: {
+            readonly "50": "#f5f3ff";
+            readonly "100": "#ede9fe";
+            readonly "200": "#ddd6fe";
+            readonly "300": "#c4b5fd";
+            readonly "400": "#a78bfa";
+            readonly "500": "#8b5cf6";
+            readonly "600": "#7c3aed";
+            readonly "700": "#6d28d9";
+            readonly "800": "#5b21b6";
+            readonly "900": "#4c1d95";
+            readonly "950": "#2e1065";
+        };
+    };
+};
+export type PaletteId = keyof typeof palettes;
+export declare const defaultPalette: PaletteId;
+declare const roles: {
+    readonly "page-bg": {
+        readonly light: {
+            readonly ref: "white";
+        };
+        readonly dark: {
+            readonly ref: "secondary-950";
+        };
+    };
+    readonly surface: {
+        readonly light: {
+            readonly ref: "white";
+        };
+        readonly dark: {
+            readonly ref: "secondary-900";
+        };
+    };
+    readonly "surface-muted": {
+        readonly light: {
+            readonly ref: "secondary-100";
+        };
+        readonly dark: {
+            readonly ref: "secondary-800";
+        };
+    };
+    readonly "surface-glass": {
+        readonly light: "rgba(255, 255, 255, 0.8)";
+        readonly dark: {
+            readonly ref: "secondary-950";
+            readonly alpha: 0.7;
+        };
+    };
+    readonly "surface-glass-tint": {
+        readonly light: "rgba(255, 255, 255, 0.8)";
+        readonly dark: {
+            readonly ref: "primary-950";
+            readonly alpha: 0.8;
+        };
+    };
+    readonly backdrop: {
+        readonly light: "rgba(0, 0, 0, 0.4)";
+        readonly dark: "rgba(0, 0, 0, 0.6)";
+    };
+    readonly "tooltip-bg": {
+        readonly light: {
+            readonly ref: "secondary-900";
+        };
+        readonly dark: {
+            readonly ref: "secondary-100";
+        };
+    };
+    readonly "tooltip-text": {
+        readonly light: {
+            readonly ref: "white";
+        };
+        readonly dark: {
+            readonly ref: "black";
+        };
+    };
+    readonly text: {
+        readonly light: {
+            readonly ref: "black";
+        };
+        readonly dark: {
+            readonly ref: "white";
+        };
+    };
+    readonly "text-muted": {
+        readonly light: "rgba(0, 0, 0, 0.6)";
+        readonly dark: "rgba(255, 255, 255, 0.6)";
+    };
+    readonly "text-disabled": {
+        readonly light: "rgba(0, 0, 0, 0.38)";
+        readonly dark: "rgba(255, 255, 255, 0.38)";
+    };
+    readonly "text-brand": {
+        readonly light: {
+            readonly ref: "primary-700";
+        };
+        readonly dark: {
+            readonly ref: "primary-300";
+        };
+    };
+    readonly border: {
+        readonly light: {
+            readonly ref: "secondary-200";
+        };
+        readonly dark: {
+            readonly ref: "secondary-800";
+        };
+    };
+    readonly "border-control": {
+        readonly light: {
+            readonly ref: "secondary-500";
+        };
+        readonly dark: {
+            readonly ref: "secondary-500";
+        };
+    };
+    readonly "border-control-hover": {
+        readonly light: {
+            readonly ref: "secondary-600";
+        };
+        readonly dark: {
+            readonly ref: "secondary-400";
+        };
+    };
+    readonly divider: {
+        readonly light: "rgba(0, 0, 0, 0.1)";
+        readonly dark: "rgba(255, 255, 255, 0.1)";
+    };
+    readonly "focus-ring": {
+        readonly light: {
+            readonly ref: "primary-600";
+        };
+        readonly dark: {
+            readonly ref: "primary-400";
+        };
+    };
+    readonly action: {
+        readonly light: {
+            readonly ref: "primary-700";
+        };
+        readonly dark: {
+            readonly ref: "primary-700";
+        };
+    };
+    readonly "action-hover": {
+        readonly light: {
+            readonly ref: "primary-800";
+        };
+        readonly dark: {
+            readonly ref: "primary-800";
+        };
+    };
+    readonly "on-action": {
+        readonly light: {
+            readonly ref: "white";
+        };
+        readonly dark: {
+            readonly ref: "white";
+        };
+    };
+    readonly "action-subtle": {
+        readonly light: {
+            readonly ref: "primary-100";
+        };
+        readonly dark: {
+            readonly ref: "primary-950";
+        };
+    };
+    readonly "action-subtle-hover": {
+        readonly light: {
+            readonly ref: "primary-200";
+        };
+        readonly dark: {
+            readonly ref: "primary-900";
+        };
+    };
+    readonly "on-action-subtle": {
+        readonly light: {
+            readonly ref: "primary-800";
+        };
+        readonly dark: {
+            readonly ref: "primary-200";
+        };
+    };
+    readonly "control-checked": {
+        readonly light: {
+            readonly ref: "primary-700";
+        };
+        readonly dark: {
+            readonly ref: "primary-600";
+        };
+    };
+    readonly link: {
+        readonly light: {
+            readonly ref: "accent-700";
+        };
+        readonly dark: {
+            readonly ref: "accent-400";
+        };
+    };
+    readonly "link-border": {
+        readonly light: {
+            readonly ref: "accent-300";
+        };
+        readonly dark: {
+            readonly ref: "accent-800";
+        };
+    };
+    readonly "link-hover-bg": {
+        readonly light: {
+            readonly ref: "accent-100";
+        };
+        readonly dark: {
+            readonly ref: "accent-950";
+        };
+    };
+    readonly "link-hover-border": {
+        readonly light: {
+            readonly ref: "accent-500";
+        };
+        readonly dark: {
+            readonly ref: "accent-600";
+        };
+    };
+    readonly danger: {
+        readonly light: {
+            readonly ref: "error-600";
+        };
+        readonly dark: {
+            readonly ref: "error-600";
+        };
+    };
+    readonly "danger-hover": {
+        readonly light: {
+            readonly ref: "error-700";
+        };
+        readonly dark: {
+            readonly ref: "error-700";
+        };
+    };
+    readonly "info-surface": {
+        readonly light: {
+            readonly ref: "primary-50";
+        };
+        readonly dark: {
+            readonly ref: "primary-950";
+        };
+    };
+    readonly "info-border": {
+        readonly light: {
+            readonly ref: "primary-200";
+        };
+        readonly dark: {
+            readonly ref: "primary-800";
+        };
+    };
+    readonly "info-text": {
+        readonly light: {
+            readonly ref: "primary-800";
+        };
+        readonly dark: {
+            readonly ref: "primary-200";
+        };
+    };
+    readonly "warning-surface": {
+        readonly light: {
+            readonly ref: "warning-50";
+        };
+        readonly dark: {
+            readonly ref: "warning-950";
+        };
+    };
+    readonly "warning-border": {
+        readonly light: {
+            readonly ref: "warning-300";
+        };
+        readonly dark: {
+            readonly ref: "warning-800";
+        };
+    };
+    readonly "warning-text": {
+        readonly light: {
+            readonly ref: "warning-800";
+        };
+        readonly dark: {
+            readonly ref: "warning-200";
+        };
+    };
+    readonly "error-surface": {
+        readonly light: {
+            readonly ref: "error-50";
+        };
+        readonly dark: {
+            readonly ref: "error-950";
+        };
+    };
+    readonly "error-border": {
+        readonly light: {
+            readonly ref: "error-300";
+        };
+        readonly dark: {
+            readonly ref: "error-800";
+        };
+    };
+    readonly "error-text": {
+        readonly light: {
+            readonly ref: "error-700";
+        };
+        readonly dark: {
+            readonly ref: "error-300";
+        };
+    };
+    readonly "error-control": {
+        readonly light: {
+            readonly ref: "error-600";
+        };
+        readonly dark: {
+            readonly ref: "error-400";
+        };
+    };
+    readonly highlight: {
+        readonly light: {
+            readonly ref: "accent-100";
+        };
+        readonly dark: {
+            readonly ref: "accent-950";
+        };
+    };
+    readonly "on-highlight": {
+        readonly light: {
+            readonly ref: "accent-800";
+        };
+        readonly dark: {
+            readonly ref: "accent-200";
+        };
+    };
+    readonly "nav-item-text": {
+        readonly light: {
+            readonly ref: "secondary-700";
+        };
+        readonly dark: {
+            readonly ref: "secondary-300";
+        };
+    };
+    readonly "nav-item-hover": {
+        readonly light: {
+            readonly ref: "secondary-50";
+        };
+        readonly dark: {
+            readonly ref: "secondary-900";
+        };
+    };
+    readonly "table-row-hover": {
+        readonly light: {
+            readonly ref: "secondary-50";
+        };
+        readonly dark: {
+            readonly ref: "secondary-800";
+            readonly alpha: 0.5;
+        };
+    };
+    readonly "nav-item-active": {
+        readonly light: {
+            readonly ref: "secondary-100";
+        };
+        readonly dark: {
+            readonly ref: "secondary-800";
+        };
+    };
+    readonly skeleton: {
+        readonly light: {
+            readonly ref: "secondary-100";
+        };
+        readonly dark: {
+            readonly ref: "secondary-800";
+        };
+    };
+    readonly "skeleton-highlight": {
+        readonly light: {
+            readonly ref: "secondary-50";
+        };
+        readonly dark: {
+            readonly ref: "secondary-700";
+        };
+    };
+    readonly "prose-text": {
+        readonly light: {
+            readonly ref: "secondary-700";
+        };
+        readonly dark: {
+            readonly ref: "secondary-300";
+        };
+    };
+    readonly "code-block-bg": {
+        readonly light: {
+            readonly ref: "secondary-800";
+        };
+        readonly dark: {
+            readonly ref: "secondary-800";
+        };
+    };
+    readonly "code-block-text": {
+        readonly light: {
+            readonly ref: "secondary-200";
+        };
+        readonly dark: {
+            readonly ref: "secondary-300";
+        };
+    };
+    readonly "primary-solid": {
+        readonly light: {
+            readonly ref: "action";
+        };
+        readonly dark: {
+            readonly ref: "action";
+        };
+    };
+    readonly "primary-solid-hover": {
+        readonly light: {
+            readonly ref: "action-hover";
+        };
+        readonly dark: {
+            readonly ref: "action-hover";
+        };
+    };
+    readonly "on-primary-solid": {
+        readonly light: {
+            readonly ref: "on-action";
+        };
+        readonly dark: {
+            readonly ref: "on-action";
+        };
+    };
+    readonly "primary-soft": {
+        readonly light: {
+            readonly ref: "action-subtle";
+        };
+        readonly dark: {
+            readonly ref: "action-subtle";
+        };
+    };
+    readonly "primary-soft-hover": {
+        readonly light: {
+            readonly ref: "action-subtle-hover";
+        };
+        readonly dark: {
+            readonly ref: "action-subtle-hover";
+        };
+    };
+    readonly "on-primary-soft": {
+        readonly light: {
+            readonly ref: "on-action-subtle";
+        };
+        readonly dark: {
+            readonly ref: "on-action-subtle";
+        };
+    };
+    readonly "primary-fg": {
+        readonly light: {
+            readonly ref: "text-brand";
+        };
+        readonly dark: {
+            readonly ref: "text-brand";
+        };
+    };
+    readonly "primary-edge": {
+        readonly light: {
+            readonly ref: "primary-600";
+        };
+        readonly dark: {
+            readonly ref: "primary-400";
+        };
+    };
+    readonly "accent-solid": {
+        readonly light: {
+            readonly ref: "accent-400";
+        };
+        readonly dark: {
+            readonly ref: "accent-400";
+        };
+    };
+    readonly "accent-solid-hover": {
+        readonly light: {
+            readonly ref: "accent-300";
+        };
+        readonly dark: {
+            readonly ref: "accent-300";
+        };
+    };
+    readonly "on-accent-solid": {
+        readonly light: {
+            readonly ref: "accent-950";
+        };
+        readonly dark: {
+            readonly ref: "accent-950";
+        };
+    };
+    readonly "accent-soft": {
+        readonly light: {
+            readonly ref: "accent-100";
+        };
+        readonly dark: {
+            readonly ref: "accent-950";
+        };
+    };
+    readonly "accent-soft-hover": {
+        readonly light: {
+            readonly ref: "accent-200";
+        };
+        readonly dark: {
+            readonly ref: "accent-900";
+        };
+    };
+    readonly "on-accent-soft": {
+        readonly light: {
+            readonly ref: "accent-800";
+        };
+        readonly dark: {
+            readonly ref: "accent-200";
+        };
+    };
+    readonly "accent-fg": {
+        readonly light: {
+            readonly ref: "accent-700";
+        };
+        readonly dark: {
+            readonly ref: "accent-400";
+        };
+    };
+    readonly "accent-edge": {
+        readonly light: {
+            readonly ref: "accent-600";
+        };
+        readonly dark: {
+            readonly ref: "accent-500";
+        };
+    };
+    readonly "secondary-solid": {
+        readonly light: {
+            readonly ref: "secondary-700";
+        };
+        readonly dark: {
+            readonly ref: "secondary-200";
+        };
+    };
+    readonly "secondary-solid-hover": {
+        readonly light: {
+            readonly ref: "secondary-800";
+        };
+        readonly dark: {
+            readonly ref: "secondary-300";
+        };
+    };
+    readonly "on-secondary-solid": {
+        readonly light: {
+            readonly ref: "white";
+        };
+        readonly dark: {
+            readonly ref: "secondary-950";
+        };
+    };
+    readonly "secondary-soft": {
+        readonly light: {
+            readonly ref: "secondary-100";
+        };
+        readonly dark: {
+            readonly ref: "secondary-800";
+        };
+    };
+    readonly "secondary-soft-hover": {
+        readonly light: {
+            readonly ref: "secondary-200";
+        };
+        readonly dark: {
+            readonly ref: "secondary-700";
+        };
+    };
+    readonly "on-secondary-soft": {
+        readonly light: {
+            readonly ref: "secondary-800";
+        };
+        readonly dark: {
+            readonly ref: "secondary-100";
+        };
+    };
+    readonly "secondary-fg": {
+        readonly light: {
+            readonly ref: "secondary-700";
+        };
+        readonly dark: {
+            readonly ref: "secondary-300";
+        };
+    };
+    readonly "secondary-edge": {
+        readonly light: {
+            readonly ref: "secondary-500";
+        };
+        readonly dark: {
+            readonly ref: "secondary-500";
+        };
+    };
+    readonly "warning-solid": {
+        readonly light: {
+            readonly ref: "warning-400";
+        };
+        readonly dark: {
+            readonly ref: "warning-400";
+        };
+    };
+    readonly "warning-solid-hover": {
+        readonly light: {
+            readonly ref: "warning-300";
+        };
+        readonly dark: {
+            readonly ref: "warning-300";
+        };
+    };
+    readonly "on-warning-solid": {
+        readonly light: {
+            readonly ref: "warning-950";
+        };
+        readonly dark: {
+            readonly ref: "warning-950";
+        };
+    };
+    readonly "warning-soft": {
+        readonly light: {
+            readonly ref: "warning-100";
+        };
+        readonly dark: {
+            readonly ref: "warning-950";
+        };
+    };
+    readonly "warning-soft-hover": {
+        readonly light: {
+            readonly ref: "warning-200";
+        };
+        readonly dark: {
+            readonly ref: "warning-900";
+        };
+    };
+    readonly "on-warning-soft": {
+        readonly light: {
+            readonly ref: "warning-800";
+        };
+        readonly dark: {
+            readonly ref: "warning-200";
+        };
+    };
+    readonly "warning-fg": {
+        readonly light: {
+            readonly ref: "warning-700";
+        };
+        readonly dark: {
+            readonly ref: "warning-400";
+        };
+    };
+    readonly "warning-edge": {
+        readonly light: {
+            readonly ref: "warning-700";
+        };
+        readonly dark: {
+            readonly ref: "warning-500";
+        };
+    };
+    readonly "error-solid": {
+        readonly light: {
+            readonly ref: "danger";
+        };
+        readonly dark: {
+            readonly ref: "danger";
+        };
+    };
+    readonly "error-solid-hover": {
+        readonly light: {
+            readonly ref: "danger-hover";
+        };
+        readonly dark: {
+            readonly ref: "danger-hover";
+        };
+    };
+    readonly "on-error-solid": {
+        readonly light: {
+            readonly ref: "on-action";
+        };
+        readonly dark: {
+            readonly ref: "on-action";
+        };
+    };
+    readonly "error-soft": {
+        readonly light: {
+            readonly ref: "error-100";
+        };
+        readonly dark: {
+            readonly ref: "error-950";
+        };
+    };
+    readonly "error-soft-hover": {
+        readonly light: {
+            readonly ref: "error-200";
+        };
+        readonly dark: {
+            readonly ref: "error-900";
+        };
+    };
+    readonly "on-error-soft": {
+        readonly light: {
+            readonly ref: "error-800";
+        };
+        readonly dark: {
+            readonly ref: "error-200";
+        };
+    };
+    readonly "error-fg": {
+        readonly light: {
+            readonly ref: "error-700";
+        };
+        readonly dark: {
+            readonly ref: "error-400";
+        };
+    };
+    readonly "error-edge": {
+        readonly light: {
+            readonly ref: "error-600";
+        };
+        readonly dark: {
+            readonly ref: "error-400";
+        };
+    };
+};
+/** A role token: `surface`, `action`, `text-muted`… */
+export type RoleToken = keyof typeof roles;
+export declare const createColors: (palette: Palette, theme: import("./palette-kit.js").Theme) => Record<"accent-edge" | "accent-fg" | "accent-soft" | "accent-soft-hover" | "accent-solid" | "accent-solid-hover" | "action" | "action-hover" | "action-subtle" | "action-subtle-hover" | "backdrop" | "border" | "border-control" | "border-control-hover" | "code-block-bg" | "code-block-text" | "control-checked" | "danger" | "danger-hover" | "divider" | "error-border" | "error-control" | "error-edge" | "error-fg" | "error-soft" | "error-soft-hover" | "error-solid" | "error-solid-hover" | "error-surface" | "error-text" | "focus-ring" | "highlight" | "info-border" | "info-surface" | "info-text" | "link" | "link-border" | "link-hover-bg" | "link-hover-border" | "nav-item-active" | "nav-item-hover" | "nav-item-text" | "on-accent-soft" | "on-accent-solid" | "on-action" | "on-action-subtle" | "on-error-soft" | "on-error-solid" | "on-highlight" | "on-primary-soft" | "on-primary-solid" | "on-secondary-soft" | "on-secondary-solid" | "on-warning-soft" | "on-warning-solid" | "page-bg" | "primary-edge" | "primary-fg" | "primary-soft" | "primary-soft-hover" | "primary-solid" | "primary-solid-hover" | "prose-text" | "secondary-edge" | "secondary-fg" | "secondary-soft" | "secondary-soft-hover" | "secondary-solid" | "secondary-solid-hover" | "skeleton" | "skeleton-highlight" | "surface" | "surface-glass" | "surface-glass-tint" | "surface-muted" | "table-row-hover" | "text" | "text-brand" | "text-disabled" | "text-muted" | "tooltip-bg" | "tooltip-text" | "warning-border" | "warning-edge" | "warning-fg" | "warning-soft" | "warning-soft-hover" | "warning-solid" | "warning-solid-hover" | "warning-surface" | "warning-text", string>, checkPalette: (palette: Palette) => import("./palette-kit.js").ContrastFailure[];