@a-type/ui 2.5.0 → 2.6.1

package/src/colors.stories.tsx

@@ -14,8 +14,8 @@ const meta = {
 		customRotate: {
 			control: {
 				type: 'range',
-				min: -180,
-				max: 180,
+				min: -20,
+				max: 20,
 			},
 		},
 	},
@@ -41,14 +41,52 @@ export const Default: Story = {
 			  }
 			: {};
 		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" />
-				<Range className="theme" style={style} />
+			<Box col>
+				<input type="color" className="sticky top-0 z-1" />
+				<Box full>
+					<Box d="col" grow p surface="default">
+						<Range className="theme" style={style} />
+						<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 className="h-100px">
+							<Box grow className="bg-gray-wash" />
+							<Box grow className="bg-gray-light" />
+							<Box grow className="bg-gray" />
+							<Box grow className="bg-gray-dark" />
+							<Box grow className="bg-gray-ink" />
+						</Box>
+						<Box className="h-100px">
+							<Box grow className="bg-black" />
+							<Box grow className="bg-wash" />
+							<Box grow className="bg-white" />
+						</Box>
+					</Box>
+					<Box d="col" className="override-dark theme" grow p surface="default">
+						<Range className="theme" style={style} />
+						<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 className="h-100px">
+							<Box grow className="bg-gray-wash" />
+							<Box grow className="bg-gray-light" />
+							<Box grow className="bg-gray" />
+							<Box grow className="bg-gray-dark" />
+							<Box grow className="bg-gray-ink" />
+						</Box>
+						<Box className="h-100px">
+							<Box grow className="bg-black" />
+							<Box grow className="bg-wash" />
+							<Box grow className="bg-white" />
+						</Box>
+					</Box>
+				</Box>
 			</Box>
 		);
 	},
@@ -65,11 +103,11 @@ function Swatch({
 		<div
 			className={className}
 			style={{
-				width: '100px',
 				height: '100px',
 				display: 'flex',
 				justifyContent: 'center',
 				alignItems: 'center',
+				flex: '1',
 			}}
 		>
 			{children}
@@ -148,7 +186,7 @@ export const Inheritance: Story = {
 		return (
 			<Box surface="primary" p="xl" className="theme" style={style}>
 				<Box
-					className="border-color-bg border-color-darken-5 color-bg color-darken-5"
+					className="border-bg border-darken-5 color-bg color-darken-5"
 					border
 					p="xl"
 				>
@@ -158,3 +196,73 @@ export const Inheritance: Story = {
 		);
 	},
 };
+
+export const TweakOpacity: Story = {
+	render() {
+		// none of these elements have root opacity; all opacity is done through colors
+		return (
+			<Box surface="accent" className="h-32" full="width" p gap>
+				<Box
+					className="bg-primary/100 h-full color-primary-dark/100 ring ring-primary-light/100 border border-black/100"
+					grow
+				>
+					100
+				</Box>
+				<Box
+					className="bg-primary/90 h-full color-primary-dark/90 ring ring-primary-light/90 border border-black/90"
+					grow
+				>
+					90
+				</Box>
+				<Box
+					className="bg-primary/80 h-full color-primary-dark/80 ring ring-primary-light/80 border border-black/80"
+					grow
+				>
+					80
+				</Box>
+				<Box
+					className="bg-primary/70 h-full color-primary-dark/70 ring ring-primary-light/70 border border-black/70"
+					grow
+				>
+					70
+				</Box>
+				<Box
+					className="bg-primary/60 h-full color-primary-dark/60 ring ring-primary-light/60 border border-black/60"
+					grow
+				>
+					60
+				</Box>
+				<Box
+					className="bg-primary/50 h-full color-primary-dark/50 ring ring-primary-light/50 border border-black/50"
+					grow
+				>
+					50
+				</Box>
+				<Box
+					className="bg-primary/40 h-full color-primary-dark/40 ring ring-primary-light/40 border border-black/40"
+					grow
+				>
+					40
+				</Box>
+				<Box
+					className="bg-primary/30 h-full color-primary-dark/30 ring ring-primary-light/30 border border-black/30"
+					grow
+				>
+					30
+				</Box>
+				<Box
+					className="bg-primary/20 h-full color-primary-dark/20 ring ring-primary-light/20 border border-black/20"
+					grow
+				>
+					20
+				</Box>
+				<Box
+					className="bg-primary/10 h-full color-primary-dark/10 ring ring-primary-light/10 border border-black/10"
+					grow
+				>
+					10
+				</Box>
+			</Box>
+		);
+	},
+};

package/src/components/button/classes.tsx

@@ -13,7 +13,7 @@ export function getButtonClassName({
 	align?: ButtonProps['align'];
 }) {
 	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-solid border-thin border-color-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-color-bg)',
+		'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-solid border-thin 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: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-1 ring-6)',
@@ -35,15 +35,15 @@ export function getButtonClassName({
 }
 
 const colors = {
-	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary)] shadow-sm color-black border-color-primary-dark)`,
+	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-color-attention-dark color-black ))`,
+	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-light)] color-accent-dark hover:color-black focus-visible:color-black)`,
-	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] color-white border-color-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-color-transparent 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)`,
+	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-transparent 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/camera/Camera.tsx

