@a-type/ui 6.0.13 → 6.0.15

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

@@ -24,11 +24,11 @@
 .content {
 	position: relative;
 	flex: 1;
-	padding: var(--m-spacing-sm);
+	padding: var(--m-space-sm);
 
-	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);
 	font-style: italic;
 
 	@apply --mx-fg(var(--m-color-neutral-ink));

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

@@ -76,10 +76,10 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: end;
-		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);
 		@apply --mx-fg(var(--m-color-neutral-heavy));
 	}
 	&[data-state='open'] {

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

@@ -1,24 +1,24 @@
 .close {
 	position: absolute;
-	right: var(--m-spacing-sm);
-	top: var(--m-spacing-sm);
+	right: var(--m-space-sm);
+	top: var(--m-space-sm);
 }
 
 .popup {
-	padding: var(--m-spacing-md);
+	padding: var(--m-space-md);
 }
 
 .title {
 	font-weight: 500;
 	margin: 0;
-	margin-block-end: var(--m-spacing-sm);
-	font-size: var(--m-text-secondary-size);
-	line-height: var(--m-text-secondary-lineHeight);
+	margin-block-end: var(--m-space-sm);
+	font-size: var(--m-prose-secondary-size);
+	line-height: var(--m-prose-secondary-lineHeight);
 }
 
 .description {
 	margin: 0;
-	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);
 	@apply --mx-fg(var(--m-color-neutral-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-spacing-md)' }}>
+				<Popover.Content style={{ padding: 'var(--m-space-md)' }}>
 					<Popover.Arrow />
 					<Popover.Title>Hello</Popover.Title>
 					<Popover.Description>This is a popover content.</Popover.Description>

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

@@ -61,9 +61,9 @@
 	min-height: 0px;
 	overflow-x: clip;
 	overflow-y: auto;
-	scroll-padding-block: var(--m-spacing-md);
+	scroll-padding-block: var(--m-space-md);
 	position: relative;
-	padding: var(--m-spacing-xs);
+	padding: var(--m-space-xs);
 
 	border-radius: inherit;
 }
@@ -77,14 +77,14 @@
 	user-select: none;
 
 	padding: var(--m-action-padding);
-	padding-left: var(--m-spacing-lg);
-	gap: var(--m-spacing-sm);
+	padding-left: var(--m-space-lg);
+	gap: var(--m-space-sm);
 
 	text-align: left;
-	font-size: var(--m-text-secondary-size);
-	font-weight: var(--m-text-secondary-weight);
-	line-height: var(--m-text-secondary-lineHeight);
-	font-family: var(--m-text-secondary-font);
+	font-size: var(--m-prose-secondary-size);
+	font-weight: var(--m-prose-secondary-weight);
+	line-height: var(--m-prose-secondary-lineHeight);
+	font-family: var(--m-prose-secondary-font);
 
 	@apply --mx-fg(color-contrast(var(--mx-bg-ref)));
 
@@ -111,17 +111,15 @@
 
 	border-radius: var(--m-radius-xs);
 	&:first-child {
-		border-top-left-radius: calc(var(--m-surface-radius) - var(--m-spacing-xs));
-		border-top-right-radius: calc(
-			var(--m-surface-radius) - var(--m-spacing-xs)
-		);
+		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));
 	}
 	&:last-child {
 		border-bottom-left-radius: calc(
-			var(--m-surface-radius) - var(--m-spacing-xs)
+			var(--m-surface-radius) - var(--m-space-xs)
 		);
 		border-bottom-right-radius: calc(
-			var(--m-surface-radius) - var(--m-spacing-xs)
+			var(--m-surface-radius) - var(--m-space-xs)
 		);
 	}
 }
