@a-type/ui 6.0.80 → 6.1.0

package/dist/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/dist/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/dist/components/layouts/PageSection.module.css

@@ -1,10 +1,10 @@
 @layer components {.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/dist/components/layouts/layouts.stories.js

@@ -53,7 +53,7 @@ export const WithVirtualKeyboard = {
                         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/layouts/layouts.stories.js.map

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

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

@@ -8,7 +8,7 @@
 	&:focus-visible {
 		@apply --mx-shadow;
 		--mx-ring-value: --fn-focus-ring();
-		border-radius: var(--m-action-radius);
+		border-radius: var(--m-action-rd);
 	}
 }
 
@@ -26,8 +26,8 @@
 
 .close {
 	position: absolute;
-	right: var(--m-space-md);
-	top: var(--m-space-md);
+	right: var(--m-sp-md);
+	top: var(--m-sp-md);
 }
 
 .overlay {
@@ -37,7 +37,7 @@
 	backdrop-filter: blur(4px);
 	transition: opacity 0.2s ease;
 
-	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-bg(var(--m-gray-ink));
 	@apply --mx-bg-faded(50%);
 
 	&[data-state='closed'] {
@@ -60,7 +60,7 @@
 	width: 90vw;
 	max-width: 100%;
 
-	padding: var(--m-space-lg);
+	padding: var(--m-sp-lg);
 	border: none;
 	background: none;
 	pointer-events: none;

package/dist/components/lists/lists.module.css

@@ -3,13 +3,13 @@
 	list-style-position: inside;
 	margin: 0;
 	padding: 0;
-	padding-inline-start: var(--m-space-lg);
+	padding-inline-start: var(--m-sp-lg);
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 
 	& > li {
-		margin-left: var(--m-space-sm);
+		margin-left: var(--m-sp-sm);
 	}
 
 	&[data-unstyled] {

package/dist/components/marquee/marquee.module.css

@@ -14,7 +14,7 @@
 	display: flex;
 	flex-direction: row;
 	overflow: visible;
-	transition: transform var(--m-duration-long) var(--m-easing);
+	transition: transform var(--m-dur-long) var(--m-ease);
 }
 
 .item {

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

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

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

@@ -3,14 +3,14 @@
 
 	&:has(input:focus[data-focus-clicked]),
 	&:has(textarea:focus[data-focus-clicked]) {
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		@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:focus-visible),
 	&:has(textarea:focus-visible) {
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		@apply --mx-bg-lighter(3);
 		--mx-ring-value: --fn-focus-ring();
 	}
@@ -24,17 +24,17 @@
 .content {
 	position: relative;
 	flex: 1;
-	padding: var(--m-space-sm);
+	padding: var(--m-sp-sm);
 
 	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));
-	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-fg(var(--m-gray-ink));
+	@apply --mx-bg(var(--m-tint-wash));
 	@apply --mx-bg-heavier(1);
-	@apply --mx-borderColor(var(--m-color-main-heavy));
+	@apply --mx-borderColor(var(--m-tint-heavy));
 	border-right-width: 0;
 
 	& input,
@@ -61,9 +61,9 @@
 	width: 20px;
 	flex: 0 0 20px;
 
-	@apply --mx-borderColor(var(--m-color-main-heavy));
-	border-bottom-width: var(--m-lineWidth-md);
-	border-left-width: var(--m-lineWidth-md);
+	@apply --mx-borderColor(var(--m-tint-heavy));
+	border-bottom-width: var(--m-lw-md);
+	border-left-width: var(--m-lw-md);
 	border-top-width: 0;
 	border-right-width: 0;
 }
@@ -76,7 +76,7 @@
 	right: 0;
 	transform-origin: right bottom;
 
-	@apply --mx-borderColor(var(--m-color-main-wash));
+	@apply --mx-borderColor(var(--m-tint-wash));
 	@apply --mx-borderColor-heavier(1);
 	border-width: 9.5px;
 	border-style: solid;
@@ -94,16 +94,16 @@
 	transform-origin: center center;
 	transform: rotate(-45deg);
 
-	@apply --mx-bg(var(--m-color-main-heavy));
+	@apply --mx-bg(var(--m-tint-heavy));
 }
 
 .foldBottom {
 	flex: 1;
-	@apply --mx-borderColor(var(--m-color-main-heavy));
-	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-borderColor(var(--m-tint-heavy));
+	@apply --mx-bg(var(--m-tint-wash));
 	@apply --mx-bg-heavier(1);
-	border-right-width: var(--m-lineWidth-md);
-	border-bottom-width: var(--m-lineWidth-md);
+	border-right-width: var(--m-lw-md);
+	border-bottom-width: var(--m-lw-md);
 	border-left-width: 0;
 	border-top-width: 0;
 }

package/dist/components/numberStepper/NumberStepper.module.css

@@ -9,8 +9,8 @@
 
 	@apply --mx-bg(var(--m-control-bg));
 	@apply --mx-fg(var(--m-control-fg));
-	@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);
 
 	&:disabled,
 	&[data-disabled='true'] {
@@ -21,8 +21,8 @@
 	}
 
 	&[data-emphasis='primary'] {
-		@apply --mx-bg(var(--m-color-main-wash));
-		@apply --mx-fg(var(--m-color-main-ink));
+		@apply --mx-bg(var(--m-tint-wash));
+		@apply --mx-fg(var(--m-tint-ink));
 	}
 }
 

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

