From 1fac1a80b7f59d23482fee802a634988a528cf26 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Wed, 28 Oct 2026 23:56:13 +0100
Subject: [PATCH] fix(ui): opacity modifiers for theme colours (bg-accent/15
 etc. were never generated)

Theme colours are CSS variables, so Tailwind produced no CSS for /NN
modifiers and all tinted backgrounds were missing. Colours now mix the
variable with transparent via color-mix() for modifiers only; plain
classes keep the bare variable. Aliases for colour names used but never
defined (primary, secondary, success, warning, danger, info).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/tailwind.config.js | 81 ++++++++++++++++++++++---------------
 1 file changed, 49 insertions(+), 32 deletions(-)

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index f89107d..e34d886 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,3 +1,11 @@
+// Theme colours are CSS variables, so Tailwind cannot apply opacity modifiers (bg-accent/15) by itself.
+// v() mixes the variable with transparent for a modifier; plain classes keep the bare variable, so only
+// the tints depend on color-mix() support.
+const v = (name) => ({ opacityValue }) =>
+  opacityValue === undefined || opacityValue === '1' || String(opacityValue).startsWith('var(')
+    ? `var(${name})`
+    : `color-mix(in srgb, var(${name}) calc(${opacityValue} * 100%), transparent)`;
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
@@ -5,48 +13,57 @@ export default {
   theme: {
     extend: {
       colors: {
-        canvas: 'var(--bg-app)',
+        canvas: v('--bg-app'),
         panel: {
-          DEFAULT: 'var(--bg-panel)',
-          elevated: 'var(--bg-panel-elevated)',
-          hover: 'var(--bg-panel-hover)',
+          DEFAULT: v('--bg-panel'),
+          elevated: v('--bg-panel-elevated'),
+          hover: v('--bg-panel-hover'),
         },
         surface: {
-          DEFAULT: 'var(--bg-panel)',
-          elevated: 'var(--bg-panel-elevated)',
-          hover: 'var(--bg-panel-hover)',
-          border: 'var(--border-color)',
+          DEFAULT: v('--bg-panel'),
+          elevated: v('--bg-panel-elevated'),
+          hover: v('--bg-panel-hover'),
+          border: v('--border-color'),
         },
-        input: 'var(--bg-input)',
-        overlay: 'var(--bg-overlay)',
-        code: 'var(--bg-code)',
-        main: 'var(--text-main)',
-        muted: 'var(--text-muted)',
-        faint: 'var(--text-faint)',
-        'on-accent': 'var(--text-on-accent)',
+        input: v('--bg-input'),
+        overlay: v('--bg-overlay'),
+        code: v('--bg-code'),
+        main: v('--text-main'),
+        muted: v('--text-muted'),
+        faint: v('--text-faint'),
+        'on-accent': v('--text-on-accent'),
         accent: {
-          DEFAULT: 'var(--accent-primary)',
-          hover: 'var(--accent-hover)',
-          dim: 'var(--accent-dim)',
-          border: 'var(--accent-border)',
+          DEFAULT: v('--accent-primary'),
+          hover: v('--accent-hover'),
+          dim: v('--accent-dim'),
+          border: v('--accent-border'),
         },
         brand: {
-          DEFAULT: 'var(--accent-primary)',
-          hover: 'var(--accent-hover)',
-          dark: 'var(--accent-primary)',
+          DEFAULT: v('--accent-primary'),
+          hover: v('--accent-hover'),
+          dark: v('--accent-primary'),
         },
         status: {
-          ok: 'var(--color-success)',
-          'ok-bg': 'var(--bg-success)',
-          'ok-border': 'var(--border-success)',
-          err: 'var(--color-danger)',
-          'err-bg': 'var(--bg-danger)',
-          'err-border': 'var(--border-danger)',
-          warn: 'var(--color-warning)',
-          'warn-bg': 'var(--bg-warning)',
-          'warn-border': 'var(--border-warning)',
+          ok: v('--color-success'),
+          'ok-bg': v('--bg-success'),
+          'ok-border': v('--border-success'),
+          err: v('--color-danger'),
+          'err-bg': v('--bg-danger'),
+          'err-border': v('--border-danger'),
+          warn: v('--color-warning'),
+          'warn-bg': v('--bg-warning'),
+          'warn-border': v('--border-warning'),
+          info: v('--accent-hover'),
+          danger: v('--color-danger'),
         },
-        border: 'var(--border-color)',
+        border: v('--border-color'),
+        // Aliases for names used in components (e.g. avatar initials), mapped to theme colours
+        primary: v('--accent-primary'),
+        secondary: v('--text-muted'),
+        info: v('--accent-hover'),
+        success: v('--color-success'),
+        warning: v('--color-warning'),
+        danger: v('--color-danger'),
       },
       borderColor: {
         DEFAULT: 'var(--border-color)',