@a-type/ui 6.0.81 → 6.1.0

package/src/components/dialog/Dialog.module.css

@@ -3,11 +3,11 @@
 	inset: 0;
 	@apply --mx-shadow;
 	/* --mx-shadow-value: inset 0 30px 60px 0px
-		--fn-color-faded(var(--m-color-main-ink), 20%); */
-	@apply --mx-bg(var(--m-color-neutral-ink));
+		--fn-color-faded(var(--m-tint-ink), 20%); */
+	@apply --mx-bg(var(--m-gray-ink));
 	@apply --mx-bg-faded(5%);
-	border-top: var(--m-lineWidth) solid var(--m-color-neutral);
-	transition: all var(--m-duration) var(--m-easing);
+	border-top: var(--m-lw) solid var(--m-gray);
+	transition: all var(--m-dur) var(--m-ease);
 	backdrop-filter: blur(2px);
 
 	&[data-starting-style],
@@ -23,20 +23,20 @@
 	flex-direction: column;
 	align-items: stretch;
 	overflow: clip;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 	--shadow-dir: 1;
 	@apply --mx-shadow;
 	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-xl-y))
 		var(--m-shadow-xl-blur) var(--m-shadow-xl-spread) var(--m-shadow-xl-color);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
-	@apply --mx-borderColor(var(--m-color-neutral-heavy));
+	@apply --mx-borderColor(var(--m-gray-heavy));
 
 	left: 50%;
 	top: 50%;
 	max-height: 85vh;
 	max-width: 450px;
 	width: 90vw;
-	border-radius: var(--m-surface-radius);
+	border-radius: var(--m-surface-rd);
 	transform: translate3d(-50%, -50%, 0);
 	will-change: transform, opacity;
 
@@ -56,11 +56,11 @@
 			max-width: unset;
 			height: min-content;
 			width: 100vw;
-			border-radius: var(--m-surface-radius) var(--m-surface-radius) 0 0;
+			border-radius: var(--m-surface-rd) var(--m-surface-rd) 0 0;
 			border-bottom-width: 0;
 			transform: translate(0, 0);
 			padding-bottom: env(safe-area-inset-bottom);
-			padding-top: var(--m-space-lg);
+			padding-top: var(--m-sp-lg);
 
 			&[data-starting-style],
 			&[data-ending-style] {
@@ -106,8 +106,8 @@
 .contentScrollAreaContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-md);
-	padding: var(--m-surface-padding);
+	gap: var(--m-sp-md);
+	padding: var(--m-surface-p);
 }
 
 .swipeHandle {
@@ -120,7 +120,7 @@
 	cursor: grab;
 	will-change: transform;
 	touch-action: none;
-	padding-block: var(--m-space-sm);
+	padding-block: var(--m-sp-sm);
 	z-index: 1;
 
 	@media (min-width: 600px) {
@@ -130,14 +130,14 @@
 .swipeHandleBar {
 	height: 4px;
 	width: 100%;
-	@apply --mx-bg(var(--m-color-neutral));
-	border-radius: var(--m-radius-lg);
+	@apply --mx-bg(var(--m-gray));
+	border-radius: var(--m-rd-lg);
 }
 
 .close {
 	position: absolute;
-	right: var(--m-space-sm);
-	top: var(--m-space-sm);
+	right: var(--m-sp-sm);
+	top: var(--m-sp-sm);
 	z-index: 101;
 	display: flex;
 
@@ -149,25 +149,25 @@
 }
 
 .title {
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 	font-size: var(--m-prose-primary-size);
 	font-weight: var(--m-prose-primary-weight);
 	line-height: var(--m-prose-primary-lineHeight);
-	margin-block-end: var(--m-space-xs);
+	margin-block-end: var(--m-sp-xs);
 	margin-block-start: 0;
 }
 
 .description {
-	@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);
 	margin: 0;
-	margin-block-end: var(--m-space-xs);
+	margin-block-end: var(--m-sp-xs);
 }
 
 .actions {
 	position: sticky;
-	bottom: var(--m-space-md);
+	bottom: var(--m-sp-md);
 	z-index: 100;
 	display: flex;
 	flex-direction: row;
@@ -179,10 +179,10 @@
 	@apply --mx-shadow;
 	/* override blur in case user turned it off */
 	--mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
-		var(--m-shadow-md-spread) var(--m-color-neutral-paper);
+		var(--m-shadow-md-spread) var(--m-gray-paper);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 	@apply --mx-bg-faded(50%);
-	margin-block-start: var(--m-space-md);
-	gap: var(--m-space-sm);
-	border-radius: var(--m-surface-radius);
+	margin-block-start: var(--m-sp-md);
+	gap: var(--m-sp-sm);
+	border-radius: var(--m-surface-rd);
 }

package/src/components/dialog/Dialog.stories.tsx

@@ -178,7 +178,7 @@ export const VirtualKeyboard: Story = {
 						right: 0,
 						height: 'var(--mock-virtual-keyboard-height,0)',
 						width: '100%',
-						transition: 'height var(--m-duration) var(--m-easing)',
+						transition: 'height var(--m-dur) var(--m-ease)',
 					}}
 				/>
 			</Provider>

