@a-type/ui 6.0.81 → 6.1.0

package/dist/components/camera/Camera.module.css

@@ -20,22 +20,22 @@
 
 .shutterButton {
 	position: absolute;
-	bottom: var(--m-space-md);
+	bottom: var(--m-sp-md);
 	left: 50%;
 	width: calc(48px / var(--m-global-space-density));
 	height: calc(48px / var(--m-global-space-density));
 	cursor: pointer;
 	transform: translateX(-50%);
 	opacity: 80%;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	--mx-ring-value: --fn-ring(var(--m-action-secondary-bg), 2px);
 	@apply --mx-bg(var(--m-action-secondary-bg));
 	@apply --mx-fg(color-contrast(var(--mx-bg-ref)));
 	@apply --mx-borderColor(var(--mx-fg-ref));
-	border-width: var(--m-lineWidth);
-	border-radius: var(--m-action-radius);
+	border-width: var(--m-lw);
+	border-radius: var(--m-action-rd);
 
 	&:hover {
 		opacity: 100%;
@@ -48,19 +48,19 @@
 	}
 	&:focus-visible {
 		@apply --mx-bg-lighter(1);
-		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 4px);
+		--mx-ring-value: --fn-ring(var(--m-tint-ink), 4px);
 	}
 }
 
 .swapButton {
 	position: absolute;
-	bottom: var(--m-space-xs);
-	left: var(--m-space-xs);
+	bottom: var(--m-sp-xs);
+	left: var(--m-sp-xs);
 }
 
 .fullscreenButton {
 	position: absolute;
-	top: var(--m-space-xs);
-	right: var(--m-space-xs);
+	top: var(--m-sp-xs);
+	right: var(--m-sp-xs);
 }
 }

package/dist/components/card/Card.module.css

@@ -6,8 +6,8 @@
 	overflow: clip;
 
 	@apply --mx-shadow(var(--m-shadow-sm));
-	border-width: var(--m-lineWidth-sm);
-	border-radius: var(--m-surface-radius);
+	border-width: var(--m-lw-sm);
+	border-radius: var(--m-surface-rd);
 
 	font-size: var(--m-prose-secondary-size);
 	line-height: var(--m-prose-secondary-lineHeight);
@@ -41,18 +41,18 @@
 	flex-direction: column;
 	flex-grow: 1;
 	align-items: start;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 
 	text-align: start;
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: var(--m-prose-ambient-weight);
 
-	padding: var(--m-space-md);
-	padding-bottom: var(--m-space-xs);
-	gap: var(--m-space-sm);
+	padding: var(--m-sp-md);
+	padding-bottom: var(--m-sp-xs);
+	gap: var(--m-sp-sm);
 
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	/* Purposefully don't use mixin, allow children to inherit from card root */
@@ -68,8 +68,8 @@
 		&:hover,
 		&:focus-visible,
 		&[data-focus-visible] {
-			@apply --mx-fg(var(--m-color-neutral-ink));
-			background-color: --fn-color-faded(var(--m-color-neutral-ink), 10%);
+			@apply --mx-fg(var(--m-gray-ink));
+			background-color: --fn-color-faded(var(--m-gray-ink), 10%);
 		}
 
 		&:focus {
@@ -77,7 +77,7 @@
 		}
 		&:focus-visible,
 		&[data-focus-visible] {
-			@apply --mx-ring(inset 0 0 0 2px var(--m-color-neutral-ink));
+			@apply --mx-ring(inset 0 0 0 2px var(--m-gray-ink));
 		}
 
 		&:disabled,
@@ -89,7 +89,7 @@
 
 .title {
 	z-index: 1;
-	padding: var(--m-space-xs) var(--m-space-md);
+	padding: var(--m-sp-xs) var(--m-sp-md);
 
 	@apply --mx-prose-primary;
 
@@ -98,7 +98,7 @@
 	overflow: clip;
 	max-width: 100%;
 	display: block;
-	border-radius: var(--m-radius-md);
+	border-radius: var(--m-rd-md);
 
 	@apply --mx-bg(inherit);
 }
@@ -107,11 +107,11 @@
 	z-index: 1;
 	display: flex;
 	flex-direction: row;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 	align-items: center;
-	border-radius: var(--m-radius-sm);
+	border-radius: var(--m-rd-sm);
 
