@a-type/ui 6.0.81 → 6.1.0

package/src/components/richEditor/richEditor.module.css

@@ -18,14 +18,14 @@
 	& h1 {
 		@apply --mx-prose-primary;
 		&:not(:first-child) {
-			margin-top: var(--m-space-xl);
+			margin-top: var(--m-sp-xl);
 		}
 	}
 	& h2 {
 		@apply --mx-prose-secondary;
 		font-weight: var(--m-prose-primary-weight);
 		&:not(:first-child) {
-			margin-top: var(--m-space-lg);
+			margin-top: var(--m-sp-lg);
 		}
 	}
 	& h3 {
@@ -33,19 +33,19 @@
 		font-weight: var(--m-prose-primary-weight);
 		text-transform: uppercase;
 		&:not(:first-child) {
-			margin-top: var(--m-space-md);
+			margin-top: var(--m-sp-md);
 		}
 	}
 	& h4 {
 		@apply --mx-prose-ambient;
 		font-weight: var(--m-prose-primary-weight);
 		&:not(:first-child) {
-			margin-top: var(--m-space-md);
+			margin-top: var(--m-sp-md);
 		}
 	}
 	& p {
 		@apply --mx-prose-secondary;
-		margin-bottom: var(--m-space-md);
+		margin-bottom: var(--m-sp-md);
 	}
 	& a {
 		text-decoration: underline;
@@ -55,13 +55,13 @@
 		@apply --mx-focus;
 	}
 	& blockquote {
-		border-left: 4px solid var(--m-color-neutral-heavy);
-		padding-left: var(--m-space-md);
+		border-left: 4px solid var(--m-gray-heavy);
+		padding-left: var(--m-sp-md);
 		font-style: italic;
-		margin-block: var(--m-space-md);
-		margin-inline-start: var(--m-space-md);
-		padding-inline: var(--m-space-md);
-		@apply --mx-bg(var(--m-color-neutral-wash));
+		margin-block: var(--m-sp-md);
+		margin-inline-start: var(--m-sp-md);
+		padding-inline: var(--m-sp-md);
+		@apply --mx-bg(var(--m-gray-wash));
 	}
 	& ul {
 		list-style: disc;
@@ -71,25 +71,25 @@
 	}
 	& ul,
 	& ol {
-		padding-inline-start: var(--m-space-lg);
-		margin-block: var(--m-space-md);
+		padding-inline-start: var(--m-sp-lg);
+		margin-block: var(--m-sp-md);
 	}
 	& li {
-		margin-block-end: var(--m-space-xs);
+		margin-block-end: var(--m-sp-xs);
 	}
 	& mark {
-		@apply --mx-bg(var(--m-color-main-wash));
+		@apply --mx-bg(var(--m-tint-wash));
 	}
 	& strong {
-		font-weight: var(--m-text-weight-bold);
+		font-weight: var(--m-fw-bold);
 	}
 	& em {
 		font-style: italic;
 	}
 	& hr {
 		border: none;
-		border-top: var(--m-lineWidth) solid var(--m-color-neutral-heavy);
-		margin-block: var(--m-space-lg);
+		border-top: var(--m-lw) solid var(--m-gray-heavy);
+		margin-block: var(--m-sp-lg);
 	}
 }
 

package/src/components/scrollArea/ScrollArea.module.css

@@ -15,7 +15,7 @@
 		outline: none;
 	}
 	&:focus-visible {
-		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+		--mx-ring-value: --fn-ring(var(--m-tint-ink), 1px);
 	}
 }
 
@@ -37,7 +37,7 @@
 		display: block;
 		height: min(40px, var(--scroll-area-overflow-y-start, 40px));
 		width: 100%;
-		transition: height var(--m-duration) var(--m-easing);
+		transition: height var(--m-dur) var(--m-ease);
 
 		background: linear-gradient(
 			to bottom,
@@ -56,7 +56,7 @@
 		display: block;
 		height: min(40px, var(--scroll-area-overflow-y-end, 40px));
 		width: 100%;
-		transition: height var(--m-duration) var(--m-easing);
+		transition: height var(--m-dur) var(--m-ease);
 
 		background: linear-gradient(to top, var(--mx-bg-ref) 0%, transparent 100%);
 	}
@@ -80,7 +80,7 @@
 		display: block;
 		height: 100%;
 		width: min(40px, var(--scroll-area-overflow-x-start, 40px));
