/* ============================================================================ dsh-ddb - the HOST layer. ---------------------------------------------------------------------------- The design system lives in x2203 and is reached by a symlink, not a copy: design-specs/tokens.css every colour, size and face zplex-preset.css the generic component rules The preset deliberately does NOT own the surfaces - the greys, the backgrounds, the hairlines. Those belong to the host, and this file is the ddb's half of that bargain. Everything below is a surface or a mapping; not one of them is a colour that should have been a token. The three colour modes are here too, because the gear in the top bar offers them: light, dark, and system. "System" is the absence of a choice, and the media query is what does the work. ========================================================================== */ @import url("zplex-preset.css"); /* the forced light and dark modes, generated from the tokens — it comes after the preset so the tokens' own values are the ones it overrides */ @import url("ddb-modes.css"); /* --- the surfaces, one value each --------------------------------------- */ :root { --ddb-light-bg: #FCFCFB; --ddb-light-panel: #FAF9F9; --ddb-light-line: rgba(11, 11, 11, .10); --ddb-light-fg: #0F1115; --ddb-light-dim: #61666B; --ddb-light-hover: #F0EFEC; --ddb-light-code: #F6F5F2; --ddb-light-raised: #FFFFFF; /* the gate's DEPTH. x2203's login card was hand-written with gradients and a glow; the tokens described a flat system, so the portal came out flat - which is the "bland" the operator saw. These are the same effects, named, so the contract test can still forbid a raw hex in the chrome. */ --ddb-light-canvas-top: #12323A; --ddb-light-card-top: #191D22; --ddb-light-card-bottom: #121519; --ddb-light-card-line: #262B31; --ddb-light-input-bg: #0E1114; --ddb-light-input-line: #15181C; --ddb-light-accent-top: #3CE3F7; --ddb-light-accent-mid: #22D3EE; --ddb-light-accent-bottom: #08B6CF; --ddb-light-accent-line: #67E8F9; --ddb-light-accent-ink: #04252B; /* the gate card is DARK in both modes - it is a key-access card, not a document - so its own text colours are fixed, and never follow the mode. Black text on a dark card is how "pk" went missing. */ --ddb-canvas-bottom: #0B0D0F; --ddb-card-fg: #E8EDF2; --ddb-card-dim: #8A94A0; --ddb-card-ok: #34D399; --ddb-card-err: #F87171; --ddb-dark-bg: #0B0D0F; --ddb-dark-panel: #121519; --ddb-dark-line: rgba(230, 232, 235, .12); --ddb-dark-fg: #E6E8EB; --ddb-dark-dim: #9AA1A9; --ddb-dark-hover: #1B2026; --ddb-dark-code: #14181C; --ddb-dark-raised: #161A1F; --ddb-dark-canvas-top: #12323A; --ddb-dark-card-top: #191D22; --ddb-dark-card-bottom: #121519; --ddb-dark-card-line: #262B31; --ddb-dark-input-bg: #0E1114; --ddb-dark-input-line: #15181C; --ddb-dark-accent-top: #3CE3F7; --ddb-dark-accent-mid: #22D3EE; --ddb-dark-accent-bottom: #08B6CF; --ddb-dark-accent-line: #67E8F9; --ddb-dark-accent-ink: #04252B; } /* the depth, as tokens the chrome may use */ :root { --zx-canvas-top: var(--ddb-light-canvas-top); --zx-canvas-bottom: var(--ddb-canvas-bottom); --zx-card-fg: var(--ddb-card-fg); --zx-card-dim: var(--ddb-card-dim); --zx-card-ok: var(--ddb-card-ok); --zx-card-err: var(--ddb-card-err); --zx-card-top: var(--ddb-light-card-top); --zx-card-bottom: var(--ddb-light-card-bottom); --zx-card-line: var(--ddb-light-card-line); --zx-input-bg: var(--ddb-light-input-bg); --zx-input-line: var(--ddb-light-input-line); --zx-accent-top: var(--ddb-light-accent-top); --zx-accent-mid: var(--ddb-light-accent-mid); --zx-accent-bottom: var(--ddb-light-accent-bottom); --zx-accent-line: var(--ddb-light-accent-line); --zx-accent-ink: var(--ddb-light-accent-ink); --zx-glow-accent: 0 4px 14px rgba(34, 211, 238, .20); --zx-glow-focus: 0 0 0 3px rgba(34, 211, 238, .13); --zx-inset-top: inset 0 2px 0 rgba(255, 255, 255, .03); --zx-shadow-portal: 0 24px 60px rgba(0, 0, 0, .55); } /* --- light, and the fallback --------------------------------------------- */ :root { color-scheme: light; --zx-bg: var(--ddb-light-bg); --zx-panel: var(--ddb-light-panel); --zx-line: var(--ddb-light-line); --zx-fg: var(--ddb-light-fg); --zx-fg-dim: var(--ddb-light-dim); --zx-bg-hover: var(--ddb-light-hover); --zx-code-bg: var(--ddb-light-code); --zx-raised: var(--ddb-light-raised); --zx-ink: var(--ddb-light-fg); --zx-ink-dim: var(--ddb-light-dim); --zx-ink-soft: #81858C; /* the state colours, themed. The design system's --zx-ok/--zx-warn/ --zx-bad are fixed values chosen for a light ground, and the board sits in the CONTENT area, which follows the theme - so on a dark ground they would be unreadable. The host owns the surfaces, so the themed state palette is declared here, once, beside the surfaces it has to work against. */ --zx-state-ok: #1F7A4D; --zx-state-warn: #9A5B00; --zx-state-bad: #B3261E; } /* --- dark, when the system asks for it ---------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --zx-bg: var(--ddb-dark-bg); --zx-panel: var(--ddb-dark-panel); --zx-line: var(--ddb-dark-line); --zx-fg: var(--ddb-dark-fg); --zx-fg-dim: var(--ddb-dark-dim); --zx-bg-hover: var(--ddb-dark-hover); --zx-code-bg: var(--ddb-dark-code); --zx-raised: var(--ddb-dark-raised); --zx-ink: var(--ddb-dark-fg); --zx-ink-dim: var(--ddb-dark-dim); --zx-ink-soft: #81858C; --zx-state-ok: #34D399; --zx-state-warn: #FBBF24; --zx-state-bad: #F87171; } } /* --- dark, when pk says so ---------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --zx-bg: var(--ddb-dark-bg); --zx-panel: var(--ddb-dark-panel); --zx-line: var(--ddb-dark-line); --zx-fg: var(--ddb-dark-fg); --zx-fg-dim: var(--ddb-dark-dim); --zx-bg-hover: var(--ddb-dark-hover); --zx-code-bg: var(--ddb-dark-code); --zx-raised: var(--ddb-dark-raised); --zx-ink: var(--ddb-dark-fg); --zx-ink-dim: var(--ddb-dark-dim); --zx-ink-soft: #81858C; --zx-state-ok: #34D399; --zx-state-warn: #FBBF24; --zx-state-bad: #F87171; }