From 177be53e641a5dd8b1b56ab321521f630e51f02c Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 31 May 2026 16:46:45 +0200
Subject: [PATCH] Add semantic theme color tokens to Tailwind
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Map the CSS theme variables from src/index.css (:root light / .dark dark) to named Tailwind utilities — bg-surface, text-content, border-edge, bg-accent and their variants. This gives components a Tailwind-native target for the theme colors so we can replace inline `style={{ ... 'var(--...)' }}` with utility classes without changing the rendered values.
---
 client/tailwind.config.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 0074822b..6f1c2af0 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -31,6 +31,34 @@ export default {
           dragActive: '#eef2ff',
           dragOver: '#c7d2fe',
         },
+        // Semantic theme tokens — resolve to the CSS variables in src/index.css
+        // (:root light / .dark dark). Use these utilities (bg-surface, text-content,
+        // border-edge, bg-accent) instead of inline `style={{ ... 'var(--...)' }}`.
+        surface: {
+          DEFAULT: 'var(--bg-primary)',
+          secondary: 'var(--bg-secondary)',
+          tertiary: 'var(--bg-tertiary)',
+          elevated: 'var(--bg-elevated)',
+          card: 'var(--bg-card)',
+          input: 'var(--bg-input)',
+          hover: 'var(--bg-hover)',
+          selected: 'var(--bg-selected)',
+        },
+        content: {
+          DEFAULT: 'var(--text-primary)',
+          secondary: 'var(--text-secondary)',
+          muted: 'var(--text-muted)',
+          faint: 'var(--text-faint)',
+        },
+        edge: {
+          DEFAULT: 'var(--border-primary)',
+          secondary: 'var(--border-secondary)',
+          faint: 'var(--border-faint)',
+        },
+        accent: {
+          DEFAULT: 'var(--accent)',
+          text: 'var(--accent-text)',
+        },
       },
       boxShadow: {
         'day-column': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',