@a-type/ui 2.8.13 → 3.0.0

package/src/components/button/classes.tsx

@@ -1,80 +1,86 @@
 import clsx from 'clsx';
+import { PaletteName } from '../../uno/logic/color.js';
 import { type ButtonProps } from './Button.jsx';
 
-const sizeMap = {
-	default: 'default',
-	small: 'small',
-	icon: 'default',
-	'icon-small': 'small',
-} satisfies Record<string, 'default' | 'small'>;
-
 export function getButtonClassName({
 	color,
-	size: rawSize,
+	emphasis = 'default',
+	size = 'default',
 	toggleable,
 	align,
 	disableIconMode,
 }: {
-	color?: ButtonProps['color'];
+	color?: PaletteName;
+	emphasis?: ButtonProps['emphasis'];
 	size?: ButtonProps['size'];
 	toggleable?: boolean;
 	align?: ButtonProps['align'];
 	disableIconMode?: boolean;
 }) {
-	const size = sizeMap[rawSize ?? 'default'];
+	if (emphasis === 'unstyled') {
+		return clsx(
+			'layer-components:(p-0 m-0 border-none bg-transparent appearance-none)',
+			'layer-components:(cursor-pointer)',
+			'layer-components:focus:outline-off',
+		);
+	}
 
 	return clsx(
-		'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-sm 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)',
+		color && `palette-${color}`,
+		'layer-components:(px-4 py-2)',
+		'layer-components:(leading-none text-md font-inherit font-bold select-none)',
+		'layer-components:(border-solid border-thin border-color rounded-lg)',
+		'layer-components:(cursor-pointer)',
+		'layer-components:(flex flex-row gap-sm items-center)',
+		'layer-components:(relative overflow-visible whitespace-nowrap)',
+		'layer-components:(transition-all duration-200)',
+		'layer-components:(shadow-sm ring-bg)',
+		'layer-components:(color-contrast)',
+
+		emphasis === 'ghost' && 'layer-variants:(shadow-none border-none)',
+		emphasis === 'contrast' && 'layer-variants:(border-bg hover:bg-gray-ink)',
+
+		{
+			'layer-components:bg-main': emphasis === 'primary',
+			'layer-components:(bg-main-light color-main-ink)': emphasis === 'light',
+			'layer-components:bg-white layer-variants:focus-visible:bg-white':
+				emphasis === 'default',
+			'layer-components:(bg-transparent aria-pressed:bg-main-wash)':
+				emphasis === 'ghost',
+			'layer-components:(bg-black)': emphasis === 'contrast',
+		},
+		color === 'gray' && '[--l-saturation:0] hov',
+
+		{
+			'layer-components:(px-4 py-1 text-sm rounded-md)': size === 'small',
+			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 text-sm rounded-lg)':
+				size === 'default' && !disableIconMode,
+			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-2 text-xs rounded-lg -m-y-0.5)':
+				size === 'small' && !disableIconMode,
+		},
+
+		'layer-components:hover:(bg-main bg-lighten-2 ring-4)',
+
 		'layer-components:focus:outline-off',
-		'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)',
-		'layer-components:disabled:(opacity-50 cursor-default bg-[var(--bg)] shadow-none ring-none)',
-		'layer-components:[&[data-disabled=true]]:(opacity-50 cursor-default bg-[var(--bg)] shadow-none)',
-		colors[color ?? 'default'],
-		`btn-color-${color ?? 'default'}`,
-		sizes[size ?? 'default'],
-		disableIconMode ? '' : iconModeSizes[size ?? 'default'],
-		`size-${size ?? 'default'}`,
-		toggleable && toggledClass,
-		align && aligns[align],
-		// compound variants
-		color === 'ghost' &&
-			toggleable &&
-			'layer-variants:[aria-pressed="true"]:[--bg:var(--color-primary-wash)]',
-	);
-}
+		'layer-components:focus-visible:(outline-off ring-accent ring-6)',
+		'layer-components:[&[data-focus=true]]:(ring-6 ring-accent outline-off)',
+
+		'layer-components:active:(bg-darken-1 ring-8)',
 
