@a-type/ui 1.0.10 → 1.0.12

package/src/themes.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import clsx from 'clsx';
+import { Button } from './components/button.js';
+import { Input } from './components/input.js';
+import { TextArea } from './components/textArea.js';
+import { Card } from './components/card.js';
+import { Tabs } from './components/tabs.js';
+
+const meta = {
+	title: 'themes',
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+function DemoUI({ className }: { className?: string }) {
+	return (
+		<div className={clsx('grid gap-2 grid-cols-3', className)}>
+			<div className="col">
+				<Button color="primary">Primary</Button>
+				<Button color="accent">Accent</Button>
+				<Button>Default</Button>
+				<Button size="small" color="destructive">
+					Destructive
+				</Button>
+				<Button size="small" color="ghostDestructive">
+					Ghost Destructive
+				</Button>
+			</div>
+			<div className="col">
+				<Input placeholder="Placeholder" />
+				<TextArea placeholder="Placeholder" />
+			</div>
+			<div>
+				<Card>
+					<Card.Main>
+						<Card.Title>Card Title</Card.Title>
+						<Card.Content>Card Content</Card.Content>
+					</Card.Main>
+					<Card.Footer>
+						<Card.Actions>
+							<Button size="small">Action 1</Button>
+						</Card.Actions>
+					</Card.Footer>
+				</Card>
+			</div>
+			<div>
+				<Tabs defaultValue="tab1">
+					<Tabs.List>
+						<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+						<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+					</Tabs.List>
+					<Tabs.Content value="tab1">Tab 1 Content</Tabs.Content>
+					<Tabs.Content value="tab2">Tab 2 Content</Tabs.Content>
+				</Tabs>
+			</div>
+		</div>
+	);
+}
+
+export const Default: Story = {
+	render() {
+		return <DemoUI />;
+	},
+};

package/src/uno.preset.ts

@@ -433,13 +433,13 @@ export default function presetAglio({
 					--palette-red-00: #321f19;
 					--palette-green-90: #e9fff1;
 					--palette-green-80: #c2ffe1;
-					--palette-green-70: #8ff8c4;
-					--palette-green-60: #71f0a8;
-					--palette-green-50: #56d187;
-					--palette-green-40: #499d6f;
-					--palette-green-30: #1f8355;
-					--palette-green-20: #24694b;
-					--palette-green-10: #274e3c;
+					--palette-green-70: #8ff8e0;
+					--palette-green-60: #79efe7;
+					--palette-green-50: #63cec4;
+					--palette-green-40: #499d92;
+					--palette-green-30: #1f837c;
+					--palette-green-20: #246869;
+					--palette-green-10: #274e48;
 					--palette-green-00: #183527;
 					--palette-yellow-90: #fff9ef;
 					--palette-yellow-80: #fff1c7;
@@ -718,10 +718,10 @@ export default function presetAglio({
 				}
 
 				.theme-tomato {
-					--color-attention-light: var(--color-blue-light);
-					--color-attention: var(--color-blue);
-					--color-attention-dark: var(--color-blue-dark);
-					--color-attention-wash: var(--color-blue-wash);
+					--color-attention-light: var(--color-yellow-light);
+					--color-attention: var(--color-yellow);
+					--color-attention-dark: var(--color-yellow-dark);
+					--color-attention-wash: var(--color-yellow-wash);
 					--color-accent: var(--color-green);
 					--color-accent-wash: var(--color-green-wash);
 					--color-accent-light: var(--color-green-light);