@a-type/ui 2.7.1 → 2.7.2

package/src/components/button/classes.tsx

@@ -46,7 +46,7 @@ export function getButtonClassName({
 const colors = {
 	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary)] shadow-sm color-black border-primary-dark)`,
 	accent: `layer-variants:[&.btn-color-accent]:([--bg-neutral:var(--color-accent-wash)] [--bg:var(--color-accent-light)] shadow-sm color-black border-accent-dark)`,
-	default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray)] shadow-sm color-black border-gray-dark focus-visible:bg-lighten-1 hover:bg-lighten-1)`,
+	default: `layer-variants:[&.btn-color-default]:([--bg-neutral:var(--color-white)] [--bg:var(--color-gray)] bg-lighten-1 shadow-sm color-black border-gray-dark focus-visible:bg-lighten-1 hover:bg-lighten-1)`,
 	ghost: `layer-variants:[&.btn-color-ghost]:([--bg-neutral:transparent] [--bg:oklch(from_var(--color-gray)_l_c_h/50%)] color-dark-blend)`,
 	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention)] shadow-sm border-attention-dark color-black)`,
 	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg-neutral:transparent] [--bg:var(--color-attention-light)] color-attention-dark hover:(color-black) focus-visible:(color-black))`,

package/src/components/icon/Icon.tsx

