@cube-dev/ui-kit 0.0.0-canary-7c5dc45 → 0.0.0-canary-7d44972

package/dist/tokens/palette.js

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7c5dc45 | Cube Dev Team */
-import { lazyStyles } from "./lazy-styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-7d44972 | Cube Dev Team */
 import { glaze } from "@tenphi/glaze";
 
 //#region src/tokens/palette.ts
@@ -9,7 +8,7 @@ import { glaze } from "@tenphi/glaze";
 * Produces light, dark, and high-contrast color variants from a single
 * source of truth. Every color token is emitted as a tasty state map:
 *
-*   '#surface': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }
+*   '#surface': { '': 'okhsl(...)', '@dark': 'okhsl(...)', '@hc': 'okhsl(...)' }
 *
 * The `@dark` and `@hc` state aliases are wired up globally in
 * `src/components/Root.tsx` (see `setGlobalPredefinedStates`).
@@ -20,12 +19,7 @@ const DANGER_HUE = 23.1;
 const WARNING_HUE = 84.3;
 const NOTE_HUE = 302.3;
 /** Seed saturation; per-color saturation factors below are 0–1 of this seed. */
-const SEED_SATURATION = 100;
-const TEXT_TONE = -98;
-const TEXT_SOFT_TONE = -72;
-const TEXT_SOFT2_TONE = -52;
-const SURFACE_2_TEXT_OFFSET = 2;
-const SURFACE_3_TEXT_OFFSET = 4;
+const SEED_SATURATION = 80;
 glaze.configure({
 	states: {
 		dark: "@dark",
@@ -34,263 +28,259 @@ glaze.configure({
 	modes: {
 		dark: true,
 		highContrast: true
-	},
-	darkTone: [14, 95],
-	darkDesaturation: 0
+	}
 });
-const defaultTheme = glaze(PURPLE_HUE, SEED_SATURATION, { pastel: true });
+const defaultTheme = glaze(PURPLE_HUE, SEED_SATURATION);
 defaultTheme.colors({
 	surface: {
-		tone: 100,
-		saturation: .12
+		lightness: 100,
+		saturation: .11
 	},
 	"surface-2": {
 		base: "surface",
-		tone: "-2",
-		saturation: .1,
+		lightness: "-2",
+		saturation: .15,
 		inherit: false
 	},
 	"surface-3": {
 		base: "surface",
-		tone: "-4",
-		saturation: .1,
+		lightness: "-4",
+		saturation: .19,
 		inherit: false
 	},
 	"surface-4": {
 		base: "surface",
-		tone: "-6",
-		saturation: .1,
+		lightness: "-6",
+		saturation: .2,
 		inherit: false
 	},
 	"surface-text": {
 		base: "surface",
-		tone: `${TEXT_TONE - 2}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"]
+		lightness: 2,
+		saturation: .475
 	},
 	"surface-text-soft": {
 		base: "surface",
-		tone: `${TEXT_SOFT_TONE - 2}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		saturation: .375,
+		contrast: [9, 11],
 		inherit: false
 	},
 	"surface-text-soft-2": {
 		base: "surface",
-		tone: `${TEXT_SOFT2_TONE - 2}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		saturation: .24,
+		contrast: [4.5, 5.5],
 		inherit: false
 	},
 	"surface-2-text": {
 		base: "surface-2",
-		tone: `${TEXT_TONE + SURFACE_2_TEXT_OFFSET}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
+		lightness: 2,
+		saturation: .475,
 		inherit: false
 	},
 	"surface-2-text-soft": {
 		base: "surface-2",
-		tone: `${TEXT_SOFT_TONE + SURFACE_2_TEXT_OFFSET}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		saturation: .375,
+		contrast: [9, 11],
 		inherit: false
 	},
 	"surface-3-text": {
 		base: "surface-3",
-		tone: `${TEXT_TONE + SURFACE_3_TEXT_OFFSET}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
+		lightness: 2,
+		saturation: .475,
 		inherit: false
 	},
 	"surface-3-text-soft": {
 		base: "surface-3",
-		tone: `${TEXT_SOFT_TONE + SURFACE_3_TEXT_OFFSET}`,
-		saturation: .2,
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		saturation: .375,
+		contrast: [9, 11],
 		inherit: false
 	},
 	border: {
 		base: "surface",
-		tone: ["-10", "-20"],
+		lightness: ["-10", "-20"],
 		saturation: .175
 	},
 	placeholder: {
 		base: "surface",
-		tone: "-33",
+		lightness: 67,
 		saturation: .175,
 		inherit: false
 	},
 	focus: {
 		base: "surface",
-		tone: "-29",
+		lightness: 71,
 		saturation: .8625,
 		inherit: false
 	},
 	disabled: {
-		tone: 80.8,
+		lightness: 80.8,
 		saturation: .4,
 		inherit: false
 	},
 	"disabled-surface": {
 		base: "surface",
-		tone: "-3.5",
+		lightness: "-1",
 		saturation: .2,
+		contrast: [1.1, 1.2],
 		inherit: false
 	},
 	"disabled-surface-text": {
 		base: "surface",
-		tone: "-23",
+		lightness: "-1",
 		saturation: .3,
+		contrast: [2, 2.5],
 		inherit: false
 	},
 	"surface-inverse": {
-		tone: 12,
+		lightness: 12,
 		saturation: .475,
 		mode: "fixed",
 		inherit: false
 	},
 	"accent-surface-text": {
-		tone: 100,
+		lightness: 100,
 		mode: "fixed"
 	},
 	"accent-surface": {
 		base: "accent-surface-text",
-		tone: "-49",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [4.5, 7],
 		mode: "fixed"
 	},
 	"accent-surface-2": {
 		base: "accent-surface-text",
-		tone: "-52",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [5, 8],
 		mode: "fixed"
 	},
 	"accent-surface-3": {
 		base: "accent-surface-text",
-		tone: "-55",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [5.5, 9],
 		mode: "fixed"
 	},
 	"accent-surface-hover": {
 		base: "accent-surface-text",
-		tone: "-58",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [6, 10],
 		mode: "fixed"
 	},
 	"accent-surface-border": {
 		base: "accent-surface",
-		tone: "+13",
+		lightness: "+1",
+		contrast: [1.4, 1.8],
 		mode: "fixed"
 	},
-	"accent-selected-fill": {
-		type: "mix",
-		base: "surface",
-		target: "accent-surface",
-		value: 9,
-		space: "srgb"
-	},
 	"accent-text": {
-		base: "accent-selected-fill",
-		tone: "-49",
+		base: "surface",
+		lightness: "-1",
 		saturation: 1,
-		contrast: [6, 11]
+		contrast: [6.4, 10]
 	},
 	"accent-text-soft": {
-		base: "accent-selected-fill",
-		tone: "-49",
+		base: "surface",
+		lightness: "-1",
 		saturation: 1,
-		contrast: ["AA", "AAA"]
+		contrast: [4.5, 7]
 	},
 	"accent-icon": {
 		base: "surface",
-		tone: "-38",
-		saturation: .9375
+		lightness: "-1",
+		saturation: .9375,
+		contrast: [3.2, 5]
 	},
 	"accent-disabled-surface": {
 		base: "surface",
-		tone: "-13",
+		lightness: "-1",
 		saturation: .5,
-		mode: "fixed"
+		contrast: [1.4, 1.5]
 	},
 	"accent-disabled-surface-text": {
 		base: "accent-disabled-surface",
-		tone: "max",
+		lightness: "+1",
 		saturation: .4,
+		contrast: 1.51,
 		mode: "fixed"
 	},
 	"code-comment": {
 		base: "surface",
 		hue: 280,
 		saturation: .1,
-		tone: "-50",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [4.5, 7],
 		inherit: false
 	},
 	"code-punctuation": {
 		base: "surface",
 		hue: 348,
 		saturation: .4,
-		tone: "-50",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [4.5, 7],
 		inherit: false
 	},
 	"code-keyword": {
 		base: "surface",
 		hue: 348,
 		saturation: 1,
-		tone: "-54",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [5, 7.5],
 		inherit: false
 	},
 	"code-string": {
 		base: "surface",
 		hue: PURPLE_HUE,
 		saturation: 1,
-		tone: "-50",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [4.5, 7],
 		inherit: false
 	},
 	"code-number": {
 		base: "surface",
 		hue: 156,
 		saturation: .9,
-		tone: "-50",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [4.5, 7],
 		inherit: false
 	},
 	"code-function": {
 		base: "surface",
 		hue: 348,
 		saturation: 1,
-		tone: "-54",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [5, 7.5],
 		inherit: false
 	},
 	"code-attribute": {
 		base: "surface",
 		hue: 200,
 		saturation: 1,
-		tone: "-50",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [4.5, 7],
 		inherit: false
 	},
 	"loading-face-1": {
 		base: "surface",
-		tone: "-2",
+		lightness: 98,
 		saturation: .3,
+		contrast: [1.04, 1.5],
 		inherit: false
 	},
 	"loading-face-2": {
 		base: "surface",
-		tone: "-9",
+		lightness: 91,
 		saturation: .62,
+		contrast: [1.24, 2.5],
 		inherit: false
 	},
 	"loading-face-3": {
 		base: "surface",
-		tone: "-21",
+		lightness: 79,
 		saturation: .66,
+		contrast: [1.75, 4],
 		inherit: false
 	},
 	"shadow-sm": {
@@ -315,49 +305,29 @@ defaultTheme.colors({
 		inherit: false
 	},
 	overlay: {
-		tone: 10,
+		lightness: 10,
 		opacity: .5,
 		inherit: false
 	}
 });
-const TINTED_SURFACE_SATURATION = .2;
-const TINTED_SURFACE_TONE_OFFSET = 2;
 /**
 * Per-colored-theme overrides on top of `defaultTheme`:
 *   - `surface` — bumped saturation so the banner bg is visibly tinted.
 *   - `border`  — bumped saturation so OUTLINE-variant borders pick up the
 *     theme hue (used by `#<theme>-border` in `item-themes.ts`). Mirrors the
-*     default-theme `border` shape (`base: 'surface'`, tone window) but
+*     default-theme `border` shape (`base: 'surface'`, lightness window) but
 *     with higher saturation. Glaze's `extend({ colors })` redefines each
 *     listed color from scratch, so we restate the full definition here.
 */
 const TINTED_SURFACE_OVERRIDE = {
 	surface: {
-		tone: 100 - TINTED_SURFACE_TONE_OFFSET,
-		saturation: TINTED_SURFACE_SATURATION
+		lightness: 96,
+		saturation: .8
 	},
 	border: {
 		base: "surface",
-		tone: ["-10", "-20"],
+		lightness: ["-10", "-20"],
 		saturation: .5
-	},
-	"surface-text": {
-		base: "surface",
-		tone: `${TEXT_TONE - TINTED_SURFACE_TONE_OFFSET}`,
-		saturation: .25,
-		contrast: ["AA", "AAA"]
-	},
-	"surface-text-soft": {
-		base: "surface",
-		tone: `${TEXT_SOFT_TONE - TINTED_SURFACE_TONE_OFFSET}`,
-		saturation: .25,
-		contrast: ["AA", "AAA"]
-	},
-	"surface-text-soft-2": {
-		base: "surface",
-		tone: `${TEXT_SOFT2_TONE - TINTED_SURFACE_TONE_OFFSET}`,
-		saturation: .25,
-		contrast: ["AA", "AAA"]
 	}
 };
 const primaryTheme = defaultTheme.extend({ colors: TINTED_SURFACE_OVERRIDE });
@@ -402,66 +372,68 @@ const noteTheme = defaultTheme.extend({
 *     pressed/focused border on the brand-purple primary fill. Matches the
 *     legacy `#fixed-primary-text` alias (= `#primary-accent-surface-hover`).
 *   - `accent-disabled-surface` / `accent-disabled-surface-text` —
-*     brand-tinted disabled chip + label, positioned with relative tone
-*     deltas against the fixed dark `surface` so the disabled state is
-*     scheme-symmetric.
+*     brand-tinted disabled chip + label, contrast-driven against the fixed
+*     dark `surface` so the disabled state is scheme-symmetric.
 */
-const specialTheme = glaze(PURPLE_HUE, SEED_SATURATION, { pastel: true });
+const specialTheme = glaze(PURPLE_HUE, SEED_SATURATION);
 specialTheme.colors({
 	surface: {
-		tone: 12,
+		lightness: 12,
 		saturation: .475,
 		mode: "fixed"
 	},
 	"accent-surface-text": {
-		tone: 100,
+		lightness: 100,
 		mode: "fixed"
 	},
 	"accent-surface": {
 		base: "accent-surface-text",
-		tone: "-49",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [4.5, 7],
 		mode: "fixed"
 	},
 	"accent-surface-2": {
 		base: "accent-surface-text",
-		tone: "-52",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [5, 8],
 		mode: "fixed"
 	},
 	"accent-surface-3": {
 		base: "accent-surface-text",
-		tone: "-55",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [5.5, 9],
 		mode: "fixed"
 	},
 	"accent-surface-border": {
 		base: "accent-surface",
-		tone: "+13",
+		lightness: "+1",
+		contrast: [1.4, 1.8],
 		mode: "fixed"
 	},
 	"accent-surface-hover": {
 		base: "accent-surface-text",
-		tone: "-58",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [6, 8.5],
 		mode: "fixed"
 	},
 	"accent-text": {
 		base: "accent-surface-text",
-		tone: "-58",
-		contrast: ["AA", "AAA"],
+		lightness: "-1",
+		contrast: [6, 8.5],
 		mode: "fixed"
 	},
 	"accent-disabled-surface": {
 		base: "surface",
-		tone: "+4",
+		lightness: "+1",
 		saturation: .5,
+		contrast: [1.4, 1.5],
 		mode: "fixed"
 	},
 	"accent-disabled-surface-text": {
 		base: "accent-disabled-surface",
-		tone: "+18",
+		lightness: "+1",
 		saturation: .4,
+		contrast: 1.51,
 		mode: "fixed"
 	}
 });
@@ -486,40 +458,25 @@ const palette = glaze.palette({
 	special: specialTheme
 });
 /**
-* Resolve Glaze palette tokens against the **live** `glaze` global config.
-*
-* Memoized on first call so subsequent reads are free. Resolution is deferred
-* (not done at module import) so host apps can call `glaze.configure(...)`
-* after importing `@cube-dev/ui-kit` and still affect these tokens — as long as
-* configure runs before the first `getPaletteTokens()` / `<Root>` paint.
+* All Glaze-generated color tokens as a tasty `Styles` map.
 *
 * Keys use `#name` syntax; values are state maps:
-*   '#surface': { '': 'oklch(...)', '@dark': 'oklch(...)', '@hc': 'oklch(...)' }
-*/
-let paletteTokensCache = null;
-function getPaletteTokens() {
-	if (!paletteTokensCache) paletteTokensCache = palette.tasty({
-		prefix: {
-			default: "",
-			primary: "primary-",
-			purple: "purple-",
-			success: "success-",
-			danger: "danger-",
-			warning: "warning-",
-			note: "note-",
-			special: "special-"
-		},
-		format: "oklch"
-	});
-	return paletteTokensCache;
-}
-/**
-* Lazy proxy of {@link getPaletteTokens}. Prefer `getPaletteTokens()` in new
-* code. First property / enumeration access resolves against the live glaze
-* config (same memo as the getter).
+*   '#surface': { '': 'okhsl(...)', '@dark': 'okhsl(...)', '@hc': 'okhsl(...)' }
+*
+* Spread into `useGlobalStyles('body', tokens)` (already wired through
+* `src/components/GlobalStyles.tsx`).
 */
-const PALETTE_TOKENS = lazyStyles(getPaletteTokens);
+const PALETTE_TOKENS = palette.tasty({ prefix: {
+	default: "",
+	primary: "primary-",
+	purple: "purple-",
+	success: "success-",
+	danger: "danger-",
+	warning: "warning-",
+	note: "note-",
+	special: "special-"
+} });
 
 //#endregion
-export { PALETTE_TOKENS, getPaletteTokens };
+export { PALETTE_TOKENS };
 //# sourceMappingURL=palette.js.map