@a-type/ui 6.0.13 → 6.0.15

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

@@ -5,18 +5,18 @@
 
 .empty:not(:empty) {
 	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-spacing-sm);
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	font-weight: var(--m-text-ambient-weight);
+	padding: var(--m-space-sm);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
 }
 
 .group {
 	display: flex;
 	flex-direction: column;
 	overflow: clip;
-	padding: var(--m-spacing-sm);
-	gap: var(--m-spacing-xs);
+	padding: var(--m-space-sm);
+	gap: var(--m-space-xs);
 }
 
 .groupItem {
@@ -30,17 +30,17 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 }
 
 .groupLabel {
 	text-transform: uppercase;
 	width: 100%;
 	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding-inline: var(--m-spacing-xs);
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	font-weight: var(--m-text-ambient-weight);
+	padding-inline: var(--m-space-xs);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
 }
 
 .icon {
@@ -60,17 +60,17 @@
 	flex-direction: row;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--m-spacing-xs);
-	padding-inline-start: var(--m-spacing-md);
+	gap: var(--m-space-xs);
+	padding-inline-start: var(--m-space-md);
 }
 
 .chipsList {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--m-spacing-xs);
-	padding-inline: var(--m-spacing-sm);
-	margin-inline-start: calc(-1 * var(--m-spacing-md));
+	gap: var(--m-space-xs);
+	padding-inline: var(--m-space-sm);
+	margin-inline-start: calc(-1 * var(--m-space-md));
 
 	&:empty {
 		display: none;
@@ -90,7 +90,7 @@
 	flex-direction: row;
 	flex-grow: 1;
 	align-items: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 }
 
 .chip {
@@ -98,8 +98,8 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	padding-inline: var(--m-spacing-sm);
-	gap: var(--m-spacing-xs);
+	padding-inline: var(--m-space-sm);
+	gap: var(--m-space-xs);
 }
 
 .chipRemove {
@@ -107,8 +107,8 @@
 	min-width: 0;
 	padding: 0;
 	line-height: 1;
-	margin-block: calc(-1 * var(--m-spacing-xs));
-	margin-inline-end: calc(-1 * var(--m-spacing-sm));
+	margin-block: calc(-1 * var(--m-space-xs));
+	margin-inline-end: calc(-1 * var(--m-space-sm));
 }
 
 .item[data-selected] {
@@ -143,7 +143,7 @@
 .row {
 	display: flex;
 	align-items: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 }
 
 .multiValue {
@@ -151,7 +151,7 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 }
 
 .clearAndCaret {
@@ -162,7 +162,7 @@
 }
 
 .details {
-	@apply --mx-text-ambient;
+	@apply --mx-prose-ambient;
 	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 }

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

@@ -13,7 +13,7 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	text-align: center;
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 	font-weight: bold;
 }
 
@@ -26,7 +26,7 @@
 	grid-template-columns: repeat(7, var(--day-size, 32px));
 	grid-auto-rows: var(--day-size, 32px);
 	overflow: hidden;
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 	border-radius: var(--m-radius-sm);
 }
 
@@ -34,7 +34,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 	@apply --mx-fg(var(--m-color-neutral-heavy));
 }
 

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-spacing-sm);
+	gap: var(--m-space-sm);
 
 	@media (min-width: 640px) {
 		grid-template-columns: auto 1fr 1fr auto;

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

@@ -60,7 +60,7 @@
 			border-bottom-width: 0;
 			transform: translate(0, 0);
 			padding-bottom: env(safe-area-inset-bottom);
-			padding-top: var(--m-spacing-lg);
+			padding-top: var(--m-space-lg);
 
 			&[data-starting-style],
 			&[data-ending-style] {
@@ -106,7 +106,7 @@
 .contentScrollAreaContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-spacing-md);
+	gap: var(--m-space-md);
 	padding: var(--m-surface-padding);
 }
 
