@a-type/ui 1.7.1 → 1.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "type": "module",
   "files": [
     "/dist",

package/src/components/button/classes.tsx

@@ -18,7 +18,7 @@ export function getButtonClassName({
 		'layer-components:hover:(bg-[var(--bg)] bg-darken-2 ring-4)',
 		'layer-components:focus:outline-off',
 		'layer-components:focus-visible:(bg-[var(--bg)] outline-off bg-darken-7 ring-6)',
-		'layer-components:[&[data-focus=true]]:(ring-6 bg-darken-7)',
+		'layer-components:[&[data-focus=true]]:(bg-[var(--bg)] ring-6 bg-darken-7)',
 		'layer-components:active:(bg-[var(--bg)] bg-darken-7 ring-8)',
 		'important:disabled:(opacity-50 cursor-default bg-[var(--bg)] shadow-none ring-none)',
 		'important:[&[data-disabled=true]]:(opacity-50 cursor-default bg-[var(--bg)] shadow-none)',
@@ -39,7 +39,7 @@ const colors = {
 	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary-light)] shadow-sm color-black border-primary-dark focus-visible:([--bg:var(--color-primary)]))`,
 	accent: `layer-variants:[&.btn-color-accent]:([--bg:var(--color-accent-wash)] shadow-sm color-black border-accent-dark focus-visible:([--bg:var(--color-accent-light)]))`,
 	default: `layer-variants:[&.btn-color-default]:([--bg:var(--color-white)] shadow-sm color-black border-gray-dark)`,
-	ghost: `layer-variants:[&.btn-color-ghost]:([--bg-neutral:transparent] [--bg:var(--color-white)] color-darkBlend)`,
+	ghost: `layer-variants:[&.btn-color-ghost]:([--bg-neutral:transparent] [--bg:var(--color-light-blend)] color-darkBlend hover:bg-darken-3 focus-visible:(bg-darken-5) [&[data-focus=true]]:(bg-darken-5) active:bg-darken-6)`,
 	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention-light)] shadow-sm border-attention-dark color-black hover:([--bg:var(--colors-attention)]))`,
 	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg-neutral:transparent] [--bg:var(--color-attention-light)] color-attention-dark hover:(bg-darken-1 color-black) focus-visible:(bg-darken-2 color-black) active:bg-darken-2)`,
 	ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:([--bg-neutral:transparent] [--bg:var(--color-accent-wash)] color-accent-dark hover:bg-darken-2 focus-visible:bg-darken-6 active:bg-darken-6)`,

package/src/components/card/Card.tsx

