@a-type/ui 2.8.13 → 3.0.0

package/src/components/select/Select.tsx

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

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

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

package/src/components/slider/Slider.tsx

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

package/src/components/switch/Switch.tsx

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

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

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

package/src/components/tabs/tabs.tsx

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

package/src/components/toggleGroup/toggleGroup.tsx

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

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

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

package/src/components/viewport/ViewportZoomControls.tsx

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

package/src/themes.stories.tsx

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

package/src/uno/logic/color.ts

@@ -0,0 +1,99 @@
+export function globalColor(
+	l: string | number,
+	c: string | number,
+	h: string | number,
+) {
+	return `oklch(${clampedPercent(`calc(${l})`)} ${clampedPercent(
+		`calc(var(--l-saturation,1) * var(--global-saturation) * (${c}))`,
+	)} ${h})`;
+}
+
+export function clampedPercent(value: string | number) {
+	return `clamp(0%, ${value}, 100%)`;
+}
+
+export const paletteHues = {
+	primary: 'var(--p-primary-hue,91.8)',
+	accent: 'var(--p-accent-hue,160.88)',
+	main: 'var(--l-main-hue,var(--p-primary-hue,91.8))',
+	attention: 'var(--p-attention-hue,30)',
+	success: 'var(--p-success-hue,140)',
+};
+
+export const paletteNames = [
+	'primary',
+	'accent',
+	'attention',
+	'success',
+	'lemon',
+	'leek',
+	'tomato',
+	'blueberry',
+	'eggplant',
+	'gray',
+	'high-contrast',
+] as const;
+export type PaletteName = (typeof paletteNames)[number];
+
+export function createColorRange(
+	sourceHue: string,
+	{
+		saturation,
+	}: {
+		saturation?: string;
+	} = {},
+) {
+	return {
+		wash: globalColor(
+			`var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult,1) * var(--l-lightness-spread,1))`,
+			saturation ??
+				`var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult,1))`,
+			sourceHue,
+		),
+		light: globalColor(
+			`var(--mode-l-neutral) + (var(--mode-l-range-up) * 0.5 * var(--mode-mult,1) * var(--l-lightness-spread,1))`,
+			saturation ??
+				`var(--mode-s-neutral) + (var(--mode-s-range-up) * 0.75 * var(--mode-mult,1))`,
+			sourceHue,
+		),
+		DEFAULT: globalColor(
+			`var(--mode-l-neutral)`,
+			saturation ?? `var(--mode-s-neutral)`,
+			sourceHue,
+		),
+		dark: globalColor(
+			`var(--mode-l-neutral) - (var(--mode-l-range-down) * 0.35 * var(--mode-mult,1) * var(--l-lightness-spread,1))`,
+			saturation ??
+				`var(--mode-s-neutral) - (var(--mode-s-range-down) * 0.5 * var(--mode-mult,1))`,
+			sourceHue,
+		),
+		ink: globalColor(
+			`var(--mode-l-neutral) - (var(--mode-l-range-down) * var(--mode-mult,1) * var(--l-lightness-spread,1))`,
+			saturation ??
+				`var(--mode-s-neutral) - (var(--mode-s-range-down) * var(--mode-mult,1))`,
+			sourceHue,
+		),
+	};
+}
+
+export const whiteBlackRange = createColorRange(paletteHues.primary, {
+	saturation: '0.4%',
+});
+
+export function lighten(base: string, level: string) {
+	return mod(base, level, 1);
+}
+
+export function darken(base: string, level: string) {
+	return mod(base, level, -1);
+}
+
+function mod(base: string, level: string, sign: number) {
+	return (
+		`oklch(from ` +
+		base +
+		` calc(l * (1 + ${level} / 30 * ${sign} * var(--mode-mult, 1)))` +
+		` calc(c * (1 - (${level} * 0.1 * ${sign} * (1 + (1 - var(--global-saturation, 0))))))` +
+		` h)`
+	);
+}

package/src/uno/preflights/_util.ts

@@ -0,0 +1,10 @@
+import { Preflight } from 'unocss';
+
+export function preflight(def: Preflight): Preflight {
+	return {
+		...def,
+		getCSS: async (...args) =>
+			(await def.getCSS(...args))?.replace(/\n+/gm, ' ').replaceAll('\t', '') +
+			'\n',
+	};
+}

package/src/uno/preflights/base.ts

@@ -0,0 +1,17 @@
+import { Theme } from '@unocss/preset-mini';
+import { entriesToCss, Preflight, PreflightContext, toArray } from 'unocss';
+import { preflight } from './_util.js';
+
+export const basePreflight: Preflight = preflight({
+	getCSS: (ctx: PreflightContext<Theme>) => {
+		if (ctx.theme.preflightBase) {
+			const css = entriesToCss(Object.entries(ctx.theme.preflightBase));
+			const roots = toArray(
+				ctx.theme.preflightRoot ?? ['*,::before,::after', '::backdrop'],
+			);
+			return roots
+				.map((root) => `@layer preflightBase{${root}{${css}}}`)
+				.join('');
+		}
+	},
+});