@tenphi/glaze 0.2.0 → 0.4.0

package/dist/index.d.mts

@@ -145,6 +145,12 @@ interface GlazeColorToken {
   resolve(): ResolvedColor;
   /** Export as a flat token map (no color name key). */
   token(options?: GlazeTokenOptions): Record<string, string>;
+  /**
+   * Export as a tasty style-to-state binding (no color name key).
+   * Uses `#name` keys and state aliases (`''`, `@dark`, etc.).
+   * @see https://cube-ui-kit.vercel.app/?path=/docs/tasty-documentation--docs
+   */
+  tasty(options?: GlazeTokenOptions): Record<string, string>;
   /** Export as a flat JSON map (no color name key). */
   json(options?: GlazeJsonOptions): Record<string, string>;
 }
@@ -173,10 +179,26 @@ interface GlazeTheme {
   extend(options: GlazeExtendOptions): GlazeTheme;
   /** Resolve all colors and return the result map. */
   resolve(): Map<string, ResolvedColor>;
-  /** Export as token map. */
-  tokens(options?: GlazeTokenOptions): Record<string, Record<string, string>>;
+  /**
+   * Export as a flat token map grouped by scheme variant.
+   *
+   * ```ts
+   * theme.tokens()
+   * // → { light: { surface: 'okhsl(...)' }, dark: { surface: 'okhsl(...)' } }
+   * ```
+   */
+  tokens(options?: GlazeJsonOptions): Record<string, Record<string, string>>;
+  /**
+   * Export as tasty style-to-state bindings.
+   * Uses `#name` color token keys and state aliases (`''`, `@dark`, etc.).
+   * Spread into component styles or register as a recipe via `configure({ recipes })`.
+   * @see https://cube-ui-kit.vercel.app/?path=/docs/tasty-documentation--docs
+   */
+  tasty(options?: GlazeTokenOptions): Record<string, Record<string, string>>;
   /** Export as plain JSON. */
   json(options?: GlazeJsonOptions): Record<string, Record<string, string>>;
+  /** Export as CSS custom property declarations. */
+  css(options?: GlazeCssOptions): GlazeCssResult;
 }
 interface GlazeExtendOptions {
   hue?: number;
@@ -202,13 +224,46 @@ interface GlazeJsonOptions {
   /** Output color format. Default: 'okhsl'. */
   format?: GlazeColorFormat;
 }
+interface GlazeCssOptions {
+  /** Output color format. Default: 'rgb'. */
+  format?: GlazeColorFormat;
+  /** Suffix appended to each CSS custom property name. Default: '-color'. */
+  suffix?: string;
+}
+/** CSS custom property declarations grouped by scheme variant. */
+interface GlazeCssResult {
+  light: string;
+  dark: string;
+  lightContrast: string;
+  darkContrast: string;
+}
 interface GlazePalette {
-  /** Export all themes as a combined token map. */
-  tokens(options?: GlazeTokenOptions): Record<string, Record<string, string>>;
+  /**
+   * Export all themes as a flat token map grouped by scheme variant.
+   *
+   * ```ts
+   * palette.tokens({ prefix: true })
+   * // → { light: { 'primary-surface': 'okhsl(...)' }, dark: { 'primary-surface': 'okhsl(...)' } }
+   * ```
+   */
+  tokens(options?: GlazeJsonOptions & {
+    prefix?: boolean | Record<string, string>;
+  }): Record<string, Record<string, string>>;
+  /**
+   * Export all themes as tasty style-to-state bindings.
+   * Uses `#name` color token keys and state aliases (`''`, `@dark`, etc.).
+   * Spread into component styles or register as a recipe via `configure({ recipes })`.
+   * @see https://cube-ui-kit.vercel.app/?path=/docs/tasty-documentation--docs
+   */
+  tasty(options?: GlazeTokenOptions): Record<string, Record<string, string>>;
   /** Export all themes as plain JSON. */
   json(options?: GlazeJsonOptions & {
     prefix?: boolean | Record<string, string>;
   }): Record<string, Record<string, Record<string, string>>>;
+  /** Export all themes as CSS custom property declarations. */
+  css(options?: GlazeCssOptions & {
+    prefix?: boolean | Record<string, string>;
+  }): GlazeCssResult;
 }
 //#endregion
 //#region src/glaze.d.ts
@@ -230,10 +285,16 @@ declare function glaze(hueOrOptions: number | {
 declare namespace glaze {
   var configure: (config: GlazeConfig) => void;
   var palette: (themes: PaletteInput) => {
-    tokens(options?: GlazeTokenOptions): Record<string, Record<string, string>>;
+    tokens(options?: GlazeJsonOptions & {
+      prefix?: boolean | Record<string, string>;
+    }): Record<string, Record<string, string>>;
+    tasty(options?: GlazeTokenOptions): Record<string, Record<string, string>>;
     json(options?: GlazeJsonOptions & {
       prefix?: boolean | Record<string, string>;
     }): Record<string, Record<string, Record<string, string>>>;
+    css(options?: GlazeCssOptions & {
+      prefix?: boolean | Record<string, string>;
+    }): GlazeCssResult;
   };
   var from: (data: GlazeThemeExport) => GlazeTheme;
   var color: (input: GlazeColorInput) => GlazeColorToken;
@@ -304,5 +365,5 @@ declare function formatHsl(h: number, s: number, l: number): string;
  */
 declare function formatOklch(h: number, s: number, l: number): string;
 //#endregion
-export { type AdaptationMode, type ColorDef, type ColorMap, type ContrastPreset, type FindLightnessForContrastOptions, type FindLightnessForContrastResult, type GlazeColorFormat, type GlazeColorInput, type GlazeColorToken, type GlazeConfig, type GlazeExtendOptions, type GlazeJsonOptions, type GlazeOutputModes, type GlazePalette, type GlazeTheme, type GlazeThemeExport, type GlazeTokenOptions, type HCPair, type MinContrast, type RelativeValue, type ResolvedColor, type ResolvedColorVariant, contrastRatioFromLuminance, findLightnessForContrast, formatHsl, formatOkhsl, formatOklch, formatRgb, glaze, okhslToLinearSrgb, okhslToOklab, okhslToSrgb, parseHex, relativeLuminanceFromLinearRgb, resolveMinContrast, srgbToOkhsl };
+export { type AdaptationMode, type ColorDef, type ColorMap, type ContrastPreset, type FindLightnessForContrastOptions, type FindLightnessForContrastResult, type GlazeColorFormat, type GlazeColorInput, type GlazeColorToken, type GlazeConfig, type GlazeCssOptions, type GlazeCssResult, type GlazeExtendOptions, type GlazeJsonOptions, type GlazeOutputModes, type GlazePalette, type GlazeTheme, type GlazeThemeExport, type GlazeTokenOptions, type HCPair, type MinContrast, type RelativeValue, type ResolvedColor, type ResolvedColorVariant, contrastRatioFromLuminance, findLightnessForContrast, formatHsl, formatOkhsl, formatOklch, formatRgb, glaze, okhslToLinearSrgb, okhslToOklab, okhslToSrgb, parseHex, relativeLuminanceFromLinearRgb, resolveMinContrast, srgbToOkhsl };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -996,6 +996,20 @@ function buildTokenMap(resolved, prefix, states, modes, format = "okhsl") {
 	}
 	return tokens;
 }
+function buildFlatTokenMap(resolved, prefix, modes, format = "okhsl") {
+	const result = { light: {} };
+	if (modes.dark) result.dark = {};
+	if (modes.highContrast) result.lightContrast = {};
+	if (modes.dark && modes.highContrast) result.darkContrast = {};
+	for (const [name, color] of resolved) {
+		const key = `${prefix}${name}`;
+		result.light[key] = formatVariant(color.light, format);
+		if (modes.dark) result.dark[key] = formatVariant(color.dark, format);
+		if (modes.highContrast) result.lightContrast[key] = formatVariant(color.lightContrast, format);
+		if (modes.dark && modes.highContrast) result.darkContrast[key] = formatVariant(color.darkContrast, format);
+	}
+	return result;
+}
 function buildJsonMap(resolved, modes, format = "okhsl") {
 	const result = {};
 	for (const [name, color] of resolved) {
@@ -1007,6 +1021,27 @@ function buildJsonMap(resolved, modes, format = "okhsl") {
 	}
 	return result;
 }
+function buildCssMap(resolved, prefix, suffix, format) {
+	const lines = {
+		light: [],
+		dark: [],
+		lightContrast: [],
+		darkContrast: []
+	};
+	for (const [name, color] of resolved) {
+		const prop = `--${prefix}${name}${suffix}`;
+		lines.light.push(`${prop}: ${formatVariant(color.light, format)};`);
+		lines.dark.push(`${prop}: ${formatVariant(color.dark, format)};`);
+		lines.lightContrast.push(`${prop}: ${formatVariant(color.lightContrast, format)};`);
+		lines.darkContrast.push(`${prop}: ${formatVariant(color.darkContrast, format)};`);
+	}
+	return {
+		light: lines.light.join("\n"),
+		dark: lines.dark.join("\n"),
+		lightContrast: lines.lightContrast.join("\n"),
+		darkContrast: lines.darkContrast.join("\n")
+	};
+}
 function createTheme(hue, saturation, initialColors) {
 	let colorDefs = initialColors ? { ...initialColors } : {};
 	return {
@@ -1056,6 +1091,9 @@ function createTheme(hue, saturation, initialColors) {
 			return resolveAllColors(hue, saturation, colorDefs);
 		},
 		tokens(options) {
+			return buildFlatTokenMap(resolveAllColors(hue, saturation, colorDefs), "", resolveModes(options?.modes), options?.format);
+		},
+		tasty(options) {
 			return buildTokenMap(resolveAllColors(hue, saturation, colorDefs), "", {
 				dark: options?.states?.dark ?? globalConfig.states.dark,
 				highContrast: options?.states?.highContrast ?? globalConfig.states.highContrast
@@ -1063,12 +1101,32 @@ function createTheme(hue, saturation, initialColors) {
 		},
 		json(options) {
 			return buildJsonMap(resolveAllColors(hue, saturation, colorDefs), resolveModes(options?.modes), options?.format);
+		},
+		css(options) {
+			return buildCssMap(resolveAllColors(hue, saturation, colorDefs), "", options?.suffix ?? "-color", options?.format ?? "rgb");
 		}
 	};
 }
+function resolvePrefix(options, themeName) {
+	if (options?.prefix === true) return `${themeName}-`;
+	if (typeof options?.prefix === "object" && options.prefix !== null) return options.prefix[themeName] ?? `${themeName}-`;
+	return "";
+}
 function createPalette(themes) {
 	return {
 		tokens(options) {
+			const modes = resolveModes(options?.modes);
+			const allTokens = {};
+			for (const [themeName, theme] of Object.entries(themes)) {
+				const tokens = buildFlatTokenMap(theme.resolve(), resolvePrefix(options, themeName), modes, options?.format);
+				for (const variant of Object.keys(tokens)) {
+					if (!allTokens[variant]) allTokens[variant] = {};
+					Object.assign(allTokens[variant], tokens[variant]);
+				}
+			}
+			return allTokens;
+		},
+		tasty(options) {
 			const states = {
 				dark: options?.states?.dark ?? globalConfig.states.dark,
 				highContrast: options?.states?.highContrast ?? globalConfig.states.highContrast
@@ -1076,11 +1134,7 @@ function createPalette(themes) {
 			const modes = resolveModes(options?.modes);
 			const allTokens = {};
 			for (const [themeName, theme] of Object.entries(themes)) {
-				const resolved = theme.resolve();
-				let prefix = "";
-				if (options?.prefix === true) prefix = `${themeName}-`;
-				else if (typeof options?.prefix === "object" && options.prefix !== null) prefix = options.prefix[themeName] ?? `${themeName}-`;
-				const tokens = buildTokenMap(resolved, prefix, states, modes, options?.format);
+				const tokens = buildTokenMap(theme.resolve(), resolvePrefix(options, themeName), states, modes, options?.format);
 				Object.assign(allTokens, tokens);
 			}
 			return allTokens;
@@ -1090,6 +1144,31 @@ function createPalette(themes) {
 			const result = {};
 			for (const [themeName, theme] of Object.entries(themes)) result[themeName] = buildJsonMap(theme.resolve(), modes, options?.format);
 			return result;
+		},
+		css(options) {
+			const suffix = options?.suffix ?? "-color";
+			const format = options?.format ?? "rgb";
+			const allLines = {
+				light: [],
+				dark: [],
+				lightContrast: [],
+				darkContrast: []
+			};
+			for (const [themeName, theme] of Object.entries(themes)) {
+				const css = buildCssMap(theme.resolve(), resolvePrefix(options, themeName), suffix, format);
+				for (const key of [
+					"light",
+					"dark",
+					"lightContrast",
+					"darkContrast"
+				]) if (css[key]) allLines[key].push(css[key]);
+			}
+			return {
+				light: allLines.light.join("\n"),
+				dark: allLines.dark.join("\n"),
+				lightContrast: allLines.lightContrast.join("\n"),
+				darkContrast: allLines.darkContrast.join("\n")
+			};
 		}
 	};
 }
@@ -1109,6 +1188,12 @@ function createColorToken(input) {
 				highContrast: options?.states?.highContrast ?? globalConfig.states.highContrast
 			}, resolveModes(options?.modes), options?.format)["#__color__"];
 		},
+		tasty(options) {
+			return buildTokenMap(resolveAllColors(input.hue, input.saturation, defs), "", {
+				dark: options?.states?.dark ?? globalConfig.states.dark,
+				highContrast: options?.states?.highContrast ?? globalConfig.states.highContrast
+			}, resolveModes(options?.modes), options?.format)["#__color__"];
+		},
 		json(options) {
 			return buildJsonMap(resolveAllColors(input.hue, input.saturation, defs), resolveModes(options?.modes), options?.format)["__color__"];
 		}