From 48a3b51f8e9160ae21bca4b393a3411c50f38777 Mon Sep 17 00:00:00 2001 From: Ronja Date: Fri, 16 Oct 2026 13:52:25 +0200 Subject: [PATCH 1/2] feat: expose design tokens as Tailwind utilities --- docs/AI_USAGE.md | 11 +++++++++++ index.html | 6 ++++++ src/index.css | 44 ++++++++++++++++++++++++++++++++++++++------ 3 files changed, 55 insertions(+), 6 deletions(-) diff --git a/docs/AI_USAGE.md b/docs/AI_USAGE.md index 49e8d28..b52d5ec 100644 --- a/docs/AI_USAGE.md +++ b/docs/AI_USAGE.md @@ -184,3 +184,14 @@ keyset condition into separate queries. They also moved the variants hint to its own issue. Claude made the changes, checked the query plans with `EXPLAIN ANALYZE`, added tests for each point and updated the docs. + +## Tailwind design tokens (`index.html`, `src/index.css`) + +- **Tool:** GitHub Copilot +- **What the team did:** Chose to reuse the existing design tokens, load + Faustina and Inter, and expose the tokens as Tailwind utilities for the UI. +- **What GitHub Copilot did:** Added the font links, connected the font tokens, + mapped the existing colors, spacing, font sizes, radii and shadows into the + Tailwind theme, and changed global heading text to the existing navy token. +- **Review:** The team reviewed the theme changes and confirmed the colors + should come from the existing CSS variables rather than new palette values. diff --git a/index.html b/index.html index 27a7eef..8cd354a 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,12 @@ + + + t29-project-2 diff --git a/src/index.css b/src/index.css index cebea03..d38a909 100644 --- a/src/index.css +++ b/src/index.css @@ -11,7 +11,7 @@ * @theme block, the dark tokens and the base layer. We changed three things: * - Dark mode follows our design: the attribute data-theme="dark" on the * page, as in styles/variables.css, and not a .dark class. - * - No web font: the system fonts cost nothing to load. + * - Typography uses the existing Faustina/Inter tokens from variables.css. * - The tokens --border and --accent are shared with the Vite starter styles * below. shadcn's values win. The starter styles go when the page is built. */ @@ -30,8 +30,8 @@ --shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; - --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; + --sans: var(--font-family-text), sans-serif; + --heading: var(--font-family-title); --mono: ui-monospace, Consolas, monospace; font: 18px/145% var(--sans); @@ -149,7 +149,7 @@ h1, h2 { font-family: var(--heading); font-weight: 500; - color: var(--text-h); + color: var(--text-color); } h1 { @@ -190,8 +190,20 @@ code { } @theme inline { - --font-heading: var(--font-sans); - --font-sans: system-ui, 'Segoe UI', Roboto, sans-serif; + --font-heading: var(--font-family-title); + --font-sans: var(--font-family-text), sans-serif; + --font-title: var(--font-family-title); + --font-text: var(--font-family-text), sans-serif; + --text-page-title: var(--font-size-page-title); + --text-element-title: var(--font-size-element-title); + --text-row-title: var(--font-size-row-title); + --radius-corner: var(--corner-radius); + --shadow-box: var(--box-shadow); + --spacing-xs: var(--space-xs); + --spacing-sm: var(--space-sm); + --spacing-md: var(--space-md); + --spacing-lg: var(--space-lg); + --spacing-xl: var(--space-xl); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); @@ -221,6 +233,26 @@ code { --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); + --color-primary-color: var(--primary-color); + --color-secondary-color: var(--secondary-color); + --color-accent-color: var(--accent-color); + --color-background-color: var(--background-color); + --color-background-color-element: var(--background-color-element); + --color-text-color: var(--text-color); + --color-text-color-dark: var(--text-color-dark); + --color-text-color-light: var(--text-color-light); + --color-box-color: var(--box-color); + --color-box-stroke: var(--box-stroke); + --color-border-color: var(--border-color); + --color-header-background: var(--header-background); + --color-element-background: var(--element-background); + --color-surface-selected: var(--surface-selected); + --color-text-color-primary: var(--text-color-primary); + --color-text-color-secondary: var(--text-color-secondary); + --color-text-color-on-dark: var(--text-color-on-dark); + --color-border-subtle: var(--border-subtle); + --color-badge-d-value-bg: var(--badge-d-value-bg); + --color-badge-d-value-text: var(--badge-d-value-text); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) * 0.6); From 4e97e0604fe567adf80e209d6cc37247ee70973d Mon Sep 17 00:00:00 2001 From: Ronja Date: Sat, 17 Oct 2026 09:03:05 +0200 Subject: [PATCH 2/2] fix: dark mode tokens, D-value badge tokens and README - Give --text-color a dark value so headings are readable in dark mode. - Rename the D-value --background-color to --badge-d-value-bg (it overrode the page background) and add --badge-d-value-text for light mode. - Move the dark token block out of :root so data-theme="dark" works on , as in src/index.css. - README: fonts are Faustina and Inter now, not system fonts. --- README.md | 4 ++-- src/styles/variables.css | 50 +++++++++++++++++++++------------------- 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 7ada51f..03d4c4f 100644 --- a/README.md +++ b/README.md @@ -131,8 +131,8 @@ An icon without text needs a label for screen readers, for example `