diff --git a/web/src/app.css b/web/src/app.css index e2a2f66f..99187a84 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -12,6 +12,38 @@ here; dark-mode overrides live in the prefers-color-scheme block below. ========================================================================= */ + /* --- typography — synced from Figma "Font Styles" (node 1:186) --- */ + --text-heading-0: 5rem; + --text-heading-0--line-height: 5rem; + --text-heading-0--font-weight: 600; + --text-heading-0--letter-spacing: -0.25px; + --text-heading-1: 3rem; + --text-heading-1--line-height: 3.5rem; + --text-heading-1--font-weight: 500; + --text-heading-2: 1.875rem; + --text-heading-2--line-height: 1.875rem; + --text-heading-2--font-weight: 600; + --text-heading-3: 1.5rem; + --text-heading-3--line-height: 1.875rem; + --text-heading-3--font-weight: 500; + --text-heading-4: 1.25rem; + --text-heading-4--line-height: 1.75rem; + --text-heading-4--font-weight: 500; + --text-paragraph-large: 1rem; + --text-paragraph-large--line-height: 1.6875rem; + --text-paragraph-regular: 0.875rem; + --text-paragraph-regular--line-height: 1.5rem; + --text-paragraph-small: 0.75rem; + --text-paragraph-small--line-height: 1.25rem; + --text-paragraph-mini: 0.625rem; + --text-paragraph-mini--line-height: 1rem; + --text-monospace-large: 1rem; + --text-monospace-large--line-height: 1.5rem; + --text-monospace-regular: 0.875rem; + --text-monospace-regular--line-height: 1.375rem; + --text-monospace-small: 0.75rem; + --text-monospace-small--line-height: 1.25rem; + /* --- background --- */ --color-background-default: #ffffff; --color-background-subtle: #f9fafb; diff --git a/web/src/lib/components/ui/Typography.stories.svelte b/web/src/lib/components/ui/Typography.stories.svelte index c17c25b9..a844cabe 100644 --- a/web/src/lib/components/ui/Typography.stories.svelte +++ b/web/src/lib/components/ui/Typography.stories.svelte @@ -9,44 +9,79 @@ argTypes: { variant: { control: { type: "select" }, - options: ["h1", "h2", "h3", "h4", "body", "body-strong", "small", "caption", "mono"] + options: [ + "h0", + "h1", + "h2", + "h3", + "h4", + "large", + "regular", + "small", + "mini", + "mono-large", + "mono", + "mono-small" + ] + }, + weight: { + control: { type: "select" }, + options: ["regular", "semibold", "bold"] }, as: { control: "text" } }, args: { - variant: "body" + variant: "regular", + weight: "regular" } }); + + const paragraphSizes = ["large", "regular", "small", "mini"] as const; + const weights = ["regular", "semibold", "bold"] as const; +Design that ships Design that ships Design that ships Design that ships Design that ships - + Tangled is a social-enabled, decentralized code collaboration platform built on the AT Protocol. - + Tangled is a social-enabled, decentralized code collaboration platform. Last updated 2 hours ago. -Caption text for supporting detail. +Mini text for supporting detail. const tangled = true; Renders as a div while keeping h2 styling + -
- Heading 1 - Heading 2 - Heading 3 - Heading 4 - Body paragraph text. - Body strong paragraph text. - Small supporting text. - Caption text. - const scale = "type"; +
+
+ Heading 0 + Heading 1 + Heading 2 + Heading 3 + Heading 4 +
+
+ {#each paragraphSizes as size (size)} + {#each weights as weight (weight)} + + Paragraph {size} / {weight} + + {/each} + {/each} +
+
+ Monospace Large + Monospace Regular + Monospace Small +
diff --git a/web/src/lib/components/ui/Typography.svelte b/web/src/lib/components/ui/Typography.svelte index 1c3ae50d..0e106a68 100644 --- a/web/src/lib/components/ui/Typography.svelte +++ b/web/src/lib/components/ui/Typography.svelte @@ -2,42 +2,55 @@ import { tv, type VariantProps } from "tailwind-variants"; import type { SvelteHTMLElements } from "svelte/elements"; - // Scale sourced from Figma "Font Styles" (node 1:134): Heading 1-4 map to - // h1-h4, the "Paragraph Regular" size maps to body/body-strong (weight - // axis only), "Paragraph Small"/"Paragraph Mini" map to small/caption, and - // the monospace specimen maps to mono. export const typography = tv({ base: "font-sans text-foreground-default", variants: { variant: { - h1: "text-2xl font-bold leading-tight", - h2: "text-xl font-bold leading-tight", - h3: "text-lg font-semibold leading-snug", - h4: "text-base font-semibold leading-snug", - body: "text-base font-normal leading-normal", - "body-strong": "text-base font-semibold leading-normal", - small: "text-sm font-normal leading-normal text-foreground-muted", - caption: "text-xs font-normal leading-normal text-foreground-subtle", - mono: "font-mono text-sm font-normal leading-normal" + h0: "text-heading-0", + h1: "text-heading-1", + h2: "text-heading-2", + h3: "text-heading-3", + h4: "text-heading-4", + large: "text-paragraph-large", + regular: "text-paragraph-regular", + small: "text-paragraph-small", + mini: "text-paragraph-mini", + "mono-large": "font-mono text-monospace-large font-normal", + mono: "font-mono text-monospace-regular font-normal", + "mono-small": "font-mono text-monospace-small font-normal" + }, + weight: { + regular: "", + semibold: "", + bold: "" } }, + compoundVariants: (["large", "regular", "small", "mini"] as const).flatMap((variant) => [ + { variant, weight: "regular" as const, class: "font-normal" }, + { variant, weight: "semibold" as const, class: "font-medium" }, + { variant, weight: "bold" as const, class: "font-semibold" } + ]), defaultVariants: { - variant: "body" + variant: "regular", + weight: "regular" } }); export type TypographyVariants = VariantProps; const defaultTag = { + h0: "h1", h1: "h1", h2: "h2", h3: "h3", h4: "h4", - body: "p", - "body-strong": "p", + large: "p", + regular: "p", small: "span", - caption: "span", - mono: "code" + mini: "span", + "mono-large": "code", + mono: "code", + "mono-small": "code" } as const satisfies Record, keyof SvelteHTMLElements>; @@ -46,15 +59,16 @@ interface Props { variant?: TypographyVariants["variant"]; + weight?: TypographyVariants["weight"]; as?: keyof SvelteHTMLElements; class?: string; children: Snippet; } - let { variant = "body", as, class: className, children }: Props = $props(); + let { variant = "regular", weight = "regular", as, class: className, children }: Props = $props(); - const tag = $derived(as ?? defaultTag[variant ?? "body"]); - const classes = $derived(typography({ variant, class: className })); + const tag = $derived(as ?? defaultTag[variant ?? "regular"]); + const classes = $derived(typography({ variant, weight, class: className }));