@a-type/ui 3.0.12 → 3.0.14

package/src/components/note/Note.tsx

@@ -1,6 +1,6 @@
 import classNames from 'clsx';
 import { HTMLAttributes, ReactNode } from 'react';
-import { PaletteName } from '../../uno/logic/color.js';
+import { PaletteName } from '../../uno/index.js';
 
 export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
 	children?: ReactNode;

package/src/components/progress/Progress.tsx

@@ -1,7 +1,7 @@
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import clsx from 'clsx';
 import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/logic/color.js';
+import { PaletteName } from '../../uno/index.js';
 
 export const ProgressRoot = withClassName(
 	ProgressPrimitive.Root,

package/src/components/slider/Slider.tsx

@@ -1,7 +1,7 @@
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import clsx from 'clsx';
 import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/logic/color.js';
+import { PaletteName } from '../../uno/index.js';
 
 export const SliderRoot = withClassName(
 	SliderPrimitive.Root,

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,20 @@
 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';
 
 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 +61,32 @@ export function useSetTitleBarColor() {
 	const resetColor = useCallback(() => changeThemeColor(defaultColor), []);
 	return { setColor, resetColor };
 }
+
+export function useThemedTitleBar(
+	paletteName: PaletteName,
+	value: keyof ColorLogicalPaletteDefinitions,
+	/** 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] ?? palettes.primary;
+			const context = snapshotColorContext(paletteName, mode);
+			const color = palette.definitions[value].computeOklch(context);
+			setColor(color);
+		}
+		update();
+
+		if (previousColor) {
+			return () => {
+				setColor(previousColor);
+			};
+		}
+	}, [setColor, paletteName, value, mode, skip]);
+}

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,109 @@
+import { describe, expect, it } from 'vitest';
+import {
+	ColorEvaluationContext,
+	livePropertyColorContext,
+	snapshotColorContext,
+} from './color.js';
+import { palettes } from './palettes.js';
+
+describe('context snapshot evaluation', () => {
+	it('should snapshot color context from element properties', () => {
+		const context = snapshotColorContext('leek');
+		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('leek');
+		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('leek');
+		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('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('leek', 'dark');
+		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);
+	});
+});