@a-type/ui 6.0.81 → 6.1.1

package/src/components/lightbox/Lightbox.module.css

@@ -8,7 +8,7 @@
 	&:focus-visible {
 		@apply --mx-shadow;
 		--mx-ring-value: --fn-focus-ring();
-		border-radius: var(--m-action-radius);
+		border-radius: var(--m-action-rd);
 	}
 }
 
@@ -26,8 +26,8 @@
 
 .close {
 	position: absolute;
-	right: var(--m-space-md);
-	top: var(--m-space-md);
+	right: var(--m-sp-md);
+	top: var(--m-sp-md);
 }
 
 .overlay {
@@ -37,7 +37,7 @@
 	backdrop-filter: blur(4px);
 	transition: opacity 0.2s ease;
 
-	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-bg(var(--m-gray-ink));
 	@apply --mx-bg-faded(50%);
 
 	&[data-state='closed'] {
@@ -60,7 +60,7 @@
 	width: 90vw;
 	max-width: 100%;
 
-	padding: var(--m-space-lg);
+	padding: var(--m-sp-lg);
 	border: none;
 	background: none;
 	pointer-events: none;

package/src/components/lists/lists.module.css

@@ -3,13 +3,13 @@
 	list-style-position: inside;
 	margin: 0;
 	padding: 0;
-	padding-inline-start: var(--m-space-lg);
+	padding-inline-start: var(--m-sp-lg);
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 
 	& > li {
-		margin-left: var(--m-space-sm);
+		margin-left: var(--m-sp-sm);
 	}
 
 	&[data-unstyled] {

package/src/components/marquee/marquee.module.css

@@ -14,7 +14,7 @@
 	display: flex;
 	flex-direction: row;
 	overflow: visible;
-	transition: transform var(--m-duration-long) var(--m-easing);
+	transition: transform var(--m-dur-long) var(--m-ease);
 }
 
 .item {

package/src/components/navBar/NavBar.module.css

@@ -6,9 +6,9 @@
 	justify-items: center;
 	overflow: clip;
 	border-radius: 0;
-	padding: var(--m-space-sm);
+	padding: var(--m-sp-sm);
 	z-index: 50;
-	padding-bottom: calc(var(--m-space-sm) + env(safe-area-inset-bottom, 0px));
+	padding-bottom: calc(var(--m-sp-sm) + env(safe-area-inset-bottom, 0px));
 
 	@media (min-width: 768px) {
 		height: min-content;
@@ -16,11 +16,11 @@
 		flex-direction: column;
 		align-items: stretch;
 		justify-content: start;
-		gap: var(--m-space-sm);
+		gap: var(--m-sp-sm);
 		overflow-x: clip;
 		overflow-y: auto;
 		border-radius: 0;
-		padding-bottom: var(--m-space-xl);
+		padding-bottom: var(--m-sp-xl);
 		box-shadow: none;
 		@apply --mx-bg(transparent);
 		border: none;
@@ -36,13 +36,13 @@
 	user-select: none;
 	align-items: center;
 	justify-content: center;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 	white-space: nowrap;
-	padding: var(--m-action-padding);
-	transition: all var(--m-duration) var(--m-easing);
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	padding: var(--m-action-p);
+	transition: all var(--m-dur) var(--m-ease);
+	@apply --mx-fg(var(--m-gray-ink));
 	@apply --mx-bg(transparent);
-	border-radius: var(--m-radius-sm);
+	border-radius: var(--m-rd-sm);
 	border: none;
 	font-size: var(--m-prose-ambient-size);
 	line-height: 1;
@@ -76,8 +76,8 @@
 		flex-direction: row-reverse;
 		justify-content: end;
 		align-items: center;
-		gap: var(--m-space-md);
-		padding: var(--m-action-padding);
+		gap: var(--m-sp-md);
+		padding: var(--m-action-p);
 		overflow: visible;
 		font-size: var(--m-prose-secondary-size);
 		&:active {
@@ -97,10 +97,10 @@
 	}
 
 	@media (min-width: 768px) {
-		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg(var(--m-gray-light));
 		@apply --mx-bg-faded(50%);
-		padding: var(--m-space-sm);
-		border-radius: var(--m-action-radius);
+		padding: var(--m-sp-sm);
+		border-radius: var(--m-action-rd);
 
 		[data-active='true'] & {
 			@apply --mx-bg(inherit);
@@ -109,7 +109,7 @@
 }
 
 .itemText {
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 	font-size: var(--m-prose-ambient-size);
 	line-height: 1;
 	font-weight: inherit;
@@ -126,18 +126,18 @@
 	@apply --mx-fg(inherit);
 
 	[data-active='true'] & {
-		@apply --mx-fill(var(--m-color-main));
+		@apply --mx-fill(var(--m-tint));
 	}
 }
 
 .pip {
 	position: absolute;
-	top: var(--m-space-sm);
-	right: var(--m-space-sm);
+	top: var(--m-sp-sm);
+	right: var(--m-sp-sm);
 	width: 6px;
 	height: 6px;
 	border-radius: 50%;
-	background-color: var(--m-color-main);
+	background-color: var(--m-tint);
 	@apply --mx-shadow;
 	--mx-shadow-value: var(--m-shadow-sm);
 }

package/src/components/note/Note.module.css

@@ -3,14 +3,14 @@
 
 	&:has(input:focus[data-focus-clicked]),
 	&:has(textarea:focus[data-focus-clicked]) {
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		@apply --mx-bg-lighter(3);
-		--mx-ring-value: --fn-ring(var(--m-color-main-light), 4px);
+		--mx-ring-value: --fn-ring(var(--m-tint-light), 4px);
 	}
 
 	&:has(input:focus-visible),
 	&:has(textarea:focus-visible) {
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		@apply --mx-bg-lighter(3);
 		--mx-ring-value: --fn-focus-ring();
 	}
@@ -24,17 +24,17 @@
 .content {
 	position: relative;
 	flex: 1;
-	padding: var(--m-space-sm);
+	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);
 	font-style: italic;
 
-	@apply --mx-fg(var(--m-color-neutral-ink));
-	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-fg(var(--m-gray-ink));
+	@apply --mx-bg(var(--m-tint-wash));
 	@apply --mx-bg-heavier(1);
-	@apply --mx-borderColor(var(--m-color-main-heavy));
+	@apply --mx-borderColor(var(--m-tint-heavy));
 	border-right-width: 0;
 
 	& input,
@@ -61,9 +61,9 @@
 	width: 20px;
 	flex: 0 0 20px;
 
-	@apply --mx-borderColor(var(--m-color-main-heavy));
-	border-bottom-width: var(--m-lineWidth-md);
-	border-left-width: var(--m-lineWidth-md);
+	@apply --mx-borderColor(var(--m-tint-heavy));
+	border-bottom-width: var(--m-lw-md);
+	border-left-width: var(--m-lw-md);
 	border-top-width: 0;
 	border-right-width: 0;
 }
@@ -76,7 +76,7 @@
 	right: 0;
 	transform-origin: right bottom;
 
-	@apply --mx-borderColor(var(--m-color-main-wash));
+	@apply --mx-borderColor(var(--m-tint-wash));
 	@apply --mx-borderColor-heavier(1);
 	border-width: 9.5px;
 	border-style: solid;
@@ -94,16 +94,16 @@
 	transform-origin: center center;
 	transform: rotate(-45deg);
 
-	@apply --mx-bg(var(--m-color-main-heavy));
+	@apply --mx-bg(var(--m-tint-heavy));
 }
 
 .foldBottom {
 	flex: 1;
-	@apply --mx-borderColor(var(--m-color-main-heavy));
-	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-borderColor(var(--m-tint-heavy));
+	@apply --mx-bg(var(--m-tint-wash));
 	@apply --mx-bg-heavier(1);
-	border-right-width: var(--m-lineWidth-md);
-	border-bottom-width: var(--m-lineWidth-md);
+	border-right-width: var(--m-lw-md);
+	border-bottom-width: var(--m-lw-md);
 	border-left-width: 0;
 	border-top-width: 0;
 }

package/src/components/numberStepper/NumberStepper.module.css

@@ -9,8 +9,8 @@
 
 	@apply --mx-bg(var(--m-control-bg));
 	@apply --mx-fg(var(--m-control-fg));
-	@apply --mx-borderColor(var(--m-control-borderColor));
-	border-radius: var(--m-control-radius);
+	@apply --mx-borderColor(var(--m-control-b-color));
+	border-radius: var(--m-control-rd);
 
 	&:disabled,
 	&[data-disabled='true'] {
@@ -21,8 +21,8 @@
 	}
 
 	&[data-emphasis='primary'] {
-		@apply --mx-bg(var(--m-color-main-wash));
-		@apply --mx-fg(var(--m-color-main-ink));
+		@apply --mx-bg(var(--m-tint-wash));
+		@apply --mx-fg(var(--m-tint-ink));
 	}
 }
 

package/src/components/peek/Peek.module.css

@@ -27,16 +27,16 @@
 	}
 
 	&[data-has-interacted='true'] {
-		animation-timing-function: var(--m-easing);
+		animation-timing-function: var(--m-ease);
 		animation-fill-mode: forwards;
 
 		&[data-state='closed'] {
 			animation-name: peekClose;
-			animation-duration: var(--m-duration);
+			animation-duration: var(--m-dur);
 		}
 		&[data-state='open'] {
 			animation-name: peekOpen;
-			animation-duration: var(--m-duration-long);
+			animation-duration: var(--m-dur-long);
 		}
 	}
 }