package/src/components/divider/Divider.module.css

@@ -2,9 +2,9 @@
 	position: relative;
 	height: --fn-literal(1px);
 	width: 100%;
-	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-bg(var(--m-gray-ink));
 
 	&[data-padded] {
-		margin-block: var(--m-space-md);
+		margin-block: var(--m-sp-md);
 	}
 }

package/src/components/editableText/EditableText.module.css

@@ -19,13 +19,13 @@
 	@apply --mx-bg(transparent);
 	@apply --mx-borderColor(transparent);
 
-	padding: var(--m-control-padding);
-	gap: var(--m-space-sm);
-	border-radius: var(--m-control-radius);
+	padding: var(--m-control-p);
+	gap: var(--m-sp-sm);
+	border-radius: var(--m-control-rd);
 
 	&:hover,
 	&:focus-visible {
-		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg(var(--m-gray-light));
 		@apply --mx-bg-faded(80%);
 	}
 
@@ -40,5 +40,5 @@
 .icon {
 	opacity: 80%;
 	font-size: 1rem;
-	@apply --mx-stroke(var(--m-color-main-heavy));
+	@apply --mx-stroke(var(--m-tint-heavy));
 }

package/src/components/emojiPicker/EmojiPicker.module.css

@@ -4,7 +4,7 @@
 	display: flex;
 	flex-direction: column;
 	isolation: isolate;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 }
 
@@ -19,7 +19,7 @@
 	flex: 1;
 	overflow: clip;
 	@apply --mx-bg(var(--m-surface-ambient-bg));
-	border-radius: var(--m-surface-radius);
+	border-radius: var(--m-surface-rd);
 }
 .viewportInner {
 	position: relative;
@@ -42,7 +42,7 @@
 	align-items: center;
 	justify-content: center;
 	@apply --mx-bg(inherit);
-	@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);
@@ -52,30 +52,30 @@
 	position: sticky;
 	top: 0;
 	@apply --mx-bg(inherit);
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-space-sm) var(--m-space-md);
+	@apply --mx-fg(var(--m-gray-heavy));
+	padding: var(--m-sp-sm) var(--m-sp-md);
 	font-weight: semibold;
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 }
 
 .row {
-	scroll-margin-block: var(--m-space-xs);
-	padding-inline: var(--m-space-xs);
+	scroll-margin-block: var(--m-sp-xs);
+	padding-inline: var(--m-sp-xs);
 }
 
 .emoji {
-	padding: var(--m-space-xs);
+	padding: var(--m-sp-xs);
 	font-size: --fn-literal(20px);
 }
 
 .list {
 	user-select: none;
-	padding-block-end: var(--m-space-md);
+	padding-block-end: var(--m-sp-md);
 }
 
 .skinToneButton {
-	padding: var(--m-space-xs);
+	padding: var(--m-sp-xs);
 	font-size: --fn-literal(20px);
 }
 

package/src/components/forms/Field.module.css