-	padding: var(--m-space-sm) var(--m-space-md);
+	padding: var(--m-sp-sm) var(--m-sp-md);
 
 	font-size: var(--m-prose-ambient-size);
 	line-height: 1;
@@ -147,22 +147,22 @@
 	display: flex;
 	flex-direction: row;
 	flex-shrink: 0;
-	padding: var(--m-space-md);
+	padding: var(--m-sp-md);
 }
 
 .actions {
 	display: flex;
 	flex-direction: row;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 	align-items: center;
 
 	margin: auto auto auto --fn-literal(0px);
 	padding: 0;
 
 	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
-	/* @apply --mx-borderColor(var(--m-surface-ambient-borderColor));
-	border-width: var(--m-lineWidth-sm); */
-	border-radius: var(--m-action-radius);
+	/* @apply --mx-borderColor(var(--m-surface-ambient-b-color));
+	border-width: var(--m-lw-sm); */
+	border-radius: var(--m-action-rd);
 }
 
 .menu {
@@ -174,11 +174,11 @@
 	flex-direction: row;
 	align-items: center;
 
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 
 	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
-	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
-	border-width: var(--m-lineWidth-sm);
-	border-radius: var(--m-action-radius);
+	@apply --mx-borderColor(var(--m-surface-ambient-b-color));
+	border-width: var(--m-lw-sm);
+	border-radius: var(--m-action-rd);
 }
 }

package/dist/components/card/Card.stories.js