@@ -27,16 +27,16 @@
 	}
 
 	&[data-has-interacted='true'] {
-		animation-timing-function: var(--m-easing);
+		animation-timing-function: var(--m-ease);
 		animation-fill-mode: forwards;
 
 		&[data-state='closed'] {
 			animation-name: peekClose;
-			animation-duration: var(--m-duration);
+			animation-duration: var(--m-dur);
 		}
 		&[data-state='open'] {
 			animation-name: peekOpen;
-			animation-duration: var(--m-duration-long);
+			animation-duration: var(--m-dur-long);
 		}
 	}
 }
@@ -50,7 +50,7 @@
 	cursor: pointer;
 	@apply --mx-borderColor(var(--mx-fg-ref));
 	border-width: 0px;
-	border-bottom-width: var(--m-lineWidth-sm);
+	border-bottom-width: var(--m-lw-sm);
 
 	background: linear-gradient(to bottom, transparent 0%, var(--mx-bg-ref) 100%);
 
@@ -61,9 +61,9 @@
 		background: linear-gradient(
 			to bottom,
 			transparent 0%,
-			var(--m-color-main-wash) 100%
+			var(--m-tint-wash) 100%
 		);
-		border-color: var(--m-color-main);
+		border-color: var(--m-tint);
 	}
 
 	&::after {
@@ -76,11 +76,11 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: end;
-		padding: var(--m-space-sm);
+		padding: var(--m-sp-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));
+		@apply --mx-fg(var(--m-gray-heavy));
 	}
 	&[data-state='open'] {
 		&::after {
@@ -92,6 +92,6 @@
 		opacity: 0;
 	}
 	opacity: 1;
-	transition: opacity var(--m-duration) var(--m-easing);
+	transition: opacity var(--m-dur) var(--m-ease);
 }
 }

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

@@ -1,17 +1,17 @@
 @layer components {.close {
 	position: absolute;
-	right: var(--m-space-sm);
-	top: var(--m-space-sm);
+	right: var(--m-sp-sm);
+	top: var(--m-sp-sm);
 }
 
 .popup {
-	padding: var(--m-space-md);
+	padding: var(--m-sp-md);
 }
 
 .title {
 	font-weight: 500;
 	margin: 0;
-	margin-block-end: var(--m-space-sm);
+	margin-block-end: var(--m-sp-sm);
 	font-size: var(--m-prose-secondary-size);
 	line-height: var(--m-prose-secondary-lineHeight);
 }
@@ -20,6 +20,6 @@
 	margin: 0;
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
-	@apply --mx-fg(var(--m-color-neutral-heavy));
+	@apply --mx-fg(var(--m-gray-heavy));
 }
 }