-		transition: width var(--m-duration) var(--m-easing);
+		transition: width var(--m-dur) var(--m-ease);
 
 		background: linear-gradient(
 			to right,
@@ -99,7 +99,7 @@
 		display: block;
 		height: 100%;
 		width: min(40px, var(--scroll-area-overflow-x-end, 40px));
-		transition: width var(--m-duration) var(--m-easing);
+		transition: width var(--m-dur) var(--m-ease);
 
 		background: linear-gradient(to left, var(--mx-bg-ref) 0%, transparent 100%);
 	}
@@ -118,7 +118,7 @@
 .thumb {
 	@apply --mx-bg(var(--mx-fg-ref));
 	@apply --mx-bg-faded(25%);
-	border-radius: var(--m-radius-full);
+	border-radius: var(--m-rd-full);
 
 	&[data-orientation='vertical'] {
 		width: 100%;
@@ -135,12 +135,12 @@
 	display: flex;
 	user-select: none;
 	opacity: 0;
-	border-radius: var(--m-radius-full);
+	border-radius: var(--m-rd-full);
 	touch-action: none;
 	transition:
 		opacity,
 		height,
-		width var(--m-duration) var(--m-easing);
+		width var(--m-dur) var(--m-ease);
 
 	@apply --mx-bg(var(--mx-fg-ref));
 	@apply --mx-bg-faded(5%);

package/src/components/select/Select.module.css

@@ -1,10 +1,10 @@
 .trigger {
 	display: inline-flex;
 	font-weight: normal;
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 
 	&[data-placeholder] {
-		color: var(--m-color-neutral-heavy);
+		color: var(--m-gray-heavy);
 	}
 }
 
@@ -14,7 +14,7 @@
 }
 
 .groupLabel {
-	padding-inline: var(--m-space-lg);
+	padding-inline: var(--m-sp-lg);
 }
 
 .icon {

package/src/components/skeletons/skeletons.module.css

@@ -12,7 +12,7 @@
 	display: inline-block;
 	height: 100%;
 	max-width: 100%;
-	border-radius: var(--m-radius-md);
+	border-radius: var(--m-rd-md);
 	width: 100%;
 	flex-shrink: 0;
 	opacity: 20%;
@@ -20,14 +20,14 @@
 	animation-name: skeleton;
 	animation-duration: 1.5s;
 	animation-iteration-count: infinite;
-	animation-timing-function: var(--m-easing);
+	animation-timing-function: var(--m-ease);
 	animation-direction: alternate;
 	animation-play-state: running;
 
 	background-image: linear-gradient(
 		to right,
 		transparent 0%,
-		var(--mx-fg-ref, var(--m-color-main-ink)) 50%,
+		var(--mx-fg-ref, var(--m-tint-ink)) 50%,
 		transparent 100%
 	);
 }

package/src/components/slider/Slider.module.css

@@ -30,12 +30,12 @@
 	height: var(--size);
 	flex-grow: 1;
 	user-select: none;
-	transition: background-color var(--m-duration) var(--m-easing);
+	transition: background-color var(--m-dur) var(--m-ease);
 	box-sizing: border-box;
 
 	@apply --mx-bg(transparent);
-	border-radius: var(--m-radius-lg);
-	@apply --mx-ring(--fn-ring(var(--m-color-neutral-ink), 1px));
+	border-radius: var(--m-rd-lg);
+	@apply --mx-ring(--fn-ring(var(--m-gray-ink), 1px));
 
 	&[data-orientation='vertical'] {
 		height: 100%;
@@ -46,9 +46,9 @@
 
 .range {
 	box-sizing: border-box;
-	transition: background-color var(--m-duration) var(--m-easing);
-	@apply --mx-bg(var(--m-color-main));
-	border-radius: var(--m-radius-lg);
+	transition: background-color var(--m-dur) var(--m-ease);
+	@apply --mx-bg(var(--m-tint));
+	border-radius: var(--m-rd-lg);
 }
 
 .thumb {
@@ -63,24 +63,24 @@
 	line-height: 1;
 	touch-action: none;
 	transition:
-		background-color var(--m-duration) var(--m-easing),
-		box-shadow var(--m-duration) var(--m-easing);
+		background-color var(--m-dur) var(--m-ease),
+		box-shadow var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	--mx-shadow-value: var(--m-shadow-sm);
 
-	@apply --mx-borderColor(var(--m-color-neutral-ink));
-	border-width: var(--m-lineWidth-md);
+	@apply --mx-borderColor(var(--m-gray-ink));
+	border-width: var(--m-lw-md);
 
 	@apply --mx-bg(var(--m-control-bg));
-	border-radius: var(--m-control-radius);
+	border-radius: var(--m-control-rd);
 
 	&:hover {
 		--mx-shadow-value: var(--m-shadow-md);
 	}
 
 	&:active {
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		--mx-shadow-value: var(--m-shadow-lg);
 		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
 	}
@@ -90,7 +90,7 @@
 	}
 
 	&:focus-visible {
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		--mx-shadow-value: var(--m-shadow-lg);
 		--mx-ring-value: --fn-focus-ring();
 	}

package/src/components/spinner/Spinner.module.css

@@ -50,5 +50,5 @@
 	align-items: center;
 	align-self: stretch;
 	justify-content: center;
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 }

package/src/components/switch/Switch.module.css

@@ -9,17 +9,17 @@
 	appearance: none;
 	padding: --fn-literal(3px);
 
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	--mx-shadow-value: inset var(--m-shadow-sm);
 
 	@apply --mx-bg(var(--m-control-bg));
-	@apply --mx-borderColor(var(--m-control-borderColor));
-	border-radius: var(--m-radius-lg);
+	@apply --mx-borderColor(var(--m-control-b-color));
+	border-radius: var(--m-rd-lg);
 
 	&[data-checked] {
-		@apply --mx-bg(var(--m-color-main));
+		@apply --mx-bg(var(--m-tint));
 	}
 
 	@apply --mx-hover;
@@ -32,14 +32,14 @@
 	display: block;
 	aspect-ratio: 1/1;
 	height: 100%;
-	transition: transform var(--m-duration) var(--m-easing);
+	transition: transform var(--m-dur) var(--m-ease);
 	will-change: transform;
 
 	@apply --mx-shadow(var(--m-shadow-sm));
 
-	@apply --mx-bg(var(--m-color-neutral-paper));
-	@apply --mx-borderColor(var(--m-control-border));
-	border-radius: var(--m-radius-lg);
+	@apply --mx-bg(var(--m-gray-paper));
+	@apply --mx-borderColor(var(--m-control-b));
+	border-radius: var(--m-rd-lg);
 
 	position: relative;
 
@@ -57,7 +57,7 @@
 		align-items: center;
 		justify-content: center;
 		content: '✓';
-		color: var(--m-color-main-ink);
+		color: var(--m-tint-ink);
 		font-size: var(--m-prose-ambient-size);
 	}
 }