@@ -33,21 +33,19 @@
 .label {
 	grid-area: label;
 	@apply --mx-prose-ambient;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	font-weight: var(--m-text-weight-bold);
-	margin-bottom: var(--m-space-xs);
-	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
+	@apply --mx-fg(var(--m-gray-heavy));
+	font-weight: var(--m-fw-bold);
+	margin-bottom: var(--m-sp-xs);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-sp-md));
 
 	[data-horizontal] & {
-		@apply --mx-fg(var(--m-color-neutral-ink));
-		font-weight: var(--m-text-weight-normal);
+		@apply --mx-fg(var(--m-gray-ink));
+		font-weight: var(--m-fw-normal);
 		margin-block-start: --fn-literal(5px);
 
 		[data-reverse] & {
 			margin-inline-start: 0;
-			margin-inline-end: calc(
-				var(--m-global-shape-roundness) * var(--m-space-md)
-			);
+			margin-inline-end: calc(var(--m-global-shape-roundness) * var(--m-sp-md));
 		}
 	}
 }
@@ -55,8 +53,8 @@
 .description {
 	grid-area: description;
 	@apply --mx-prose-ambient;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
+	@apply --mx-fg(var(--m-gray-heavy));
 	font-style: italic;
-	margin-top: var(--m-space-sm);
-	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
+	margin-top: var(--m-sp-sm);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-sp-md));
 }

package/src/components/forms/Form.module.css

@@ -2,5 +2,5 @@
 	display: flex;
 	align-items: start;
 	flex-direction: column;
-	gap: var(--m-space-lg);
+	gap: var(--m-sp-lg);
 }

package/src/components/forms/NumberStepperField.module.css

@@ -1,5 +1,5 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }

package/src/components/forms/TextField.module.css

@@ -3,7 +3,7 @@
 	flex-direction: column;
 	align-items: stretch;
 	align-self: stretch;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .input {

package/src/components/horizontalList/HorizontalList.module.css

@@ -16,17 +16,16 @@
 	flex-shrink: 0;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-space-sm);
-	padding: var(--m-space-sm) var(--m-space-sm) var(--m-space-md)
-		var(--m-space-sm);
+	gap: var(--m-sp-sm);
+	padding: var(--m-sp-sm) var(--m-sp-sm) var(--m-sp-md) var(--m-sp-sm);
 }
 
 .toggleButton {
 	&[data-open='false'] {
 		height: 100%;
-		border-inline-end: var(--m-lineWidth) solid var(--m-color-neutral);
-		border-top-left-radius: var(--m-radius-sm);
-		border-bottom-left-radius: var(--m-radius-sm);
+		border-inline-end: var(--m-lw) solid var(--m-gray);
+		border-top-left-radius: var(--m-rd-sm);
+		border-bottom-left-radius: var(--m-rd-sm);
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
 	}
@@ -36,14 +35,14 @@
 	position: sticky;
 	left: 0;
 	height: 100%;
-	top: var(--m-space-sm);
+	top: var(--m-sp-sm);
 	z-index: 1;
 	flex-shrink: 0;
 	@apply --mx-bg(inherit);
 }
 
 .chevronIcon {
-	transition: transform var(--m-duration) var(--m-easing);
+	transition: transform var(--m-dur) var(--m-ease);
 	&[data-flip='true'] {
 		transform: rotate(180deg);
 	}

package/src/components/horizontalList/HorizontalList.stories.tsx

@@ -72,7 +72,7 @@ export const Default: Story = {
 					display: 'flex',
 					flexDirection: 'column',
 					alignItems: 'center',
-					backgroundColor: 'var(--m-color-neutral-ink)',
+					backgroundColor: 'var(--m-gray-ink)',
 				}}
 			>
 				<div
@@ -82,7 +82,7 @@ export const Default: Story = {
 						flexDirection: 'column',
 						flex: 1,
 						alignItems: 'stretch',
-						backgroundColor: 'var(--m-color-neutral-paper)',
+						backgroundColor: 'var(--m-gray-paper)',
 					}}
 				>
 					<Button
