@a-type/ui 5.0.22 → 6.0.0

package/src/uno/logic/color.ts

@@ -1,379 +0,0 @@
-import { PROPS } from './properties.js';
-
-export function lighten(base: string, level: string) {
-	return mod(base, level, 1);
-}
-
-export function darken(base: string, level: string) {
-	return mod(base, level, -1);
-}
-
-function mod(base: string, level: string, sign: number) {
-	return (
-		`oklch(from ` +
-		base +
-		` calc(l * (1 + ${level} / 30 * ${sign} * var(${PROPS.MODE.MULT}, 1)))` +
-		` calc(c * (1 - (${level} * 0.1 * ${sign} * (1 + (1 - var(${PROPS.USER.SATURATION}, 0))))))` +
-		` h)`
-	);
-}
-
-/**
- * Values to inject for contextual color variables.
- */
-export interface ColorEvaluationContext {
-	mode: {
-		lNeutral: string;
-		lRangeUp: string;
-		lRangeDown: string;
-		sNeutral: string;
-		sRangeUp: string;
-		sRangeDown: string;
-		mult: string;
-	};
-	sourceHue: string;
-	globalSaturation: string;
-	localLightnessSpread: string;
-	localSaturation: string;
-}
-
-export function livePropertyColorContext(
-	sourceHue: string,
-): ColorEvaluationContext {
-	return {
-		mode: {
-			lNeutral: `var(${PROPS.MODE.L_NEUTRAL})`,
-			lRangeUp: `var(${PROPS.MODE.L_RANGE_UP})`,
-			lRangeDown: `var(${PROPS.MODE.L_RANGE_DOWN})`,
-			sNeutral: `var(${PROPS.MODE.S_NEUTRAL})`,
-			sRangeUp: `var(${PROPS.MODE.S_RANGE_UP})`,
-			sRangeDown: `var(${PROPS.MODE.S_RANGE_DOWN})`,
-			mult: `var(${PROPS.MODE.MULT}, 1)`,
-		},
-		sourceHue,
-		globalSaturation: `var(${PROPS.USER.SATURATION}, 1)`,
-		localLightnessSpread: `var(${PROPS.PALETTE.LIGHTNESS_SPREAD}, 1)`,
-		localSaturation: `var(${PROPS.PALETTE.SATURATION}, 1)`,
-	};
-}
-
-// helpers to avoid having to hardcode the synchronized variables
-function stripVar(property: string) {
-	return property.replace(/var\((--[a-zA-Z0-9-_]+)(,[^)]+)?\)/g, '$1').trim();
-}
-function getFallback(property: string) {
-	const match = property.match(/var\(--[a-zA-Z0-9-_]+,([^)]+)\)/);
-	if (match) {
-		return match[1].trim();
-	}
-	return null;
-}
-function evaluatePropertiesRecursively(
-	computed: CSSStyleDeclaration,
-	context: ColorEvaluationContext,
-	result: any = {},
-) {
-	for (const key in context) {
-		const value = context[key as keyof ColorEvaluationContext];
-		if (typeof value === 'string') {
-			if (value.startsWith('var(')) {
-				const varName = stripVar(value);
-				const evaluatedVar = computed.getPropertyValue(varName).trim();
-				if (evaluatedVar) {
-					result[key as keyof ColorEvaluationContext] = evaluatedVar;
-				} else {
-					const fallback = getFallback(value);
-					if (fallback !== null) {
-						result[key as keyof ColorEvaluationContext] = fallback;
-					} else {
-						throw new Error(
-							`CSS variable ${varName} is not defined and no fallback is provided.`,
-						);
-					}
-				}
-			}
-		} else {
-			result[key as keyof ColorEvaluationContext] =
-				evaluatePropertiesRecursively(computed, value as any, {} as any) as any;
-		}
-	}
-	return result;
-}
-
-/**
- * "Snapshots" a color context as real values from the given scope element.
- * Defaults to body.
- */
-export function snapshotColorContext(
-	palette: string,
-	mode?: 'light' | 'dark',
-): ColorEvaluationContext {
-	const scopeElement = document.createElement('div');
-	scopeElement.classList.add(`palette-${palette}`);
-	if (mode) {
-		scopeElement.classList.add(`override-${mode}`);
-	}
-	scopeElement.style.position = 'absolute';
-	scopeElement.style.visibility = 'hidden';
-	document.body.appendChild(scopeElement);
-	const styles = getComputedStyle(scopeElement);
-	const evaluated = evaluatePropertiesRecursively(
-		styles,
-		livePropertyColorContext(`var(${PROPS.PALETTE.MAIN_HUE})`),
-	) as ColorEvaluationContext;
-	document.body.removeChild(scopeElement);
-	return evaluated;
-}
-
-export interface OklchColorEquation {
-	l: ColorEquation;
-	c: ColorEquation;
-	h: ColorEquation;
-
-	/**
-	 * Prints the CSS value of the color equation, including all
-	 * calculations and variable references.
-	 */
-	print(context: ColorEvaluationContext): string;
-	/**
-	 * Uses the equation and provided context to compute a static
-	 * OKLCH color string with calculations and references resolved.
-	 */
-	computeOklch(context: ColorEvaluationContext): string;
-	/**
-	 * Returns the raw computed L, C, H values as numbers with units.
-	 */
-	raw(ctx: ColorEvaluationContext): {
-		l: ComputationResult;
-		c: ComputationResult;
-		h: ComputationResult;
-	};
-}
-export type ColorEquation = OperationTree;
-type ColorContextEvaluation = (ctx: ColorEvaluationContext) => string;
-type OperationTree =
-	| AddOperation
-	| SubtractOperation
-	| MultiplyOperation
-	| LiteralOperation
-	| ClampOperation;
-interface AddOperation {
-	type: 'add';
-	values: ColorEquation[];
-}
-interface SubtractOperation {
-	type: 'subtract';
-	values: ColorEquation[];
-}
-interface MultiplyOperation {
-	type: 'multiply';
-	values: ColorEquation[];
-}
-interface LiteralOperation {
-	type: 'literal';
-	value: ColorContextEvaluation;
-}
-interface ClampOperation {
-	type: 'clamp';
-	values: ColorEquation[];
-}
-const colorEquationTools = {
-	literal: (value: ColorContextEvaluation): LiteralOperation => {
-		return { type: 'literal', value };
-	},
-	add: (...values: ColorEquation[]): AddOperation => {
-		return { type: 'add', values };
-	},
-	subtract: (...values: ColorEquation[]): SubtractOperation => {
-		return { type: 'subtract', values };
-	},
-	multiply: (...values: ColorEquation[]): MultiplyOperation => {
-		return { type: 'multiply', values };
-	},
-	clamp: (
-		equation: ColorEquation,
-		min: ColorEquation,
-		max: ColorEquation,
-	): ColorEquation => {
-		return { type: 'clamp', values: [min, equation, max] };
-	},
-};
-
-function printEquation(
-	equation: ColorEquation,
-	context: ColorEvaluationContext,
-): string {
-	switch (equation.type) {
-		case 'literal':
-			return equation.value(context);
-		case 'add':
-			return `(${equation.values
-				.map((v) => printEquation(v, context))
-				.join(' + ')})`;
-		case 'subtract':
-			return `(${equation.values
-				.map((v) => printEquation(v, context))
-				.join(' - ')})`;
-		case 'multiply':
-			return `(${equation.values
-				.map((v) => printEquation(v, context))
-				.join(' * ')})`;
-		case 'clamp':
-			if (equation.values.length !== 3) {
-				throw new Error(
-					'Clamp operation requires exactly 3 values: min, value, max',
-				);
-			}
-			return `clamp(${equation.values
-				.map((v) => printEquation(v, context))
-				.join(', ')})`;
-	}
-}
-
-interface ComputationResult {
-	value: number;
-	unit: '%' | '';
-}
-
-function add(a: ComputationResult, b: ComputationResult): ComputationResult {
-	if (a.unit !== b.unit) {
-		throw new Error('Cannot add values with different units');
-	}
-	return { value: a.value + b.value, unit: a.unit };
-}
-
-function subtract(
-	a: ComputationResult,
-	b: ComputationResult,
-): ComputationResult {
-	if (a.unit !== b.unit) {
-		throw new Error('Cannot subtract values with different units');
-	}
-	return { value: a.value - b.value, unit: a.unit };
-}
-
-function multiply(
-	a: ComputationResult,
-	b: ComputationResult,
-): ComputationResult {
-	if (a.unit === '%' && b.unit === '%') {
-		return { value: (a.value * b.value) / 100, unit: '%' };
-	}
-	const unit = a.unit === '%' || b.unit === '%' ? '%' : '';
-	return { value: a.value * b.value, unit };
-}
-
-function clamp(
-	value: ComputationResult,
-	min: ComputationResult,
-	max: ComputationResult,
-): ComputationResult {
-	if (value.unit !== min.unit || value.unit !== max.unit) {
-		throw new Error('Cannot clamp values with different units');
-	}
-	return {
-		value: Math.min(Math.max(value.value, min.value), max.value),
-		unit: value.unit,
-	};
-}
-
-function printComputationResult(result: ComputationResult): string {
-	return result.unit === '%' ? `${result.value}%` : `${result.value}`;
-}
-
-function evaluateLiteral(literal: string): ComputationResult {
-	if (literal.endsWith('%')) {
-		const asNumber = Number(literal.slice(0, -1));
-		if (isNaN(asNumber)) {
-			throw new Error(`Literal value did not evaluate to a number: ${literal}`);
-		}
-		return { value: asNumber, unit: '%' };
-	} else {
-		const asNumber = Number(literal);
-		if (isNaN(asNumber)) {
-			throw new Error(`Literal value did not evaluate to a number: ${literal}`);
-		}
-		return { value: asNumber, unit: '' };
-	}
-}
-
-function computeEquation(
-	equation: ColorEquation,
-	context: ColorEvaluationContext,
-): ComputationResult {
-	switch (equation.type) {
-		case 'literal':
-			return evaluateLiteral(equation.value(context));
-		case 'add':
-			return equation.values.reduce<ComputationResult>(
-				(sum, v) => add(sum, computeEquation(v, context)),
-				{ value: 0, unit: '%' },
-			);
-		case 'subtract':
-			if (equation.values.length === 0) {
-				return { value: 0, unit: '%' };
-			}
-			const first = computeEquation(equation.values[0], context);
-			return equation.values
-				.slice(1)
-				.reduce(
-					(difference, v) => subtract(difference, computeEquation(v, context)),
-					first,
-				);
-		case 'multiply':
-			return equation.values.reduce<ComputationResult>(
-				(product, v) => multiply(product, computeEquation(v, context)),
-				{ value: 1, unit: '' },
-			);
-		case 'clamp':
-			if (equation.values.length !== 3) {
-				throw new Error(
-					'Clamp operation requires exactly 3 values: min, value, max',
-				);
-			}
-			const min = computeEquation(equation.values[0], context);
-			const value = computeEquation(equation.values[1], context);
-			const max = computeEquation(equation.values[2], context);
-			return clamp(value, min, max);
-		default:
-			throw new Error(`Unknown equation type: ${(equation as any).type}`);
-	}
-}
-
-export function oklchBuilder(
-	impl: (tools: typeof colorEquationTools) => {
-		l: ColorEquation;
-		c: ColorEquation;
-		h: ColorEquation;
-	},
-): OklchColorEquation {
-	const equations = impl(colorEquationTools);
-
-	return {
-		...equations,
-		print(context: ColorEvaluationContext): string {
-			const l = printEquation(equations.l, context);
-			const c = printEquation(equations.c, context);
-			const h = printEquation(equations.h, context);
-			return `oklch(calc(${l}) calc(${c}) calc(${h}))`;
-		},
-		computeOklch(context: ColorEvaluationContext): string {
-			const l = computeEquation(equations.l, context);
-			const c = computeEquation(equations.c, context);
-			const h = computeEquation(equations.h, context);
-			return `oklch(${printComputationResult(l)} ${printComputationResult(
-				c,
-			)} ${printComputationResult(h)})`;
-		},
-		raw(context: ColorEvaluationContext): {
-			l: ComputationResult;
-			c: ComputationResult;
-			h: ComputationResult;
-		} {
-			const l = computeEquation(equations.l, context);
-			const c = computeEquation(equations.c, context);
-			const h = computeEquation(equations.h, context);
-			return { l, c, h };
-		},
-	};
-}

