/* =========================================================================
LIGHT MODE, the signed-in OS on a light canvas
=========================================================================
Loaded LAST in , after headExtra, i.e. after every page stylesheet
(workspaces.css, doc-world.css, discovery-hub.css, asset-market.css, …).
That position is the whole point. Every previous attempt at light mode had
to be written as `!important` because it loaded in the shell block ABOVE the
page stylesheets and lost to them at equal specificity. Loading here means
`html[data-color-mode="light"] .foo` (0,2,1) beats a page's `.foo` (0,1,0)
honestly, so these rules stay overridable by anything that genuinely needs
to win, and a page can opt out with a more specific selector instead of an
escalating !important war.
THE ONE RULE THIS FILE FOLLOWS
-----------------------------
Never set a foreground without setting its background in the same rule.
The stylesheet this replaces did the opposite: it forced `color: #182b30`
onto every text element on the page, and forced `background: #fff` onto an
enumerated list of containers. Anything not on that list, `.so-block` on
the staff console, native ``s, `.hc-formatbar`, any class that
didn't happen to contain "card"/"panel"/"menu", kept its dark fill and got
ink painted on top. That was 305 runs of invisible text across 146 pages.
Paired, the worst case degrades to "this component still looks dark", which
is ugly but readable, and which the audit harness can see. Unpaired, the
worst case is text nobody can read and no tool can spot.
ORDER OF ATTACK
---------------
1. tokens , repoint every dark-canvas token the OS defines
2. canvas , kill the dark gradients, patterns and ambient glows
3. chrome , top bar, rails, consoles, footer
4. controls, buttons, inputs, native , chips
5. depth , shadows and elevation tuned for a light field
6. content , code, tables, scrollbars, selection
Per-component fixes for stylesheets that hard-code dark values live in
those stylesheets' own "Light mode" sections, not here.
========================================================================= */
/* =========================================================================
1. TOKENS
=========================================================================
public-surface.css already repoints the brand token layer for
html[data-color-mode="light"], and it loads before the page stylesheets.
A page stylesheet that redefines --bg-panel or --border-soft on its own
root therefore beat it. Restating the critical set here, after all of
them, closes that hole. Values are read from the brand layer so there is
still exactly one place where the light palette is decided.
========================================================================= */
html[data-color-mode="light"],
html[data-color-mode="light"] body {
color-scheme: light;
/* -- canvas / surfaces ------------------------------------------------ */
--ds-canvas: var(--brand-canvas, #f2f1ed);
--ds-canvas-raised: var(--brand-sunken, #e7e6e0);
--ds-surface: var(--brand-surface, #ffffff);
--ds-surface-hover: #f4f5f3;
--ds-surface-selected: var(--brand-teal-soft, #eef4f3);
--bg-primary: var(--brand-canvas, #f2f1ed);
--bg-surface: var(--brand-surface, #ffffff);
--bg-panel: var(--brand-surface, #ffffff);
--bg-glass: var(--brand-surface, #ffffff);
--bg-gradient: var(--brand-canvas, #f2f1ed);
--bg-pattern: none;
--hype-ambient: var(--brand-canvas, #f2f1ed);
/* -- lines ------------------------------------------------------------ */
--ds-border: #dedcd5;
--ds-border-strong: #bfbdb4;
--border-soft: rgba(24, 43, 48, 0.13);
--border-strong: rgba(24, 43, 48, 0.24);
--glass-border: rgba(24, 43, 48, 0.14);
--vd-hairline: rgba(24, 43, 48, 0.13);
/* -- text: four steps, not one ---------------------------------------
The enforcer collapsed every text colour on the page to #182b30. The
audit measured a median of TWO distinct text colours per page, so a
heading, its body copy, a timestamp and a disabled label were all the
same value. Losing hierarchy is not a cosmetic problem: it is why a
dense page reads as an undifferentiated wall and gets tiring to scan. */
--ds-text: var(--brand-ink, #182b30); /* headings, strong 12.6:1 */
--ds-text-body: #2e4247; /* paragraphs 9.3:1 */
--ds-text-muted: #4d6165; /* secondary, meta 5.8:1 */
--ds-text-subtle: #57696d; /* captions, timestamps 4.6:1 */
--text-strong: var(--brand-ink, #182b30);
--text-primary: #2e4247;
--text-muted: #4d6165;
--text-subtle: #57696d;
/* -- accent ------------------------------------------------------------ */
--ds-accent: var(--brand-teal, #164346);
--ds-accent-hover: var(--brand-teal-deep, #0f3134);
--ds-accent-ink: #ffffff;
--ds-link: #0f5f63;
--ds-link-hover: var(--brand-teal-deep, #0f3134);
--accent: var(--brand-teal, #164346);
--accent-primary: var(--brand-teal, #164346);
--accent-secondary: #4d6165;
--accent-warning: #8a5f10;
--accent-danger: #b03a2e;
/* -- semantic ---------------------------------------------------------- */
--ds-success: #1a6d46;
--ds-warning: #8a5f10;
--ds-danger: #b03a2e;
/* -- premium ------------------------------------------------------------
Gold (#e2b67a) is tuned for a near-black canvas; on a light field it
measures ~2.4:1 and stops reading as a colour at all. Light mode points
the premium signal at the brand's own energy accent instead. */
--premium-gold: var(--brand-red, #9e291e);
--premium-gold-rgb: 158, 41, 30;
--premium-accent: var(--brand-red, #9e291e);
/* -- buttons ------------------------------------------------------------ */
--button-primary-start: var(--brand-teal, #164346);
--button-primary-end: var(--brand-teal, #164346);
--button-primary-hover: var(--brand-teal-deep, #0f3134);
--button-primary-ink: #ffffff;
--button-primary-border: transparent;
--button-primary-shadow: none;
--button-primary-shadow-hover: none;
/* The OS ring is the accent lifted toward white, which disappears on a
light field. Light mode drives it the other way, the darkest brand
teal, fully opaque, so it reads on white cards and tinted canvas alike.
The old rgba(…,0.55) ring measured under 5:1 on white. */
--focus-ring: var(--brand-teal-deep, #0f3134);
--button-focus-ring: var(--focus-ring);
--button-secondary-bg-a: #ffffff;
--button-secondary-bg-b: #ffffff;
--button-secondary-border: rgba(24, 43, 48, 0.22);
--button-secondary-shadow: none;
/* -- depth: a light field carries shadow very differently ---------------
The OS ladder is oklch(8% …) at 30–42% alpha, which is correct on
near-black and reads as literal dirt on #f2f1ed. */
--shadow-soft: 0 1px 2px rgba(24, 43, 48, 0.06);
--shadow-strong: 0 8px 24px rgba(24, 43, 48, 0.1);
--elev-1: 0 1px 2px rgba(24, 43, 48, 0.06);
--elev-2: 0 4px 12px rgba(24, 43, 48, 0.08);
--elev-3: 0 16px 40px rgba(24, 43, 48, 0.12);
/* -- ambience: there is none on a light canvas -------------------------- */
--glow-a: transparent;
--glow-b: transparent;
--workspace-top-glow: transparent;
/* -- shared shell chrome (vd-console.css, the rails) --------------------
--vd-surface is authored as color-mix(… var(--bg-primary) 86%, #000),
which follows --bg-primary down to the light canvas and then mixes 14%
black into it, a muddy gray panel. Stated outright instead. */
--vd-surface: var(--brand-surface, #ffffff);
--vd-surface-soft: var(--brand-canvas, #f2f1ed);
--vd-shell-bg: var(--brand-canvas, #f2f1ed);
--vd-shell-bg-panel: var(--brand-surface, #ffffff);
--vd-shell-border: #dedcd5;
--vd-shell-accent: var(--brand-teal, #164346);
--vd-top-bg: rgba(255, 255, 255, 0.92);
--vd-top-panel: #ffffff;
--vd-top-panel-raised: var(--brand-canvas, #f2f1ed);
--vd-top-border: #dedcd5;
--vd-top-border-strong: #bfbdb4;
--vd-top-ink: #4d6165;
--vd-top-ink-muted: #5e6f72;
--vd-top-ink-strong: var(--brand-ink, #182b30);
--vd-top-hover: #f0f2f0;
--vd-top-selected: var(--brand-teal-soft, #eef4f3);
--vd-top-accent: var(--brand-teal, #164346);
/* -- immersive nav reads these as raw channels, not colours ------------- */
--immersive-nav-canvas-rgb: 242, 241, 237;
--immersive-nav-surface-rgb: 255, 255, 255;
--immersive-nav-ink-rgb: 24, 43, 48;
--immersive-nav-border-rgb: 222, 220, 213;
--immersive-nav-shadow-rgb: 24, 43, 48;
--immersive-nav-primary-rgb: 22, 67, 70;
--immersive-nav-secondary-rgb: 77, 97, 101;
--hype-primary-rgb: 22, 67, 70;
--hype-secondary-rgb: 158, 41, 30;
}
/* -------------------------------------------------------------------------
1b. THE HYPE-THEME SPECIFICITY HOLE
Everything above is declared at `html[data-color-mode="light"]`, (0,1,1),
or (0,1,2) at body level. dev-os.css and render.css each declare a subset of
the same tokens at `:is(body, :root)[data-hype-theme="simplistic"]`, and
because `:root` inside `:is()` contributes a pseudo-CLASS, that selector
scores (0,2,0), it outranks every block above no matter how late this file
loads. The runtime stamps data-hype-theme="simplistic" onto html AND body on
every page by default, so for this exact set of tokens the dark values won
unopposed in light mode. The visible casualty was the Premium badge, which
reads --accent-secondary and rendered at 1.72:1: pale slate on a cream wash.
Section 2 below already uses the winning selector shape for `background`.
This does the same for the tokens. The values are the light ones from the
block above; the only thing that changes is the specificity they are stated
at.
------------------------------------------------------------------------- */
html[data-color-mode="light"][data-hype-theme],
html[data-color-mode="light"] body[data-hype-theme] {
--bg-primary: var(--brand-canvas, #f2f1ed);
--bg-gradient: var(--brand-canvas, #f2f1ed);
--bg-pattern: none;
--hype-ambient: var(--brand-canvas, #f2f1ed);
--hype-primary-rgb: 22, 67, 70;
--hype-secondary-rgb: 158, 41, 30;
--accent-primary: var(--brand-teal, #164346);
--accent-secondary: #4d6165;
--nav-surface: rgba(255, 255, 255, 0.92);
--nav-blur: rgba(255, 255, 255, 0.86);
--nav-border: var(--brand-gray, #d8d7d2);
}
/* =========================================================================
2. CANVAS
=========================================================================
Every hype theme paints its own canvas at :is(body, :root)[data-hype-theme],
and render.css layers a dot/grid pattern plus two ambient radial glows over
it. All of that is drawn for a dark room. Light mode is one flat field.
========================================================================= */
html[data-color-mode="light"] body,
html[data-color-mode="light"] :is(body, :root)[data-hype-theme] {
background: var(--brand-canvas, #f2f1ed);
background-image: none;
color: var(--ds-text-body);
}
/* The ambient wash layers. Left painting, they put a dark vignette over the
top of every page. */
html[data-color-mode="light"] body::before,
html[data-color-mode="light"] body::after {
content: none;
}
html[data-color-mode="light"] :is(.category-glow, .global-overlay, .ui-spotlight, .growth-atmosphere, .nav-reveal) {
background: transparent;
background-image: none;
box-shadow: none;
}
/* Text shadow is a dark-canvas device: it exists to lift near-white type off a
near-black field. On light it prints a gray halo around every glyph, which
is the single cheapest way to make text look blurry. */
html[data-color-mode="light"] body,
html[data-color-mode="light"] body * {
text-shadow: none;
}
/* Element-level text defaults.
-----------------------------------------------------------------------
These are stated at normal specificity so they beat a component's own
hard-coded near-white text. That is a deliberate, measured decision and
it was made twice, in both directions:
Written at specificity zero (the first draft), a component that still
paints a dark panel kept its near-white ink and stayed readable, but
every component that had ALREADY been converted to a light surface also
kept its near-white ink, now on white. That measured 727 invisible runs,
208 of them a single literal, rgba(247,244,239,.66), inside the staff
setup console.
Written at normal specificity, the failure inverts: text is correct
everywhere the canvas is light, and wrong only where a container is
still dark. That set is finite, enumerable by the audit harness, and
currently being driven to zero, whereas "every hard-coded near-white in
34k lines of legacy CSS" is not.
So the safety contract for this file is: light mode may assume the
surface under text is light, because the audit proves there is no dark
surface left. If that ever stops being true, the harness reports it as
invisible text on the exact selector, which is how it was found here.
Anything that genuinely needs to stay dark (the tooltip pill, primary
buttons, modal scrims) states its own ink in the same rule, see §4. */
html[data-color-mode="light"] :is(p, li, dd, blockquote, figcaption) {
color: var(--ds-text-body);
}
html[data-color-mode="light"] :is(h1, h2, h3, h4, h5, h6, strong, b, dt, th) {
color: var(--ds-text);
}
html[data-color-mode="light"] :is(small, time, .caption, .subtle, .muted) {
color: var(--ds-text-subtle);
}
/* Links are a colour again. The enforcer flattened them into body ink,
which left underline-on-hover as the only affordance in the product. */
html[data-color-mode="light"] :is(main a:not([class]), .prose a, a.text-link) {
color: var(--ds-link);
}
html[data-color-mode="light"] :is(main a:not([class]), .prose a, a.text-link):hover {
color: var(--ds-link-hover);
}
/* =========================================================================
3. CHROME
========================================================================= */
html[data-color-mode="light"] .vd-top {
background: rgba(255, 255, 255, 0.92);
border-bottom: 1px solid var(--ds-border);
box-shadow: none;
}
html[data-color-mode="light"] .vd-top__link {
color: var(--vd-top-ink);
}
html[data-color-mode="light"] .vd-top__link:hover,
html[data-color-mode="light"] .vd-top__link:focus-visible {
background: var(--vd-top-hover);
color: var(--ds-text);
}
html[data-color-mode="light"] .vd-top__link.is-active,
html[data-color-mode="light"] .vd-top__link[aria-current="page"] {
background: var(--vd-top-selected);
color: var(--ds-text);
}
html[data-color-mode="light"] :is(.vd-top__mega, .vd-top__drawer, .vd-usermenu, .vd-top__panel) {
background: #ffffff;
border-color: var(--ds-border);
color: var(--ds-text-body);
box-shadow: var(--elev-3);
}
html[data-color-mode="light"] .vd-usermenu__item {
background: transparent;
color: var(--ds-text-body);
}
html[data-color-mode="light"] .vd-usermenu__item:hover {
background: var(--ds-surface-hover);
color: var(--ds-text);
}
html[data-color-mode="light"] .vd-top__scrim {
background: rgba(24, 43, 48, 0.28);
}
/* The wordmark asset is a fixed near-white SVG drawn for a dark header. */
html[data-color-mode="light"] .vd-top__brand img,
html[data-color-mode="light"] .global-login-brand__mark img {
filter: brightness(0.16);
}
/* Rails and side navigation sit ON the canvas, not on white: giving the rail
the field colour and the content white is what separates them. Painting both
#ffffff, which is what the enforcer did, is why the shell disappeared. */
html[data-color-mode="light"] :is(.hq-rail, .ws-rail, .vd-rail, .app-rail, .side-rail) {
background: var(--brand-canvas, #f2f1ed);
border-color: var(--ds-border);
color: var(--ds-text-body);
}
html[data-color-mode="light"] .vd-footer {
background: #ffffff;
border-top: 1px solid var(--ds-border);
color: var(--ds-text-body);
}
/* Skip link: the enforcer painted ink text onto its teal pill, so the first
thing a keyboard user ever focuses on was invisible. Paired here. */
html[data-color-mode="light"] .skip-link,
html[data-color-mode="light"] .skip-link:focus {
background: var(--brand-teal, #164346);
color: #ffffff;
}
/* =========================================================================
4. CONTROLS
========================================================================= */
html[data-color-mode="light"] :is(.button-primary, .apply-button, .wiz-nav-btn--primary),
html[data-color-mode="light"] button.button-primary {
background: var(--brand-teal, #164346);
background-image: none;
border-color: transparent;
color: #ffffff;
box-shadow: none;
}
html[data-color-mode="light"] :is(.button-primary, .apply-button, .wiz-nav-btn--primary):hover {
background: var(--brand-teal-deep, #0f3134);
background-image: none;
}
html[data-color-mode="light"] :is(.button-primary, .apply-button, .wiz-nav-btn--primary) * {
color: inherit;
}
html[data-color-mode="light"] :is(.button-secondary, .button-ghost, .ghost-button, .wiz-nav-btn--ghost) {
background: #ffffff;
background-image: none;
border: 1px solid var(--ds-border-strong);
color: var(--ds-text-body);
box-shadow: none;
}
html[data-color-mode="light"] :is(.button-secondary, .button-ghost, .ghost-button, .wiz-nav-btn--ghost):hover {
border-color: var(--brand-teal, #164346);
color: var(--ds-text);
}
/* Destructive actions have to survive the light pass as a distinct thing. The
enforcer painted every non-primary button the same white with the same ink,
so "Delete" and "Cancel" were the same control. */
html[data-color-mode="light"] :is(.button-danger, .danger-button, [data-variant="danger"]) {
background: #ffffff;
border: 1px solid rgba(176, 58, 46, 0.4);
color: var(--ds-danger);
}
html[data-color-mode="light"] :is(.button-danger, .danger-button, [data-variant="danger"]):hover {
background: #fdf3f2;
border-color: var(--ds-danger);
}
html[data-color-mode="light"]
:is(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
background: #ffffff;
background-image: none;
border-color: rgba(24, 43, 48, 0.28);
color: var(--ds-text);
caret-color: var(--brand-teal, #164346);
box-shadow: none;
}
html[data-color-mode="light"] :is(input, textarea)::placeholder {
color: #6b7c7f;
}
/* Native s are rendered by the platform from the element's OWN
computed colours, so they never inherited the whitewash: 12 dark dropdown
panels with ink text on them, one per select on the page. They also cannot
be styled through the parent, the rule has to name the option. */
html[data-color-mode="light"] select,
html[data-color-mode="light"] option,
html[data-color-mode="light"] optgroup {
background-color: #ffffff;
color: var(--ds-text);
}
html[data-color-mode="light"] option:checked,
html[data-color-mode="light"] option:hover {
background-color: var(--ds-surface-selected);
color: var(--ds-text);
}
html[data-color-mode="light"] :is(input[type="checkbox"], input[type="radio"]) {
accent-color: var(--brand-teal, #164346);
}
/* Segmented controls and icon buttons (the VinTip primitives). */
html[data-color-mode="light"] .vd-seg {
background: var(--brand-sunken, #e7e6e0);
border-color: var(--ds-border);
}
html[data-color-mode="light"] .vd-seg > :is(.is-active, [aria-pressed="true"], [aria-selected="true"]) {
background: #ffffff;
color: var(--ds-text);
box-shadow: var(--elev-1);
}
html[data-color-mode="light"] .vd-iconbtn {
background: transparent;
border-color: var(--ds-border);
color: var(--ds-text-muted);
}
html[data-color-mode="light"] .vd-iconbtn:hover {
background: var(--ds-surface-hover);
color: var(--ds-text);
}
html[data-color-mode="light"] .vd-iconbtn:is(.is-active, [aria-pressed="true"]) {
background: var(--ds-surface-selected);
color: var(--brand-teal, #164346);
}
/* VinTip itself is a dark pill by design; on a light canvas it stays dark,
a tooltip is supposed to read as an overlay, but its ink must come with it. */
html[data-color-mode="light"] .vd-tip {
background: var(--brand-ink, #182b30);
color: #ffffff;
}
html[data-color-mode="light"] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* =========================================================================
5. DEPTH
========================================================================= */
/* Modals and dialogs: white sheet, real scrim. The scrim has to stay dark,
it is the only thing separating an overlay from the page underneath, and on
a light canvas a light scrim separates nothing. */
html[data-color-mode="light"] :is(.modal-backdrop, .vd-dialog__backdrop, [class*="backdrop"]) {
background: rgba(24, 43, 48, 0.32);
background-image: none;
}
html[data-color-mode="light"] :is(.modal-content, .vd-dialog, .figma-modal-card, .vd-panel) {
background: #ffffff;
border-color: var(--ds-border);
color: var(--ds-text-body);
box-shadow: var(--elev-3);
}
/* =========================================================================
6. CONTENT
========================================================================= */
html[data-color-mode="light"] :is(pre, code, kbd, samp) {
background: var(--brand-sunken, #e7e6e0);
color: #1f3237;
border-color: var(--ds-border);
}
html[data-color-mode="light"] pre code {
background: transparent;
}
html[data-color-mode="light"] :is(th, td) {
border-color: var(--ds-border);
}
html[data-color-mode="light"] thead th {
background: var(--brand-canvas, #f2f1ed);
color: var(--ds-text);
}
html[data-color-mode="light"] tbody tr:hover {
background: var(--ds-surface-hover);
}
html[data-color-mode="light"] hr,
html[data-color-mode="light"] .divider {
border-color: var(--ds-border);
background: var(--ds-border);
}
html[data-color-mode="light"] ::selection {
background: var(--brand-teal-soft, #eef4f3);
color: var(--brand-ink, #182b30);
}
html[data-color-mode="light"] ::-webkit-scrollbar-track {
background: var(--brand-canvas, #f2f1ed);
}
html[data-color-mode="light"] ::-webkit-scrollbar-thumb {
background: #c9c7bf;
border-radius: 999px;
}
html[data-color-mode="light"] ::-webkit-scrollbar-thumb:hover {
background: #b0aea5;
}
/* Skeletons and shimmer placeholders are white-on-dark gradients; inverted
they become a bright strobe on an already bright page. */
html[data-color-mode="light"] :is(.skeleton, .shimmer, [class*="skeleton"]) {
background: var(--brand-sunken, #e7e6e0);
background-image: none;
}
/* Images and video keep their own colours. Anything blurred behind content as
a dark "spotlight" backdrop was drawn to be dimmed toward black; on light it
has to be dimmed toward the canvas instead, which each page owns. */
html[data-color-mode="light"] :is(img, video, canvas, picture) {
filter: none;
}
@media (prefers-reduced-motion: reduce) {
html[data-color-mode="light"] * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}