@a-type/ui 4.1.8 → 5.0.1

package/src/uno/rules/color.ts

@@ -1,6 +1,7 @@
-import { parseColor } from '@unocss/preset-mini';
-import { Rule } from 'unocss';
+import { parseColor } from '@unocss/preset-mini/utils';
+import { Rule, symbols } from 'unocss';
 import { darken, lighten } from '../logic/color.js';
+import { PROPS } from '../logic/properties.js';
 
 export const colorRules: Rule[] = [
 	[
@@ -8,8 +9,8 @@ export const colorRules: Rule[] = [
 		(match, { theme }) => {
 			if (match[1] === 'inherit') {
 				return {
-					color: 'var(--v-color-altered,var(--v-color))',
-					'--v-color': 'unset',
+					color: `var(${PROPS.COLOR.FINAL},var(${PROPS.COLOR.INHERITED}))`,
+					[PROPS.COLOR.INHERITED]: 'unset',
 				};
 			}
 			const parsed = parseColor(match[1], theme);
@@ -18,24 +19,39 @@ export const colorRules: Rule[] = [
 			}
 			return {
 				color: parsed.opacity
-					? 'rgb(from var(--v-color-altered,var(--v-color)) r g b / var(--v-color-opacity,100%))'
-					: 'var(--v-color-altered,var(--v-color))',
-				'--v-color': parsed.color,
-				'--v-color-opacity': (parsed.opacity || 100) + '%',
+					? `rgb(from var(${PROPS.COLOR.FINAL},var(${PROPS.COLOR.INHERITED})) r g b / var(${PROPS.COLOR.OPACITY},100%))`
+					: `var(${PROPS.COLOR.FINAL},var(${PROPS.COLOR.INHERITED}))`,
+				[PROPS.COLOR.INHERITED]: parsed.color,
+				[PROPS.COLOR.OPACITY]: (parsed.opacity || 100) + '%',
 			};
 		},
+		{
+			autocomplete: `color-$colors`,
+		},
 	],
 	[
-		/^color-lighten-(\d+\.?\d*)$/,
+		/^color-l(?:ighten)?-(\d+\.?\d*)$/,
 		(match) => ({
-			'--v-color-altered': lighten('var(--v-color,currentColor)', match[1]),
+			[PROPS.COLOR.FINAL]: lighten(
+				`var(${PROPS.COLOR.INHERITED},currentColor)`,
+				match[1],
+			),
 		}),
+		{
+			autocomplete: 'color-(l|lighten)-<number>',
+		},
 	],
 	[
-		/^color-darken-(\d+\.?\d*)$/,
+		/^color-d(?:arken)?-(\d+\.?\d*)$/,
 		(match) => ({
-			'--v-color-altered': darken('var(--v-color,currentColor)', match[1]),
+			[PROPS.COLOR.FINAL]: darken(
+				`var(${PROPS.COLOR.INHERITED},currentColor)`,
+				match[1],
+			),
 		}),
+		{
+			autocomplete: 'color-(d|darken)-<number>',
+		},
 	],
 	[
 		/^bg-(.*)$/,
@@ -43,15 +59,14 @@ export const colorRules: Rule[] = [
 			const { theme } = ctx;
 			if (match[1] === 'inherit') {
 				return {
-					'background-color':
-						'rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%))',
-					'--v-bg': 'unset',
+					'background-color': `rgb(from var(${PROPS.BACKGROUND_COLOR.FINAL},var(${PROPS.BACKGROUND_COLOR.INHERITED})) r g b / var(${PROPS.BACKGROUND_COLOR.OPACITY},100%))`,
+					[PROPS.BACKGROUND_COLOR.INHERITED]: 'unset',
 				};
 			}
 			if (match[1] === 'transparent') {
 				return {
 					'background-color': 'transparent',
-					'--v-bg': 'unset',
+					[PROPS.BACKGROUND_COLOR.INHERITED]: 'unset',
 				};
 			}
 			const parsed = parseColor(match[1], theme);
@@ -61,10 +76,10 @@ export const colorRules: Rule[] = [
 
 			const base = {
 				'background-color': parsed.opacity
-					? 'rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%))'
-					: 'var(--v-bg-altered,var(--v-bg))',
-				['--v-bg']: parsed.color,
-				['--v-bg-opacity']: (parsed.opacity || 100) + '%',
+					? `rgb(from var(${PROPS.BACKGROUND_COLOR.FINAL},var(${PROPS.BACKGROUND_COLOR.INHERITED})) r g b / var(${PROPS.BACKGROUND_COLOR.OPACITY},100%))`
+					: `var(${PROPS.BACKGROUND_COLOR.FINAL},var(${PROPS.BACKGROUND_COLOR.INHERITED}))`,
+				[PROPS.BACKGROUND_COLOR.INHERITED]: parsed.color,
+				[PROPS.BACKGROUND_COLOR.OPACITY]: (parsed.opacity || 100) + '%',
 			};
 
 			return base;
@@ -74,20 +89,32 @@ export const colorRules: Rule[] = [
 		},
 	],
 	[
-		/^bg-lighten-(\d+\.?\d*)$/,
+		/^bg-l(?:ighten)?-(\d+\.?\d*)$/,
 		(match) => ({
-			'--v-bg-altered': lighten('var(--v-bg,var(--mode-white))', match[1]),
+			[PROPS.BACKGROUND_COLOR.FINAL]: lighten(
+				`var(${PROPS.BACKGROUND_COLOR.INHERITED},var(${PROPS.MODE.WHITE}))`,
+				match[1],
+			),
 		}),
+		{
+			autocomplete: 'bg-(l|lighten)-<number>',
+		},
 	],
 	[
-		/^bg-darken-(\d+\.?\d*)$/,
+		/^bg-d(?:arken)?-(\d+\.?\d*)$/,
 		(match) => ({
-			'--v-bg-altered': darken('var(--v-bg,var(--mode-white))', match[1]),
+			[PROPS.BACKGROUND_COLOR.FINAL]: darken(
+				`var(${PROPS.BACKGROUND_COLOR.INHERITED},var(${PROPS.MODE.WHITE}))`,
+				match[1],
+			),
 		}),
+		{
+			autocomplete: 'bg-(d|darken)-<number>',
+		},
 	],
 	[
-		/^border-(.*)$/,
-		(match, { theme }) => {
+		/^(?:border|b)-(.*)$/,
+		function* (match, { theme, symbols }) {
 			if (match[1] === 'none') {
 				return undefined;
 			}
@@ -96,79 +123,109 @@ export const colorRules: Rule[] = [
 				return undefined;
 			}
 			const thisColor = parsed.opacity
-				? 'rgb(from var(--v-border-altered,var(--v-border)) r g b / var(--v-border-opacity,100%))'
-				: 'var(--v-border-altered,var(--v-border))';
-			return {
-				'border-right-color': directionalBorderFallback('r', thisColor),
-				'border-bottom-color': directionalBorderFallback('b', thisColor),
-				'border-left-color': directionalBorderFallback('l', thisColor),
-				'border-top-color': directionalBorderFallback('t', thisColor),
-				'--v-border': parsed.color,
-				'--v-border-opacity': (parsed.opacity || 100) + '%',
+				? `rgb(from var(${PROPS.BORDER_COLOR.ALL.FINAL},var(${PROPS.BORDER_COLOR.ALL.INHERITED})) r g b / var(${PROPS.BORDER_COLOR.ALL.OPACITY},100%))`
+				: `var(${PROPS.BORDER_COLOR.ALL.FINAL},var(${PROPS.BORDER_COLOR.ALL.INHERITED}))`;
+			yield {
+				[symbols.selector]: (selector) => `:where(${selector})`,
+				[PROPS.BORDER_COLOR.RIGHT
+					.INHERITED]: `var(${PROPS.BORDER_COLOR.RIGHT.FINAL},var(${PROPS.BORDER_COLOR.RIGHT.INHERITED},${thisColor}))`,
+				'border-right-color': `var(${PROPS.BORDER_COLOR.RIGHT.FINAL},var(${PROPS.BORDER_COLOR.RIGHT.INHERITED},${thisColor}))`,
+				[PROPS.BORDER_COLOR.LEFT
+					.INHERITED]: `var(${PROPS.BORDER_COLOR.LEFT.FINAL},var(${PROPS.BORDER_COLOR.LEFT.INHERITED},${thisColor}))`,
+				'border-left-color': `var(${PROPS.BORDER_COLOR.LEFT.FINAL},var(${PROPS.BORDER_COLOR.LEFT.INHERITED},${thisColor}))`,
+				[PROPS.BORDER_COLOR.TOP
+					.INHERITED]: `var(${PROPS.BORDER_COLOR.TOP.FINAL},var(${PROPS.BORDER_COLOR.TOP.INHERITED},${thisColor}))`,
+				'border-top-color': `var(${PROPS.BORDER_COLOR.TOP.FINAL},var(${PROPS.BORDER_COLOR.TOP.INHERITED},${thisColor}))`,
+				[PROPS.BORDER_COLOR.BOTTOM
+					.INHERITED]: `var(${PROPS.BORDER_COLOR.BOTTOM.FINAL},var(${PROPS.BORDER_COLOR.BOTTOM.INHERITED},${thisColor}))`,
+				'border-bottom-color': `var(${PROPS.BORDER_COLOR.BOTTOM.FINAL},var(${PROPS.BORDER_COLOR.BOTTOM.INHERITED},${thisColor}))`,
+			};
+			yield {
+				[PROPS.BORDER_COLOR.ALL.INHERITED]: parsed.color,
+				[PROPS.BORDER_COLOR.ALL.OPACITY]: (parsed.opacity || 100) + '%',
 			};
 		},
+		{
+			autocomplete: `(border|b)-$colors`,
+		},
 	],
 	[
-		/^border-lighten-(\d+\.?\d*)$/,
+		/^(?:border|b)-l(?:ighten)?-(\d+\.?\d*)$/,
 		(match) => ({
-			'--v-border-altered': lighten('var(--v-border,currentColor)', match[1]),
+			[PROPS.BORDER_COLOR.ALL.FINAL]: lighten(
+				`var(${PROPS.BORDER_COLOR.ALL.INHERITED},currentColor)`,
+				match[1],
+			),
 		}),
 		{
-			autocomplete: 'border-lighten-<number>',
+			autocomplete: '(border|b)-l(?:ighten)?-<number>',
 		},
 	],
 	[
-		/^border-darken-(\d+\.?\d*)$/,
+		/^(?:border|b)-d(?:arken)?-(\d+\.?\d*)$/,
 		(match) => ({
-			'--v-border-altered': darken('var(--v-border,currentColor)', match[1]),
+			[PROPS.BORDER_COLOR.ALL.FINAL]: darken(
+				`var(${PROPS.BORDER_COLOR.ALL.INHERITED},currentColor)`,
+				match[1],
+			),
 		}),
 		{
-			autocomplete: 'border-darken-<number>',
+			autocomplete: '(border|b)-(d|darken)-<number>',
 		},
 	],
-	...['r', 'l', 't', 'b'].flatMap(
-		(dir) =>
+	...(<const>['RIGHT', 'LEFT', 'TOP', 'BOTTOM']).flatMap((DIR) => {
+		const shorthand = DIR[0].toLowerCase();
+		return [
+			[
+				new RegExp(`^(?:border-|b-)${shorthand}-(.*)$`),
+				(match, { theme }) => {
+					if (match[1] === 'none') {
+						return undefined;
+					}
+					const parsed = parseColor(match[1], theme);
+					if (!parsed?.color) {
+						return undefined;
+					}
+					const thisColor = parsed.opacity
+						? `rgb(from var(${PROPS.BORDER_COLOR[DIR].FINAL},var(${PROPS.BORDER_COLOR[DIR].INHERITED})) r g b / var(${PROPS.BORDER_COLOR[DIR].OPACITY},100%))`
+						: `var(${PROPS.BORDER_COLOR[DIR].FINAL},var(${PROPS.BORDER_COLOR[DIR].INHERITED}))`;
+					return {
+						[`border-${dirnames[DIR]}-color`]: thisColor,
+						[`${PROPS.BORDER_COLOR[DIR].INHERITED}`]: parsed.color,
+						[`${PROPS.BORDER_COLOR[DIR].OPACITY}`]:
+							(parsed.opacity || 100) + '%',
+					};
+				},
+				{
+					autocomplete: `b-${shorthand}-$colors`,
+				},
+			],
 			[
-				[
-					new RegExp(`^border-${dir}-(.*)$`),
-					(match, { theme }) => {
-						if (match[1] === 'none') {
-							return undefined;
-						}
-						const parsed = parseColor(match[1], theme);
-						if (!parsed?.color) {
-							return undefined;
-						}
-						const thisColor = parsed.opacity
-							? `rgb(from var(--v-border-${dir}-altered,var(--v-border-${dir})) r g b / var(--v-border-${dir}-opacity,100%))`
-							: `var(--v-border-${dir}-altered,var(--v-border-${dir}))`;
-						return {
-							[`border-${dirnames[dir]}-color`]: thisColor,
-							[`--v-border-${dir}`]: parsed.color,
-							[`--v-border-${dir}-opacity`]: (parsed.opacity || 100) + '%',
-						};
-					},
-				],
-				[
-					new RegExp(`^border-${dir}-lighten-(\\d+\\.?\\d*)$`),
-					(match) => ({
-						[`--v-border-${dir}-altered`]: lighten(
-							`var(--v-border-${dir},currentColor)`,
-							match[1],
-						),
-					}),
-				],
-				[
-					new RegExp(`^border-${dir}-darken-(\\d+\\.?\\d*)$`),
-					(match) => ({
-						[`--v-border-${dir}-altered`]: darken(
-							`var(--v-border-${dir},currentColor)`,
-							match[1],
-						),
-					}),
-				],
-			] as Rule[],
-	),
+				new RegExp(`^(?:border|b)-${shorthand}-l(?:ighten)?-(\\d+\\.?\\d*)$`),
+				(match) => ({
+					[`${PROPS.BORDER_COLOR[DIR].FINAL}`]: lighten(
+						`var(${PROPS.BORDER_COLOR[DIR].INHERITED},currentColor)`,
+						match[1],
+					),
+				}),
+				{
+					autocomplete: `(?:border|b)-${shorthand}-(l|lighten)-<number>`,
+				},
+			],
+			[
+				new RegExp(`^(?:border|b)-${shorthand}-d(?:arken)?-(\\d+\\.?\\d*)$`),
+				(match) => ({
+					[`${PROPS.BORDER_COLOR[DIR].FINAL}`]: darken(
+						`var(${PROPS.BORDER_COLOR[DIR].INHERITED},currentColor)`,
+						match[1],
+					),
+				}),
+				{
+					autocomplete: `(border|b)${shorthand}-(d|darken)-<number>`,
+				},
+			],
+		] as Rule[];
+	}),
 	[
 		/^ring-(.*)$/,
 		(match, { theme }) => {
@@ -177,35 +234,139 @@ export const colorRules: Rule[] = [
 				return undefined;
 			}
 			return {
-				'--un-ring-color': parsed.opacity
-					? 'rgb(from var(--v-ring-altered,var(--v-ring)) r g b / var(--v-ring-opacity,100%))'
-					: 'var(--v-ring-altered,var(--v-ring))',
-				'--v-ring': parsed.color,
-				'--v-ring-opacity': (parsed.opacity || 100) + '%',
+				[PROPS.BUILT_IN.RING_COLOR]: parsed.opacity
+					? `rgb(from var(${PROPS.RING_COLOR.FINAL},var(${PROPS.RING_COLOR.INHERITED})) r g b / var(${PROPS.RING_COLOR.OPACITY},100%))`
+					: `var(${PROPS.RING_COLOR.FINAL},var(${PROPS.RING_COLOR.INHERITED}))`,
+				[PROPS.RING_COLOR.INHERITED]: parsed.color,
+				[PROPS.RING_COLOR.OPACITY]: (parsed.opacity || 100) + '%',
+			};
+		},
+		{
+			autocomplete: `ring-$colors`,
+		},
+	],
+	[
+		/^ring-l(:?ighten)?-(\d+\.?\d*)$/,
+		(match) => ({
+			[PROPS.RING_COLOR.FINAL]: lighten(
+				`var(${PROPS.RING_COLOR.INHERITED},currentColor)`,
+				match[1],
+			),
+		}),
+		{
+			autocomplete: 'ring-(l|lighten)-<number>',
+		},
+	],
+	[
+		/^ring-d(?:arken)?-(\d+\.?\d*)$/,
+		(match) => ({
+			[PROPS.RING_COLOR.FINAL]: darken(
+				`var(${PROPS.RING_COLOR.INHERITED},currentColor)`,
+				match[1],
+			),
+		}),
+		{
+			autocomplete: 'ring-(d|darken)-<number>',
+		},
+	],
+	[
+		/^placeholder-(.*)$/,
+		function* (match, { theme }) {
+			const parsed = parseColor(match[1], theme);
+			if (!parsed?.color) {
+				return;
+			}
+			yield {
+				[symbols.selector]: (selector) => `${selector}::placeholder`,
+				color: parsed.opacity
+					? `rgb(from var(${PROPS.PLACEHOLDER_COLOR.FINAL},var(${PROPS.PLACEHOLDER_COLOR.INHERITED})) r g b / var(${PROPS.PLACEHOLDER_COLOR.OPACITY},100%))`
+					: `var(${PROPS.PLACEHOLDER_COLOR.FINAL},var(${PROPS.PLACEHOLDER_COLOR.INHERITED}))`,
+				[PROPS.PLACEHOLDER_COLOR.INHERITED]: parsed.color,
+				[PROPS.PLACEHOLDER_COLOR.OPACITY]: (parsed.opacity || 100) + '%',
+			};
+		},
+		{
+			autocomplete: `placeholder-$colors`,
+		},
+	],
+	[
+		/^placeholder-l(?:ighten)?-(\d+\.?\d*)$/,
+		function* (match) {
+			yield {
+				[symbols.selector]: (selector) => `${selector}::placeholder`,
+				[PROPS.PLACEHOLDER_COLOR.FINAL]: lighten(
+					`var(${PROPS.PLACEHOLDER_COLOR.INHERITED},currentColor)`,
+					match[1],
+				),
+			};
+		},
+		{
+			autocomplete: 'placeholder-(l|lighten)-<number>',
+		},
+	],
+	[
+		/^placeholder-d(?:arken)?-(\d+\.?\d*)$/,
+		function* (match) {
+			yield {
+				[symbols.selector]: (selector) => `${selector}::placeholder`,
+				[PROPS.PLACEHOLDER_COLOR.FINAL]: darken(
+					`var(${PROPS.PLACEHOLDER_COLOR.INHERITED},currentColor)`,
+					match[1],
+				),
+			};
+		},
+		{
+			autocomplete: 'placeholder-(d|darken)-<number>',
+		},
+	],
+	[
+		/^accent-(.*)$/,
+		(match, { theme }) => {
+			const parsed = parseColor(match[1], theme);
+			if (!parsed?.color) {
+				return undefined;
+			}
+			return {
+				'accent-color': parsed.opacity
+					? `rgb(from var(${PROPS.ACCENT_COLOR.FINAL},var(${PROPS.ACCENT_COLOR.INHERITED})) r g b / var(${PROPS.ACCENT_COLOR.OPACITY},100%))`
+					: `var(${PROPS.ACCENT_COLOR.FINAL},var(${PROPS.ACCENT_COLOR.INHERITED}))`,
+				[PROPS.ACCENT_COLOR.INHERITED]: parsed.color,
+				[PROPS.ACCENT_COLOR.OPACITY]: (parsed.opacity || 100) + '%',
 			};
 		},
+		{
+			autocomplete: `accent-$colors`,
+		},
 	],
 	[
-		/^ring-lighten-(\d+\.?\d*)$/,
+		/^accent-l(?:ighten)?-(\d+\.?\d*)$/,
 		(match) => ({
-			'--v-ring-altered': lighten('var(--v-ring,currentColor)', match[1]),
+			[PROPS.ACCENT_COLOR.FINAL]: lighten(
+				`var(${PROPS.ACCENT_COLOR.INHERITED},currentColor)`,
+				match[1],
+			),
 		}),
+		{
+			autocomplete: 'accent-(l|lighten)-<number>',
+		},
 	],
 	[
-		/^ring-darken-(\d+\.?\d*)$/,
+		/^accent-d(?:arken)?-(\d+\.?\d*)$/,
 		(match) => ({
-			'--v-ring-altered': darken('var(--v-ring,currentColor)', match[1]),
+			[PROPS.ACCENT_COLOR.FINAL]: darken(
+				`var(${PROPS.ACCENT_COLOR.INHERITED},currentColor)`,
+				match[1],
+			),
 		}),
+		{
+			autocomplete: 'accent-(d|darken)-<number>',
+		},
 	],
 ];
 
-function directionalBorderFallback(side: 't' | 'r' | 'b' | 'l', color: string) {
-	return `var(--v-border-${side}-color-altered, var(--v-border-${side}-color, ${color}))`;
-}
-
 const dirnames: Record<string, string> = {
-	r: 'right',
-	l: 'left',
-	t: 'top',
-	b: 'bottom',
+	RIGHT: 'right',
+	LEFT: 'left',
+	TOP: 'top',
+	BOTTOM: 'bottom',
 };

package/src/uno/rules/container.ts

@@ -0,0 +1,28 @@
+import type { Rule } from '@unocss/core';
+
+const containerTypes = [
+	'normal',
+	'inline-size',
+	'size',
+	'style',
+	'scroll-state',
+] as const;
+
+export const containerRules: Rule[] = [
+	[
+		new RegExp(`^@container(?:-(\\w+))?(?:/(${containerTypes.join('|')}))?$`),
+		([, l, v]) => {
+			return {
+				'container-type': v ?? 'inline-size',
+				'container-name': l,
+			};
+		},
+		{
+			autocomplete: [
+				`@container-<name>`,
+				`@container-<name>/<type>`,
+				`@container/<type>`,
+			],
+		},
+	],
+];

package/src/uno/rules/index.ts

@@ -1,15 +1,24 @@
 import { anchorRules } from './anchor.js';
 import { clipPathRules } from './clipPath.js';
 import { colorRules } from './color.js';
+import { containerRules } from './container.js';
 import { overflowRules } from './overflow.js';
 import { shadowRules } from './shadow.js';
 import { utilRules } from './util.js';
 
+// const textColorRule = fontStyles.find(
+// 	([pattern]) =>
+// 		typeof pattern !== 'string' && pattern.source === '^text-(?:color-)?(.+)$',
+// )!;
+
+// const excluded = new Set<Rule>([...containerParent, textColorRule]);
+
 export const rules = [
-	...anchorRules,
 	...colorRules,
+	...anchorRules,
 	...overflowRules,
 	...shadowRules,
 	...utilRules,
 	...clipPathRules,
+	...containerRules,
 ];

package/src/uno/rules/overflow.ts

@@ -1,12 +1,12 @@
 import { Rule } from 'unocss';
+import { PROPS } from '../logic/properties.js';
 
 export const overflowRules: Rule[] = [
 	[
 		'overflow-stable',
 		{
 			'scrollbar-gutter': 'stable',
-			'scrollbar-color':
-				'hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent',
+			'scrollbar-color': `hsl(from var(${PROPS.COLOR.FINAL},var(${PROPS.COLOR.INHERITED},var(${PROPS.MODE.BLACK}))) h calc(s * 0.2) calc(l * 4)) transparent`,
 		},
 	],
 	[
@@ -14,8 +14,7 @@ export const overflowRules: Rule[] = [
 		{
 			overflow: 'auto',
 			'scrollbar-gutter': 'stable',
-			'scrollbar-color':
-				'hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent',
+			'scrollbar-color': `hsl(from var(${PROPS.COLOR.FINAL},var(${PROPS.COLOR.INHERITED},var(${PROPS.MODE.BLACK}))) h calc(s * 0.2) calc(l * 4)) transparent`,
 		},
 	],
 	[
@@ -23,8 +22,7 @@ export const overflowRules: Rule[] = [
 		{
 			'overflow-y': 'auto',
 			'scrollbar-gutter': 'stable',
-			'scrollbar-color':
-				'hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent',
+			'scrollbar-color': `hsl(from var(${PROPS.COLOR.FINAL},var(${PROPS.COLOR.INHERITED},var(${PROPS.MODE.BLACK}))) h calc(s * 0.2) calc(l * 4)) transparent`,
 		},
 	],
 	[
@@ -32,8 +30,7 @@ export const overflowRules: Rule[] = [
 		{
 			'overflow-x': 'auto',
 			'scrollbar-gutter': 'stable',
-			'scrollbar-color':
-				'hsl(from var(--v-color-altered,var(--v-color,var(--mode-black))) h calc(s * 0.2) calc(l * 4)) transparent',
+			'scrollbar-color': `hsl(from var(${PROPS.COLOR.FINAL},var(${PROPS.COLOR.INHERITED},var(${PROPS.MODE.BLACK}))) h calc(s * 0.2) calc(l * 4)) transparent`,
 		},
 	],
 	[

package/src/uno/rules/shadow.ts

@@ -1,16 +1,25 @@
 import { Rule } from 'unocss';
+import { PROPS } from '../logic/properties.js';
 
 export const shadowRules: Rule[] = [
 	[
 		/^shadow-up$/,
 		() => ({
-			'--v-shadow-y-mult': '-1',
+			[PROPS.UTILS.SHADOW_Y_MULT]: '-1',
 		}),
 	],
 	[
 		/^shadow-down$/,
 		() => ({
-			'--v-shadow-y-mult': '1',
+			[PROPS.UTILS.SHADOW_Y_MULT]: '1',
+		}),
+	],
+	[
+		/^shadow-none$/,
+		() => ({
+			[PROPS.BUILT_IN.SHADOW]: '0 0 rgb(0 0 0 / 0)',
+			'box-shadow':
+				'var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)',
 		}),
 	],
 ];

package/src/uno/rules/util.ts

@@ -1,4 +1,5 @@
 import { Rule } from 'unocss';
+import { PROPS } from '../logic/properties.js';
 
 export const utilRules: Rule[] = [
 	[
@@ -9,32 +10,32 @@ export const utilRules: Rule[] = [
 		/^arrow$/,
 		function* (_, ctx) {
 			yield {
-				fill: 'var(--v-bg-altered,var(--v-bg))',
-				stroke: 'var(--v-border-altered,var(--v-border))',
-				width: 'var(--arrow-size)',
-				height: 'calc(var(--arrow-size) * 0.5)',
+				fill: `var(${PROPS.BACKGROUND_COLOR.FINAL},var(${PROPS.BACKGROUND_COLOR.INHERITED},var(${PROPS.MODE.WHITE})))`,
+				stroke: `var(${PROPS.BORDER_COLOR.ALL.FINAL},var(${PROPS.BORDER_COLOR.ALL.INHERITED},var(${PROPS.MODE.BLACK})))`,
+				width: `var(${PROPS.UTILS.ARROW_SIZE})`,
+				height: `calc(var(${PROPS.UTILS.ARROW_SIZE}) * 0.5)`,
 				position: 'relative',
 				'z-index': 0,
 			};
 			yield {
 				[ctx.symbols.selector]: (selector) => `${selector}[data-side="top"]`,
 				transform: 'rotate(0deg)',
-				bottom: 'calc(-1 * var(--arrow-size) / 2 + 1px)',
+				bottom: `calc(-1 * var(${PROPS.UTILS.ARROW_SIZE}) / 2 + 1px)`,
 			};
 			yield {
 				[ctx.symbols.selector]: (selector) => `${selector}[data-side="right"]`,
 				transform: 'rotate(90deg)',
-				left: 'calc(-1 * var(--arrow-size) * 0.75)',
+				left: `calc(-1 * var(${PROPS.UTILS.ARROW_SIZE}) * 0.75)`,
 			};
 			yield {
 				[ctx.symbols.selector]: (selector) => `${selector}[data-side="left"]`,
 				transform: 'rotate(-90deg)',
-				right: 'calc(-1 * var(--arrow-size) * 0.75)',
+				right: `calc(-1 * var(${PROPS.UTILS.ARROW_SIZE}) * 0.75)`,
 			};
 			yield {
 				[ctx.symbols.selector]: (selector) => `${selector}[data-side="bottom"]`,
 				transform: 'rotate(180deg)',
-				top: 'calc(-1 * var(--arrow-size) / 2)',
+				top: `calc(-1 * var(${PROPS.UTILS.ARROW_SIZE}) / 2)`,
 			};
 		},
 	],

package/src/uno/theme/borders.ts

@@ -1,17 +1,18 @@
 import { Theme } from '@unocss/preset-mini';
+import { PROPS } from '../logic/properties.js';
 
 export const lineWidth: Theme['lineWidth'] = {
-	DEFAULT: `calc(1px * var(--global-border-scale,1))`,
-	thin: `calc(1px * var(--global-border-scale,1))`,
+	DEFAULT: `calc(1px * var(${PROPS.USER.BORDER_SCALE},1))`,
+	thin: `calc(1px * var(${PROPS.USER.BORDER_SCALE},1))`,
 	none: '0',
-	thick: `calc(2px * var(--global-border-scale,1))`,
+	thick: `calc(2px * var(${PROPS.USER.BORDER_SCALE},1))`,
 };
 
 export const borderRadius: Theme['borderRadius'] = {
-	xs: `calc(0.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
-	sm: `calc(0.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
-	md: `calc(1rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
-	lg: `calc(1.25rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
-	xl: `calc(1.5rem * var(--local-corner-scale,1) * var(--global-corner-scale,1))`,
-	full: `calc(99999px * var(--global-corner-scale,1))`,
+	xs: `calc(0.25rem * var(${PROPS.LOCALS.CORNER_SCALE},1) * var(${PROPS.USER.CORNER_SCALE},1))`,
+	sm: `calc(0.5rem * var(${PROPS.LOCALS.CORNER_SCALE},1) * var(${PROPS.USER.CORNER_SCALE},1))`,
+	md: `calc(1rem * var(${PROPS.LOCALS.CORNER_SCALE},1) * var(${PROPS.USER.CORNER_SCALE},1))`,
+	lg: `calc(1.25rem * var(${PROPS.LOCALS.CORNER_SCALE},1) * var(${PROPS.USER.CORNER_SCALE},1))`,
+	xl: `calc(1.5rem * var(${PROPS.LOCALS.CORNER_SCALE},1) * var(${PROPS.USER.CORNER_SCALE},1))`,
+	full: `calc(99999px * var(${PROPS.USER.CORNER_SCALE},1))`,
 };