package/src/components/tabs/tabs.module.css

@@ -3,7 +3,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: flex-start;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .trigger {
@@ -13,17 +13,17 @@
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
-	gap: var(--m-space-xs);
-	padding: var(--m-action-padding);
+	gap: var(--m-sp-xs);
+	padding: var(--m-action-p);
 
 	cursor: pointer;
 	user-select: none;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	text-align: center;
 	white-space: nowrap;
 
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 	font-size: var(--m-prose-secondary-size);
 	font-weight: var(--m-prose-secondary-weight);
 	line-height: 1;
@@ -36,11 +36,11 @@
 	flex-shrink: 0;
 
 	background: transparent;
-	border: var(--m-lineWidth-sm) solid transparent;
-	border-radius: var(--m-radius-lg);
+	border: var(--m-lw-sm) solid transparent;
+	border-radius: var(--m-rd-lg);
 
 	&[aria-selected='false']:hover {
-		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg(var(--m-gray-light));
 		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
 	}
 
@@ -49,7 +49,7 @@
 	}
 
 	&:focus-visible {
-		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg(var(--m-gray-light));
 		--mx-ring-value: --fn-focus-ring();
 		outline: none;
 	}
@@ -68,8 +68,8 @@
 	height: 100%;
 	width: var(--active-tab-width);
 	transition-property: transform, width, color;