-const colors = {
-	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)] bg-lighten-1 shadow-sm color-black border-gray-dark focus-visible:bg-lighten-1 hover:bg-lighten-1)`,
-	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-light)] color-accent-dark hover:color-black focus-visible:color-black)`,
-	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;
+		'layer-components:disabled:(opacity-50 cursor-default shadow-none ring-none)',
+		'layer-components:[&[data-disabled=true]]:(opacity-50 cursor-default shadow-none)',
 
-const sizes = {
-	default: '',
-	small: 'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-md)',
-};
-const iconModeSizes = {
-	default:
-		'layer-variants:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 text-sm rounded-lg)',
-	small:
-		'layer-variants:[&.size-small[data-has-icon=true][data-has-label=false]]:(p-2 text-xs rounded-lg -m-y-0.5)',
-};
+		{
+			'layer-variants:[&[aria-pressed=false]]:[&:not(:hover)]:bg-transparent':
+				toggleable,
+		},
 
-const toggledClass =
-	'layer-variants:(bg-transparent aria-pressed:bg-[var(--bg)] hover:(filter-brightness-[1.1]))';
+		{
+			'layer-components:self-start': align === 'start',
+			'layer-components:self-stretch': align === 'stretch',
+			'layer-components:self-end': align === 'end',
+		},
 
-const aligns = {
-	start: 'self-start',
-	stretch: 'self-stretch',
-	end: 'self-end',
-};
+		`size-${size ?? 'default'}`,
+	);
+}

package/src/components/camera/Camera.tsx

@@ -217,7 +217,7 @@ const StyledShutterButton = withClassName(
 	'absolute bottom-3 left-1/2 -translate-x-1/2 w-16 h-16 bg-white rounded-full cursor-pointer border-2 border-black border-solid ring-2 ring-white opacity-80',
 	'hover:bg-gray-wash hover:opacity-100',
 	'focus-visible:bg-lighten-1',
-	'focus:ring-primary focus:outline-none focus:opacity-100',
+	'focus:ring-accent focus:outline-none focus:opacity-100',
 	'sm:w-8 sm:h-8',
 );
 
