/* * theme/tokens.css — módulo `theme` (WP #23004, Fase 1) * * Lenguaje visual de OpenWebUI espejado desde su source (no aproximado): * - Paleta gris neutra en oklch: src/tailwind.css (@theme --color-gray-*) * - Dark base #171717 / texto #eee: src/app.css (.dark body) * - Rosé Pine / Rosé Pine Dawn: static/themes/rosepine{,-dawn}.css * - Tipografía Inter: src/app.css @font-face (OpenWebUI 0.11.0) * - Mecanismo de temas: src/lib/components/chat/Settings/General.svelte * (localStorage 'theme', default 'system', system→prefers-color-scheme, * oled-dark→base dark, her→base light) * * Contrato: los consumidores (ui/live, ui/sessions, binbot) codean SOLO contra * los tokens semánticos `--owui-*`, nunca contra colores crudos. El set de * tokens es el contrato del módulo (ver tests/test_theme_tokens.py y README.md). * * TENANT-NEUTRAL: sin marca, dominios ni datos de cliente. El default es el de * OpenWebUI (System); no hay default por entorno ni acento de marca. * * Modo por defecto (System): sin atributo `data-theme` en , :root define * la base clara y el @media (prefers-color-scheme: dark) sigue el SO. Cuando el * usuario elige un tema explícito, theme.js setea [data-theme="…"] y ese bloque * gana. Her/OLED son temas completos por sí mismos. */ :root { /* ---- typography (OpenWebUI) ---- */ --owui-font-sans: 'Inter', 'Vazirmatn', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --owui-font-display: 'Inter', 'Vazirmatn', sans-serif; --owui-font-mono: ui-monospace, 'SF Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace; /* ---- shape ---- */ --owui-radius: 0.5rem; --owui-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.10); /* ---- default = light base (System resolves via prefers-color-scheme) ---- */ --owui-bg-base: #ffffff; --owui-bg-surface: oklch(0.98 0 0); /* gray-50 */ --owui-bg-surface-2: oklch(0.94 0 0); /* gray-100 */ --owui-bg-elevated: #ffffff; --owui-text: oklch(0.20 0 0); /* gray-900 */ --owui-text-muted: oklch(0.51 0 0); /* gray-600 */ --owui-text-subtle: oklch(0.69 0 0); /* gray-500 */ --owui-border: oklch(0.92 0 0); /* gray-200 */ --owui-border-strong: oklch(0.85 0 0); /* gray-300 */ --owui-accent: oklch(0.32 0 0); /* gray-800 — OpenWebUI primary es grayscale */ --owui-accent-hover: oklch(0.20 0 0); /* gray-900 */ --owui-accent-contrast: #ffffff; --owui-success: #059669; --owui-warning: #d97706; --owui-danger: #dc2626; --owui-info: #2563eb; } /* System mode (no explicit data-theme): follow the OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --owui-bg-base: #171717; --owui-bg-surface: oklch(0.27 0 0); /* gray-850 */ --owui-bg-surface-2: oklch(0.32 0 0); /* gray-800 */ --owui-bg-elevated: oklch(0.20 0 0); /* gray-900 */ --owui-text: #eeeeee; --owui-text-muted: oklch(0.69 0 0); /* gray-500 */ --owui-text-subtle: oklch(0.51 0 0); /* gray-600 */ --owui-border: oklch(0.32 0 0); /* gray-800 */ --owui-border-strong: oklch(0.42 0 0); /* gray-700 */ --owui-accent: oklch(0.92 0 0); /* gray-200 */ --owui-accent-hover: #ffffff; --owui-accent-contrast: oklch(0.20 0 0); --owui-success: #10b981; --owui-warning: #f59e0b; --owui-danger: #f87171; --owui-info: #60a5fa; } } /* ---- Explicit user choices ---- * Core OpenWebUI 0.11: light, dark, oled-dark. * Stack extensions kept for shipped consumers: rose-pine, rose-pine-dawn, her. */ [data-theme="light"] { --owui-bg-base: #ffffff; --owui-bg-surface: oklch(0.98 0 0); --owui-bg-surface-2: oklch(0.94 0 0); --owui-bg-elevated: #ffffff; --owui-text: oklch(0.20 0 0); --owui-text-muted: oklch(0.51 0 0); --owui-text-subtle: oklch(0.69 0 0); --owui-border: oklch(0.92 0 0); --owui-border-strong: oklch(0.85 0 0); --owui-accent: oklch(0.32 0 0); --owui-accent-hover: oklch(0.20 0 0); --owui-accent-contrast: #ffffff; --owui-success: #059669; --owui-warning: #d97706; --owui-danger: #dc2626; --owui-info: #2563eb; } [data-theme="dark"] { --owui-bg-base: #171717; --owui-bg-surface: oklch(0.27 0 0); --owui-bg-surface-2: oklch(0.32 0 0); --owui-bg-elevated: oklch(0.20 0 0); --owui-text: #eeeeee; --owui-text-muted: oklch(0.69 0 0); --owui-text-subtle: oklch(0.51 0 0); --owui-border: oklch(0.32 0 0); --owui-border-strong: oklch(0.42 0 0); --owui-accent: oklch(0.92 0 0); --owui-accent-hover: #ffffff; --owui-accent-contrast: oklch(0.20 0 0); --owui-success: #10b981; --owui-warning: #f59e0b; --owui-danger: #f87171; --owui-info: #60a5fa; } [data-theme="oled-dark"] { --owui-bg-base: #000000; --owui-bg-surface: #0a0a0a; --owui-bg-surface-2: #141414; --owui-bg-elevated: #0a0a0a; --owui-text: #eeeeee; --owui-text-muted: oklch(0.69 0 0); --owui-text-subtle: oklch(0.51 0 0); --owui-border: #1f1f1f; --owui-border-strong: #2e2e2e; --owui-accent: #ffffff; --owui-accent-hover: oklch(0.92 0 0); --owui-accent-contrast: #000000; --owui-success: #10b981; --owui-warning: #f59e0b; --owui-danger: #f87171; --owui-info: #60a5fa; } /* Rosé Pine — https://rosepinetheme.com/palette. OpenWebUI shipped these static * themes through 0.10.2; ia-stack keeps them as explicit stack extensions. */ [data-theme="rose-pine"] { --owui-bg-base: #191724; /* base */ --owui-bg-surface: #1f1d2e; /* surface */ --owui-bg-surface-2: #26233a; /* overlay */ --owui-bg-elevated: #26233a; --owui-text: #e0def4; /* text */ --owui-text-muted: #908caa; /* subtle */ --owui-text-subtle: #6e6a86; /* muted */ --owui-border: #403d52; /* highlight-med */ --owui-border-strong: #524f67;/* highlight-high */ --owui-accent: #c4a7e7; /* iris */ --owui-accent-hover: #ebbcba; /* rose */ --owui-accent-contrast: #191724; --owui-success: #9ccfd8; /* foam */ --owui-warning: #f6c177; /* gold */ --owui-danger: #eb6f92; /* love */ --owui-info: #31748f; /* pine */ } [data-theme="rose-pine-dawn"] { --owui-bg-base: #faf4ed; --owui-bg-surface: #fffaf3; --owui-bg-surface-2: #f2e9e1; --owui-bg-elevated: #fffaf3; --owui-text: #575279; --owui-text-muted: #797593; --owui-text-subtle: #9893a5; --owui-border: #dfdad9; --owui-border-strong: #cecacd; --owui-accent: #907aa9; /* iris */ --owui-accent-hover: #d7827e; /* rose */ --owui-accent-contrast: #faf4ed; --owui-success: #56949f; /* foam */ --owui-warning: #ea9d34; /* gold */ --owui-danger: #b4637a; /* love */ --owui-info: #286983; /* pine */ } /* Her — tema rosado de OpenWebUI (base light + acento rosa). Los .css estáticos * de "her" no están en static/themes/; valores derivados fieles a su estética * (light base, warm pink) — a refinar en la validación visual. */ [data-theme="her"] { --owui-bg-base: #fdf1f3; --owui-bg-surface: #fbe4e9; --owui-bg-surface-2: #f7d3dc; --owui-bg-elevated: #ffffff; --owui-text: #3d1f28; --owui-text-muted: #8a5561; --owui-text-subtle: #b08791; --owui-border: #f2c2cd; --owui-border-strong: #e9a7b6; --owui-accent: #db5a86; --owui-accent-hover: #c23f6d; --owui-accent-contrast: #ffffff; --owui-success: #4c9a83; --owui-warning: #d9902b; --owui-danger: #d64550; --owui-info: #7a6bd8; }