/* * wok - 25.7.26 - Tex-Define Web design tokens (single source for colors, fonts, radii, shadows). * Pure :root custom properties - no selectors, so this file can never interfere with layout or behavior. * Loaded early on all pages (frame + login); customer overrides stay possible via customized.css (loads last). */ :root { /* Brand */ --td-brand: #d92d32; --td-brand-dark: #b91f25; /* Text */ /* wok - 28.7.26 - Web: careful contrast bump for the muted text colors (labels/hints were hard to read, feedback from the open-dialog V2 review; affects V1 surfaces using the tokens too). */ --td-ink: #172033; --td-ink-2: #2f3a4d; --td-muted: #5b6678; --td-muted-2: #8791a3; /* Lines & light surfaces */ --td-line: #dfe3ea; --td-line-strong: #cbd2dc; --td-surface: #ffffff; --td-surface-2: #f8fafc; --td-hover: #f2f4f7; --td-canvas: #f4f6f9; /* Dark panels (header, info-dropdowns, context menu) */ --td-panel: #172033; --td-panel-line: rgba(255, 255, 255, .14); --td-panel-hover: rgba(255, 255, 255, .1); --td-panel-active: rgba(255, 255, 255, .16); /* Focus */ --td-focus: #2563eb; --td-focus-ring: rgba(37, 99, 235, .28); --td-focus-ring-soft: rgba(37, 99, 235, .16); /* States (success / warning / error) */ --td-ok: #12b76a; --td-ok-bg: #ecfdf3; --td-warn: #f79009; --td-warn-bg: #fffaeb; --td-err: #b42318; --td-err-bg: #fef3f2; --td-err-line: #fecaca; /* Typography */ --td-font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Geometry */ --td-radius-sm: 6px; --td-radius-md: 10px; --td-radius-lg: 16px; --td-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --td-shadow-md: 0 12px 32px rgba(16, 24, 40, .12); } /* * wok - 1.8.26 - Web: dark mode. The theme is a pure token swap: an early inline script in the page head * sets data-td-theme="dark" on (from localStorage, before the first paint), everything styled with * the --td-* tokens follows automatically. --td-brand/--td-brand-dark stay untouched (brand red works on dark). */ :root[data-td-theme="dark"] { color-scheme: dark; /* Text */ --td-ink: #e7ebf3; --td-ink-2: #c9d1e0; --td-muted: #9aa4b8; --td-muted-2: #7c8699; /* Lines & surfaces */ --td-line: #2a3448; --td-line-strong: #3a465e; --td-surface: #1b2334; --td-surface-2: #161d2b; --td-hover: #232d42; --td-canvas: #10161f; /* Dark panels (header, info-dropdowns, context menu) stay dark, just a notch deeper than the surfaces */ --td-panel: #121926; --td-panel-line: rgba(255, 255, 255, .12); --td-panel-hover: rgba(255, 255, 255, .08); --td-panel-active: rgba(255, 255, 255, .14); /* Focus (slightly lighter blue for contrast on dark) */ --td-focus: #5b8def; --td-focus-ring: rgba(91, 141, 239, .35); --td-focus-ring-soft: rgba(91, 141, 239, .2); /* States (success / warning / error) */ --td-ok: #3ccb7f; --td-ok-bg: #0f2c20; --td-warn: #fbbf24; --td-warn-bg: #33270d; --td-err: #f97066; --td-err-bg: #331410; --td-err-line: #7a2e24; /* Shadows need more weight on dark backgrounds */ --td-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --td-shadow-md: 0 12px 32px rgba(0, 0, 0, .55); }