@@ -164,7 +164,7 @@ export function CameraRoot({
 				ref={ref}
 				className={classNames(
 					'override-light',
-					'layer-components:([font-family:inherit] text-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)',
+					'layer-components:([font-family:inherit] color-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)',
 					fullscreen && 'fixed inset-0 w-full h-full z-1000 rounded-none',
 					className,
 				)}
@@ -246,7 +246,7 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 			<Button
 				size="icon"
 				color="ghost"
-				className="absolute bottom-2 left-2 text-white"
+				className="absolute bottom-2 left-2 color-white"
 				onClick={swapCamera}
 			>
 				<Icon name="refresh" />
@@ -263,7 +263,7 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 				<Button
 					size="icon"
 					color="ghost"
-					className="absolute bottom-2 left-2 text-white"
+					className="absolute bottom-2 left-2 color-white"
 				>
 					<Icon name="refresh" />
 				</Button>
@@ -286,7 +286,7 @@ export const CameraFullscreenButton = (props: ButtonProps) => {
 			{...props}
 			size="icon"
 			color="ghost"
-			className="absolute top-2 right-2 text-white"
+			className="absolute top-2 right-2 color-white"
 			onClick={() => setFullscreen(!fullscreen)}
 		>
 			<Icon name={fullscreen ? 'x' : 'maximize'} />

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-1 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 color-black shadow-sm)',
 	'layer-variants:[&[data-borderless=true]]:(border-none shadow-md)',
 );
 
@@ -66,7 +66,7 @@ export const CardTitle = withClassName(
 
 const CardContentRoot = withClassName(
 	'div',
-	'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-components:(flex flex-col gap-1 px-2 py-1 bg-light-blend color-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)',
 );

package/src/components/chip/Chip.tsx

@@ -20,7 +20,7 @@ export function Chip({
 		<Component
 			ref={ref}
 			className={classNames(
-				'layer-components:(inline-flex flex-row gap-1 items-center whitespace-nowrap border-light border-solid border rounded-lg px-2 py-1 text-black)',
+				'layer-components:(inline-flex flex-row gap-1 items-center whitespace-nowrap border-light border-solid border rounded-lg px-2 py-1 clor-black)',
 				{
 					'layer-variants:bg-primary-wash': color === 'primary',
 					'layer-variants:bg-accent-wash': color === 'accent',

package/src/components/datePicker/DatePicker.tsx

@@ -210,15 +210,15 @@ const CalendarGrid = withClassName(
 
 const CalendarDay = withClassName(
 	BaseCalendarDay,
-	'border border-solid border-transparent bg-white mr--1px mb--1px relative text-black',
+	'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black',
 	'flex items-center justify-center transition cursor-pointer',
 	'[&[data-highlighted]]:(z-1 outline-accent)',
 	'hover:(z-1 outline-accent)',
-	'active:(bg-accent-wash rounded)',
-	'[&[data-selected]]:(bg-accent-light z-2 rounded)',
-	'[&[data-in-range]]:(bg-accent-wash bg-darken-1 rounded-none z-1)',
-	'[&[data-range-start]]:(bg-accent-light rounded-l rounded-r-none z-1)',
-	'[&[data-range-end]]:(bg-accent-light rounded-r rounded-l-none z-1)',
+	'active:(bg-accent-light rounded)',
+	'[&[data-selected]]:(bg-accent z-2 rounded)',
+	'[&[data-in-range]]:(bg-accent-wash bg-darken-2 rounded-none z-1)',
+	'[&[data-range-start]]:(bg-accent rounded-l rounded-r-none z-1)',
+	'[&[data-range-end]]:(bg-accent rounded-r rounded-l-none z-1)',
 	'disabled:(opacity-50 cursor-default)',
 	// today dot
 	"[&[data-today]]:before:(content-[''] absolute left-[2px] top-[2px] w-[6px] h-[6px] rounded-lg bg-primary)",
@@ -238,7 +238,7 @@ const CalendarDay = withClassName(
 
 const DayLabel = withClassName(
 	'div',
-	'flex items-center justify-center text-sm text-gray-dark',
+	'flex items-center justify-center text-sm color-gray-dark',
 );
 
 const DayLabels = () => (

package/src/components/dialog/Dialog.tsx

@@ -325,7 +325,7 @@ export const DialogSelectList = withClassName(
 export const DialogSelectItemRoot = withClassName(
 	RadioGroupPrimitive.Item,
 	'layer-components:(flex items-center gap-3 w-full py-3 px-4 text-left border-none rounded-lg font-normal bg-transparent [&:nth-child(2n+1)]:bg-gray-blend cursor-pointer transition-all)',
-	'layer-components:[&[data-state=checked]]:(bg-primary-wash text-primary-dark)',
+	'layer-components:[&[data-state=checked]]:(bg-primary-wash color-primary-dark)',
 );
 
 export const DialogSelectItem = function DialogSelectItem({

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -46,7 +46,7 @@ const StyledItem = ({
 			{...props}
 			className={clsx(
 				color === 'destructive' &&
-					'layer-variants:(text-attention-dark hover:bg-attention-wash focus-visible:bg-attention-wash)',
+					'layer-variants:(color-attention-dark hover:bg-attention-wash focus-visible:bg-attention-wash)',
 				className,
 			)}
 			ref={forwardedRef}

package/src/components/editableText/EditableText.tsx

@@ -102,7 +102,7 @@ export function EditableText({
 			onClick={() => setEditingFinal(true)}
 			className={clsx(
 				inputClassName,
-				'layer-variants:(border-transparent bg-transparent w-auto inline-flex items-center gap-2 font-size-inherit text-inherit shadow-none text-left)',
+				'layer-variants:(border-transparent bg-transparent w-auto inline-flex items-center gap-2 font-size-inherit color-inherit shadow-none text-left)',
 				'layer-variants:hover:(bg-gray-blend)',
 				'layer-variants:focus-visible:(outline-none bg-gray-dark-blend)',
 				'cursor-pointer',

package/src/components/forms/CheckboxField.tsx

@@ -43,5 +43,5 @@ const FieldRoot = withClassName(
 
 const FieldLabel = withClassName(
 	'label',
-	'layer-components:(inline-flex flex-col gap-1 text-md font-normal text-dark-blend mt-2px)',
+	'layer-components:(inline-flex flex-col gap-1 text-md font-normal color-dark-blend mt-2px)',
 );

package/src/components/forms/NumberStepperField.tsx

@@ -50,5 +50,5 @@ const FieldRoot = withClassName(
 
 const FieldLabel = withClassName(
 	'label',
-	'layer-components:(block flex-col gap-1 text-md font-normal text-dark-blend mt-2px)',
+	'layer-components:(block flex-col gap-1 text-md font-normal color-dark-blend mt-2px)',
 );

package/src/components/forms/TextField.tsx

@@ -139,5 +139,5 @@ export const FieldRoot = withClassName(
 );
 export const FieldLabel = withClassName(
 	'label',
-	'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
+	'inline-flex flex-col gap-1 text-sm font-bold color-dark-blend mb-1',
 );

package/src/components/imageUploader/ImageUploader.tsx

@@ -208,7 +208,7 @@ function ImageUploaderPrebuilt({
 						onClick={() => setCameraOpen(false)}
 						color="ghost"
 						size="small"
-						className="text-white absolute top-2 left-2"
+						className="color-white absolute top-2 left-2"
 					>
 						Cancel
 					</Button>

package/src/components/navBar/NavBar.tsx

@@ -9,7 +9,7 @@ export const navBarItemClass = classNames(
 	'layer-components:active:bg-darken-2',
 	'layer-components:hover:bg-darken-1',
 	'layer-components:focus-visible:(outline-none bg-darken-2)',
-	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-1 text-black)',
+	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-1 color-black)',
 	'layer-components:([--bg:var(--color-primary-wash)] [--fill:var(--color-primary)])',
 	'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)',
 );
@@ -43,7 +43,7 @@ export const NavBarItem = function NavBarItem({
 					'layer-variants:active:bg-gray-dark-blend layer-variants:md:active:bg-gray-dark-blend',
 					'layer-variants:hover:bg-gray-dark-blend',
 					'layer-variants:focus-visible:(bg-gray-dark-blend)',
-					'layer-variants:[&[data-active=true]]:(bg-gray-dark-blend text-black)',
+					'layer-variants:[&[data-active=true]]:(bg-gray-dark-blend color-black)',
 					'layer-variants:([--bg:var(--color-gray-blend)] [--fill:var(--color-gray)])',
 				],
 				className,
@@ -85,7 +85,7 @@ export const NavBarItemIcon = function NavBarItemIcon({
 		<Comp
 			name={name}
 			className={clsx(
-				'layer-components:(relative z-1 flex fill-none text-inherit)',
+				'layer-components:(relative z-1 flex fill-none color-inherit)',
 				'layer-variants:[*[data-active=true]_&]:fill-[var(--fill)]',
 				className,
 			)}

package/src/components/scrollArea/ScrollArea.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
 					{Array.from({ length: 100 }, (_, i) => (
 						<div
 							key={i}
-							className="h-10 w-full bg-primary-wash text-primary flex items-center justify-center"
+							className="h-10 w-full bg-primary-wash color-primary flex items-center justify-center"
 						>
 							Item {i + 1}
 						</div>
@@ -50,7 +50,7 @@ export const StickToBottom: Story = {
 						{Array.from({ length: itemCount }, (_, i) => (
 							<div
 								key={i}
-								className="h-10 w-full bg-primary-wash text-primary flex items-center justify-center"
+								className="h-10 w-full bg-primary-wash color-primary flex items-center justify-center"
 							>
 								Item {i + 1}
 							</div>

package/src/components/tabs/tabs.tsx

@@ -11,10 +11,10 @@ export const TabsList = withClassName(
 
 export const TabsTriggerBase = withClassName(
 	TabsPrimitive.Trigger,
-	'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold text-gray-dark-blend border-gray-dark transition-all cursor-pointer select-none font-inherit flex-shrink-0 shadow-sm)',
-	'layer-components:hover:(bg-darken-1 ring-4 ring-color-bg)',
-	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-color-bg outline-off)',
-	'[&[data-state=active]]:(bg-[var(--bg)] font-semibold text-black cursor-default hover:bg-darken-1 relative z-1)',
+	'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold color-gray-ink border-gray-dark transition-all cursor-pointer select-none font-inherit flex-shrink-0 shadow-sm)',
+	'layer-components:hover:(bg-darken-1 ring-4 ring-bg)',
+	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-bg outline-off)',
+	'[&[data-state=active]]:(bg-[var(--bg)] font-semibold color-black cursor-default hover:bg-darken-1 relative z-1)',
 );
 
 const colorClasses = {

package/src/components/textArea/TextArea.tsx

@@ -96,7 +96,7 @@ export const TextArea = function TextArea({
 			ref={finalRef}
 			className={classNames(
 				inputClassName,
-				'layer-components:([font-family:inherit] text-inherit overflow-hidden resize-none)',
+				'layer-components:([font-family:inherit] color-inherit overflow-hidden resize-none)',
 				'layer-variants:(rounded-lg px-4 py-4)',
 				{
 					'layer-components:[resize:vertical]': !autoSize,

package/src/components/tooltip/Tooltip.tsx

@@ -26,10 +26,10 @@ function Content({
 						'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
 						'layer-components:[&[data-state=delayed-open]]:animate-popover-in',
 						{
-							'layer-variants:(bg-black text-white)': color === 'contrast',
-							'layer-variants:(bg-white text-black)':
+							'layer-variants:(bg-black color-white)': color === 'contrast',
+							'layer-variants:(bg-white color-black)':
 								color === 'white' || color === 'neutral',
-							'layer-variants:(bg-attention-ink text-white)':
+							'layer-variants:(bg-attention-ink color-white)':
 								color === 'attention',
 						},
 						className,

package/src/uno/colors.ts

@@ -5,19 +5,34 @@ export const colorConstants = `
 	--dyn-saturation-x-ink: calc(pow(var(--global-saturation, 1), 0.2));
 `;
 
-export const dynamicThemeComputedColors = (name: string) => `
+const lightness = {
+	wash: `calc(1 + 0.45 * var(--dyn-mode-mult, 1))`,
+	light: `calc(1 + 0.25 * var(--dyn-mode-mult, 1))`,
+	dark: `calc(1 - 0.25 * var(--dyn-mode-mult, 1))`,
+	ink: `calc(1 - 0.45 * var(--dyn-mode-mult, 1))`,
+};
+
+export const dynamicThemeComputedColors = (name: string) => {
+	const hue = {
+		wash: `calc(h - 1 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1))`,
+		light: `calc(h - 0.5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1))`,
+		dark: `calc(h + 0.2 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1))`,
+		ink: `calc(h + 1 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1))`,
+	};
+	return `
 	--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.06)) 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.25 * 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.25 * 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}-wash: oklch(from var(--color-${name}) calc(l * ${lightness.wash}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.06)) ${hue.wash});
+	--color-${name}-light: oklch(from var(--color-${name}) calc(l * ${lightness.light}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-light, 1) - 0.03)) ${hue.light});
+	--color-${name}-dark: oklch(from var(--color-${name}) calc(l * ${lightness.dark}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-dark, 1) + 0.01)) ${hue.dark});
+	--color-${name}-ink: oklch(from var(--color-${name}) calc(l * ${lightness.ink}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-ink, 1) + 0.01)) ${hue.ink});
 
-	--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);
+	--color-${name}-gray: oklch(from var(--color-${name}) l calc(c * 0.1 * var(--global-saturation, 1)) h);
+	--color-${name}-gray-wash: oklch(from var(--color-${name}-gray) calc(l * ${lightness.wash}) calc(c * 0.9) ${hue.wash});
+	--color-${name}-gray-light: oklch(from var(--color-${name}-gray) calc(l * ${lightness.light}) c ${hue.light});
+	--color-${name}-gray-dark: oklch(from var(--color-${name}-gray) calc(l * ${lightness.dark}) c ${hue.dark});
+	--color-${name}-gray-ink: oklch(from var(--color-${name}-gray) calc(l * ${lightness.ink}) c ${hue.ink});
 `;
+};
 
 export const dynamicComputedVars = `
 ${dynamicThemeComputedColors('primary')}
@@ -31,7 +46,7 @@ ${dynamicThemeComputedColors('accent')}
 
 --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);
+--palette-white: oklch(from var(--color-wash) calc(0.999 * var(--dyn-mode-mult,1)) calc(c * var(--global-saturation, 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)));
 `;
@@ -131,7 +146,7 @@ function mod(base: string, level: string, sign: number) {
 	return (
 		`oklch(from ` +
 		base +
-		` calc(l * (1 + pow(${level}, 1) / 30 * ${sign} * var(--dyn-mode-mult, 1)))` +
+		` calc(l * (1 + ${level} / 60 * ${sign} * var(--dyn-mode-mult, 1)))` +
 		` calc(c * (1 - (${level} * 0.1 * ${sign} * (1 + (1 - var(--global-saturation, 0))))))` +
 		` h)`
 	);