@@ -131,8 +129,8 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-spacing-sm);
-	scroll-padding-block: var(--m-spacing-md);
+	gap: var(--m-space-sm);
+	scroll-padding-block: var(--m-space-md);
 }
 
 .itemIndicator {
@@ -144,12 +142,12 @@
 	align-items: center;
 	justify-content: center;
 	position: relative;
-	right: calc(-1 * var(--m-spacing-xs));
+	right: calc(-1 * var(--m-space-xs));
 }
 
 .itemRightSlot {
 	margin-inline-start: auto;
-	padding-inline-start: var(--m-spacing-sm);
+	padding-inline-start: var(--m-space-sm);
 }
 
 .arrow {
@@ -193,7 +191,7 @@
 }
 
 .separator {
-	margin: var(--m-spacing-xs);
+	margin: var(--m-space-xs);
 	height: var(--m-lineWidth-sm);
 	@apply --mx-bg(var(--m-color-neutral));
 }
@@ -201,17 +199,17 @@
 .groupLabel {
 	user-select: none;
 	@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);
 }
 
 .scrollArrow {
 	box-sizing: border-box;
 	z-index: 1;
 	height: 1rem;
-	left: var(--m-spacing-md);
-	right: var(--m-spacing-md);
+	left: var(--m-space-md);
+	right: var(--m-space-md);
 	cursor: default;
 	user-select: none;
 	align-items: center;
@@ -220,9 +218,9 @@
 	@apply --mx-bg(var(--m-surface-ambient-bg));
 	@apply --mx-fg(var(--m-surface-ambient-fg));
 	border-radius: inherit;
-	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);
 
 	&::before {
 		position: absolute;

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

@@ -3,8 +3,8 @@
 
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	row-gap: var(--m-spacing-xs);
-	column-gap: var(--m-spacing-md);
+	row-gap: var(--m-space-xs);
+	column-gap: var(--m-space-md);
 	align-items: center;
 	box-sizing: border-box;
 }
@@ -38,9 +38,9 @@
 	grid-column-start: 1;
 	grid-row-start: 1;
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	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);
 }
 
 .value {
@@ -48,7 +48,7 @@
 	grid-row-start: 1;
 	justify-self: end;
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	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);
 	font-weight: 500;
 }

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

@@ -1,14 +1,14 @@
 .dialogContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 }
 
 .dialogTitle {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-spacing-md);
+	gap: var(--m-space-md);
 }
 
 .appIcon {
@@ -19,5 +19,5 @@
 }
 
 .appDescription {
-	margin-bottom: var(--m-spacing-sm);
+	margin-bottom: var(--m-space-sm);
 }

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

@@ -1,7 +1,7 @@
 .trigger {
 	position: relative;
 	justify-content: center;
-	padding: var(--m-spacing-xs);
+	padding: var(--m-space-xs);
 	border-radius: var(--m-action-radius);
 }
 

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

