@a-type/ui 2.5.0 → 2.6.0

package/src/components/forms/TextField.tsx

@@ -139,5 +139,5 @@ export const FieldRoot = withClassName(
 );
 export const FieldLabel = withClassName(
 	'label',
-	'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
+	'inline-flex flex-col gap-1 text-sm font-bold color-dark-blend mb-1',
 );

package/src/components/imageUploader/ImageUploader.tsx

@@ -208,7 +208,7 @@ function ImageUploaderPrebuilt({
 						onClick={() => setCameraOpen(false)}
 						color="ghost"
 						size="small"
-						className="text-white absolute top-2 left-2"
+						className="color-white absolute top-2 left-2"
 					>
 						Cancel
 					</Button>

package/src/components/navBar/NavBar.tsx

@@ -9,7 +9,7 @@ export const navBarItemClass = classNames(
 	'layer-components:active:bg-darken-2',
 	'layer-components:hover:bg-darken-1',
 	'layer-components:focus-visible:(outline-none bg-darken-2)',
-	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-1 text-black)',
+	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-1 color-black)',
 	'layer-components:([--bg:var(--color-primary-wash)] [--fill:var(--color-primary)])',
 	'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)',
 );
@@ -43,7 +43,7 @@ export const NavBarItem = function NavBarItem({
 					'layer-variants:active:bg-gray-dark-blend layer-variants:md:active:bg-gray-dark-blend',
 					'layer-variants:hover:bg-gray-dark-blend',
 					'layer-variants:focus-visible:(bg-gray-dark-blend)',
-					'layer-variants:[&[data-active=true]]:(bg-gray-dark-blend text-black)',
+					'layer-variants:[&[data-active=true]]:(bg-gray-dark-blend color-black)',
 					'layer-variants:([--bg:var(--color-gray-blend)] [--fill:var(--color-gray)])',
 				],
 				className,
@@ -85,7 +85,7 @@ export const NavBarItemIcon = function NavBarItemIcon({
 		<Comp
 			name={name}
 			className={clsx(
-				'layer-components:(relative z-1 flex fill-none text-inherit)',
+				'layer-components:(relative z-1 flex fill-none color-inherit)',
 				'layer-variants:[*[data-active=true]_&]:fill-[var(--fill)]',
 				className,
 			)}

package/src/components/scrollArea/ScrollArea.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
 					{Array.from({ length: 100 }, (_, i) => (
 						<div
 							key={i}
-							className="h-10 w-full bg-primary-wash text-primary flex items-center justify-center"
+							className="h-10 w-full bg-primary-wash color-primary flex items-center justify-center"
 						>
 							Item {i + 1}
 						</div>
@@ -50,7 +50,7 @@ export const StickToBottom: Story = {
 						{Array.from({ length: itemCount }, (_, i) => (
 							<div
 								key={i}
-								className="h-10 w-full bg-primary-wash text-primary flex items-center justify-center"
+								className="h-10 w-full bg-primary-wash color-primary flex items-center justify-center"
 							>
 								Item {i + 1}
 							</div>

package/src/components/tabs/tabs.tsx

@@ -11,10 +11,10 @@ export const TabsList = withClassName(
 
 export const TabsTriggerBase = withClassName(
 	TabsPrimitive.Trigger,
-	'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold text-gray-dark-blend border-gray-dark transition-all cursor-pointer select-none font-inherit flex-shrink-0 shadow-sm)',
-	'layer-components:hover:(bg-darken-1 ring-4 ring-color-bg)',
-	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-color-bg outline-off)',
-	'[&[data-state=active]]:(bg-[var(--bg)] font-semibold text-black cursor-default hover:bg-darken-1 relative z-1)',
+	'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold color-gray-ink border-gray-dark transition-all cursor-pointer select-none font-inherit flex-shrink-0 shadow-sm)',
+	'layer-components:hover:(bg-darken-1 ring-4 ring-bg)',
+	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-bg outline-off)',
+	'[&[data-state=active]]:(bg-[var(--bg)] font-semibold color-black cursor-default hover:bg-darken-1 relative z-1)',
 );
 
 const colorClasses = {

package/src/components/textArea/TextArea.tsx

@@ -96,7 +96,7 @@ export const TextArea = function TextArea({
 			ref={finalRef}
 			className={classNames(
 				inputClassName,
-				'layer-components:([font-family:inherit] text-inherit overflow-hidden resize-none)',
+				'layer-components:([font-family:inherit] color-inherit overflow-hidden resize-none)',
 				'layer-variants:(rounded-lg px-4 py-4)',
 				{
 					'layer-components:[resize:vertical]': !autoSize,

package/src/components/tooltip/Tooltip.tsx

@@ -26,10 +26,10 @@ function Content({
 						'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
 						'layer-components:[&[data-state=delayed-open]]:animate-popover-in',
 						{
-							'layer-variants:(bg-black text-white)': color === 'contrast',
-							'layer-variants:(bg-white text-black)':
+							'layer-variants:(bg-black color-white)': color === 'contrast',
+							'layer-variants:(bg-white color-black)':
 								color === 'white' || color === 'neutral',
-							'layer-variants:(bg-attention-ink text-white)':
+							'layer-variants:(bg-attention-ink color-white)':
 								color === 'attention',
 						},
 						className,

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;
+				}
 			`;
 				},
 			},