@a-type/ui 4.1.8 → 5.0.1

package/src/hooks/useOverrideTheme.ts

@@ -6,9 +6,9 @@ export function useOverrideTheme(theme: PaletteName | null | undefined) {
 		if (!theme || typeof document === 'undefined') {
 			return;
 		}
-		document.body.classList.add(`theme-override-${theme}`);
+		document.body.classList.add(`theme-${theme}`);
 		return () => {
-			document.body.classList.remove(`theme-override-${theme}`);
+			document.body.classList.remove(`theme-${theme}`);
 		};
 	}, [theme]);
 }

package/src/hooks/useTitleBarColor.ts

@@ -2,9 +2,9 @@ import { useCallback, useEffect, useSyncExternalStore } from 'react';
 import { useResolvedColorMode } from '../colorMode.js';
 import { snapshotColorContext } from '../uno/logic/color.js';
 import {
+	ColorLogicalPalette,
 	ColorLogicalPaletteDefinitions,
-	PaletteName,
-	palettes,
+	defaultPalettes,
 } from '../uno/logic/palettes.js';
 
 let defaultColor = '#ffffff';
@@ -66,7 +66,9 @@ export function useSetTitleBarColor() {
 }
 
 export function useThemedTitleBar(
-	paletteName: PaletteName,
+	paletteOrName:
+		| Exclude<keyof typeof defaultPalettes, 'main'>
+		| ColorLogicalPalette,
 	value: keyof ColorLogicalPaletteDefinitions,
 	/** If not provided, will inherit from app */
 	mode?: 'light' | 'dark',
@@ -93,8 +95,12 @@ export function useThemedTitleBar(
 		const previousColor = getCurrentColor();
 
 		function update() {
-			const palette = palettes[paletteName] ?? palettes.primary;
-			const context = snapshotColorContext(paletteName, mode);
+			const palette =
+				typeof paletteOrName === 'string'
+					? defaultPalettes[paletteOrName] ?? defaultPalettes.primary
+					: paletteOrName;
+			console.log('snapshot:', palette.name, value, mode);
+			const context = snapshotColorContext(palette.name, mode);
 			const color = palette.definitions[value].computeOklch(context);
 			setColor(color);
 		}
@@ -105,5 +111,5 @@ export function useThemedTitleBar(
 				setColor(previousColor);
 			};
 		}
-	}, [setColor, paletteName, value, mode, skip, visible]);
+	}, [setColor, paletteOrName, value, mode, skip, visible]);
 }

package/src/systems/GroupScale.tsx

@@ -1,4 +1,5 @@
 import { createContext, CSSProperties, ReactNode, useContext } from 'react';
+import { PROPS } from '../uno/index.js';
 
 export const GroupScaleContext = createContext<number>(1);
 
