@a-type/ui 6.0.81 → 6.1.1

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

@@ -3,20 +3,20 @@
 
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	row-gap: var(--m-space-xs);
-	column-gap: var(--m-space-md);
+	row-gap: var(--m-sp-xs);
+	column-gap: var(--m-sp-md);
 	align-items: center;
 	box-sizing: border-box;
 }
 
 .indicator {
 	width: 100%;
-	transition: transform var(--m-duration) var(--m-easing);
-	border-radius: var(--m-radius);
-	@apply --mx-bg(var(--m-color-main));
+	transition: transform var(--m-dur) var(--m-ease);
+	border-radius: var(--m-rd);
+	@apply --mx-bg(var(--m-tint));
 
 	&[data-complete] {
-		@apply --mx-bg(var(--m-color-palette-success));
+		@apply --mx-bg(var(--m-color-success));
 	}
 }
 
@@ -29,15 +29,15 @@
 	grid-column-end: 3;
 	box-sizing: border-box;
 
-	border-radius: var(--m-radius-lg);
-	@apply --mx-bg(var(--m-color-neutral-paper));
-	@apply --mx-borderColor(var(--m-color-neutral-ink));
+	border-radius: var(--m-rd-lg);
+	@apply --mx-bg(var(--m-gray-paper));
+	@apply --mx-borderColor(var(--m-gray-ink));
 }
 
 .label {
 	grid-column-start: 1;
 	grid-row-start: 1;
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: var(--m-prose-ambient-weight);
@@ -47,7 +47,7 @@
 	grid-column-start: 2;
 	grid-row-start: 1;
 	justify-self: end;
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: 500;

package/dist/components/provider/Provider.js

@@ -17,7 +17,7 @@ export function Provider({ children, disableParticles, disableViewportOffset, vi
         ? virtualKeyboardBehavior
         : 'displace';
     useVirtualKeyboardBehavior(supportedVirtualKeyboardBehavior);
-    useThemedTitleBar('--m-color-main-paper', disableTitleBarColor);
+    useThemedTitleBar('--m-tint-paper', disableTitleBarColor);
     const otherStuff = (_jsxs(_Fragment, { children: [_jsx(IconSpritesheet, {}), _jsx(Toaster, {}), manifestPath === false ? null : (_jsx(PwaInstall, { manifestPath: manifestPath }))] }));
     if (disableParticles)
         return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsx(DefaultToastProvider, { children: _jsxs(TooltipProvider, { children: [children, otherStuff] }) }) }));

package/dist/components/provider/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EACN,iBAAiB,EACjB,+BAA+B,EAC/B,uBAAuB,GACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,EACpB,YAAY,GACG;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,+BAA+B,EAAE,CAAC;IAClC,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,sBAAsB,EAAE,oBAAoB,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,CAClB,8BACC,KAAC,eAAe,KAAG,EACnB,KAAC,OAAO,KAAG,EACV,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,GAAI,CAC1C,IACC,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,MAAC,eAAe,eACd,QAAQ,EACR,UAAU,IACM,GACI,GACC,CACzB,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,KAAC,eAAe,cACf,MAAC,aAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACI,GACC,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,SAAS;IACxB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC"}
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EACN,iBAAiB,EACjB,+BAA+B,EAC/B,uBAAuB,GACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,EACpB,YAAY,GACG;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,+BAA+B,EAAE,CAAC;IAClC,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,gBAAgB,EAAE,oBAAoB,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,CAClB,8BACC,KAAC,eAAe,KAAG,EACnB,KAAC,OAAO,KAAG,EACV,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,GAAI,CAC1C,IACC,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,MAAC,eAAe,eACd,QAAQ,EACR,UAAU,IACM,GACI,GACC,CACzB,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,KAAC,eAAe,cACf,MAAC,aAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACI,GACC,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,SAAS;IACxB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC"}

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

@@ -1,24 +1,24 @@
 @layer components {.dialogContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .dialogTitle {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 }
 
 .appIcon {
 	display: inline-block;
 	height: 1em;
 	width: 1em;
-	border-radius: var(--m-radius);
+	border-radius: var(--m-rd);
 }
 
 .appDescription {
-	margin-bottom: var(--m-space-sm);
+	margin-bottom: var(--m-sp-sm);
 }
 }

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

