@a-type/ui 1.8.9 → 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/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './useAnimationFrame.js';
 export * from './useLongPress.js';
 export * from './useMergedRef.js';
 export * from './useOnUnmount.js';
+export * from './useOverrideTheme.js';
 export * from './useSize.js';
 export * from './useStableCallback.js';
 export * from './useTitleBarColor.js';

package/src/hooks/useOverrideTheme.ts

@@ -0,0 +1,14 @@
+import { useLayoutEffect } from 'react';
+import { ThemeName } from '../components/index.js';
+
+export function useOverrideTheme(theme: ThemeName | null | undefined) {
+	useLayoutEffect(() => {
+		if (!theme) {
+			return;
+		}
+		document.body.classList.add(`theme-override-${theme}`);
+		return () => {
+			document.body.classList.remove(`theme-override-${theme}`);
+		};
+	}, [theme]);
+}

package/src/themes.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import clsx from 'clsx';
+import { useState } from 'react';
 import { ActionBar, ActionButton } from './components/actions/index.js';
 import { Button } from './components/button/index.js';
 import { Card } from './components/card/index.js';
@@ -8,6 +9,7 @@ import {
 	AvatarList,
 	Box,
 	Checkbox,
+	ColorPicker,
 	ContextMenu,
 	DateRangePicker,
 	Dialog,
@@ -30,13 +32,17 @@ import {
 	PageNav,
 	PageRoot,
 	Progress,
+	Provider,
+	ScrollArea,
 	TextSkeleton,
+	ThemeName,
 	ToggleGroup,
 	Tooltip,
 } from './components/index.js';
 import { Input } from './components/input/index.js';
 import { Tabs } from './components/tabs/tabs.js';
 import { TextArea } from './components/textArea/index.js';
+import { useOverrideTheme } from './hooks/useOverrideTheme.js';
 
 const meta = {
 	title: 'themes',
@@ -55,9 +61,9 @@ function DemoUI({ className }: { className?: string }) {
 	const nextWeek = new Date();
 	nextWeek.setDate(nextWeek.getDate() + 7);
 	return (
-		<PageRoot>
+		<PageRoot className={clsx('flex-1', className)}>
 			<PageContent>
-				<div className={clsx('grid gap-2 grid-cols-2', className)}>
+				<div className={clsx('grid gap-2 grid-cols-2')}>
 					<Box gap wrap p>
 						<Button color="primary">Primary</Button>
 						<Button color="accent">Accent</Button>
@@ -85,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>
@@ -159,6 +183,7 @@ function DemoUI({ className }: { className?: string }) {
 							<Dialog.Description>Im a dialog</Dialog.Description>
 							<Dialog.Actions>
 								<Dialog.Close>Close</Dialog.Close>
+								<Button color="primary">Action</Button>
 							</Dialog.Actions>
 						</Dialog.Content>
 					</Dialog>
@@ -171,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>
@@ -247,3 +295,31 @@ export const Default: Story = {
 		return <DemoUI />;
 	},
 };
+
+export const Nesting: Story = {
+	render() {
+		return (
+			<Box d="col" p gap>
+				<Box d="row" gap surface="primary">
+					<Button color="primary">Root theme</Button>
+				</Box>
+				<DemoUI className="theme-eggplant override-dark flex-1" />
+			</Box>
+		);
+	},
+};
+
+export const Override: Story = {
+	render() {
+		const [theme, setTheme] = useState<ThemeName | null>(null);
+		useOverrideTheme(theme);
+		return (
+			<Provider>
+				<Box d="col" p gap>
+					<ColorPicker value={theme} onChange={setTheme} />
+					<DemoUI />
+				</Box>
+			</Provider>
+		);
+	},
+};