@@ -20,8 +21,8 @@ export function useGroupScale() {
 export function useGroupScaleStyles(composeStyles?: CSSProperties) {
 	const scale = useGroupScale();
 	return {
-		'--spacing-scale': scale,
-		'--local-corner-scale': scale,
+		[PROPS.LOCALS.SPACING_SCALE]: scale,
+		[PROPS.LOCALS.CORNER_SCALE]: scale,
 		...composeStyles,
 	};
 }

package/src/themes.snapshots.tsx

@@ -0,0 +1,12 @@
+import { expect, it } from 'vitest';
+import { page } from 'vitest/browser';
+import { render } from './__tests__/render.js';
+import { DemoUI } from './themes.stories.js';
+
+it('demo theme ui matches snapshot', async () => {
+	page.viewport(1080, 3000);
+	const result = render(<DemoUI />);
+	await document.fonts.ready;
+	await new Promise((r) => setTimeout(r, 100)); // wait for possible animations
+	await expect(result.getByTestId('demo')).toMatchScreenshot('snapshot');
+});

package/src/themes.stories.tsx

@@ -43,7 +43,7 @@ import { Input } from './components/input/index.js';
 import { Tabs } from './components/tabs/tabs.js';
 import { TextArea } from './components/textArea/index.js';
 import { useOverrideTheme } from './hooks/useOverrideTheme.js';
-import { PaletteName } from './uno/index.js';
+import { PaletteName, PROPS } from './uno/index.js';
 
 const meta = {
 	title: 'Theme Demo',
@@ -59,11 +59,11 @@ export default meta;
 
 type Story = StoryObj;
 
-function DemoUI({ className }: { className?: string }) {
+export function DemoUI({ className }: { className?: string }) {
 	const nextWeek = new Date();
 	nextWeek.setDate(nextWeek.getDate() + 7);
 	return (
-		<PageRoot className={clsx('flex-1', className)}>
+		<PageRoot data-testid="demo" className={clsx('flex-1', className)}>
 			<PageContent>
 				<div className={clsx('grid grid-cols-2 gap-2')}>
 					<Box gap wrap p>
@@ -334,12 +334,6 @@ function DemoUI({ className }: { className?: string }) {
 	);
 }
 
-export const Default: Story = {
-	render() {
-		return <DemoUI />;
-	},
-};
-
 export const Nesting: Story = {
 	render() {
 		return (
@@ -347,7 +341,7 @@ export const Nesting: Story = {
 				<Box d="row" gap surface color="primary">
 					<Button color="primary">Root theme</Button>
 				</Box>
-				<DemoUI className="theme-eggplant override-dark flex-1" />
+				<DemoUI className="palette-eggplant override-dark flex-1" />
 			</Box>
 		);
 	},
@@ -385,21 +379,21 @@ export const Override: Story = {
 export const Custom: Story = {
 	render() {
 		const [theme, setTheme] = useState({
-			'--p-primary-hue': 70,
-			'--p-accent-hue': 290,
-			'--global-saturation': 0.5,
-			'--global-border-scale': 1.5,
-			'--global-spacing-scale': 1,
-			'--global-corner-scale': 1,
+			[PROPS.USER.COLOR.PRIMARY_HUE]: 70,
+			[PROPS.USER.COLOR.ACCENT_HUE]: 290,
+			[PROPS.USER.SATURATION]: 0.5,
+			[PROPS.USER.BORDER_SCALE]: 1.5,
+			[PROPS.USER.SPACING_SCALE]: 1,
+			[PROPS.USER.CORNER_SCALE]: 1,
 		});
 		const reroll = () => {
 			setTheme({
-				'--p-primary-hue': Math.floor(Math.random() * 360),
-				'--p-accent-hue': Math.floor(Math.random() * 360),
-				'--global-saturation': Math.random(),
-				'--global-border-scale': Math.random() * 2,
-				'--global-spacing-scale': Math.random() * 2,
-				'--global-corner-scale': Math.random() * 1.25,
+				[PROPS.USER.COLOR.PRIMARY_HUE]: Math.floor(Math.random() * 360),
+				[PROPS.USER.COLOR.ACCENT_HUE]: Math.floor(Math.random() * 360),
+				[PROPS.USER.SATURATION]: Math.random(),
+				[PROPS.USER.BORDER_SCALE]: Math.random() * 2,
+				[PROPS.USER.SPACING_SCALE]: Math.random() * 2,
+				[PROPS.USER.CORNER_SCALE]: Math.random() * 1.25,
 			});
 		};
 		return (
@@ -438,31 +432,29 @@ export const Trippy: Story = {
 				1 + Math.sin((Date.now() / 50000) * Math.PI * 2);
 			values.current.cornerScale = 1 + Math.sin(Date.now() / 3000);
 			current.style.setProperty(
-				'--dyn-primary-source',
+				PROPS.USER.COLOR.PRIMARY_HUE,
 				values.current.primarySource.toString(),
 			);
 			current.style.setProperty(
-				'--dyn-accent-source',
+				PROPS.USER.COLOR.ACCENT_HUE,
 				values.current.accentSource.toString(),
 			);
 			current.style.setProperty(
-				'--global-saturation',
+				PROPS.USER.SATURATION,
 				values.current.saturation.toString(),
 			);
 			current.style.setProperty(
-				'--global-border-scale',
+				PROPS.USER.BORDER_SCALE,
 				values.current.borderScale.toString(),
 			);
 			current.style.setProperty(
-				'--global-spacing-scale',
+				PROPS.USER.SPACING_SCALE,
 				values.current.spacingScale.toString(),
 			);
 			current.style.setProperty(
-				'--global-corner-scale',
+				PROPS.USER.CORNER_SCALE,
 				values.current.cornerScale.toString(),
 			);
-			current.style.setProperty('--dyn-primary-hue-rotate', '0');
-			current.style.setProperty('--dyn-accent-hue-rotate', '0');
 		}, dt);
 		return (
 			<div ref={ref}>

package/src/uno/defaults.ts

@@ -0,0 +1,13 @@
+import { UserPreflightOptions } from './preflights/user.js';
+
+export const defaultPresetHues: NonNullable<UserPreflightOptions['namedHues']> =
+	{
+		lemon: { sourceHue: 90.8, accentHue: 165.88, saturation: 1 },
+		leek: { sourceHue: 165.88, accentHue: 90.8, saturation: 1 },
+		tomato: { sourceHue: 10.51, accentHue: 165.88, saturation: 1 },
+		blueberry: { sourceHue: 248.14, accentHue: 165.88, saturation: 1 },
+		eggplant: { sourceHue: 280.21, accentHue: 165.88, saturation: 1 },
+
+		attention: { sourceHue: 30, accentHue: 165.88, saturation: 1 },
+		success: { sourceHue: 140, accentHue: 165.88, saturation: 1 },
+	};

package/src/uno/index.ts

@@ -3,3 +3,4 @@ export {
 	paletteNames,
 	type PaletteName,
 } from './logic/palettes.js';
+export { PROPS } from './logic/properties.js';

package/src/uno/logic/color.test.ts

@@ -4,7 +4,7 @@ import {
 	livePropertyColorContext,
 	snapshotColorContext,
 } from './color.js';
-import { palettes } from './palettes.js';
+import { defaultPalettes } from './palettes.js';
 
 describe('context snapshot evaluation', () => {
 	it('should snapshot color context from element properties', () => {
@@ -28,7 +28,7 @@ describe('context snapshot evaluation', () => {
 });
 
 describe('oklch color evaluation tools', () => {
-	const { wash, default: DEFAULT } = palettes.main.definitions;
+	const { wash, default: DEFAULT } = defaultPalettes.main.definitions;
 
 	it('should resolve lch values', () => {
 		const ctx = snapshotColorContext('leek');

package/src/uno/logic/color.ts

@@ -1,4 +1,4 @@
-import { type PaletteName } from './palettes.js';
+import { PROPS } from './properties.js';
 
 export function lighten(base: string, level: string) {
 	return mod(base, level, 1);
@@ -12,8 +12,8 @@ function mod(base: string, level: string, sign: number) {
 	return (
 		`oklch(from ` +
 		base +
-		` calc(l * (1 + ${level} / 30 * ${sign} * var(--mode-mult, 1)))` +
-		` calc(c * (1 - (${level} * 0.1 * ${sign} * (1 + (1 - var(--global-saturation, 0))))))` +
+		` 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)`
 	);
 }
@@ -42,18 +42,18 @@ export function livePropertyColorContext(
 ): ColorEvaluationContext {
 	return {
 		mode: {
-			lNeutral: 'var(--mode-l-neutral)',
-			lRangeUp: 'var(--mode-l-range-up)',
-			lRangeDown: 'var(--mode-l-range-down)',
-			sNeutral: 'var(--mode-s-neutral)',
-			sRangeUp: 'var(--mode-s-range-up)',
-			sRangeDown: 'var(--mode-s-range-down)',
-			mult: 'var(--mode-mult, 1)',
+			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(--global-saturation, 1)',
-		localLightnessSpread: 'var(--l-lightness-spread, 1)',
-		localSaturation: 'var(--l-saturation, 1)',
+		globalSaturation: `var(${PROPS.USER.SATURATION}, 1)`,
+		localLightnessSpread: `var(${PROPS.PALETTE.LIGHTNESS_SPREAD}, 1)`,
+		localSaturation: `var(${PROPS.PALETTE.SATURATION}, 1)`,
 	};
 }
 
@@ -105,7 +105,7 @@ function evaluatePropertiesRecursively(
  * Defaults to body.
  */
 export function snapshotColorContext(
-	palette: PaletteName,
+	palette: string,
 	mode?: 'light' | 'dark',
 ): ColorEvaluationContext {
 	const scopeElement = document.createElement('div');
@@ -119,7 +119,7 @@ export function snapshotColorContext(
 	const styles = getComputedStyle(scopeElement);
 	const evaluated = evaluatePropertiesRecursively(
 		styles,
-		livePropertyColorContext(`var(--l-main-hue)`),
+		livePropertyColorContext(`var(${PROPS.PALETTE.MAIN_HUE})`),
 	) as ColorEvaluationContext;
 	document.body.removeChild(scopeElement);
 	return evaluated;

package/src/uno/logic/palettes.ts

@@ -3,20 +3,21 @@ import {
 	oklchBuilder,
 	OklchColorEquation,
 } from './color.js';
+import { PROPS } from './properties.js';
 
 export const paletteHues = {
-	primary: 'var(--p-primary-hue,91.8)',
-	accent: 'var(--p-accent-hue,160.88)',
-	main: 'var(--l-main-hue,var(--p-primary-hue,91.8))',
+	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(--p-attention-hue,30)',
-	success: 'var(--p-success-hue,140)',
+	attention: `var(${PROPS.PALETTE.NAMED_HUE('attention')},30)`,
+	success: `var(${PROPS.PALETTE.NAMED_HUE('success')},140)`,
 
-	lemon: 'var(--p-lemon-hue,90.8)',
-	leek: 'var(--p-leek-hue,165.88)',
-	tomato: 'var(--p-tomato-hue,10.51)',
-	blueberry: 'var(--p-blueberry-hue,248.14)',
-	eggplant: 'var(--p-eggplant-hue,280.21)',
+	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 = [
@@ -51,7 +52,9 @@ export interface ColorPaletteStyles {
 }
 
 export interface ColorLogicalPalette {
+	name: string;
 	sourceHue: string;
+	accentHue: string;
 	saturation?: string;
 	definitions: ColorLogicalPaletteDefinitions;
 	styles: ColorPaletteStyles;
@@ -59,10 +62,14 @@ export interface ColorLogicalPalette {
 
 export function createColorLogicalPalette({
 	sourceHue,
+	accentHue,
 	saturation,
+	name,
 }: {
 	sourceHue: string;
+	accentHue: string;
 	saturation?: string;
+	name: string;
 }): ColorLogicalPalette {
 	const definitions = {
 		wash: oklchBuilder(($) => ({
@@ -211,7 +218,9 @@ export function createColorLogicalPalette({
 		})),
 	};
 	return {
+		name,
 		sourceHue,
+		accentHue,
 		saturation,
 		definitions,
 		styles: createPaletteStyles(sourceHue, definitions),
@@ -243,24 +252,42 @@ function createPaletteStyles(
 export const graySaturation = '0.15';
 export const highContrastSaturation = '0.04';
 
-export const palettes = {
-	main: createColorLogicalPalette({ sourceHue: paletteHues.main }),
-	primary: createColorLogicalPalette({ sourceHue: paletteHues.primary }),
-	accent: createColorLogicalPalette({ sourceHue: paletteHues.accent }),
-	attention: createColorLogicalPalette({ sourceHue: paletteHues.attention }),
-	success: createColorLogicalPalette({ sourceHue: paletteHues.success }),
+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,
 	}),
-
-	lemon: createColorLogicalPalette({ sourceHue: paletteHues.lemon }),
-	leek: createColorLogicalPalette({ sourceHue: paletteHues.leek }),
-	tomato: createColorLogicalPalette({ sourceHue: paletteHues.tomato }),
-	blueberry: createColorLogicalPalette({ sourceHue: paletteHues.blueberry }),
-	eggplant: createColorLogicalPalette({ sourceHue: paletteHues.eggplant }),
 };

package/src/uno/logic/properties.ts

@@ -0,0 +1,138 @@
+export const PROPS = {
+	USER: {
+		COLOR: {
+			PRIMARY_HUE: '--u-c-primary-hue',
+			ACCENT_HUE: '--u-c-accent-hue',
+			NAMED_HUE: (name: string) => `--u-c-${name}-hue`,
+			NAMED_ACCENT_HUE: (name: string) => `--u-c-${name}-accent-hue`,
+		},
+		SATURATION: '--u-saturation',
+		SHADOW_SPREAD: '--u-shadow-spread',
+		CORNER_SCALE: '--u-corner-scale',
+		SPACING_SCALE: '--u-spacing-scale',
+		BORDER_SCALE: '--u-border-scale',
+		FONTS: {
+			DEFAULT: '--u-font-default',
+			SANS: '--u-font-sans',
+			SERIF: '--u-font-serif',
+			TITLE: '--u-font-title',
+		},
+	},
+
+	PALETTE: {
+		NAME: '--p-name',
+		MAIN_HUE: '--p-main-hue',
+		SATURATION: '--p-saturation',
+		LIGHTNESS_SPREAD: '--p-lightness-spread',
+		NAMED_HUE: (name: string) => `--p-${name}-hue`,
+
+		SHADES: {
+			WASH: '--p-shade-wash',
+			LIGHT: '--p-shade-light',
+			MID: '--p-shade-mid',
+			DARK: '--p-shade-dark',
+			INK: '--p-shade-ink',
+		},
+
+		GRAY_SHADES: {
+			WASH: '--p-gray-shade-wash',
+			LIGHT: '--p-gray-shade-light',
+			MID: '--p-gray-shade-mid',
+			DARK: '--p-gray-shade-dark',
+			INK: '--p-gray-shade-ink',
+		},
+
+		NAMED_SHADES: (name: string) => ({
+			WASH: `--p-${name}-shade-wash`,
+			LIGHT: `--p-${name}-shade-light`,
+			MID: `--p-${name}-shade-mid`,
+			DARK: `--p-${name}-shade-dark`,
+			INK: `--p-${name}-shade-ink`,
+		}),
+	},
+
+	MODE: {
+		BLACK: '--m-black',
+		WHITE: '--m-white',
+		MULT: '--m-mult',
+		L_NEUTRAL: '--m-l-neutral',
+		L_RANGE_UP: '--m-l-range-up',
+		L_RANGE_DOWN: '--m-l-range-down',
+		S_NEUTRAL: '--m-s-neutral',
+		S_RANGE_UP: '--m-s-range-up',
+		S_RANGE_DOWN: '--m-s-range-down',
+	},
+
+	COLOR: {
+		INHERITED: '--v-c-i',
+		FINAL: '--v-c',
+		OPACITY: '--v-c-op',
+	},
+	BACKGROUND_COLOR: {
+		INHERITED: '--v-bg-l',
+		FINAL: '--v-bg',
+		OPACITY: '--v-bg-op',
+		// special token for assigning a bg color for contrast calc
+		CONTRAST: '--v-bg-contrast',
+	},
+	BORDER_COLOR: {
+		ALL: {
+			INHERITED: '--v-bd-c-i',
+			FINAL: '--v-bd-c',
+			OPACITY: '--v-bd-c-op',
+		},
+		TOP: {
+			INHERITED: '--v-bd-t-c-i',
+			FINAL: '--v-bd-t-c',
+			OPACITY: '--v-bd-t-c-op',
+		},
+		RIGHT: {
+			INHERITED: '--v-bd-r-c-i',
+			FINAL: '--v-bd-r-c',
+			OPACITY: '--v-bd-r-c-op',
+		},
+		BOTTOM: {
+			INHERITED: '--v-bd-b-c-i',
+			FINAL: '--v-bd-b-c',
+			OPACITY: '--v-bd-b-c-op',
+		},
+		LEFT: {
+			INHERITED: '--v-bd-l-c-i',
+			FINAL: '--v-bd-l-c',
+			OPACITY: '--v-bd-l-c-op',
+		},
+	},
+	RING_COLOR: {
+		INHERITED: '--v-ring-c-i',
+		FINAL: '--v-ring-c',
+		OPACITY: '--v-ring-c-op',
+	},
+	ACCENT_COLOR: {
+		INHERITED: '--v-accent-c-i',
+		FINAL: '--v-accent-c',
+		OPACITY: '--v-accent-c-op',
+	},
+	PLACEHOLDER_COLOR: {
+		INHERITED: '--v-ph-c-i',
+		FINAL: '--v-ph-c',
+		OPACITY: '--v-ph-c-op',
+	},
+
+	LOCALS: {
+		CORNER_SCALE: '--l-corner-scale',
+		SPACING_SCALE: '--l-spacing-scale',
+	},
+
+	UTILS: {
+		SHADOW_Y_MULT: '--t-shadow-y-mult',
+		ARROW_SIZE: '--t-arrow-size',
+	},
+
+	BUILT_IN: {
+		RING_COLOR: '--un-ring-color',
+		SHADOW_INSET: '--un-shadow-inset',
+		SHADOW_COLOR: '--un-shadow-color',
+		SHADOW_OPACITY: '--un-shadow-opacity',
+		SHADOW: '--un-shadow',
+	},
+};