/* ============================================================================ designs/violet.css — بنفسجي, the WHOLE design, and the reference copy ============================================================================ A design is TWO RULES holding CUSTOM PROPERTIES, and nothing else. No selector, no media query, no @font-face, no image. What differs between designs is a COLOUR: the shapes, the sizes, the type and the structure are the app's and live in _variables.css (D5, D9). To add a design, copy this file, rename both selectors, change the values, and add one line to designs.yml — see plans/switchable-designs-plan.md §4.11. Keep every token and keep the groups in this order: DesignTokensTest compares each design's property set against THIS file's and names whatever is missing or extra, in either direction. Why the dark rule has two selectors: on only the compound form matches, while a nested element carrying its own data-design (the picker's swatch) is matched by the descendant form and so follows the PAGE's theme with no script. In a light page neither matches. Never write a var(--x, fallback) for a design token. A token that only some designs define does not exist — the fallback would hide exactly the gap the test exists to report. ============================================================================ */ [data-design="violet"] { /* --- Surfaces, text, borders ------------------------------------------ The surface LADDER, not three shades of the same white: page 0.802, card 0.946, one step of 1.17 between them, so cards read as elevated and the eye has somewhere to rest. --text-muted and --border-strong are calibrated against THESE three surfaces — re-tune them together or a dimmed surface silently drags its text under AA. */ --bg: #e2e8f1; --bg-secondary: #edf1f6; --card: #f7f9fc; --card-hover: #dfe3e8; /* the surface a hovered item inside a card lifts to */ --text: #1f2937; /* 14.68:1 on --card */ --text-secondary: #5b6472; /* 5.98:1 on --card, 5.14:1 on --bg */ --text-muted: #5f6775; /* 5.41:1 on --card, 4.63:1 on --bg */ --border: #cbd2dd; /* decorative: card edges, dividers */ --border-strong: #74808f; /* a CONTROL's boundary — 3:1 on all three surfaces above */ /* --- Brand as TEXT ---------------------------------------------------- Must pass 4.5:1 as text on --card AND on --bg. Deepened from #667eea, which scored 3.66:1 in both roles, so every purple link and every white button label failed together. Deepened AGAIN in phase 3, from #5a5fd0. That value was measured on the card alone and left at 4.28:1 on the page background — the SECOND surface this very comment names. Nothing caught it until the four-design contrast table checked both surfaces for every design at once, which is the argument for the table existing rather than a note per value. */ --primary: #555acf; /* 5.31:1 on --card, 4.55:1 on --bg */ --primary-dark: #4f52c9; /* 5.89:1 / 5.04:1 */ --primary-hover: #4f52c9; --primary-rgb: 85, 90, 207; --accent: #6b4a92; --accent-rgb: 107, 74, 146; /* --- Brand as FILL ---------------------------------------------------- A second job, and a second token: the colour that reads as TEXT on a card and the colour a label reads ON are not the same colour. Never write #fff on a brand fill — take the on-token for what the label sits on. The light stop is the binding constraint: #5257cc gives a white label 5.84:1, #6b4a92 gives 6.95:1. */ --primary-fill: linear-gradient(135deg, #5257cc 0%, #6b4a92 100%); --primary-fill-solid: #5257cc; --on-primary-fill: #ffffff; --on-primary: #ffffff; /* on a FLAT --primary: 5.27:1 */ --on-accent: #ffffff; /* 6.95:1 on --accent */ /* --- Chrome ------------------------------------------------------------ The rail is DARK in both themes (all four sheets draw it that way), so these values do not follow the page's surfaces. Measured on --sidebar-bg #1a1a2e: text 14.20:1, muted 7.65:1, icon 9.31:1. --topbar-bg is a FLAT colour and never a gradient — design.js copies it into (D12), which cannot take one. */ --sidebar-bg: #1a1a2e; --sidebar-bg-top: #232344; /* the faint lift over the rail's first 240px */ --sidebar-text: #e8eaf2; --sidebar-muted: #a7adc4; --sidebar-icon: #b9bfd4; --sidebar-line: #2b2b46; --sidebar-hover-bg: #242440; /* --sidebar-text still 12.48:1 on it */ /* The active item. --nav-active-muted is measured on the DARKER stop, which is the binding one: #ebe7f7 is 4.82:1 there and 5.73:1 on the other. A lighter-looking #e2dcf0 measured 4.38:1 and failed. */ --nav-active-a: #5257cc; --nav-active-b: #6b4a92; --nav-active-text: #ffffff; /* 5.84:1 / 6.95:1 on the two stops */ --nav-active-muted: #ebe7f7; /* 4.82:1 / 5.73:1 */ --nav-active-shadow: rgba(82, 87, 204, 0.35); --topbar-bg: #f7f9fc; --topbar-border: #cbd2dd; --topbar-icon: #5b6472; /* 5.67:1 on --topbar-bg */ --logo-bg: #5257cc; --logo-fg: #ffffff; /* 5.84:1 — the «ت» mark on its box */ /* --- Stat chips -------------------------------------------------------- ONE chip shape for every design (D7): a solid fill under an AA-measured label, never a tint with coloured text. */ --chip-primary-bg: #5257cc; --chip-primary-fg: #ffffff; /* 5.84:1 */ --chip-success-bg: #047857; --chip-success-fg: #ffffff; /* 5.48:1 */ --chip-danger-bg: #dc2626; --chip-danger-fg: #ffffff; /* 4.83:1 */ --chip-warning-bg: #f59e0b; --chip-warning-fg: #1f2937; /* 6.83:1 — no amber passes under white */ --chip-info-bg: #2563eb; --chip-info-fg: #ffffff; /* 5.17:1 */ --chip-muted-bg: #5b6472; --chip-muted-fg: #ffffff; /* 5.98:1 */ /* --- People (avatar stacks) -------------------------------------------- The initials circles of every people column (common/avatar-stack.js). A person keeps ONE index everywhere, a hash of their id, and each design paints the six in its own hues: here violet-blue, purple, raspberry, azure, teal and amber. The letters are small bold text, so every label clears 4.5:1 on its own fill. */ --avatar-1-bg: #575aca; --avatar-1-fg: #ffffff; /* 5.64:1 — violet-blue */ --avatar-2-bg: #9247ae; --avatar-2-fg: #ffffff; /* 5.62:1 — purple */ --avatar-3-bg: #b03e6b; --avatar-3-fg: #ffffff; /* 5.60:1 — raspberry */ --avatar-4-bg: #246f8f; --avatar-4-fg: #ffffff; /* 5.61:1 — azure */ --avatar-5-bg: #267362; --avatar-5-fg: #ffffff; /* 5.66:1 — teal */ --avatar-6-bg: #ecac57; --avatar-6-fg: #2c2011; /* 8.02:1 — amber */ /* --- Toasts ------------------------------------------------------------ One toast shape for all designs; the colours are the design's. The close is the app's own icon and takes --toast-text, like the message. */ --toast-bg: #f7f9fc; --toast-text: #1f2937; /* 13.92:1 */ --toast-border: #cbd2dd; --toast-icon-success-bg: #047857; --toast-icon-success-fg: #ffffff; --toast-icon-danger-bg: #dc2626; --toast-icon-danger-fg: #ffffff; --toast-icon-warning-bg: #f59e0b; --toast-icon-warning-fg: #1f2937; } [data-design="violet"][data-theme="dark"], [data-theme="dark"] [data-design="violet"] { /* --- Surfaces, text, borders ----------------------------------------- */ --bg: #0f1419; --bg-secondary: #16213e; --card: #1a1a2e; /* LIGHTER than --card: here --bg-secondary is DARKER than the card, so a hover painted with it reads as a dent rather than a lift. */ --card-hover: #252540; --text: #e5e7eb; --text-secondary: #d1d5db; --text-muted: #9ca3af; /* 6.72:1 on the dark card */ --border: #2d3748; /* The mirror failure of light's: too DARK against the card rather than too light. Same three-surface test — card 3.25, bg 3.53, secondary 3.03. */ --border-strong: #5f6d84; /* --- Brand as TEXT ---------------------------------------------------- */ --primary: #8b7dd8; --primary-dark: #9d88e3; --primary-hover: #9d88e3; --primary-rgb: 139, 125, 216; --accent: #9d88e3; --accent-rgb: 157, 136, 227; /* --- Brand as FILL ----------------------------------------------------- The fill is the SOFTENED gradient, white on both stops (7.49:1 / 5.91:1). A label on a FLAT --primary or --accent takes dark ink instead: both are LIGHT purples here, where white measured 3.49:1 and 2.97:1 — the nine AA failures of §3.3 — and #0f1419 measures 5.31:1 and 6.23:1. */ --primary-fill: linear-gradient(135deg, #5a4a8e 0%, #6a5a9c 100%); --primary-fill-solid: #5a4a8e; --on-primary-fill: #ffffff; --on-primary: #0f1419; --on-accent: #0f1419; /* --- Chrome ------------------------------------------------------------ Measured on --sidebar-bg #16213e: text 12.84:1, muted 7.49:1, icon 9.10:1, and text on the hover 10.97:1. */ --sidebar-bg: #16213e; --sidebar-bg-top: #1d2b4f; --sidebar-text: #e5e7eb; --sidebar-muted: #a9b2c9; --sidebar-icon: #bcc4d8; --sidebar-line: #243354; --sidebar-hover-bg: #1f2d4f; /* Here the binding stop is the LIGHTER one: #ece8f7 is 4.91:1 on #6a5a9c and 6.22:1 on #5a4a8e. A #ded7ee measured 4.24:1 and failed. */ --nav-active-a: #5a4a8e; --nav-active-b: #6a5a9c; --nav-active-text: #ffffff; /* 7.49:1 / 5.91:1 */ --nav-active-muted: #ece8f7; /* 6.22:1 / 4.91:1 */ --nav-active-shadow: rgba(90, 74, 142, 0.45); --topbar-bg: #1a1a2e; --topbar-border: #2d3748; --topbar-icon: #d1d5db; /* 11.58:1 on --topbar-bg */ --logo-bg: #5a4a8e; --logo-fg: #ffffff; /* 7.49:1 */ /* --- Stat chips -------------------------------------------------------- The status fills are the same hex in both themes — a chip's contrast is its label against its OWN fill, and the theme around it changes nothing. Only the brand chip follows the theme's fill. */ --chip-primary-bg: #5a4a8e; --chip-primary-fg: #ffffff; /* 7.49:1 */ --chip-success-bg: #047857; --chip-success-fg: #ffffff; --chip-danger-bg: #dc2626; --chip-danger-fg: #ffffff; --chip-warning-bg: #f59e0b; --chip-warning-fg: #1f2937; --chip-info-bg: #2563eb; --chip-info-fg: #ffffff; --chip-muted-bg: #5b6472; --chip-muted-fg: #ffffff; /* --- People (avatar stacks) -------------------------------------------- The same six hues a step lighter, so a circle stands off the dark card. */ --avatar-1-bg: #6467ce; --avatar-1-fg: #ffffff; /* 4.80:1 */ --avatar-2-bg: #9d53b9; --avatar-2-fg: #ffffff; /* 4.80:1 */ --avatar-3-bg: #be4777; --avatar-3-fg: #ffffff; /* 4.82:1 */ --avatar-4-bg: #287a9e; --avatar-4-fg: #ffffff; /* 4.81:1 */ --avatar-5-bg: #2a7f6c; --avatar-5-fg: #ffffff; /* 4.83:1 */ --avatar-6-bg: #e99c37; --avatar-6-fg: #2c2011; /* 7.02:1 */ /* --- Toasts ------------------------------------------------------------ */ --toast-bg: #1a1a2e; --toast-text: #e5e7eb; /* 13.78:1 */ --toast-border: #2d3748; --toast-icon-success-bg: #047857; --toast-icon-success-fg: #ffffff; --toast-icon-danger-bg: #dc2626; --toast-icon-danger-fg: #ffffff; --toast-icon-warning-bg: #f59e0b; --toast-icon-warning-fg: #1f2937; }