@@ -99,7 +99,7 @@ export const Default: Story = {
 					</Button>
 					<HorizontalList
 						style={{
-							borderTop: '1px solid var(--m-color-neutral)',
+							borderTop: '1px solid var(--m-gray)',
 							maxHeight: 200,
 						}}
 						openDirection="up"
@@ -125,13 +125,13 @@ export const CantOpen: Story = {
 					flexDirection: 'column',
 					alignItems: 'stretch',
 					justifyContent: 'flex-end',
-					backgroundColor: 'var(--m-color-neutral-paper)',
+					backgroundColor: 'var(--m-gray-paper)',
 				}}
 			>
 				<HorizontalList
 					style={{
 						maxHeight: 200,
-						borderTop: '1px solid var(--m-color-neutral)',
+						borderTop: '1px solid var(--m-gray)',
 					}}
 					openDirection="up"
 					{...args}

package/src/components/icon/Icon.module.css

@@ -7,7 +7,7 @@
 	height: var(--size);
 
 	&[data-filled] {
-		fill: var(--m-color-main);
+		fill: var(--m-tint);
 	}
 }
 

package/src/components/icon/Icon.stories.tsx

@@ -36,7 +36,7 @@ export const All: Story = {
 				style={{
 					display: 'grid',
 					gridTemplateColumns: 'repeat(6, 1fr)',
-					gap: 'var(--m-space-xs)',
+					gap: 'var(--m-sp-xs)',
 				}}
 			>
 				{iconNames.map((name) => (

package/src/components/imageUploader/ImageUploader.module.css

@@ -1,6 +1,6 @@
 .root {
 	position: relative;
-	border-radius: var(--m-surface-radius);
+	border-radius: var(--m-surface-rd);
 }
 
 .input {
@@ -19,24 +19,24 @@
 
 .cameraCancelButton {
 	position: absolute;
-	top: var(--m-space-sm);
-	left: var(--m-space-sm);
-	@apply --mx-fg(var(--m-color-neutral-paper));
+	top: var(--m-sp-sm);
+	left: var(--m-sp-sm);
+	@apply --mx-fg(var(--m-gray-paper));
 }
 
 .removeButton {
 	position: absolute;
-	top: var(--m-space-sm);
-	right: var(--m-space-sm);
+	top: var(--m-sp-sm);
+	right: var(--m-sp-sm);
 	z-index: 10;
 	height: 32px;
 	width: 32px;
 	cursor: pointer;
-	padding: var(--m-space-sm);
+	padding: var(--m-sp-sm);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 	@apply --mx-fg(var(--m-surface-ambient-fg));
 	@apply --mx-shadow;
-	border-radius: var(--m-radius-lg);
+	border-radius: var(--m-rd-lg);
 	border: none;
 }
 
@@ -56,7 +56,7 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 	@apply --mx-bg(var(--m-surface-primary-bg));
 	@apply --mx-fg(var(--m-surface-primary-fg));
 	border-radius: inherit;

package/src/components/input/Input.module.css

@@ -2,7 +2,7 @@
 	display: flex;
 	flex-grow: 1;
 	user-select: auto;
-	padding: var(--m-control-padding-block) 0px;
+	padding: var(--m-control-p-block) 0px;
 	min-width: 60px;
 
 	@apply --mx-fg(inherit);
@@ -14,7 +14,7 @@
 	line-height: inherit;
 
 	&::placeholder {
-		@apply --mx-fg(var(--m-color-neutral-heavy));
+		@apply --mx-fg(var(--m-gray-heavy));
 	}
 
 	/* Focus visuals handled by wrapper */
@@ -24,12 +24,12 @@
 	}
 
 	/* &:first-child {
-		padding-left: var(--m-control-padding-inline);
+		padding-left: var(--m-control-p-inline);
 		border-top-left-radius: inherit;
 		border-bottom-left-radius: inherit;
 	}
 	&:last-child {
-		padding-right: var(--m-control-padding-inline);
+		padding-right: var(--m-control-p-inline);
 		border-top-right-radius: inherit;
 		border-bottom-right-radius: inherit;
 	} */
@@ -39,19 +39,19 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 	width: max-content;
 	overflow: clip;
 
-	transition: box-shadow var(--m-duration) var(--m-easing);
+	transition: box-shadow var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	--mx-shadow-value: inset var(--m-shadow-sm);
 
 	@apply --mx-fg(var(--m-control-fg));
 	@apply --mx-bg(var(--m-control-bg));
-	@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);
 
 	font-size: var(--m-prose-secondary-size);
 	line-height: var(--m-prose-secondary-lineHeight);
@@ -77,7 +77,7 @@
 	&:has(input:focus),
 	&:has(textarea:focus) {
 		@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:hover:not(:disabled):not(:focus)),
@@ -87,14 +87,14 @@
 	}
 
 	& > [data-icon] {
-		margin-inline: var(--m-space-sm);
+		margin-inline: var(--m-sp-sm);
 	}
 
-	padding-inline: var(--m-control-padding-inline);
+	padding-inline: var(--m-control-p-inline);
 	& > [data-input-border-flush]:first-child {
-		margin-left: calc(-1 * var(--m-control-padding-inline));
+		margin-left: calc(-1 * var(--m-control-p-inline));
 	}
 	& > [data-input-border-flush]:last-child {
-		margin-right: calc(-1 * var(--m-control-padding-inline));
+		margin-right: calc(-1 * var(--m-control-p-inline));
 	}
 }

package/src/components/layouts/PageContent.module.css

@@ -7,11 +7,11 @@
 	anchor-name: --page-content;
 	flex: 1;
 
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 
-	padding: var(--m-space-md);
+	padding: var(--m-sp-md);
 	@media (min-width: 768px) {
-		padding: var(--m-space-lg);
+		padding: var(--m-sp-lg);
 	}
 
 	margin-inline: auto;

package/src/components/layouts/PageFixedArea.module.css

@@ -6,6 +6,6 @@
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 	@apply --mx-bg(inherit);
 }

