/** * ChartDeck themes - "Holo Glass", dark and light (round 2, ui agent). * * EVERY colour token lives here, twice: the dark Holo Glass palette (the default and the brand's * canonical values, unchanged from atlas-tokens.css / brand.css) and a designed LIGHT Holo palette. * Pages link this after /brand/brand.css; /brand/theme.js sets before * first paint from localStorage['cd.theme'] (light | dark | system). With no script the OS setting * decides (the :not([data-theme]) block at the bottom). * * Two vocabularies, one palette: * --cd-* the brand names (brand.css): auth, admin, pricing, account pages * --a-* the terminal names (atlas-tokens.css keeps sizes, type, layers; colours are here) * * LIGHT palette (contrast, WCAG 2.x, on white #FFFFFF / ground #F7F8FB): * ink #0E1320 18.5 / 17.5 - fg-2 #394154 10.2 / 9.6 - muted #5C6578 5.9 / 5.5 - fg-4 #9AA3B2 decoration only * primary lilac, tuned deeper for white: #4C5BD4 5.6 / 5.3 (white text on it 5.6) * gain #08875A 4.5 / 4.3 - loss #D42F52 4.9 / 4.6 - warning amber #9A6508 5.0 / 4.7 * aqua highlight #0B9A76 (3.6, non-text) - focus ring #0FA37F (3.2:1 against white, non-text >= 3) * The holo gradient keeps its five stops (it is the brand); on light it sits on white with dark text. */ /* --------------------------------------------------------------------------------------------- DARK (default): the brand's canonical Holo Glass values. --------------------------------------------------------------------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; /* brand names */ --cd-bg: #07090D; --cd-surface: #0F131B; --cd-raised: #161B26; --cd-line: #1F2533; --cd-text: #F2F4F8; --cd-muted: #8C95A6; --cd-lilac: #A9B8FF; --cd-aqua: #7FFFD4; --cd-pink: #FFA8D2; --cd-gold: #FFD98A; --cd-cyan: #7FE0FF; --cd-gain: #3DDC97; --cd-loss: #FF6B81; --cd-warn: #FFD98A; --cd-on-holo: #07090D; --cd-holo: linear-gradient(135deg, #7FFFD4 0%, #A9B8FF 30%, #FFA8D2 55%, #FFD98A 80%, #7FE0FF 100%); --cd-holo-h: linear-gradient(90deg, #7FFFD4 0%, #A9B8FF 30%, #FFA8D2 55%, #FFD98A 80%, #7FE0FF 100%); --cd-glass: rgba(255,255,255,.06); --cd-glass-2: rgba(255,255,255,.09); /* terminal names: surfaces (never pure black; it makes every hairline vibrate) */ --a-bg: #07090D; --a-panel: #0F131B; --a-sunken: #05070A; --a-raised: #161B26; --a-hover: #1D2331; --a-glass: rgba(255,255,255,.06); --a-glass-2: rgba(255,255,255,.09); --a-line-1: #1F2533; --a-line-2: #283042; --a-line-3: #353E53; --a-fg-1: #F2F4F8; --a-fg-2: #C3C9D4; --a-fg-3: #8C95A6; --a-fg-4: #5A6273; --a-accent: #A9B8FF; --a-accent-hover: #C3CDFF; --a-accent-strong: #A9B8FF; --a-accent-strong-hover: #C3CDFF; --a-cyan: #7FFFD4; --a-up: #3DDC97; --a-down: #FF6B81; --a-warn: #FFD98A; --a-holo: linear-gradient(135deg,#7FFFD4 0%,#A9B8FF 30%,#FFA8D2 55%,#FFD98A 80%,#7FE0FF 100%); --a-holo-h: linear-gradient(90deg,#7FFFD4 0%,#A9B8FF 30%,#FFA8D2 55%,#FFD98A 80%,#7FE0FF 100%); --a-accent-t1: rgba(169,184,255,.08); --a-accent-t2: rgba(169,184,255,.14); --a-accent-t3: rgba(169,184,255,.32); --a-accent-t4: rgba(169,184,255,.60); --a-cyan-t2: rgba(127,255,212,.14); --a-focus: #7FFFD4; --a-up-t1: rgba(61,220,151,.10); --a-up-t2: rgba(61,220,151,.16); --a-up-t3: rgba(61,220,151,.45); --a-down-t1: rgba(255,107,129,.10); --a-down-t2: rgba(255,107,129,.16); --a-down-t3: rgba(255,107,129,.45); --a-warn-t1: rgba(255,217,138,.10); --a-warn-t2: rgba(255,217,138,.16); --a-warn-t3: rgba(255,217,138,.45); --a-up-soft: #9BEDC6; --a-down-soft: #FFA3B1; --a-warn-soft: #FFE8B5; --a-on-accent: #07090D; --a-on-up: #07090D; --a-on-down: #07090D; --a-scrim: rgba(7,9,13,.72); --a-scrim-heavy: rgba(7,9,13,.92); --a-veil: rgba(7,9,13,.55); /* a card over a chart: history stays visible behind it */ --a-brand-cyan: #A9B8FF; --a-brand-purple: #7FFFD4; --a-brand-sweep-cyan: linear-gradient(90deg,#7FFFD4,#A9B8FF,#FFA8D2,#FFD98A,#7FE0FF); --a-brand-sweep-purple: linear-gradient(90deg,#A9B8FF,#FFA8D2,#A9B8FF); /* chart canvas (read by atlas-chart.js; re-read on the window event cd:themechange) */ --a-ch-grid: rgba(255,255,255,.035); --a-ch-axis: #8C95A6; --a-ch-axisline: rgba(255,255,255,.06); --a-ch-sep: rgba(255,255,255,.06); --a-ch-cross: rgba(242,244,248,.35); --a-ch-label-text: #F2F4F8; --a-ch-label-bg: #1D2331; --a-ch-label-line: #353E53; --a-ch-state-bg: rgba(22,27,38,.82); --a-ch-state-line: rgba(255,255,255,.10); --a-ch-bid-heat: 61,220,151; --a-ch-ask-heat: 255,107,129; --a-ch-wm: rgba(140,149,166,.075); /* the price-axis glow (atlas.css .at-glow and the screenshot strip) */ --a-glow-up: rgba(61,220,151,.22); --a-glow-down: rgba(255,107,129,.22); --a-sh-1: 0 8px 24px rgba(0,0,0,.45); --a-sh-2: 0 18px 44px rgba(0,0,0,.55); --a-sh-3: 0 26px 70px rgba(0,0,0,.62); --a-sh-bar: 0 6px 18px -14px rgba(0,0,0,.55); /* soft edge under the top bar */ --a-scroll: rgba(255,255,255,.10); } /* --------------------------------------------------------------------------------------------- LIGHT: off-white ground, white surfaces, cool grey lines, deep-ink text, the holo accents tuned deeper so they read on white. Gain / loss are darker than the dark theme's so a candle and a "+2.4%" both hold contrast on white. --------------------------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --cd-bg: #F7F8FB; --cd-surface: #FFFFFF; --cd-raised: #FFFFFF; --cd-line: #E3E7EF; --cd-text: #0E1320; --cd-muted: #5C6578; --cd-lilac: #4C5BD4; --cd-aqua: #0B9A76; --cd-pink: #C8467F; --cd-gold: #9A6508; --cd-cyan: #0A7FA8; --cd-gain: #08875A; --cd-loss: #D42F52; --cd-warn: #9A6508; --cd-on-holo: #07090D; --cd-holo: linear-gradient(135deg, #7FFFD4 0%, #A9B8FF 30%, #FFA8D2 55%, #FFD98A 80%, #7FE0FF 100%); --cd-holo-h: linear-gradient(90deg, #7FFFD4 0%, #A9B8FF 30%, #FFA8D2 55%, #FFD98A 80%, #7FE0FF 100%); --cd-glass: rgba(14,19,32,.035); --cd-glass-2: rgba(14,19,32,.06); --a-bg: #F7F8FB; --a-panel: #FFFFFF; --a-sunken: #F0F2F7; --a-raised: #FFFFFF; --a-hover: #EEF1F7; --a-glass: rgba(14,19,32,.035); --a-glass-2: rgba(14,19,32,.06); --a-line-1: #E3E7EF; --a-line-2: #D5DBE6; --a-line-3: #C3CAD8; --a-fg-1: #0E1320; --a-fg-2: #394154; --a-fg-3: #5C6578; --a-fg-4: #9AA3B2; --a-accent: #4C5BD4; --a-accent-hover: #3A48BF; --a-accent-strong: #4C5BD4; --a-accent-strong-hover: #3A48BF; --a-cyan: #0B9A76; --a-up: #08875A; --a-down: #D42F52; --a-warn: #9A6508; --a-holo: linear-gradient(135deg,#7FFFD4 0%,#A9B8FF 30%,#FFA8D2 55%,#FFD98A 80%,#7FE0FF 100%); --a-holo-h: linear-gradient(90deg,#3FD9AE 0%,#7C8CF0 30%,#F07AB4 55%,#E8B550 80%,#3FC3EA 100%); --a-accent-t1: rgba(76,91,212,.06); --a-accent-t2: rgba(76,91,212,.11); --a-accent-t3: rgba(76,91,212,.28); --a-accent-t4: rgba(76,91,212,.55); --a-cyan-t2: rgba(11,154,118,.12); --a-focus: #0FA37F; --a-up-t1: rgba(8,135,90,.07); --a-up-t2: rgba(8,135,90,.12); --a-up-t3: rgba(8,135,90,.40); --a-down-t1: rgba(212,47,82,.07); --a-down-t2: rgba(212,47,82,.12); --a-down-t3: rgba(212,47,82,.40); --a-warn-t1: rgba(214,152,32,.10); --a-warn-t2: rgba(214,152,32,.16); --a-warn-t3: rgba(214,152,32,.45); --a-up-soft: #066B47; --a-down-soft: #A8203F; --a-warn-soft: #7A4F05; --a-on-accent: #FFFFFF; --a-on-up: #FFFFFF; --a-on-down: #FFFFFF; --a-scrim: rgba(15,20,32,.32); --a-scrim-heavy: rgba(15,20,32,.78); --a-veil: rgba(247,248,251,.62); --a-brand-cyan: #4C5BD4; --a-brand-purple: #0B9A76; --a-brand-sweep-cyan: linear-gradient(90deg,#3FD9AE,#7C8CF0,#F07AB4,#E8B550,#3FC3EA); --a-brand-sweep-purple: linear-gradient(90deg,#7C8CF0,#F07AB4,#7C8CF0); --a-ch-grid: rgba(14,19,32,.055); --a-ch-axis: #5C6578; --a-ch-axisline: rgba(14,19,32,.10); --a-ch-sep: rgba(14,19,32,.10); --a-ch-cross: rgba(14,19,32,.38); --a-ch-label-text: #FFFFFF; --a-ch-label-bg: #2A3142; --a-ch-label-line: #2A3142; --a-ch-state-bg: rgba(255,255,255,.92); --a-ch-state-line: rgba(14,19,32,.12); --a-ch-bid-heat: 8,135,90; --a-ch-ask-heat: 212,47,82; --a-ch-wm: rgba(14,19,32,.055); --a-glow-up: rgba(8,135,90,.10); --a-glow-down: rgba(212,47,82,.10); --a-sh-1: 0 6px 20px rgba(16,24,40,.10), 0 1px 3px rgba(16,24,40,.06); --a-sh-2: 0 14px 36px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.06); --a-sh-3: 0 24px 60px rgba(16,24,40,.18); --a-sh-bar: 0 6px 16px -14px rgba(16,24,40,.28); --a-scroll: rgba(14,19,32,.16); } /* No script (or before it ran): follow the OS. theme.js always writes data-theme, so this only covers the no-JS case. Same values as the light block above. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --cd-bg: #F7F8FB; --cd-surface: #FFFFFF; --cd-raised: #FFFFFF; --cd-line: #E3E7EF; --cd-text: #0E1320; --cd-muted: #5C6578; --cd-lilac: #4C5BD4; --cd-aqua: #0B9A76; --cd-gain: #08875A; --cd-loss: #D42F52; --cd-warn: #9A6508; --cd-glass: rgba(14,19,32,.035); --cd-glass-2: rgba(14,19,32,.06); --a-bg: #F7F8FB; --a-panel: #FFFFFF; --a-sunken: #F0F2F7; --a-raised: #FFFFFF; --a-hover: #EEF1F7; --a-line-1: #E3E7EF; --a-line-2: #D5DBE6; --a-line-3: #C3CAD8; --a-fg-1: #0E1320; --a-fg-2: #394154; --a-fg-3: #5C6578; --a-fg-4: #9AA3B2; --a-accent: #4C5BD4; --a-accent-hover: #3A48BF; --a-up: #08875A; --a-down: #D42F52; --a-warn: #9A6508; --a-on-accent: #FFFFFF; --a-focus: #0FA37F; } } /* The page ground follows the theme on every page that links this file. */ html { background: var(--cd-bg); } /* The terminal's Trade button (chartdeck.css .cd-trade): the same aqua in both themes, by design. */ :root { --cd-trade-bg: #7FFFD4; --cd-trade-fg: #07090D; --cd-trade-ring: rgba(127,255,212,.35); --cd-trade-glow: rgba(127,255,212,.55); --cd-trade-ring-hover: rgba(127,255,212,.5); --cd-trade-glow-hover: rgba(127,255,212,.75); --cd-trade-edge-light: #3FCFA4; --cd-trade-glow-light: rgba(15,163,127,.5); }