alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Logo from "./Logo.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Logo",
7 component: Logo,
8 tags: ["autodocs"],
9 argTypes: {
10 wordmark: { control: "boolean" }
11 },
12 args: {
13 wordmark: false
14 }
15 });
16</script>
17
18<Story name="Icon" />
19<Story name="Wordmark" args={{ wordmark: true }} />
20
21<Story name="Both" asChild>
22 <div class="flex flex-col items-start gap-4">
23 <Logo />
24 <Logo wordmark />
25 </div>
26</Story>
27
28<Story name="Colors" asChild>
29 <div class="flex flex-col items-start gap-4">
30 <Logo class="text-foreground-muted" />
31 <Logo class="text-foreground-success" />
32 <Logo class="text-foreground-danger" />
33 <Logo class="text-foreground-info" />
34 <Logo class="text-foreground-warning" />
35 </div>
36</Story>
37
38<Story name="Wordmark Colors" asChild>
39 <div class="flex flex-col items-start gap-4">
40 <Logo wordmark class="text-foreground-muted" />
41 <Logo wordmark class="text-foreground-success" />
42 <Logo wordmark class="text-foreground-info" />
43 </div>
44</Story>
45
46<Story name="On Emphasis" asChild>
47 <div class="bg-background-success-emphasis flex flex-col items-start gap-4 rounded p-4">
48 <Logo class="text-foreground-on-emphasis" />
49 <Logo wordmark class="text-foreground-on-emphasis" />
50 </div>
51</Story>