@@ -244,7 +244,7 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 	if (devices.length === 2) {
 		return (
 			<Button
-				color="ghost"
+				emphasis="ghost"
 				className="absolute bottom-2 left-2 color-white"
 				onClick={swapCamera}
 			>
@@ -259,7 +259,10 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 			onValueChange={selectDeviceId}
 		>
 			<Select.Trigger asChild>
-				<Button color="ghost" className="absolute bottom-2 left-2 color-white">
+				<Button
+					emphasis="ghost"
+					className="absolute bottom-2 left-2 color-white"
+				>
 					<Icon name="refresh" />
 				</Button>
 			</Select.Trigger>
@@ -279,7 +282,7 @@ export const CameraFullscreenButton = (props: ButtonProps) => {
 	return (
 		<Button
 			{...props}
-			color="ghost"
+			emphasis="ghost"
 			className="absolute top-2 right-2 color-white"
 			onClick={() => setFullscreen(!fullscreen)}
 		>

package/src/components/card/Card.stories.tsx

@@ -51,7 +51,7 @@ export const Default: Story = {
 						</Button>
 					</CardActions>
 					<CardMenu>
-						<Button size="small" color="ghost">
+						<Button size="small" emphasis="ghost">
 							<Icon name="dots" />
 						</Button>
 					</CardMenu>
@@ -68,7 +68,7 @@ export const Default: Story = {
 				<CardFooter>
 					<CardActions>
 						<Button size="small">Button</Button>
-						<Button size="small" color="ghost">
+						<Button size="small" emphasis="ghost">
 							<Icon name="placeholder" />
 						</Button>
 					</CardActions>
@@ -89,7 +89,7 @@ export const Compact: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button size="small" color="ghost">
+					<Button size="small" emphasis="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -108,7 +108,7 @@ export const NonInteractive: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button color="ghost">
+					<Button emphasis="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -129,7 +129,7 @@ export const AsChild: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button color="ghost">
+					<Button emphasis="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -150,7 +150,7 @@ export const AsChildNonInteractive: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button color="ghost">
+					<Button emphasis="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -249,7 +249,7 @@ export const VisuallyFocused: Story = {
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
-					<Button color="ghost">
+					<Button emphasis="ghost">
 						<Icon name="placeholder" />
 					</Button>
 				</CardActions>
@@ -270,7 +270,7 @@ export const CardsInBox: Story = {
 					<CardFooter>
 						<CardActions>
 							<Button size="small">Button</Button>
-							<Button color="ghost">
+							<Button emphasis="ghost">
 								<Icon name="placeholder" />
 							</Button>
 						</CardActions>
@@ -284,7 +284,7 @@ export const CardsInBox: Story = {
 					<CardFooter>
 						<CardActions>
 							<Button size="small">Button</Button>
-							<Button color="ghost">
+							<Button emphasis="ghost">
 								<Icon name="placeholder" />
 							</Button>
 						</CardActions>

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 color-black shadow-sm)',
+	'layer-components:(flex flex-col border-light rounded-lg text-lg overflow-hidden h-max-content relative bg-wash bg-darken-0.5 color-black shadow-sm)',
 	'layer-variants:[&[data-borderless=true]]:(border-none shadow-md)',
 );
 
@@ -41,10 +41,13 @@ export function CardMain({
 				!!compact && 'layer-variants:(pb-0)',
 				isInteractive &&
 					classNames(
-						'layer-components:cursor-pointer layer-components:hover:(bg-gray-blend color-black shadow-sm-inset) layer-components:focus:outline-none',
-						'layer-components:focus-visible:(outline-none ring-inset ring-4 ring-gray)',
-						'layer-components:[&[data-visually-focused=true]]:(ring-inset ring-4 ring-gray)',
-						'layer-components:[&[data-visually-disabled=true]]:(cursor-default) layer-components:disabled:(cursor-default)',
+						'layer-components:cursor-pointer',
+						'layer-components:hover:(bg-black/10 color-black)',
+						'layer-components:focus:outline-none',
+						'layer-components:focus-visible:(outline-none bg-black/10 ring-inset ring-4 ring-accent)',
+						'layer-components:[&[data-visually-focused=true]]:(bg-black/10 ring-inset ring-4 ring-accent)',
+						'layer-components:disabled:(cursor-default)',
+						'layer-components:[&[data-visually-disabled=true]]:(cursor-default)',
 					),
 				className,
 			)}
@@ -59,14 +62,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-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:(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/50 border-t-none border-l-none 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-2)',
 );
 
 const CardContentRoot = withClassName(
 	'div',
-	'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-components:(flex flex-col gap-1 px-2 py-1 bg-white/80 color-black rounded-md mx-2 my-0.5 border border-solid border-gray-dark/50 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,12 +93,12 @@ 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-gray-dark-blend)',
+	'layer-components:(ml-0 mr-auto flex flex-row gap-2 items-center bg-white/50 rounded-lg p-0 border border-solid border-gray-dark/50)',
 );
 
 export const CardMenu = withClassName(
 	'div',
-	'layer-components:(mr-0 ml-auto my-auto flex flex-row gap-1 items-center bg-overlay py-0.5 rounded-lg p-0)',
+	'layer-components:(mr-0 ml-auto my-auto flex flex-row gap-1 items-center bg-white/50 py-0.5 rounded-lg p-0)',
 );
 
 export const cardGridColumns = {

package/src/components/checkbox/Checkbox.tsx

@@ -25,12 +25,13 @@ export function CheckboxRoot({
 		<CheckboxPrimitive.Root
 			{...props}
 			className={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 ring-4 ring-primary)',
+				'layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border border-default transition-all rounded-lg shadow-sm cursor-pointer)',
+				'layer-components:focus-visible:(outline-off ring-4 ring-accent)',
 				checkedMode === 'faded'
-					? 'layer-components:[&[data-state=checked]]:(bg-primary animate-checkbox-fade animate-forwards)'
-					: '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:[&[data-state=checked]]:(bg-main animate-checkbox-fade animate-forwards)'
+					: 'layer-components:[&[data-state=checked]]:(bg-main border-main-ink)',
+				'layer-components:[&:hover:not(:disabled)]:(bg-lighten-2 ring-bg ring-2)',
+				'layer-components:[&:active:not(:disabled)]:(bg-darken-1 ring-4)',
 				'layer-components:[&:disabled]:(bg-transparent border-gray-light shadow-none)',
 				className,
 			)}

package/src/components/chip/Chip.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Chip } from './Chip.js';
+
+const meta = {
+	title: 'Components/Chip',
+	component: Chip,
+	argTypes: {},
+	args: {
+		children: 'Chip',
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+	render(args) {
+		return <Chip {...args} />;
+	},
+};
+
+export const Colors: Story = {
+	render() {
+		return (
+			<div style={{ display: 'flex', gap: '12px' }}>
+				<Chip color="gray">Gray</Chip>
+				<Chip color="primary">Primary</Chip>
+				<Chip color="accent">Accent</Chip>
+				<Chip color="attention">Attention</Chip>
+				<Chip color="success">Success</Chip>
+				<Chip color="lemon">Lemon</Chip>
+				<Chip color="leek">Leek</Chip>
+				<Chip color="tomato">Tomato</Chip>
+				<Chip color="blueberry">Blueberry</Chip>
+				<Chip color="eggplant">Eggplant</Chip>
+			</div>
+		);
+	},
+};
+
+export const AsButton: Story = {
+	render() {
+		return (
+			<Box gap items="center">
+				<Button asChild>
+					<Chip color="primary">Clickable Chip</Chip>
+				</Button>
+				<Chip>Non-clickable Chip</Chip>
+			</Box>
+		);
+	},
+};

package/src/components/chip/Chip.tsx

@@ -1,32 +1,27 @@
 import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
 import { HTMLAttributes, Ref } from 'react';
+import { PaletteName } from '../../uno/logic/color.js';
 
 export interface ChipProps extends HTMLAttributes<HTMLElement> {
-	color?: 'neutral' | 'primary' | 'accent';
+	color?: PaletteName;
 	asChild?: boolean;
 	ref?: Ref<any>;
 }
 
-export function Chip({
-	className,
-	color = 'neutral',
-	asChild,
-	ref,
-	...rest
-}: ChipProps) {
+export function Chip({ className, color, asChild, ref, ...rest }: ChipProps) {
 	const Component = asChild ? Slot : 'div';
 	return (
 		<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 clor-black)',
-				{
-					'layer-variants:bg-primary-wash': color === 'primary',
-					'layer-variants:bg-accent-wash': color === 'accent',
-				},
+				color && `palette-${color}`,
+				'layer-composed:(inline-flex flex-row gap-1 items-center whitespace-nowrap)',
+				'layer-composed:(bg-main-wash color-contrast border-light border-solid border rounded-lg)',
+				'layer-composed:(px-sm py-xs text-xs)',
 				className,
 			)}
+			role={rest.onClick ? 'button' : undefined}
 			{...rest}
 		/>
 	);

package/src/components/colorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorPicker } from './ColorPicker.js';
+
+const meta = {
+	title: 'Components/ColorPicker',
+	component: ColorPicker,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof ColorPicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof ColorPicker>;
+
+export const Default: Story = {
+	render(args) {
+		return <ColorPicker {...args} />;
+	},
+};

package/src/components/colorPicker/ColorPicker.tsx

@@ -32,13 +32,14 @@ export function ColorPicker({ value, onChange, showSalt }: ColorPickerProps) {
 		'leek',
 		'blueberry',
 		'eggplant',
+		'salt',
 	].includes(value || '')
 		? (value as ThemeName)
 		: 'lemon';
 
 	return (
 		<Select value={resolvedValue} onValueChange={onChange}>
-			<SelectTrigger>
+			<SelectTrigger className="layer-composed:p-sm">
 				<SelectValue />
 			</SelectTrigger>
 			<SelectContent className="z-[calc(var(--z-dialog)+1)]">

package/src/components/contextMenu/contextMenu.tsx

@@ -23,7 +23,7 @@ export const ContextMenuContent = function Content({
 						'layer-components:transform-origin-[var(--radix-context-menu-transform-origin)]',
 						'layer-components:[&[data-state=open]]:animate-popover-in',
 						'layer-components:[&[data-state=closed]]:animate-popover-out',
-						'layer-components:(max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto)',
+						'layer-components:(max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto overflow-unstable)',
 						'important:motion-reduce:animate-none',
 						className,
 					)}
@@ -42,13 +42,15 @@ export const ContextMenuContent = function Content({
 
 export const ContextMenuArrow = withClassName(
 	ContextMenuPrimitive.Arrow,
-	'layer-components:(arrow)',
+	'layer-components:arrow',
 );
 
 export const ContextMenuItem = withClassName(
 	ContextMenuPrimitive.Item,
-	'layer-components:(flex items-center py-1 px-2 relative pl-25px select-none outline-none cursor-pointer)',
-	'layer-components:(hover:(bg-gray bg-lighten-3) [&[data-highlighted=true]]:(bg-gray bg-lighten-3) [&[data-disabled=true]]:(opacity-50 cursor-default) disabled:(opacity-50 cursor-default))',
+	'palette-gray',
+	'layer-components:(flex items-center overflow-hidden min-h-touch py-sm px-2 relative pl-25px select-none outline-none cursor-pointer)',
+	'layer-components:hover:bg-main-light layer-components:[&[data-highlighted=true]]:bg-main-light',
+	'layer-components:[&[data-disabled=true]]:(opacity-50 cursor-default) layer-components:disabled:(opacity-50 cursor-default))',
 );
 
 export const ContextMenuTrigger = withClassName(

package/src/components/datePicker/DatePicker.tsx

@@ -6,6 +6,7 @@ import {
 import classNames from 'clsx';
 import { useCallback, useState } from 'react';
 import { withClassName } from '../../hooks.js';
+import { PaletteName } from '../../uno/logic/color.js';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/index.js';
 
@@ -13,12 +14,14 @@ export interface DatePickerProps {
 	value: Date | null;
 	onChange: (date: Date | null) => void;
 	className?: string;
+	color?: PaletteName;
 }
 
 export function DatePicker({
 	value,
 	onChange,
 	className,
+	color,
 	...rest
 }: DatePickerProps) {
 	const [{ month, year }, setDisplay] = useState(() => ({
@@ -33,14 +36,15 @@ export function DatePicker({
 	return (
 		<div
 			className={classNames(
-				'flex flex-col items-center justify-center w-[calc(var(--day-size,32px)*7)]',
+				color && `palette-${color}`,
+				'layer-components:(flex flex-col items-center justify-center w-[calc(var(--day-size,32px)*7)])',
 				className,
 			)}
 			{...rest}
 		>
 			<MonthRow>
 				<MonthButton
-					color="ghost"
+					emphasis="ghost"
 					onClick={() =>
 						setDisplay((cur) => ({
 							month: cur.month - 1,
@@ -52,7 +56,7 @@ export function DatePicker({
 				</MonthButton>
 				<MonthLabel>{monthLabel}</MonthLabel>
 				<MonthButton
-					color="ghost"
+					emphasis="ghost"
 					onClick={() =>
 						setDisplay((cur) => ({
 							month: cur.month + 1,
@@ -141,7 +145,7 @@ export function DateRangePicker({
 		>
 			<RangeLayout>
 				<MonthButton
-					color="ghost"
+					emphasis="ghost"
 					className="[grid-area:prevMonth]"
 					onClick={() =>
 						setDisplay((cur) => ({
@@ -157,7 +161,7 @@ export function DateRangePicker({
 					{nextMonthLabel}
 				</MonthLabel>
 				<MonthButton
-					color="ghost"
+					emphasis="ghost"
 					className="[grid-area:nextMonth]"
 					onClick={() =>
 						setDisplay((cur) => ({
@@ -208,16 +212,16 @@ const CalendarDay = withClassName(
 	BaseCalendarDay,
 	'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-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)',
+	'[&[data-highlighted]]:(z-1 ring-2 ring-accent)',
+	'hover:(z-1 ring-2 ring-accent)',
+	'active:(bg-main-light rounded)',
+	'[&[data-selected]]:(bg-main z-2 rounded)',
+	'[&[data-in-range]]:(bg-main-light rounded-none z-1)',
+	'[&[data-range-start]]:(bg-main rounded-l rounded-r-none z-1)',
+	'[&[data-range-end]]:(bg-main 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)",
+	"[&[data-today]]:before:(content-[''] absolute left-[1px] top-[1px] w-[6px] h-[6px] rounded-lg bg-attention border-1 border-solid border-black)",
 	// calendar edges
 	'[&[data-top-edge]]:(border-t-gray)',
 	'[&[data-bottom-edge]]:(border-b-gray)',

package/src/components/dialog/Dialog.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { useDrag } from '@use-gesture/react';
@@ -25,7 +23,7 @@ import { selectTriggerClassName } from '../select/index.js';
 
 const StyledOverlay = withClassName(
 	DialogPrimitive.Overlay,
-	'layer-components:(fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200 bg-overlay [box-shadow:inset_0_30px_60px_0px_var(--color-overlay)] border-top-1 border-top-solid border-top-gray)',
+	'layer-components:(fixed inset-0 z-backdrop animate-fade-in animate-duration-200 bg-black/15 [box-shadow:inset_0_30px_60px_0px_var(--color-overlay)] border-top-1 border-top-solid border-top-gray)',
 	'layer-components:[&[data-state=closed]]:animate-fade-out',
 	'motion-reduce:animate-none',
 );
@@ -33,14 +31,17 @@ const StyledOverlay = withClassName(
 const StyledContent = withClassName(
 	DialogPrimitive.Content,
 	'layer-components:(z-dialog fixed shadow-xl shadow-up bg-white overflow-y-auto border border-gray flex flex-col border border-gray-dark)',
-	'layer-components:sm:(shadow-down)',
+	'layer-components:sm:shadow-down',
 	'transform-gpu !motion-reduce:animate-none',
 	'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh p-6 pt-8 rounded-lg border-b-1 pt-6)',
-	'layer-components:(animate-dialog-in [&[data-state=closed]]:animate-dialog-out motion-reduce:animate-none)',
+	'layer-components:animate-dialog-in',
+	'layer-components:[&[data-state=closed]]:animate-dialog-out',
 );
 const sheetClassNames = classNames(
-	'layer-variants:lt-sm:(translate-0 left-0 right-0 top-auto h-min-content rounded-tl-xl rounded-tr-xl rounded-b-0 p-6 pt-8 w-full max-w-none pb-[calc(3rem+env(safe-area-inset-bottom,0px))] border-b-0)',
-	'layer-variants:lt-sm:(animate-ease-in animate-fade-in-up [&[data-state=closed]]:animate-fade-out-down)',
+	'layer-variants:lt-sm:(translate-0 left-0 right-0 top-auto h-min-content rounded-tl-xl rounded-tr-xl rounded-b-0 border-b-0 p-6 pt-8 w-full max-w-none)',
+	'layer-variants:lt-sm:pb-[calc(3rem+env(safe-area-inset-bottom,0px))]',
+	'layer-variants:lt-sm:(animate-fade-in-up)',
+	'layer-variants:lt-sm:[&[data-state=closed]]:animate-fade-out-down',
 );
 const sheetClassNameWithOverlayKeyboard = classNames(
 	'layer-variants:lt-sm:(bottom-[calc(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))+var(--gesture-y,0px))] max-h-[calc(95vh-var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px)))])',
@@ -324,8 +325,8 @@ export const DialogSelectList = withClassName(
 
 export const DialogSelectItemRoot = withClassName(
 	RadioGroupPrimitive.Item,
-	'layer-components:(color-black flex items-center gap-3 w-full py-3 px-4 text-left border-none rounded-lg font-normal bg-gray-blend cursor-pointer transition-all)',
-	'layer-components:[&[data-state=checked]]:(bg-primary-wash color-primary-dark)',
+	'layer-components:(color-black flex items-center border-1 border-solid border-bg gap-3 w-full py-3 px-4 text-left border-none rounded-lg font-normal bg-gray-light cursor-pointer transition-all)',
+	'layer-components:[&[data-state=checked]]:(bg-main-wash color-main-ink border-color)',
 );
 
 export const DialogSelectItem = function DialogSelectItem({