From 5fe11f18ac7b20a4477f3e73049d394367d6ff3c Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Mon, 17 Nov 2025 16:49:32 +0100
Subject: [PATCH] tag colors

---
 frontend/src/sidebar/Sidebar.tsx          | 13 ++--
 frontend/src/styles/base/theme.css        | 23 +++++++
 frontend/src/styles/documents/listing.css | 31 ++++++++-
 frontend/src/styles/sidebar/sidebar.css   | 40 +++++------
 frontend/src/utils/colors.ts              | 83 +++++++++++++++++++----
 5 files changed, 146 insertions(+), 44 deletions(-)

diff --git a/frontend/src/sidebar/Sidebar.tsx b/frontend/src/sidebar/Sidebar.tsx
index d6bb07d..694e631 100644
--- a/frontend/src/sidebar/Sidebar.tsx
+++ b/frontend/src/sidebar/Sidebar.tsx
@@ -380,6 +380,13 @@ const Sidebar: React.FC<SidebarProps> = ({
     [activeTagIds],
   );
   const untaggedActive = untaggedFilterId ? activeTagSet.has(untaggedFilterId) : false;
+  const untaggedButtonClassName = ['badge', 'tag-chip', 'tag-chip--untagged', untaggedActive ? 'active' : null]
+    .filter(Boolean)
+    .join(' ');
+  const getTagChipClassName = (isActive: boolean) =>
+    ['badge', 'tag-chip', isActive ? 'active' : null]
+      .filter(Boolean)
+      .join(' ');
   const handleManageTags = useCallback(() => {
     onManageTags?.();
   }, [onManageTags]);
@@ -933,9 +940,7 @@ const Sidebar: React.FC<SidebarProps> = ({
               <button
                 type="button"
                 role="listitem"
-                className={`sidebar-tag-pill sidebar-tag-pill--untagged${
-                  untaggedActive ? ' active' : ''
-                }`}
+                className={untaggedButtonClassName}
                 onClick={() => handleToggleTag(untaggedFilterId)}
                 aria-pressed={untaggedActive}
                 draggable={false}
@@ -946,7 +951,7 @@ const Sidebar: React.FC<SidebarProps> = ({
             {tags.map((tag) => {
               const isActive = activeTagSet.has(tag.id);
               const style = getTagColorStyle(tag.color);
-              const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
+              const className = getTagChipClassName(isActive);
               return (
                 <button
                   key={tag.id}
diff --git a/frontend/src/styles/base/theme.css b/frontend/src/styles/base/theme.css
index b15634e..ff71512 100644
--- a/frontend/src/styles/base/theme.css
+++ b/frontend/src/styles/base/theme.css
@@ -20,6 +20,12 @@
   --neutral-contrast-baseline: 1.125;
   --neutral-contrast-delta: calc(var(--neutral-contrast-amount) - var(--neutral-contrast-baseline));
   --neutral-chroma-scale: calc(clamp(0.0001, var(--neutral-chroma-effective), 1) / 0.1);
+  --tag-chip-bg-lighten: 0.4;
+  --tag-chip-bg-chroma-scale: 0.75;
+  --tag-chip-outline-lighten: 0.12;
+  --tag-chip-outline-chroma-scale: 0.75;
+  --tag-chip-text-lighten: -0.5;
+  --tag-chip-text-chroma-scale: 0.4;
 
   /* --- Neutrals --- */
   --bg: oklch(calc(0.97 + var(--neutral-contrast-delta) * 0.12) calc(var(--neutral-chroma-effective) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
@@ -110,6 +116,11 @@
   --detail-panel-width: calc(100vw / 3);
   --sidebar-width: 20em;
   --documents-grid-title-size: 0.8rem;
+
+  --tag-chip-bg-lighten: 0.4;
+  --tag-chip-bg-chroma-scale: 0.75;
+  --tag-chip-outline-lighten: 0.12;
+  --tag-chip-outline-chroma-scale: 0.75;
 }
 
 :root[data-theme='light'] {
@@ -167,6 +178,13 @@
   --overlay-backdrop: color-mix(in oklch, oklch(0.1 0.015 var(--dark-neutral-hue)) 70%, transparent);
   --overlay-shadow: color-mix(in oklch, oklch(0.12 0.015 var(--dark-neutral-hue)) 55%, transparent);
 
+  --tag-chip-bg-lighten: 0.2;
+  --tag-chip-bg-chroma-scale: 0.65;
+  --tag-chip-outline-lighten: 0.08;
+  --tag-chip-outline-chroma-scale: 0.85;
+  --tag-chip-text-lighten: 0.35;
+  --tag-chip-text-chroma-scale: 0.6;
+
   --success: oklch(0.62 0.16 var(--success-hue));
   --warning: oklch(0.68 0.17 var(--warning-hue));
   --danger: oklch(0.60 0.2 var(--danger-hue));
@@ -190,6 +208,11 @@
   --preview-nav-fg: var(--fg);
   --text-on-dark: color-mix(in oklch, white 92%, transparent);
   --surface-ink-soft: color-mix(in oklch, white 12%, transparent);
+
+  --tag-chip-bg-lighten: -1.2;
+  --tag-chip-bg-chroma-scale: 1.5;
+  --tag-chip-outline-lighten: 0;
+  --tag-chip-outline-chroma-scale: 1.2;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/frontend/src/styles/documents/listing.css b/frontend/src/styles/documents/listing.css
index 2bfdc32..7975677 100644
--- a/frontend/src/styles/documents/listing.css
+++ b/frontend/src/styles/documents/listing.css
@@ -14,8 +14,6 @@
   min-height: 0;
 }
 
-
-
 .documents-panel tr.folder.is-drop-target {
   outline: 2px dashed var(--accent-strong, var(--accent));
   outline-offset: -2px;
@@ -760,15 +758,42 @@
 }
 
 .tag-chip {
+  --tag-chip-resolved-l: var(--tag-chip-base-l, 0.9);
+  --tag-chip-resolved-c: var(--tag-chip-base-c, 0);
+  --tag-chip-resolved-h: var(--tag-chip-base-h, 0deg);
   gap: 0.25rem;
   border-radius: 1rem;
   padding: 0.2rem 0.4rem;
   font-weight: 600;
+  border: none;
+  background: oklch(
+    min(1, calc(var(--tag-chip-resolved-l) + (1 - var(--tag-chip-resolved-l)) * var(--tag-chip-bg-lighten)))
+    calc(var(--tag-chip-resolved-c) * var(--tag-chip-bg-chroma-scale))
+    var(--tag-chip-resolved-h)
+    / 0.9
+  );
+  --tag-chip-outline-color: var(
+    --tag-chip-outline,
+    oklch(
+      min(1, calc(var(--tag-chip-resolved-l) + (1 - var(--tag-chip-resolved-l)) * var(--tag-chip-outline-lighten)))
+      min(1, calc(var(--tag-chip-resolved-c) * var(--tag-chip-outline-chroma-scale)))
+      var(--tag-chip-resolved-h)
+    )
+  );
+  --tag-chip-text-color: var(
+    --tag-chip-text,
+    oklch(
+      clamp(0, calc(var(--tag-chip-resolved-l) + var(--tag-chip-text-lighten)), 1)
+      clamp(0, calc(var(--tag-chip-resolved-c) * var(--tag-chip-text-chroma-scale)), 1)
+      var(--tag-chip-resolved-h)
+    )
+  );
+  color: var(--tag-chip-text-color, currentColor);
 }
 
 .tag-chip--more {
   background: transparent;
-  border-color: var(--border-strong);
+  border: 1px dashed var(--border-strong);
   color: var(--muted);
 }
 
diff --git a/frontend/src/styles/sidebar/sidebar.css b/frontend/src/styles/sidebar/sidebar.css
index 8cf5ddd..0a5485a 100644
--- a/frontend/src/styles/sidebar/sidebar.css
+++ b/frontend/src/styles/sidebar/sidebar.css
@@ -676,49 +676,45 @@
   flex-wrap: wrap;
   gap: 0.35rem;
   padding: 0.25rem 0 0.1rem;
+  --tag-chip-base-default: var(--surface-soft);
 }
 
-.sidebar-tag-pill {
+.sidebar-tag-cloud .tag-chip {
   border-radius: 999px;
   padding: 0.25rem 0.6rem;
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 1;
   cursor: pointer;
-  background: var(--surface-soft);
-  color: var(--fg);
-  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
-    opacity 0.12s ease;
-  box-shadow: 0 1px 2px var(--shadow-faint);
+  transition: transform 0.15s ease, opacity 0.12s ease;
 }
 
-.sidebar-tag-pill:hover {
-  transform: none;
-  box-shadow: 0 2px 6px var(--shadow-pop);
-  border-color: var(--accent-soft);
-}
-
-.sidebar-tag-pill:focus-visible {
-  outline: 2px solid var(--accent);
+.sidebar-tag-cloud .tag-chip:focus-visible {
+  outline: 2px solid var(--tag-chip-outline-color, var(--accent));
   outline-offset: 2px;
 }
 
-.sidebar-tag-pill.active {
-  border-color: var(--sidebar-active-pill-border);
-  box-shadow: 0 0 0 1.5px var(--sidebar-active-pill-border);
+.sidebar-tag-cloud .tag-chip.active {
+  outline: 2px solid var(--tag-chip-outline-color, var(--accent));
+  outline-offset: 0;
 }
 
-.sidebar-tag-pill--untagged {
-  border: 1px dashed var(--border);
-  background: var(--surface-subtle);
+.sidebar-tag-cloud .tag-chip:hover {
+  transform: none;
+  outline: 3px solid var(--tag-chip-outline-color, var(--accent));
+  outline-offset: 0;
+}
+
+.sidebar-tag-cloud .tag-chip--untagged {
+  --tag-chip-base: var(--surface-subtle);
   color: var(--muted);
 }
 
-.sidebar-tag-pill--untagged.active {
+.sidebar-tag-cloud .tag-chip--untagged.active {
   color: var(--fg);
 }
 
-.sidebar-tag-cloud--has-active .sidebar-tag-pill:not(.active) {
+.sidebar-tag-cloud--has-active .tag-chip:not(.active) {
   opacity: 0.45;
 }
 
diff --git a/frontend/src/utils/colors.ts b/frontend/src/utils/colors.ts
index b9f092f..a14554d 100644
--- a/frontend/src/utils/colors.ts
+++ b/frontend/src/utils/colors.ts
@@ -85,6 +85,71 @@ const rgbToHsl = ({ r, g, b }: RgbColor) => {
   return { h: hue, s: clamp01(saturation), l: clamp01(lightness) };
 };
 
+const srgbChannelToLinear = (value: number) => {
+  const normalized = value / 255;
+  if (normalized <= 0.04045) {
+    return normalized / 12.92;
+  }
+  return ((normalized + 0.055) / 1.055) ** 2.4;
+};
+
+const hexToOklch = (input?: string) => {
+  const rgb = hexToRgb(input);
+  if (!rgb) {
+    return null;
+  }
+  const r = srgbChannelToLinear(rgb.r);
+  const g = srgbChannelToLinear(rgb.g);
+  const b = srgbChannelToLinear(rgb.b);
+
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+
+  const lRoot = Math.cbrt(l);
+  const mRoot = Math.cbrt(m);
+  const sRoot = Math.cbrt(s);
+
+  const L = 0.2104542553 * lRoot + 0.793617785 * mRoot - 0.0040720468 * sRoot;
+  const a = 1.9779984951 * lRoot - 2.428592205 * mRoot + 0.4505937099 * sRoot;
+  const bLab = 0.0259040371 * lRoot + 0.7827717662 * mRoot - 0.808675766 * sRoot;
+
+  const chroma = Math.sqrt(a * a + bLab * bLab);
+  let hue = Math.atan2(bLab, a) * (180 / Math.PI);
+  if (hue < 0) {
+    hue += 360;
+  }
+
+  return {
+    l: clamp01(L),
+    c: chroma,
+    h: hue,
+  };
+};
+
+const formatCssNumber = (value: number) => {
+  if (!Number.isFinite(value)) {
+    return `${value}`;
+  }
+  const rounded = Number(value.toFixed(6));
+  return `${rounded}`;
+};
+
+const buildTagStyle = (backgroundHex: string) => {
+  const oklch = hexToOklch(backgroundHex);
+  if (!oklch) {
+    return {
+      '--tag-chip-base': backgroundHex,
+    };
+  }
+  return {
+    '--tag-chip-base': backgroundHex,
+    '--tag-chip-base-l': formatCssNumber(oklch.l),
+    '--tag-chip-base-c': formatCssNumber(oklch.c),
+    '--tag-chip-base-h': formatCssNumber(oklch.h),
+  };
+};
+
 export const hexToRgb = (input?: string): (RgbColor & { hex: string }) | null => {
   if (!input) return null;
   const match = HEX_COLOR_PATTERN.exec(input.trim());
@@ -234,11 +299,7 @@ export const getTagColorStyle = (hex) => {
   let bestRatio = baseRatio;
 
   if (bestRatio >= TARGET_RATIO) {
-    return {
-      backgroundColor: bestBackground,
-      borderColor: bestBackground,
-      color: bestText,
-    };
+    return buildTagStyle(bestBackground);
   }
 
   let compliantBackground = null;
@@ -277,18 +338,10 @@ export const getTagColorStyle = (hex) => {
   });
 
   if (compliantBackground) {
-    return {
-      backgroundColor: compliantBackground,
-      borderColor: compliantBackground,
-      color: compliantText,
-    };
+    return buildTagStyle(compliantBackground);
   }
 
-  return {
-    backgroundColor: bestBackground,
-    borderColor: bestBackground,
-    color: bestText,
-  };
+  return buildTagStyle(bestBackground);
 };
 
 export const generateRandomTagColor = () => {