@@ -1,5 +1,5 @@
 .root {
-	@apply --mx-text-secondary;
+	@apply --mx-prose-secondary;
 	width: 100%;
 
 	& .ProseMirror {
@@ -16,36 +16,36 @@
 	}
 
 	& h1 {
-		@apply --mx-text-primary;
+		@apply --mx-prose-primary;
 		&:not(:first-child) {
-			margin-top: var(--m-spacing-xl);
+			margin-top: var(--m-space-xl);
 		}
 	}
 	& h2 {
-		@apply --mx-text-secondary;
-		font-weight: var(--m-text-primary-weight);
+		@apply --mx-prose-secondary;
+		font-weight: var(--m-prose-primary-weight);
 		&:not(:first-child) {
-			margin-top: var(--m-spacing-lg);
+			margin-top: var(--m-space-lg);
 		}
 	}
 	& h3 {
-		@apply --mx-text-ambient;
-		font-weight: var(--m-text-primary-weight);
+		@apply --mx-prose-ambient;
+		font-weight: var(--m-prose-primary-weight);
 		text-transform: uppercase;
 		&:not(:first-child) {
-			margin-top: var(--m-spacing-md);
+			margin-top: var(--m-space-md);
 		}
 	}
 	& h4 {
-		@apply --mx-text-ambient;
-		font-weight: var(--m-text-primary-weight);
+		@apply --mx-prose-ambient;
+		font-weight: var(--m-prose-primary-weight);
 		&:not(:first-child) {
-			margin-top: var(--m-spacing-md);
+			margin-top: var(--m-space-md);
 		}
 	}
 	& p {
-		@apply --mx-text-secondary;
-		margin-bottom: var(--m-spacing-md);
+		@apply --mx-prose-secondary;
+		margin-bottom: var(--m-space-md);
 	}
 	& a {
 		text-decoration: underline;
@@ -56,11 +56,11 @@
 	}
 	& blockquote {
 		border-left: 4px solid var(--m-color-neutral-heavy);
-		padding-left: var(--m-spacing-md);
+		padding-left: var(--m-space-md);
 		font-style: italic;
-		margin-block: var(--m-spacing-md);
-		margin-inline-start: var(--m-spacing-md);
-		padding-inline: var(--m-spacing-md);
+		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));
 	}
 	& ul {
@@ -71,17 +71,17 @@
 	}
 	& ul,
 	& ol {
-		padding-inline-start: var(--m-spacing-lg);
-		margin-block: var(--m-spacing-md);
+		padding-inline-start: var(--m-space-lg);
+		margin-block: var(--m-space-md);
 	}
 	& li {
-		margin-block-end: var(--m-spacing-xs);
+		margin-block-end: var(--m-space-xs);
 	}
 	& mark {
 		@apply --mx-bg(var(--m-color-main-wash));
 	}
 	& strong {
-		font-weight: var(--m-typography-weight-bold);
+		font-weight: var(--m-text-weight-bold);
 	}
 	& em {
 		font-style: italic;
@@ -89,7 +89,7 @@
 	& hr {
 		border: none;
 		border-top: var(--m-lineWidth) solid var(--m-color-neutral-heavy);
-		margin-block: var(--m-spacing-lg);
+		margin-block: var(--m-space-lg);
 	}
 }
 

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

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

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

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

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

@@ -58,6 +58,6 @@
 		justify-content: center;
 		content: '✓';
 		color: var(--m-color-main-ink);
