@a-type/ui 1.8.10 → 1.8.11

package/src/components/typography/typography.tsx

@@ -4,22 +4,22 @@ const baseHeadingClass = 'layer-components:my-0';
 export const H1 = withClassName(
 	'h1',
 	baseHeadingClass,
-	'layer-components:(font-title text-2xl font-semibold)',
+	'layer-components:(font-title text-2xl font-semibold color-inherit color-darken-1)',
 );
 export const H2 = withClassName(
 	'h2',
 	baseHeadingClass,
-	'layer-components:(text-lg font-title font-bold color-gray-dark color-darken-7)',
+	'layer-components:(text-lg font-title font-bold color-inherit color-lighten-2)',
 );
 export const H3 = withClassName(
 	'h3',
 	baseHeadingClass,
-	'layer-components:(font-title text-md font-500 color-gray-dark color-darken-5)',
+	'layer-components:(font-title text-md font-500 color-inherit color-lighten-4)',
 );
 export const H4 = withClassName(
 	'h4',
 	baseHeadingClass,
-	'layer-components:(text-xs uppercase color-gray-dark color-darken-3)',
+	'layer-components:(text-xs uppercase color-inherit color-lighten-6)',
 );
 export const H5 = withClassName('h5', baseHeadingClass);
 

package/src/themes.stories.tsx