@@ -50,7 +50,7 @@
 	cursor: pointer;
 	@apply --mx-borderColor(var(--mx-fg-ref));
 	border-width: 0px;
-	border-bottom-width: var(--m-lineWidth-sm);
+	border-bottom-width: var(--m-lw-sm);
 
 	background: linear-gradient(to bottom, transparent 0%, var(--mx-bg-ref) 100%);
 
@@ -61,9 +61,9 @@
 		background: linear-gradient(
 			to bottom,
 			transparent 0%,
-			var(--m-color-main-wash) 100%
+			var(--m-tint-wash) 100%
 		);
-		border-color: var(--m-color-main);
+		border-color: var(--m-tint);
 	}
 
 	&::after {
@@ -76,11 +76,11 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: end;
-		padding: var(--m-space-sm);
+		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);
-		@apply --mx-fg(var(--m-color-neutral-heavy));
+		@apply --mx-fg(var(--m-gray-heavy));
 	}
 	&[data-state='open'] {
 		&::after {
@@ -92,5 +92,5 @@
 		opacity: 0;
 	}
 	opacity: 1;
-	transition: opacity var(--m-duration) var(--m-easing);
+	transition: opacity var(--m-dur) var(--m-ease);
 }

package/src/components/popover/Popover.module.css

@@ -1,17 +1,17 @@
 .close {
 	position: absolute;
-	right: var(--m-space-sm);
-	top: var(--m-space-sm);
+	right: var(--m-sp-sm);
+	top: var(--m-sp-sm);
 }
 
 .popup {
-	padding: var(--m-space-md);
+	padding: var(--m-sp-md);
 }
 
 .title {
 	font-weight: 500;
 	margin: 0;
-	margin-block-end: var(--m-space-sm);
+	margin-block-end: var(--m-sp-sm);
 	font-size: var(--m-prose-secondary-size);
 	line-height: var(--m-prose-secondary-lineHeight);
 }