@@ -21,7 +21,7 @@ export const Icon = function Icon({
 	const loading = useIconLoading();
 
 	if (loading) {
-		return <Spinner size={size} className="inline-block" />;
+		return <Spinner size={size} className="icon inline-block" />;
 	}
 
 	return (

package/src/components/navBar/NavBar.tsx

@@ -8,9 +8,9 @@ export const navBarItemClass = classNames(
 	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-sm border-none cursor-pointer text-sm transition-colors h-full gap-6px relative color-black select-none)',
 	'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 color-black)',
-	'layer-components:([--bg:var(--color-primary-wash)] [--fill:var(--color-primary)])',
+	'layer-components:focus-visible:(outline-none bg-darken-2 ring-1 ring-primary)',
+	'layer-components:[&[data-active=true]]:(bg-primary-light/50 color-lighten-2 color-black)',
+	'layer-components:([--fill:var(--color-primary)])',
 	'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)',
 );
 
@@ -30,9 +30,9 @@ export const NavBarItem = function NavBarItem({
 	color,
 	...rest
 }: NavBarItemProps & {
-	ref?: React.Ref<HTMLDivElement>;
+	ref?: React.Ref<HTMLButtonElement>;
 }) {
-	const Comp = asChild ? Slot : 'div';
+	const Comp = asChild ? Slot : 'button';
 
 	return (
 		<Comp
@@ -40,11 +40,9 @@ export const NavBarItem = function NavBarItem({
 			className={classNames(
 				navBarItemClass,
 				color === 'neutral' && [
-					'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 color-black)',
-					'layer-variants:([--bg:var(--color-gray-blend)] [--fill:var(--color-gray)])',
+					'layer-variants:[&[data-active=true]]:(bg-gray/30 color-black)',
+					'layer-variants:([--fill:var(--color-gray)])',
+					'layer-variants:focus-visible:ring-gray',
 				],
 				className,
 			)}

package/src/uno/colors.ts

@@ -6,7 +6,7 @@ export const colorConstants = `
 `;
 
 const lightness = {
-	wash: `calc(1 + 0.45 * var(--dyn-mode-mult, 1))`,
+	wash: `calc(1 + (0.1 + 0.35 * var(--dyn-mode-dark)) * var(--dyn-mode-mult, 1))`,
 	light: `calc(1 + 0.25 * var(--dyn-mode-mult, 1))`,
 	dark: `calc(1 - 0.25 * var(--dyn-mode-mult, 1))`,
 	ink: `calc(1 - 0.45 * var(--dyn-mode-mult, 1))`,
@@ -27,7 +27,7 @@ export const dynamicThemeComputedColors = (name: string) => {
 	--color-${name}-ink: oklch(from var(--color-${name}) calc(l * ${lightness.ink}) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-ink, 1) + 0.01)) ${hue.ink});
 
 	--color-${name}-gray: oklch(from var(--color-${name}) l calc(c * 0.1 * var(--global-saturation, 1)) h);
-	--color-${name}-gray-wash: oklch(from var(--color-${name}-gray) calc(l * ${lightness.wash}) calc(c * 0.9) ${hue.wash});
+	--color-${name}-gray-wash: oklch(from var(--color-${name}-gray) calc(l * ${lightness.wash} * 1.1) calc(c * 0.9) ${hue.wash});
 	--color-${name}-gray-light: oklch(from var(--color-${name}-gray) calc(l * ${lightness.light}) c ${hue.light});
 	--color-${name}-gray-dark: oklch(from var(--color-${name}-gray) calc(l * ${lightness.dark}) c ${hue.dark});
 	--color-${name}-gray-ink: oklch(from var(--color-${name}-gray) calc(l * ${lightness.ink}) c ${hue.ink});
@@ -46,7 +46,7 @@ ${dynamicThemeComputedColors('accent')}
 
 --color-wash: var(--color-gray-wash);
 --palette-black: var(--color-gray-ink);
---palette-white: oklch(from var(--color-wash) calc(0.999 * var(--dyn-mode-mult,1)) calc(c * var(--global-saturation, 1)) h);
+--palette-white: oklch(from var(--color-wash) calc(1 * var(--dyn-mode-light,1)) 0.001 h);
 /* A dark-mode only contrast color */
 --color-dark-mode-contrast: oklch(from var(--color-gray-ink) l c h / calc(100% * var(--dyn-source-mode-adjust, 0)));
 `;

package/src/uno/shadows.ts

@@ -1,7 +1,7 @@
 export function getShadows(hard = false) {
-	const opacity1 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5)*2)`;
-	const opacity2 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5))`;
-	const opacity3 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5)/2)`;
+	const opacity1 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * 2 * (1 + var(--dyn-source-mode-adjust, 0)))`;
+	const opacity2 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) * (1 + var(--dyn-source-mode-adjust, 0)))`;
+	const opacity3 = `calc(var(--un-shadow-opacity,0.1)*(1 + var(--global-shadow-spread,1) * 0.5) / 2 * (1 + var(--dyn-source-mode-adjust, 0)))`;
 	return {
 		sm: `var(--un-shadow-inset) 0 calc(0px * var(--v-shadow-y-mult,1)) calc(1px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / ${opacity1}),
 			var(--un-shadow-inset) 0 calc(1px * var(--v-shadow-y-mult,1)) calc(2px * var(--global-shadow-spread,1)) 0 rgb(from var(--un-shadow-color) r g b / ${opacity1})`,

package/src/uno/uno.preset.ts

@@ -646,6 +646,8 @@ export default function presetAtype({
 					--dyn-mode-sign: 1;
 					--dyn-source-mode-adjust: 0;
 					--dyn-mode-lighten-mult: 1;
+					--dyn-mode-light: 1;
+					--dyn-mode-dark: 0;
 					--color-dark-blend: var(--palette-dark-blend);
 					--color-light-blend: var(--palette-light-blend);
 					--color-dark-blend-2: var(--palette-dark-blend-2);
@@ -673,10 +675,12 @@ export default function presetAtype({
 					const darkMode = `
 						--wash-saturation-tweak: ${darkModeSaturationTweak};
 						--mode-mult: -1;
-						--dyn-mode-mult: -1.6;
+						--dyn-mode-mult: -1.25;
 						--dyn-mode-lighten-mult: -1;
 						--dyn-mode-sign: -1;
 						--dyn-source-mode-adjust: 1;
+						--dyn-mode-dark: 1;
+						--dyn-mode-light: 0;
 						--color-dark-blend: var(--palette-light-blend);
 						--color-light-blend: var(--palette-dark-blend);
 						--color-dark-blend-2: var(--palette-light-blend-2);
@@ -703,7 +707,7 @@ export default function presetAtype({
 					`;
 
 					const dynThemes: Record<string, DynamicThemeColor> = {
-						lemon: { hue: 91.8, hueRotate: 3 },
+						lemon: { hue: 91.8, hueRotate: 12 },
 						leek: { hue: 160.88, hueRotate: -1 },
 						tomato: { hue: 10.51, hueRotate: -2 },
 						blueberry: { hue: 248.14, hueRotate: 4 },
@@ -804,7 +808,7 @@ export default function presetAtype({
 					--z-tooltip: 10000;
 					--z-overdraw: 100000;
 
-					--un-shadow-color: var(--palette-true-black);
+					--un-shadow-color: #000000;
 					--un-shadow-opacity: 10%;
 
 					--arrow-size: 1rem;