/* ============================================================ Wanted Design System — Semantic Color Tokens ────────────────────────────────────────────────────────────── Roles, not ramps. Always prefer these over the atomic --c-* values. Light theme is default; switch to dark by adding [data-theme="dark"] to or any container. Sourced from /Color---Semantic/section/Light/Theme. ============================================================ */ :root, [data-theme="light"] { /* ── Static — never inverts ─────────────────────────────────── */ --color-static-white: #FFFFFF; --color-static-black: #000000; /* ── Primary — brand actions, focus rings, links ────────────── */ --color-primary-normal: var(--c-blue-45); /* #0066FF, default CTA */ --color-primary-strong: var(--c-blue-40); /* hovered CTA */ --color-primary-heavy: var(--c-blue-35); /* pressed CTA */ --color-primary-light: var(--c-blue-95); /* tinted container */ --color-primary-on: #FFFFFF; /* text on primary */ /* ── Label — body & UI text ─────────────────────────────────── */ --color-label-strong: var(--c-coolNeutral-10); /* #171719 */ --color-label-normal: rgb(46 47 51 / 0.88); /* coolNeutral-20 @88% */ --color-label-neutral: rgb(46 47 51 / 0.61); /* coolNeutral-20 @61% */ --color-label-alternative: rgb(55 56 60 / 0.61); /* coolNeutral-25 @61% */ --color-label-assistive: rgb(55 56 60 / 0.28); /* coolNeutral-25 @28% */ --color-label-disable: rgb(55 56 60 / 0.16); /* coolNeutral-25 @16% */ /* ── Background — page & section surfaces ───────────────────── */ --color-background-normal: #FFFFFF; --color-background-alternative: var(--c-coolNeutral-99); /* subtle off-white */ --color-background-elevated: #FFFFFF; --color-background-elevated-alt: var(--c-coolNeutral-99); --color-background-inverse: var(--c-coolNeutral-15); /* ── Line — borders & dividers ──────────────────────────────── */ --color-line-normal: rgb(112 115 124 / 0.22); /* coolNeutral-50 @22% */ --color-line-neutral: rgb(112 115 124 / 0.16); --color-line-strong: rgb(112 115 124 / 0.61); --color-line-solid: var(--c-coolNeutral-95); /* ── Interaction — disabled, inactive, hover ────────────────── */ --color-interaction-inactive: var(--c-coolNeutral-50); --color-interaction-disable: var(--c-coolNeutral-95); /* ── Status — feedback colors ───────────────────────────────── */ --color-status-positive: var(--c-green-50); --color-status-cautionary: var(--c-orange-50); --color-status-negative: var(--c-red-50); /* ── Component fills — subtle hover/pressed surfaces ────────── */ --color-fill-normal: rgb(112 115 124 / 0.08); --color-fill-strong: rgb(112 115 124 / 0.16); --color-fill-heavy: rgb(112 115 124 / 0.22); /* ── Inverse — content on dark surfaces ─────────────────────── */ --color-inverse-primary: var(--c-blue-58); --color-inverse-label: var(--c-coolNeutral-99); --color-inverse-background: var(--c-coolNeutral-15); /* ── Accent backgrounds — for badges, illustrations, charts ─── */ --color-accent-redOrange: var(--c-redOrange-50); --color-accent-orange: var(--c-orange-45); --color-accent-lime: var(--c-lime-37); --color-accent-green: var(--c-green-40); --color-accent-cyan: var(--c-cyan-40); --color-accent-lightBlue: var(--c-lightBlue-40); --color-accent-blue: var(--c-blue-45); --color-accent-violet: var(--c-violet-45); --color-accent-purple: var(--c-purple-40); --color-accent-pink: var(--c-pink-46); --color-accent-red: var(--c-red-40); /* ── Material — modals, sheets, dimmers ─────────────────────── */ --color-material-dimmer: rgb(23 23 25 / 0.52); /* coolNeutral-8 @52% */ --color-material-base: rgb(255 255 255 / 0.80); } /* ============================================================ Dark theme — flip background, label, line. Primary holds. ============================================================ */ [data-theme="dark"] { --color-static-white: #FFFFFF; --color-static-black: #000000; --color-primary-normal: var(--c-blue-50); --color-primary-strong: var(--c-blue-58); --color-primary-heavy: var(--c-blue-65); --color-primary-light: rgb(0 102 255 / 0.16); --color-primary-on: #FFFFFF; --color-label-strong: #FFFFFF; --color-label-normal: rgb(247 247 248 / 0.92); --color-label-neutral: rgb(247 247 248 / 0.70); --color-label-alternative: rgb(247 247 248 / 0.52); --color-label-assistive: rgb(247 247 248 / 0.28); --color-label-disable: rgb(247 247 248 / 0.16); --color-background-normal: var(--c-coolNeutral-10); /* #171719 */ --color-background-alternative: var(--c-coolNeutral-12); --color-background-elevated: var(--c-coolNeutral-15); --color-background-elevated-alt: var(--c-coolNeutral-17); --color-background-inverse: var(--c-coolNeutral-99); --color-line-normal: rgb(247 247 248 / 0.16); --color-line-neutral: rgb(247 247 248 / 0.08); --color-line-strong: rgb(247 247 248 / 0.52); --color-line-solid: var(--c-coolNeutral-22); --color-interaction-inactive: var(--c-coolNeutral-50); --color-interaction-disable: var(--c-coolNeutral-22); --color-status-positive: var(--c-green-60); --color-status-cautionary: var(--c-orange-60); --color-status-negative: var(--c-red-60); --color-fill-normal: rgb(247 247 248 / 0.06); --color-fill-strong: rgb(247 247 248 / 0.12); --color-fill-heavy: rgb(247 247 248 / 0.18); --color-inverse-primary: var(--c-blue-45); --color-inverse-label: var(--c-coolNeutral-10); --color-inverse-background: var(--c-coolNeutral-99); --color-material-dimmer: rgb(0 0 0 / 0.64); --color-material-base: rgb(23 23 25 / 0.80); }