@a-type/ui 1.8.18 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.8.18",
+  "version": "2.0.1",
   "type": "module",
   "files": [
     "/dist",

package/src/colors.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from './components/index.js';
+
+const meta = {
+	title: 'colors',
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+	render() {
+		return (
+			<Box d="col">
+				<Range className="theme-lemon" />
+				<Range className="theme-leek" />
+				<Range className="theme-tomato" />
+				<Range className="theme-eggplant" />
+				<Range className="theme-blueberry" />
+				<Range className="theme-salt" />
+			</Box>
+		);
+	},
+};
+
+function Swatch({ className }: { className?: string }) {
+	return (
+		<div
+			className={className}
+			style={{
+				width: '100px',
+				height: '100px',
+			}}
+		/>
+	);
+}
+
+function Range({ className }: { className?: string }) {
+	return (
+		<Box className={className}>
+			<Swatch className="bg-primary-wash" />
+			<Swatch className="bg-primary-light" />
+			<Swatch className="bg-primary" />
+			<Swatch className="bg-primary-dark" />
+			<Swatch className="bg-primary-ink" />
+		</Box>
+	);
+}

package/src/components/button/classes.tsx

@@ -15,11 +15,11 @@ export function getButtonClassName({
 	return classNames(
 		'layer-components:(px-4 py-2 bg-[var(--bg-neutral,var(--bg))] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-inherit border border-solid border-transparent rounded-lg cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 whitespace-nowrap ring-bg)',
 		'layer-components:()',
-		'layer-components:hover:(bg-[var(--bg)] bg-darken-2 ring-4)',
+		'layer-components:hover:(bg-[var(--bg)] bg-darken-1 ring-4)',
 		'layer-components:focus:outline-off',
-		'layer-components:focus-visible:(bg-[var(--bg)] outline-off bg-darken-7 ring-6)',
-		'layer-components:[&[data-focus=true]]:(bg-[var(--bg)] ring-6 bg-darken-7)',
-		'layer-components:active:(bg-[var(--bg)] bg-darken-7 ring-8)',
+		'layer-components:focus-visible:(bg-[var(--bg)] outline-off bg-darken-1 ring-6)',
+		'layer-components:[&[data-focus=true]]:(bg-[var(--bg)] ring-6 bg-darken-1)',
+		'layer-components:active:(bg-[var(--bg)] bg-darken-1 ring-8)',
 		'important:disabled:(opacity-50 cursor-default bg-[var(--bg)] shadow-none ring-none)',
 		'important:[&[data-disabled=true]]:(opacity-50 cursor-default bg-[var(--bg)] shadow-none)',
 		colors[color ?? 'default'],
@@ -36,14 +36,14 @@ export function getButtonClassName({
 }
 
 const colors = {
-	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary-light)] shadow-sm color-black border-primary-dark focus-visible:([--bg:var(--color-primary)]))`,
-	accent: `layer-variants:[&.btn-color-accent]:([--bg:var(--color-accent-wash)] shadow-sm color-black border-accent-dark focus-visible:([--bg:var(--color-accent-light)]))`,
-	default: `layer-variants:[&.btn-color-default]:([--bg:var(--color-white)] shadow-sm color-black border-gray-dark)`,
-	ghost: `layer-variants:[&.btn-color-ghost]:([--bg-neutral:transparent] [--bg:var(--color-light-blend)] color-darkBlend hover:bg-darken-3 focus-visible:(bg-darken-5) [&[data-focus=true]]:(bg-darken-5) active:bg-darken-6)`,
-	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention-light)] shadow-sm border-attention-dark color-black hover:([--bg:var(--colors-attention)]))`,
-	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg-neutral:transparent] [--bg:var(--color-attention-light)] color-attention-dark hover:(bg-darken-1 color-black) focus-visible:(bg-darken-2 color-black) active:bg-darken-2)`,
-	ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:([--bg-neutral:transparent] [--bg:var(--color-accent-wash)] color-accent-dark hover:bg-darken-2 focus-visible:bg-darken-6 active:bg-darken-6)`,
-	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] color-white border-black hover:bg-lighten-1 focus-visible:bg-lighten-5 active:bg-lighten-4)`,
+	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary)] shadow-sm color-black border-primary-dark)`,
+	accent: `layer-variants:[&.btn-color-accent]:([--bg-neutral:var(--color-accent-wash)] [--bg:var(--color-accent-light)] shadow-sm color-black border-accent-dark)`,
+	default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray-light)] shadow-sm color-black border-gray-dark)`,
+	ghost: `layer-variants:[&.btn-color-ghost]:([--bg-neutral:transparent] [--bg:oklch(from_var(--color-gray)_l_c_h/50%)] color-dark-blend)`,
+	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention)] shadow-sm border-attention-dark color-black ))`,
+	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg-neutral:transparent] [--bg:var(--color-attention-light)] color-attention-dark hover:(color-black) focus-visible:(color-black))`,
+	ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:([--bg-neutral:transparent] [--bg:var(--color-accent-wash)] color-accent-dark hover:bg-darken-4)`,
+	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] color-white border-black hover:bg-lighten-1 focus-visible:bg-lighten-1 active:bg-lighten-1)`,
 	unstyled: `layer-variants:(bg-transparent hover:(bg-transparent) focus:(bg-transparent) active:(bg-transparent) color-inherit border-none shadow-none hover:(shadow-none) focus:(shadow-none) active:(shadow-none) p-0 items-start font-inherit font-normal rounded-none text-size-inherit transition-none)`,
 };
 export const buttonColorClasses = colors;

package/src/components/card/Card.tsx

@@ -8,7 +8,7 @@ import { SlotDiv } from '../utility/SlotDiv.js';
 
 export const CardRoot = withClassName(
 	withProps(Box, { container: 'reset' }),
-	'layer-components:(flex flex-col border-light rounded-lg text-lg overflow-hidden h-max-content relative bg-wash bg-darken-0.5 text-black shadow-sm)',
+	'layer-components:(flex flex-col border-light rounded-lg text-lg overflow-hidden h-max-content relative bg-wash bg-darken-1 text-black shadow-sm)',
 	'layer-variants:[&[data-borderless=true]]:(border-none shadow-md)',
 );
 
@@ -59,14 +59,14 @@ export function CardMain({
 
 export const CardTitle = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 mt-0 bg-white py-2 px-3 rounded-lg rounded-bl-none rounded-tr-none w-auto mr-auto border border-solid border-grayDarkBlend text-md max-h-80px overflow-hidden text-ellipsis max-w-full text-inherit font-semibold relative z-1 transition-colors)',
+	'layer-components:(flex flex-col gap-1 mt-0 bg-white py-2 px-3 rounded-lg rounded-bl-none rounded-tr-none w-auto mr-auto border border-solid border-gray-dark-blend text-md max-h-80px overflow-hidden text-ellipsis max-w-full text-inherit font-semibold relative z-1 transition-colors)',
 	'layer-components:[[data-compact=true]_&]:(py-1 text-sm)',
-	'layer-components:[[data-interactive=true]:hover>&]:(bg-darken-4)',
+	'layer-components:[[data-interactive=true]:hover>&]:(bg-darken-2)',
 );
 
 const CardContentRoot = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-lightBlend text-black rounded-md mx-2 my-0.5 border border-solid border-gray-darkBlend text-xs relative z-1)',
+	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-light-blend text-black rounded-md mx-2 my-0.5 border border-solid border-gray-dark-blend text-xs relative z-1)',
 	'layer-variants:[[data-compact=true]_&]:(py-0 px-1 my-0 text-xs)',
 	'layer-variants:[&[data-unstyled=true]]:(p-0 [background:unset] border-none)',
 );
@@ -90,7 +90,7 @@ export const CardFooter = withClassName(
 
 export const CardActions = withClassName(
 	'div',
-	'layer-components:(ml-0 mr-auto flex flex-row gap-2 items-center bg-white rounded-lg p-0 border border-solid border-grayDarkBlend)',
+	'layer-components:(ml-0 mr-auto flex flex-row gap-2 items-center bg-white rounded-lg p-0 border border-solid border-gray-dark-blend)',
 );
 
 export const CardMenu = withClassName(

package/src/components/checkbox/Checkbox.tsx

@@ -11,7 +11,7 @@ export const CheckboxRoot = withClassName(
 	classNames(
 		'layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border-default transition rounded-lg shadow-sm)',
 		'layer-components:focus-visible:(outline-off shadow-focus)',
-		'layer-components:[&[data-state=checked]]:(bg-primary-light border-primary-dark)',
+		'layer-components:[&[data-state=checked]]:(bg-primary border-primary-dark)',
 		'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]',
 		'layer-components:[&:disabled]:(bg-transparent border-gray-light shadow-none)',
 	),

package/src/components/datePicker/DatePicker.tsx

@@ -222,6 +222,7 @@ const CalendarDay = withClassName(
 	'disabled:(opacity-50 cursor-default)',
 	// today dot
 	"[&[data-today]]:before:(content-[''] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-lg bg-primary)",
+	// calendar edges
 	'[&[data-top-edge]]:(border-t-gray)',
 	'[&[data-bottom-edge]]:(border-b-gray)',
 	'[&[data-first-column]]:(border-l-gray)',

package/src/components/horizontalList/HorizontalList.tsx

@@ -68,9 +68,9 @@ export function HorizontalList({
 		}
 		const contentWidth = content.offsetWidth;
 		const containerHeight = container.offsetHeight;
-		if (open) {
+		const containerWidth = container.offsetWidth;
+		if (open && contentWidth > containerWidth) {
 			// measure content width and animate to container width
-			const containerWidth = container.offsetWidth;
 			rememberedWidth.current = contentWidth;
 			content.style.setProperty('width', `${containerWidth}px`);
 			content.style.setProperty('flex-wrap', 'wrap');
@@ -158,7 +158,7 @@ export function HorizontalList({
 				<div
 					className={clsx(
 						'layer-components:(px-3 pt-3 pb-4 gap-2)',
-						'flex flex-row gap-2 flex-shrink-0 w-max-content w-auto)',
+						'flex flex-row items-center gap-2 flex-shrink-0 w-max-content w-auto)',
 						contentClassName,
 					)}
 					ref={contentRef}

package/src/components/richEditor/index.tsx

@@ -5,9 +5,9 @@ export const tipTapClassName = clsx(
 	'layer-components:[&_.ProseMirror:focus]:(outline-none shadow-focus)',
 	'layer-components:[&_h1,h2,h3,p]:mt-0',
 	'layer-components:[&_h1]:(text-2xl font-semibold mb-md [&:not:first-child]:mt-xl)',
-	'layer-components:[&_h2]:(text-lg font-bold color-gray-dark color-darken-7 mb-md [&:not:first-child]:mt-lg)',
-	'layer-components:[&_h3]:(text-md font-500 color-gray-dark color-darken-5 mb-sm [&:not:first-child]:mt-md)',
-	'layer-components:[&_h4]:(text-xs color-gray-dark color-darken-3 mb-sm [&:not:first-child]:mt-md uppercase)',
+	'layer-components:[&_h2]:(text-lg font-bold color-gray-dark color-darken-4 mb-md [&:not:first-child]:mt-lg)',
+	'layer-components:[&_h3]:(text-md font-500 color-gray-dark color-darken-3 mb-sm [&:not:first-child]:mt-md)',
+	'layer-components:[&_h4]:(text-xs color-gray-dark color-darken-1 mb-sm [&:not:first-child]:mt-md uppercase)',
 	'layer-components:[&_p]:(mb-md mt-0)',
 	'layer-components:[&_a]:underline',
 	'layer-components:[&_blockquote]:(border-l-4 border-l-solid border-gray pl-4 mb-md mt-md ml-md)',

package/src/components/scrollArea/ScrollArea.tsx

@@ -20,7 +20,7 @@ export const ScrollAreaRoot = function ScrollAreaRoot({
 export const ScrollAreaViewport = withClassName(
 	Primitive.Viewport,
 	'h-full w-full',
-	'[background:linear-gradient(var(--v-bg)_30%,rgba(255,255,255,0))_center_top,linear-gradient(rgba(255,255,255,0),var(--v-bg)_70%)_center_bottom,radial-gradient(farthest-side_at_50%_0,hsl(from_var(--v-bg)_h_s_calc(l*0.9)),rgba(0,0,0,0))_center_top,radial-gradient(farthest-side_at_50%_100%,hsl(from_var(--v-bg)_h_s_calc(l*0.9)),rgba(0,0,0,0))_center_bottom]',
+	'[background:linear-gradient(var(--v-bg)_30%,rgba(255,255,255,0))_center_top,linear-gradient(rgba(255,255,255,0),var(--v-bg)_70%)_center_bottom,radial-gradient(farthest-side_at_50%_0,oklch(from_var(--v-bg)_calc(l*0.9)_c_h),rgba(0,0,0,0))_center_top,radial-gradient(farthest-side_at_50%_100%,oklch(from_var(--v-bg)_calc(l*0.9)_c_h),rgba(0,0,0,0))_center_bottom]',
 	'![background-repeat:no-repeat] ![background-size:100%_40px,100%_40px,100%_14px,100%_14px]',
 	'![background-attachment:local,local,scroll,scroll]',
 );

package/src/components/slider/Slider.tsx

@@ -22,8 +22,8 @@ export const SliderThumb = withClassName(
 	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 outline-none bg-accent-light)',
 	'layer-components:focus:(outline-none)',
 	'layer-components:disabled:(opacity-50)',
-	'layer-variants:[&[data-color=primary]]:active:(bg-primary-light ring-primary-dark)',
-	'layer-variants:[&[data-color=primary]]:focus-visible:(bg-primary-light ring-primary-dark)',
+	'layer-variants:[&[data-color=primary]]:active:(bg-primary ring-primary-dark)',
+	'layer-variants:[&[data-color=primary]]:focus-visible:(bg-primary ring-primary-dark)',
 );
 
 export interface SliderProps extends SliderPrimitive.SliderProps {

package/src/components/tabs/tabs.tsx

@@ -19,7 +19,7 @@ export const TabsTriggerBase = withClassName(
 
 const colorClasses = {
 	default: 'layer-variants:([--bg:var(--color-white)])',
-	primary: 'layer-variants:([--bg:var(--color-primary-light)])',
+	primary: 'layer-variants:([--bg:var(--color-primary)])',
 };
 
 export interface TabsTriggerProps

package/src/components/toggleGroup/toggleGroup.tsx

@@ -7,7 +7,7 @@ export const ToggleGroupRoot = withClassName(
 );
 export const ToggleGroupItem = withClassName(
 	ToggleGroupPrimitive.Item,
-	'rounded-xl color-black bg-gray-light py-sm px-md flex items-center border-none justify-center cursor-pointer hover:bg-darken-2 active:bg-darken-4 focus-visible:(shadow-focus outline-off) [&[data-state=on]]:(bg-primary-light border-black)',
+	'rounded-xl color-black bg-gray-light py-sm px-md flex items-center border-none justify-center cursor-pointer hover:bg-darken-1 active:bg-darken-2 focus-visible:(shadow-focus outline-off) [&[data-state=on]]:(bg-primary border-black)',
 );
 
 export const ToggleGroup = Object.assign(ToggleGroupRoot, {

package/src/components/typography/typography.tsx

@@ -9,17 +9,17 @@ export const H1 = withClassName(
 export const H2 = withClassName(
 	'h2',
 	baseHeadingClass,
-	'layer-components:(text-lg font-title font-bold color-inherit color-lighten-2)',
+	'layer-components:(text-lg font-title font-bold color-inherit color-lighten-1)',
 );
 export const H3 = withClassName(
 	'h3',
 	baseHeadingClass,
-	'layer-components:(font-title text-md font-500 color-inherit color-lighten-4)',
+	'layer-components:(font-title text-md font-500 color-inherit color-lighten-2)',
 );
 export const H4 = withClassName(
 	'h4',
 	baseHeadingClass,
-	'layer-components:(text-xs uppercase color-inherit color-lighten-6)',
+	'layer-components:(text-xs uppercase color-inherit color-lighten-2)',
 );
 export const H5 = withClassName('h5', baseHeadingClass);
 

package/src/themes.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import clsx from 'clsx';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { ActionBar, ActionButton } from './components/actions/index.js';
 import { Button } from './components/button/index.js';
 import { Card } from './components/card/index.js';
@@ -42,6 +42,7 @@ import {
 import { Input } from './components/input/index.js';
 import { Tabs } from './components/tabs/tabs.js';
 import { TextArea } from './components/textArea/index.js';
+import { useAnimationFrame } from './hooks.js';
 import { useOverrideTheme } from './hooks/useOverrideTheme.js';
 
 const meta = {
@@ -323,3 +324,96 @@ export const Override: Story = {
 		);
 	},
 };
+
+export const Custom: Story = {
+	render() {
+		const [theme, setTheme] = useState({
+			'--dyn-primary-source': 70,
+			'--dyn-accent-source': 290,
+			'--global-saturation': 0.5,
+			'--global-border-scale': 1.5,
+			'--global-spacing-scale': 1,
+			'--global-corner-scale': 1,
+			'--dyn-primary-hue-rotate': 0,
+			'--dyn-accent-hue-rotate': 0,
+		});
+		const reroll = () => {
+			setTheme({
+				'--dyn-primary-source': Math.floor(Math.random() * 360),
+				'--dyn-accent-source': 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,
+				'--dyn-primary-hue-rotate': Math.random() * 4 - 2,
+				'--dyn-accent-hue-rotate': Math.random() * 4 - 2,
+			});
+		};
+		return (
+			<Box d="col" gap items="start" style={theme as any}>
+				<Button onClick={reroll}>Reroll</Button>
+				<DemoUI className="theme" />
+			</Box>
+		);
+	},
+};
+
+export const Trippy: Story = {
+	render() {
+		const ref = useRef<HTMLDivElement>(null);
+		const values = useRef({
+			primarySource: 0,
+			accentSource: 180,
+			saturation: 0.5,
+			borderScale: 2,
+			spacingScale: 0.5,
+			cornerScale: 0.5,
+		});
+		useAnimationFrame((dt) => {
+			const current = ref.current;
+			if (!current) return;
+			values.current.primarySource =
+				(values.current.primarySource + dt / 100) % 360;
+			values.current.accentSource =
+				(values.current.accentSource + dt / 50) % 360;
+			values.current.saturation =
+				0.5 + 0.5 * Math.sin((Date.now() / 100000) * Math.PI * 2);
+			values.current.borderScale =
+				1.5 + 1.5 * Math.sin((Date.now() / 20000) * Math.PI * 2);
+			values.current.spacingScale =
+				1 + Math.sin((Date.now() / 50000) * Math.PI * 2);
+			values.current.cornerScale = 1 + Math.sin(Date.now() / 3000);
+			current.style.setProperty(
+				'--dyn-primary-source',
+				values.current.primarySource.toString(),
+			);
+			current.style.setProperty(
+				'--dyn-accent-source',
+				values.current.accentSource.toString(),
+			);
+			current.style.setProperty(
+				'--global-saturation',
+				values.current.saturation.toString(),
+			);
+			current.style.setProperty(
+				'--global-border-scale',
+				values.current.borderScale.toString(),
+			);
+			current.style.setProperty(
+				'--global-spacing-scale',
+				values.current.spacingScale.toString(),
+			);
+			current.style.setProperty(
+				'--global-corner-scale',
+				values.current.cornerScale.toString(),
+			);
+			current.style.setProperty('--dyn-primary-hue-rotate', '0');
+			current.style.setProperty('--dyn-accent-hue-rotate', '0');
+		});
+		return (
+			<div ref={ref}>
+				<DemoUI className="theme" />
+			</div>
+		);
+	},
+};

package/src/uno/colors.ts

@@ -0,0 +1,68 @@
+export const colorConstants = `
+	--dyn-saturation-x-wash: calc(pow(var(--global-saturation, 1), 0.6));
+	--dyn-saturation-x-light: calc(pow(var(--global-saturation, 1), 0.05));
+	--dyn-saturation-x-dark: calc(pow(var(--global-saturation, 1), 0.1));
+	--dyn-saturation-x-ink: calc(pow(var(--global-saturation, 1), 0.2));
+`;
+
+export const dynamicThemeComputedColors = (name: string) => `
+	--color-${name}: oklch(calc(90% - 35% * var(--dyn-source-mode-adjust, 0) - (var(--dyn-mode-sign, 1) * var(--dyn-${name}-base-dim, 0%))) calc(var(--dyn-${name}-sat-mult,1) * (35% - 2% * var(--dyn-source-mode-adjust, 0))) var(--dyn-${name}-source, 0));
+	--color-${name}-wash: oklch(from var(--color-${name}) calc(min(0.999,max(0.15, l + 0.15 * var(--dyn-mode-mult, 1)))) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.03)) calc(h - 5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
+	--color-${name}-light: oklch(from var(--color-${name}) calc(l + 0.08 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-light, 1) - 0.03)) calc(h - 0.5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
+	--color-${name}-dark: oklch(from var(--color-${name}) calc(l - 0.26 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-dark, 1) + 0.01)) calc(h + 0.2 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
+	--color-${name}-ink: oklch(from var(--color-${name}) calc(l - 0.45 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-ink, 1) + 0.01)) calc(h + 1 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
+
+	--color-${name}-gray: oklch(from var(--color-${name}) calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
+	--color-${name}-gray-wash: oklch(from var(--color-${name}-wash)  calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
+	--color-${name}-gray-light: oklch(from var(--color-${name}-light)  calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
+	--color-${name}-gray-dark: oklch(from var(--color-${name}-dark)  calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
+	--color-${name}-gray-ink: oklch(from var(--color-${name}-ink)  calc(l - 0.1 * var(--dyn-source-mode-adjust,0)) calc(c * 0.25 * var(--global-saturation, 1)) h);
+`;
+
+export const dynamicComputedVars = `
+${dynamicThemeComputedColors('primary')}
+${dynamicThemeComputedColors('accent')}
+
+--color-gray: var(--color-primary-gray);
+--color-gray-wash: var(--color-primary-gray-wash);
+--color-gray-light: var(--color-primary-gray-light);
+--color-gray-dark: var(--color-primary-gray-dark);
+--color-gray-ink: var(--color-primary-gray-ink);
+
+--color-wash: var(--color-gray-wash);
+--palette-black: var(--color-gray-ink);
+--palette-white: oklch(from var(--color-wash) calc(l + 1 / var(--dyn-mode-mult,1)) calc(c * var(--global-saturation, 1)/var(--dyn-mode-mult,1)) h);
+/* A dark-mode only contrast color */
+--color-dark-mode-contrast: oklch(from var(--color-gray-ink) l c h / calc(100% * var(--dyn-source-mode-adjust, 0)));
+`;
+
+export type DynamicThemeColor = {
+	hue: number;
+	hueRotate: number;
+	hueRotateMult?: number;
+	saturationMult?: number;
+	dim?: `${number}%`;
+};
+
+export function dynamicTheme({
+	primary,
+	accent,
+}: {
+	primary: DynamicThemeColor;
+	accent: DynamicThemeColor;
+}) {
+	return `
+	${colorConstants}
+--dyn-primary-hue-rotate: ${primary.hueRotate};
+--dyn-primary-source: ${primary.hue};
+--dyn-accent-hue-rotate: ${accent.hueRotate};
+--dyn-accent-source: ${accent.hue};
+--dyn-primary-hue-rotate-mult: ${primary.hueRotateMult ?? 1};
+--dyn-primary-sat-mult: ${primary.saturationMult ?? 1};
+--dyn-accent-hue-rotate-mult: ${accent.hueRotateMult ?? 1};
+--dyn-accent-sat-mult: ${accent.saturationMult ?? 1};
+--dyn-primary-base-dim: ${primary.dim ?? '0%'};
+--dyn-accent-base-dim: ${accent.dim ?? '0%'};
+${dynamicComputedVars}
+	`;
+}