feat: expose design tokens as Tailwind utilities

README.md

@@ -131,8 +131,8 @@ An icon without text needs a label for screen readers, for example `<Button aria
 
 - **Style.** `base-nova` on Base UI, which is the default of the shadcn/ui CLI. Radix UI is the older alternative.
 - **Class names.** The `cn` helper from the `cn` package, as the CLI sets it up.
-- **Fonts.** System fonts only. The CLI wanted to add the Geist font (about 60 kB of font files), which we removed.
-- **Dark mode.** It follows `data-theme="dark"` on the page, as in `src/styles/variables.css`, and not a `.dark` class.
+- **Fonts.** Faustina (headings) and Inter (text), loaded from Google Fonts in `index.html` and set with the `--font-family-*` tokens in `src/styles/variables.css`. The CLI wanted to add the Geist font (about 60 kB of font files), which we removed.
+- **Dark mode.** It follows `data-theme="dark"` on the `<html>` element (or any other element: the dark tokens apply to it and everything inside it), as in `src/styles/variables.css`, and not a `.dark` class.
 - **`@/` alias.** Set with `paths` only. TypeScript 6 deprecates `baseUrl`, which the shadcn/ui guide still tells us to add.
 - **Lint.** The Fast Refresh rule is off for `src/components/ui/`, because the components also export helpers such as `buttonVariants`.
 

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.

index.html

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Faustina:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
     <title>t29-project-2</title>
   </head>
   <body>

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);

src/styles/variables.css

@@ -24,8 +24,9 @@
     --box-stroke: #888394;
     --box-shadow: 0 2px 5px rgba(3, 2, 2, 0.1);
 
-    /* D-value */
-    --background-color: #BDE981;
+    /* D-value badge */
+    --badge-d-value-bg: #BDE981;
+    --badge-d-value-text: var(--text-color-dark);
     --border-color: var(--text-color);
 
     /* This part was generate with the help of Gemini 2.5 Flash using the prompt: 
@@ -37,25 +38,26 @@
     --space-md: 1rem;    /* 16px - default padding (inputs, row heights) */
     --space-lg: 1.5rem;  /* 24px - component gaps (between search & filters) */
     --space-xl: 2.5rem;  /* 40px - page section margins & outer padding */
-
-    /* Dark mode colors */
-    [data-theme="dark"] {
-        /* Main Layout Colors */
-        --background-color: #090F2F;             /* Dark blue background */
-        --header-background: #101844;            /* Slightly lighter blue for nav */
-        --element-background: #18225C;           /* Inputs, dropdowns, table background */
-        --surface-selected: #253788;             /* Row selection tint */
-
-        /* Text Colors */
-        --text-color-primary: #EAE0CF;           /* Warm light text */
-        --text-color-secondary: #A0AEC0;         /* Muted text for labels */
-        --text-color-on-dark: #090F2F;           /* Inverted text for light buttons */
-
-        /* UI Components & Borders */
-        --border-color: #3B426B;
-        --border-subtle: #2A3363;
-        --badge-d-value-bg: #82C43C;             /* Slightly deeper green for contrast */
-        --badge-d-value-text: #090F2F;
-
-    }  
-}    
+}
+
+/* Dark mode colors */
+[data-theme='dark'] {
+    /* Main Layout Colors */
+    --background-color: #090F2F;             /* Dark blue background */
+    --header-background: #101844;            /* Slightly lighter blue for nav */
+    --element-background: #18225C;           /* Inputs, dropdowns, table background */
+    --surface-selected: #253788;             /* Row selection tint */
+
+    /* Text Colors */
+    --text-color: #EAE0CF;                   /* Headings and body text */
+    --text-color-primary: #EAE0CF;           /* Warm light text */
+    --text-color-secondary: #A0AEC0;         /* Muted text for labels */
+    --text-color-on-dark: #090F2F;           /* Inverted text for light buttons */
+
+    /* UI Components & Borders */
+    --border-color: #3B426B;
+    --border-subtle: #2A3363;
+    --badge-d-value-bg: #82C43C;             /* Slightly deeper green for contrast */
+    --badge-d-value-text: #090F2F;
+
+}