@@ -33,6 +33,7 @@ import {
 	PageRoot,
 	Progress,
 	Provider,
+	ScrollArea,
 	TextSkeleton,
 	ThemeName,
 	ToggleGroup,
@@ -90,32 +91,50 @@ function DemoUI({ className }: { className?: string }) {
 							<ToggleGroup.Item value="2">Toggle 2</ToggleGroup.Item>
 						</ToggleGroup>
 					</Box>
-					<Box layout="start center" d="col" gap p>
-						<H1>Heading 1</H1>
-						<H2>Heading 2</H2>
-						<H3>Heading 3</H3>
-						<H4>Heading 4</H4>
-						<P>
-							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-							eiusmod tempor incididunt ut labore et dolore magna aliqua.
-						</P>
-						<TextSkeleton maxLength={30} />
-						<TextSkeleton maxLength={10} />
+					<Box layout="start center" d="col" gap p className="max-h-200px">
+						<ScrollArea>
+							<H1>Heading 1</H1>
+							<H2>Heading 2</H2>
+							<H3>Heading 3</H3>
+							<H4>Heading 4</H4>
+							<P>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+								eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							</P>
+							<TextSkeleton maxLength={30} />
+							<TextSkeleton maxLength={10} />
+						</ScrollArea>
+					</Box>
+					<Box d="col" gap>
+						<Card>
+							<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>
+						<Card>
+							<Card.Main compact 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>
 					</Box>
-					<Card>
-						<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>
 					<Tabs defaultValue="tab1">
 						<Tabs.List>
 							<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
@@ -177,17 +196,40 @@ function DemoUI({ className }: { className?: string }) {
 						onChange={() => {}}
 					/>
 					<Progress value={50} className="m-auto" />
-					<Box surface="primary" p gap>
+					<Box surface="primary" p gap d="col">
+						<H1>Primary surface</H1>
+						<H2>Primary surface</H2>
+						<H3>Primary surface</H3>
 						<div>Primary surface</div>
 						<Button color="ghost">Ghost</Button>
 					</Box>
-					<Box surface="accent" p>
-						Accent surface
+					<Box surface="accent" p d="col" className="max-h-200px">
+						<ScrollArea>
+							<H2>Accent surface</H2>
+							<H3>Accent surface</H3>
+							<P>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+								eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							</P>
+							<P>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+								eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							</P>
+							<P>
+								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+								eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							</P>
+							<TextSkeleton maxLength={30} />
+							<TextSkeleton maxLength={10} />
+							Accent surface
+						</ScrollArea>
 					</Box>
-					<Box surface="default" p>
+					<Box surface="default" p d="col">
 						Default surface
 					</Box>
-					<Box surface="attention" p>
+					<Box surface="attention" p d="col">
+						<H2>Attention surface</H2>
+						<H3>Attention surface</H3>
 						Attention surface
 					</Box>
 					<Box>

package/src/uno.preset.ts

@@ -20,8 +20,8 @@ export default function presetAglio({
 	scale = 'md',
 	interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf',
 	colorRanges = {
-		light: [90, 40],
-		dark: [0, 60],
+		light: [90, 20],
+		dark: [0, 80],
 	},
 	borderScale = 1,
 	roundedness = 1,
@@ -70,12 +70,14 @@ export default function presetAglio({
 					light: 'var(--color-attention-light)',
 					dark: 'var(--color-attention-dark)',
 					wash: 'var(--color-attention-wash)',
+					ink: 'var(--color-attention-ink)',
 				},
 				accent: {
 					DEFAULT: 'var(--color-accent)',
 					light: 'var(--color-accent-light)',
 					dark: 'var(--color-accent-dark)',
 					wash: 'var(--color-accent-wash)',
+					ink: 'var(--color-accent-ink)',
 				},
 				accentWash: 'var(--color-accent-wash)',
 				'accent-wash': 'var(--color-accent-wash)',
@@ -88,6 +90,7 @@ export default function presetAglio({
 					light: 'var(--color-primary-light)',
 					dark: 'var(--color-primary-dark)',
 					wash: 'var(--color-primary-wash)',
+					ink: 'var(--color-primary-ink)',
 				},
 				primaryLight: 'var(--color-primary-light)',
 				'primary-light': 'var(--color-primary-light)',
@@ -100,6 +103,7 @@ export default function presetAglio({
 					wash: 'var(--color-gray-wash)',
 					light: 'var(--color-gray-light)',
 					dark: 'var(--color-gray-dark)',
+					ink: 'var(--color-gray-ink)',
 					blend: 'var(--color-gray-blend)',
 				},
 				grayBlend: 'var(--color-gray-blend)',
@@ -135,11 +139,11 @@ export default function presetAglio({
 			},
 			spacing: makeSpacing(spacingIncrement),
 			borderRadius: {
-				xs: `calc(0.25rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
-				sm: `calc(0.5rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
-				md: `calc(1rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
-				lg: `calc(1.25rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
-				xl: `calc(1.5rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
+				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: cornerScale === 0 ? '0px' : '9999px',
 			},
 			lineWidth: {
@@ -418,10 +422,15 @@ export default function presetAglio({
 
 			[
 				/^color-(.*)$/,
-				(match, { theme }) => ({
-					color: 'var(--v-color-altered,var(--v-color))',
-					'--v-color': resolveThemeColor(match[1], theme),
-				}),
+				(match, { theme }) => {
+					if (match[1] === 'inherit') {
+						return { color: 'var(--v-color-altered,var(--v-color))' };
+					}
+					return {
+						color: 'var(--v-color-altered,var(--v-color))',
+						'--v-color': resolveThemeColor(match[1], theme),
+					};
+				},
 			],
 			[
 				/^color-lighten-(\d+\.?\d*)$/,
@@ -439,6 +448,9 @@ export default function presetAglio({
 				/^bg-(.*)$/,
 				(match, ctx) => {
 					const { theme } = ctx;
+					if (match[1] === 'inherit') {
+						return { 'background-color': 'var(--v-bg-altered,var(--v-bg))' };
+					}
 					const resolvedColor = resolveThemeColor(match[1], theme);
 					if (resolvedColor === null) {
 						return baseBgRule[1](match, ctx);
@@ -607,12 +619,13 @@ export default function presetAglio({
 					const lemon = themeVars({
 						primary: 'yellow',
 						accent: 'green',
-						grayTweak: -20,
+						grayTweak: -10,
 					});
 					const leek = themeVars({
 						primary: 'green',
 						accent: 'blue',
 						grayTweak: 20,
+						primaryWashSaturation: 0.95,
 					});
 					const tomato = themeVars({
 						primary: 'magenta',
@@ -636,6 +649,7 @@ export default function presetAglio({
 							wash: 'white',
 							light: 'true-gray-wash',
 							dark: 'true-gray',
+							ink: 'true-gray-dark',
 						},
 						globalSaturation: 0,
 					});
@@ -650,6 +664,7 @@ export default function presetAglio({
 				--color-gray: var(--palette-gray);
 				--color-gray-dark: var(--palette-gray-dark);
 				--color-gray-light: var(--palette-gray-light);
+				--color-gray-ink: var(--color-black);
 				--palette-gray-1: var(--color-gray-wash);
 				--palette-gray-2: var(--color-gray-light);
 				--palette-gray-3: var(--color-gray-light);
@@ -691,7 +706,7 @@ export default function presetAglio({
 					--palette-magenta-20: hsl(from #804020 calc(h - 20) s l);
 					--palette-magenta-10: hsl(from #702604 calc(h - 20) s l);
 					--palette-magenta-00: hsl(from rgb(37, 28, 25) calc(h - 20) s l);
-					--palette-green-90:rgb(242, 251, 247);
+					--palette-green-90:rgb(240, 255, 248);
 					--palette-green-80: #c2ffe9;
 					--palette-green-70: #92f2d1;
 					--palette-green-60: #86efc8;
@@ -963,7 +978,7 @@ function asPaletteValue(num: number) {
 	return roundTens(num).toString().padStart(2, '0');
 }
 function generateColors(from: number, to: number) {
-	const increment = (to - from) / 3;
+	const increment = (to - from) / 4;
 	const map = themeColors.reduce(
 		(acc, color) => {
 			acc[`--color-${color}-wash`] = `var(--palette-${color}-${asPaletteValue(
@@ -978,6 +993,9 @@ function generateColors(from: number, to: number) {
 			acc[`--color-${color}-dark`] = `var(--palette-${color}-${asPaletteValue(
 				from + roundTens(increment * 3),
 			)})`;
+			acc[`--color-${color}-ink`] = `var(--palette-${color}-${asPaletteValue(
+				from + roundTens(increment * 4),
+			)})`;
 			return acc;
 		},
 		{} as Record<string, string>,
@@ -1060,16 +1078,22 @@ function themeVars({
 	accent,
 	grayTweak,
 	globalSaturation,
+	primaryWashSaturation,
 }: {
 	primary: string | ExplicitColorRange;
 	accent: string | ExplicitColorRange;
 	grayTweak?: number;
 	globalSaturation?: number;
+	primaryWashSaturation?: number;
 }) {
 	return `
 	${themeVarRange({ name: 'attention', range: 'red' })}
 	${themeVarRange({ name: 'accent', range: accent })}
-	${themeVarRange({ name: 'primary', range: primary })}
+	${themeVarRange({
+		name: 'primary',
+		range: primary,
+		washSaturation: primaryWashSaturation,
+	})}
 
 	--gray-hue-tweak: ${grayTweak ?? 0};
 	${
@@ -1085,23 +1109,35 @@ type ExplicitColorRange = {
 	wash: string;
 	light: string;
 	dark: string;
+	ink: string;
 };
 function themeVarRange({
 	name,
 	range,
+	washSaturation = 1,
 }: {
 	name: string;
 	range: string | ExplicitColorRange;
+	washSaturation?: number;
 }) {
-	if (typeof range === 'string') {
-		return `--color-${name}: var(--color-${range});
---color-${name}-wash: var(--color-${range}-wash);
---color-${name}-light: var(--color-${range}-light);
---color-${name}-dark: var(--color-${range}-dark);`;
-	}
+	const realRange =
+		typeof range === 'string'
+			? {
+					default: range,
+					wash: `${range}-wash`,
+					light: `${range}-light`,
+					dark: `${range}-dark`,
+					ink: `${range}-ink`,
+			  }
+			: range;
 
-	return `--color-${name}: var(--color-${range.default});
---color-${name}-wash: var(--color-${range.wash});
---color-${name}-light: var(--color-${range.light});
---color-${name}-dark: var(--color-${range.dark});`;
+	return `--color-${name}: var(--color-${realRange.default});
+--color-${name}-wash: ${
+		washSaturation !== 1
+			? `hsl(from var(--color-${realRange.wash}) h calc(s * ${washSaturation}) l)`
+			: `var(--color-${realRange.wash})`
+	};
+--color-${name}-light: var(--color-${realRange.light});
+--color-${name}-dark: var(--color-${realRange.dark});
+--color-${name}-ink: var(--color-${realRange.ink});`;
 }