@a-type/ui 6.0.81 → 6.1.1

package/dist/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,11 +179,11 @@
 	@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/dist/components/dialog/Dialog.stories.js

@@ -59,7 +59,7 @@ export const VirtualKeyboard = {
                         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)',
                     } })] }));
     },
 };

package/dist/components/dialog/Dialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/components/dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../src/components/dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}

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

@@ -2,10 +2,10 @@
 	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/dist/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,6 +40,6 @@
 .icon {
 	opacity: 80%;
 	font-size: 1rem;
-	@apply --mx-stroke(var(--m-color-main-heavy));
+	@apply --mx-stroke(var(--m-tint-heavy));
 }
 }

package/dist/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/dist/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,9 +53,9 @@
 .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/dist/components/forms/Form.module.css

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

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

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

package/dist/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/dist/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/dist/components/horizontalList/HorizontalList.stories.js

@@ -32,21 +32,21 @@ export const Default = {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
-                backgroundColor: 'var(--m-color-neutral-ink)',
+                backgroundColor: 'var(--m-gray-ink)',
             }, children: _jsxs("div", { style: {
                     width: 400,
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
                     alignItems: 'stretch',
-                    backgroundColor: 'var(--m-color-neutral-paper)',
+                    backgroundColor: 'var(--m-gray-paper)',
                 }, children: [_jsx(Button, { toggled: open, onClick: () => setOpen(!open), style: {
                             marginBottom: '0.25rem',
                             marginRight: '0.25rem',
                             marginTop: 'auto',
                             alignSelf: 'flex-end',
                         }, children: open ? 'Close' : 'Open' }), _jsx(HorizontalList, Object.assign({ style: {
-                            borderTop: '1px solid var(--m-color-neutral)',
+                            borderTop: '1px solid var(--m-gray)',
                             maxHeight: 200,
                         }, openDirection: "up" }, args, { open: open, onOpenChange: setOpen }))] }) }));
     },
@@ -61,10 +61,10 @@ export const CantOpen = {
                 flexDirection: 'column',
                 alignItems: 'stretch',
                 justifyContent: 'flex-end',
-                backgroundColor: 'var(--m-color-neutral-paper)',
+                backgroundColor: 'var(--m-gray-paper)',
             }, children: _jsxs(HorizontalList, Object.assign({ style: {
                     maxHeight: 200,
-                    borderTop: '1px solid var(--m-color-neutral)',
+                    borderTop: '1px solid var(--m-gray)',
                 }, openDirection: "up" }, args, { children: [_jsx(Button, { size: "small", toggled: more, onClick: () => setMore(!more), children: "More" }), _jsx(Button, { size: "small", children: "One" }), _jsx(Button, { size: "small", children: "Two" }), more && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", children: "Three" }), _jsx(Button, { size: "small", children: "Four" }), _jsx(Button, { size: "small", children: "Five" }), _jsx(Button, { size: "small", children: "Six" }), _jsx(Button, { size: "small", children: "Seven" }), _jsx(Button, { size: "small", children: "Eight" }), _jsx(Button, { size: "small", children: "Nine" }), _jsx(Button, { size: "small", children: "Ten" }), _jsx(Button, { size: "small", children: "Eleven" }), _jsx(Button, { size: "small", children: "Twelve" }), _jsx(Button, { size: "small", children: "Thirteen" }), _jsx(Button, { size: "small", children: "Fourteen" }), _jsx(Button, { size: "small", children: "Fifteen" })] })), _jsx(Button, { color: "primary", style: {
                             position: 'sticky',
                             bottom: 8,

package/dist/components/horizontalList/HorizontalList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalList.stories.js","sourceRoot":"","sources":["../../../src/components/horizontalList/HorizontalList.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"HorizontalList.stories.js","sourceRoot":"","sources":["../../../src/components/horizontalList/HorizontalList.stories.tsx"],"names":[],"mappings":"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"}

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

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

package/dist/components/icon/Icon.stories.js

@@ -28,7 +28,7 @@ export const All = {
         return (_jsx("div", { style: {
                 display: 'grid',
                 gridTemplateColumns: 'repeat(6, 1fr)',
-                gap: 'var(--m-space-xs)',
+                gap: 'var(--m-sp-xs)',
             }, children: iconNames.map((name) => (_jsxs(Box, { surface: "ambient", col: true, p: "sm", layout: "center center", border: true, children: [_jsx(Icon, { name: name, size: 25 }), _jsx("span", { style: {
                             textAlign: 'center',
                             fontSize: 'var(--m-prose-ambient-size)',

package/dist/components/icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE;SAC/C;KACD;IACD,IAAI,EAAE;QACL,IAAI,EAAE,aAAa;KACnB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,IAAI,oBAAK,IAAI,EAAI,CAAC;IAC3B,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAU;IACzB,MAAM;QACL,OAAO,CACN,cACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,mBAAmB,EAAE,gBAAgB;gBACrC,GAAG,EAAE,mBAAmB;aACxB,YAEA,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,MAAC,GAAG,IACH,OAAO,EAAC,SAAS,EACjB,GAAG,QACH,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,eAAe,EACtB,MAAM,mBAGN,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,EAC9B,eACC,KAAK,EAAE;4BACN,SAAS,EAAE,QAAQ;4BACnB,QAAQ,EAAE,6BAA6B;yBACvC,YAEA,IAAI,GACC,KAVF,IAAI,CAWJ,CACN,CAAC,GACG,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE;SAC/C;KACD;IACD,IAAI,EAAE;QACL,IAAI,EAAE,aAAa;KACnB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,IAAI,oBAAK,IAAI,EAAI,CAAC;IAC3B,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAU;IACzB,MAAM;QACL,OAAO,CACN,cACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,mBAAmB,EAAE,gBAAgB;gBACrC,GAAG,EAAE,gBAAgB;aACrB,YAEA,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,MAAC,GAAG,IACH,OAAO,EAAC,SAAS,EACjB,GAAG,QACH,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,eAAe,EACtB,MAAM,mBAGN,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,EAC9B,eACC,KAAK,EAAE;4BACN,SAAS,EAAE,QAAQ;4BACnB,QAAQ,EAAE,6BAA6B;yBACvC,YAEA,IAAI,GACC,KAVF,IAAI,CAWJ,CACN,CAAC,GACG,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

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

@@ -1,6 +1,6 @@
 @layer components {.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/dist/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,15 +87,15 @@
 	}
 
 	& > [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/dist/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/dist/components/layouts/PageFixedArea.module.css

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

package/dist/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;
 	}
 }