@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/theme/themeManager.test.ts

@@ -0,0 +1,43 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { applyTheme } from './themeManager'
+
+describe('theme surface settings', () => {
+  let attributes: Map<string, string>
+  let properties: Map<string, string>
+
+  beforeEach(() => {
+    attributes = new Map()
+    properties = new Map()
+    // The Node test environment supplies only the DOM boundary used by applyTheme.
+    vi.stubGlobal('document', {
+      documentElement: {
+        setAttribute: (name: string, value: string) => attributes.set(name, value),
+        style: {
+          setProperty: (name: string, value: string) => properties.set(name, value),
+          removeProperty: (name: string) => properties.delete(name),
+        },
+      },
+      body: { style: {} },
+    })
+  })
+
+  afterEach(() => vi.unstubAllGlobals())
+
+  it.each([undefined, 'glass', 'opaque'])('uses opaque surfaces when blur is disabled and surfaceStyle is %s', (surfaceStyle) => {
+    applyTheme({ theme: 'dark', surfaceStyle, glassBlur: 'none' })
+    expect(attributes.get('data-surface')).toBe('opaque')
+    expect(properties.get('--glass-blur')).toBe('none')
+  })
+
+  it('preserves enabled glass surfaces and the selected blur', () => {
+    applyTheme({ theme: 'dark', surfaceStyle: 'glass', glassBlur: 'blur(24px)' })
+    expect(attributes.get('data-surface')).toBe('glass')
+    expect(properties.get('--glass-blur')).toBe('blur(24px)')
+  })
+
+  it('keeps explicit opaque surfaces solid despite a saved blur value', () => {
+    applyTheme({ theme: 'light', surfaceStyle: 'opaque', glassBlur: 'blur(16px)' })
+    expect(attributes.get('data-surface')).toBe('opaque')
+    expect(properties.get('--glass-blur')).toBe('none')
+  })
+})

package/src/renderer/shared/theme/themeManager.ts