@@ -29,7 +29,7 @@ export const Default = {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'stretch',
-            gap: 'var(--m-space-md)',
+            gap: 'var(--m-sp-md)',
         }, children: [_jsxs(CardRoot, Object.assign({}, args, { style: { minHeight: '20vh' }, children: [_jsx(CardImage, { render: _jsx("img", { src: "https://resources.biscuits.club/images/pashka.jpg" }) }), _jsxs(CardMain, { onClick: () => alert('clicked'), children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff you'd have on a card. Maybe a time?" }), _jsx(CardContent, { children: "More things, if you want." })] }), _jsxs(CardFooter, { children: [_jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { size: "small", color: "primary", children: _jsx(Icon, { name: "placeholder" }) })] }), _jsx(CardMenu, { children: _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "dots" }) }) })] })] })), _jsxs(CardRoot, Object.assign({}, args, { style: { maxWidth: 300 }, children: [_jsxs(CardMain, { onClick: () => alert('clicked'), children: [_jsx(CardTitle, { children: "Card Title which is very long and would normally wrap" }), _jsx(CardContent, { children: "Other stuff" }), _jsx(CardContent, { unstyled: true, children: "Styling optional" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }))] })),
 };
 export const Compact = {
@@ -74,7 +74,7 @@ export const CardsInBox = {
                 width: '100%',
                 display: 'flex',
                 flexDirection: 'row',
-                gap: 'var(--m-space-lg)',
+                gap: 'var(--m-sp-lg)',
             }, children: [_jsx("div", { style: { flex: 1 }, children: _jsxs(CardRoot, { children: [_jsxs(CardMain, { onClick: () => { }, children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", size: "small", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }) }), _jsxs(Box, { p: true, gap: true, col: true, grow: true, children: [_jsxs(CardRoot, { children: [_jsxs(CardMain, { onClick: () => { }, children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", size: "small", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }), _jsxs(CardRoot, { children: [_jsxs(CardMain, { onClick: () => { }, children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", size: "small", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })] })] }));
     },
 };

package/dist/components/card/Card.stories.js.map

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

package/dist/components/checkbox/Checkbox.module.css

@@ -22,13 +22,13 @@
 
 	cursor: pointer;
 
-	transition: var(--m-duration) var(--m-easing);
+	transition: var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	@apply --mx-bg(var(--m-control-bg));
-	@apply --mx-borderColor(var(--m-control-borderColor));
-	border-radius: var(--m-control-radius);
-	border-width: var(--m-lineWidth-md);
+	@apply --mx-borderColor(var(--m-control-b-color));
+	border-radius: var(--m-control-rd);
+	border-width: var(--m-lw-md);
 
 	&:focus {
 		outline: none;
@@ -50,12 +50,12 @@
 	&:disabled {
 		box-shadow: none;
 		@apply --mx-bg(transparent);
-		@apply --mx-borderColor(var(--m-color-neutral-light));
+		@apply --mx-borderColor(var(--m-gray-light));
 	}
 
 	&[data-checked] {
-		@apply --mx-bg(var(--m-color-main));
-		@apply --mx-borderColor(var(--m-color-main-ink));
+		@apply --mx-bg(var(--m-tint));
+		@apply --mx-borderColor(var(--m-tint-ink));
 
 		&[data-checked-mode='faded'] {
 			animation-name: checkbox-fade;
@@ -70,6 +70,6 @@
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	color: var(--m-color-main-ink);
+	color: var(--m-tint-ink);
 }
 }

package/dist/components/chip/Chip.module.css

@@ -1,15 +1,15 @@
 @layer components {.root {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--m-space-md);
+	gap: var(--m-sp-md);
 	white-space: nowrap;
 
-	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-bg(var(--m-gray-paper));
 	@apply --mx-fg(contrast-color(var(--mx-bg-ref)));
-	@apply --mx-borderColor(var(--m-color-main-heavy));
+	@apply --mx-borderColor(var(--m-tint-heavy));
 
-	border-width: var(--m-lineWidth-sm);
-	border-radius: var(--m-action-radius);
+	border-width: var(--m-lw-sm);
+	border-radius: var(--m-action-rd);
 
 	font-size: var(--m-prose-ambient-size);
 	line-height: normal;
@@ -17,17 +17,17 @@
 	font-family: var(--m-prose-ambient-font);
 
 	&& {
-		padding: var(--m-space-sm) var(--m-space-md);
+		padding: var(--m-sp-sm) var(--m-sp-md);
 	}
 
 	&[data-emphasis='primary'] {
-		@apply --mx-bg(var(--m-color-main-wash));
-		@apply --mx-borderColor(var(--m-color-main-heavy));
+		@apply --mx-bg(var(--m-tint-wash));
+		@apply --mx-borderColor(var(--m-tint-heavy));
 	}
 	&[data-emphasis='ambient'] {
 		@apply --mx-bg(transparent);
 		@apply --mx-borderColor(transparent);
-		@apply --mx-fg(var(--m-color-neutral-ink));
+		@apply --mx-fg(var(--m-gray-ink));
 	}
 }
 }

package/dist/components/collapsible/Collapsible.module.css

@@ -1,6 +1,6 @@
 @layer components {.root {
 	overflow: clip;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	&[data-horizontal],
 	&[data-both] {
@@ -29,7 +29,7 @@
 }
 
 .icon {
-	transition: transform var(--m-duration) var(--m-easing);
+	transition: transform var(--m-dur) var(--m-ease);
 	[data-panel-open] & {
 		transform: rotate(180deg);
 	}

package/dist/components/combobox/Combobox.module.css

@@ -4,8 +4,8 @@
 }
 
 .empty:not(:empty) {
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-space-sm);
+	@apply --mx-fg(var(--m-gray-heavy));
+	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);
@@ -15,14 +15,14 @@
 	display: flex;
 	flex-direction: column;
 	overflow: clip;
-	padding: var(--m-space-md);
-	gap: var(--m-space-xs);
+	padding: var(--m-sp-md);
+	gap: var(--m-sp-xs);
 }
 
 .groupItem {
 	@apply --mx-ring;
 	&[data-highlighted] {
-		@apply --mx-ring(--fn-ring(var(--m-color-main-mid), 2px));
+		@apply --mx-ring(--fn-ring(var(--m-tint-mid), 2px));
 	}
 }
 
@@ -30,14 +30,14 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .groupLabel {
 	text-transform: uppercase;
 	width: 100%;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding-inline: var(--m-space-xs);
+	@apply --mx-fg(var(--m-gray-heavy));
+	padding-inline: var(--m-sp-xs);
 	font-size: var(--m-prose-ambient-size);
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: var(--m-prose-ambient-weight);
@@ -48,7 +48,7 @@
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
-	transition: transform var(--m-duration) var(--m-easing);
+	transition: transform var(--m-dur) var(--m-ease);
 
 	&[data-open] {
 		transform: rotate(180deg);
@@ -60,17 +60,17 @@
 	flex-direction: row;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--m-space-xs);
-	padding-inline-start: var(--m-space-md);
+	gap: var(--m-sp-xs);
+	padding-inline-start: var(--m-sp-md);
 }
 
 .chipsList {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--m-space-xs);
-	padding-inline: var(--m-space-sm);
-	margin-inline-start: calc(-1 * var(--m-space-md));
+	gap: var(--m-sp-xs);
+	padding-inline: var(--m-sp-sm);
+	margin-inline-start: calc(-1 * var(--m-sp-md));
 
 	&:empty {
 		display: none;
@@ -90,7 +90,7 @@
 	flex-direction: row;
 	flex-grow: 1;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .chip {
@@ -98,8 +98,8 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	padding-inline: var(--m-space-sm);
-	gap: var(--m-space-xs);
+	padding-inline: var(--m-sp-sm);
+	gap: var(--m-sp-xs);
 }
 
 .chipRemove {
@@ -107,12 +107,12 @@
 	min-width: 0;
 	padding: 0;
 	line-height: 1;
-	margin-block: calc(-1 * var(--m-space-xs));
-	margin-inline-end: calc(-1 * var(--m-space-sm));
+	margin-block: calc(-1 * var(--m-sp-xs));
+	margin-inline-end: calc(-1 * var(--m-sp-sm));
 }
 
 .item[data-selected] {
-	@apply --mx-fg(var(--m-color-main-ink));
+	@apply --mx-fg(var(--m-tint-ink));
 	@apply --mx-bg-heavier(1);
 }
 
@@ -120,7 +120,7 @@
 	margin-inline-start: auto;
 	height: --fn-literal(10px);
 	width: --fn-literal(10px);
-	stroke-width: var(--m-lineWidth-lg);
+	stroke-width: var(--m-lw-lg);
 }
 
 .list {
@@ -145,7 +145,7 @@
 .row {
 	display: flex;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .multiValue {
@@ -153,19 +153,19 @@
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--m-space-xs);
+	gap: var(--m-sp-xs);
 }
 
 .clearAndCaret {
 	display: flex;
 	flex-shrink: 0;
 	align-items: center;
-	margin-right: calc(-1 * var(--m-control-padding-inline));
+	margin-right: calc(-1 * var(--m-control-p-inline));
 }
 
 .details {
 	@apply --mx-prose-ambient;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-space-md);
+	@apply --mx-fg(var(--m-gray-heavy));
+	padding: var(--m-sp-md);
 }
 }

package/dist/components/datePicker/Calendar.module.css

@@ -26,8 +26,8 @@
 	grid-template-columns: repeat(7, var(--day-size, 32px));
 	grid-auto-rows: var(--day-size, 32px);
 	overflow: hidden;
-	padding: var(--m-space-sm);
-	border-radius: var(--m-radius-sm);
+	padding: var(--m-sp-sm);
+	border-radius: var(--m-rd-sm);
 }
 
 .dayLabel {
@@ -35,7 +35,7 @@
 	align-items: center;
 	justify-content: center;
 	font-size: var(--m-prose-ambient-size);
-	@apply --mx-fg(var(--m-color-neutral-heavy));
+	@apply --mx-fg(var(--m-gray-heavy));
 }
 
 .calendarDay {
@@ -43,15 +43,15 @@
 	margin-bottom: --fn-literal(-1px);
 	margin-right: --fn-literal(-1px);
 
-	@apply --mx-fg(var(--m-color-neutral-ink));
-	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-fg(var(--m-gray-ink));
+	@apply --mx-bg(var(--m-gray-paper));
 	@apply --mx-borderColor(transparent);
 
 	display: flex;
 	cursor: pointer;
 	align-items: center;
 	justify-content: center;
-	transition: all var(--m-duration) var(--m-easing);
+	transition: all var(--m-dur) var(--m-ease);
 
 	@apply --mx-shadow;
 	--mx-shadow-value: var(--m-shadow-sm);
@@ -59,19 +59,19 @@
 	&[data-highlighted] {
 		z-index: 1;
 		outline: none;
-		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
+		--mx-ring-value: --fn-ring(var(--m-tint-heavy), 2px);
 	}
 
 	&[data-selected] {
 		z-index: 2;
-		@apply --mx-bg(var(--m-color-main));
-		border-radius: var(--m-radius-sm);
+		@apply --mx-bg(var(--m-tint));
+		border-radius: var(--m-rd-sm);
 	}
 
 	&[data-in-range] {
 		z-index: 1;
 		border-radius: 0;
-		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg(var(--m-tint-light));
 		--mx-shadow-value: 0 0 0 0 transparent;
 	}
 
@@ -88,66 +88,66 @@
 		top: --fn-literal(1px);
 		width: --fn-literal(6px);
 		height: --fn-literal(6px);
-		background-color: var(--m-color-palette-attention);
-		border-radius: var(--m-radius-lg);
-		border: 1px solid var(--m-color-neutral-ink);
+		background-color: var(--m-color-attention);
+		border-radius: var(--m-rd-lg);
+		border: 1px solid var(--m-gray-ink);
 	}
 
 	/* Calendar grid edge borders */
 	&[data-top-edge] {
-		border-top-color: var(--m-color-neutral);
+		border-top-color: var(--m-gray);
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
 	}
 	&[data-bottom-edge] {
-		border-bottom-color: var(--m-color-neutral);
+		border-bottom-color: var(--m-gray);
 		border-bottom-left-radius: 0;
 		border-bottom-right-radius: 0;
 	}
 	&[data-first-column] {
-		border-left-color: var(--m-color-neutral);
+		border-left-color: var(--m-gray);
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 	}
 	&[data-last-column] {
-		border-right-color: var(--m-color-neutral);
+		border-right-color: var(--m-gray);
 		border-top-right-radius: 0;
 		border-bottom-right-radius: 0;
 	}
 	&[data-day-first] {
-		border-left-color: var(--m-color-neutral);
-		border-top-left-radius: var(--m-radius-sm);
+		border-left-color: var(--m-gray);
+		border-top-left-radius: var(--m-rd-sm);
 	}
 	&[data-day-last] {
-		border-right-color: var(--m-color-neutral);
-		border-bottom-right-radius: var(--m-radius-sm);
+		border-right-color: var(--m-gray);
+		border-bottom-right-radius: var(--m-rd-sm);
 		border-top-right-radius: 0;
 	}
 	&[data-first-column][data-bottom-edge] {
-		border-bottom-left-radius: var(--m-radius-sm);
+		border-bottom-left-radius: var(--m-rd-sm);
 	}
 	&[data-last-column][data-bottom-edge] {
-		border-bottom-right-radius: var(--m-radius-sm);
+		border-bottom-right-radius: var(--m-rd-sm);
 	}
 	&[data-first-column][data-top-edge] {
-		border-top-left-radius: var(--m-radius-sm);
+		border-top-left-radius: var(--m-rd-sm);
 	}
 	&[data-last-column][data-top-edge] {
-		border-top-right-radius: var(--m-radius-sm);
+		border-top-right-radius: var(--m-rd-sm);
 	}
 
 	&[data-range-end] {
 		z-index: 1;
-		@apply --mx-bg(var(--m-color-main));
-		border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
+		@apply --mx-bg(var(--m-tint));
+		border-radius: 0 var(--m-rd-sm) var(--m-rd-sm) 0;
 		--mx-shadow-value: 0 0 0 0 transparent;
 	}
 
 	&[data-range-start] {
 		z-index: 1;
-		@apply --mx-bg(var(--m-color-main));
+		@apply --mx-bg(var(--m-tint));
 		/* tl tr br bl */
-		border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm);
+		border-radius: var(--m-rd-sm) 0 0 var(--m-rd-sm);
 	}
 
 	&[data-different-month] {
@@ -157,12 +157,12 @@
 	&:hover {
 		z-index: 100;
 		outline: none;
-		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
+		--mx-ring-value: --fn-ring(var(--m-tint-heavy), 2px);
 	}
 
 	&:active {
-		@apply --mx-bg(var(--m-color-main-light));
-		border-radius: var(--m-radius-sm);
+		@apply --mx-bg(var(--m-tint-light));
+		border-radius: var(--m-rd-sm);
 	}
 }
 }

package/dist/components/datePicker/dateRangePicker.module.css

@@ -10,7 +10,7 @@
 		'prevMonth leftMonth nextMonth'
 		'leftGrid leftGrid leftGrid';
 	grid-template-rows: auto 1fr;
-	gap: var(--m-space-sm);
+	gap: var(--m-sp-sm);
 
 	@media (min-width: 640px) {
 		grid-template-columns: auto 1fr 1fr auto;