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 alpha: { control: "boolean" }
12 },
13 args: {
14 wordmark: false,
15 alpha: false
16 }
17 });
18</script>
19
20<Story name="Icon" />
21<Story name="Wordmark" args={{ wordmark: true }} />
22
23<Story name="Colors" asChild>
24 <div class="flex flex-col items-start gap-4">
25 <Logo class="text-foreground-muted" />
26 <Logo class="text-foreground-success" />
27 <Logo class="text-foreground-danger" />
28 <Logo class="text-foreground-info" />
29 <Logo class="text-foreground-warning" />
30 </div>
31</Story>
32
33<Story name="Wordmark Colors" asChild>
34 <div class="flex flex-col items-start gap-4">
35 <Logo wordmark class="text-foreground-muted" />
36 <Logo wordmark class="text-foreground-success" />
37 <Logo wordmark class="text-foreground-info" />
38 </div>
39</Story>
40
41<Story name="On Emphasis" asChild>
42 <div class="flex flex-col items-start gap-4 rounded-sm bg-background-success-emphasis p-4">
43 <Logo class="text-foreground-on-emphasis" />
44 <Logo wordmark class="text-foreground-on-emphasis" />
45 </div>
46</Story>