@@ -20,5 +20,5 @@
 	margin: 0;
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
-	@apply --mx-fg(var(--m-color-neutral-heavy));
+	@apply --mx-fg(var(--m-gray-heavy));
 }

package/src/components/popover/Popover.stories.tsx

@@ -22,7 +22,7 @@ export const Default: Story = {
 				<Popover.Trigger render={<Button color="primary" size="small" />}>
 					Open Popover
 				</Popover.Trigger>
-				<Popover.Content style={{ padding: 'var(--m-space-md)' }}>
+				<Popover.Content style={{ padding: 'var(--m-sp-md)' }}>
 					<Popover.Arrow />
 					<Popover.Title>Hello</Popover.Title>
 					<Popover.Description>This is a popover content.</Popover.Description>

package/src/components/primitives/menus.module.css

@@ -5,7 +5,7 @@
 	max-width: var(--available-width, 95vw);
 	max-height: var(--available-height);
 
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow(var(--m-shadow-lg));
 	@apply --mx-surface-ambient;
@@ -19,13 +19,13 @@
 	}
 	&:focus-visible {
 		@apply --mx-ring(--fn-ring(
-			--fn-color-faded(var(--m-color-main-ink), 50%),
+			--fn-color-faded(var(--m-tint-ink), 50%),
 			2px
 		));
 	}
 
 	@media (forced-colors: active) {
-		border-color: var(--m-color-main-ink);
+		border-color: var(--m-tint-ink);
 	}
 	@media (prefers-reduced-motion: reduce) {
 		transition: none;
@@ -61,9 +61,9 @@
 	min-height: 0px;
 	overflow-x: clip;
 	overflow-y: auto;
-	scroll-padding-block: var(--m-space-md);
+	scroll-padding-block: var(--m-sp-md);
 	position: relative;
-	padding: var(--m-space-xs);
+	padding: var(--m-sp-xs);
 
 	border-radius: inherit;
 }
