@a-type/ui 1.8.10 → 1.8.12

package/package.json

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

package/src/components/box/Box.tsx

@@ -172,11 +172,11 @@ export function Box({
 					'layer-components:(bg-white border-black)':
 						surface === true || surface === 'default',
 					'layer-components:(bg-wash border-black)': surface === 'wash',
-					'layer-components:(bg-primary-wash border-primary-dark color-primary-dark)':
+					'layer-components:(bg-primary-wash border-primary-dark color-primary-ink)':
 						surface === 'primary',
-					'layer-components:(bg-accent-wash border-accent-dark color-accent-dark)':
+					'layer-components:(bg-accent-wash border-accent-dark color-accent-ink)':
 						surface === 'accent',
-					'layer-components:(bg-attention-wash border-attention-dark color-attention-dark)':
+					'layer-components:(bg-attention-wash border-attention-dark color-attention-ink)':
 						surface === 'attention',
 					'layer-components:(border border-solid rounded-lg)': border,
 					'layer-components:w-full': full === true || full === 'width',

package/src/components/layouts/PageNowPlaying.tsx

@@ -26,16 +26,16 @@ export function PageNowPlaying({
 					// or at minimum in the safe area
 					'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]',
 					'layer-components:transition-bottom',
-					'layer-components:sm:(fixed bottom-3 left-[var(--content-left,20%)] transition-opacity top-auto items-end w-[var(--content-width,100%)] max-w-80vw p-0 opacity-[var(--content-ready,0)])',
+					'layer-components:md:(fixed bottom-3 left-[var(--content-left,20%)] transition-opacity top-auto items-end w-[var(--content-width,100%)] max-w-80vw p-0 opacity-[var(--content-ready,0)])',
 					unstyled
 						? 'layer-variants:p-2'
 						: 'layer-components:(bg-wash p-2px rounded-xl border-light shadow-md min-w-32px items-center justify-center m-2 w-auto)',
 					keepAboveKeyboard &&
 						virtualKeyboardBehavior === 'overlay' &&
-						'layer-variants:lt-sm:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]',
+						'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]',
 					keepAboveKeyboard &&
 						virtualKeyboardBehavior === 'displace' &&
-						'layer-variants:lt-sm:bottom-[max(var(--viewport-bottom-offset,0px),var(--nav-height,env(safe-area-inset-bottom,0px)))]',
+						'layer-variants:lt-md:bottom-[max(var(--viewport-bottom-offset,0px),var(--nav-height,env(safe-area-inset-bottom,0px)))]',
 					className,
 				)}
 			/>

package/src/components/navBar/NavBar.tsx

@@ -5,7 +5,7 @@ import { withClassName } from '../../hooks.js';
 import { Icon, IconProps } from '../icon/index.js';
 
 export const navBarItemClass = classNames(
-	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative color-black select-none)',
+	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-sm border-none cursor-pointer text-sm transition-colors h-full gap-6px relative color-black select-none)',
 	'layer-components:active:bg-darken-2',
 	'layer-components:hover:bg-darken-1',
 	'layer-components:focus-visible:(outline-none bg-darken-3)',

package/src/components/peek/Peek.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from '../box/Box.js';
+import { P } from '../typography/typography.js';
+import { Peek } from './Peek.js';
+
+const meta = {
+	title: 'Peek',
+	component: Peek,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Peek>;
+
+export default meta;
+
+type Story = StoryObj<typeof Peek>;
+
+export const Default: Story = {
+	render(args) {
+		return (
+			<Peek {...args}>
+				<Box d="col">
+					<P>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+						ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+						aliquip ex ea commodo consequat. Duis aute irure dolor in
+						reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+						pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+						culpa qui officia deserunt mollit anim id est laborum.
+					</P>
+					<P>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+						ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+						aliquip ex ea commodo consequat. Duis aute irure dolor in
+						reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+						pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+						culpa qui officia deserunt mollit anim id est laborum.
+					</P>
+					<P>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+						eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+						ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+						aliquip ex ea commodo consequat. Duis aute irure dolor in
+						reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+						pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+						culpa qui officia deserunt mollit anim id est laborum.
+					</P>
+				</Box>
+			</Peek>
+		);
+	},
+};

package/src/components/peek/Peek.tsx

@@ -1,6 +1,13 @@
 import { debounce } from '@a-type/utils';
 import classNames from 'clsx';
-import { ReactNode, useEffect, useId, useMemo, useRef, useState } from 'react';
+import {
+	ReactNode,
+	useId,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { useSize } from '../../hooks/useSize.js';
 import { useToggle } from '../../hooks/useToggle.js';
 
@@ -31,7 +38,7 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 
 	const [open, toggle] = useToggle(false);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (containerRef.current) {
 			containerRef.current.style.setProperty(
 				'--peek-height',
@@ -45,7 +52,7 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 	return (
 		<div
 			className={classNames(
-				'relative animate-ease-default animate-forwards overflow-hidden [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300 max-h-[var(--peek-height,120px)]) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600)',
+				'relative animate-ease-default animate-forwards overflow-hidden [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300 max-h-[var(--peek-height,120px)]) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600 animate-forwards)',
 				className,
 			)}
 			ref={containerRef}
@@ -58,8 +65,8 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 				<button
 					data-state={open ? 'open' : 'closed'}
 					className={classNames(
-						'h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-solid border-white',
-						'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-solid border-primary',
+						'h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-b-solid border-white',
+						'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-b-solid border-primary',
 						'after:(content-["-_tap_to_expand_-"] p-3 color-gray-dark text-xs flex flex-col justify-end items-center absolute inset-0 top-auto h-80px bg-gradient-to-b from-transparent to-white)',
 						'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]',
 					)}

package/src/components/scrollArea/ScrollArea.tsx

@@ -1,12 +1,8 @@
 import * as Primitive from '@radix-ui/react-scroll-area';
-import { Ref, useMemo } from 'react';
+import { Ref } from 'react';
 import { withClassName } from '../../hooks.js';
 
-const ScrollAreaRootImpl = withClassName(
-	Primitive.Root,
-	'overflow-hidden bg-[var(--scroll-bg)] rounded-lg',
-	'layer-components:([--scroll-bg:var(--color-wash)] [--scroll-shadow:var(--color-shadow-1))])',
-);
+const ScrollAreaRootImpl = withClassName(Primitive.Root, 'overflow-hidden');
 
 export interface ScrollAreaRootProps extends Primitive.ScrollAreaProps {
 	background?: 'white' | 'wash' | 'primary-wash' | 'primary' | 'black';
@@ -15,38 +11,31 @@ export interface ScrollAreaRootProps extends Primitive.ScrollAreaProps {
 
 export const ScrollAreaRoot = function ScrollAreaRoot({
 	ref,
-	background = 'wash',
+	background,
 	...props
 }: ScrollAreaRootProps) {
-	const bgStyle: any = useMemo(
-		() => ({
-			'--scroll-bg': `var(--color-${background})`,
-			'--scroll-shadow': `var(--color-${shadowMap[background]})`,
-		}),
-		[background],
-	);
-	return <ScrollAreaRootImpl ref={ref} style={bgStyle} {...props} />;
+	return <ScrollAreaRootImpl ref={ref} {...props} />;
 };
 
 export const ScrollAreaViewport = withClassName(
 	Primitive.Viewport,
 	'h-full w-full',
-	'[background:linear-gradient(var(--scroll-bg)_30%,rgba(255,255,255,0))_center_top,linear-gradient(rgba(255,255,255,0),var(--scroll-bg)_70%)_center_bottom,radial-gradient(farthest-side_at_50%_0,var(--scroll-shadow),rgba(0,0,0,0))_center_top,radial-gradient(farthest-side_at_50%_100%,var(--scroll-shadow),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,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-repeat:no-repeat] ![background-size:100%_40px,100%_40px,100%_14px,100%_14px]',
 	'![background-attachment:local,local,scroll,scroll]',
 );
 
 export const ScrollAreaScrollbarRoot = withClassName(
 	Primitive.Scrollbar,
-	'layer-components:(flex select-none touch-none p-0.5 bg-gray-wash transition-colors duration-160ms ease-out)',
-	'layer-components:hover:bg-lighten-1',
+	'layer-components:(flex select-none touch-none p-0.5 bg-inherit bg-lighten-4 transition-colors duration-160ms ease-out)',
+	// 'layer-components:hover:bg-lighten-4',
 	'layer-components:[&[data-orientation=vertical]]:w-2.5',
 	'layer-components:[&[data-orientation=horizontal]]:(flex-col h-2.5)',
 );
 
 export const ScrollAreaThumb = withClassName(
 	Primitive.Thumb,
-	'layer-components:(flex-1 rounded-lg relative bg-gray)',
+	'layer-components:(flex-1 rounded-lg relative bg-inherit bg-darken-8)',
 	'before:(content-[""] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full min-w-44px min-h-44px)',
 );
 

package/src/components/typography/typography.tsx

@@ -4,22 +4,22 @@ const baseHeadingClass = 'layer-components:my-0';
 export const H1 = withClassName(
 	'h1',
 	baseHeadingClass,
-	'layer-components:(font-title text-2xl font-semibold)',
+	'layer-components:(font-title text-2xl font-semibold color-inherit color-darken-1)',
 );
 export const H2 = withClassName(
 	'h2',
 	baseHeadingClass,
-	'layer-components:(text-lg font-title font-bold color-gray-dark color-darken-7)',
+	'layer-components:(text-lg font-title font-bold color-inherit color-lighten-2)',
 );
 export const H3 = withClassName(
 	'h3',
 	baseHeadingClass,
-	'layer-components:(font-title text-md font-500 color-gray-dark color-darken-5)',
+	'layer-components:(font-title text-md font-500 color-inherit color-lighten-4)',
 );
 export const H4 = withClassName(
 	'h4',
 	baseHeadingClass,
-	'layer-components:(text-xs uppercase color-gray-dark color-darken-3)',
+	'layer-components:(text-xs uppercase color-inherit color-lighten-6)',
 );
 export const H5 = withClassName('h5', baseHeadingClass);
 

package/src/themes.stories.tsx

@@ -33,6 +33,7 @@ import {
 	PageRoot,
 	Progress,
 	Provider,
+	ScrollArea,
 	TextSkeleton,
 	ThemeName,
 	ToggleGroup,
@@ -90,32 +91,50 @@ function DemoUI({ className }: { className?: string }) {
 							<ToggleGroup.Item value="2">Toggle 2</ToggleGroup.Item>
 						</ToggleGroup>
 					</Box>
-					<Box layout="start center" d="col" gap p>
-						<H1>Heading 1</H1>
-						<H2>Heading 2</H2>
-						<H3>Heading 3</H3>
-						<H4>Heading 4</H4>
-						<P>
-							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-							eiusmod tempor incididunt ut labore et dolore magna aliqua.
-						</P>
-						<TextSkeleton maxLength={30} />
-						<TextSkeleton maxLength={10} />
+					<Box layout="start center" d="col" gap p className="max-h-200px">
+						<ScrollArea>
+							<H1>Heading 1</H1>
+							<H2>Heading 2</H2>
+							<H3>Heading 3</H3>
+							<H4>Heading 4</H4>
+							<P>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+								eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							</P>
+							<TextSkeleton maxLength={30} />
+							<TextSkeleton maxLength={10} />
+						</ScrollArea>
+					</Box>
+					<Box d="col" gap>
+						<Card>
+							<Card.Main onClick={() => {}}>
+								<Card.Title>Card Title</Card.Title>
+								<Card.Content>Card Content</Card.Content>
+							</Card.Main>
+							<Card.Footer>
+								<Card.Actions>
+									<Button size="small">Action 1</Button>
+									<Button size="icon-small" color="ghost">
+										<Icon name="placeholder" />
+									</Button>
+								</Card.Actions>
+							</Card.Footer>
+						</Card>
+						<Card>
+							<Card.Main compact onClick={() => {}}>
+								<Card.Title>Card Title</Card.Title>
+								<Card.Content>Card Content</Card.Content>
+							</Card.Main>
+							<Card.Footer>
+								<Card.Actions>
+									<Button size="small">Action 1</Button>
+									<Button size="icon-small" color="ghost">
+										<Icon name="placeholder" />
+									</Button>
+								</Card.Actions>
+							</Card.Footer>
+						</Card>
 					</Box>
-					<Card>
-						<Card.Main onClick={() => {}}>
-							<Card.Title>Card Title</Card.Title>
-							<Card.Content>Card Content</Card.Content>
-						</Card.Main>
-						<Card.Footer>
-							<Card.Actions>
-								<Button size="small">Action 1</Button>
-								<Button size="icon-small" color="ghost">
-									<Icon name="placeholder" />
-								</Button>
-							</Card.Actions>
-						</Card.Footer>
-					</Card>
 					<Tabs defaultValue="tab1">
 						<Tabs.List>
 							<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
@@ -177,17 +196,40 @@ function DemoUI({ className }: { className?: string }) {
 						onChange={() => {}}
 					/>
 					<Progress value={50} className="m-auto" />
-					<Box surface="primary" p gap>
+					<Box surface="primary" p gap d="col">
+						<H1>Primary surface</H1>
+						<H2>Primary surface</H2>
+						<H3>Primary surface</H3>
 						<div>Primary surface</div>
 						<Button color="ghost">Ghost</Button>
 					</Box>
-					<Box surface="accent" p>
-						Accent surface
+					<Box surface="accent" p d="col" className="max-h-200px">
+						<ScrollArea>
+							<H2>Accent surface</H2>
+							<H3>Accent surface</H3>
+							<P>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+								eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							</P>
+							<P>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+								eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							</P>
+							<P>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+								eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							</P>
+							<TextSkeleton maxLength={30} />
+							<TextSkeleton maxLength={10} />
+							Accent surface
+						</ScrollArea>
 					</Box>
-					<Box surface="default" p>
+					<Box surface="default" p d="col">
 						Default surface
 					</Box>
-					<Box surface="attention" p>
+					<Box surface="attention" p d="col">
+						<H2>Attention surface</H2>
+						<H3>Attention surface</H3>
 						Attention surface
 					</Box>
 					<Box>

package/src/uno.preset.ts

@@ -20,8 +20,8 @@ export default function presetAglio({
 	scale = 'md',
 	interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
 	colorRanges = {
-		light: [90, 40],
-		dark: [0, 60],
+		light: [90, 20],
+		dark: [0, 80],
 	},
 	borderScale = 1,
 	roundedness = 1,
@@ -70,12 +70,14 @@ export default function presetAglio({
 					light: 'var(--color-attention-light)',
 					dark: 'var(--color-attention-dark)',
 					wash: 'var(--color-attention-wash)',
+					ink: 'var(--color-attention-ink)',
 				},
 				accent: {
 					DEFAULT: 'var(--color-accent)',
 					light: 'var(--color-accent-light)',
 					dark: 'var(--color-accent-dark)',
 					wash: 'var(--color-accent-wash)',
+					ink: 'var(--color-accent-ink)',
 				},
 				accentWash: 'var(--color-accent-wash)',
 				'accent-wash': 'var(--color-accent-wash)',
@@ -88,6 +90,7 @@ export default function presetAglio({
 					light: 'var(--color-primary-light)',
 					dark: 'var(--color-primary-dark)',
 					wash: 'var(--color-primary-wash)',
+					ink: 'var(--color-primary-ink)',
 				},
 				primaryLight: 'var(--color-primary-light)',
 				'primary-light': 'var(--color-primary-light)',
@@ -100,6 +103,7 @@ export default function presetAglio({
 					wash: 'var(--color-gray-wash)',
 					light: 'var(--color-gray-light)',
 					dark: 'var(--color-gray-dark)',
+					ink: 'var(--color-gray-ink)',
 					blend: 'var(--color-gray-blend)',
 				},
 				grayBlend: 'var(--color-gray-blend)',
@@ -135,11 +139,11 @@ export default function presetAglio({
 			},
 			spacing: makeSpacing(spacingIncrement),
 			borderRadius: {
-				xs: `calc(0.25rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
-				sm: `calc(0.5rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
-				md: `calc(1rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
-				lg: `calc(1.25rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
-				xl: `calc(1.5rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
+				xs: `calc(0.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
+				sm: `calc(0.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
+				md: `calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
+				lg: `calc(1.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
+				xl: `calc(1.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
 				full: cornerScale === 0 ? '0px' : '9999px',
 			},
 			lineWidth: {
@@ -418,10 +422,15 @@ export default function presetAglio({
 
 			[
 				/^color-(.*)$/,
-				(match, { theme }) => ({
-					color: 'var(--v-color-altered,var(--v-color))',
-					'--v-color': resolveThemeColor(match[1], theme),
-				}),
+				(match, { theme }) => {
+					if (match[1] === 'inherit') {
+						return { color: 'var(--v-color-altered,var(--v-color))' };
+					}
+					return {
+						color: 'var(--v-color-altered,var(--v-color))',
+						'--v-color': resolveThemeColor(match[1], theme),
+					};
+				},
 			],
 			[
 				/^color-lighten-(\d+\.?\d*)$/,
@@ -439,6 +448,9 @@ export default function presetAglio({
 				/^bg-(.*)$/,
 				(match, ctx) => {
 					const { theme } = ctx;
+					if (match[1] === 'inherit') {
+						return { 'background-color': 'var(--v-bg-altered,var(--v-bg))' };
+					}
 					const resolvedColor = resolveThemeColor(match[1], theme);
 					if (resolvedColor === null) {
 						return baseBgRule[1](match, ctx);
@@ -607,12 +619,13 @@ export default function presetAglio({
 					const lemon = themeVars({
 						primary: 'yellow',
 						accent: 'green',
-						grayTweak: -20,
+						grayTweak: -10,
 					});
 					const leek = themeVars({
 						primary: 'green',
 						accent: 'blue',
 						grayTweak: 20,
+						primaryWashSaturation: 0.95,
 					});
 					const tomato = themeVars({
 						primary: 'magenta',
@@ -636,6 +649,7 @@ export default function presetAglio({
 							wash: 'white',
 							light: 'true-gray-wash',
 							dark: 'true-gray',
+							ink: 'true-gray-dark',
 						},
 						globalSaturation: 0,
 					});
@@ -650,6 +664,7 @@ export default function presetAglio({
 				--color-gray: var(--palette-gray);
 				--color-gray-dark: var(--palette-gray-dark);
 				--color-gray-light: var(--palette-gray-light);
+				--color-gray-ink: var(--color-black);
 				--palette-gray-1: var(--color-gray-wash);
 				--palette-gray-2: var(--color-gray-light);
 				--palette-gray-3: var(--color-gray-light);
@@ -691,7 +706,7 @@ export default function presetAglio({
 					--palette-magenta-20: hsl(from #804020 calc(h - 20) s l);
 					--palette-magenta-10: hsl(from #702604 calc(h - 20) s l);
 					--palette-magenta-00: hsl(from rgb(37, 28, 25) calc(h - 20) s l);
-					--palette-green-90:rgb(242, 251, 247);
+					--palette-green-90:rgb(240, 255, 248);
 					--palette-green-80: #c2ffe9;
 					--palette-green-70: #92f2d1;
 					--palette-green-60: #86efc8;
@@ -963,7 +978,7 @@ function asPaletteValue(num: number) {
 	return roundTens(num).toString().padStart(2, '0');
 }
 function generateColors(from: number, to: number) {
-	const increment = (to - from) / 3;
+	const increment = (to - from) / 4;
 	const map = themeColors.reduce(
 		(acc, color) => {
 			acc[`--color-${color}-wash`] = `var(--palette-${color}-${asPaletteValue(
@@ -978,6 +993,9 @@ function generateColors(from: number, to: number) {
 			acc[`--color-${color}-dark`] = `var(--palette-${color}-${asPaletteValue(
 				from + roundTens(increment * 3),
 			)})`;
+			acc[`--color-${color}-ink`] = `var(--palette-${color}-${asPaletteValue(
+				from + roundTens(increment * 4),
+			)})`;
 			return acc;
 		},
 		{} as Record<string, string>,
@@ -1060,16 +1078,22 @@ function themeVars({
 	accent,
 	grayTweak,
 	globalSaturation,
+	primaryWashSaturation,
 }: {
 	primary: string | ExplicitColorRange;
 	accent: string | ExplicitColorRange;
 	grayTweak?: number;
 	globalSaturation?: number;
+	primaryWashSaturation?: number;
 }) {
 	return `
 	${themeVarRange({ name: 'attention', range: 'red' })}
 	${themeVarRange({ name: 'accent', range: accent })}
-	${themeVarRange({ name: 'primary', range: primary })}
+	${themeVarRange({
+		name: 'primary',
+		range: primary,
+		washSaturation: primaryWashSaturation,
+	})}
 
 	--gray-hue-tweak: ${grayTweak ?? 0};
 	${
@@ -1085,23 +1109,35 @@ type ExplicitColorRange = {
 	wash: string;
 	light: string;
 	dark: string;
+	ink: string;
 };
 function themeVarRange({
 	name,
 	range,
+	washSaturation = 1,
 }: {
 	name: string;
 	range: string | ExplicitColorRange;
+	washSaturation?: number;
 }) {
-	if (typeof range === 'string') {
-		return `--color-${name}: var(--color-${range});
---color-${name}-wash: var(--color-${range}-wash);
---color-${name}-light: var(--color-${range}-light);
---color-${name}-dark: var(--color-${range}-dark);`;
-	}
+	const realRange =
+		typeof range === 'string'
+			? {
+					default: range,
+					wash: `${range}-wash`,
+					light: `${range}-light`,
+					dark: `${range}-dark`,
+					ink: `${range}-ink`,
+			  }
+			: range;
 
-	return `--color-${name}: var(--color-${range.default});
---color-${name}-wash: var(--color-${range.wash});
---color-${name}-light: var(--color-${range.light});
---color-${name}-dark: var(--color-${range.dark});`;
+	return `--color-${name}: var(--color-${realRange.default});
+--color-${name}-wash: ${
+		washSaturation !== 1
+			? `hsl(from var(--color-${realRange.wash}) h calc(s * ${washSaturation}) l)`
+			: `var(--color-${realRange.wash})`
+	};
+--color-${name}-light: var(--color-${realRange.light});
+--color-${name}-dark: var(--color-${realRange.dark});
+--color-${name}-ink: var(--color-${realRange.ink});`;
 }