@@ -0,0 +1,157 @@
+import '../css/effects.css'
+import { initializeEffectVisibility } from '../utils/effectVisibility'
+/**
+ * shared/theme/themeManager.ts
+ * Centralized theme controller and runtime state manager.
+ */
+
+import { ACCENT_FLAVORS } from './themes'
+
+export const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
+  const clean = hex.replace('#', '')
+  if (clean.length === 3) {
+    const r = parseInt(clean[0] + clean[0], 16)
+    const g = parseInt(clean[1] + clean[1], 16)
+    const b = parseInt(clean[2] + clean[2], 16)
+    return { r, g, b }
+  }
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : { r: 16, g: 185, b: 129 }
+}
+
+export const lightenColor = (hex: string, amount: number): string => {
+  const clean = hex.replace('#', '')
+  if (clean.length !== 6) return hex
+  const num = parseInt(clean, 16)
+  const r = Math.min(255, (num >> 16) + amount)
+  const g = Math.min(255, ((num >> 8) & 0x00ff) + amount)
+  const b = Math.min(255, (num & 0x0000ff) + amount)
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`
+}
+
+export const getContrastText = (hex: string): string => {
+  const rgb = hexToRgb(hex)
+  // Perceived relative luminance formula (W3C standard)
+  const luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b
+  return luminance > 160 ? '#09090b' : '#ffffff'
+}
+
+let systemThemeMediaQuery: MediaQueryList | null = null
+let systemThemeListener: ((e: MediaQueryListEvent) => void) | null = null
+
+export const applyTheme = (cfg: any): void => {
+  if (typeof document === 'undefined') return
+
+  const rawTheme = cfg.theme || 'dark'
+  // Match Settings: disabling glass also disables translucent surfaces, even
+  // when an older configuration still contains surfaceStyle: 'glass'.
+  const surfaceStyle = cfg.glassBlur === 'none' ? 'opaque' : (cfg.surfaceStyle || 'glass')
+  const accentColor = cfg.accentColor || '#10b981'
+  const rgb = hexToRgb(accentColor)
+  const contrastText = getContrastText(accentColor)
+
+  // Resolve effective theme for 'system'
+  let effectiveTheme = rawTheme
+  if (rawTheme === 'system') {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    effectiveTheme = prefersDark ? 'dark' : 'light'
+
+    // Attach reactive OS preference listener once
+    if (!systemThemeListener) {
+      systemThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      systemThemeListener = (e) => {
+        document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light')
+      }
+      systemThemeMediaQuery.addEventListener('change', systemThemeListener)
+    }
+  } else if (systemThemeListener && systemThemeMediaQuery) {
+    systemThemeMediaQuery.removeEventListener('change', systemThemeListener)
+    systemThemeListener = null
+    systemThemeMediaQuery = null
+  }
+
+  initializeEffectVisibility()
+  document.documentElement.setAttribute('data-reduced-effects', String(cfg.reducedEffects === true))
+
+  // Set DOM data attributes
+  document.documentElement.setAttribute('data-theme', effectiveTheme)
+  document.documentElement.setAttribute('data-surface', surfaceStyle)
+  const normalizedAccent = accentColor.trim().toLowerCase()
+  document.documentElement.setAttribute(
+    'data-accent-mode',
+    normalizedAccent === '#ffffff' || normalizedAccent === '#fff' ? 'monochrome' : 'color'
+  )
+
+  // Set Accent variables
+  document.documentElement.style.setProperty('--accent-default', accentColor)
+  document.documentElement.style.setProperty('--accent', accentColor)
+  document.documentElement.style.setProperty('--accent-hover', lightenColor(accentColor, 20))
+  document.documentElement.style.setProperty('--accent-glow', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.35)`)
+  document.documentElement.style.setProperty('--accent-subtle', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.14)`)
+  document.documentElement.style.setProperty('--accent-border', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`)
+  document.documentElement.style.setProperty('--text-on-accent', contrastText)
+  document.documentElement.style.setProperty('--accent-contrast', contrastText)
+
+  // Surface and Blur
+  if (surfaceStyle === 'opaque') {
+    document.documentElement.style.setProperty('--glass-blur', 'none')
+  } else {
+    document.documentElement.style.setProperty('--glass-blur', cfg.glassBlur || 'blur(16px)')
+  }
+
+  // Typography
+  if (cfg.fontFamily) {
+    document.body.style.fontFamily = cfg.fontFamily
+  }
+  if (cfg.fontSize) {
+    document.documentElement.style.fontSize = cfg.fontSize
+  }
+
+  // Handle custom theme overrides if active
+  if (rawTheme === 'custom') {
+    if (cfg.customBgStart && cfg.customBgEnd) {
+      document.documentElement.style.setProperty('--bg-canvas', cfg.customBgStart)
+      document.documentElement.style.setProperty('--bg-color', cfg.customBgStart)
+      document.documentElement.style.setProperty(
+        '--bg-gradient',
+        `linear-gradient(135deg, ${cfg.customBgStart} 0%, ${cfg.customBgEnd} 100%)`
+      )
+    }
+    if (cfg.customPanelBg) {
+      const pRgb = hexToRgb(cfg.customPanelBg)
+      const panelSurface = surfaceStyle === 'opaque'
+        ? cfg.customPanelBg
+        : `rgba(${pRgb.r}, ${pRgb.g}, ${pRgb.b}, 0.75)`
+      const raisedSurface = surfaceStyle === 'opaque'
+        ? cfg.customPanelBg
+        : `rgba(${pRgb.r}, ${pRgb.g}, ${pRgb.b}, 0.62)`
+      document.documentElement.style.setProperty('--bg-surface', panelSurface)
+      document.documentElement.style.setProperty('--panel-bg', panelSurface)
+      document.documentElement.style.setProperty('--surface-bg', raisedSurface)
+    }
+    return
+  }
+
+  // Clean up inline background and text overrides for standard themes
+  ;[
+    '--bg-canvas',
+    '--bg-color',
+    '--bg-gradient',
+    '--panel-bg',
+    '--panel-raised',
+    '--panel-soft',
+    '--chrome-bg',
+    '--surface-bg',
+    '--surface-strong',
+    '--input-bg',
+    '--text-main',
+    '--text-chat',
+    '--text-soft',
+  ].forEach((prop) => document.documentElement.style.removeProperty(prop))
+}