@@ -120,7 +120,7 @@
 	cursor: grab;
 	will-change: transform;
 	touch-action: none;
-	padding-block: var(--m-spacing-sm);
+	padding-block: var(--m-space-sm);
 	z-index: 1;
 
 	@media (min-width: 600px) {
@@ -136,8 +136,8 @@
 
 .close {
 	position: absolute;
-	right: var(--m-spacing-sm);
-	top: var(--m-spacing-sm);
+	right: var(--m-space-sm);
+	top: var(--m-space-sm);
 	z-index: 101;
 	display: flex;
 
@@ -150,24 +150,24 @@
 
 .title {
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	font-size: var(--m-text-primary-size);
-	font-weight: var(--m-text-primary-weight);
-	line-height: var(--m-text-primary-lineHeight);
-	margin-block-end: var(--m-spacing-xs);
+	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-start: 0;
 }
 
 .description {
 	@apply --mx-fg(var(--m-color-neutral-heavy));
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
 	margin: 0;
-	margin-block-end: var(--m-spacing-xs);
+	margin-block-end: var(--m-space-xs);
 }
 
 .actions {
 	position: sticky;
-	bottom: var(--m-spacing-md);
+	bottom: var(--m-space-md);
 	z-index: 100;
 	display: flex;
 	flex-direction: row;
@@ -182,7 +182,7 @@
 		var(--m-shadow-md-spread) var(--m-color-neutral-paper);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 	@apply --mx-bg-faded(50%);
-	margin-block-start: var(--m-spacing-md);
-	gap: var(--m-spacing-sm);
+	margin-block-start: var(--m-space-md);
+	gap: var(--m-space-sm);
 	border-radius: var(--m-surface-radius);
 }

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

@@ -20,7 +20,7 @@
 	@apply --mx-borderColor(transparent);
 
 	padding: var(--m-control-padding);
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 	border-radius: var(--m-control-radius);
 
 	&:hover,

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

@@ -4,7 +4,7 @@
 	display: flex;
 	flex-direction: column;
 	isolation: isolate;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 }
 
@@ -43,9 +43,9 @@
 	justify-content: center;
 	@apply --mx-bg(inherit);
 	@apply --mx-fg(var(--m-color-neutral-heavy));
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	font-weight: var(--m-text-ambient-weight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
 }
 
 .categoryHeader {
@@ -53,29 +53,29 @@
 	top: 0;
 	@apply --mx-bg(inherit);
 	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-spacing-sm) var(--m-spacing-md);
+	padding: var(--m-space-sm) var(--m-space-md);
 	font-weight: semibold;
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
 }
 
 .row {
-	scroll-margin-block: var(--m-spacing-xs);
-	padding-inline: var(--m-spacing-xs);
+	scroll-margin-block: var(--m-space-xs);
+	padding-inline: var(--m-space-xs);
 }
 
 .emoji {
-	padding: var(--m-spacing-xs);
+	padding: var(--m-space-xs);
 	font-size: --fn-literal(20px);
 }
 
 .list {
 	user-select: none;
-	padding-block-end: var(--m-spacing-md);
+	padding-block-end: var(--m-space-md);
 }
 
 .skinToneButton {
-	padding: var(--m-spacing-xs);
+	padding: var(--m-space-xs);
 	font-size: --fn-literal(20px);
 }
 

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

@@ -2,10 +2,10 @@
 	display: inline-flex;
 	flex-direction: column;
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	margin-inline-start: var(--m-spacing-md);
-	gap: var(--m-spacing-xs);
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
+	margin-inline-start: var(--m-space-md);
+	gap: var(--m-space-xs);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: bold;
 }
 
@@ -13,8 +13,8 @@
 	display: inline-flex;
 	flex-direction: row;
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	gap: var(--m-spacing-sm);
-	font-size: var(--m-text-ambient-size);
-	line-height: var(--m-text-ambient-lineHeight);
-	margin-block-start: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	margin-block-start: var(--m-space-sm);
 }

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

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

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

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

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

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

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