@@ -1,14 +1,14 @@
 @layer components {.trigger {
 	position: relative;
 	justify-content: center;
-	padding: var(--m-space-xs);
-	border-radius: var(--m-action-radius);
+	padding: var(--m-sp-xs);
+	border-radius: var(--m-action-rd);
 }
 
 .popup {
 	transition-property: all;
-	transition-duration: var(--m-duration);
-	transition-timing-function: var(--m-easing-loose);
+	transition-duration: var(--m-dur);
+	transition-timing-function: var(--m-ease-loose);
 
 	position: fixed;
 	contain: layout;

package/dist/components/richEditor/richEditor.module.css

@@ -18,14 +18,14 @@
 	& h1 {
 		@apply --mx-prose-primary;
 		&:not(:first-child) {
-			margin-top: var(--m-space-xl);
+			margin-top: var(--m-sp-xl);
 		}
 	}
 	& h2 {
 		@apply --mx-prose-secondary;
 		font-weight: var(--m-prose-primary-weight);
 		&:not(:first-child) {
-			margin-top: var(--m-space-lg);
+			margin-top: var(--m-sp-lg);
 		}
 	}
 	& h3 {
@@ -33,19 +33,19 @@
 		font-weight: var(--m-prose-primary-weight);
 		text-transform: uppercase;
 		&:not(:first-child) {
-			margin-top: var(--m-space-md);
+			margin-top: var(--m-sp-md);
 		}
 	}
 	& h4 {
 		@apply --mx-prose-ambient;
 		font-weight: var(--m-prose-primary-weight);
 		&:not(:first-child) {
-			margin-top: var(--m-space-md);
+			margin-top: var(--m-sp-md);
 		}
 	}
 	& p {
 		@apply --mx-prose-secondary;
-		margin-bottom: var(--m-space-md);
+		margin-bottom: var(--m-sp-md);
 	}
 	& a {
 		text-decoration: underline;
@@ -55,13 +55,13 @@
 		@apply --mx-focus;
 	}
 	& blockquote {
-		border-left: 4px solid var(--m-color-neutral-heavy);
-		padding-left: var(--m-space-md);
+		border-left: 4px solid var(--m-gray-heavy);
+		padding-left: var(--m-sp-md);
 		font-style: italic;
-		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));
+		margin-block: var(--m-sp-md);
+		margin-inline-start: var(--m-sp-md);
+		padding-inline: var(--m-sp-md);
+		@apply --mx-bg(var(--m-gray-wash));
 	}
 	& ul {
 		list-style: disc;
@@ -71,25 +71,25 @@
 	}
 	& ul,
 	& ol {
-		padding-inline-start: var(--m-space-lg);
-		margin-block: var(--m-space-md);
+		padding-inline-start: var(--m-sp-lg);
+		margin-block: var(--m-sp-md);
 	}
 	& li {
-		margin-block-end: var(--m-space-xs);
+		margin-block-end: var(--m-sp-xs);
 	}
 	& mark {
-		@apply --mx-bg(var(--m-color-main-wash));
+		@apply --mx-bg(var(--m-tint-wash));
 	}
 	& strong {
-		font-weight: var(--m-text-weight-bold);
+		font-weight: var(--m-fw-bold);
 	}
 	& em {
 		font-style: italic;
 	}
 	& hr {
 		border: none;
-		border-top: var(--m-lineWidth) solid var(--m-color-neutral-heavy);
-		margin-block: var(--m-space-lg);
+		border-top: var(--m-lw) solid var(--m-gray-heavy);
+		margin-block: var(--m-sp-lg);
 	}
 }
 

package/dist/components/scrollArea/ScrollArea.module.css

@@ -15,7 +15,7 @@
 		outline: none;
 	}
 	&:focus-visible {
-		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+		--mx-ring-value: --fn-ring(var(--m-tint-ink), 1px);
 	}
 }
 
@@ -37,7 +37,7 @@
 		display: block;
 		height: min(40px, var(--scroll-area-overflow-y-start, 40px));
 		width: 100%;
-		transition: height var(--m-duration) var(--m-easing);
+		transition: height var(--m-dur) var(--m-ease);
 
 		background: linear-gradient(
 			to bottom,
@@ -56,7 +56,7 @@
 		display: block;
 		height: min(40px, var(--scroll-area-overflow-y-end, 40px));
 		width: 100%;
-		transition: height var(--m-duration) var(--m-easing);
+		transition: height var(--m-dur) var(--m-ease);
 
 		background: linear-gradient(to top, var(--mx-bg-ref) 0%, transparent 100%);
 	}
@@ -80,7 +80,7 @@
 		display: block;
 		height: 100%;
 		width: min(40px, var(--scroll-area-overflow-x-start, 40px));