package/dist/components/popover/Popover.stories.js

@@ -12,7 +12,7 @@ const meta = {
 export default meta;
 export const Default = {
     render(args) {
-        return (_jsxs(Popover, Object.assign({}, args, { children: [_jsx(Popover.Trigger, { render: _jsx(Button, { color: "primary", size: "small" }), children: "Open Popover" }), _jsxs(Popover.Content, { style: { padding: 'var(--m-space-md)' }, children: [_jsx(Popover.Arrow, {}), _jsx(Popover.Title, { children: "Hello" }), _jsx(Popover.Description, { children: "This is a popover content." }), _jsx(Popover.Close, {})] })] })));
+        return (_jsxs(Popover, Object.assign({}, args, { children: [_jsx(Popover.Trigger, { render: _jsx(Button, { color: "primary", size: "small" }), children: "Open Popover" }), _jsxs(Popover.Content, { style: { padding: 'var(--m-sp-md)' }, children: [_jsx(Popover.Arrow, {}), _jsx(Popover.Title, { children: "Hello" }), _jsx(Popover.Description, { children: "This is a popover content." }), _jsx(Popover.Close, {})] })] })));
     },
 };
 //# sourceMappingURL=Popover.stories.js.map

package/dist/components/popover/Popover.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/components/popover/Popover.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAS;IAClB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACD,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,OAAO,oBAAK,IAAI,eAChB,KAAC,OAAO,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAG,6BAE9C,EAClB,MAAC,OAAO,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE,aACvD,KAAC,OAAO,CAAC,KAAK,KAAG,EACjB,KAAC,OAAO,CAAC,KAAK,wBAAsB,EACpC,KAAC,OAAO,CAAC,WAAW,6CAAiD,EACrE,KAAC,OAAO,CAAC,KAAK,KAAG,IACA,KACT,CACV,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/components/popover/Popover.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAS;IAClB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACD,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,OAAO,oBAAK,IAAI,eAChB,KAAC,OAAO,CAAC,OAAO,IAAC,MAAM,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAG,6BAE9C,EAClB,MAAC,OAAO,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,aACpD,KAAC,OAAO,CAAC,KAAK,KAAG,EACjB,KAAC,OAAO,CAAC,KAAK,wBAAsB,EACpC,KAAC,OAAO,CAAC,WAAW,6CAAiD,EACrE,KAAC,OAAO,CAAC,KAAK,KAAG,IACA,KACT,CACV,CAAC;IACH,CAAC;CACD,CAAC"}

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

@@ -5,7 +5,7 @@
 	max-width: var(--available-width, 95vw);
 	max-height: var(--available-height);
 
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow(var(--m-shadow-lg));
 	@apply --mx-surface-ambient;
@@ -19,13 +19,13 @@
 	}
 	&:focus-visible {
 		@apply --mx-ring(--fn-ring(
-			--fn-color-faded(var(--m-color-main-ink), 50%),
+			--fn-color-faded(var(--m-tint-ink), 50%),
 			2px
 		));
 	}
 
 	@media (forced-colors: active) {
-		border-color: var(--m-color-main-ink);
+		border-color: var(--m-tint-ink);
 	}
 	@media (prefers-reduced-motion: reduce) {
 		transition: none;
@@ -61,9 +61,9 @@
 	min-height: 0px;
 	overflow-x: clip;
 	overflow-y: auto;
-	scroll-padding-block: var(--m-space-md);
+	scroll-padding-block: var(--m-sp-md);
 	position: relative;
-	padding: var(--m-space-xs);
+	padding: var(--m-sp-xs);
 
 	border-radius: inherit;
 }
@@ -76,9 +76,9 @@
 	cursor: pointer;
 	user-select: none;
 
-	padding: var(--m-action-padding);
-	padding-left: var(--m-space-lg);
-	gap: var(--m-space-sm);
+	padding: var(--m-action-p);
+	padding-left: var(--m-sp-lg);
+	gap: var(--m-sp-sm);
 
 	text-align: left;
 	font-size: var(--m-prose-secondary-size);