@@ -40,7 +40,7 @@ export function CardMain({
 				!!compact && 'layer-variants:(pb-0)',
 				isInteractive &&
 					classNames(
-						'layer-components:cursor-pointer layer-components:hover:(bg-gray-darkBlend color-black shadow-sm-inset) layer-components:focus:outline-none',
+						'layer-components:cursor-pointer layer-components:hover:(bg-gray-blend color-black shadow-sm-inset) layer-components:focus:outline-none',
 						'layer-components:focus-visible:(outline-none ring-inset ring-4 ring-gray)',
 						'layer-components:[&[data-visually-focused=true]]:(ring-inset ring-4 ring-gray)',
 						'layer-components:[&[data-visually-disabled=true]]:(cursor-default) layer-components:disabled:(cursor-default)',
@@ -58,7 +58,7 @@ export function CardMain({
 
 export const CardTitle = withClassName(
 	'div',
-	'layer-components:(flex flex-col gap-1 mt-0 bg-white py-2 px-3 rounded-lg rounded-bl-none rounded-tr-none w-auto mr-auto border border-solid border-grayDarkBlend text-md max-h-80px overflow-hidden text-ellipsis max-w-full text-inherit font-semibold relative z-1)',
+	'layer-components:(flex flex-col gap-1 mt-0 bg-white py-2 px-3 rounded-lg rounded-bl-none rounded-tr-none w-auto mr-auto border border-solid border-grayDarkBlend text-md max-h-80px overflow-hidden text-ellipsis max-w-full text-inherit font-semibold relative z-1 transition-colors)',
 	'layer-components:[[data-compact=true]_&]:(py-1 text-sm)',
 	'layer-components:[[data-interactive=true]:hover>&]:(bg-gray-light)',
 );

package/src/components/datePicker/DatePicker.tsx

@@ -256,5 +256,5 @@ const RangeLayout = withClassName(
 	'div',
 	'grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto]',
 	'[grid-template-rows:auto_1fr] gap-2',
-	'sm:[grid-template-areas:"prevMonth_leftMonth_rightMonth_nextMonth""leftGrid_leftGrid_rightGrid_rightGrid"] sm:[grid-template-columns:auto_1fr_1fr_auto]',
+	'sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]',
 );

package/src/components/imageUploader/ImageUploader.tsx

@@ -4,6 +4,7 @@ import {
 	ReactNode,
 	useCallback,
 	useContext,
+	useEffect,
 	useId,
 	useState,
 } from 'react';
@@ -223,8 +224,29 @@ function ImageUploaderPrebuilt(
 export function ImageUploaderFileButton({ children, ...props }: ButtonProps) {
 	const { inputId, dragging } = useUploaderContext();
 
+	const [focused, setFocused] = useState(false);
+	useEffect(() => {
+		function updateFocus(ev: FocusEvent) {
+			setFocused(ev.target === document.activeElement);
+		}
+		setTimeout(() => {
+			const input = document.getElementById(inputId);
+			if (input) {
+				input.addEventListener('focus', updateFocus);
+				input.addEventListener('blur', updateFocus);
+			}
+		}, 0);
+		return () => {
+			const input = document.getElementById(inputId);
+			if (input) {
+				input.removeEventListener('focus', updateFocus);
+				input.removeEventListener('blur', updateFocus);
+			}
+		};
+	}, [inputId]);
+
 	return (
-		<Button color="ghost" asChild {...props}>
+		<Button color="ghost" asChild visuallyFocused={focused} {...props}>
 			<label htmlFor={inputId}>
 				{children ?? (
 					<>

package/src/components/input/Input.tsx

@@ -6,7 +6,7 @@ import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.j
 export const inputClassName = classNames(
 	'layer-components:(px-5 py-1.25 text-md font-sans rounded-xl bg-white select-auto min-w-60px color-black border-solid border border-gray-dark shadow-sm-inset)',
 	'layer-components:focus:(outline-none bg-lighten-2 ring-4	ring-white)',
-	'layer-components:focus-visible:(outline-none ring-gray-darkBlend)',
+	'layer-components:focus-visible:(outline-none ring-gray)',
 	'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)',
 	'layer-components:md:(min-w-120px)',
 );

package/src/themes.stories.tsx

@@ -7,6 +7,7 @@ import { Icon } from './components/icon/index.js';
 import {
 	AvatarList,
 	Box,
+	Checkbox,
 	DateRangePicker,
 	Dialog,
 	DropdownMenu,
@@ -62,18 +63,25 @@ function DemoUI({ className }: { className?: string }) {
 							Ghost Destructive Small
 						</Button>
 					</Box>
-					<Box gap wrap p>
+					<Box gap wrap p items="start">
 						<Input placeholder="Placeholder" />
 						<TextArea placeholder="Placeholder" />
+						<Box d="row" gap items="center">
+							<Checkbox defaultChecked />
+							<span>Checkbox</span>
+						</Box>
 					</Box>
 					<Card>
-						<Card.Main>
+						<Card.Main onClick={() => {}}>
 							<Card.Title>Card Title</Card.Title>
 							<Card.Content>Card Content</Card.Content>
 						</Card.Main>
 						<Card.Footer>
 							<Card.Actions>
 								<Button size="small">Action 1</Button>
+								<Button size="icon-small" color="ghost">
+									<Icon name="placeholder" />
+								</Button>
 							</Card.Actions>
 						</Card.Footer>
 					</Card>
@@ -127,8 +135,9 @@ function DemoUI({ className }: { className?: string }) {
 						onChange={() => {}}
 					/>
 					<Progress value={50} className="m-auto" />
-					<Box surface="primary" p>
-						Primary surface
+					<Box surface="primary" p gap>
+						<div>Primary surface</div>
+						<Button color="ghost">Ghost</Button>
 					</Box>
 					<Box surface="accent" p>
 						Accent surface

package/src/uno.preset.ts

@@ -21,7 +21,7 @@ export default function presetAglio({
 	},
 	borderScale = 1,
 	roundedness = 1,
-	saturation = 20,
+	saturation = 10,
 }: {
 	scale?: 'sm' | 'md' | 'lg';
 	interFontLocation?: string;
@@ -546,7 +546,7 @@ export default function presetAglio({
 					--palette-red-20: #804020;
 					--palette-red-10: #702604;
 					--palette-red-00: #321f19;
-					--palette-green-90: #f0fff5;
+					--palette-green-90: #e8ffef;
 					--palette-green-80: #c2ffe9;
 					--palette-green-70: #92f2d1;
 					--palette-green-60: #86efc8;
@@ -556,7 +556,7 @@ export default function presetAglio({
 					--palette-green-20: #246869;
 					--palette-green-10: #274e50;
 					--palette-green-00: #18352e;
-					--palette-yellow-90: #fff9ea;
+					--palette-yellow-90: #fffbee;
 					--palette-yellow-80: #fff1c7;
 					--palette-yellow-70: #ffdf7c;
 					--palette-yellow-60: #ffdb57;
@@ -566,7 +566,7 @@ export default function presetAglio({
 					--palette-yellow-20: #714d00;
 					--palette-yellow-10: #634500;
 					--palette-yellow-00: #3b1c00;
-					--palette-blue-90: #eef8fe;
+					--palette-blue-90:rgb(231, 246, 255);
 					--palette-blue-80: #c4e7ff;
 					--palette-blue-70: #87d3fc;
 					--palette-blue-60: #5fcefe;
@@ -576,7 +576,7 @@ export default function presetAglio({
 					--palette-blue-20: #005979;
 					--palette-blue-10: #004c69;
 					--palette-blue-00: #092c3a;
-					--palette-purple-90: #f1efff;
+					--palette-purple-90:rgb(239, 236, 255);
 					--palette-purple-80: #e0e0ff;
 					--palette-purple-70: #c8cdff;
 					--palette-purple-60: #aab1ff;
@@ -585,25 +585,11 @@ export default function presetAglio({
 					--palette-purple-30: #6068c0;
 					--palette-purple-20: #5a62a7;
 					--palette-purple-10: #464d8a;
-					--palette-purple-00: #272a39;
+					--palette-purple-00:rgb(28, 30, 41);
 					--palette-light-blend: rgba(255, 255, 255, 0.8);
+					--palette-light-blend-2: rgba(255, 255, 255, 0.6);
 					--palette-dark-blend: rgba(0, 0, 0, 0.65);
-					--palette-black: #303030;
-					--palette-white: #fff;
-					--palette-light: #f8f8fb;
-					--palette-dark: #0a0a0b;
-					--palette-gray-1: #fafafc;
-					--palette-gray-2: #f5f5f8;
-					--palette-gray-3: #eeeef2;
-					--palette-gray-4: #e0e0e9;
-					--palette-gray-5: #bdbdc7;
-					--palette-gray-6: #939eaa;
-					--palette-gray-7: #6f7a86;
-					--palette-gray-8: #4d5660;
-					--palette-gray-9: #3c3c3f;
-					--palette-gray-0: #2b2b2f;
-					--palette-gray-ex-1: #232326;
-					--palette-gray-ex-2: #1b1b1f;
+					--palette-dark-blend-2: rgba(0, 0, 0, 0.4);
 					--palette-gray-blend: rgba(0, 0, 20, 0.025);
 					--palette-gray-dark-blend: rgba(0, 0, 20, 0.05);
 					--palette-light-gray-blend: rgba(255, 255, 255, 0.05);
@@ -614,20 +600,48 @@ export default function presetAglio({
 					--palette-shadow-4: rgba(0, 0, 0, 0.5);
 					--palette-white-overlay: rgba(255, 255, 255, 0.4);
 					--palette-black-overlay: rgba(0, 0, 0, 0.4);
+					--palette-true-gray-90: #fcfcfc;
+					--palette-true-gray-80: #f4f4f4;
+					--palette-true-gray-70: #e7e7e7;
+					--palette-true-gray-60: #d6d6d6;
+					--palette-true-gray-50: #a6a6a6;
+					--palette-true-gray-40: #7d7d7d;
+					--palette-true-gray-30: #6a6a6a;
+					--palette-true-gray-20: #4f4f4f;
+					--palette-true-gray-10: #383838;
+					--palette-true-gray-00: #1f1f1f;
 
-					--color-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--wash-hue-tweak, 0)) calc(s * ${Math.min(
-						1,
-						saturationPercent,
-					)} * var(--wash-saturation-tweak, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
-					--color-gray: hsl(from var(--color-primary) h calc(s * ${saturationPercent}) calc(l * 1.125));
-					--color-gray-dark: hsl(from var(--color-primary-dark) h calc(s * ${
-						saturationPercent * 0.75
-					}) calc(l * pow(1.125, var(--mode-mult,1))));
-					--color-gray-light: hsl(from var(--color-primary-light) h calc(s * ${
-						saturationPercent * 0.5
-					}) calc(l * pow(1.05, var(--mode-mult,1))));
+					--final-saturation: calc(${saturationPercent} * var(--global-saturation, 1));
+
+					--palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--final-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
+					--palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--final-saturation, 1)) calc(l * 1.125));
+					--palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--final-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
+					--palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--final-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
 					--color-wash: var(--color-gray-wash);
 
+					--color-gray-wash: var(--palette-gray-wash);
+					--color-gray: var(--palette-gray);
+					--color-gray-dark: var(--palette-gray-dark);
+					--color-gray-light: var(--palette-gray-light);
+
+					--palette-gray-1: var(--color-gray-wash);
+					--palette-gray-2: var(--color-gray-light);
+					--palette-gray-3: var(--color-gray-light);
+					--palette-gray-4: var(--color-gray);
+					--palette-gray-5: var(--color-gray);
+					--palette-gray-6: var(--color-gray);
+					--palette-gray-7: var(--color-gray-dark);
+					--palette-gray-8: var(--color-gray-dark);
+					--palette-gray-9: var(--color-black);
+					--palette-gray-0: var(--color-black);
+					--palette-gray-ex-1: var(--color-black);
+					--palette-gray-ex-2: var(--color-black);
+
+					--palette-true-white: #ffffff;
+					--palette-true-black: #303030;
+					--palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--final-saturation, 1)) calc(min(100, l + 1 / var(--final-saturation, 1))));
+					--palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--final-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--final-saturation, 1), 1.5)))));
+
 					--z-nowPlaying: 40;
 					--z-nav: 50;
 					--z-menu: 100;
@@ -645,7 +659,9 @@ export default function presetAglio({
 					${lightColors}
 					--color-dark-blend: var(--palette-dark-blend);
 					--color-light-blend: var(--palette-light-blend);
-					--color-black: var(--palette-black);
+					--color-dark-blend-2: var(--palette-dark-blend-2);
+					--color-light-blend-2: var(--palette-light-blend-2);
+					--color-black: var(--palette-true-black);
 					--color-white: var(--palette-white);
 					--color-gray-1: var(--palette-gray-1);
 					--color-gray-2: var(--palette-gray-2);
@@ -677,7 +693,7 @@ export default function presetAglio({
 					--color-primary-light: var(--color-yellow-light);
 					--color-primary-dark: var(--color-yellow-dark);
 					--color-primary-wash: var(--color-yellow-wash);
-					--wash-hue-tweak: -30;
+					--gray-hue-tweak: -30;
 				}
 
 				/* INTRINSIC DARK THEME */
@@ -688,7 +704,9 @@ export default function presetAglio({
 						${darkColors}
 						--color-dark-blend: var(--palette-light-blend);
 						--color-light-blend: var(--palette-dark-blend);
-						--color-black: var(--palette-white);
+						--color-dark-blend-2: var(--palette-light-blend-2);
+						--color-light-blend-2: var(--palette-dark-blend-2);
+						--color-black: var(--palette-true-white);
 						--color-white: var(--palette-black);
 						--color-gray-1: var(--palette-gray-ex-2);
 						--color-gray-2: var(--palette-gray-ex-1);
@@ -716,7 +734,9 @@ export default function presetAglio({
 						${lightColors}
 						--color-dark-blend: var(--palette-dark-blend);
 						--color-light-blend: var(--palette-light-blend);
-						--color-black: var(--palette-black);
+						--color-dark-blend-2: var(--palette-dark-blend-2);
+						--color-light-blend-2: var(--palette-light-blend-2);
+						--color-black: var(--palette-true-black);
 						--color-white: var(--palette-white);
 						--color-gray-1: var(--palette-gray-1);
 						--color-gray-2: var(--palette-gray-2);
@@ -743,7 +763,9 @@ export default function presetAglio({
 						${darkColors}
 						--color-dark-blend: var(--palette-light-blend);
 						--color-light-blend: var(--palette-dark-blend);
-						--color-black: var(--palette-white);
+						--color-dark-blend-2: var(--palette-light-blend-2);
+						--color-light-blend-2: var(--palette-dark-blend-2);
+						--color-black: var(--palette-true-white);
 						--color-white: var(--palette-black);
 						--color-gray-1: var(--palette-gray-ex-2);
 						--color-gray-2: var(--palette-gray-ex-1);
@@ -777,7 +799,7 @@ export default function presetAglio({
 					--color-primary-dark: var(--color-yellow-dark);
 					--color-primary-wash: var(--color-yellow-wash);
 
-					--wash-hue-tweak: -30;
+					--gray-hue-tweak: -10;
 				}
 
 				.theme-blueberry {
@@ -793,6 +815,8 @@ export default function presetAglio({
 					--color-primary-light: var(--color-blue-light);
 					--color-primary-dark: var(--color-blue-dark);
 					--color-primary-wash: var(--color-blue-wash);
+
+					--gray-hue-tweak: 20;
 				}
 
 				.theme-eggplant {
@@ -808,6 +832,8 @@ export default function presetAglio({
 					--color-primary-light: var(--color-purple-light);
 					--color-primary-dark: var(--color-purple-dark);
 					--color-primary-wash: var(--color-purple-wash);
+
+					--gray-hue-tweak: -20;
 				}
 
 				.theme-leek {
@@ -824,7 +850,7 @@ export default function presetAglio({
 					--color-primary-dark: var(--color-green-dark);
 					--color-primary-wash: var(--color-green-wash);
 
-					--wash-hue-tweak: 50;
+					--gray-hue-tweak: 20;
 				}
 
 				.theme-tomato {
@@ -841,7 +867,7 @@ export default function presetAglio({
 					--color-primary-dark: hsl(from var(--color-red-dark) calc(h - 20) s l);
 					--color-primary-wash: hsl(from var(--color-red-wash) calc(h - 20) s l);
 
-					--wash-hue-tweak: -20;
+					--gray-hue-tweak: -20;
 				}
 
 				.theme-salt {
@@ -849,14 +875,16 @@ export default function presetAglio({
 					--color-attention: var(--color-red);
 					--color-attention-dark: var(--color-red-dark);
 					--color-attention-wash: var(--color-red-wash);
-					--color-accent: var(--color-gray-4);
-					--color-accent-wash: var(--color-gray-2);
-					--color-accent-light: var(--color-gray-3);
-					--color-accent-dark: var(--color-gray-5);
-					--color-primary: var(--color-gray-5);
-					--color-primary-light: var(--color-gray-4);
-					--color-primary-dark: var(--color-gray-6);
-					--color-primary-wash: var(--color-white);
+					--color-primary: var(--color-true-gray);
+					--color-primary-wash: var(--color-true-gray-wash);
+					--color-primary-light: var(--color-true-gray-light);
+					--color-primary-dark: var(--color-true-gray-dark);
+					--color-accent: var(--color-true-gray-light);
+					--color-accent-light: var(--color-true-gray-wash);
+					--color-accent-dark: var(--color-true-gray);
+					--color-accent-wash: var(--color-white);
+
+					--global-saturation: 0;
 				}
 
         html, body {
@@ -925,7 +953,7 @@ export default function presetAglio({
 	};
 }
 
-const themeColors = ['red', 'green', 'yellow', 'blue', 'purple'];
+const themeColors = ['red', 'green', 'yellow', 'blue', 'purple', 'true-gray'];
 function roundTens(num: number) {
 	return Math.round(num / 10) * 10;
 }
@@ -1003,10 +1031,6 @@ function resolveThemeColor(color: string, theme: any) {
 		return resolvedColor.DEFAULT;
 	}
 
-	if (color === 'accent-light') {
-		console.log(resolveFrom, resolvedColor);
-	}
-
 	return resolvedColor;
 }