-		transition: width var(--m-duration) var(--m-easing);
+		transition: width var(--m-dur) var(--m-ease);
 
 		background: linear-gradient(
 			to right,
@@ -99,7 +99,7 @@
 		display: block;
 		height: 100%;
 		width: min(40px, var(--scroll-area-overflow-x-end, 40px));
-		transition: width var(--m-duration) var(--m-easing);
+		transition: width var(--m-dur) var(--m-ease);
 
 		background: linear-gradient(to left, var(--mx-bg-ref) 0%, transparent 100%);
 	}
@@ -118,7 +118,7 @@
 .thumb {
 	@apply --mx-bg(var(--mx-fg-ref));
 	@apply --mx-bg-faded(25%);
-	border-radius: var(--m-radius-full);
+	border-radius: var(--m-rd-full);
 
 	&[data-orientation='vertical'] {
 		width: 100%;
@@ -135,12 +135,12 @@
 	display: flex;
 	user-select: none;
 	opacity: 0;
-	border-radius: var(--m-radius-full);
+	border-radius: var(--m-rd-full);
 	touch-action: none;
 	transition:
 		opacity,
 		height,
-		width var(--m-duration) var(--m-easing);
+		width var(--m-dur) var(--m-ease);
 
 	@apply --mx-bg(var(--mx-fg-ref));
 	@apply --mx-bg-faded(5%);

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

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

package/dist/components/skeletons/skeletons.module.css

@@ -12,7 +12,7 @@
 	display: inline-block;
 	height: 100%;
 	max-width: 100%;
-	border-radius: var(--m-radius-md);
+	border-radius: var(--m-rd-md);
 	width: 100%;
 	flex-shrink: 0;
 	opacity: 20%;
@@ -20,14 +20,14 @@
 	animation-name: skeleton;
 	animation-duration: 1.5s;
 	animation-iteration-count: infinite;
-	animation-timing-function: var(--m-easing);
+	animation-timing-function: var(--m-ease);
 	animation-direction: alternate;
 	animation-play-state: running;
 
 	background-image: linear-gradient(
 		to right,
 		transparent 0%,
-		var(--mx-fg-ref, var(--m-color-main-ink)) 50%,
+		var(--mx-fg-ref, var(--m-tint-ink)) 50%,
 		transparent 100%
 	);
 }

package/dist/components/slider/Slider.module.css

@@ -30,12 +30,12 @@
 	height: var(--size);
 	flex-grow: 1;
 	user-select: none;
-	transition: background-color var(--m-duration) var(--m-easing);
+	transition: background-color var(--m-dur) var(--m-ease);
 	box-sizing: border-box;
 
 	@apply --mx-bg(transparent);
-	border-radius: var(--m-radius-lg);
-	@apply --mx-ring(--fn-ring(var(--m-color-neutral-ink), 1px));
+	border-radius: var(--m-rd-lg);
+	@apply --mx-ring(--fn-ring(var(--m-gray-ink), 1px));
 
 	&[data-orientation='vertical'] {
 		height: 100%;
@@ -46,9 +46,9 @@
 
 .range {
 	box-sizing: border-box;
-	transition: background-color var(--m-duration) var(--m-easing);
-	@apply --mx-bg(var(--m-color-main));
-	border-radius: var(--m-radius-lg);
+	transition: background-color var(--m-dur) var(--m-ease);
+	@apply --mx-bg(var(--m-tint));
+	border-radius: var(--m-rd-lg);
 }
 
 .thumb {
@@ -63,24 +63,24 @@
 	line-height: 1;
 	touch-action: none;
 	transition:
-		background-color var(--m-duration) var(--m-easing),
-		box-shadow var(--m-duration) var(--m-easing);
+		background-color var(--m-dur) var(--m-ease),
+		box-shadow var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	--mx-shadow-value: var(--m-shadow-sm);
 
-	@apply --mx-borderColor(var(--m-color-neutral-ink));
-	border-width: var(--m-lineWidth-md);
+	@apply --mx-borderColor(var(--m-gray-ink));
+	border-width: var(--m-lw-md);
 
 	@apply --mx-bg(var(--m-control-bg));
-	border-radius: var(--m-control-radius);
+	border-radius: var(--m-control-rd);
 
 	&:hover {
 		--mx-shadow-value: var(--m-shadow-md);
 	}
 
 	&:active {
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		--mx-shadow-value: var(--m-shadow-lg);
 		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
 	}
@@ -90,7 +90,7 @@
 	}
 
 	&:focus-visible {
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		--mx-shadow-value: var(--m-shadow-lg);
 		--mx-ring-value: --fn-focus-ring();
 	}

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

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

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

@@ -9,17 +9,17 @@
 	appearance: none;
 	padding: --fn-literal(3px);
 
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	--mx-shadow-value: inset var(--m-shadow-sm);
 
 	@apply --mx-bg(var(--m-control-bg));
-	@apply --mx-borderColor(var(--m-control-borderColor));
-	border-radius: var(--m-radius-lg);
+	@apply --mx-borderColor(var(--m-control-b-color));
+	border-radius: var(--m-rd-lg);
 
 	&[data-checked] {
-		@apply --mx-bg(var(--m-color-main));
+		@apply --mx-bg(var(--m-tint));
 	}
 
 	@apply --mx-hover;
@@ -32,14 +32,14 @@
 	display: block;
 	aspect-ratio: 1/1;
 	height: 100%;
-	transition: transform var(--m-duration) var(--m-easing);
+	transition: transform var(--m-dur) var(--m-ease);
 	will-change: transform;
 
 	@apply --mx-shadow(var(--m-shadow-sm));
 
-	@apply --mx-bg(var(--m-color-neutral-paper));
-	@apply --mx-borderColor(var(--m-control-border));
-	border-radius: var(--m-radius-lg);
+	@apply --mx-bg(var(--m-gray-paper));
+	@apply --mx-borderColor(var(--m-control-b));
+	border-radius: var(--m-rd-lg);
 
 	position: relative;
 
@@ -57,7 +57,7 @@
 		align-items: center;
 		justify-content: center;
 		content: '✓';
-		color: var(--m-color-main-ink);
+		color: var(--m-tint-ink);
 		font-size: var(--m-prose-ambient-size);
 	}
 }

