@a-type/ui 2.6.1 → 2.7.0

package/dist/esm/uno/shadows.js

@@ -1,14 +1,17 @@
 // @unocss-include
 export function getShadows(hard = false) {
+    const opacity1 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5)*2)`;
+    const opacity2 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5))`;
+    const opacity3 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5)/2)`;
     return {
-        sm: `var(--un-shadow-inset) 0 calc(0px * var(--v-shadow-y-mult,1)) calc(1px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)*2))),
-			var(--un-shadow-inset) 0 calc(1px * var(--v-shadow-y-mult,1)) calc(2px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)*2)))`,
-        md: `var(--un-shadow-inset) 0 calc(4px * var(--v-shadow-y-mult,1)) calc(8px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)))),
-			var(--un-shadow-inset) 0 calc(2px * var(--v-shadow-y-mult,1)) calc(4px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)*2)))`,
-        lg: `var(--un-shadow-inset) 0 calc(8px * var(--v-shadow-y-mult,1)) calc(16px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)))),
-			var(--un-shadow-inset) 0 calc(5px * var(--v-shadow-y-mult,1)) calc(10px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1))))`,
-        xl: `var(--un-shadow-inset) 0 calc(20px * var(--v-shadow-y-mult,1)) calc(40px * (0.1 + var(--global-shadow-spread,1))) -0px rgb(from var(--un-shadow-color) r g b / calc((var(--un-shadow-opacity,0.1)))),
-			var(--un-shadow-inset) 0 calc(15px * var(--v-shadow-y-mult,1)) calc(30px * (0.05 + var(--global-shadow-spread,1))) -6px rgb(from var(--un-shadow-color) r g b / calc(0.5*(var(--un-shadow-opacity,0.1))))`,
+        sm: `var(--un-shadow-inset) 0 calc(0px * var(--v-shadow-y-mult,1)) calc(1px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / ${opacity1}),
+			var(--un-shadow-inset) 0 calc(1px * var(--v-shadow-y-mult,1)) calc(2px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / ${opacity1})`,
+        md: `var(--un-shadow-inset) 0 calc(4px * var(--v-shadow-y-mult,1)) calc(8px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / ${opacity2}),
+			var(--un-shadow-inset) 0 calc(2px * var(--v-shadow-y-mult,1)) calc(4px * var(--global-shadow-spread,1)) -1px rgb(from var(--un-shadow-color) r g b / ${opacity1})`,
+        lg: `var(--un-shadow-inset) 0 calc(8px * var(--v-shadow-y-mult,1)) calc(16px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / ${opacity2}),
+			var(--un-shadow-inset) 0 calc(5px * var(--v-shadow-y-mult,1)) calc(10px * var(--global-shadow-spread,1)) 0px rgb(from var(--un-shadow-color) r g b / ${opacity2})`,
+        xl: `var(--un-shadow-inset) 0 calc(20px * var(--v-shadow-y-mult,1)) calc(40px * (0.1 + var(--global-shadow-spread,1))) -0px rgb(from var(--un-shadow-color) r g b / ${opacity2}),
+			var(--un-shadow-inset) 0 calc(15px * var(--v-shadow-y-mult,1)) calc(30px * (0.05 + var(--global-shadow-spread,1))) -6px rgb(from var(--un-shadow-color) r g b / ${opacity3})`,
     };
 }
 //# sourceMappingURL=shadows.js.map

package/dist/esm/uno/shadows.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.js","sourceRoot":"","sources":["../../../src/uno/shadows.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CAAC,IAAI,GAAG,KAAK;IACtC,OAAO;QACN,EAAE,EAAE;6LACuL;QAC3L,EAAE,EAAE;gMAC0L;QAC9L,EAAE,EAAE;8LACwL;QAC5L,EAAE,EAAE;6MACuM;KAC3M,CAAC;AACH,CAAC"}
+{"version":3,"file":"shadows.js","sourceRoot":"","sources":["../../../src/uno/shadows.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CAAC,IAAI,GAAG,KAAK;IACtC,MAAM,QAAQ,GAAG,gFAAgF,CAAC;IAClG,MAAM,QAAQ,GAAG,8EAA8E,CAAC;IAChG,MAAM,QAAQ,GAAG,gFAAgF,CAAC;IAClG,OAAO;QACN,EAAE,EAAE,qJAAqJ,QAAQ;uJACZ,QAAQ,GAAG;QAChK,EAAE,EAAE,wJAAwJ,QAAQ;0JACZ,QAAQ,GAAG;QACnK,EAAE,EAAE,wJAAwJ,QAAQ;0JACZ,QAAQ,GAAG;QACnK,EAAE,EAAE,kKAAkK,QAAQ;qKACX,QAAQ,GAAG;KAC9K,CAAC;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "type": "module",
   "files": [
     "/dist",
@@ -68,6 +68,7 @@
     "date-fns": "^4.1.0",
     "formik": "^2.4.6",
     "frimousse": "^0.2.0",
+    "motion": "^12.23.6",
     "pluralize": "^8.0.0",
     "react-hot-toast": "^2.4.1",
     "valtio": "^2.1.4"

package/src/components/button/Button.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import { Box } from '../box/Box.js';
 import { Icon } from '../icon/index.js';
 import { Button } from './Button.js';
 import { ConfirmedButton } from './ConfirmedButton.js';
@@ -13,6 +14,12 @@ const meta = {
 	},
 	args: {
 		children: 'Button',
+		loading: false,
+		color: 'default',
+		size: 'default',
+		visuallyDisabled: false,
+		disabled: false,
+		visuallyFocused: false,
 	},
 } satisfies Meta<typeof Button>;
 
@@ -20,7 +27,37 @@ export default meta;
 
 type Story = StoryObj<typeof Button>;
 
-export const Default: Story = {};
+export const Default: Story = {
+	render: (args) => {
+		return (
+			<Box gap items="center">
+				<Button {...args} />
+				<Button {...args} color="primary">
+					<Icon name="placeholder" />
+					{args.children}
+				</Button>
+				<Button {...args} size="small" />
+			</Box>
+		);
+	},
+};
+
+export const WithIcon: Story = {
+	args: {
+		children: (
+			<>
+				<Icon name="placeholder" />
+				Iconic
+			</>
+		),
+	},
+};
+
+export const IconOnly: Story = {
+	args: {
+		children: <Icon name="placeholder" />,
+	},
+};
 
 export const Toggled: Story = {
 	render: (args) => {
@@ -31,18 +68,20 @@ export const Toggled: Story = {
 };
 
 export const Alignment: Story = {
-	render() {
+	render(args) {
 		return (
 			<div className="col">
 				<div className="row border-default">
-					<Button size="small">Button</Button>
-					<Button size="icon-small">
+					<Button size="small" {...args}>
+						Button
+					</Button>
+					<Button size="small" {...args}>
 						<Icon name="placeholder" />
 					</Button>
 				</div>
 				<div className="row border-default">
-					<Button>Button</Button>
-					<Button size="icon">
+					<Button {...args}>Button</Button>
+					<Button {...args}>
 						<Icon name="placeholder" />
 					</Button>
 				</div>
@@ -52,12 +91,13 @@ export const Alignment: Story = {
 };
 
 export const ConfirmedButtonDemo: Story = {
-	render() {
+	render(args) {
 		return (
 			<ConfirmedButton
 				confirmText="Are you sure?"
 				confirmTitle="Confirm"
 				onConfirm={() => console.log('confirmed')}
+				{...args}
 			>
 				Confirm
 			</ConfirmedButton>

package/src/components/button/Button.tsx

@@ -1,6 +1,17 @@
 import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
-import { ButtonHTMLAttributes, memo, Ref } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import {
+	ButtonHTMLAttributes,
+	Children,
+	memo,
+	Ref,
+	useCallback,
+	useState,
+} from 'react';
+import { withClassName } from '../../hooks.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { IconLoadingProvider } from '../icon/IconLoadingContext.js';
 import { Icon } from '../icon/index.js';
 import { Spinner } from '../spinner/index.js';
 import { getButtonClassName } from './classes.js';
@@ -16,6 +27,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 		| 'accent'
 		| 'contrast'
 		| 'unstyled';
+	/**
+	 * icon and icon-small are deprecated.
+	 */
 	size?: 'default' | 'small' | 'icon' | 'icon-small';
 	toggled?: boolean;
 	toggleMode?: 'color-and-indicator' | 'color' | 'indicator' | 'state-only';
@@ -27,7 +41,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	ref?: Ref<HTMLButtonElement>;
 }
 
-export function Button({
+export function ButtonRoot({
 	className,
 	color,
 	size,
@@ -44,13 +58,21 @@ export function Button({
 	...props
 }: ButtonProps) {
 	const Comp = asChild ? Slot : 'button';
+
+	const isFormSubmitting = false;
+	const isSubmitLoading = props.type === 'submit' && isFormSubmitting;
+	const isLoading = loading || isSubmitLoading;
+
+	const finalRef = useMergedRef(useAnnotateWithChildParts(), ref);
+
 	const buttonProps = {
-		ref: ref,
+		ref: finalRef,
 		...props,
-		disabled: disabled || loading,
+		disabled: disabled || isLoading,
 		'data-disabled': visuallyDisabled,
 		'data-focus': visuallyFocused,
 		'data-size': size,
+		'data-loading': isLoading,
 		tabIndex: visuallyDisabled ? -1 : undefined,
 		className: classNames(
 			getButtonClassName({
@@ -69,25 +91,68 @@ export function Button({
 		buttonProps['aria-pressed'] = !!toggled;
 	}
 
+	// for asChild, no need to do the rest of this stuff.
 	if (asChild) {
 		// avoid rendering loading spinner with asChild
 		return <Comp {...buttonProps}>{children}</Comp>;
 	}
 
+	// wrap and inspect children
+	let hasLabel = false;
+	let hasIcon = false;
+	const wrappedChildren = Children.toArray(children).map((child, index) => {
+		if (child && typeof child === 'object' && 'type' in child) {
+			const isIcon = child.type === Icon || child.type;
+			if (isIcon) {
+				hasIcon = true;
+				return child; // return icon as is
+			}
+		}
+
+		hasLabel = true; // mark that we have a label
+
+		if ((!!child && typeof child === 'string') || typeof child === 'number') {
+			return (
+				<span key={`text-${index}`} data-auto-wrapped-label className="flex">
+					{child}
+				</span>
+			);
+		}
+		return child;
+	});
+
 	return (
-		<Comp {...buttonProps}>
-			{loading && <Spinner size={16} className="inline-block w-1em h-1em" />}
-			{toggled !== undefined &&
-				(toggleMode === 'indicator' ||
-					toggleMode === 'color-and-indicator') && (
-					<ToggleIndicator value={toggled} />
-				)}
-			{children}
-		</Comp>
+		<IconLoadingProvider value={isLoading}>
+			<Comp
+				{...buttonProps}
+				data-has-icon={String(hasIcon || isLoading)}
+				data-has-label={String(hasLabel)}
+			>
+				<AnimatePresence>
+					{isLoading && !hasIcon && (
+						<motion.div
+							key="spinner"
+							initial={{ width: 0, marginLeft: '-0.5rem' }}
+							animate={{ width: 'auto', marginLeft: 0 }}
+							exit={{ width: 0, marginLeft: '-0.5rem' }}
+							className="flex-shrink-0 inline-block overflow-hidden my-auto flex"
+						>
+							<Spinner size={15} className="inline-block w-1em h-1em" />
+						</motion.div>
+					)}
+				</AnimatePresence>
+				{toggled !== undefined &&
+					(toggleMode === 'indicator' ||
+						toggleMode === 'color-and-indicator') && (
+						<ButtonToggleIndicator value={toggled} />
+					)}
+				{wrappedChildren}
+			</Comp>
+		</IconLoadingProvider>
 	);
 }
 
-const ToggleIndicator = memo(function ToggleIndicator({
+export const ButtonToggleIndicator = memo(function ToggleIndicator({
 	value,
 }: {
 	value: boolean;
@@ -103,3 +168,61 @@ const ToggleIndicator = memo(function ToggleIndicator({
 		/>
 	);
 });
+
+// allows custom icons to trigger icon button behavior
+export const ButtonIcon = withClassName(
+	'div',
+	'icon flex-shrink-0 inline-block',
+);
+
+export const Button = Object.assign(ButtonRoot, {
+	ToggleIndicator: ButtonToggleIndicator,
+	Icon: ButtonIcon,
+});
+
+function useAnnotateWithChildParts() {
+	const mutationObserver = useState(() => {
+		if (typeof window === 'undefined') return null!;
+		return new MutationObserver((entries) => {
+			applyPartAttributes(entries[0].target as HTMLButtonElement);
+		});
+	})[0];
+
+	const ref = useCallback(
+		(node: HTMLButtonElement | null) => {
+			if (node && mutationObserver) {
+				mutationObserver.disconnect();
+				mutationObserver.observe(node, { childList: true, subtree: true });
+				applyPartAttributes(node);
+			} else if (mutationObserver) {
+				mutationObserver.disconnect();
+			}
+		},
+		[mutationObserver],
+	);
+
+	return ref;
+}
+
+function applyPartAttributes(button: HTMLButtonElement) {
+	// each child node that's not an icon counts as a label
+	const registry = {
+		icon: 0,
+		label: 0,
+	};
+	button.childNodes.forEach((child) => {
+		if (!(child instanceof HTMLElement || child instanceof SVGElement)) return;
+		if (child.style.display === 'none' || child.style.width === '0') return; // skip hidden elements
+		if (
+			(child instanceof HTMLElement || child instanceof SVGElement) &&
+			child.classList.contains('icon')
+		) {
+			registry.icon++;
+		} else {
+			registry.label++;
+		}
+	});
+	button.setAttribute('data-has-icon', String(registry.icon > 0));
+	button.setAttribute('data-has-label', String(registry.label > 0));
+	button.setAttribute('data-icon-count', String(registry.icon));
+}

package/src/components/button/classes.tsx

@@ -1,9 +1,16 @@
-import classNames from 'clsx';
-import type { ButtonProps } from './Button.jsx';
+import clsx from 'clsx';
+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,
+	size: rawSize,
 	toggleable,
 	align,
 }: {
@@ -12,8 +19,10 @@ export function getButtonClassName({
 	toggleable?: boolean;
 	align?: ButtonProps['align'];
 }) {
-	return classNames(
-		'layer-components:(px-4 py-2 bg-[var(--bg-neutral,var(--bg))] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-inherit border-solid border-thin border-transparent rounded-lg cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 whitespace-nowrap ring-bg)',
+	const size = sizeMap[rawSize ?? 'default'];
+
+	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)',
 		'layer-components:focus:outline-off',
 		'layer-components:focus-visible:(bg-[var(--bg)] outline-off bg-darken-1 ring-6)',
@@ -37,7 +46,7 @@ export function getButtonClassName({
 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-light)] shadow-sm color-black border-gray-dark)`,
