@a-type/ui 6.0.80 → 6.1.0

package/src/components/card/Card.module.css

@@ -6,8 +6,8 @@
 	overflow: clip;
 
 	@apply --mx-shadow(var(--m-shadow-sm));
-	border-width: var(--m-lineWidth-sm);
-	border-radius: var(--m-surface-radius);
+	border-width: var(--m-lw-sm);
+	border-radius: var(--m-surface-rd);
 
 	font-size: var(--m-prose-secondary-size);
 	line-height: var(--m-prose-secondary-lineHeight);
@@ -41,18 +41,18 @@
 	flex-direction: column;
 	flex-grow: 1;
 	align-items: start;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 
 	text-align: start;
 	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-md);
-	padding-bottom: var(--m-space-xs);
-	gap: var(--m-space-sm);
+	padding: var(--m-sp-md);
+	padding-bottom: var(--m-sp-xs);
+	gap: var(--m-sp-sm);
 
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	/* Purposefully don't use mixin, allow children to inherit from card root */
@@ -68,8 +68,8 @@
 		&:hover,
 		&:focus-visible,
 		&[data-focus-visible] {
-			@apply --mx-fg(var(--m-color-neutral-ink));
-			background-color: --fn-color-faded(var(--m-color-neutral-ink), 10%);
+			@apply --mx-fg(var(--m-gray-ink));
+			background-color: --fn-color-faded(var(--m-gray-ink), 10%);
 		}
 
 		&:focus {
@@ -77,7 +77,7 @@
 		}
 		&:focus-visible,
 		&[data-focus-visible] {
-			@apply --mx-ring(inset 0 0 0 2px var(--m-color-neutral-ink));
+			@apply --mx-ring(inset 0 0 0 2px var(--m-gray-ink));
 		}
 
 		&:disabled,
@@ -89,7 +89,7 @@
 
 .title {
 	z-index: 1;
-	padding: var(--m-space-xs) var(--m-space-md);
+	padding: var(--m-sp-xs) var(--m-sp-md);
 
 	@apply --mx-prose-primary;
 
@@ -98,7 +98,7 @@
 	overflow: clip;
 	max-width: 100%;
 	display: block;
-	border-radius: var(--m-radius-md);
+	border-radius: var(--m-rd-md);
 
 	@apply --mx-bg(inherit);
 }
@@ -107,11 +107,11 @@
 	z-index: 1;
 	display: flex;
 	flex-direction: row;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 	align-items: center;
-	border-radius: var(--m-radius-sm);
+	border-radius: var(--m-rd-sm);
 
-	padding: var(--m-space-sm) var(--m-space-md);
+	padding: var(--m-sp-sm) var(--m-sp-md);
 
 	font-size: var(--m-prose-ambient-size);
 	line-height: 1;
@@ -147,22 +147,22 @@
 	display: flex;
 	flex-direction: row;
 	flex-shrink: 0;
-	padding: var(--m-space-md);
+	padding: var(--m-sp-md);
 }
 
 .actions {
 	display: flex;
 	flex-direction: row;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 	align-items: center;
 
 	margin: auto auto auto --fn-literal(0px);
 	padding: 0;
 
 	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
-	/* @apply --mx-borderColor(var(--m-surface-ambient-borderColor));
-	border-width: var(--m-lineWidth-sm); */
-	border-radius: var(--m-action-radius);
+	/* @apply --mx-borderColor(var(--m-surface-ambient-b-color));
+	border-width: var(--m-lw-sm); */
+	border-radius: var(--m-action-rd);
 }
 
 .menu {
@@ -174,10 +174,10 @@
 	flex-direction: row;
 	align-items: center;
 
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 
 	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
-	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
-	border-width: var(--m-lineWidth-sm);
-	border-radius: var(--m-action-radius);
+	@apply --mx-borderColor(var(--m-surface-ambient-b-color));
+	border-width: var(--m-lw-sm);
+	border-radius: var(--m-action-rd);
 }

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

@@ -47,7 +47,7 @@ export const Default: Story = {
 				display: 'flex',
 				flexDirection: 'row',
 				alignItems: 'stretch',
-				gap: 'var(--m-space-md)',
+				gap: 'var(--m-sp-md)',
 			}}
 		>
 			<CardRoot {...args} style={{ minHeight: '20vh' }}>