@@ -76,9 +76,9 @@
 	cursor: pointer;
 	user-select: none;
 
-	padding: var(--m-action-padding);
-	padding-left: var(--m-space-lg);
-	gap: var(--m-space-sm);
+	padding: var(--m-action-p);
+	padding-left: var(--m-sp-lg);
+	gap: var(--m-sp-sm);
 
 	text-align: left;
 	font-size: var(--m-prose-secondary-size);
@@ -91,15 +91,15 @@
 	&[data-disabled],
 	&:disabled {
 		pointer-events: none;
-		@apply --mx-fg(var(--m-color-neutral-heavy));
-		@apply --mx-bg(var(--m-color-neutral-paper));
+		@apply --mx-fg(var(--m-gray-heavy));
+		@apply --mx-bg(var(--m-gray-paper));
 	}
 
 	&:hover,
 	&[data-highlighted],
 	&[data-state='checked'],
 	&:focus-visible {
-		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg(var(--m-gray-light));
 	}
 
 	&:focus {
@@ -109,18 +109,14 @@
 		--mx-ring-value: --fn-focus-ring();
 	}
 
-	border-radius: var(--m-radius-xs);
+	border-radius: var(--m-rd-xs);
 	&:first-child {
-		border-top-left-radius: calc(var(--m-surface-radius) - var(--m-space-xs));
-		border-top-right-radius: calc(var(--m-surface-radius) - var(--m-space-xs));
+		border-top-left-radius: calc(var(--m-surface-rd) - var(--m-sp-xs));
+		border-top-right-radius: calc(var(--m-surface-rd) - var(--m-sp-xs));
 	}
 	&:last-child {
-		border-bottom-left-radius: calc(
-			var(--m-surface-radius) - var(--m-space-xs)
-		);
-		border-bottom-right-radius: calc(
-			var(--m-surface-radius) - var(--m-space-xs)
-		);
+		border-bottom-left-radius: calc(var(--m-surface-rd) - var(--m-sp-xs));
+		border-bottom-right-radius: calc(var(--m-surface-rd) - var(--m-sp-xs));
 	}
 }
 