package/src/renderer/shared/theme/themes.ts

@@ -0,0 +1,116 @@
+/**
+ * shared/theme/themes.ts
+ * TypeScript constants and types for the Mint GUI Theme System.
+ */
+
+export type ColorMode = 'system' | 'dark' | 'light' | 'midnight'
+export type SurfaceStyle = 'opaque' | 'glass'
+
+export interface AccentFlavor {
+  id: string
+  name: string
+  color: string
+  contrastText: string
+  description: string
+}
+
+export const ACCENT_FLAVORS: AccentFlavor[] = [
+  {
+    id: 'mint',
+    name: 'Mint',
+    color: '#10b981',
+    contrastText: '#ffffff',
+    description: 'Emerald brand signature',
+  },
+  {
+    id: 'cyan',
+    name: 'Cyan',
+    color: '#06b6d4',
+    contrastText: '#ffffff',
+    description: 'Electric tech cyan',
+  },
+  {
+    id: 'indigo',
+    name: 'Indigo',
+    color: '#6366f1',
+    contrastText: '#ffffff',
+    description: 'Refined violet blue',
+  },
+  {
+    id: 'amber',
+    name: 'Amber',
+    color: '#f59e0b',
+    contrastText: '#0a0a0b',
+    description: 'Warm solar gold',
+  },
+  {
+    id: 'rose',
+    name: 'Rose',
+    color: '#f43f5e',
+    contrastText: '#ffffff',
+    description: 'Vivid energized berry',
+  },
+  {
+    id: 'monochrome',
+    name: 'Monochrome',
+    color: '#ffffff',
+    contrastText: '#09090b',
+    description: 'Minimalist black & white',
+  },
+]
+
+export interface ThemePreset {
+  id: string
+  name: string
+  description: string
+  theme: 'dark' | 'light' | 'midnight'
+  accentColor: string
+  systemTextColor: string
+  chatTextColor: string
+  bgPreview: string
+  panelPreview: string
+  accentPreview: string
+  textPreview: string
+}
+
+export const THEME_PRESETS: ThemePreset[] = [
+  {
+    id: 'preset-dark-mint',
+    name: 'Dark Mint',
+    description: 'Black background · Green elements · White text',
+    theme: 'dark',
+    accentColor: '#10b981',
+    systemTextColor: '#f8fafc',
+    chatTextColor: '#f8fafc',
+    bgPreview: '#0a0a0c',
+    panelPreview: '#18181b',
+    accentPreview: '#10b981',
+    textPreview: '#f8fafc',
+  },
+  {
+    id: 'preset-light-mint',
+    name: 'Light Mint',
+    description: 'Soft gray background · Green elements · High-contrast text',
+    theme: 'light',
+    accentColor: '#10b981',
+    systemTextColor: '#0f172a',
+    chatTextColor: '#0f172a',
+    bgPreview: '#f0f2f5',
+    panelPreview: '#ffffff',
+    accentPreview: '#10b981',
+    textPreview: '#0f172a',
+  },
+  {
+    id: 'preset-dark-mono',
+    name: 'Dark Monochrome',
+    description: 'Black background · White elements · White text',
+    theme: 'dark',
+    accentColor: '#ffffff',
+    systemTextColor: '#f8fafc',
+    chatTextColor: '#f8fafc',
+    bgPreview: '#0a0a0c',
+    panelPreview: '#18181b',
+    accentPreview: '#ffffff',
+    textPreview: '#f8fafc',
+  },
+]

