From a392b3b70574219131551fd4af0ec0c1ca3ed893 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 30 Jul 2026 00:04:38 +0200
Subject: [PATCH] web: teach tailwind-merge about the type scale tokens

the design-system type utilities are text-heading-3, text-paragraph-small and so
on, which tailwind-merge reads as text-<colour> rather than as font sizes. that
means any tv() definition whose variants set a text colour silently drops its own
size: tv({ base: 'text-paragraph-small text-foreground-muted' }) resolves to just
the colour.

/tv exports a createTV instance that registers the tokens as font sizes, so
the size and the colour both survive while Tailwind's own text-sm/text-lg
merging keeps working. every component that used tv now imports it from there.

User.svelte is the one holdout, since it has unrelated uncommitted work in it.

Signed-off-by: eti <eti@eti.tf>
---
 .../repo/issues/IssueStatePill.svelte         |  2 +-
 web/src/lib/components/ui/Button.svelte       |  2 +-
 web/src/lib/components/ui/ButtonCard.svelte   |  2 +-
 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/Error.svelte        |  2 +-
 web/src/lib/components/ui/Input.svelte        |  2 +-
 web/src/lib/components/ui/Link.svelte         |  2 +-
 web/src/lib/components/ui/Pagination.svelte   |  2 +-
 web/src/lib/components/ui/Select.svelte       |  2 +-
 web/src/lib/components/ui/Tag.svelte          |  2 +-
 web/src/lib/components/ui/Textarea.svelte     |  2 +-
 web/src/lib/components/ui/Typography.svelte   |  2 +-
 web/src/lib/tv.ts                             | 39 +++++++++++++++++++
 15 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 web/src/lib/tv.ts

diff --git a/web/src/lib/components/repo/issues/IssueStatePill.svelte b/web/src/lib/components/repo/issues/IssueStatePill.svelte
index a8e752b6..3098e842 100644
--- a/web/src/lib/components/repo/issues/IssueStatePill.svelte
+++ b/web/src/lib/components/repo/issues/IssueStatePill.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const issueStatePill = tv({
 		base: "inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-foreground-on-emphasis select-none",
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index f87ad0ae..6c562739 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const button = tv({
 		base: [
diff --git a/web/src/lib/components/ui/ButtonCard.svelte b/web/src/lib/components/ui/ButtonCard.svelte
index 461ca614..d8f7720f 100644
--- a/web/src/lib/components/ui/ButtonCard.svelte
+++ b/web/src/lib/components/ui/ButtonCard.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const buttonCard = tv({
 		base: [
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index 817983ff..7ec3968e 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 	import type { ButtonVariants } from "./Button.svelte";
 
 	export const buttonGroup = tv({
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index 49339bdf..db31ec21 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { SvelteMap, SvelteSet } from "svelte/reactivity";
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const dropdown = tv({
 		slots: {
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index 94ace008..2ecec5d6 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const dropdownItem = tv({
 		base: "flex w-full cursor-pointer items-center gap-2 bg-transparent p-2 text-left no-underline hover:no-underline",
diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte
index d29af2d9..561df9d6 100644
--- a/web/src/lib/components/ui/Error.svelte
+++ b/web/src/lib/components/ui/Error.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const error = tv({
 		slots: {
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
index f90bf862..cf71cc72 100644
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const inputField = tv({
 		base: "flex min-h-9 items-center gap-2 rounded border bg-background-default px-2 py-1 transition-colors",
diff --git a/web/src/lib/components/ui/Link.svelte b/web/src/lib/components/ui/Link.svelte
index 16846a60..7aba2344 100644
--- a/web/src/lib/components/ui/Link.svelte
+++ b/web/src/lib/components/ui/Link.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const link = tv({
 		base: "inline-flex cursor-pointer items-center gap-1 no-underline transition-colors duration-150 ease-in-out select-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2",
diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte
index ef3d5d4b..29d26c1c 100644
--- a/web/src/lib/components/ui/Pagination.svelte
+++ b/web/src/lib/components/ui/Pagination.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv } from "tailwind-variants";
+	import { tv } from "$lib/tv";
 
 	export const pagination = tv({
 		base: "flex items-center gap-1"
diff --git a/web/src/lib/components/ui/Select.svelte b/web/src/lib/components/ui/Select.svelte
index f5bfa2f8..e5bdfc28 100644
--- a/web/src/lib/components/ui/Select.svelte
+++ b/web/src/lib/components/ui/Select.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const select = tv({
 		base: "w-full appearance-none rounded border bg-background-default px-3 py-2 pr-9 text-sm transition-colors outline-none disabled:cursor-not-allowed",
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index ab69fbef..2e3baf0a 100644
--- a/web/src/lib/components/ui/Tag.svelte
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	export const tag = tv({
 		base: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs leading-none font-medium select-none",
diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
index 960a580b..0e007aff 100644
--- a/web/src/lib/components/ui/Textarea.svelte
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 
 	// exported so anything that swaps itself in for the field — MarkdownEditor's preview pane —
 	// can match its height and avoid resizing the box as you toggle between them.
diff --git a/web/src/lib/components/ui/Typography.svelte b/web/src/lib/components/ui/Typography.svelte
index 0e106a68..b0f3c44f 100644
--- a/web/src/lib/components/ui/Typography.svelte
+++ b/web/src/lib/components/ui/Typography.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { tv, type VariantProps } from "$lib/tv";
 	import type { SvelteHTMLElements } from "svelte/elements";
 
 	export const typography = tv({
diff --git a/web/src/lib/tv.ts b/web/src/lib/tv.ts
new file mode 100644
index 00000000..325463c0
--- /dev/null
+++ b/web/src/lib/tv.ts
@@ -0,0 +1,39 @@
+import { createTV } from "tailwind-variants";
+
+/**
+ * The design-system type scale lives in `app.css` as `--text-heading-*`,
+ * `--text-paragraph-*` and `--text-monospace-*`, so its utilities read
+ * `text-heading-3`, `text-paragraph-small`, `text-monospace-regular`, and so on.
+ *
+ * tailwind-merge can't tell those apart from `text-<colour>` utilities on its own,
+ * so it treats them as colours and quietly drops the size as soon as a colour
+ * follows — which, in a `tv()` definition whose variants set text colours, is
+ * always. Registering them as font sizes is what keeps both the size and the
+ * colour, and it leaves Tailwind's own `text-sm`/`text-lg` merging intact.
+ *
+ * Use this `tv` rather than importing it straight from `tailwind-variants`.
+ */
+const fontSizes = [
+	"heading-0",
+	"heading-1",
+	"heading-2",
+	"heading-3",
+	"heading-4",
+	"paragraph-large",
+	"paragraph-regular",
+	"paragraph-small",
+	"paragraph-mini",
+	"monospace-large",
+	"monospace-regular",
+	"monospace-small"
+];
+
+export const tv = createTV({
+	twMergeConfig: {
+		classGroups: {
+			"font-size": [{ text: fontSizes }]
+		}
+	}
+});
+
+export type { VariantProps } from "tailwind-variants";
-- 
2.51.2