@a-type/ui 3.0.13 → 3.0.15

package/src/hooks/useTitleBarColor.ts

@@ -1,8 +1,9 @@
-import { RefObject, useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useResolvedColorMode } from '../colorMode.js';
 import { snapshotColorContext } from '../uno/logic/color.js';
 import {
 	ColorLogicalPaletteDefinitions,
+	PaletteName,
 	palettes,
 } from '../uno/logic/palettes.js';
 
@@ -62,41 +63,30 @@ export function useSetTitleBarColor() {
 }
 
 export function useThemedTitleBar(
-	paletteName: 'primary' | 'accent' | 'gray',
+	paletteName: PaletteName,
 	value: keyof ColorLogicalPaletteDefinitions,
-	options?: { contextElement?: RefObject<HTMLElement> },
+	/** If not provided, will inherit from app */
+	mode?: 'light' | 'dark',
+	skip?: boolean,
 ) {
 	const { setColor } = useSetTitleBarColor();
 
 	useEffect(() => {
+		if (skip) return;
 		const previousColor = getCurrentColor();
 
 		function update() {
-			const palette = palettes[paletteName];
-			const context = snapshotColorContext(
-				options?.contextElement?.current,
-				paletteName,
-			);
+			const palette = palettes[paletteName] ?? palettes.primary;
+			const context = snapshotColorContext(paletteName, mode);
 			const color = palette.definitions[value].computeOklch(context);
 			setColor(color);
 		}
 		update();
 
-		const observer = new MutationObserver(() => {
-			update();
-		});
-		observer.observe(
-			options?.contextElement?.current ?? document.documentElement,
-			{
-				attributes: true,
-				attributeFilter: ['class'],
-			},
-		);
-
 		if (previousColor) {
 			return () => {
 				setColor(previousColor);
 			};
 		}
-	}, [setColor, paletteName, value, options?.contextElement]);
+	}, [setColor, paletteName, value, mode, skip]);
 }

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

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import {
 	ColorEvaluationContext,
 	livePropertyColorContext,
@@ -6,19 +6,9 @@ import {
 } from './color.js';
 import { palettes } from './palettes.js';
 
-let contextElement: HTMLElement;
-beforeEach(() => {
-	contextElement = document.createElement('div');
-	contextElement.classList.add('palette-leek');
-	document.body.appendChild(contextElement);
-});
-afterEach(() => {
-	document.body.removeChild(contextElement);
-});
-
 describe('context snapshot evaluation', () => {
 	it('should snapshot color context from element properties', () => {
-		const context = snapshotColorContext(contextElement, 'main');
+		const context = snapshotColorContext('leek');
 		expect(context).toEqual({
 			sourceHue: '165.88',
 			localLightnessSpread: '1',
@@ -41,7 +31,7 @@ describe('oklch color evaluation tools', () => {
 	const { wash, default: DEFAULT } = palettes.main.definitions;
 
 	it('should resolve lch values', () => {
-		const ctx = snapshotColorContext(contextElement, 'main');
+		const ctx = snapshotColorContext('leek');
 		const { l, c, h } = wash.raw(ctx);
 		expect(l.value).toBeCloseTo(100, 1);
 		expect(l.unit).toBe('%');
@@ -59,7 +49,7 @@ describe('oklch color evaluation tools', () => {
 		);
 	});
 	it('should evaluate a valid oklch color value using element property values', () => {
-		const context = snapshotColorContext(contextElement, 'main');
+		const context = snapshotColorContext('leek');
 		expect(wash.computeSrgb(context)).toMatchInlineSnapshot(
 			`"rgb(100% 100% 100%)"`,
 		);
@@ -77,7 +67,7 @@ describe('oklch color evaluation tools', () => {
 		);
 	});
 	it('should evaluate different named palettes in addition to main', () => {
-		const context = snapshotColorContext(contextElement, 'attention');
+		const context = snapshotColorContext('attention');
 		expect(wash.computeSrgb(context)).toMatchInlineSnapshot(
 			`"rgb(100% 100% 100%)"`,
 		);
@@ -98,7 +88,7 @@ describe('oklch color evaluation tools', () => {
 		const darkMode = document.createElement('div');
 		darkMode.classList.add('override-dark', 'palette-leek');
 		document.body.appendChild(darkMode);
-		const context = snapshotColorContext(darkMode, 'main');
+		const context = snapshotColorContext('leek', 'dark');
 		expect(wash.computeSrgb(context)).toMatchInlineSnapshot(
 			`"rgb(0% 14.06% 7.3466%)"`,
 		);

package/src/uno/logic/color.ts

@@ -117,16 +117,24 @@ function evaluatePropertiesRecursively(
  * Defaults to body.
  */
 export function snapshotColorContext(
-	scope: HTMLElement = document.body,
-	palette: PaletteName | 'main',
+	palette: PaletteName,
+	mode?: 'light' | 'dark',
 ): ColorEvaluationContext {
-	const styles = getComputedStyle(scope);
-	const sourceHue =
-		palette === 'main' ? `var(--l-main-hue)` : `var(--p-${palette}-hue)`;
-	return evaluatePropertiesRecursively(
+	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(sourceHue),
+		livePropertyColorContext(`var(--l-main-hue)`),
 	) as ColorEvaluationContext;
+	document.body.removeChild(scopeElement);
+	return evaluated;
 }
 
 export interface OklchColorEquation {

package/src/uno/logic/palettes.ts

@@ -253,7 +253,7 @@ export const palettes = {
 		sourceHue: paletteHues.main,
 		saturation: graySaturation,
 	}),
-	highContrast: createColorLogicalPalette({
+	['high-contrast']: createColorLogicalPalette({
 		sourceHue: paletteHues.main,
 		saturation: highContrastSaturation,
 	}),

package/src/uno/preflights/colors.ts

@@ -7,9 +7,9 @@ import {
 import { preflight } from './_util.js';
 
 const baseThemeCSS = `
---v-color: ${palettes.highContrast.styles.ink};
+--v-color: ${palettes['high-contrast'].styles.ink};
 color: var(--v-color);
---v-bg: ${palettes.highContrast.styles.wash};
+--v-bg: ${palettes['high-contrast'].styles.wash};
 background-color: var(--v-bg);
 `;
 

package/src/uno/theme/colors.ts

@@ -8,8 +8,8 @@ export const colors = {
 	transparent: 'transparent',
 	current: 'currentColor',
 
-	black: palettes.highContrast.styles.ink,
-	white: palettes.highContrast.styles.wash,
+	black: palettes['high-contrast'].styles.ink,
+	white: palettes['high-contrast'].styles.wash,
 	wash: palettes.gray.styles.wash,
 
 	// magic tokens

package/src/uno/theme/sizes.ts

@@ -5,11 +5,11 @@ export const width: Theme['width'] = {
 	full: '100%',
 	'min-content': 'min-content',
 	'max-content': 'max-content',
-	touch: '40px',
+	touch: '30px',
 };
 
 export const height: Theme['height'] = {
 	'min-content': 'min-content',
 	'max-content': 'max-content',
-	touch: '40px',
+	touch: '30px',
 };