@@ -285,7 +285,7 @@ export const CardsInBox: Story = {
 					width: '100%',
 					display: 'flex',
 					flexDirection: 'row',
-					gap: 'var(--m-space-lg)',
+					gap: 'var(--m-sp-lg)',
 				}}
 			>
 				<div style={{ flex: 1 }}>

package/src/components/checkbox/Checkbox.module.css

@@ -22,13 +22,13 @@
 
 	cursor: pointer;
 
-	transition: var(--m-duration) var(--m-easing);
+	transition: var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	@apply --mx-bg(var(--m-control-bg));
-	@apply --mx-borderColor(var(--m-control-borderColor));
-	border-radius: var(--m-control-radius);
-	border-width: var(--m-lineWidth-md);
+	@apply --mx-borderColor(var(--m-control-b-color));
+	border-radius: var(--m-control-rd);
+	border-width: var(--m-lw-md);
 
 	&:focus {
 		outline: none;
@@ -50,12 +50,12 @@
 	&:disabled {
 		box-shadow: none;
 		@apply --mx-bg(transparent);
-		@apply --mx-borderColor(var(--m-color-neutral-light));
+		@apply --mx-borderColor(var(--m-gray-light));
 	}
 
 	&[data-checked] {
-		@apply --mx-bg(var(--m-color-main));
-		@apply --mx-borderColor(var(--m-color-main-ink));
+		@apply --mx-bg(var(--m-tint));
+		@apply --mx-borderColor(var(--m-tint-ink));
 
 		&[data-checked-mode='faded'] {
 			animation-name: checkbox-fade;
@@ -70,5 +70,5 @@
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	color: var(--m-color-main-ink);
+	color: var(--m-tint-ink);
 }

package/src/components/chip/Chip.module.css

@@ -1,15 +1,15 @@
 .root {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 	white-space: nowrap;
 
-	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-bg(var(--m-gray-paper));
 	@apply --mx-fg(contrast-color(var(--mx-bg-ref)));
-	@apply --mx-borderColor(var(--m-color-main-heavy));
+	@apply --mx-borderColor(var(--m-tint-heavy));
 
-	border-width: var(--m-lineWidth-sm);
-	border-radius: var(--m-action-radius);
+	border-width: var(--m-lw-sm);
+	border-radius: var(--m-action-rd);
 
 	font-size: var(--m-prose-ambient-size);
 	line-height: normal;
@@ -17,16 +17,16 @@
 	font-family: var(--m-prose-ambient-font);
 
 	&& {
-		padding: var(--m-space-sm) var(--m-space-md);
+		padding: var(--m-sp-sm) var(--m-sp-md);
 	}
 
 	&[data-emphasis='primary'] {
-		@apply --mx-bg(var(--m-color-main-wash));
-		@apply --mx-borderColor(var(--m-color-main-heavy));
+		@apply --mx-bg(var(--m-tint-wash));
+		@apply --mx-borderColor(var(--m-tint-heavy));
 	}
 	&[data-emphasis='ambient'] {
 		@apply --mx-bg(transparent);
 		@apply --mx-borderColor(transparent);
-		@apply --mx-fg(var(--m-color-neutral-ink));
+		@apply --mx-fg(var(--m-gray-ink));
 	}
 }

package/src/components/collapsible/Collapsible.module.css

@@ -1,6 +1,6 @@
 .root {
 	overflow: clip;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	&[data-horizontal],
 	&[data-both] {
@@ -29,7 +29,7 @@
 }
 
 .icon {
-	transition: transform var(--m-duration) var(--m-easing);
+	transition: transform var(--m-dur) var(--m-ease);
 	[data-panel-open] & {
 		transform: rotate(180deg);
 	}

package/src/components/combobox/Combobox.module.css

@@ -4,8 +4,8 @@
 }
 
 .empty:not(:empty) {
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-space-sm);
+	@apply --mx-fg(var(--m-gray-heavy));
+	padding: var(--m-sp-sm);
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: var(--m-prose-ambient-weight);
@@ -15,14 +15,14 @@
 	display: flex;
 	flex-direction: column;
 	overflow: clip;
-	padding: var(--m-space-md);
-	gap: var(--m-space-xs);
+	padding: var(--m-sp-md);
+	gap: var(--m-sp-xs);
 }
 
 .groupItem {
 	@apply --mx-ring;
 	&[data-highlighted] {
-		@apply --mx-ring(--fn-ring(var(--m-color-main-mid), 2px));
+		@apply --mx-ring(--fn-ring(var(--m-tint-mid), 2px));
 	}
 }
 
@@ -30,14 +30,14 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .groupLabel {
 	text-transform: uppercase;
 	width: 100%;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding-inline: var(--m-space-xs);
+	@apply --mx-fg(var(--m-gray-heavy));
+	padding-inline: var(--m-sp-xs);
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: var(--m-prose-ambient-weight);
@@ -48,7 +48,7 @@
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
-	transition: transform var(--m-duration) var(--m-easing);
+	transition: transform var(--m-dur) var(--m-ease);
 
 	&[data-open] {
 		transform: rotate(180deg);
@@ -60,17 +60,17 @@
 	flex-direction: row;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--m-space-xs);
-	padding-inline-start: var(--m-space-md);
+	gap: var(--m-sp-xs);
+	padding-inline-start: var(--m-sp-md);
 }
 
 .chipsList {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--m-space-xs);
-	padding-inline: var(--m-space-sm);
-	margin-inline-start: calc(-1 * var(--m-space-md));
+	gap: var(--m-sp-xs);
+	padding-inline: var(--m-sp-sm);
+	margin-inline-start: calc(-1 * var(--m-sp-md));
 
 	&:empty {
 		display: none;
@@ -90,7 +90,7 @@
 	flex-direction: row;
 	flex-grow: 1;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .chip {
@@ -98,8 +98,8 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	padding-inline: var(--m-space-sm);
-	gap: var(--m-space-xs);
+	padding-inline: var(--m-sp-sm);
+	gap: var(--m-sp-xs);
 }
 
 .chipRemove {
@@ -107,12 +107,12 @@
 	min-width: 0;
 	padding: 0;
 	line-height: 1;
-	margin-block: calc(-1 * var(--m-space-xs));
-	margin-inline-end: calc(-1 * var(--m-space-sm));
+	margin-block: calc(-1 * var(--m-sp-xs));
+	margin-inline-end: calc(-1 * var(--m-sp-sm));
 }
 
 .item[data-selected] {
-	@apply --mx-fg(var(--m-color-main-ink));
+	@apply --mx-fg(var(--m-tint-ink));
 	@apply --mx-bg-heavier(1);
 }
 
@@ -120,7 +120,7 @@
 	margin-inline-start: auto;
 	height: --fn-literal(10px);
 	width: --fn-literal(10px);
-	stroke-width: var(--m-lineWidth-lg);
+	stroke-width: var(--m-lw-lg);
 }
 
 .list {
@@ -145,7 +145,7 @@
 .row {
 	display: flex;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .multiValue {
@@ -153,18 +153,18 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .clearAndCaret {
 	display: flex;
 	flex-shrink: 0;
 	align-items: center;
-	margin-right: calc(-1 * var(--m-control-padding-inline));
+	margin-right: calc(-1 * var(--m-control-p-inline));
 }
 
 .details {
 	@apply --mx-prose-ambient;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-space-md);
+	@apply --mx-fg(var(--m-gray-heavy));
+	padding: var(--m-sp-md);
 }

package/src/components/datePicker/Calendar.module.css

@@ -26,8 +26,8 @@
 	grid-template-columns: repeat(7, var(--day-size, 32px));
 	grid-auto-rows: var(--day-size, 32px);
 	overflow: hidden;
-	padding: var(--m-space-sm);
-	border-radius: var(--m-radius-sm);
+	padding: var(--m-sp-sm);
+	border-radius: var(--m-rd-sm);
 }
 
 .dayLabel {
@@ -35,7 +35,7 @@
 	align-items: center;
 	justify-content: center;
 	font-size: var(--m-prose-ambient-size);
-	@apply --mx-fg(var(--m-color-neutral-heavy));
+	@apply --mx-fg(var(--m-gray-heavy));
 }
 
 .calendarDay {
@@ -43,15 +43,15 @@
 	margin-bottom: --fn-literal(-1px);
 	margin-right: --fn-literal(-1px);
 
-	@apply --mx-fg(var(--m-color-neutral-ink));
-	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-fg(var(--m-gray-ink));
+	@apply --mx-bg(var(--m-gray-paper));
 	@apply --mx-borderColor(transparent);
 
 	display: flex;
 	cursor: pointer;
 	align-items: center;
 	justify-content: center;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	--mx-shadow-value: var(--m-shadow-sm);
@@ -59,19 +59,19 @@
 	&[data-highlighted] {
 		z-index: 1;
 		outline: none;
-		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
+		--mx-ring-value: --fn-ring(var(--m-tint-heavy), 2px);
 	}
 
 	&[data-selected] {
 		z-index: 2;
-		@apply --mx-bg(var(--m-color-main));
-		border-radius: var(--m-radius-sm);
+		@apply --mx-bg(var(--m-tint));
+		border-radius: var(--m-rd-sm);
 	}
 
 	&[data-in-range] {
 		z-index: 1;
 		border-radius: 0;
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		--mx-shadow-value: 0 0 0 0 transparent;
 	}
 
@@ -88,66 +88,66 @@
 		top: --fn-literal(1px);
 		width: --fn-literal(6px);
 		height: --fn-literal(6px);
-		background-color: var(--m-color-palette-attention);
-		border-radius: var(--m-radius-lg);
-		border: 1px solid var(--m-color-neutral-ink);
+		background-color: var(--m-color-attention);
+		border-radius: var(--m-rd-lg);
+		border: 1px solid var(--m-gray-ink);
 	}
 
 	/* Calendar grid edge borders */
 	&[data-top-edge] {
-		border-top-color: var(--m-color-neutral);
+		border-top-color: var(--m-gray);
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
 	}
 	&[data-bottom-edge] {
-		border-bottom-color: var(--m-color-neutral);
+		border-bottom-color: var(--m-gray);
 		border-bottom-left-radius: 0;
 		border-bottom-right-radius: 0;
 	}
 	&[data-first-column] {
-		border-left-color: var(--m-color-neutral);
+		border-left-color: var(--m-gray);
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
 	&[data-last-column] {
-		border-right-color: var(--m-color-neutral);
+		border-right-color: var(--m-gray);
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
 	}
 	&[data-day-first] {
-		border-left-color: var(--m-color-neutral);
-		border-top-left-radius: var(--m-radius-sm);
+		border-left-color: var(--m-gray);
+		border-top-left-radius: var(--m-rd-sm);
 	}
 	&[data-day-last] {
-		border-right-color: var(--m-color-neutral);
-		border-bottom-right-radius: var(--m-radius-sm);
+		border-right-color: var(--m-gray);
+		border-bottom-right-radius: var(--m-rd-sm);
 		border-top-right-radius: 0;
 	}
 	&[data-first-column][data-bottom-edge] {
-		border-bottom-left-radius: var(--m-radius-sm);
+		border-bottom-left-radius: var(--m-rd-sm);
 	}
 	&[data-last-column][data-bottom-edge] {
-		border-bottom-right-radius: var(--m-radius-sm);
+		border-bottom-right-radius: var(--m-rd-sm);
 	}
 	&[data-first-column][data-top-edge] {
-		border-top-left-radius: var(--m-radius-sm);
+		border-top-left-radius: var(--m-rd-sm);
 	}
 	&[data-last-column][data-top-edge] {
-		border-top-right-radius: var(--m-radius-sm);
+		border-top-right-radius: var(--m-rd-sm);
 	}
 
 	&[data-range-end] {
 		z-index: 1;
-		@apply --mx-bg(var(--m-color-main));
-		border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
+		@apply --mx-bg(var(--m-tint));
+		border-radius: 0 var(--m-rd-sm) var(--m-rd-sm) 0;
 		--mx-shadow-value: 0 0 0 0 transparent;
 	}
 
 	&[data-range-start] {
 		z-index: 1;
-		@apply --mx-bg(var(--m-color-main));
+		@apply --mx-bg(var(--m-tint));
 		/* tl tr br bl */
-		border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm);
+		border-radius: var(--m-rd-sm) 0 0 var(--m-rd-sm);
 	}
 
 	&[data-different-month] {
@@ -157,11 +157,11 @@
 	&:hover {
 		z-index: 100;
 		outline: none;
-		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
+		--mx-ring-value: --fn-ring(var(--m-tint-heavy), 2px);
 	}
 
 	&:active {
-		@apply --mx-bg(var(--m-color-main-light));
-		border-radius: var(--m-radius-sm);
+		@apply --mx-bg(var(--m-tint-light));
+		border-radius: var(--m-rd-sm);
 	}
 }

package/src/components/datePicker/dateRangePicker.module.css

@@ -10,7 +10,7 @@
 		'prevMonth leftMonth nextMonth'
 		'leftGrid leftGrid leftGrid';
 	grid-template-rows: auto 1fr;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 
 	@media (min-width: 640px) {
 		grid-template-columns: auto 1fr 1fr auto;