alice.pds.demo.boltless.dev
This repository has no description
web/components/ui: remove Typography, update User accordingly
Signed-off-by: eti <eti@eti.tf>
author
eti
date
(Aug 1, 2026, 12:02 AM +0200)
commit
704dbf63
704dbf63e2bc4aeece18177a607aff5bd6f2b5e1
parent
5a342f37
5a342f377964a40450441f0caa20ad290f67828f
+17
-187
-87
web/src/lib/components/ui/Typography.stories.svelte
-87
web/src/lib/components/ui/Typography.stories.svelte
···
1
-
<script module lang="ts">
2
-
import { defineMeta } from "@storybook/addon-svelte-csf";
3
-
import Typography from "./Typography.svelte";
4
-
5
-
const { Story } = defineMeta({
6
-
title: "UI/Typography",
7
-
component: Typography,
8
-
tags: ["autodocs"],
9
-
argTypes: {
10
-
variant: {
11
-
control: { type: "select" },
12
-
options: [
13
-
"h0",
14
-
"h1",
15
-
"h2",
16
-
"h3",
17
-
"h4",
18
-
"large",
19
-
"regular",
20
-
"small",
21
-
"mini",
22
-
"mono-large",
23
-
"mono",
24
-
"mono-small"
25
-
]
26
-
},
27
-
weight: {
28
-
control: { type: "select" },
29
-
options: ["regular", "semibold", "bold"]
30
-
},
31
-
as: { control: "text" }
32
-
},
33
-
args: {
34
-
variant: "regular",
35
-
weight: "regular"
36
-
}
37
-
});
38
-
39
-
const paragraphSizes = ["large", "regular", "small", "mini"] as const;
40
-
const weights = ["regular", "semibold", "bold"] as const;
41
-
</script>
42
-
43
-
<!-- Typography content comes through its `children` snippet, provided here as Story slot content. -->
44
-
<Story name="H0" args={{ variant: "h0" }}>Design that ships</Story>
45
-
<Story name="H1" args={{ variant: "h1" }}>Design that ships</Story>
46
-
<Story name="H2" args={{ variant: "h2" }}>Design that ships</Story>
47
-
<Story name="H3" args={{ variant: "h3" }}>Design that ships</Story>
48
-
<Story name="H4" args={{ variant: "h4" }}>Design that ships</Story>
49
-
<Story name="Paragraph" args={{ variant: "regular" }}>
50
-
Tangled is a social-enabled, decentralized code collaboration platform built on the AT Protocol.
51
-
</Story>
52
-
<Story name="ParagraphBold" args={{ variant: "regular", weight: "bold" }}>
53
-
Tangled is a social-enabled, decentralized code collaboration platform.
54
-
</Story>
55
-
<Story name="Small" args={{ variant: "small" }}>Last updated 2 hours ago.</Story>
56
-
<Story name="Mini" args={{ variant: "mini" }}>Mini text for supporting detail.</Story>
57
-
<Story name="Mono" args={{ variant: "mono" }}>const tangled = true;</Story>
58
-
<Story name="CustomTag" args={{ variant: "h2", as: "div" }}>
59
-
Renders as a div while keeping h2 styling
60
-
</Story>
61
-
62
-
<!-- Mirrors the Figma "Font Styles" specimen (node 1:186). -->
63
-
<Story name="Scale">
64
-
<div class="flex flex-col gap-12">
65
-
<div class="flex flex-col gap-3">
66
-
<Typography variant="h0">Heading 0</Typography>
67
-
<Typography variant="h1">Heading 1</Typography>
68
-
<Typography variant="h2">Heading 2</Typography>
69
-
<Typography variant="h3">Heading 3</Typography>
70
-
<Typography variant="h4">Heading 4</Typography>
71
-
</div>
72
-
<div class="flex flex-col gap-3">
73
-
{#each paragraphSizes as size (size)}
74
-
{#each weights as weight (weight)}
75
-
<Typography variant={size} {weight}>
76
-
Paragraph {size} / {weight}
77
-
</Typography>
78
-
{/each}
79
-
{/each}
80
-
</div>
81
-
<div class="flex flex-col gap-3">
82
-
<Typography variant="mono-large">Monospace Large</Typography>
83
-
<Typography variant="mono">Monospace Regular</Typography>
84
-
<Typography variant="mono-small">Monospace Small</Typography>
85
-
</div>
86
-
</div>
87
-
</Story>
-76
web/src/lib/components/ui/Typography.svelte
-76
web/src/lib/components/ui/Typography.svelte
···
1
-
<script module lang="ts">
2
-
import { tv, type VariantProps } from "tailwind-variants";
3
-
import type { SvelteHTMLElements } from "svelte/elements";
4
-
5
-
export const typography = tv({
6
-
base: "font-sans text-foreground-default",
7
-
variants: {
8
-
variant: {
9
-
h0: "typography-heading-0",
10
-
h1: "typography-heading-1",
11
-
h2: "typography-heading-2",
12
-
h3: "typography-heading-3",
13
-
h4: "typography-heading-4",
14
-
large: "typography-paragraph-large",
15
-
regular: "typography-paragraph-regular",
16
-
small: "typography-paragraph-small",
17
-
mini: "typography-paragraph-mini",
18
-
"mono-large": "font-mono typography-monospace-large font-normal",
19
-
mono: "font-mono typography-monospace-regular font-normal",
20
-
"mono-small": "font-mono typography-monospace-small font-normal"
21
-
},
22
-
weight: {
23
-
regular: "",
24
-
semibold: "",
25
-
bold: ""
26
-
}
27
-
},
28
-
compoundVariants: (["large", "regular", "small", "mini"] as const).flatMap((variant) => [
29
-
{ variant, weight: "regular" as const, class: "font-normal" },
30
-
{ variant, weight: "semibold" as const, class: "font-medium" },
31
-
{ variant, weight: "bold" as const, class: "font-semibold" }
32
-
]),
33
-
defaultVariants: {
34
-
variant: "regular",
35
-
weight: "regular"
36
-
}
37
-
});
38
-
39
-
export type TypographyVariants = VariantProps<typeof typography>;
40
-
41
-
const defaultTag = {
42
-
h0: "h1",
43
-
h1: "h1",
44
-
h2: "h2",
45
-
h3: "h3",
46
-
h4: "h4",
47
-
large: "p",
48
-
regular: "p",
49
-
small: "span",
50
-
mini: "span",
51
-
"mono-large": "code",
52
-
mono: "code",
53
-
"mono-small": "code"
54
-
} as const satisfies Record<NonNullable<TypographyVariants["variant"]>, keyof SvelteHTMLElements>;
55
-
</script>
56
-
57
-
<script lang="ts">
58
-
import type { Snippet } from "svelte";
59
-
60
-
interface Props {
61
-
variant?: TypographyVariants["variant"];
62
-
weight?: TypographyVariants["weight"];
63
-
as?: keyof SvelteHTMLElements;
64
-
class?: string;
65
-
children: Snippet;
66
-
}
67
-
68
-
let { variant = "regular", weight = "regular", as, class: className, children }: Props = $props();
69
-
70
-
const tag = $derived(as ?? defaultTag[variant ?? "regular"]);
71
-
const classes = $derived(typography({ variant, weight, class: className }));
72
-
</script>
73
-
74
-
<svelte:element this={tag} class={classes}>
75
-
{@render children()}
76
-
</svelte:element>
+17
-24
web/src/lib/components/ui/User.svelte
+17
-24
web/src/lib/components/ui/User.svelte
···
1
1
<script module lang="ts">
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
-
import type { TypographyVariants } from "./Typography.svelte";
4
3
5
4
export const user = tv({
6
5
slots: {
···
12
11
size: {
13
12
header: {
14
13
root: "gap-2",
15
-
avatar: "size-6.5"
14
+
avatar: "size-6.5",
15
+
handle: "typography-heading-4"
16
16
},
17
17
large: {
18
18
root: "gap-1.5",
19
-
avatar: "size-6.5"
19
+
avatar: "size-6.5",
20
+
handle: "typography-paragraph-large"
20
21
},
21
22
regular: {
22
23
root: "gap-1",
23
-
avatar: "size-5.25"
24
+
avatar: "size-5.25",
25
+
handle: "typography-paragraph-regular"
24
26
},
25
27
small: {
26
28
root: "gap-1",
27
-
avatar: "size-4.25"
29
+
avatar: "size-4.25",
30
+
handle: "typography-paragraph-small"
28
31
},
29
32
mini: {
30
33
root: "gap-1",
31
-
avatar: "size-3.25"
34
+
avatar: "size-3.25",
35
+
handle: "typography-paragraph-mini"
32
36
}
33
37
}
34
38
},
···
38
42
});
39
43
40
44
export type UserVariants = VariantProps<typeof user>;
41
-
42
-
const handleVariant = {
43
-
header: "h4",
44
-
large: "large",
45
-
regular: "regular",
46
-
small: "small",
47
-
mini: "mini"
48
-
} as const satisfies Record<NonNullable<UserVariants["size"]>, TypographyVariants["variant"]>;
49
45
</script>
50
46
51
47
<script lang="ts">
52
48
import Avatar from "./Avatar.svelte";
53
-
import { typography } from "./Typography.svelte";
54
49
55
50
interface Props {
56
51
handle?: string;
···
59
54
showImage?: boolean;
60
55
showText?: boolean;
61
56
class?: string;
57
+
avatarClass?: string;
58
+
handleClass?: string;
62
59
}
63
60
64
61
let {
···
67
64
size = "regular",
68
65
showImage = true,
69
66
showText = true,
70
-
class: className
67
+
class: className,
68
+
avatarClass,
69
+
handleClass
71
70
}: Props = $props();
72
71
73
72
const slots = $derived(user({ size }));
74
-
const handleClass = $derived(
75
-
typography({
76
-
variant: handleVariant[size ?? "regular"],
77
-
class: slots.handle()
78
-
})
79
-
);
80
73
</script>
81
74
82
75
<span class={slots.root({ class: className })}>
83
76
{#if showImage}
84
77
<!-- every variant here is size-8 or under, so the small image always fits -->
85
-
<Avatar {did} {handle} size={slots.avatar()} tiny />
78
+
<Avatar {did} {handle} size={slots.avatar({ class: avatarClass })} tiny />
86
79
{/if}
87
80
{#if showText && handle}
88
-
<span class={handleClass}>{handle}</span>
81
+
<span class={slots.handle({ class: handleClass })}>{handle}</span>
89
82
{/if}
90
83
</span>