-		font-size: var(--m-text-ambient-size);
+		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-spacing-xs);
+	gap: var(--m-space-xs);
 }
 
 .trigger {
@@ -13,7 +13,7 @@
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 	padding: var(--m-action-padding);
 
 	cursor: pointer;
@@ -24,8 +24,8 @@
 	white-space: nowrap;
 
 	@apply --mx-fg(var(--m-color-neutral-ink));
-	font-size: var(--m-text-secondary-size);
-	font-weight: var(--m-text-secondary-weight);
+	font-size: var(--m-prose-secondary-size);
+	font-weight: var(--m-prose-secondary-weight);
 	line-height: 1;
 	font-family: inherit;
 
@@ -105,7 +105,7 @@
 .moreLeftIcon {
 	pointer-events: none;
 	position: absolute;
-	left: var(--m-spacing-xs);
+	left: var(--m-space-xs);
 	top: 50%;
 	z-index: 10;
 	height: --fn-literal(16px);
@@ -123,7 +123,7 @@
 .moreRightIcon {
 	pointer-events: none;
 	position: absolute;
-	right: var(--m-spacing-xs);
+	right: var(--m-space-xs);
 	top: 50%;
 	z-index: 10;
 	height: --fn-literal(16px);

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

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

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

@@ -4,8 +4,8 @@
 }
 
 .toast {
-	--gap: var(--m-spacing-sm);
-	--peek: var(--m-spacing-sm);
+	--gap: var(--m-space-sm);
+	--peek: var(--m-space-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-spacing-xs);
+	top: var(--m-space-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-spacing-xs);
+	gap: var(--m-space-xs);
 
 	/* styling happens in content element */
 
@@ -100,7 +100,7 @@
 	pointer-events: auto;
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-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-spacing-md);
-	padding-inline-end: var(--m-spacing-sm);
-	padding-block: var(--m-spacing-sm);
-	gap: var(--m-spacing-sm);
+	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);
 
 	[data-behind]:not([data-expanded]) & {
 		max-height: var(--height);
@@ -130,7 +130,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 	@apply --mx-fg(inherit);
 
 	transition: opacity var(--m-duration) var(--m-easing);
@@ -148,20 +148,20 @@
 .toastMainBodyContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 	@apply --mx-fg(inherit);
 }
 
 .toastTitle {
 	@apply --mx-fg(inherit);
-	@apply --mx-text-secondary;
-	font-weight: var(--m-typography-weight-bold);
+	@apply --mx-prose-secondary;
+	font-weight: var(--m-text-weight-bold);
 	margin: 0;
 }
 
 .toastDescriptionRow {
 	display: flex;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 }
 
 .icon {
@@ -172,7 +172,7 @@
 .toastDescription {
 	margin: 0;
 	@apply --mx-fg(inherit);
-	@apply --mx-text-ambient;
+	@apply --mx-prose-ambient;
 }
 
 .toastClose {
@@ -187,11 +187,11 @@
 	margin-inline-start: auto;
 	display: flex;
 	align-items: center;
-	gap: var(--m-spacing-xs);
+	gap: var(--m-space-xs);
 
-	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);
 
 	transition: opacity var(--m-duration) var(--m-easing);
 

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

@@ -1,7 +1,7 @@
 .root {
 	width: fit-content;
 	display: inline-flex;
-	gap: var(--m-spacing-sm);
+	gap: var(--m-space-sm);
 	border-radius: var(--m-radius-lg);
 
 	@apply --mx-bg(--fn-color-faded(var(--m-color-main-light), 20%));

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

@@ -6,7 +6,7 @@
 	padding: var(--m-surface-padding);
 	border-radius: var(--m-surface-radius);
 
-	font-size: var(--m-text-ambient-size);
+	font-size: var(--m-prose-ambient-size);
 
 	transition:
 		opacity 0.2s ease,

package/src/components/typography/typography.module.css

@@ -1,19 +1,19 @@
 .typography {
 	@apply --mx-fg(inherit);
-	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);
 
 	&[data-emphasis='primary'] {
-		font-size: var(--m-text-primary-size);
-		line-height: var(--m-text-primary-lineHeight);
-		font-weight: var(--m-text-primary-weight);
+		font-size: var(--m-prose-primary-size);
+		line-height: var(--m-prose-primary-lineHeight);
+		font-weight: var(--m-prose-primary-weight);
 	}
 
 	&[data-emphasis='ambient'] {
-		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);
 	}
 
 	&[data-italic] {
@@ -26,10 +26,10 @@
 		text-decoration: line-through;
 	}
 	&[data-bold] {
-		font-weight: var(--m-typography-weight-bold);
+		font-weight: var(--m-text-weight-bold);
 	}
 	&[data-thin] {
-		font-weight: var(--m-typography-weight-thin);
+		font-weight: var(--m-text-weight-thin);
 	}
 	&[data-truncate] {
 		overflow: hidden;
@@ -37,6 +37,9 @@
 		white-space: nowrap;
 		max-width: 100%;
 	}
+	&[data-dim] {
+		@apply --mx-fg(var(--m-color-neutral-heavy));
+	}
 }
 
 @layer components {

package/src/components/typography/typography.tsx

@@ -12,6 +12,7 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
 	bold?: boolean;
 	thin?: boolean;
 	truncate?: boolean;
+	dim?: boolean;
 }
 
 export function Text({
@@ -24,6 +25,7 @@ export function Text({
 	bold,
 	thin,
 	truncate,
+	dim,
 	...rest
 }: TypographyProps) {
 	return useRender({
@@ -41,6 +43,7 @@ export function Text({
 			bold: bold ? true : undefined,
 			thin: thin ? true : undefined,
 			truncate: truncate ? true : undefined,
+			dim: dim ? true : undefined,
 		},
 	});
 }