@a-type/ui 6.0.81 → 6.1.0

package/src/arbor/arbor.ts

@@ -3,7 +3,7 @@ import {
 	ArborPresetConfig,
 	compileSingleColor,
 	presetArbor,
-} from '@arbor-css/core/preset-arbor';
+} from '@arbor-css/core/preset-v2';
 import { $userColorHue, $userColorSaturation } from './props.js';
 
 const defaultColors = {
@@ -103,7 +103,7 @@ export function presetAtype<
 			fadeInUp: (css, $) => css`
 				from {
 					opacity: 0;
-					transform: translateY(${$.mode.space.sm});
+					transform: translateY(${$.mode.sp.sm});
 				}
 				to {
 					opacity: 1;
@@ -113,7 +113,7 @@ export function presetAtype<
 			fadeInLeft: (css, $) => css`
 				from {
 					opacity: 0;
-					transform: translateX(-${$.mode.space.sm});
+					transform: translateX(-${$.mode.sp.sm});
 				}
 				to {
 					opacity: 1;
@@ -123,7 +123,7 @@ export function presetAtype<
 			fadeInRight: (css, $) => css`
 				from {
 					opacity: 0;
-					transform: translateX(${$.mode.space.sm});
+					transform: translateX(${$.mode.sp.sm});
 				}
 				to {
 					opacity: 1;
@@ -137,7 +137,7 @@ export function presetAtype<
 				}
 				to {
 					opacity: 0;
-					transform: translateY(-${$.mode.space.sm});
+					transform: translateY(-${$.mode.sp.sm});
 				}
 			`,
 			fadeOutLeft: (css, $) => css`
@@ -147,7 +147,7 @@ export function presetAtype<
 				}
 				to {
 					opacity: 0;
-					transform: translateX(-${$.mode.space.sm});
+					transform: translateX(-${$.mode.sp.sm});
 				}
 			`,
 			fadeOutRight: (css, $) => css`
@@ -157,7 +157,7 @@ export function presetAtype<
 				}
 				to {
 					opacity: 0;
-					transform: translateX(${$.mode.space.sm});
+					transform: translateX(${$.mode.sp.sm});
 				}
 			`,
 			fadeOutDown: (css, $) => css`
@@ -167,7 +167,7 @@ export function presetAtype<
 				}
 				to {
 					opacity: 0;
-					transform: translateY(${$.mode.space.sm});
+					transform: translateY(${$.mode.sp.sm});
 				}
 			`,
 			fadeOut: (css) => css`
@@ -202,31 +202,31 @@ export function presetAtype<
 		name: 'a-type',
 		extends: [base],
 		baseMode: ($) => ({
+			accent: $.mode.color[defaultAccent],
 			color: {
-				accent: $.mode.color.palette[defaultAccent],
-				palette: {
-					user: compileSingleColor(
-						{
-							hue: $.mode.user.hue,
-							saturation: $.mode.user.saturation,
-						},
-						$.mode.global,
-					),
-				},
+				user: compileSingleColor(
+					{
+						hue: $.mode.user.hue,
+						saturation: $.mode.user.saturation,
+					},
+					$.mode.global,
+				),
 			},
 			action: {
 				roundness: config?.roundActions === false ? undefined : 2,
 
 				light: {
-					bg: $.mode.color.main.light,
+					bg: $.mode.tint.light,
 					fg: $.mode.global.trueHeavyColor,
-					border: css`
-						${$.mode.action.light.borderWidth} ${$.mode.action.light
-							.borderStyle} ${$.mode.action.light.borderColor}
-					`,
-					borderColor: $.mixins.fg.ref,
-					borderStyle: 'solid',
-					borderWidth: $.mode.lineWidth.$root,
+					b: {
+						$root: css`
+							${$.mode.action.light.b.width} ${$.mode.action.light.b.style} ${$
+								.mode.action.light.b.color}
+						`,
+						width: $.mode.lw.$root,
+						color: $.mixins.fg.ref,
+						style: 'solid',
+					},
 				},
 				primary: {
 					borderColor: $.mixins.fg.ref,
@@ -236,13 +236,17 @@ export function presetAtype<
 				},
 			},
 			control: {
-				roundness: config?.roundControls ? 2 : undefined,
-				padding: {
-					block: $.mode.space.sm,
+				config: {
+					roundness: config?.roundControls ? 2 : undefined,
+				},
+				p: {
+					block: $.mode.sp.sm,
 				},
 			},
 			surface: {
-				roundness: 1,
+				config: {
+					roundness: 1,
+				},
 			},
 			user: {
 				hue: 0,
@@ -261,9 +265,7 @@ export function presetAtype<
 			},
 		}),
 		modeSchema: {
-			color: {
-				accent: base.modeSchema.color.main,
-			},
+			accent: base.modeSchema.tint,
 			user: {
 				hue: {
 					purpose: 'other',
@@ -285,12 +287,12 @@ export function presetAtype<
 						${base.mixins.bg.apply({ '--color': $.mode.action.light.bg })}
 						${base.mixins.fg.apply({ '--color': $.mode.action.light.fg })}
 						${base.mixins.borderColor.apply({
-							'--color': $.mode.action.light.borderColor,
+							'--color': $.mode.action.light.b.color,
 						})}
-						border-width: ${$.mode.action.light.borderWidth};
-						border-style: ${$.mode.action.light.borderStyle};
-						border-radius: ${$.mode.action.radius};
-						padding: ${$.mode.action.padding.$root};
+						border-width: ${$.mode.action.light.b.width};
+						border-style: ${$.mode.action.light.b.style};
+						border-radius: ${$.mode.action.rd};
+						padding: ${$.mode.action.p.$root};
 					`,
 				}),
 				hover: create('hover', {
@@ -322,7 +324,7 @@ export function presetAtype<
 							${base.mixins.bgLighter.apply({ '--step': 1 })}
 							${base.mixins.ring.apply({
 								'--ring': base.functions.ring.compute({
-									'--color': $.mode.color.main.heavy,
+									'--color': $.mode.tint.heavy,
 									'--size': '2px',
 								}),
 							})}
@@ -353,7 +355,7 @@ export function presetAtype<
 							${base.mixins.bgDesaturated.apply({ '--step': 8 })}
 							${base.mixins.fgFaded.apply({
 								'--opacity': 0.65,
-								'--source': $.mode.color.neutral.ink,
+								'--source': $.mode.gray.ink,
 							})}
 						}
 					`,
@@ -368,45 +370,32 @@ export function presetAtype<
 						fallback: '2px',
 					},
 				],
-				definition: (css, width) =>
-					css`0 0 0 ${width} ${$.mode.color.main.heavy}`,
+				definition: (css, width) => css`0 0 0 ${width} ${$.mode.tint.heavy}`,
 			}),
 		}),
 	});
 
 	preset.bundleMode('primary', {
-		color: {
-			main: preset.$.mode.color.palette[config?.mainColor ?? 'lemon'] as any,
-		},
+		tint: preset.$.mode.color[config?.mainColor ?? 'lemon'] as any,
 	});
 	preset.bundleMode('accent', {
-		color: {
-			main: preset.$.mode.color.accent,
-		},
+		tint: preset.$.mode.accent,
 	});
 	preset.bundleMode('success', {
-		color: {
-			main: preset.$.mode.color.palette.success,
-		},
+		tint: preset.$.mode.color.success,
 	});
 	preset.bundleMode('attention', {
-		color: {
-			main: preset.$.mode.color.palette.attention,
-		},
+		tint: preset.$.mode.color.attention,
 	});
 	preset.bundleMode('neutral', {
-		color: {
-			main: preset.$.mode.color.neutral,
-		},
+		tint: preset.$.mode.gray,
 	});
 	preset.bundleMode('user', {
 		user: {
 			hue: `var(${$userColorHue}, 200)`,
 			saturation: `var(${$userColorSaturation}, 1)`,
 		},
-		color: {
-			main: preset.$.mode.color.palette.user,
-		},
+		tint: preset.$.mode.color.user,
 	});
 
 	const allColorNames = new Set<DefaultColorRangeName>([
@@ -417,13 +406,11 @@ export function presetAtype<
 	]);
 	for (const colorName of allColorNames) {
 		preset.bundleMode(colorName, {
-			color: {
-				main: preset.$.mode.color.palette[colorName],
-				// avoid assigning leek to both main and accent
-				accent: (colorName === defaultAccent
-					? preset.$.mode.color.palette[fallbackAccent]
-					: preset.$.mode.color.palette[defaultAccent]) as any,
-			},
+			tint: preset.$.mode.color[colorName],
+			// avoid assigning leek to both main and accent
+			accent: (colorName === defaultAccent
+				? preset.$.mode.color[fallbackAccent]
+				: preset.$.mode.color[defaultAccent]) as any,
 		});
 	}
 

package/src/colors.module.css

@@ -1,41 +1,41 @@
 .bgWash {
-	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-bg(var(--m-tint-wash));
 }
 .bgLight {
-	@apply --mx-bg(var(--m-color-main-light));
+	@apply --mx-bg(var(--m-tint-light));
 }
 .bgMid {
-	@apply --mx-bg(var(--m-color-main));
+	@apply --mx-bg(var(--m-tint));
 }
 .bgHeavy {
-	@apply --mx-bg(var(--m-color-main-heavy));
+	@apply --mx-bg(var(--m-tint-heavy));
 }
 .bgInk {
-	@apply --mx-bg(var(--m-color-main-ink));
+	@apply --mx-bg(var(--m-tint-ink));
 }
 
 .bgNeutralInk {
-	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-bg(var(--m-gray-ink));
 }
 .bgNeutralPaper {
-	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-bg(var(--m-gray-paper));
 }
 .bgNeutralWash {
-	@apply --mx-bg(var(--m-color-neutral-wash));
+	@apply --mx-bg(var(--m-gray-wash));
 }
 
 .rangeLabel {
 	position: absolute;
 	left: 0;
 	top: 0;
-	@apply --mx-fg(var(--m-color-neutral));
-	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray));
+	@apply --mx-bg(var(--m-gray-ink));
 	@apply --mx-bg-faded(50%);
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: var(--m-prose-ambient-weight);
-	padding: var(--m-space-xs);
-	border-radius: var(--m-radius-sm);
+	padding: var(--m-sp-xs);
+	border-radius: var(--m-rd-sm);
 }
 
 .bgLighten1 {
@@ -52,8 +52,8 @@
 }
 
 .bgBetweenMidLight {
-	@apply --mx-bg(--fn-color-between(var(--m-color-main), var(--m-color-main-light)));
+	@apply --mx-bg(--fn-color-between(var(--m-tint), var(--m-tint-light)));
 }
 .bgBetweenMidHeavy {
-	@apply --mx-bg(--fn-color-between(var(--m-color-main), var(--m-color-main-heavy)));
+	@apply --mx-bg(--fn-color-between(var(--m-tint), var(--m-tint-heavy)));
 }

package/src/components/actions/ActionBar.module.css

@@ -7,7 +7,7 @@
 	align-items: center;
 	justify-content: flex-start;
 	overflow: clip;
-	transition: height var(--m-duration) var(--m-easing);
+	transition: height var(--m-dur) var(--m-ease);
 
 	&:empty {
 		height: 0;

package/src/components/actions/ActionButton.module.css

@@ -2,5 +2,5 @@
 	font-weight: normal;
 }
 .collapse {
-	padding: var(--m-space-sm);
+	padding: var(--m-sp-sm);
 }

package/src/components/avatar/Avatar.module.css

@@ -10,17 +10,17 @@
 	justify-content: center;
 	overflow: hidden;
 
-	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-bg(var(--m-gray-paper));
 
-	border-width: var(--m-lineWidth-sm);
+	border-width: var(--m-lw-sm);
 	border-style: solid;
-	border-color: var(--m-color-neutral-ink);
+	border-color: var(--m-gray-ink);
 
-	border-radius: var(--m-radius-lg);
+	border-radius: var(--m-rd-lg);
 
 	&[data-empty='true'] {
 		border-style: dashed;
-		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg(var(--m-gray-light));
 	}
 }
 

package/src/components/box/Box.module.css

@@ -26,20 +26,20 @@
 			gap: 0;
 		}
 		&[data-gap='xs'] {
-			gap: var(--m-space-xs);
+			gap: var(--m-sp-xs);
 		}
 		&[data-gap='sm'] {
-			gap: var(--m-space-sm);
+			gap: var(--m-sp-sm);
 		}
 		&[data-gap='md'],
 		&[data-gap='true'] {
-			gap: var(--m-space-md);
+			gap: var(--m-sp-md);
 		}
 		&[data-gap='lg'] {
-			gap: var(--m-space-lg);
+			gap: var(--m-sp-lg);
 		}
 		&[data-gap='xl'] {
-			gap: var(--m-space-xl);
+			gap: var(--m-sp-xl);
 		}
 
 		&[data-items='start'] {
@@ -92,20 +92,20 @@
 			--padding: 0;
 		}
 		&[data-p='xs'] {
-			--padding: var(--m-space-xs);
+			--padding: var(--m-sp-xs);
 		}
 		&[data-p='sm'] {
-			--padding: var(--m-space-sm);
+			--padding: var(--m-sp-sm);
 		}
 		&[data-p='md'] {
-			--padding: var(--m-space-md);
+			--padding: var(--m-sp-md);
 		}
 		&[data-p='lg'],
 		&[data-p='true'] {
-			--padding: var(--m-space-lg);
+			--padding: var(--m-sp-lg);
 		}
 		&[data-p='xl'] {
-			--padding: var(--m-space-xl);
+			--padding: var(--m-sp-xl);
 		}
 		padding: var(--padding, 0);
 		&[data-squish='vertical'] {
@@ -119,17 +119,17 @@
 			border-radius: 0;
 		}
 		&[data-rounded='xs'] {
-			border-radius: var(--m-radius-xs);
+			border-radius: var(--m-rd-xs);
 		}
 		&[data-rounded='sm'] {
-			border-radius: var(--m-radius-sm);
+			border-radius: var(--m-rd-sm);
 		}
 		&[data-rounded='md'],
 		&[data-rounded='true'] {
-			border-radius: var(--m-radius-md);
+			border-radius: var(--m-rd-md);
 		}
 		&[data-rounded='lg'] {
-			border-radius: var(--m-radius-lg);
+			border-radius: var(--m-rd-lg);
 		}
 
 		&[data-w='full'] {
@@ -182,7 +182,7 @@
 		}
 
 		&[data-border='true'] {
-			@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+			@apply --mx-borderColor(var(--m-surface-ambient-b-color));
 		}
 
 		&[data-surface='ambient'],
@@ -190,21 +190,21 @@
 			@apply --mx-bg(var(--m-surface-ambient-bg));
 			@apply --mx-fg(var(--m-surface-ambient-fg));
 			&[data-border='true'] {
-				@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+				@apply --mx-borderColor(var(--m-surface-ambient-b-color));
 			}
 		}
 		&[data-surface='secondary'] {
 			@apply --mx-bg(var(--m-surface-secondary-bg));
 			@apply --mx-fg(var(--m-surface-secondary-fg));
 			&[data-border='true'] {
-				@apply --mx-borderColor(var(--m-surface-secondary-borderColor));
+				@apply --mx-borderColor(var(--m-surface-secondary-b-color));
 			}
 		}
 		&[data-surface='primary'] {
 			@apply --mx-bg(var(--m-surface-primary-bg));
 			@apply --mx-fg(var(--m-surface-primary-fg));
 			&[data-border='true'] {
-				@apply --mx-borderColor(var(--m-surface-primary-borderColor));
+				@apply --mx-borderColor(var(--m-surface-primary-b-color));
 			}
 		}
 
@@ -214,7 +214,7 @@
 		}
 		/* reduce specificity so surface styles override */
 		&:where([data-dim='true']) {
-			@apply --mx-fg(var(--m-color-neutral-ink));
+			@apply --mx-fg(var(--m-gray-ink));
 		}
 		&[data-dim='true'] {
 			@apply --mx-fg-lighter(2.5);

package/src/components/box/Box.stories.tsx

@@ -138,7 +138,7 @@ export const Surfaces: Story = {
 				style={{
 					display: 'grid',
 					gridTemplateColumns: 'repeat(2, 1fr)',
-					gap: 'var(--m-space-lg)',
+					gap: 'var(--m-sp-lg)',
 				}}
 				{...args}
 			>

package/src/components/button/Button.module.css

@@ -2,13 +2,13 @@
 	user-select: none;
 	appearance: none;
 	cursor: pointer;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	justify-content: start;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 
 	position: relative;
 	overflow: visible;
@@ -37,7 +37,7 @@
 		&:focus {
 			--mx-bg-applied: inherit;
 			--mx-bg-ref: --fn-color-heavier(
-				color-mix(var(--mx-bg-applied), var(--m-color-main-light) 20%),
+				color-mix(var(--mx-bg-applied), var(--m-tint-light) 20%),
 				1
 			);
 		}
@@ -45,7 +45,7 @@
 	&[data-emphasis='ghost'],
 	&[data-emphasis='default'] {
 		&[aria-pressed='true'] {
-			@apply --mx-bg(var(--m-color-main-light));
+			@apply --mx-bg(var(--m-tint-light));
 		}
 	}
 
@@ -53,10 +53,10 @@
 			[data-disable-icon-mode='true']
 		):not([data-size='wrapper']),
 	&[data-force-icon-mode='true']:not([data-size='wrapper']) {
-		padding: var(--m-space-md);
+		padding: var(--m-sp-md);
 
 		&[data-size='small'] {
-			padding: var(--m-space-sm);
+			padding: var(--m-sp-sm);
 		}
 
 		&:not([aria-pressed='true']) {
@@ -115,7 +115,7 @@
 		outline: none;
 	}
 	&:focus-visible {
-		box-shadow: 0 0 0 4px var(--m-color-main-ink);
+		box-shadow: 0 0 0 4px var(--m-tint-ink);
 	}
 }
 
@@ -126,13 +126,13 @@
 
 .toggleIndicator {
 	width: 0;
-	transition: width var(--m-duration) var(--m-easing);
+	transition: width var(--m-dur) var(--m-ease);
 
 	&[data-open='true'] {
 		width: --fn-literal(15px);
 	}
 	&[data-open='false'] {
-		margin-left: calc(-1 * var(--m-space-sm));
+		margin-left: calc(-1 * var(--m-sp-sm));
 	}
 }
 

package/src/components/camera/Camera.module.css

@@ -20,22 +20,22 @@
 
 .shutterButton {
 	position: absolute;
-	bottom: var(--m-space-md);
+	bottom: var(--m-sp-md);
 	left: 50%;
 	width: calc(48px / var(--m-global-space-density));
 	height: calc(48px / var(--m-global-space-density));
 	cursor: pointer;
 	transform: translateX(-50%);
 	opacity: 80%;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	--mx-ring-value: --fn-ring(var(--m-action-secondary-bg), 2px);
 	@apply --mx-bg(var(--m-action-secondary-bg));
 	@apply --mx-fg(color-contrast(var(--mx-bg-ref)));
 	@apply --mx-borderColor(var(--mx-fg-ref));
-	border-width: var(--m-lineWidth);
-	border-radius: var(--m-action-radius);
+	border-width: var(--m-lw);
+	border-radius: var(--m-action-rd);
 
 	&:hover {
 		opacity: 100%;
@@ -48,18 +48,18 @@
 	}
 	&:focus-visible {
 		@apply --mx-bg-lighter(1);
-		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 4px);
+		--mx-ring-value: --fn-ring(var(--m-tint-ink), 4px);
 	}
 }
 
 .swapButton {
 	position: absolute;
-	bottom: var(--m-space-xs);
-	left: var(--m-space-xs);
+	bottom: var(--m-sp-xs);
+	left: var(--m-sp-xs);
 }
 
 .fullscreenButton {
 	position: absolute;
-	top: var(--m-space-xs);
-	right: var(--m-space-xs);
+	top: var(--m-sp-xs);
+	right: var(--m-sp-xs);
 }