@a-type/ui 2.8.13 → 3.0.0

package/src/components/dropdownMenu/DropdownMenu.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../button/Button.js';
 import { Icon } from '../icon/index.js';
 import { DropdownMenu } from './DropdownMenu.js';
 
@@ -19,9 +20,11 @@ export const Default: Story = {
 	args: {
 		children: (
 			<>
-				<DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+				<DropdownMenu.Trigger asChild>
+					<Button>Open</Button>
+				</DropdownMenu.Trigger>
 				<DropdownMenu.Content>
-					<DropdownMenu.Item color="destructive">
+					<DropdownMenu.Item color="attention">
 						<DropdownMenu.Label>Item 1</DropdownMenu.Label>
 						<DropdownMenu.ItemRightSlot>
 							<Icon name="flag" />

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -3,7 +3,10 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import classNames, { clsx } from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
+import { PaletteName } from '../../uno/logic/color.js';
 import { BoxContext } from '../box/Box.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import { DropdownTriggerProvider } from './DropdownTriggerContext.js';
 
 const StyledContent = withClassName(
 	function DropdownMenuContent(
@@ -15,7 +18,7 @@ const StyledContent = withClassName(
 			</BoxContext.Provider>
 		);
 	},
-	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-gray-dark)',
+	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-gray-dark flex flex-col)',
 	'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',
@@ -24,32 +27,28 @@ const StyledContent = withClassName(
 	'will-change-transform',
 );
 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-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:(text-md leading-4 color-main-ink flex items-center pr-4 pl-8 py-sm min-h-touch relative text-left select-none cursor-pointer)',
+	'layer-components:[&[data-disabled]]:(color-gray-dark bg-white pointer-events-none)',
+	'layer-components:focus-visible:(bg-main-light color-black)',
+	'layer-components:hover:(bg-main-light color-black)',
 	'layer-components:focus:outline-none',
 );
 const StyledItemBase = withClassName(DropdownMenuPrimitive.Item, itemClassName);
 export interface DropdownMenuItemProps
 	extends DropdownMenuPrimitive.DropdownMenuItemProps {
-	color?: 'default' | 'destructive';
+	color?: PaletteName;
 	ref?: Ref<HTMLDivElement>;
 }
 const StyledItem = ({
 	ref: forwardedRef,
 	className,
-	color,
+	color = 'gray',
 	...props
 }: DropdownMenuItemProps) => {
 	return (
 		<StyledItemBase
 			{...props}
-			className={clsx(
-				color === 'destructive' &&
-					'layer-variants:(color-attention-dark hover:bg-attention-light focus-visible:bg-attention-light)',
-				className,
-			)}
+			className={clsx(color && `palette-${color}`, className)}
 			ref={forwardedRef}
 		/>
 	);
@@ -92,7 +91,6 @@ const StyledPortal = DropdownMenuPrimitive.Portal;
 
 // Exports
 export const DropdownMenuRoot = DropdownMenuPrimitive.Root;
-export const DropdownMenuTrigger = StyledTrigger;
 export const DropdownMenuItem = StyledItem;
 export const DropdownMenuCheckboxItem = StyledCheckboxItem;
 export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
@@ -102,6 +100,20 @@ export const DropdownMenuLabel = StyledLabel;
 export const DropdownMenuSeparator = StyledSeparator;
 export const DropdownMenuArrow = StyledArrow;
 
+export function DropdownMenuTrigger(
+	props: DropdownMenuPrimitive.DropdownMenuTriggerProps,
+) {
+	return (
+		<DropdownTriggerProvider>
+			<StyledTrigger {...props} />
+		</DropdownTriggerProvider>
+	);
+}
+export const DropdownMenuTriggerIcon = withClassName(
+	SlotDiv,
+	'layer-components:[[data-state=open]>&]:rotate-180 layer-components:transition-transform',
+);
+
 export const DropdownMenuContent = ({
 	children,
 	forceMount,
@@ -112,7 +124,9 @@ export const DropdownMenuContent = ({
 	return (
 		<StyledPortal forceMount={forceMount}>
 			<StyledContent {...props}>
-				<div className="overflow-hidden rounded-md">{children}</div>
+				<div className="layer-components:(overflow-y-auto overflow-unstable max-h-full rounded-md min-h-0)">
+					{children}
+				</div>
 				<StyledArrow />
 			</StyledContent>
 		</StyledPortal>
@@ -123,7 +137,7 @@ export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto pl-md');
 
 export const DropdownMenu = Object.assign(DropdownMenuRoot, {
 	Content: DropdownMenuContent,
-	Trigger: StyledTrigger,
+	Trigger: DropdownMenuTrigger,
 	Item: StyledItem,
 	CheckboxItem: StyledCheckboxItem,
 	RadioGroup: DropdownMenuPrimitive.RadioGroup,
@@ -133,4 +147,5 @@ export const DropdownMenu = Object.assign(DropdownMenuRoot, {
 	Separator: StyledSeparator,
 	Arrow: StyledArrow,
 	ItemRightSlot: DropdownMenuItemRightSlot,
+	TriggerIcon: DropdownMenuTriggerIcon,
 });

package/src/components/dropdownMenu/DropdownTriggerContext.tsx

@@ -0,0 +1,19 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+const DropdownTriggerContext = createContext(false);
+
+export function DropdownTriggerProvider({
+	children,
+}: {
+	children?: ReactNode;
+}) {
+	return (
+		<DropdownTriggerContext.Provider value={true}>
+			{children}
+		</DropdownTriggerContext.Provider>
+	);
+}
+
+export function useIsDropdownTrigger() {
+	return useContext(DropdownTriggerContext);
+}

package/src/components/editableText/EditableText.tsx

@@ -103,8 +103,8 @@ export function EditableText({
 			className={clsx(
 				inputClassName,
 				'layer-variants:(border-transparent bg-transparent w-auto inline-flex items-center gap-2 font-size-inherit color-inherit shadow-none text-left)',
-				'layer-variants:hover:(bg-gray-blend)',
-				'layer-variants:focus-visible:(outline-none bg-gray-dark-blend)',
+				'layer-variants:hover:(bg-main-light/80)',
+				'layer-variants:focus-visible:(outline-none bg-main-light/80 ring-2 ring-accent)',
 				'cursor-pointer',
 				className,
 			)}
@@ -112,7 +112,7 @@ export function EditableText({
 			{...rest}
 		>
 			{value}
-			<Icon name="pencil" className="stroke-gray-blend opacity-50" />
+			<Icon name="pencil" className="stroke-main-dark opacity-50" />
 		</button>
 	);
 }

package/src/components/emojiPicker/EmojiPicker.tsx

@@ -39,7 +39,7 @@ export const EmojiPickerLoading = withClassName(
 	withProps(Core.Loading, {
 		children: <Spinner />,
 	}),
-	'layer-compoennts:(absolute inset-0 flex items-center justify-center bg-inherit)',
+	'layer-components:(absolute inset-0 flex items-center justify-center bg-inherit)',
 );
 export const EmojiPickerEmpty = withClassName(
 	withProps(Core.Empty, {
@@ -53,7 +53,7 @@ export const EmojiPickerCategoryHeader = (
 ) => (
 	<div
 		className={clsx(
-			'layer-components:(bg-inherit px-md py-sm text-xs font-semibold text-gray-dark sticky top-0)',
+			'layer-components:(bg-inherit px-md py-sm text-xs font-semibold color-gray-dark sticky top-0)',
 			props.className,
 		)}
 	>
@@ -65,10 +65,10 @@ export const EmojiPickerRow = withClassName(
 	'layer-components:(scroll-my-xs px-xs)',
 );
 export const EmojiPickerEmoji = withClassName(
-	(p: EmojiPickerListEmojiProps) => (
+	(p: Omit<EmojiPickerListEmojiProps, 'color'>) => (
 		<Button
 			{...p}
-			color="ghost"
+			emphasis="ghost"
 			toggled={p.emoji.isActive}
 			toggleMode="color"
 			size="small"
@@ -119,7 +119,7 @@ export const EmojiPickerSkinToneSelector = (props: BoxProps) => {
 			{options.map((option) => (
 				<Button
 					key={option.skinTone}
-					color="ghost"
+					emphasis="ghost"
 					toggled={option.skinTone === skinTone}
 					toggleMode="color"
 					size="small"

package/src/components/forms/CheckboxField.tsx

@@ -43,5 +43,5 @@ const FieldRoot = withClassName(
 
 const FieldLabel = withClassName(
 	'label',
-	'layer-components:(inline-flex flex-col gap-1 text-md font-normal color-dark-blend mt-2px)',
+	'layer-components:(inline-flex flex-col gap-1 text-md font-normal color-dark/50 mt-2px)',
 );

package/src/components/forms/FieldLabel.tsx

@@ -0,0 +1,6 @@
+import { withClassName } from '../../hooks.js';
+
+export const FieldLabel = withClassName(
+	'label',
+	'inline-flex flex-col gap-1 text-sm font-bold color-gray-ink',
+);

package/src/components/forms/Form.tsx

@@ -1,9 +1,7 @@
-'use client';
-
 import { Form as FormikForm } from 'formik';
 import { withClassName } from '../../hooks/withClassName.js';
 
 export const Form = withClassName(
 	FormikForm,
-	'flex flex-col gap-2 items-start',
+	'flex flex-col gap-md items-start',
 );

package/src/components/forms/NumberStepperField.tsx

@@ -5,6 +5,7 @@ import {
 	NumberStepper,
 	NumberStepperProps,
 } from '../numberStepper/NumberStepper.js';
+import { FieldLabel } from './FieldLabel.js';
 
 export interface NumberStepperFieldProps
 	extends Omit<NumberStepperProps, 'value' | 'onChange'> {
@@ -47,8 +48,3 @@ const FieldRoot = withClassName(
 	'div',
 	'layer-components:(flex flex-col gap-2)',
 );
-
-const FieldLabel = withClassName(
-	'label',
-	'layer-components:(block flex-col gap-1 text-md font-normal color-dark-blend mt-2px)',
-);

package/src/components/forms/TextField.tsx

@@ -15,6 +15,7 @@ import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { Input } from '../input/Input.js';
 import { TextArea, TextAreaProps } from '../textArea/TextArea.js';
+import { FieldLabel } from './FieldLabel.js';
 
 export type TextFieldProps = {
 	name: string;
@@ -135,9 +136,5 @@ export function TextAreaField({
 
 export const FieldRoot = withClassName(
 	'div',
-	'flex flex-col items-stretch gap-1 self-stretch',
-);
-export const FieldLabel = withClassName(
-	'label',
-	'inline-flex flex-col gap-1 text-sm font-bold color-dark-blend mb-1',
+	'flex flex-col items-stretch gap-xs self-stretch',
 );

package/src/components/horizontalList/HorizontalList.tsx

@@ -169,11 +169,11 @@ export function HorizontalList({
 					>
 						<Button
 							onClick={toggleOpen}
-							color="ghost"
+							emphasis="ghost"
 							className={clsx(
-								'flex-shrink-0 bg-[var(--scroll-bg)] sticky left-0 top-2 z-1',
+								'layer-variants:(flex-shrink-0 sticky left-0 top-2 z-1)',
 								!open &&
-									'rounded-none h-full border-r border-r-solid border-r-gray',
+									'layer-variants:(rounded-none h-full border-r border-r-solid border-r-gray)',
 							)}
 						>
 							<Icon

package/src/components/imageUploader/ImageUploader.tsx

@@ -186,7 +186,7 @@ function ImageUploaderPrebuilt({
 
 			<ImageUploaderEmptyControls>
 				<ImageUploaderFileButton />
-				<Button color="ghost" onClick={openCamera}>
+				<Button emphasis="ghost" onClick={openCamera}>
 					<Icon name="camera" />
 					<span>Camera</span>
 				</Button>
@@ -206,7 +206,7 @@ function ImageUploaderPrebuilt({
 					<CameraFullscreenButton />
 					<Button
 						onClick={() => setCameraOpen(false)}
-						color="ghost"
+						emphasis="ghost"
 						size="small"
 						className="color-white absolute top-2 left-2"
 					>
@@ -244,7 +244,13 @@ export function ImageUploaderFileButton({ children, ...props }: ButtonProps) {
 	}, [inputId]);
 
 	return (
-		<Button color="ghost" asChild visuallyFocused={focused} {...props}>
+		<Button
+			emphasis="ghost"
+			size="small"
+			asChild
+			visuallyFocused={focused}
+			{...props}
+		>
 			<label htmlFor={inputId}>
 				{children ?? (
 					<>
@@ -262,7 +268,7 @@ export function ImageUploaderRemoveButton({ className, ...rest }: ButtonProps) {
 	if (!value) return null;
 	return (
 		<Button
-			color="ghost"
+			emphasis="ghost"
 			className={clsx(
 				'layer-variants:(absolute top-2 right-2 w-32px h-32px border-none p-2 cursor-pointer bg-white color-black rounded-lg transition-colors shadow-sm z-10)',
 				className,
@@ -306,10 +312,9 @@ export function ImageUploaderEmptyControls({
 	return (
 		<div
 			className={classNames(
-				'layer-components:(absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg)',
+				'layer-components:(absolute bg-gray-light inset-0 flex flex-col items-center justify-center gap-3 rounded-lg)',
 				{
-					'layer-components:bg-[rgba(0,0,0,0.05)]': !draggingOver,
-					'layer-components:bg-[rgba(0,0,0,0.1)]': draggingOver,
+					'layer-components:bg-darken-2': draggingOver,
 				},
 				className,
 			)}

package/src/components/input/Input.tsx

@@ -11,7 +11,7 @@ import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.j
 export const inputClassName = classNames(
 	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-lg bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm-inset transition-shadow)',
 	'layer-components:focus:(outline-none bg-lighten-3 ring-4	ring-white)',
-	'layer-components:focus-visible:(outline-none ring-gray)',
+	'layer-components:focus-visible:(outline-none ring-accent ring-4)',
 	'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)',
 	'layer-components:md:(min-w-120px)',
 	'layer-variants:[&[data-size="small"]]:(px-md py-xs text-sm rounded-md min-w-40px)',

package/src/components/layouts/PageNav.tsx

@@ -25,7 +25,7 @@ export function PageNav({
 			{...props}
 			className={classNames(
 				'layer-components:([grid-area:nav] sticky bottom-0 bg-inherit z-[var(--z-nav)] pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))])',
-				'layer-components:before:(content-[""] absolute inset-x-4 top-0 h-px bg-dark-blend)',
+				'layer-components:before:(content-[""] absolute inset-x-4 top-0 h-px bg-gray-dark/80)',
 				'layer-components:md:([grid-area:nav] sticky top-lg h-auto bottom-auto left-auto right-auto) layer-components:md:before:(hidden)',
 				className,
 			)}

package/src/components/layouts/layouts.stories.tsx

@@ -71,7 +71,7 @@ export const Default: Story = {
 							<NavBarItemText>Item 2</NavBarItemText>
 							<NavBarItemPip />
 						</NavBarItem>
-						<NavBarItem color="neutral" active={true}>
+						<NavBarItem color="gray" active={true}>
 							<NavBarItemIconWrapper>
 								<NavBarItemIcon asChild>
 									<Icon name="book" />
@@ -121,7 +121,7 @@ export const ManualWidth: Story = {
 							<NavBarItemText>Item 2</NavBarItemText>
 							<NavBarItemPip />
 						</NavBarItem>
-						<NavBarItem color="neutral" active={true}>
+						<NavBarItem color="gray" active={true}>
 							<NavBarItemIconWrapper>
 								<NavBarItemIcon asChild>
 									<Icon name="book" />

package/src/components/masonry/masonry.stories.tsx

@@ -35,7 +35,8 @@ const content = (spans?: boolean) =>
 			<Box
 				key={i}
 				layout="center center"
-				surface="primary"
+				color="primary"
+				surface
 				border
 				style={{ height: size }}
 				data-span={spans ? span : undefined}

package/src/components/navBar/NavBar.tsx

@@ -7,10 +7,9 @@ import { Icon, IconProps } from '../icon/index.js';
 export const navBarItemClass = classNames(
 	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-sm border-none cursor-pointer text-sm transition-colors h-full gap-6px relative color-black select-none)',
 	'layer-components:active:bg-darken-2',
-	'layer-components:hover:bg-darken-1',
-	'layer-components:focus-visible:(outline-none bg-darken-2 ring-1 ring-primary)',
-	'layer-components:[&[data-active=true]]:(bg-primary-light/50 color-lighten-2 color-black)',
-	'layer-components:([--fill:var(--color-primary)])',
+	'layer-components:hover:(bg-main-light)',
+	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
+	'layer-components:[&[data-active=true]]:(bg-main-light/50 color-lighten-2 color-black)',
 	'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)',
 );
 
@@ -19,7 +18,7 @@ export interface NavBarItemProps {
 	className?: string;
 	children?: ReactNode;
 	active?: boolean;
-	color?: 'primary' | 'neutral';
+	color?: 'primary' | 'gray';
 }
 
 export const NavBarItem = function NavBarItem({
@@ -27,7 +26,7 @@ export const NavBarItem = function NavBarItem({
 	asChild,
 	className,
 	active,
-	color,
+	color = 'primary',
 	...rest
 }: NavBarItemProps & {
 	ref?: React.Ref<HTMLButtonElement>;
@@ -37,15 +36,7 @@ export const NavBarItem = function NavBarItem({
 	return (
 		<Comp
 			ref={ref}
-			className={classNames(
-				navBarItemClass,
-				color === 'neutral' && [
-					'layer-variants:[&[data-active=true]]:(bg-gray/30 color-black)',
-					'layer-variants:([--fill:var(--color-gray)])',
-					'layer-variants:focus-visible:ring-gray',
-				],
-				className,
-			)}
+			className={classNames(navBarItemClass, `palette-${color}`, className)}
 			data-active={active}
 			{...rest}
 		/>
@@ -54,7 +45,8 @@ export const NavBarItem = function NavBarItem({
 
 export const NavBarItemIconWrapper = withClassName(
 	'div',
-	'layer-components:(relative flex) layer-components:md:(p-6px rounded-lg bg-gray-blend)',
+	'layer-components:(relative flex)',
+	'layer-components:md:(p-6px rounded-lg bg-gray-blend)',
 	'layer-variants:md:[*[data-active=true]_&]:bg-[var(--bg)]',
 );
 
@@ -83,8 +75,8 @@ export const NavBarItemIcon = function NavBarItemIcon({
 		<Comp
 			name={name}
 			className={clsx(
-				'layer-components:(relative z-1 flex fill-none color-inherit)',
-				'layer-variants:[*[data-active=true]_&]:fill-[var(--fill)]',
+				'layer-components:(relative z-1 flex color-inherit)',
+				'layer-variants:[*[data-active=true]_&]:fill-main',
 				className,
 			)}
 			{...rest}
@@ -97,7 +89,8 @@ export const NavBarItemIcon = function NavBarItemIcon({
 
 export const NavBarItemPip = withClassName(
 	'div',
-	'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-lg bg-attention shadow-sm)',
+	'palette-attention',
+	'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-lg bg-main shadow-sm)',
 );
 
 export const NavBarRoot = withClassName(

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)',