package/src/uno/logic/palettes.ts

@@ -1,293 +0,0 @@
-import {
-	livePropertyColorContext,
-	oklchBuilder,
-	OklchColorEquation,
-} from './color.js';
-import { PROPS } from './properties.js';
-
-export const paletteHues = {
-	primary: `var(${PROPS.USER.COLOR.PRIMARY_HUE},91.8)`,
-	accent: `var(${PROPS.USER.COLOR.ACCENT_HUE},160.88)`,
-	main: `var(${PROPS.PALETTE.MAIN_HUE},var(${PROPS.USER.COLOR.PRIMARY_HUE},91.8))`,
-
-	attention: `var(${PROPS.PALETTE.NAMED_HUE('attention')},30)`,
-	success: `var(${PROPS.PALETTE.NAMED_HUE('success')},140)`,
-
-	lemon: `var(${PROPS.PALETTE.NAMED_HUE('lemon')},90.8)`,
-	leek: `var(${PROPS.PALETTE.NAMED_HUE('leek')},165.88)`,
-	tomato: `var(${PROPS.PALETTE.NAMED_HUE('tomato')},10.51)`,
-	blueberry: `var(${PROPS.PALETTE.NAMED_HUE('blueberry')},248.14)`,
-	eggplant: `var(${PROPS.PALETTE.NAMED_HUE('eggplant')},280.21)`,
-};
-
-export const paletteNames = [
-	'primary',
-	'accent',
-	'attention',
-	'success',
-	'lemon',
-	'leek',
-	'tomato',
-	'blueberry',
-	'eggplant',
-	'gray',
-	'high-contrast',
-] as const;
-export type PaletteName = (typeof paletteNames)[number];
-
-export interface ColorLogicalPaletteDefinitions {
-	wash: OklchColorEquation;
-	light: OklchColorEquation;
-	default: OklchColorEquation;
-	dark: OklchColorEquation;
-	ink: OklchColorEquation;
-}
-export interface ColorPaletteStyles {
-	wash: string;
-	light: string;
-	DEFAULT: string;
-	dark: string;
-	ink: string;
-	[key: string]: string;
-}
-
-export interface ColorLogicalPalette {
-	name: string;
-	sourceHue: string;
-	accentHue: string;
-	saturation?: string;
-	definitions: ColorLogicalPaletteDefinitions;
-	styles: ColorPaletteStyles;
-}
-
-export function createColorLogicalPalette({
-	sourceHue,
-	accentHue,
-	saturation,
-	name,
-}: {
-	sourceHue: string;
-	accentHue: string;
-	saturation?: string;
-	name: string;
-}): ColorLogicalPalette {
-	const definitions = {
-		wash: oklchBuilder(($) => ({
-			l: $.clamp(
-				$.add(
-					$.literal((ctx) => ctx.mode.lNeutral),
-					$.multiply(
-						$.literal((ctx) => ctx.mode.lRangeUp),
-						$.literal((ctx) => ctx.mode.mult),
-						$.literal((ctx) => ctx.localLightnessSpread),
-					),
-				),
-				$.literal(() => '0%'),
-				$.literal(() => '100%'),
-			),
-			c: $.clamp(
-				$.multiply(
-					$.literal(() => saturation ?? '1'),
-					$.literal((ctx) => ctx.localSaturation),
-					$.literal((ctx) => ctx.globalSaturation),
-					$.add(
-						$.literal((ctx) => ctx.mode.sNeutral),
-						$.multiply(
-							$.literal((ctx) => ctx.mode.sRangeUp),
-							$.literal((ctx) => ctx.mode.mult),
-						),
-					),
-				),
-				$.literal(() => '0%'),
-				$.literal(() => '100%'),
-			),
-			h: $.literal((ctx) => ctx.sourceHue),
-		})),
-		light: oklchBuilder(($) => ({
-			l: $.clamp(
-				$.add(
-					$.literal((ctx) => ctx.mode.lNeutral),
-					$.multiply(
-						$.literal((ctx) => ctx.mode.lRangeUp),
-						$.literal(() => '0.5'),
-						$.literal((ctx) => ctx.mode.mult),
-						$.literal((ctx) => ctx.localLightnessSpread),
-					),
-				),
-				$.literal(() => '0%'),
-				$.literal(() => '100%'),
-			),
-			c: $.clamp(
-				$.multiply(
-					$.literal(() => saturation ?? '1'),
-					$.literal((ctx) => ctx.localSaturation),
-					$.literal((ctx) => ctx.globalSaturation),
-					$.add(
-						$.literal((ctx) => ctx.mode.sNeutral),
-						$.multiply(
-							$.literal((ctx) => ctx.mode.sRangeUp),
-							$.literal(() => '0.75'),
-							$.literal((ctx) => ctx.mode.mult),
-						),
-					),
-				),
-				$.literal(() => '0%'),
-				$.literal(() => '100%'),
-			),
-			h: $.literal((ctx) => ctx.sourceHue),
-		})),
-		default: oklchBuilder(($) => ({
-			l: $.literal((ctx) => ctx.mode.lNeutral),
-			c: $.clamp(
-				$.multiply(
-					$.literal(() => saturation ?? '1'),
-					$.literal((ctx) => ctx.localSaturation),
-					$.literal((ctx) => ctx.globalSaturation),
-					$.literal((ctx) => ctx.mode.sNeutral),
-				),
-				$.literal(() => '0%'),
-				$.literal(() => '100%'),
-			),
-			h: $.literal((ctx) => ctx.sourceHue),
-		})),
-		dark: oklchBuilder(($) => ({
-			l: $.clamp(
-				$.subtract(
-					$.literal((ctx) => ctx.mode.lNeutral),
-					$.multiply(
-						$.literal((ctx) => ctx.mode.lRangeDown),
-						$.literal(() => '0.35'),
-						$.literal((ctx) => ctx.mode.mult),
-						$.literal((ctx) => ctx.localLightnessSpread),
-					),
-				),
-				$.literal(() => '0%'),
-				$.literal(() => '100%'),
-			),
-			c: $.clamp(
-				$.multiply(
-					$.literal(() => saturation ?? '1'),
-					$.literal((ctx) => ctx.localSaturation),
-					$.literal((ctx) => ctx.globalSaturation),
-					$.subtract(
-						$.literal((ctx) => ctx.mode.sNeutral),
-						$.multiply(
-							$.literal((ctx) => ctx.mode.sRangeDown),
-							$.literal(() => '0.5'),
-							$.literal((ctx) => ctx.mode.mult),
-						),
-					),
-				),
-				$.literal(() => '0%'),
-				$.literal(() => '100%'),
-			),
-			h: $.literal((ctx) => ctx.sourceHue),
-		})),
-		ink: oklchBuilder(($) => ({
-			l: $.clamp(
-				$.subtract(
-					$.literal((ctx) => ctx.mode.lNeutral),
-					$.multiply(
-						$.literal((ctx) => ctx.mode.lRangeDown),
-						$.literal(() => '1'),
-						$.literal((ctx) => ctx.mode.mult),
-						$.literal((ctx) => ctx.localLightnessSpread),
-					),
-				),
-				$.literal(() => '0%'),
-				$.literal(() => '100%'),
-			),
-			c: $.clamp(
-				$.multiply(
-					$.literal(() => saturation ?? '1'),
-					$.literal((ctx) => ctx.localSaturation),
-					$.literal((ctx) => ctx.globalSaturation),
-					$.subtract(
-						$.literal((ctx) => ctx.mode.sNeutral),
-						$.multiply(
-							$.literal((ctx) => ctx.mode.sRangeDown),
-							$.literal(() => '1'),
-							$.literal((ctx) => ctx.mode.mult),
-						),
-					),
-				),
-				$.literal(() => '0%'),
-				$.literal(() => '100%'),
-			),
-			h: $.literal((ctx) => ctx.sourceHue),
-		})),
-	};
-	return {
-		name,
-		sourceHue,
-		accentHue,
-		saturation,
-		definitions,
-		styles: createPaletteStyles(sourceHue, definitions),
-	};
-}
-
-export interface ColorPaletteStyles {
-	wash: string;
-	light: string;
-	DEFAULT: string;
-	dark: string;
-	ink: string;
-}
-
-function createPaletteStyles(
-	sourceHue: string,
-	definitions: ColorLogicalPaletteDefinitions,
-): ColorPaletteStyles {
-	const ctx = livePropertyColorContext(sourceHue);
-	return {
-		wash: definitions.wash.print(ctx),
-		light: definitions.light.print(ctx),
-		DEFAULT: definitions.default.print(ctx),
-		dark: definitions.dark.print(ctx),
-		ink: definitions.ink.print(ctx),
-	};
-}
-
-export const graySaturation = '0.15';
-export const highContrastSaturation = '0.04';
-
-export const defaultPalettes = {
-	main: createColorLogicalPalette({
-		name: 'main',
-		sourceHue: paletteHues.main,
-		accentHue: paletteHues.accent,
-	}),
-	primary: createColorLogicalPalette({
-		name: 'primary',
-		sourceHue: paletteHues.primary,
-		accentHue: paletteHues.accent,
-	}),
-	accent: createColorLogicalPalette({
-		name: 'accent',
-		sourceHue: paletteHues.accent,
-		accentHue: paletteHues.accent,
-	}),
-	attention: createColorLogicalPalette({
-		name: 'attention',
-		sourceHue: paletteHues.attention,
-		accentHue: paletteHues.accent,
-	}),
-	success: createColorLogicalPalette({
-		name: 'success',
-		sourceHue: paletteHues.success,
-		accentHue: paletteHues.accent,
-	}),
-	gray: createColorLogicalPalette({
-		name: 'gray',
-		sourceHue: paletteHues.main,
-		saturation: graySaturation,
-		accentHue: paletteHues.accent,
-	}),
-	['high-contrast']: createColorLogicalPalette({
-		name: 'high-contrast',
-		sourceHue: paletteHues.main,
-		saturation: highContrastSaturation,
-		accentHue: paletteHues.accent,
-	}),
-};