@a-type/ui 2.5.0 → 2.6.1

package/src/uno/uno.preset.ts

@@ -1,4 +1,5 @@
 import { entriesToCss, toArray } from '@unocss/core';
+import { parseColor } from '@unocss/preset-mini/utils';
 import presetWind3 from '@unocss/preset-wind3';
 import { PreflightContext, Preset } from 'unocss';
 import {
@@ -344,9 +345,16 @@ export default function presetAtype({
 					if (match[1] === 'inherit') {
 						return { color: 'var(--v-color-altered,var(--v-color))' };
 					}
+					const parsed = parseColor(match[1], theme);
+					if (!parsed?.color) {
+						return undefined;
+					}
 					return {
-						color: 'var(--v-color-altered,var(--v-color))',
-						'--v-color': resolveThemeColor(match[1], theme),
+						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) + '%',
 					};
 				},
 			],
@@ -367,15 +375,22 @@ export default function presetAtype({
 				(match, ctx) => {
 					const { theme } = ctx;
 					if (match[1] === 'inherit') {
-						return { 'background-color': 'var(--v-bg-altered,var(--v-bg))' };
+						return {
+							'background-color':
+								'rgb(from var(--v-bg-altered,var(--v-bg)) r g b / var(--v-bg-opacity,100%))',
+						};
 					}
-					const resolvedColor = resolveThemeColor(match[1], theme);
-					if (resolvedColor === null) {
+					const parsed = parseColor(match[1], theme);
+					if (!parsed?.color) {
 						return undefined;
 					}
+
 					return {
-						'background-color': 'var(--v-bg-altered,var(--v-bg))',
-						['--v-bg']: resolvedColor,
+						'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) + '%',
 					};
 				},
 				{
@@ -394,48 +409,25 @@ export default function presetAtype({
 					'--v-bg-altered': darken('var(--v-bg,var(--color-white))', match[1]),
 				}),
 			],
-
-			[
-				/^border-color-(.*)$/,
-				(match, { theme }) => ({
-					'border-color': 'var(--v-border-altered,var(--v-border))',
-					'--v-border': resolveThemeColor(match[1], theme),
-				}),
-			],
 			[
 				/^border-(.*)$/,
 				(match, { theme }) => {
 					if (match[1] === 'none') {
 						return undefined;
 					}
-					const resolvedColor = resolveThemeColor(match[1], theme);
-					if (resolvedColor === null) {
+					const parsed = parseColor(match[1], theme);
+					if (!parsed?.color) {
 						return undefined;
 					}
 					return {
-						'border-color': 'var(--v-border-altered,var(--v-border))',
-						'--v-border': resolvedColor,
+						'border-color': 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))',
+						'--v-border': parsed.color,
+						'--v-border-opacity': (parsed.opacity || 100) + '%',
 					};
 				},
 			],
-			[
-				/^border-color-lighten-(\d+\.?\d*)$/,
-				(match, { theme }) => ({
-					'--v-border-altered': lighten(
-						'var(--v-border,currentColor)',
-						match[1],
-					),
-				}),
-			],
-			[
-				/^border-color-darken-(\d+\.?\d*)$/,
-				(match, { theme }) => ({
-					'--v-border-altered': darken(
-						'var(--v-border,currentColor)',
-						match[1],
-					),
-				}),
-			],
 			[
 				/^border-lighten-(\d+\.?\d*)$/,
 				(match, { theme }) => ({
@@ -444,6 +436,9 @@ export default function presetAtype({
 						match[1],
 					),
 				}),
+				{
+					autocomplete: 'border-lighten-<number>',
+				},
 			],
 			[
 				/^border-darken-(\d+\.?\d*)$/,
@@ -453,22 +448,34 @@ export default function presetAtype({
 						match[1],
 					),
 				}),
+				{
+					autocomplete: 'border-darken-<number>',
+				},
 			],
 			[
-				/^ring-color-(.*)$/,
-				(match, { theme }) => ({
-					'--un-ring-color': 'var(--v-ring-altered,var(--v-ring))',
-					'--v-ring': resolveThemeColor(match[1], theme),
-				}),
+				/^ring-(.*)$/,
+				(match, { theme }) => {
+					const parsed = parseColor(match[1], theme);
+					if (!parsed?.color) {
+						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) + '%',
+					};
+				},
 			],
 			[
-				/^ring-color-lighten-(\d+\.?\d*)$/,
+				/^ring-lighten-(\d+\.?\d*)$/,
 				(match, { theme }) => ({
 					'--v-ring-altered': lighten('var(--v-ring,currentColor)', match[1]),
 				}),
 			],
 			[
-				/^ring-color-darken-(\d+\.?\d*)$/,
+				/^ring-darken-(\d+\.?\d*)$/,
 				(match, { theme }) => ({
 					'--v-ring-altered': darken('var(--v-ring,currentColor)', match[1]),
 				}),
@@ -576,9 +583,8 @@ export default function presetAtype({
 
 		shortcuts: {
 			border: 'border-width-thin border-solid',
-			'border-default': 'border border-solid border-color-black',
-			'border-light':
-				'border border-solid border-color-gray border-color-darken-3',
+			'border-default': 'border border-solid border-black',
+			'border-light': 'border border-solid border-gray border-darken-3',
 			'flex-1-0-0': 'flex-grow-1 flex-shrink-0 flex-basis-0',
 			'flex-0-0-auto': 'flex-grow-0 flex-shrink-0 flex-basis-auto',
 			row: 'layer-components:flex layer-components:flex-row layer-components:gap-sm layer-components:items-center',
@@ -953,6 +959,31 @@ export default function presetAtype({
 					syntax: "*";
 					inherits: false;
 				}
+
+				@property --v-ring-altered {
+					syntax: "*";
+					inherits: false;
+				}
+
+				@property --v-bg-opacity {
+					syntax: "<percentage>";
+					inherits: false;
+				}
+
+				@property --v-color-opacity {
+					syntax: "<percentage>";
+					inherits: false;
+				}
+
+				@property --v-border-opacity {
+					syntax: "<percentage>";
+					inherits: false;
+				}
+
+				@property --v-ring-opacity {
+					syntax: "<percentage>";
+					inherits: false;
+				}
 			`;
 				},
 			},