/* SEMANTIC TOKENS — colour, and what each colour means. Rebuilt. The values this replaced were GitHub's dark theme (#0b0e14 surfaces, #58a6ff accent) with TradingView's default candle colours on top — a competent default, and not a brand. What is KEPT is the part that was genuinely well designed: the assignments. Green is profit and red is loss, everywhere. Violet is the machine. Colour never carries meaning alone. THE NEUTRALS ARE INK, NOT SLATE. A deep blue-black with warm cream type rather than cool blue-white — the single biggest reason this no longer reads as a developer tool. Cream on ink is a paper reference, and it is easier to sit in front of for six hours than #dfe5ec on #0b0e14. THE BRAND IS BRASS, NOT BLUE. Moving the brand off blue does real systemic work: blue is now free to mean nothing but "interactive", and the brand hue can appear on a marketing page without being mistaken for a control. THE RULE, unchanged: no component may contain a hex colour. If a component needs a new colour, add a token here. ⚠ THESE TOKENS CANNOT BE READ FROM JAVASCRIPT. getPropertyValue('--surface-base') returns the string "light-dark(#FBFAF7, #0B0F15)", not a colour — light-dark() is resolved at use, against the element's color-scheme. Canvas code that needs a real value must set the property on a probe element and read back a resolved property (e.g. set `color: var(--market-up)` and read `color`). A token(name, fallback) helper reading the custom property directly WILL break. */ /* HOW THE TWO THEMES ARE EXPRESSED Every themed token is one `light-dark(light, dark)` declaration, so the pair is written ONCE and the two halves sit on the same line where they can be compared. The alternative — a second copy of the whole palette under a media query — is what was here before, and a duplicated palette is a palette that drifts. `color-scheme` is the switch. It also tells the browser to theme its own furniture — scrollbars, form controls, the space past the end of the page. Without it a light page keeps dark scrollbars, which is the tell that a theme was bolted on. The two jobs are the same mechanism, so they cannot fall out of step: there is no way to change the palette without changing the scrollbars. `light dark` means FOLLOW THE OS. An explicit choice overrides it, and removing the attribute returns to following — which is what makes "System" a real third state rather than a label on the dark theme. */ :root { color-scheme: light dark; } :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } /* LIGHT is not a tint of dark: warm paper rather than cool white, because the dark theme is cream-on-ink and a bluish light mode would read as a different product. */ :root { /* --- surface — ink / paper --------------------------------------------- Five steps. The gaps are deliberately uneven: base→raised is small (a panel is barely lifted) while overlay→hover is larger (a hovered row must be unmistakable at a glance). */ --surface-base: light-dark(#FBFAF7, #0B0F15); --surface-raised: light-dark(#F4F2ED, #111720); --surface-overlay: light-dark(#EDEAE3, #18202B); --surface-sunken: light-dark(#E5E1D8, #070A0E); --surface-hover: light-dark(#E3DFD5, #1F2937); /* --- line -------------------------------------------------------------- Three weights, and they do the elevation work that shadow does elsewhere. On ink, a border reads as an edge and a shadow reads as nothing. */ --line-subtle: light-dark(#EBE7DE, #141B24); --line-default: light-dark(#DAD5C9, #202A36); --line-strong: light-dark(#B9B2A2, #33404F); /* A 1px inner highlight along a top edge. The only "shine" in the system. */ --edge-highlight: light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.04)); /* --- text — warm cream on ink, ink on paper ---------------------------- */ --text-primary: light-dark(#1A1F26, #F2EEE5); --text-secondary: light-dark(#4A5460, #A6ADB8); --text-muted: light-dark(#6E7783, #76808D); --text-faint: light-dark(#9AA2AD, #515C69); --text-inverse: light-dark(#FBFAF7, #0B0F15); /* --- market semantics -------------------------------------------------- Desaturated from the renderer defaults on purpose. #26a69a / #ef5350 are TradingView's, and at full chroma across two hundred candles they vibrate. These sit at close to equal lightness, so neither direction dominates a dense table, and both survive being drawn 1px wide. The light values are darkened so they hold their meaning against paper at the same perceived strength they have against ink. Never encode meaning in colour alone: P&L also carries a sign glyph. */ --market-up: light-dark(#2F7A5F, #4FA383); --market-up-soft: light-dark(rgba(47, 122, 95, 0.12), rgba(79, 163, 131, 0.14)); --market-down: light-dark(#A83A34, #CC564F); --market-down-soft: light-dark(rgba(168, 58, 52, 0.12), rgba(204, 86, 79, 0.14)); /* The one neutral that reads the same on both. */ --market-flat: #76808D; /* --- AI layer ---------------------------------------------------------- Everything the machine produced. Distinct from the trader's own marks in hue, in lightness, in dash pattern, and by a literal "AI · " label prefix. */ --ai-primary: light-dark(#5B3FA8, #8E7BE0); --ai-soft: light-dark(rgba(91, 63, 168, 0.10), rgba(142, 123, 224, 0.13)); --ai-border: light-dark(rgba(91, 63, 168, 0.32), rgba(142, 123, 224, 0.38)); --ai-text: light-dark(#4A3090, #B9ABF2); /* --- the trader's own drawings ----------------------------------------- BONE ON INK, INK ON PAPER — and this fixes a defect the old system flagged and could not solve. Violet against amber measured ~1.8:1 in greyscale, below the 3:1 WCAG 1.4.11 asks of non-text contrast, in BOTH themes. ⚠ CORRECTED ON ADOPTION. This block shipped claiming "~3.6:1 against violet in dark and ~4.9:1 in light". Measured with the WCAG 2.x relative-luminance formula — the same function that measured the old pair at 1.8:1, so the comparison is like for like — it is **2.99:1 in dark and 2.15:1 in light**. The quoted figures are reproducible only by dropping the `+0.05` flare term from the ratio, which inflates it most for exactly the dark colours at issue. So the improvement is real and large (dark 1.80 → 2.99, light 1.15 → 2.15) and the claim that it clears the 3:1 of WCAG 1.4.11 is not: neither theme does, and light is the weaker of the two rather than the stronger. Getting there needs the violet lighter in dark and darker in light, which is a palette decision rather than a fix to slip in during adoption. `semantic.test.ts` pins the measured values so they cannot silently regress, and carries the 3:1 target as the number to design toward. What is true either way: the trader's marks are ink on the chart; the machine's are violet, dashed, and carry an "AI · " prefix. Colour is the fourth signal, not the mechanism — and the amber that used to do this job is released to mean caution and nothing else. */ --user-drawing: light-dark(#1A1F26, #F2EEE5); --user-drawing-soft: light-dark(rgba(26, 31, 38, 0.08), rgba(242, 238, 229, 0.10)); /* --- status ------------------------------------------------------------ ok and breached deliberately reuse the market hues: "you are fine" and "you are losing" are the same fact wearing a different hat, and giving them separate greens would teach the eye that they are unrelated. */ --status-ok: light-dark(#2F7A5F, #4FA383); --status-caution: light-dark(#8A6410, #C9922F); --status-warning: light-dark(#A2521C, #D2703A); --status-breached: light-dark(#A83A34, #CC564F); --status-ok-soft: light-dark(rgba(47, 122, 95, 0.12), rgba(79, 163, 131, 0.13)); --status-caution-soft: light-dark(rgba(138, 100, 16, 0.12), rgba(201, 146, 47, 0.13)); --status-warning-soft: light-dark(rgba(162, 82, 28, 0.12), rgba(210, 112, 58, 0.13)); --status-breached-soft: light-dark(rgba(168, 58, 52, 0.12), rgba(204, 86, 79, 0.13)); /* --- brand ------------------------------------------------------------- */ --brand: light-dark(#8A5A18, #C08A3E); --brand-soft: light-dark(rgba(138, 90, 24, 0.12), rgba(192, 138, 62, 0.15)); --brand-strong: light-dark(#6E460F, #D9A254); /* --- interactive ------------------------------------------------------- Blue now means exactly one thing: this responds to you. It carries no brand weight and no market meaning, which is what lets it be used freely. */ --accent: light-dark(#2C5AA8, #5B87D6); --accent-soft: light-dark(rgba(44, 90, 168, 0.12), rgba(91, 135, 214, 0.14)); /* --- control faces ----------------------------------------------------- The two ends of a button's fill, lighter first. Not part of the design system as delivered — its buttons are flat — and added back deliberately: a filled key with light falling across it is what separates the one action on a screen from the six things that merely look like they might be. Derived from `--accent` and `--surface-hover` above, so a change to either carries through rather than stranding a hand-picked pair. Colours rather than a `linear-gradient()` because this file is shared with mobile, which has no CSS and composes its own gradient from two stops. The web writes `linear-gradient(180deg, var(--x-hi), var(--x-lo))` once; because `-hi` is the lighter end in BOTH halves of every pair, that single expression means "lit from above" with no per-theme override. Material, not decoration: each pair spans ~3.3% of lightness at a fixed hue and chroma — inside the ≤4% budget with room for 8-bit rounding. The worst point of each still carries its label at 5:1 or better. `semantic.test.ts` asserts all three properties, because WCAG defines contrast between two colours and a gradient would otherwise make the ratio unverifiable. */ --accent-hi: light-dark(#315fae, #608cdc); --accent-lo: light-dark(#2755a3, #5682d0); --control-hi: light-dark(#e8e4da, #232d3b); --control-lo: light-dark(#dedad0, #1b2533); }