@@ -91,15 +91,15 @@
 	&[data-disabled],
 	&:disabled {
 		pointer-events: none;
-		@apply --mx-fg(var(--m-color-neutral-heavy));
-		@apply --mx-bg(var(--m-color-neutral-paper));
+		@apply --mx-fg(var(--m-gray-heavy));
+		@apply --mx-bg(var(--m-gray-paper));
 	}
 
 	&:hover,
 	&[data-highlighted],
 	&[data-state='checked'],
 	&:focus-visible {
-		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg(var(--m-gray-light));
 	}
 
 	&:focus {
@@ -109,18 +109,14 @@
 		--mx-ring-value: --fn-focus-ring();
 	}
 
-	border-radius: var(--m-radius-xs);
+	border-radius: var(--m-rd-xs);
 	&:first-child {
-		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));
+		border-top-left-radius: calc(var(--m-surface-rd) - var(--m-sp-xs));
+		border-top-right-radius: calc(var(--m-surface-rd) - var(--m-sp-xs));
 	}
 	&:last-child {
-		border-bottom-left-radius: calc(
-			var(--m-surface-radius) - var(--m-space-xs)
-		);
-		border-bottom-right-radius: calc(
-			var(--m-surface-radius) - var(--m-space-xs)
-		);
+		border-bottom-left-radius: calc(var(--m-surface-rd) - var(--m-sp-xs));
+		border-bottom-right-radius: calc(var(--m-surface-rd) - var(--m-sp-xs));
 	}
 }
 
@@ -129,8 +125,8 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-space-sm);
-	scroll-padding-block: var(--m-space-md);
+	gap: var(--m-sp-sm);
+	scroll-padding-block: var(--m-sp-md);
 }
 
 .itemIndicator {
@@ -142,26 +138,26 @@
 	align-items: center;
 	justify-content: center;
 	position: relative;
-	right: calc(-1 * var(--m-space-xs));
+	right: calc(-1 * var(--m-sp-xs));
 }
 
 .itemRightSlot {
 	margin-inline-start: auto;
-	padding-inline-start: var(--m-space-sm);
+	padding-inline-start: var(--m-sp-sm);
 }
 
 .arrow {
 	--size: 18px;
 	@apply --mx-fill(var(--mx-bg-ref, var(--m-global-trueLightColor)));
 	@apply --mx-stroke(var(--mx-borderColor-ref, var(--mx-fg-ref, var(--m-global-trueHeavyColor))));
-	stroke-width: var(--m-lineWidth);
+	stroke-width: var(--m-lw);
 	width: var(--size);
 	height: calc(var(--size) / 2);
 	position: relative;
 	--angle: 0deg;
 	--scale: 1;
 	transform: translate(0, 0) rotate(var(--angle, 0deg)) scale(var(--scale, 1));
-	transition: opacity var(--m-duration) var(--m-easing);
+	transition: opacity var(--m-dur) var(--m-ease);
 
 	&[data-side='top'] {
 		--angle: 0deg;
@@ -191,14 +187,14 @@
 }
 
 .separator {
-	margin: var(--m-space-xs);
-	height: var(--m-lineWidth-sm);
-	@apply --mx-bg(var(--m-color-neutral));
+	margin: var(--m-sp-xs);
+	height: var(--m-lw-sm);
+	@apply --mx-bg(var(--m-gray));
 }
 
 .groupLabel {
 	user-select: none;
-	@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);
@@ -208,8 +204,8 @@
 	box-sizing: border-box;
 	z-index: 1;
 	height: 1rem;
-	left: var(--m-space-md);
-	right: var(--m-space-md);
+	left: var(--m-sp-md);
+	right: var(--m-sp-md);
 	cursor: default;
 	user-select: none;
 	align-items: center;
@@ -253,7 +249,7 @@
 }
 
 .triggerIcon {
-	transition: transform var(--m-duration) var(--m-easing);
+	transition: transform var(--m-dur) var(--m-ease);
 	margin-inline-start: auto;
 	[data-open] > &,
 	[data-popup-open] > & {