package/dist/components/tabs/tabs.module.css

@@ -3,7 +3,7 @@
 	display: flex;
 	flex-direction: row;
 	align-items: flex-start;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .trigger {
@@ -13,17 +13,17 @@
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
-	gap: var(--m-space-xs);
-	padding: var(--m-action-padding);
+	gap: var(--m-sp-xs);
+	padding: var(--m-action-p);
 
 	cursor: pointer;
 	user-select: none;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	text-align: center;
 	white-space: nowrap;
 
-	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-fg(var(--m-gray-ink));
 	font-size: var(--m-prose-secondary-size);
 	font-weight: var(--m-prose-secondary-weight);
 	line-height: 1;
@@ -36,11 +36,11 @@
 	flex-shrink: 0;
 
 	background: transparent;
-	border: var(--m-lineWidth-sm) solid transparent;
-	border-radius: var(--m-radius-lg);
+	border: var(--m-lw-sm) solid transparent;
+	border-radius: var(--m-rd-lg);
 
 	&[aria-selected='false']:hover {
-		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg(var(--m-gray-light));
 		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
 	}
 
@@ -49,7 +49,7 @@
 	}
 
 	&:focus-visible {
-		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg(var(--m-gray-light));
 		--mx-ring-value: --fn-focus-ring();
 		outline: none;
 	}
@@ -68,8 +68,8 @@
 	height: 100%;
 	width: var(--active-tab-width);
 	transition-property: transform, width, color;
-	transition-duration: var(--m-duration);
-	transition-timing-function: var(--m-easing);
+	transition-duration: var(--m-dur);
+	transition-timing-function: var(--m-ease);
 	transform: translateX(
 			calc(
 				var(--active-tab-left, 0px) + var(--scroll-area-overflow-x-start, 0px)
@@ -99,13 +99,13 @@
 	@apply --mx-shadow(var(--m-shadow-sm));
 	@apply --mx-surface-ambient;
 	padding: 0;
-	border-radius: var(--m-radius-lg);
+	border-radius: var(--m-rd-lg);
 }
 
 .moreLeftIcon {
 	pointer-events: none;
 	position: absolute;
-	left: var(--m-space-xs);
+	left: var(--m-sp-xs);
 	top: 50%;
 	z-index: 10;
 	height: --fn-literal(16px);
@@ -117,13 +117,13 @@
 		round(min(1, calc(var(--scroll-area-overflow-x-start, 0px) / 10px)))
 	);
 
-	@apply --mx-fg(--fn-color-faded(var(--m-color-neutral-heavy), 50%));
+	@apply --mx-fg(--fn-color-faded(var(--m-gray-heavy), 50%));
 }
 
 .moreRightIcon {
 	pointer-events: none;
 	position: absolute;
-	right: var(--m-space-xs);
+	right: var(--m-sp-xs);
 	top: 50%;
 	z-index: 10;
 	height: --fn-literal(16px);
@@ -135,6 +135,6 @@
 		round(min(1, calc(var(--scroll-area-overflow-x-end, 0px) / 10px)))
 	);
 
-	@apply --mx-fg(--fn-color-faded(var(--m-color-neutral-heavy), 50%));
+	@apply --mx-fg(--fn-color-faded(var(--m-gray-heavy), 50%));
 }
 }

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

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