+	default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray)] 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))`,
@@ -48,11 +57,10 @@ const colors = {
 export const buttonColorClasses = colors;
 
 const sizes = {
-	default: '',
-	small: 'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-md)',
-	icon: 'layer-variants:[&.size-icon]:(p-2.35 text-sm rounded-lg)',
-	'icon-small':
-		'layer-variants:[&.size-icon-small]:(p-2 text-xs rounded-lg -m-y-0.5)',
+	default:
+		'layer-variants:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 text-sm rounded-lg)',
+	small:
+		'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-md) layer-variants:[&.size-small[data-has-icon=true][data-has-label=false]]:(p-2 text-xs rounded-lg -m-y-0.5)',
 };
 
 const toggledClass =

package/src/components/camera/Camera.tsx

@@ -244,7 +244,6 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 	if (devices.length === 2) {
 		return (
 			<Button
-				size="icon"
 				color="ghost"
 				className="absolute bottom-2 left-2 color-white"
 				onClick={swapCamera}
@@ -260,11 +259,7 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 			onValueChange={selectDeviceId}
 		>
 			<Select.Trigger asChild>
-				<Button
-					size="icon"
-					color="ghost"
-					className="absolute bottom-2 left-2 color-white"
-				>
+				<Button color="ghost" className="absolute bottom-2 left-2 color-white">
 					<Icon name="refresh" />
 				</Button>
 			</Select.Trigger>
@@ -284,7 +279,6 @@ export const CameraFullscreenButton = (props: ButtonProps) => {
 	return (
 		<Button
 			{...props}
-			size="icon"
 			color="ghost"
 			className="absolute top-2 right-2 color-white"
 			onClick={() => setFullscreen(!fullscreen)}

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

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

package/src/components/contextMenu/contextMenu.tsx

@@ -19,7 +19,7 @@ export const ContextMenuContent = function Content({
 			<BoxContext.Provider value={{ spacingScale: 1 }}>
 				<ContextMenuPrimitive.Content
 					className={classNames(
-						'layer-components:(min-w-120px bg-white rounded-sm overflow-hidden p-1 border-gray-dark border shadow-md z-menu)',
+						'layer-components:(min-w-120px bg-white rounded-md overflow-hidden border-gray-dark border shadow-md z-menu)',
 						'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',
@@ -47,10 +47,8 @@ export const ContextMenuArrow = withClassName(
 
 export const ContextMenuItem = withClassName(
 	ContextMenuPrimitive.Item,
-	'layer-components:(flex items-center py-1 px-2 relative pl-25px select-none outline-none cursor-pointer rounded-sm)',
-	'layer-components:[&:first-of-type]:rounded-t-md',
-	'layer-components:[&:last-of-type]:rounded-b-md',
-	'layer-components:(hover:bg-gray-light [&[data-highlighted=true]]:bg-gray-light [&[data-disabled=true]]:(opacity-50 cursor-default) disabled:(opacity-50 cursor-default))',
+	'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))',
 );
 
 export const ContextMenuTrigger = withClassName(

package/src/components/datePicker/DatePicker.tsx

@@ -40,7 +40,6 @@ export function DatePicker({
 		>
 			<MonthRow>
 				<MonthButton
-					size="icon"
 					color="ghost"
 					onClick={() =>
 						setDisplay((cur) => ({
@@ -53,7 +52,6 @@ export function DatePicker({
 				</MonthButton>
 				<MonthLabel>{monthLabel}</MonthLabel>
 				<MonthButton
-					size="icon"
 					color="ghost"
 					onClick={() =>
 						setDisplay((cur) => ({
@@ -143,7 +141,6 @@ export function DateRangePicker({
 		>
 			<RangeLayout>
 				<MonthButton
-					size="icon"
 					color="ghost"
 					className="[grid-area:prevMonth]"
 					onClick={() =>
@@ -160,7 +157,6 @@ export function DateRangePicker({
 					{nextMonthLabel}
 				</MonthLabel>
 				<MonthButton
-					size="icon"
 					color="ghost"
 					className="[grid-area:nextMonth]"
 					onClick={() =>

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -15,7 +15,7 @@ const StyledContent = withClassName(
 			</BoxContext.Provider>
 		);
 	},
-	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-sm border border-gray-dark)',
+	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-gray-dark)',
 	'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]',
 	'layer-components:[&[data-state=open]]:animate-popover-in',
 	'layer-components:[&[data-state=closed]]:animate-popover-out',
@@ -25,8 +25,9 @@ const StyledContent = withClassName(
 );
 const itemClassName = classNames(
 	'layer-components:(text-md leading-4 color-black flex items-center pr-4 pl-8 py-2 relative text-left select-none cursor-pointer)',
-	'layer-components:[&[data-disabled]]:(color-black pointer-events-none)',
-	'layer-components:focus-visible:(bg-gray-light bg-darken-0.5 color-black)',
+	'layer-components:[&[data-disabled]]:(color-gray-dark pointer-events-none)',
+	'layer-components:focus-visible:(bg-gray bg-lighten-3 color-black)',
+	'layer-components:hover:(bg-gray bg-lighten-3 color-black)',
 	'layer-components:focus:outline-none',
 );
 const StyledItemBase = withClassName(DropdownMenuPrimitive.Item, itemClassName);
@@ -46,7 +47,7 @@ const StyledItem = ({
 			{...props}
 			className={clsx(
 				color === 'destructive' &&
-					'layer-variants:(color-attention-dark hover:bg-attention-wash focus-visible:bg-attention-wash)',
+					'layer-variants:(color-attention-dark hover:bg-attention-light focus-visible:bg-attention-light)',
 				className,
 			)}
 			ref={forwardedRef}
@@ -111,14 +112,14 @@ export const DropdownMenuContent = ({
 	return (
 		<StyledPortal forceMount={forceMount}>
 			<StyledContent {...props}>
-				<div className="overflow-hidden rounded-lg">{children}</div>
+				<div className="overflow-hidden rounded-md">{children}</div>
 				<StyledArrow />
 			</StyledContent>
 		</StyledPortal>
 	);
 };
 
-export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto');
+export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto pl-md');
 
 export const DropdownMenu = Object.assign(DropdownMenuRoot, {
 	Content: DropdownMenuContent,

package/src/components/emojiPicker/EmojiPicker.tsx

@@ -71,11 +71,11 @@ export const EmojiPickerEmoji = withClassName(
 			color="ghost"
 			toggled={p.emoji.isActive}
 			toggleMode="color"
-			size="icon-small"
+			size="small"
 			aria-label={p.emoji.label}
 			className="text-lg p-xs"
 		>
-			{p.emoji.emoji}
+			<Button.Icon>{p.emoji.emoji}</Button.Icon>
 		</Button>
 	),
 	'',
@@ -122,12 +122,12 @@ export const EmojiPickerSkinToneSelector = (props: BoxProps) => {
 					color="ghost"
 					toggled={option.skinTone === skinTone}
 					toggleMode="color"
-					size="icon-small"
+					size="small"
 					aria-label={`Skin tone ${option}`}
 					className="text-md p-xs"
 					onClick={() => setSkinTone(option.skinTone)}
 				>
-					{option.emoji}
+					<Button.Icon>{option.emoji}</Button.Icon>
 				</Button>
 			))}
 		</Box>

package/src/components/horizontalList/HorizontalList.stories.tsx

@@ -36,7 +36,6 @@ const meta = {
 				<Button size="small">Twenty three</Button>
 				<Button size="small">Twenty four</Button>
 				<Button
-					size="icon"
 					color="primary"
 					className="sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto"
 				>
@@ -113,7 +112,6 @@ export const CantOpen: Story = {
 						</>
 					)}
 					<Button
-						size="icon"
 						color="primary"
 						className="sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto"
 					>