@@ -16,9 +16,9 @@
 	flex-shrink: 0;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-spacing-sm);
-	padding: var(--m-spacing-sm) var(--m-spacing-sm) var(--m-spacing-md)
-		var(--m-spacing-sm);
+	gap: var(--m-space-sm);
+	padding: var(--m-space-sm) var(--m-space-sm) var(--m-space-md)
+		var(--m-space-sm);
 }
 
 .toggleButton {
@@ -36,7 +36,7 @@
 	position: sticky;
 	left: 0;
 	height: 100%;
-	top: var(--m-spacing-sm);
+	top: var(--m-space-sm);
 	z-index: 1;
 	flex-shrink: 0;
 	@apply --mx-bg(inherit);

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-spacing-xs)',
+					gap: 'var(--m-space-xs)',
 				}}
 			>
 				{iconNames.map((name) => (
@@ -52,7 +52,7 @@ export const All: Story = {
 						<span
 							style={{
 								textAlign: 'center',
-								fontSize: 'var(--m-text-ambient-size)',
+								fontSize: 'var(--m-prose-ambient-size)',
 							}}
 						>
 							{name}

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

@@ -19,20 +19,20 @@
 
 .cameraCancelButton {
 	position: absolute;
-	top: var(--m-spacing-sm);
-	left: var(--m-spacing-sm);
+	top: var(--m-space-sm);
+	left: var(--m-space-sm);
 	@apply --mx-fg(var(--m-color-neutral-paper));
 }
 
 .removeButton {
 	position: absolute;
-	top: var(--m-spacing-sm);
-	right: var(--m-spacing-sm);
+	top: var(--m-space-sm);
+	right: var(--m-space-sm);
 	z-index: 10;
 	height: 32px;
 	width: 32px;
 	cursor: pointer;
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 	@apply --mx-fg(var(--m-surface-ambient-fg));
 	@apply --mx-shadow;
@@ -56,7 +56,7 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-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

@@ -39,7 +39,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 	width: max-content;
 	overflow: clip;
 
@@ -53,9 +53,9 @@
 	@apply --mx-borderColor(var(--m-control-borderColor));
 	border-radius: var(--m-control-radius);
 
-	font-size: var(--m-text-secondary-size);
-	line-height: var(--m-text-secondary-lineHeight);
-	font-weight: var(--m-text-secondary-weight);
+	font-size: var(--m-prose-secondary-size);
+	line-height: var(--m-prose-secondary-lineHeight);
+	font-weight: var(--m-prose-secondary-weight);
 
 	&:has(input:disabled),
 	&:has(textarea:disabled) {
@@ -87,7 +87,7 @@
 	}
 
 	& > [data-icon] {
-		margin-inline: var(--m-spacing-sm);
+		margin-inline: var(--m-space-sm);
 	}
 
 	padding-inline: var(--m-control-padding-inline);

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

@@ -7,11 +7,11 @@
 	anchor-name: --page-content;
 	flex: 1;
 
-	gap: var(--m-spacing-md);
+	gap: var(--m-space-md);
 
-	padding: var(--m-spacing-md);
+	padding: var(--m-space-md);
 	@media (min-width: 768px) {
-		padding: var(--m-spacing-lg);
+		padding: var(--m-space-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-spacing-sm);
+	gap: var(--m-space-sm);
 	@apply --mx-bg(inherit);
 }

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

@@ -12,8 +12,8 @@
 		position: absolute;
 		content: '';
 		top: 0;
-		left: var(--m-spacing-md);
-		right: var(--m-spacing-md);
+		left: var(--m-space-md);
+		right: var(--m-space-md);
 		height: 1px;
 		@apply --mx-bg(var(--m-color-neutral-heavy));
 		@media (min-width: 768px) {
@@ -25,7 +25,7 @@
 		bottom: auto;
 		left: auto;
 		right: auto;
-		top: var(--m-spacing-lg);
+		top: var(--m-space-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-spacing-sm);
+	gap: var(--m-space-sm);
 
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 
 	position: fixed;
 	position-anchor: --page-content;
@@ -14,7 +14,7 @@
 	bottom: --fn-literal(var(--nav-height, env(safe-area-inset-bottom, 0px)));
 
 	@media (min-width: 768px) {
-		bottom: var(--m-spacing-md);
+		bottom: var(--m-space-md);
 		align-items: center;
 		transition: bottom var(--m-duration) var(--m-easing);
 	}

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

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

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

@@ -26,8 +26,8 @@
 
 .close {
 	position: absolute;
-	right: var(--m-spacing-md);
-	top: var(--m-spacing-md);
+	right: var(--m-space-md);
+	top: var(--m-space-md);
 }
 
 .overlay {
@@ -60,7 +60,7 @@
 	width: 90vw;
 	max-width: 100%;
 
-	padding: var(--m-spacing-lg);
+	padding: var(--m-space-lg);
 	border: none;
 	background: none;
 	pointer-events: none;

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

@@ -5,10 +5,10 @@
 	padding: 0;
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 
 	& > li {
-		margin-left: var(--m-spacing-sm);
+		margin-left: var(--m-space-sm);
 	}
 }
 

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

@@ -6,9 +6,9 @@
 	justify-items: center;
 	overflow: clip;
 	border-radius: 0;
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 	z-index: 50;
-	padding-bottom: calc(var(--m-spacing-sm) + env(safe-area-inset-bottom, 0px));
+	padding-bottom: calc(var(--m-space-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-spacing-sm);
+		gap: var(--m-space-sm);
 		overflow-x: clip;
 		overflow-y: auto;
 		border-radius: 0;
-		padding-bottom: var(--m-spacing-xl);
+		padding-bottom: var(--m-space-xl);
 		box-shadow: none;
 		@apply --mx-bg(transparent);
 		border: none;
@@ -36,7 +36,7 @@
 	user-select: none;
 	align-items: center;
 	justify-content: center;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 	white-space: nowrap;
 	padding: var(--m-action-padding);
 	transition: all var(--m-duration) var(--m-easing);
@@ -44,9 +44,9 @@
 	@apply --mx-bg(transparent);
 	border-radius: var(--m-radius-sm);
 	border: none;
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 	line-height: 1;
-	font-weight: var(--m-text-ambient-weight);
+	font-weight: var(--m-prose-ambient-weight);
 	@apply --mx-shadow;
 
 	&:active {
@@ -76,10 +76,10 @@
 		flex-direction: row-reverse;
 		justify-content: end;
 		align-items: center;
-		gap: var(--m-spacing-md);
+		gap: var(--m-space-md);
 		padding: var(--m-action-padding);
 		overflow: visible;
-		font-size: var(--m-text-secondary-size);
+		font-size: var(--m-prose-secondary-size);
 		&:active {
 			@apply --mx-bg-heavier(1);
 		}
@@ -93,7 +93,7 @@
 	@media (min-width: 768px) {
 		@apply --mx-bg(var(--m-color-neutral-light));
 		@apply --mx-bg-faded(50%);
-		padding: var(--m-spacing-sm);
+		padding: var(--m-space-sm);
 		border-radius: var(--m-action-radius);
 
 		[data-active='true'] & {
@@ -104,7 +104,7 @@
 
 .itemText {
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 	line-height: 1;
 	font-weight: inherit;
 	display: inline-block;
@@ -126,8 +126,8 @@
 
 .pip {
 	position: absolute;
-	top: var(--m-spacing-sm);
-	right: var(--m-spacing-sm);
+	top: var(--m-space-sm);
+	right: var(--m-space-sm);
 	width: 6px;
 	height: 6px;
 	border-radius: 50%;