@a-type/ui 2.8.13 → 3.0.1

package/src/components/button/Button.tsx

@@ -1,29 +1,35 @@
 import { Slot } from '@radix-ui/react-slot';
-import classNames, { clsx } from 'clsx';
+import { clsx } from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
-import { ButtonHTMLAttributes, memo, Ref, useCallback, useState } from 'react';
+import {
+	ButtonHTMLAttributes,
+	Children,
+	memo,
+	ReactNode,
+	Ref,
+	useCallback,
+	useState,
+} from 'react';
 import { withClassName } from '../../hooks.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
+import { PaletteName } from '../../uno/logic/color.js';
+import { DropdownMenuTriggerIcon } from '../dropdownMenu/DropdownMenu.js';
+import { useIsDropdownTrigger } from '../dropdownMenu/DropdownTriggerContext.js';
 import { IconLoadingProvider } from '../icon/IconLoadingContext.js';
 import { Icon } from '../icon/index.js';
 import { Spinner } from '../spinner/index.js';
 import { getButtonClassName } from './classes.js';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-	color?:
+	color?: PaletteName;
+	emphasis?:
 		| 'primary'
 		| 'default'
 		| 'ghost'
-		| 'destructive'
-		| 'ghostDestructive'
-		| 'ghostAccent'
-		| 'accent'
 		| 'contrast'
+		| 'light'
 		| 'unstyled';
-	/**
-	 * icon and icon-small are deprecated.
-	 */
-	size?: 'default' | 'small' | 'icon' | 'icon-small';
+	size?: 'default' | 'small';
 	toggled?: boolean;
 	toggleMode?: 'color-and-indicator' | 'color' | 'indicator' | 'state-only';
 	align?: 'start' | 'stretch' | 'end';
@@ -38,6 +44,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export function ButtonRoot({
 	className,
 	color,
+	emphasis = 'default',
 	size,
 	toggled,
 	toggleMode = 'color-and-indicator',
@@ -58,6 +65,12 @@ export function ButtonRoot({
 	const isSubmitLoading = props.type === 'submit' && isFormSubmitting;
 	const isLoading = loading || isSubmitLoading;
 
+	const childArray = Children.toArray(children);
+	const iconChildCount = childArray.filter(isIconChild).length;
+	const hasLabelChild = childArray.length > iconChildCount;
+
+	const isDropdownTrigger = useIsDropdownTrigger();
+
 	const finalRef = useMergedRef(useAnnotateWithChildParts(), ref);
 
 	const buttonProps = {
@@ -68,10 +81,14 @@ export function ButtonRoot({
 		'data-focus': visuallyFocused,
 		'data-size': size,
 		'data-loading': isLoading,
+		'data-has-label': hasLabelChild || undefined,
+		'data-icon-count': iconChildCount > 0 ? iconChildCount : undefined,
+		'data-dropdown-trigger': isDropdownTrigger ? true : undefined,
 		tabIndex: visuallyDisabled ? -1 : undefined,
-		className: classNames(
+		className: clsx(
 			getButtonClassName({
 				color,
+				emphasis,
 				size,
 				toggleable:
 					toggled !== undefined &&
@@ -119,6 +136,11 @@ export function ButtonRoot({
 						<ButtonToggleIndicator value={toggled} />
 					)}
 				{children}
+				{isDropdownTrigger && (
+					<DropdownMenuTriggerIcon asChild>
+						<Icon name="chevron" />
+					</DropdownMenuTriggerIcon>
+				)}
 			</Comp>
 		</IconLoadingProvider>
 	);
@@ -198,3 +220,14 @@ function applyPartAttributes(button: HTMLButtonElement) {
 	button.setAttribute('data-has-label', String(registry.label > 0));
 	button.setAttribute('data-icon-count', String(registry.icon));
 }
+
+function isIconChild(child: ReactNode): boolean {
+	if (typeof child !== 'object' || child === null) return false;
+	if ('type' in child) {
+		const type = (child as any).type;
+		if (type === ButtonIcon) return true;
+		if (type === Icon) return true;
+		if (typeof type === 'function' && type.displayName === 'Icon') return true;
+	}
+	return false;
+}

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(