@@ -129,8 +125,8 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-space-sm);
-	scroll-padding-block: var(--m-space-md);
+	gap: var(--m-sp-sm);
+	scroll-padding-block: var(--m-sp-md);
 }
 
 .itemIndicator {
@@ -142,26 +138,26 @@
 	align-items: center;
 	justify-content: center;
 	position: relative;
-	right: calc(-1 * var(--m-space-xs));
+	right: calc(-1 * var(--m-sp-xs));
 }
 
 .itemRightSlot {
 	margin-inline-start: auto;
-	padding-inline-start: var(--m-space-sm);
+	padding-inline-start: var(--m-sp-sm);
 }
 
 .arrow {
 	--size: 18px;
 	@apply --mx-fill(var(--mx-bg-ref, var(--m-global-trueLightColor)));
 	@apply --mx-stroke(var(--mx-borderColor-ref, var(--mx-fg-ref, var(--m-global-trueHeavyColor))));
-	stroke-width: var(--m-lineWidth);
+	stroke-width: var(--m-lw);
 	width: var(--size);
 	height: calc(var(--size) / 2);
 	position: relative;
 	--angle: 0deg;
 	--scale: 1;
 	transform: translate(0, 0) rotate(var(--angle, 0deg)) scale(var(--scale, 1));
-	transition: opacity var(--m-duration) var(--m-easing);
+	transition: opacity var(--m-dur) var(--m-ease);
 
 	&[data-side='top'] {
 		--angle: 0deg;
@@ -191,14 +187,14 @@
 }
 
 .separator {
-	margin: var(--m-space-xs);
-	height: var(--m-lineWidth-sm);
-	@apply --mx-bg(var(--m-color-neutral));
+	margin: var(--m-sp-xs);
+	height: var(--m-lw-sm);
+	@apply --mx-bg(var(--m-gray));
 }
 
 .groupLabel {
 	user-select: none;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
+	@apply --mx-fg(var(--m-gray-heavy));
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: var(--m-prose-ambient-weight);
@@ -208,8 +204,8 @@
 	box-sizing: border-box;
 	z-index: 1;
 	height: 1rem;
-	left: var(--m-space-md);
-	right: var(--m-space-md);
+	left: var(--m-sp-md);
+	right: var(--m-sp-md);
 	cursor: default;
 	user-select: none;
 	align-items: center;
@@ -253,7 +249,7 @@
 }
 
 .triggerIcon {
-	transition: transform var(--m-duration) var(--m-easing);
+	transition: transform var(--m-dur) var(--m-ease);
 	margin-inline-start: auto;
 	[data-open] > &,
 	[data-popup-open] > & {

package/src/components/progress/Progress.module.css

@@ -3,20 +3,20 @@
 
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	row-gap: var(--m-space-xs);
-	column-gap: var(--m-space-md);
+	row-gap: var(--m-sp-xs);
+	column-gap: var(--m-sp-md);
 	align-items: center;
 	box-sizing: border-box;
 }
 
 .indicator {
 	width: 100%;
-	transition: transform var(--m-duration) var(--m-easing);
-	border-radius: var(--m-radius);
-	@apply --mx-bg(var(--m-color-main));
+	transition: transform var(--m-dur) var(--m-ease);
+	border-radius: var(--m-rd);
+	@apply --mx-bg(var(--m-tint));
 
 	&[data-complete] {
-		@apply --mx-bg(var(--m-color-palette-success));
+		@apply --mx-bg(var(--m-color-success));
 	}
 }
 
@@ -29,15 +29,15 @@
 	grid-column-end: 3;
 	box-sizing: border-box;
 
-	border-radius: var(--m-radius-lg);
-	@apply --mx-bg(var(--m-color-neutral-paper));
-	@apply --mx-borderColor(var(--m-color-neutral-ink));
+	border-radius: var(--m-rd-lg);
+	@apply --mx-bg(var(--m-gray-paper));
+	@apply --mx-borderColor(var(--m-gray-ink));
 }
 
 .label {
 	grid-column-start: 1;
 	grid-row-start: 1;
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: var(--m-prose-ambient-weight);
@@ -47,7 +47,7 @@
 	grid-column-start: 2;
 	grid-row-start: 1;
 	justify-self: end;
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: 500;

package/src/components/provider/Provider.tsx

@@ -38,7 +38,7 @@ export function Provider({
 			? virtualKeyboardBehavior
 			: 'displace';
 	useVirtualKeyboardBehavior(supportedVirtualKeyboardBehavior);
-	useThemedTitleBar('--m-color-main-paper', disableTitleBarColor);
+	useThemedTitleBar('--m-tint-paper', disableTitleBarColor);
 	const otherStuff = (
 		<>
 			<IconSpritesheet />

package/src/components/pwaInstall/PwaInstall.module.css

@@ -1,23 +1,23 @@
 .dialogContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .dialogTitle {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 }
 
 .appIcon {
 	display: inline-block;
 	height: 1em;
 	width: 1em;
-	border-radius: var(--m-radius);
+	border-radius: var(--m-rd);
 }
 
 .appDescription {
-	margin-bottom: var(--m-space-sm);
+	margin-bottom: var(--m-sp-sm);
 }

package/src/components/quickAction/QuickAction.module.css

@@ -1,14 +1,14 @@
 .trigger {
 	position: relative;
 	justify-content: center;
-	padding: var(--m-space-xs);
-	border-radius: var(--m-action-radius);
+	padding: var(--m-sp-xs);
+	border-radius: var(--m-action-rd);
 }
 
 .popup {
 	transition-property: all;
-	transition-duration: var(--m-duration);
-	transition-timing-function: var(--m-easing-loose);
+	transition-duration: var(--m-dur);
+	transition-timing-function: var(--m-ease-loose);
 
 	position: fixed;
 	contain: layout;