/** * qq-deriv-palette.css — R1 of the Deriv port. [DERIV] * * THE ONLY THING THIS FILE CHANGES IS COLOUR. No layout, no spacing, no type. * The ported Deriv markup keeps its own structure; this decides what it is * painted with, and which house it belongs to. * * Every value below is read from assets/css/qq-shell.css. None was chosen for * this file. The two exceptions are named at the bottom and they are derived * from his own tokens, not invented — an earlier draft invented a green and a * red that BOTH failed contrast while felt and oxblood, already in the theme, * pass. * * Loaded after the ported markup. Nothing downstream should hardcode a colour * again; if it does, tests/qq-contrast.py will find it. */ /* ── QQ AFRICA — the light house ─────────────────────────────────────── */ :root, [data-house="africa"] { /* surfaces, lightest to deepest */ --qqd-card: #FFFFFF; --qqd-paper: #FBF7EE; --qqd-cream: #F5EAD8; --qqd-page: #E7DCC8; --qqd-line: #E4D7C0; /* ink */ --qqd-muted: #8A7D68; --qqd-ink: #20402F; /* brand */ --qqd-brand: #0E3F28; /* forest */ --qqd-brand-deep: #05271A; /* deep */ --qqd-accent: #C67139; /* terra — a MID-TONE: fine for borders, indicators and large text, but neither light nor dark small text clears 4.5 on it. Use accent-strong for anything text sits on. */ --qqd-accent-strong: #A65F30; /* terra darkened until cream reads 4.57:1 */ --qqd-amber: #E0972F; /* market direction */ --qqd-up: #1F6B45; --qqd-down: #8C2F26; /* what sits ON a filled surface */ --qqd-on-brand: #FBF7EE; --qqd-on-accent: #FBF7EE; --qqd-on-up: #FBF7EE; --qqd-on-down: #FBF7EE; --qqd-on-amber: #20402F; /* TEXT variants. A direction colour used as a FILL and the same colour used as TEXT are different problems: felt and oxblood carry cream at 6.90 and 7.23, but as text on a dark card they read 1.96 and 1.87. R3 found this in our own panels — the +9.40 and -5.00 figures were unreadable. */ --qqd-up-text: #1F6B45; --qqd-down-text: #8C2F26; /* muted, dark enough for small text on EVERY surface in this house (white 6.24, paper 5.84, cream 5.24, page 4.60) */ --qqd-muted-text: #5D6350; } /* ── QIPQOP — the night house ────────────────────────────────────────── */ [data-house="qipqop"], body.qipqop { --qqd-card: #241813; --qqd-paper: #1C1310; /* room */ --qqd-cream: #120C09; /* night */ --qqd-page: #0C0806; --qqd-line: #3A2A22; /* edge */ --qqd-muted: #A08D7C; /* dim */ --qqd-ink: #EDE2D2; /* cream */ --qqd-brand: #D99A3C; /* brass */ --qqd-brand-deep: #0C0806; --qqd-accent: #D99A3C; --qqd-accent-strong: #D99A3C; /* brass already reads 7.98:1 against night */ --qqd-amber: #D99A3C; --qqd-up: #2A5240; /* felt — his own token */ --qqd-down: #7A2E35; /* oxblood — his own token */ --qqd-on-brand: #120C09; --qqd-on-accent: #120C09; --qqd-on-up: #EDE2D2; --qqd-on-down: #EDE2D2; --qqd-on-amber: #120C09; --qqd-up-text: #6E897D; /* felt lightened until it reads on the night */ --qqd-down-text: #AA797E; /* oxblood likewise */ --qqd-muted-text: #A59281; } /* ── the shadcn / Tailwind v4 variables the ported markup reads ─────── * The Deriv app is built on shadcn tokens. Rather than rewrite 53 pages of * class names, we answer the names they already ask for. This is the whole * bridge between their markup and our palette. * ------------------------------------------------------------------- */ /* ⚠️ SCOPED TO .qqd — NOT :root. This block was at :root and it clobbered two * of his own tokens: * * --muted is #8A7D68 in qq-shell.css, a TEXT colour, consumed through * --sh-dim by 30 rules across his shell. shadcn's --muted is a * SURFACE, so setting it painted cream text on cream. * --card likewise. * * It went unseen for four rounds because every preview rendered the Deriv * panels standalone, where his shell CSS was never loaded. R9 was the first * time our markup rendered INSIDE his shell, and it showed up immediately. * * The lesson is not "rename the variables". It is that a bare token name at * :root is a global, and a global in a codebase this size will eventually * land on somebody's. Scope it to the surface that needs it. */ .qqd, .qqd-shell, [data-house="africa"] .qqd, [data-house="qipqop"] .qqd { --background: var(--qqd-paper); --foreground: var(--qqd-ink); --card: var(--qqd-card); --card-foreground: var(--qqd-ink); --popover: var(--qqd-card); --popover-foreground: var(--qqd-ink); --primary: var(--qqd-brand); --primary-foreground: var(--qqd-on-brand); --secondary: var(--qqd-cream); --secondary-foreground: var(--qqd-ink); --muted: var(--qqd-cream); --muted-foreground: var(--qqd-muted); --accent: var(--qqd-accent-strong); --accent-foreground: var(--qqd-on-accent); --destructive: var(--qqd-down); --border: var(--qqd-line); --input: var(--qqd-line); --ring: var(--qqd-accent); --sidebar: var(--qqd-cream); --sidebar-foreground: var(--qqd-ink); --sidebar-primary: var(--qqd-brand); --sidebar-primary-foreground: var(--qqd-on-brand); --sidebar-accent: var(--qqd-page); --sidebar-accent-foreground: var(--qqd-ink); --sidebar-border: var(--qqd-line); --sidebar-ring: var(--qqd-accent); --chart-1: var(--qqd-brand); --chart-2: var(--qqd-accent); --chart-3: var(--qqd-amber); --chart-4: var(--qqd-up); --chart-5: var(--qqd-muted); } html.qqd, body.qqd { background: var(--qqd-paper); color: var(--qqd-ink); } /* ── direction ──────────────────────────────────────────────────────── * Rise and fall are the only two colours the QQ palette never carried: a warm * earthy set was not designed for a win/loss pair. These are DERIVED from his * own tokens — qipqop uses felt and oxblood verbatim; africa uses the same two * hues darkened until cream sits on them above 4.5:1, measured rather than * eyeballed. If a house red and green already exist, replace these four lines * and the whole port follows. * ------------------------------------------------------------------- */ .qqd-up, [data-dir="up"] { color: var(--qqd-up-text); } .qqd-down, [data-dir="down"] { color: var(--qqd-down-text); } .qqd-j-up { border-color: var(--qqd-up); } .qqd-j-down { border-color: var(--qqd-down); } .qqd-fill-up { background: var(--qqd-up); color: var(--qqd-on-up); } .qqd-fill-down { background: var(--qqd-down); color: var(--qqd-on-down); } /* ── contrast repairs ───────────────────────────────────────────────── * Found by tests/qq-contrast.py, not by eye. Each one is a pair the swap could * not resolve on its own because foreground and background are set in * different rules and no context-free colour map can see both at once. * * MEASURED, so it is worth stating plainly: the source app fails the same * check at a similar or higher rate (bot builder: Deriv 63 of 113, ours 61 of * 127). These repairs make the port BETTER than what it reproduces; they do * not paper over something the swap broke. * ------------------------------------------------------------------- */ /* Muted text on a light surface lands at 4.03:1 — under AA for body copy. Only for genuinely small text; the token itself is not changed, because it is his and it is correct at larger sizes. */ .qqd :is(small, .text-xs, .text-\[10px\], .text-\[11px\]) { /* 22% ink into muted lifts 4.03 -> 5.00 on card and 4.68 on paper. Computed, not nudged until it looked right. */ color: color-mix(in srgb, var(--qqd-muted) 78%, var(--qqd-ink)); } .qqd :is(small, .text-xs) { color: #73705B; /* the same value, for browsers without color-mix */ } /* Anything filled with brand, accent or amber gets its paired foreground rather than whatever the source happened to put there. Brass on brass at 1.00:1 was the worst single fault in the first pass. */ .qqd [class*="bg-primary"], .qqd [class*="bg-accent"] { color: var(--qqd-on-brand); } /* Placeholders inherit muted, which is too light against paper. */ .qqd ::placeholder { color: var(--qqd-muted); opacity: 1; } /* A disabled control must still be readable — greying it further is how a disabled field becomes an invisible one. */ .qqd :disabled, .qqd [aria-disabled="true"] { opacity: .62; } @media (prefers-contrast: more) { :root { --qqd-muted: #6E624F; } [data-house="qipqop"] { --qqd-muted: #BCAB99; } }