From 62830504b3a16a085056d5ea53309c56b41c56d6 Mon Sep 17 00:00:00 2001 From: eti Date: Thu, 30 Jul 2026 14:41:47 +0200 Subject: [PATCH] web: move the type scale onto typography-* utilities MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit the scale lived in @theme as --text-heading-*, --text-paragraph-* and --text-monospace-*, so it generated text-heading-3, text-paragraph-small and so on. tailwind-merge classes anything shaped like that as a colour, so inside a tv() whose variants set text colours it dropped the size as soon as a colour followed — which, in those definitions, is always. $lib/tv.ts existed only to re-register the twelve names as font sizes, and every tv() in the app had to import from there rather than from tailwind-variants to pick that up. naming them typography-* sidesteps the collision instead of patching it: the classes match no tailwind-merge group at all, so nothing can read them as colours and the shim is gone. they're @utility blocks rather than theme tokens now, since --text-* is precisely the namespace that spells its utilities text-*. font-size comes first in each block on purpose. tailwind sorts a custom utility into the bucket of its first declared property, which keeps typography-* ahead of every font-weight, leading-* and tracking-* utility in the sheet, so the call sites pairing typography-heading-4 with leading-8 font-normal still resolve the way they did. this does give up size-against-size merging: two typography-* classes in one string no longer collapse, so a size passed in through class= sits next to the component's own and the stylesheet order picks the winner. nothing does that today — Typography takes a variant prop for it — and one classGroups entry brings the merging back if it ever comes up. Signed-off-by: eti --- web/src/app.css | 109 +++++++++++++----- .../lib/components/home/MarketingHome.svelte | 10 +- .../components/profile/ActivityStub.svelte | 2 +- .../components/profile/FollowButton.svelte | 2 +- .../lib/components/profile/ProfileCard.svelte | 4 +- .../components/profile/ProfileEditForm.svelte | 2 +- .../profile/StringCardContent.svelte | 2 +- .../profile/tabs/OverviewTab.svelte | 2 +- web/src/lib/components/repo/BranchList.svelte | 4 +- .../lib/components/repo/CloneDropdown.svelte | 6 +- web/src/lib/components/repo/CommitList.svelte | 4 +- web/src/lib/components/repo/EmptyRepo.svelte | 2 +- .../lib/components/repo/LanguageBar.svelte | 2 +- .../components/repo/LastCommitPanel.svelte | 2 +- .../components/repo/RepoCardContent.svelte | 2 +- web/src/lib/components/repo/RepoHeader.svelte | 2 +- web/src/lib/components/repo/StarButton.svelte | 5 +- web/src/lib/components/repo/TagList.svelte | 4 +- .../components/repo/issues/IssueHeader.svelte | 2 +- .../repo/issues/IssueStatePill.svelte | 2 +- .../components/settings/tabs/EmailsTab.svelte | 2 +- .../components/settings/tabs/KeysTab.svelte | 2 +- .../components/settings/tabs/KnotsTab.svelte | 2 +- .../settings/tabs/NotificationsTab.svelte | 4 +- .../settings/tabs/ProfileTab.svelte | 2 +- .../components/settings/tabs/SitesTab.svelte | 2 +- .../settings/tabs/SpindlesTab.svelte | 2 +- web/src/lib/components/shell/Footer.svelte | 6 +- web/src/lib/components/ui/Button.svelte | 4 +- web/src/lib/components/ui/ButtonCard.svelte | 4 +- web/src/lib/components/ui/ButtonGroup.svelte | 2 +- web/src/lib/components/ui/Dropdown.svelte | 2 +- web/src/lib/components/ui/DropdownItem.svelte | 2 +- web/src/lib/components/ui/EmptyState.svelte | 2 +- web/src/lib/components/ui/Error.svelte | 6 +- web/src/lib/components/ui/Field.svelte | 4 +- web/src/lib/components/ui/Input.svelte | 2 +- web/src/lib/components/ui/Link.svelte | 4 +- web/src/lib/components/ui/Pagination.svelte | 2 +- web/src/lib/components/ui/Section.svelte | 2 +- web/src/lib/components/ui/Select.svelte | 2 +- web/src/lib/components/ui/Tag.svelte | 4 +- web/src/lib/components/ui/Textarea.svelte | 2 +- web/src/lib/components/ui/Typography.svelte | 26 ++--- web/src/lib/tv.ts | 39 ------- web/src/markup.css | 18 +-- web/src/routes/+error.svelte | 4 +- web/src/routes/+page.svelte | 2 +- .../[handle]/[repo]/issues/new/+page.svelte | 2 +- web/src/routes/login/+page.svelte | 10 +- web/src/routes/oauth/callback/+page.svelte | 2 +- web/src/routes/repo/new/+page.svelte | 8 +- web/src/routes/settings/+layout.svelte | 2 +- web/src/routes/strings/new/+page.svelte | 2 +- 54 files changed, 182 insertions(+), 169 deletions(-) delete mode 100644 web/src/lib/tv.ts diff --git a/web/src/app.css b/web/src/app.css index 934bc84f..b9245093 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -13,38 +13,6 @@ 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; @@ -159,6 +127,83 @@ --color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent); } +/* ============================================================================= + Type scale — synced from Figma "Font Styles" (node 1:186) + + These are `typography-*` utilities rather than `--text-*` theme tokens on + purpose: named `text-heading-3` & co. they collided with `text-` in + tailwind-merge, which classes them as colours and drops the size as soon as a + colour follows. Declare `font-size` first in each block — Tailwind sorts a + custom utility by its first property, and that is what keeps an explicit + `font-medium`/`font-bold` winning over the weight baked in here. + ============================================================================= */ + +@utility typography-heading-0 { + font-size: 5rem; + line-height: 5rem; + font-weight: 600; + letter-spacing: -0.25px; +} + +@utility typography-heading-1 { + font-size: 3rem; + line-height: 3.5rem; + font-weight: 500; +} + +@utility typography-heading-2 { + font-size: 1.875rem; + line-height: 1.875rem; + font-weight: 600; +} + +@utility typography-heading-3 { + font-size: 1.5rem; + line-height: 1.875rem; + font-weight: 500; +} + +@utility typography-heading-4 { + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 500; +} + +@utility typography-paragraph-large { + font-size: 1rem; + line-height: 1.6875rem; +} + +@utility typography-paragraph-regular { + font-size: 0.875rem; + line-height: 1.5rem; +} + +@utility typography-paragraph-small { + font-size: 0.75rem; + line-height: 1.25rem; +} + +@utility typography-paragraph-mini { + font-size: 0.625rem; + line-height: 1rem; +} + +@utility typography-monospace-large { + font-size: 1rem; + line-height: 1.5rem; +} + +@utility typography-monospace-regular { + font-size: 0.875rem; + line-height: 1.375rem; +} + +@utility typography-monospace-small { + font-size: 0.75rem; + line-height: 1.25rem; +} + @layer base { @font-face { font-family: "InterVariable"; diff --git a/web/src/lib/components/home/MarketingHome.svelte b/web/src/lib/components/home/MarketingHome.svelte index baadeb11..5dd94733 100644 --- a/web/src/lib/components/home/MarketingHome.svelte +++ b/web/src/lib/components/home/MarketingHome.svelte @@ -14,7 +14,7 @@ {#snippet marketingButton(label: string, showArrow: boolean, className: string)} {#if relation.failed} -

+

Something went wrong. Try again.

{/if} diff --git a/web/src/lib/components/profile/ProfileCard.svelte b/web/src/lib/components/profile/ProfileCard.svelte index 326af57c..3c4a578f 100644 --- a/web/src/lib/components/profile/ProfileCard.svelte +++ b/web/src/lib/components/profile/ProfileCard.svelte @@ -53,7 +53,7 @@

{identity.handle}

@@ -79,7 +79,7 @@ {:else}
{#if shown?.description} -

{shown.description}

+

{shown.description}

{/if} {#if error} -

{error}

+

{error}

{/if}
diff --git a/web/src/lib/components/profile/StringCardContent.svelte b/web/src/lib/components/profile/StringCardContent.svelte index 30a50214..20f14264 100644 --- a/web/src/lib/components/profile/StringCardContent.svelte +++ b/web/src/lib/components/profile/StringCardContent.svelte @@ -23,7 +23,7 @@ {/if}
{entry.lines} line{entry.lines === 1 ? "" : "s"} · {compactRelativeTime( diff --git a/web/src/lib/components/profile/tabs/OverviewTab.svelte b/web/src/lib/components/profile/tabs/OverviewTab.svelte index 7198b39c..b82a2430 100644 --- a/web/src/lib/components/profile/tabs/OverviewTab.svelte +++ b/web/src/lib/components/profile/tabs/OverviewTab.svelte @@ -25,7 +25,7 @@
-

Activity

+

Activity

diff --git a/web/src/lib/components/repo/BranchList.svelte b/web/src/lib/components/repo/BranchList.svelte index cf7378c7..dd3f70c8 100644 --- a/web/src/lib/components/repo/BranchList.svelte +++ b/web/src/lib/components/repo/BranchList.svelte @@ -20,7 +20,7 @@
{#each branches as branch (branch.name)} -
+
{/if} {#if branch.isDefault} diff --git a/web/src/lib/components/repo/CloneDropdown.svelte b/web/src/lib/components/repo/CloneDropdown.svelte index 72a75ff0..a2a24cfc 100644 --- a/web/src/lib/components/repo/CloneDropdown.svelte +++ b/web/src/lib/components/repo/CloneDropdown.svelte @@ -74,7 +74,7 @@

Clone this repository

{#if repo.repoDid} - + Use permalink {/if} @@ -83,7 +83,7 @@ {#each urls as entry (entry.label)} {@const value = permalink && entry.perma ? entry.perma : entry.handle}
- {entry.label}
{/each} -

+

For self-hosted knots, clone URLs may differ based on your setup.

diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte index e249809f..6d898306 100644 --- a/web/src/lib/components/repo/CommitList.svelte +++ b/web/src/lib/components/repo/CommitList.svelte @@ -24,7 +24,7 @@
{commit.subject} @@ -46,7 +46,7 @@ {/if}
{n} diff --git a/web/src/lib/components/repo/LanguageBar.svelte b/web/src/lib/components/repo/LanguageBar.svelte index 1c4e22dc..2bb5d470 100644 --- a/web/src/lib/components/repo/LanguageBar.svelte +++ b/web/src/lib/components/repo/LanguageBar.svelte @@ -29,7 +29,7 @@ class="flex flex-wrap items-center justify-center gap-4 border-b border-border-default px-4 py-2" > {#each languages as language (language.name)} -
+
{commit.shortHash} diff --git a/web/src/lib/components/repo/RepoCardContent.svelte b/web/src/lib/components/repo/RepoCardContent.svelte index f1e07b52..10ec9b0f 100644 --- a/web/src/lib/components/repo/RepoCardContent.svelte +++ b/web/src/lib/components/repo/RepoCardContent.svelte @@ -53,7 +53,7 @@ {#if repo.language !== undefined || stats.length > 0}
{#if repo.language} diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte index 2354c520..f4a21ef4 100644 --- a/web/src/lib/components/repo/RepoHeader.svelte +++ b/web/src/lib/components/repo/RepoHeader.svelte @@ -28,7 +28,7 @@
-
+
{#if failed} -

+

Something went wrong. Try again.

{/if} diff --git a/web/src/lib/components/repo/TagList.svelte b/web/src/lib/components/repo/TagList.svelte index 0abc37a3..8ba5928a 100644 --- a/web/src/lib/components/repo/TagList.svelte +++ b/web/src/lib/components/repo/TagList.svelte @@ -18,7 +18,7 @@
{#each tags as tag, index (tag.name)}
-
+
{#if tag.when} - + {/if} {#if index === 0} Latest diff --git a/web/src/lib/components/repo/issues/IssueHeader.svelte b/web/src/lib/components/repo/issues/IssueHeader.svelte index a6484169..bc45a2ba 100644 --- a/web/src/lib/components/repo/issues/IssueHeader.svelte +++ b/web/src/lib/components/repo/issues/IssueHeader.svelte @@ -9,7 +9,7 @@
-

+

{title} #{rkey}

diff --git a/web/src/lib/components/repo/issues/IssueStatePill.svelte b/web/src/lib/components/repo/issues/IssueStatePill.svelte index 3098e842..a8e752b6 100644 --- a/web/src/lib/components/repo/issues/IssueStatePill.svelte +++ b/web/src/lib/components/repo/issues/IssueStatePill.svelte @@ -1,5 +1,5 @@
-

Profile

+

Profile

Your account information from your AT Protocol identity.

diff --git a/web/src/lib/components/settings/tabs/SitesTab.svelte b/web/src/lib/components/settings/tabs/SitesTab.svelte index 1c0d1d70..96ffc375 100644 --- a/web/src/lib/components/settings/tabs/SitesTab.svelte +++ b/web/src/lib/components/settings/tabs/SitesTab.svelte @@ -1,4 +1,4 @@
-

Git sites

+

Git sites

diff --git a/web/src/lib/components/settings/tabs/SpindlesTab.svelte b/web/src/lib/components/settings/tabs/SpindlesTab.svelte index 182bcfc6..68d5a259 100644 --- a/web/src/lib/components/settings/tabs/SpindlesTab.svelte +++ b/web/src/lib/components/settings/tabs/SpindlesTab.svelte @@ -1,5 +1,5 @@
-

Spindles

+

Spindles

Spindles are servers that run continuous integration pipelines for your repositories.

diff --git a/web/src/lib/components/shell/Footer.svelte b/web/src/lib/components/shell/Footer.svelte index 234dced6..4a681f93 100644 --- a/web/src/lib/components/shell/Footer.svelte +++ b/web/src/lib/components/shell/Footer.svelte @@ -46,7 +46,7 @@ const appPath = (path: string) => resolve(path as "/"); const headerStyle = "text-foreground-default font-bold text-sm tracking-wide mb-1"; const mobileHeaderStyle = - "text-foreground-default font-bold text-paragraph-small tracking-wide mb-1"; + "text-foreground-default font-bold typography-paragraph-small tracking-wide mb-1"; const linkStyle = "inline-flex items-center gap-1 text-foreground-subtle hover:text-foreground-default hover:underline"; const minimalLinkStyle = "text-foreground-subtle hover:text-foreground-default hover:underline"; @@ -405,7 +405,7 @@
-
+
© 2026 Tangled Labs Oy. All rights reserved.
@@ -439,7 +439,7 @@
-
+
© 2026 Tangled Labs Oy. All rights reserved.
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte index e3fe8220..fffff130 100644 --- a/web/src/lib/components/ui/Button.svelte +++ b/web/src/lib/components/ui/Button.svelte @@ -1,5 +1,5 @@
{message}{@render children?.()}
diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte index 4f97f026..7b3fdd77 100644 --- a/web/src/lib/components/ui/Error.svelte +++ b/web/src/lib/components/ui/Error.svelte @@ -1,5 +1,5 @@