@a-type/ui 3.0.11 → 3.0.13

package/src/hooks/useOverrideTheme.ts

@@ -1,5 +1,5 @@
 import { useLayoutEffect } from 'react';
-import { PaletteName } from '../uno/logic/color.js';
+import { PaletteName } from '../uno/index.js';
 
 export function useOverrideTheme(theme: PaletteName | null | undefined) {
 	useLayoutEffect(() => {

package/src/hooks/useTitleBarColor.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
 import { Box, Button, Dialog, Icon, Provider } from '../components/index.js';
-import { useTitleBarColor } from './useTitleBarColor.js';
+import { useThemedTitleBar, useTitleBarColor } from './useTitleBarColor.js';
 
 const meta = {
 	title: 'Hooks/useTitleBarColor',
@@ -95,6 +95,6 @@ function MockTitleBar() {
 }
 
 function Overrider() {
-	useTitleBarColor('#ff0000');
+	useThemedTitleBar('primary', 'dark');
 	return null;
 }

package/src/hooks/useTitleBarColor.ts

@@ -1,11 +1,19 @@
-import { useCallback, useEffect } from 'react';
+import { RefObject, useCallback, useEffect } from 'react';
 import { useResolvedColorMode } from '../colorMode.js';
+import { snapshotColorContext } from '../uno/logic/color.js';
+import {
+	ColorLogicalPaletteDefinitions,
+	palettes,
+} from '../uno/logic/palettes.js';
 
 let defaultColor = '#ffffff';
+function getCurrentColor() {
+	return document
+		.querySelector('meta[name=theme-color]')
+		?.getAttribute('content');
+}
 if (typeof document !== 'undefined') {
-	defaultColor =
-		document.querySelector('meta[name=theme-color]')?.getAttribute('content') ??
-		defaultColor;
+	defaultColor = getCurrentColor() ?? defaultColor;
 }
 
 function changeThemeColor(color: string) {
@@ -52,3 +60,43 @@ export function useSetTitleBarColor() {
 	const resetColor = useCallback(() => changeThemeColor(defaultColor), []);
 	return { setColor, resetColor };
 }
+
+export function useThemedTitleBar(
+	paletteName: 'primary' | 'accent' | 'gray',
+	value: keyof ColorLogicalPaletteDefinitions,
+	options?: { contextElement?: RefObject<HTMLElement> },
+) {
+	const { setColor } = useSetTitleBarColor();
+
+	useEffect(() => {
+		const previousColor = getCurrentColor();
+
+		function update() {
+			const palette = palettes[paletteName];
+			const context = snapshotColorContext(
+				options?.contextElement?.current,
+				paletteName,
+			);
+			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]);
+}

package/src/index.ts

@@ -3,8 +3,4 @@ export { clsx } from 'clsx';
 export * from './colorMode.js';
 export * from './components/index.js';
 export * from './hooks.js';
-export {
-	paletteHues,
-	paletteNames,
-	type PaletteName,
-} from './uno/logic/color.js';
+export * from './uno/index.js';

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/logic/color.js';
+import { PaletteName } from './uno/index.js';
 
 const meta = {
 	title: 'Theme Demo',

package/src/uno/index.ts

@@ -0,0 +1,5 @@
+export {
+	paletteHues,
+	paletteNames,
+	type PaletteName,
+} from './logic/palettes.js';

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

@@ -0,0 +1,119 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import {
+	ColorEvaluationContext,
+	livePropertyColorContext,
+	snapshotColorContext,
+} 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');
+		expect(context).toEqual({
+			sourceHue: '165.88',
+			localLightnessSpread: '1',
+			localSaturation: '1',
+			globalSaturation: '0.5',
+			mode: {
+				lNeutral: '90%',
+				lRangeUp: '10%',
+				lRangeDown: '70%',
+				sNeutral: '75%',
+				sRangeUp: '-55%',
+				sRangeDown: '20%',
+				mult: '1',
+			},
+		} satisfies ColorEvaluationContext);
+	});
+});
+
+describe('oklch color evaluation tools', () => {
+	const { wash, default: DEFAULT } = palettes.main.definitions;
+
+	it('should resolve lch values', () => {
+		const ctx = snapshotColorContext(contextElement, 'main');
+		const { l, c, h } = wash.raw(ctx);
+		expect(l.value).toBeCloseTo(100, 1);
+		expect(l.unit).toBe('%');
+		expect(c.value).toBeCloseTo(10, 1);
+		expect(c.unit).toBe('%');
+		expect(h.value).toBe(165.88);
+	});
+
+	it('should print a valid oklch color string', () => {
+		const colorString = wash.print(
+			livePropertyColorContext('var(--p-main-hue, 91.8)'),
+		);
+		expect(colorString).toMatchInlineSnapshot(
+			`"oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--p-main-hue, 91.8)))"`,
+		);
+	});
+	it('should evaluate a valid oklch color value using element property values', () => {
+		const context = snapshotColorContext(contextElement, 'main');
+		expect(wash.computeSrgb(context)).toMatchInlineSnapshot(
+			`"rgb(100% 100% 100%)"`,
+		);
+		expect(wash.computeHex(context)).toMatchInlineSnapshot(`"#fff"`);
+		expect(wash.computeOklch(context)).toMatchInlineSnapshot(
+			`"oklch(100% 10% 165.88)"`,
+		);
+
+		expect(DEFAULT.computeSrgb(context)).toMatchInlineSnapshot(
+			`"rgb(40.747% 99.344% 77.98%)"`,
+		);
+		expect(DEFAULT.computeHex(context)).toMatchInlineSnapshot(`"#68fdc7"`);
+		expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(
+			`"oklch(90% 37.5% 165.88)"`,
+		);
+	});
+	it('should evaluate different named palettes in addition to main', () => {
+		const context = snapshotColorContext(contextElement, 'attention');
+		expect(wash.computeSrgb(context)).toMatchInlineSnapshot(
+			`"rgb(100% 100% 100%)"`,
+		);
+		expect(wash.computeHex(context)).toMatchInlineSnapshot(`"#fff"`);
+		expect(wash.computeOklch(context)).toMatchInlineSnapshot(
+			`"oklch(100% 10% 30)"`,
+		);
+
+		expect(DEFAULT.computeSrgb(context)).toMatchInlineSnapshot(
+			`"rgb(100% 80.069% 75.637%)"`,
+		);
+		expect(DEFAULT.computeHex(context)).toMatchInlineSnapshot(`"#ffccc1"`);
+		expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(
+			`"oklch(90% 37.5% 30)"`,
+		);
+	});
+	it('works in dark mode', () => {
+		const darkMode = document.createElement('div');
+		darkMode.classList.add('override-dark', 'palette-leek');
+		document.body.appendChild(darkMode);
+		const context = snapshotColorContext(darkMode, 'main');
+		expect(wash.computeSrgb(context)).toMatchInlineSnapshot(
+			`"rgb(0% 14.06% 7.3466%)"`,
+		);
+		expect(wash.computeHex(context)).toMatchInlineSnapshot(`"#002413"`);
+		expect(wash.computeOklch(context)).toMatchInlineSnapshot(
+			`"oklch(22% 20% 165.88)"`,
+		);
+
+		expect(DEFAULT.computeSrgb(context)).toMatchInlineSnapshot(
+			`"rgb(0% 60.697% 41.999%)"`,
+		);
+		expect(DEFAULT.computeHex(context)).toMatchInlineSnapshot(`"#009b6b"`);
+		expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(
+			`"oklch(60% 40% 165.88)"`,
+		);
+		document.body.removeChild(darkMode);
+	});
+});