@a-type/ui 2.8.13 → 3.0.1

package/src/components/note/Note.tsx

@@ -1,28 +1,36 @@
 import classNames from 'clsx';
 import { HTMLAttributes, ReactNode } from 'react';
+import { PaletteName } from '../../uno/logic/color.js';
 
 export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
 	children?: ReactNode;
+	color?: PaletteName;
 }
 
-export function Note({ className, children, ...rest }: NoteProps) {
+export function Note({ className, color, children, ...rest }: NoteProps) {
 	return (
-		<div className={classNames(className)} {...rest}>
+		<div
+			className={classNames(color && `palette-${color}`, className)}
+			{...rest}
+		>
 			<div className="layer-components:(flex flex-row)">
-				<div className="layer-components:(flex-1 p-2 border border-solid border-primary-dark bg-primary-wash color-black relative text-sm italic) layer-variants:border-r-0">
+				<div className="layer-components:(flex-1 p-2 border border-solid border-main-dark bg-main-wash bg-darken-1 color-black relative text-sm italic) layer-variants:border-r-0">
 					{children}
 				</div>
 				<div
 					className="layer-components:(flex flex-col items-stretch justify-stretch flex-[0_0_20px])"
 					aria-hidden
 				>
-					<div className="layer-components:(border-0 border-solid border-primary-dark flex-[0_0_20px] w-[20px] h-[20px] relative) layer-variants:(border-b-1px border-l-1px)">
-						<div className="layer-components:(absolute w-0.5px bg-primary-dark h-27px rotate--45 left-9px top--3px transform-origin-cc)" />
+					{/* folded corner */}
+					<div className="layer-components:(border-0 border-solid border-main-dark flex-[0_0_20px] w-[20px] h-[20px] relative) layer-variants:(border-b-1px border-l-1px)">
+						<div className="layer-components:(absolute w-0.5px bg-main-dark h-27px rotate--45 left-9px top--3px transform-origin-cc)" />
+						{/* top diagonal line */}
 						<div
-							className={`layer-components:(border-solid box-content border-transparent border-r-primary-wash border-13px w-0 h-0 rotate--45 translate--7px transform-origin-br)`}
+							className={`layer-components:(border-solid box-content border-transparent border-r-main-wash border-13px w-0 h-0 rotate--45 translate--7px transform-origin-br)`}
 						/>
 					</div>
-					<div className="layer-components:(bg-primary-wash flex-1 border-0 border-solid border-primary-dark) layer-variants:(border-r-1px border-b-1px)" />
+					{/* bottom right corner */}
+					<div className="layer-components:(bg-main-wash bg-darken-1 flex-1 border-0 border-solid border-main-dark) layer-variants:(border-r-1px border-b-1px)" />
 				</div>
 			</div>
 		</div>

package/src/components/numberStepper/NumberStepper.tsx

@@ -69,7 +69,7 @@ export function NumberStepper({
 			className={classNames(
 				'layer-components:(flex items-center border-solid border border-gray-dark rounded-lg overflow-hidden w-min-content flex-shrink-0 bg-white shadow-sm)',
 				disabled &&
-					'layer-variants:(border-gray-dark-blend bg-transparent shadow-none)',
+					'layer-variants:(border-gray-dark/80 bg-transparent shadow-none)',
 				{
 					'layer-variants:(bg-accent-wash color-black)':
 						!!highlightChange && value !== 1,
@@ -79,7 +79,7 @@ export function NumberStepper({
 			{...rest}
 		>
 			<Button
-				color="ghost"
+				emphasis="ghost"
 				onClick={decrement}
 				disabled={!canDecrement}
 				aria-label="Decrement value"
@@ -88,7 +88,7 @@ export function NumberStepper({
 			</Button>
 			<div className="w-80px text-center">{renderValue(value)}</div>
 			<Button
-				color="ghost"
+				emphasis="ghost"
 				onClick={increment}
 				disabled={!canIncrement}
 				aria-label="Increment value"

package/src/components/peek/Peek.tsx

@@ -81,7 +81,7 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 					className={classNames(
 						'h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-b-solid border-white',
 						'animate-fade-in',
-						'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-b-solid border-primary',
+						'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-b-solid border-main',
 						'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/popover/Popover.tsx

@@ -27,7 +27,7 @@ const StyledArrow = withClassName(
 
 const StyledClose = withClassName(
 	PopoverPrimitive.Close,
-	'layer-components:([all:unset] [font-family:inherit] rounded-lg h-25px w-25px inline-flex items-center justify-center color-dark-blend absolute top-5px right-5px hover:bg-lightBlend focus:shadow-focus)',
+	'layer-components:([all:unset] [font-family:inherit] rounded-lg h-25px w-25px inline-flex items-center justify-center color-gray-dark/80 absolute top-5px right-5px hover:bg-lightBlend focus:shadow-focus)',
 );
 
 // Exports

package/src/components/progress/Progress.tsx

@@ -1,5 +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';
 
 export const ProgressRoot = withClassName(
 	ProgressPrimitive.Root,
@@ -7,9 +9,8 @@ export const ProgressRoot = withClassName(
 );
 export const ProgressIndicator = withClassName(
 	ProgressPrimitive.Indicator,
-	'layer-components:(bg-primary w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-lg transition-transform)',
-	'layer-components:[&[data-state=complete]]:(bg-accent)',
-	'layer-variants:[&[data-color=accent]]:(bg-accent)',
+	'layer-components:(bg-main w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-lg transition-transform)',
+	'layer-components:[&[data-state=complete]]:(bg-success)',
 );
 
 const ProgressBase = function ProgressBase({
@@ -18,15 +19,21 @@ const ProgressBase = function ProgressBase({
 	color,
 	max = 100,
 	value,
+	className,
 	...props
 }: ProgressPrimitive.ProgressProps & {
 	ref?: React.Ref<HTMLDivElement>;
-	color?: 'accent';
+	color?: PaletteName;
 }) {
 	return (
-		<ProgressRoot {...props} value={value} max={max} ref={ref}>
+		<ProgressRoot
+			{...props}
+			className={clsx(color && `palette-${color}`, className)}
+			value={value}
+			max={max}
+			ref={ref}
+		>
 			<ProgressIndicator
-				data-color={color}
 				// @ts-ignore
 				style={{ '--value': (value || 0) / max }}
 			/>

package/src/components/richEditor/index.tsx

@@ -14,7 +14,7 @@ export const tipTapClassName = clsx(
 	'layer-components:[&_ul]:(list-disc pl-6 mb-md mt-md)',
 	'layer-components:[&_ol]:(list-decimal pl-6 mb-md mt-md)',
 	'layer-components:[&_li]:(mb-sm)',
-	'layer-components:[&_mark]:(bg-primary-wash bg-darken-2)',
+	'layer-components:[&_mark]:(bg-main-wash bg-darken-2)',
 	'layer-components:[&_strong]:(font-semibold)',
 	'layer-components:[&_em]:(italic)',
 	'layer-components:[&_hr]:(my-lg border-gray)',

package/src/components/select/Select.tsx

@@ -41,12 +41,12 @@ export const SelectItem = ({
 
 export const SelectItemRoot = withClassName(
 	SelectPrimitive.Item,
-	'layer-components:(text-md leading-4 color-black flex items-center flex-row h-36px pr-4 pl-35px relative select-none)',
-	'layer-components:[&[data-disabled]]:(color-gray pointer-events-none) [&[data-highlighted]]:(outline-none bg-gray bg-lighten-3 color-black)',
+	'layer-components:(text-md leading-4 color-black flex items-center flex-row h-36px pr-4 pl-35px min-h-touch relative select-none)',
+	'layer-components:[&[data-disabled]]:(color-gray pointer-events-none) [&[data-highlighted]]:(outline-none bg-gray-light color-black)',
 );
 export const SelectItemIndicatorRoot = withClassName(
 	SelectPrimitive.ItemIndicator,
-	'absolute left-0 w-25px inline-flex items-center justify-center',
+	'layer-components:(absolute left-0 w-25px inline-flex items-center justify-center)',
 );
 export const SelectItemIndicator = withNoNativeRender(
 	(props: SelectPrimitive.SelectItemIndicatorProps) => (
@@ -72,7 +72,7 @@ export const SelectGroup = (props: SelectPrimitive.SelectGroupProps) => {
 
 export const SelectRoot = SelectPrimitive.Root;
 export const selectTriggerClassName = classNames(
-	getButtonClassName({ color: 'default' }),
+	getButtonClassName({}),
 	'layer-components:([all:unset] inline-flex [&[data-placeholder]]:color-gray-dark)',
 );
 export const SelectTriggerBase = withNoNativeRender(
@@ -161,13 +161,13 @@ export const SelectContent = withPassthroughNativeRender(
 						{...props}
 						ref={forwardedRef}
 					>
-						<SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
+						<SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-25px bg-white color-main-dark cursor-default">
 							<Icon name="chevron" className="rotate-180" />
 						</SelectPrimitive.ScrollUpButton>
 						<SelectPrimitive.Viewport style={viewportStyle}>
 							{children}
 						</SelectPrimitive.Viewport>
-						<SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
+						<SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-25px bg-white color-main-dark cursor-default">
 							<Icon name="chevron" />
 						</SelectPrimitive.ScrollDownButton>
 					</SelectPrimitive.Content>

package/src/components/skeletons/TextSkeleton.stories.tsx

@@ -32,7 +32,7 @@ export const Default: Story = {
 export const OnBackground: Story = {
 	render(args) {
 		return (
-			<Box col gap p surface="attention" layout="start center">
+			<Box col gap p color="attention" surface layout="start center">
 				<TextSkeleton {...args} />
 				<TextSkeleton {...args} />
 				<TextSkeleton {...args} />

package/src/components/slider/Slider.tsx

@@ -1,5 +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';
 
 export const SliderRoot = withClassName(
 	SliderPrimitive.Root,
@@ -7,28 +9,25 @@ export const SliderRoot = withClassName(
 );
 export const SliderTrack = withClassName(
 	SliderPrimitive.Track,
-	'layer-components:(bg-transparent relative grow rounded-lg h-9px border borderpx border-solid border-black)',
+	'layer-components:(bg-transparent relative grow rounded-lg h-9px border border-1 border-solid border-black)',
 );
 export const SliderRange = withClassName(
 	SliderPrimitive.Range,
-	'layer-components:(absolute bg-accent rounded-lg h-full)',
-	'layer-variants:[&[data-color=primary]]:bg-primary',
+	'layer-components:(absolute bg-main rounded-lg h-full)',
 );
 export const SliderThumb = withClassName(
 	SliderPrimitive.Thumb,
-	'layer-components:(block w-5 h-5 bg-white shadow-sm rounded-lg ring-2 ring-black touch-none transition-all)',
+	'layer-components:(block cursor-pointer w-5 h-5 bg-white shadow-sm rounded-lg ring-2 ring-black touch-none transition-all)',
 	'layer-components:hover:(shadow-md)',
-	'layer-components:active:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 bg-accent-light)',
-	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent-dark ring-opacity-50 outline-none bg-accent-light)',
+	'layer-components:active:(shadow-lg ring-4 ring-main-dark ring-opacity-50 bg-main-light)',
+	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent ring-opacity-50 outline-none bg-main-light)',
 	'layer-components:focus:(outline-none)',
 	'layer-components:disabled:(opacity-50)',
-	'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 {
 	label?: string;
-	color?: 'default' | 'primary';
+	color?: PaletteName;
 }
 
 export const Slider = Object.assign(
@@ -36,12 +35,17 @@ export const Slider = Object.assign(
 		ref,
 		label,
 		color,
+		className,
 		...props
 	}: SliderProps & {
 		ref?: React.Ref<HTMLDivElement>;
 	}) {
 		return (
-			<SliderRoot ref={ref} {...props}>
+			<SliderRoot
+				ref={ref}
+				className={clsx(color && `palette-${color}`, className)}
+				{...props}
+			>
 				<SliderTrack>
 					<SliderRange data-color={color} />
 				</SliderTrack>

package/src/components/switch/Switch.tsx

@@ -3,12 +3,18 @@ import { withClassName } from '../../hooks/withClassName.js';
 
 const SwitchRoot = withClassName(
 	Root,
-	'unset w-42px h-25px bg-white rounded-lg relative transition-color border-default flex-shrink-0 focus-visible:shadow-focus [&[data-state=checked]]:bg-accent',
+	'layer-components:(unset transition-all cursor-pointer w-42px h-25px bg-white rounded-lg relative border-default flex-shrink-0 shadow-sm)',
+	'layer-components:[&[data-state=checked]]:bg-main',
+	'layer-components:hover:[&:not(:disabled)]:(bg-lighten-2 ring-2 ring-bg)',
+	'layer-components:active:[&:not(:disabled)]:(bg-darken-1 ring-4)',
+	'layer-components:focus:outline-none',
+	'layer-components:focus-visible:(ring-4 ring-accent outline-off)',
 );
 
 const SwitchThumb = withClassName(
 	Thumb,
-	'block w-21px h-21px bg-white rounded-lg border-default transition-transform will-change-transform [&[data-state=checked]]:translate-x-19px',
+	'layer-components:(block w-21px h-21px bg-white rounded-lg border-default transition-transform will-change-transform)',
+	'layer-components:[&[data-state=checked]]:translate-x-18px',
 );
 
 export const Switch = Object.assign(

package/src/components/tabs/tabs.stories.tsx

@@ -48,3 +48,25 @@ export const Default: Story = {
 		);
 	},
 } satisfies Story;
+
+export const WithManyTabs: Story = {
+	render: (args) => {
+		const [value, setValue] = useState('tab1');
+		return (
+			<TabsRoot value={value} onValueChange={setValue}>
+				<TabsList>
+					{Array.from({ length: 20 }).map((_, i) => (
+						<TabsTrigger key={i} value={`tab${i + 1}`} color={args.color}>
+							Tab {i + 1}
+						</TabsTrigger>
+					))}
+				</TabsList>
+				{Array.from({ length: 20 }).map((_, i) => (
+					<TabsContent key={i} value={`tab${i + 1}`}>
+						<div>Tab {i + 1} content</div>
+					</TabsContent>
+				))}
+			</TabsRoot>
+		);
+	},
+} satisfies Story;

package/src/components/tabs/tabs.tsx

@@ -6,20 +6,27 @@ export const TabsRoot = withClassName(TabsPrimitive.Root, '');
 
 export const TabsList = withClassName(
 	TabsPrimitive.List,
-	'flex flex-row flex-wrap py-2 px-2 items-start gap-2',
+	'layer-components:(flex flex-row items-start gap-2)',
+	'layer-components:(border border-thin border-color rounded-xl)',
+	'layer-components:(shadow-sm bg-white)',
+	'layer-components:(overflow-x-auto overflow-unstable w-max-content max-w-full)',
 );
 
 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 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)',
+	'layer-components:(flex flex-row items-center justify-center gap-2 py-xs px-lg)',
+	'layer-components:(transition-all cursor-pointer select-none)',
+	'layer-components:(text-center text-md font-semibold color-gray-ink font-inherit text-nowrap)',
+	'layer-components:(min-w-100px min-h-touch flex-shrink-0)',
+	'layer-components:(bg-transparent border border-transparent rounded-lg)',
+	'layer-components:hover:[&[data-state=inactive]]:(bg-gray-light bg-darken-1 ring-4 ring-bg)',
+	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-accent outline-off border border-black)',
+	'[&[data-state=active]]:(cursor-default border-gray-dark relative z-1)',
 );
 
 const colorClasses = {
-	default: 'layer-variants:([--bg:var(--color-white)])',
-	primary: 'layer-variants:([--bg:var(--color-primary)])',
+	default: 'layer-variants:[&[data-state=active]]:(bg-gray)',
+	primary: 'layer-variants:[&[data-state=active]]:(bg-main-light)',
 };
 
 export interface TabsTriggerProps

package/src/components/toggleGroup/toggleGroup.tsx

@@ -3,13 +3,15 @@ import { withClassName } from '../../hooks/withClassName.js';
 
 export const ToggleGroupRoot = withClassName(
 	ToggleGroupPrimitive.Root,
-	'layer-components:(inline-flex bg-gray-wash bg-darken-1 rounded-lg gap-sm)',
+	'layer-components:(inline-flex bg-main-light/20 rounded-lg gap-sm w-fit)',
 );
 export const ToggleGroupItem = withClassName(
 	ToggleGroupPrimitive.Item,
-	'layer-components:(rounded-full color-black bg-gray bg-lighten-3 py-sm px-md flex items-center border-transparent border-1 border-solid justify-center cursor-pointer)',
-	'layer-components:(hover:bg-lighten-2 active:bg-lighten-2 focus-visible:(ring-4 ring-primary outline-off))',
-	'layer-components:[&[data-state=on]]:(bg-primary-light border-default)',
+	'layer-components:(rounded-full text-nowrap transition-all color-black bg-gray/30 py-sm px-md flex items-center border-transparent border-1 border-solid justify-center cursor-pointer)',
+	'layer-components:hover:(bg-lighten-2 border-main-ink/20 ring-bg ring-2)',
+	'layer-components:active:(bg-darken-1 border-main-ink/30 ring-4)',
+	'layer-components:focus-visible:(ring-4 ring-accent outline-off)',
+	'layer-components:[&[data-state=on]]:(bg-main border-default shadow-sm hover:border-default)',
 );
 
 export const ToggleGroup = Object.assign(ToggleGroupRoot, {

package/src/components/viewport/Viewport.stories.tsx

@@ -20,7 +20,7 @@ const CenterButton = () => {
 	const viewport = useViewport();
 
 	return (
-		<Button color="ghost" size="small" onClick={() => viewport.recenter()}>
+		<Button emphasis="ghost" size="small" onClick={() => viewport.recenter()}>
 			<Icon name="locate" />
 		</Button>
 	);

package/src/components/viewport/ViewportZoomControls.tsx

@@ -32,17 +32,17 @@ export function ViewportZoomControls({
 	return (
 		<Box gap col className={clsx(className)} {...props}>
 			{fit && (
-				<Button color="ghost" size="small" onClick={reset}>
+				<Button emphasis="ghost" size="small" onClick={reset}>
 					<Icon name="maximize" />
 				</Button>
 			)}
 			{zoomIn && (
-				<Button color="ghost" size="small" onClick={doZoomIn}>
+				<Button emphasis="ghost" size="small" onClick={doZoomIn}>
 					<Icon name="zoomIn" />
 				</Button>
 			)}
 			{zoomOut && (
-				<Button color="ghost" size="small" onClick={doZoomOut}>
+				<Button emphasis="ghost" size="small" onClick={doZoomOut}>
 					<Icon name="zoomOut" />
 				</Button>
 			)}

package/src/themes.stories.tsx

@@ -43,7 +43,6 @@ 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 = {
@@ -68,17 +67,25 @@ function DemoUI({ className }: { className?: string }) {
 			<PageContent>
 				<div className={clsx('grid gap-2 grid-cols-2')}>
 					<Box gap wrap p>
-						<Button color="primary">Primary</Button>
-						<Button color="accent">Accent</Button>
+						<Button color="primary" emphasis="primary">
+							Primary
+						</Button>
+						<Button color="accent" emphasis="primary">
+							Accent
+						</Button>
 						<Button>Default</Button>
-						<Button color="contrast">Contrast</Button>
-						<Button color="destructive">Destructive</Button>
-						<Button color="ghost">Ghost</Button>
-						<Button color="ghostAccent">Ghost Accent</Button>
-						<Button size="small" color="destructive">
+						<Button emphasis="contrast">Contrast</Button>
+						<Button color="attention" emphasis="primary">
+							Destructive
+						</Button>
+						<Button emphasis="ghost">Ghost</Button>
+						<Button color="accent" emphasis="ghost">
+							Ghost Accent
+						</Button>
+						<Button size="small" color="attention" emphasis="primary">
 							Destructive Small
 						</Button>
-						<Button size="small" color="ghostDestructive">
+						<Button size="small" color="attention" emphasis="ghost">
 							Ghost Destructive Small
 						</Button>
 					</Box>
@@ -122,7 +129,7 @@ function DemoUI({ className }: { className?: string }) {
 							<Card.Footer>
 								<Card.Actions>
 									<Button size="small">Action 1</Button>
-									<Button size="small" color="ghost">
+									<Button size="small" emphasis="ghost">
 										<Icon name="placeholder" />
 									</Button>
 								</Card.Actions>
@@ -136,7 +143,7 @@ function DemoUI({ className }: { className?: string }) {
 							<Card.Footer>
 								<Card.Actions>
 									<Button size="small">Action 1</Button>
-									<Button size="small" color="ghost">
+									<Button size="small" emphasis="ghost">
 										<Icon name="placeholder" />
 									</Button>
 								</Card.Actions>
@@ -239,15 +246,16 @@ function DemoUI({ className }: { className?: string }) {
 						onChange={() => {}}
 					/>
 					<Progress value={50} className="m-auto" />
-					<Box surface="primary" p gap d="col">
+					<Box surface color="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>
+						<Button emphasis="ghost">Ghost</Button>
 					</Box>
 					<Box
-						surface="accent"
+						surface
+						color="accent"
 						p
 						d="col"
 						className="max-h-200px"
@@ -271,13 +279,14 @@ function DemoUI({ className }: { className?: string }) {
 						<TextSkeleton maxLength={10} />
 						Accent surface
 					</Box>
-					<Box surface="default" p d="col">
+					<Box surface p d="col">
 						Default surface
 					</Box>
-					<Box surface="attention" p d="col">
+					<Box surface color="attention" p d="col">
 						<H2>Attention surface</H2>
 						<H3>Attention surface</H3>
 						Attention surface
+						<Button emphasis="ghost">Ghost</Button>
 					</Box>
 					<Box>
 						<Note>Note note</Note>
@@ -303,7 +312,7 @@ function DemoUI({ className }: { className?: string }) {
 						</NavBarItemIconWrapper>
 						<NavBarItemText>Item 1 long</NavBarItemText>
 					</NavBarItem>
-					<NavBarItem active={true}>
+					<NavBarItem active>
 						<NavBarItemIconWrapper>
 							<NavBarItemIcon asChild>
 								<Icon name="book" />
@@ -312,7 +321,15 @@ function DemoUI({ className }: { className?: string }) {
 						<NavBarItemText>Item 2</NavBarItemText>
 						<NavBarItemPip />
 					</NavBarItem>
-					<NavBarItem color="neutral" active={true}>
+					<NavBarItem color="gray">
+						<NavBarItemIconWrapper>
+							<NavBarItemIcon asChild>
+								<Icon name="book" />
+							</NavBarItemIcon>
+						</NavBarItemIconWrapper>
+						<NavBarItemText>Neutral</NavBarItemText>
+					</NavBarItem>
+					<NavBarItem color="gray" active>
 						<NavBarItemIconWrapper>
 							<NavBarItemIcon asChild>
 								<Icon name="book" />
@@ -337,7 +354,7 @@ export const Nesting: Story = {
 	render() {
 		return (
 			<Box d="col" p gap>
-				<Box d="row" gap surface="primary">
+				<Box d="row" gap surface color="primary">
 					<Button color="primary">Root theme</Button>
 				</Box>
 				<DemoUI className="theme-eggplant override-dark flex-1" />
@@ -378,25 +395,21 @@ export const Override: Story = {
 export const Custom: Story = {
 	render() {
 		const [theme, setTheme] = useState({
-			'--dyn-primary-source': 70,
-			'--dyn-accent-source': 290,
+			'--p-primary-hue': 70,
+			'--p-accent-hue': 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),
+				'--p-primary-hue': Math.floor(Math.random() * 360),
+				'--p-accent-hue': 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 (
@@ -419,7 +432,8 @@ export const Trippy: Story = {
 			spacingScale: 0.5,
 			cornerScale: 0.5,
 		});
-		useAnimationFrame((dt) => {
+		const dt = 1000;
+		setInterval(() => {
 			const current = ref.current;
 			if (!current) return;
 			values.current.primarySource =
@@ -459,7 +473,7 @@ export const Trippy: Story = {
 			);
 			current.style.setProperty('--dyn-primary-hue-rotate', '0');
 			current.style.setProperty('--dyn-accent-hue-rotate', '0');
-		});
+		}, dt);
 		return (
 			<div ref={ref}>
 				<DemoUI className="theme" />