-	transition-duration: var(--m-duration);
-	transition-timing-function: var(--m-easing);
+	transition-duration: var(--m-dur);
+	transition-timing-function: var(--m-ease);
 	transform: translateX(
 			calc(
 				var(--active-tab-left, 0px) + var(--scroll-area-overflow-x-start, 0px)
@@ -99,13 +99,13 @@
 	@apply --mx-shadow(var(--m-shadow-sm));
 	@apply --mx-surface-ambient;
 	padding: 0;
-	border-radius: var(--m-radius-lg);
+	border-radius: var(--m-rd-lg);
 }
 
 .moreLeftIcon {
 	pointer-events: none;
 	position: absolute;
-	left: var(--m-space-xs);
+	left: var(--m-sp-xs);
 	top: 50%;
 	z-index: 10;
 	height: --fn-literal(16px);
@@ -117,13 +117,13 @@
 		round(min(1, calc(var(--scroll-area-overflow-x-start, 0px) / 10px)))
 	);
 
-	@apply --mx-fg(--fn-color-faded(var(--m-color-neutral-heavy), 50%));
+	@apply --mx-fg(--fn-color-faded(var(--m-gray-heavy), 50%));
 }
 
 .moreRightIcon {
 	pointer-events: none;
 	position: absolute;
-	right: var(--m-space-xs);
+	right: var(--m-sp-xs);
 	top: 50%;
 	z-index: 10;
 	height: --fn-literal(16px);
@@ -135,5 +135,5 @@
 		round(min(1, calc(var(--scroll-area-overflow-x-end, 0px) / 10px)))
 	);
 
-	@apply --mx-fg(--fn-color-faded(var(--m-color-neutral-heavy), 50%));
+	@apply --mx-fg(--fn-color-faded(var(--m-gray-heavy), 50%));
 }

package/src/components/textArea/TextArea.module.css

@@ -10,5 +10,5 @@
 }
 
 .border {
-	padding-block-end: var(--m-space-sm);
+	padding-block-end: var(--m-sp-sm);
 }

package/src/components/toasts/toasts.module.css

@@ -4,8 +4,8 @@
 }
 
 .toast {
-	--gap: var(--m-space-sm);
-	--peek: var(--m-space-sm);
+	--gap: var(--m-sp-sm);
+	--peek: var(--m-sp-sm);
 	--scale: calc(max(0, 1 - var(--toast-index) * 0.1));
 	--height: var(--toast-frontmost-height, var(--toast-height));
 	--shrink: calc(1 - var(--scale));
@@ -17,7 +17,7 @@
 	/* basic positioning */
 	position: fixed;
 	left: auto;
-	top: var(--m-space-xs);
+	top: var(--m-sp-xs);
 	z-index: calc(100000 - var(--toast-index));
 	margin-right: 0;
 	width: 100%;
@@ -27,7 +27,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 
 	/* styling happens in content element */
 
@@ -43,9 +43,9 @@
 		)
 		scale(var(--scale));
 	transition:
-		transform var(--m-duration) var(--m-easing),
-		opacity var(--m-duration) var(--m-easing),
-		height var(--m-duration-short) var(--m-easing);
+		transform var(--m-dur) var(--m-ease),
+		opacity var(--m-dur) var(--m-ease),
+		height var(--m-dur-short) var(--m-ease);
 
 	&::after {
 		position: absolute;
@@ -100,7 +100,7 @@
 	pointer-events: auto;
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 
 	&[data-behind]:not([data-expanded]) {
 		pointer-events: none;
@@ -115,10 +115,10 @@
 	@apply --mx-shadow(var(--m-shadow-md));
 	@apply --mx-surface-secondary;
 
-	padding-inline-start: var(--m-space-md);
-	padding-inline-end: var(--m-space-sm);
-	padding-block: var(--m-space-sm);
-	gap: var(--m-space-sm);
+	padding-inline-start: var(--m-sp-md);
+	padding-inline-end: var(--m-sp-sm);
+	padding-block: var(--m-sp-sm);
+	gap: var(--m-sp-sm);
 
 	[data-behind]:not([data-expanded]) & {
 		max-height: var(--height);
@@ -130,10 +130,10 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 	@apply --mx-fg(inherit);
 
-	transition: opacity var(--m-duration) var(--m-easing);
+	transition: opacity var(--m-dur) var(--m-ease);
 
 	/* Hide content when not in front */
 	[data-behind]:not([data-expanded]) & {
@@ -148,20 +148,20 @@
 .toastMainBodyContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 	@apply --mx-fg(inherit);
 }
 
 .toastTitle {
 	@apply --mx-fg(inherit);
 	@apply --mx-prose-secondary;
-	font-weight: var(--m-text-weight-bold);
+	font-weight: var(--m-fw-bold);
 	margin: 0;
 }
 
 .toastDescriptionRow {
 	display: flex;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 }
 
 .icon {
@@ -187,13 +187,13 @@
 	margin-inline-start: auto;
 	display: flex;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: 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);
 
-	transition: opacity var(--m-duration) var(--m-easing);
+	transition: opacity var(--m-dur) var(--m-ease);
 
 	[data-behind]:not([data-expanded]) & {
 		opacity: 0;

package/src/components/toggleGroup/toggleGroup.module.css

@@ -1,10 +1,10 @@
 .root {
 	width: fit-content;
 	display: inline-flex;
-	gap: var(--m-space-sm);
-	border-radius: var(--m-radius-lg);
+	gap: var(--m-sp-sm);
+	border-radius: var(--m-rd-lg);
 
-	@apply --mx-bg(--fn-color-faded(var(--m-color-main-light), 20%));
+	@apply --mx-bg(--fn-color-faded(var(--m-tint-light), 20%));
 }
 
 .item {
@@ -13,36 +13,36 @@
 	align-items: center;
 	justify-content: center;
 	white-space: nowrap;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 
-	padding: var(--m-action-padding);
+	padding: var(--m-action-p);
 
 	@apply --mx-borderColor(transparent);
-	border-radius: var(--m-radius-lg);
+	border-radius: var(--m-rd-lg);
 
 	&[data-pressed] {
 		@apply --mx-shadow;
 		--mx-shadow-value: var(--m-shadow-sm);
-		@apply --mx-bg(var(--m-color-main));
-		@apply --mx-borderColor(var(--m-color-neutral-ink));
+		@apply --mx-bg(var(--m-tint));
+		@apply --mx-borderColor(var(--m-gray-ink));
 	}
 
 	&:not([data-pressed]) {
-		@apply --mx-bg(--fn-color-faded(var(--m-color-neutral), 30%));
+		@apply --mx-bg(--fn-color-faded(var(--m-gray), 30%));
 	}
 
 	&:hover:not([data-pressed]) {
 		@apply --mx-bg-lighter(2);
 		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
-		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 20%));
+		@apply --mx-borderColor(--fn-color-faded(var(--m-tint-ink), 20%));
 	}
 
 	&:active:not([data-pressed]) {
 		@apply --mx-bg-lighter(1);
 		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
-		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 30%));
+		@apply --mx-borderColor(--fn-color-faded(var(--m-tint-ink), 30%));
 	}
 
 	&:focus {

package/src/components/tooltip/Tooltip.module.css

@@ -3,8 +3,8 @@
 	display: flex;
 	user-select: none;
 
-	padding: var(--m-surface-padding);
-	border-radius: var(--m-surface-radius);
+	padding: var(--m-surface-p);
+	border-radius: var(--m-surface-rd);
 
 	font-size: var(--m-prose-ambient-size);
 
@@ -18,22 +18,22 @@
 	--mx-shadow-value: var(--m-shadow-sm);
 
 	&[data-color='contrast'] {
-		@apply --mx-fg(var(--m-color-neutral-paper));
-		@apply --mx-bg(var(--m-color-neutral-ink));
+		@apply --mx-fg(var(--m-gray-paper));
+		@apply --mx-bg(var(--m-gray-ink));
 	}
 
 	&[data-color='white'],
 	&[data-color='neutral'] {
-		@apply --mx-fg(var(--m-color-neutral-ink));
-		@apply --mx-bg(var(--m-color-neutral-paper));
-		@apply --mx-borderColor(var(--m-color-neutral));
+		@apply --mx-fg(var(--m-gray-ink));
+		@apply --mx-bg(var(--m-gray-paper));
+		@apply --mx-borderColor(var(--m-gray));
 		border-style: solid;
-		border-width: var(--m-lineWidth-sm);
+		border-width: var(--m-lw-sm);
 	}
 
 	&[data-color='attention'] {
-		@apply --mx-bg(var(--m-color-main-heavy));
-		@apply --mx-fg(var(--m-color-neutral-paper));
+		@apply --mx-bg(var(--m-tint-heavy));
+		@apply --mx-fg(var(--m-gray-paper));
 	}
 
 	opacity: 0;