@a-type/ui 6.0.80 → 6.1.0

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

@@ -29,13 +29,10 @@
 		text-decoration: line-through;
 	}
 	&[data-bold] {
-		font-weight: var(--m-text-weight-bold);
-	}
-	&[data-thin] {
-		font-weight: var(--m-text-weight-thin);
+		font-weight: var(--m-fw-bold);
 	}
 	&[data-normal] {
-		font-weight: var(--m-text-weight-normal);
+		font-weight: var(--m-fw-normal);
 	}
 	&[data-uppercase] {
 		text-transform: uppercase;
@@ -58,16 +55,16 @@
 	}
 
 	&[data-color='neutral'] {
-		@apply --mx-fg(var(--m-color-neutral-ink));
+		@apply --mx-fg(var(--m-gray-ink));
 	}
 	&[data-color='main'] {
-		@apply --mx-fg(var(--m-color-main-heavy));
+		@apply --mx-fg(var(--m-tint-heavy));
 	}
 	&[data-color='attention'] {
-		@apply --mx-fg(var(--m-color-palette-attention-heavy));
+		@apply --mx-fg(var(--m-color-attention-heavy));
 	}
 	&[data-color='success'] {
-		@apply --mx-fg(var(--m-color-palette-success-heavy));
+		@apply --mx-fg(var(--m-color-success-heavy));
 	}
 
 	&[data-align='start'] {

package/src/components/typography/typography.tsx

@@ -11,7 +11,6 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
 	underline?: boolean;
 	strikethrough?: boolean;
 	bold?: boolean;
-	thin?: boolean;
 	normal?: boolean;
 	uppercase?: boolean;
 	truncate?: boolean;
@@ -29,7 +28,6 @@ export function Text({
 	render,
 	className,
 	bold,
-	thin,
 	truncate,
 	dim,
 	color,
@@ -52,7 +50,6 @@ export function Text({
 			underline: underline ? true : undefined,
 			strikethrough: strikethrough ? true : undefined,
 			bold: bold ? true : undefined,
-			thin: thin ? true : undefined,
 			truncate: truncate ? true : undefined,
 			dim: dim ? true : undefined,
 			color: color ? color : undefined,

package/src/components/viewport/Viewport.module.css

@@ -18,7 +18,7 @@
 	}
 	&:focus-visible {
 		@apply --mx-shadow;
-		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+		--mx-ring-value: --fn-ring(var(--m-tint-ink), 1px);
 	}
 }
 
@@ -26,19 +26,19 @@
 	position: absolute;
 
 	&[data-position='top-left'] {
-		top: var(--m-space-sm);
-		left: var(--m-space-sm);
+		top: var(--m-sp-sm);
+		left: var(--m-sp-sm);
 	}
 	&[data-position='top-right'] {
-		top: var(--m-space-sm);
-		right: var(--m-space-sm);
+		top: var(--m-sp-sm);
+		right: var(--m-sp-sm);
 	}
 	&[data-position='bottom-left'] {
-		bottom: var(--m-space-sm);
-		left: var(--m-space-sm);
+		bottom: var(--m-sp-sm);
+		left: var(--m-sp-sm);
 	}
 	&[data-position='bottom-right'] {
-		bottom: var(--m-space-sm);
-		right: var(--m-space-sm);
+		bottom: var(--m-sp-sm);
+		right: var(--m-sp-sm);
 	}
 }

package/src/css/base.css

@@ -28,7 +28,7 @@
 
 	body {
 		overflow: overlay;
-		@apply --mx-bg(var(--m-color-main-paper));
+		@apply --mx-bg(var(--m-tint-paper));
 	}
 
 	a {

package/src/css/util.css

@@ -61,19 +61,19 @@
 	gap: 0;
 }
 .gap-xs {
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 .gap-sm {
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 }
 .gap-md {
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 }
 .gap-lg {
-	gap: var(--m-space-lg);
+	gap: var(--m-sp-lg);
 }
 .gap-xl {
-	gap: var(--m-space-xl);
+	gap: var(--m-sp-xl);
 }
 
 .items-start {
@@ -112,19 +112,19 @@
 	padding: 0;
 }
 .p-xs {
-	padding: var(--m-space-xs);
+	padding: var(--m-sp-xs);
 }
 .p-sm {
-	padding: var(--m-space-sm);
+	padding: var(--m-sp-sm);
 }
 .p-md {
-	padding: var(--m-space-md);
+	padding: var(--m-sp-md);
 }
 .p-lg {
-	padding: var(--m-space-lg);
+	padding: var(--m-sp-lg);
 }
 .p-xl {
-	padding: var(--m-space-xl);
+	padding: var(--m-sp-xl);
 }
 
 /* Responsive */

package/src/hooks/useTitleBarColor.stories.tsx

@@ -98,6 +98,6 @@ function MockTitleBar() {
 }
 
 function Overrider() {
-	useThemedTitleBar('--m-color-accent-light');
+	useThemedTitleBar('--m-accent-light');
 	return null;
 }

package/src/keyboard.stories.tsx

@@ -41,7 +41,7 @@ export const Default: Story = {
 								flexDirection: 'column',
 								alignItems: 'center',
 								justifyContent: 'center',
-								padding: 'var(--m-space-lg)',
+								padding: 'var(--m-sp-lg)',
 							}}
 						>
 							Focus the inputs below to see how the virtual keyboard behavior

package/src/shadows.stories.tsx

@@ -22,7 +22,7 @@ export const Default: Story = {
 				style={{
 					display: 'grid',
 					gridTemplateColumns: 'repeat(4, 1fr)',
-					gap: 'var(--m-space-xl)',
+					gap: 'var(--m-sp-xl)',
 				}}
 			>
 				<Box surface border p elevated="sm">

package/src/theme.stories.module.css

@@ -1,7 +1,7 @@
 .grid {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
-	gap: var(--m-space-lg);
+	gap: var(--m-sp-lg);
 	width: 100%;
 	min-width: 0;
 	flex: 1 0 auto;