package/src/components/layouts/PageNav.module.css

@@ -12,10 +12,10 @@
 		position: absolute;
 		content: '';
 		top: 0;
-		left: var(--m-space-md);
-		right: var(--m-space-md);
+		left: var(--m-sp-md);
+		right: var(--m-sp-md);
 		height: 1px;
-		@apply --mx-bg(var(--m-color-neutral-heavy));
+		@apply --mx-bg(var(--m-gray-heavy));
 		@media (min-width: 768px) {
 			display: none;
 		}
@@ -25,7 +25,7 @@
 		bottom: auto;
 		left: auto;
 		right: auto;
-		top: var(--m-space-lg);
+		top: var(--m-sp-lg);
 		height: auto;
 	}
 }

package/src/components/layouts/PageNowPlaying.module.css

@@ -2,9 +2,9 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 
-	padding: var(--m-space-sm);
+	padding: var(--m-sp-sm);
 
 	position: fixed;
 	position-anchor: --page-content;
@@ -14,9 +14,9 @@
 	bottom: --fn-literal(var(--nav-height, env(safe-area-inset-bottom, 0px)));
 
 	@media (min-width: 768px) {
-		bottom: var(--m-space-md);
+		bottom: var(--m-sp-md);
 		align-items: center;
-		transition: bottom var(--m-duration) var(--m-easing);
+		transition: bottom var(--m-dur) var(--m-ease);
 	}
 
 	&[data-disable-portal='true'] {

package/src/components/layouts/PageRoot.module.css

@@ -10,7 +10,7 @@
 	display: flex;
 	flex-direction: column;
 
-	@apply --mx-bg(var(--m-color-main-paper));
+	@apply --mx-bg(var(--m-tint-paper));
 
 	@media (min-width: 768px) {
 		display: grid;

package/src/components/layouts/PageSection.module.css

@@ -1,10 +1,10 @@
 .root {
 	max-width: 80vw;
 	width: 100%;
-	padding: var(--m-space-md);
+	padding: var(--m-sp-md);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
-	border-radius: var(--m-radius-lg);
-	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+	border-radius: var(--m-rd-lg);
+	@apply --mx-borderColor(var(--m-surface-ambient-b-color));
 
 	@media (min-width: 768px) {
 		min-width: 0;
@@ -13,7 +13,7 @@
 
 .grid {
 	display: grid;
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 	align-items: start;
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }

package/src/components/layouts/layouts.stories.tsx

@@ -226,7 +226,7 @@ export const WithVirtualKeyboard: Story = {
 						right: 0,
 						height: 'var(--mock-virtual-keyboard-height,0)',
 						width: '100%',
-						transition: 'height var(--m-duration) var(--m-easing)',
+						transition: 'height var(--m-dur) var(--m-ease)',
 					}}
 				/>
 			</PageRoot>