package/src/renderer/shared/theme/tokens.css

@@ -0,0 +1,318 @@
+/**
+ * shared/theme/tokens.css
+ * Single Source of Truth for Mint GUI Design Tokens.
+ * 3-Tier Architecture: Primitives -> Semantic Tokens -> Component Styles / Legacy Aliases.
+ */
+
+/* ==========================================================================
+   Level 1: Primitives (Raw Color Scales & Base Constants)
+   ========================================================================== */
+
+:root {
+  /* Slate Primitive Scale (Neutral) */
+  --slate-50: #f8fafc;
+  --slate-100: #f1f5f9;
+  --slate-200: #e2e8f0;
+  --slate-300: #cbd5e1;
+  --slate-400: #94a3b8;
+  --slate-500: #64748b;
+  --slate-600: #475569;
+  --slate-700: #334155;
+  --slate-800: #1e293b;
+  --slate-900: #0f172a;
+  --slate-950: #020617;
+
+  /* Zinc / Pure Dark Scale */
+  --zinc-900: #18181b;
+  --zinc-950: #09090b;
+  --pure-black: #000000;
+  --pure-white: #ffffff;
+
+  /* Mint Primitive Scale (Core Brand) */
+  --mint-50: #ecfdf5;
+  --mint-100: #d1fae5;
+  --mint-200: #a7f3d0;
+  --mint-300: #6ee7b7;
+  --mint-400: #34d399;
+  --mint-500: #10b981;
+  --mint-600: #059669;
+  --mint-700: #047857;
+  --mint-800: #065f46;
+  --mint-900: #064e3b;
+  --mint-950: #022c22;
+
+  /* Accent Flavors */
+  --flavor-mint: #10b981;
+  --flavor-cyan: #06b6d4;
+  --flavor-indigo: #6366f1;
+  --flavor-amber: #f59e0b;
+  --flavor-rose: #f43f5e;
+  --flavor-monochrome: #ffffff;
+
+  /* Functional Status Colors */
+  --status-success: #10b981;
+  --status-warning: #f59e0b;
+  --status-error: #ef4444;
+  --status-info: #0284c7;
+
+  /* Base Radii */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 20px;
+  --radius-full: 9999px;
+
+  /* Default Accent (Mint) */
+  --accent-default: var(--mint-500);
+  --accent-hover: #34d399;
+  --accent-subtle: rgba(16, 185, 129, 0.12);
+  --accent-glow: rgba(16, 185, 129, 0.35);
+  --accent-border: rgba(16, 185, 129, 0.3);
+  --text-on-accent: #ffffff;
+
+  /* Glow presets */
+  --glow-accent-xs: 0 2px 8px color-mix(in srgb, var(--accent-default) 15%, transparent);
+  --glow-accent-sm: 0 4px 14px color-mix(in srgb, var(--accent-default) 22%, transparent);
+  --glow-accent-md: 0 6px 18px color-mix(in srgb, var(--accent-default) 28%, transparent);
+}
+
+/* ==========================================================================
+   Level 2: Semantic Tokens by Theme
+   ========================================================================== */
+
+/* ── Dark Theme (Default) ───────────────────────────────────────────────── */
+:root,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* Surfaces */
+  --bg-canvas: #0a0a0c;
+  --bg-surface: rgba(24, 24, 27, 0.76);
+  --bg-surface-raised: #18181b;
+  --bg-surface-soft: rgba(255, 255, 255, 0.045);
+  --bg-surface-hover: rgba(255, 255, 255, 0.075);
+  --bg-overlay: #111113; /* Solid opaque modal/dialog surface */
+  --bg-input: rgba(255, 255, 255, 0.05);
+  --bg-input-focus: rgba(255, 255, 255, 0.09);
+
+  /* Typography */
+  --text-primary: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --text-disabled: #64748b;
+  --text-main: #f8fafc;
+  --text-soft: #cbd5e1;
+  --text-chat: #f8fafc;
+  --placeholder: #94a3b8;
+
+  /* Borders */
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-strong: rgba(255, 255, 255, 0.22);
+  --border-focus: var(--accent-default);
+
+  /* Shadows */
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
+
+  /* Glass Blur */
+  --glass-blur: blur(16px);
+
+  /* Code Syntax Highlighting Tokens */
+  --syntax-string: #34d399;
+  --syntax-flag: #fbbf24;
+  --syntax-comment: #94a3b8;
+  --syntax-number: #fb923c;
+  --syntax-variable: #f472b6;
+  --syntax-property: #60a5fa;
+  --syntax-function: #38bdf8;
+  --syntax-type: #a78bfa;
+  --syntax-boolean: #fb7185;
+  --syntax-operator: #cbd5e1;
+  --syntax-punctuation: #cbd5e1;
+}
+
+/* ── Light Theme (Clean, Crisp, High-Contrast & Comfortable Clarity) ─────── */
+[data-theme="light"] {
+  color-scheme: light;
+
+  /* Surfaces: Soft neutral canvas + crisp white cards for depth & eye comfort */
+  --bg-canvas: #f0f2f5;
+  --bg-surface: #ffffff;
+  --bg-surface-raised: #ffffff;
+  --bg-surface-soft: #f8fafc;
+  --bg-surface-hover: #f1f5f9;
+  --bg-overlay: #ffffff; /* 100% Solid Opaque White - NO bleed-through! */
+  --bg-input: #ffffff;
+  --bg-input-focus: #ffffff;
+
+  /* Typography: Rich slate darks for crisp readability, eliminating faded text */
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
+  --text-disabled: #94a3b8;
+  --text-main: #0f172a;
+  --text-soft: #334155;
+  --text-chat: #0f172a;
+  --placeholder: #94a3b8;
+
+  /* Borders: Visible, refined boundaries between components */
+  --border-subtle: rgba(15, 23, 42, 0.08);
+  --border-default: rgba(15, 23, 42, 0.14);
+  --border-strong: rgba(15, 23, 42, 0.24);
+  --border-focus: var(--accent-default);
+
+  /* Shadows: Soft natural elevation */
+  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
+  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
+  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.14), 0 8px 20px rgba(15, 23, 42, 0.06);
+
+  /* Glass Blur */
+  --glass-blur: blur(16px);
+
+  /* Code Syntax Highlighting Tokens */
+  --syntax-string: #047857;
+  --syntax-flag: #b45309;
+  --syntax-comment: #64748b;
+  --syntax-number: #c2410c;
+  --syntax-variable: #be185d;
+  --syntax-property: #1d4ed8;
+  --syntax-function: #0284c7;
+  --syntax-type: #6d28d9;
+  --syntax-boolean: #e11d48;
+  --syntax-operator: #475569;
+  --syntax-punctuation: #475569;
+}
+
+/* ── Midnight Theme (OLED Deep Pure Black) ───────────────────────────────── */
+[data-theme="midnight"] {
+  color-scheme: dark;
+
+  /* Surfaces */
+  --bg-canvas: #000000;
+  --bg-surface: #050508;
+  --bg-surface-raised: #0d0d12;
+  --bg-surface-soft: #121218;
+  --bg-surface-hover: #1a1a22;
+  --bg-overlay: #050508;
+  --bg-input: #0a0a0e;
+  --bg-input-focus: #121218;
+
+  /* Typography */
+  --text-primary: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --text-muted: #71717a;
+  --text-disabled: #52525b;
+  --text-main: #f8fafc;
+  --text-soft: #cbd5e1;
+  --text-chat: #f8fafc;
+  --placeholder: #71717a;
+
+  /* Borders */
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-default: rgba(255, 255, 255, 0.1);
+  --border-strong: rgba(255, 255, 255, 0.2);
+  --border-focus: var(--accent-default);
+
+  /* Shadows */
+  --shadow-sm: none;
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.8);
+  --shadow-lg: 0 24px 72px rgba(0, 0, 0, 0.95);
+
+  --glass-blur: none;
+
+  /* Code Syntax Highlighting Tokens */
+  --syntax-string: #34d399;
+  --syntax-flag: #fbbf24;
+  --syntax-comment: #71717a;
+  --syntax-number: #fb923c;
+  --syntax-variable: #f472b6;
+  --syntax-property: #60a5fa;
+  --syntax-function: #38bdf8;
+  --syntax-type: #a78bfa;
+  --syntax-boolean: #fb7185;
+  --syntax-operator: #a1a1aa;
+  --syntax-punctuation: #a1a1aa;
+}
+
+/* ── Surface Style Modes ─────────────────────────────────────────────────── */
+[data-surface="opaque"] {
+  --glass-blur: none !important;
+  --bg-surface: #121215;
+  --bg-surface-raised: #18181c;
+  --bg-surface-soft: #1b1b20;
+  --bg-surface-hover: #25252b;
+}
+
+[data-theme="light"][data-surface="opaque"] {
+  --bg-surface: #ffffff;
+  --bg-surface-raised: #ffffff;
+  --bg-surface-soft: #f8fafc;
+  --bg-surface-hover: #f1f5f9;
+}
+
+[data-theme="midnight"][data-surface="opaque"] {
+  --bg-surface: #050508;
+  --bg-surface-raised: #0d0d12;
+  --bg-surface-soft: #121218;
+  --bg-surface-hover: #1a1a22;
+}
+
+[data-surface="glass"] {
+  --glass-blur: blur(16px);
+}
+
+.chat-callout-card {
+  background: var(--callout-tint);
+}
+
+[data-surface="opaque"] .chat-callout-card {
+  background: color-mix(in srgb, var(--bg-surface) 92%, var(--callout-accent) 8%);
+}
+
+/* ==========================================================================
+   Level 3: Backwards Compatibility Aliases
+   (Ensures every existing component and stylesheet keeps working seamlessly)
+   ========================================================================== */
+
+:root,
+[data-theme="dark"],
+[data-theme="light"],
+[data-theme="midnight"] {
+  --bg-color: var(--bg-canvas);
+  --bg-gradient: var(--bg-canvas);
+  --panel-bg: var(--bg-surface);
+  --panel-raised: var(--bg-surface-raised);
+  --panel-soft: var(--bg-surface-soft);
+  --chrome-bg: var(--bg-surface);
+  --surface-bg: var(--bg-surface);
+  --surface-strong: var(--bg-surface-soft);
+  --surface-hover: var(--bg-surface-hover);
+  --input-bg: var(--bg-input);
+  --input-focus-bg: var(--bg-input-focus);
+  --text-main: var(--text-primary);
+  --text-soft: var(--text-secondary);
+  --text-chat: var(--text-primary);
+  --placeholder: var(--text-muted);
+  --border: var(--border-subtle);
+  --border-light: var(--border-subtle);
+  --border-strong: var(--border-default);
+  --shadow: var(--shadow-lg);
+
+  --accent: var(--accent-default);
+  --accent-contrast: var(--text-on-accent);
+  /* Accent is a surface color; interactive text needs its own semantic role. */
+  --interactive-fg: var(--accent);
+  --interactive-fg-hover: var(--accent-hover);
+  --danger: var(--status-error);
+}
+
+/* Pure white remains the primary surface for Dark Monochrome. Its text and
+ * icon affordances use zinc so they stay legible on light selected states. */
+:root[data-accent-mode="monochrome"] {
+  --interactive-fg: #71717a;
+  --interactive-fg-hover: #d4d4d8;
+}