/* ========================================================= COLOR REFERENCE — Design Token System Mirrors the structure of the source design library: PRIMITIVES -> SEMANTIC TOKENS -> THEMES --------------------------------------------------------- Primitives = raw color scales (grey_neutral, grey_warm, vivid_blue). Never reference these directly in components; reference the SEMANTIC tokens (--fg-primary, --elevation-*, --state-*) so themes can be swapped with one class. ========================================================= */ /* ---------- 1. PRIMITIVES --------------------------------- Scales run 10 (darkest) -> 160 (lightest), step of 10. These values are fixed regardless of theme. -------------------------------------------------------- */ :root { /* grey / neutral (cool) */ --color-grey_neutral-10: #0a0a0b; --color-grey_neutral-20: #121316; --color-grey_neutral-30: #191b1f; --color-grey_neutral-40: #212429; --color-grey_neutral-50: #2b2f36; --color-grey_neutral-60: #363b44; --color-grey_neutral-70: #454b56; --color-grey_neutral-80: #565d6a; --color-grey_neutral-90: #6b7280; --color-grey_neutral-100: #838b98; --color-grey_neutral-110: #9aa1ad; --color-grey_neutral-120: #b3b9c3; --color-grey_neutral-130: #ccd0d7; --color-grey_neutral-140: #e0e3e8; --color-grey_neutral-150: #f0f2f5; --color-grey_neutral-160: #ffffff; /* grey / warm */ --color-grey_warm-10: #0c0a08; --color-grey_warm-20: #15120f; --color-grey_warm-30: #1d1915; --color-grey_warm-40: #26211c; --color-grey_warm-50: #322b24; --color-grey_warm-60: #3f372f; --color-grey_warm-70: #4f463c; --color-grey_warm-80: #61574b; --color-grey_warm-90: #776b5d; --color-grey_warm-100: #8f8375; --color-grey_warm-110: #a69c8f; --color-grey_warm-120: #beb5aa; --color-grey_warm-130: #d4cdc4; --color-grey_warm-140: #e6e1da; --color-grey_warm-150: #f4f1ec; --color-grey_warm-160: #ffffff; /* vivid / blue (accent) */ --color-vivid_blue-10: #071033; --color-vivid_blue-20: #0a1a55; --color-vivid_blue-30: #0f2a8c; --color-vivid_blue-40: #1a45e0; /* light-theme accent */ --color-vivid_blue-50: #2f5cff; --color-vivid_blue-60: #4f7cff; --color-vivid_blue-70: #6d8bff; /* dark-theme accent */ --color-vivid_blue-80: #93aaff; --color-vivid_blue-90: #b9c8ff; } /* ---------- 2. SEMANTIC TOKENS + THEMES ------------------ Apply a theme by setting one of these classes/attributes on or any container: Default (:root) = Light Neutral. Semantic tokens ALIAS the primitives above. -------------------------------------------------------- */ /* ===== 2.0.0 Light Neutral (default) ===== */ :root, [data-theme="light-neutral"] { /* foreground */ --fg-primary: var(--color-grey_neutral-10); --fg-tertiary: var(--color-grey_neutral-90); --fg-always_white: var(--color-grey_neutral-160); --fg-inverted: var(--color-grey_neutral-160); /* elevation */ --elevation-raise: var(--color-grey_neutral-150); --elevation-overlay: var(--color-grey_neutral-140); /* elevation / highlight */ --elevation-highlight-gray: var(--color-grey_neutral-130); --elevation-highlight-neutral: var(--color-grey_neutral-10); --elevation-highlight-accent_blue: var(--color-vivid_blue-40); /* state / primary (base color + opacity token) */ --state-primary-strong: rgba(0, 0, 0, 0.20); --state-primary-medium: rgba(0, 0, 0, 0.12); --state-primary-subtle: rgba(0, 0, 0, 0.04); } /* ===== 2.0.0 Dark Neutral ===== */ [data-theme="dark-neutral"] { --fg-primary: var(--color-grey_neutral-160); --fg-tertiary: var(--color-grey_neutral-90); --fg-always_white: var(--color-grey_neutral-160); --fg-inverted: var(--color-grey_neutral-10); --elevation-raise: var(--color-grey_neutral-20); --elevation-overlay: var(--color-grey_neutral-30); --elevation-highlight-gray: var(--color-grey_neutral-40); --elevation-highlight-neutral: var(--color-grey_neutral-160); --elevation-highlight-accent_blue: var(--color-vivid_blue-70); --state-primary-strong: rgba(255, 255, 255, 0.24); --state-primary-medium: rgba(255, 255, 255, 0.16); --state-primary-subtle: rgba(255, 255, 255, 0.08); } /* ===== 2.0.0 Light Warm ===== */ [data-theme="light-warm"] { --fg-primary: var(--color-grey_warm-10); --fg-tertiary: var(--color-grey_warm-90); --fg-always_white: var(--color-grey_warm-160); --fg-inverted: var(--color-grey_warm-160); --elevation-raise: var(--color-grey_warm-150); --elevation-overlay: var(--color-grey_warm-140); --elevation-highlight-gray: var(--color-grey_warm-130); --elevation-highlight-neutral: var(--color-grey_warm-10); --elevation-highlight-accent_blue: var(--color-vivid_blue-40); --state-primary-strong: rgba(0, 0, 0, 0.20); --state-primary-medium: rgba(0, 0, 0, 0.12); --state-primary-subtle: rgba(0, 0, 0, 0.04); } /* ===== 2.0.0 Dark Warm ===== */ [data-theme="dark-warm"] { --fg-primary: var(--color-grey_warm-160); --fg-tertiary: var(--color-grey_warm-90); --fg-always_white: var(--color-grey_warm-160); --fg-inverted: var(--color-grey_warm-10); --elevation-raise: var(--color-grey_warm-20); --elevation-overlay: var(--color-grey_warm-30); --elevation-highlight-gray: var(--color-grey_warm-40); --elevation-highlight-neutral: var(--color-grey_warm-160); --elevation-highlight-accent_blue: var(--color-vivid_blue-70); --state-primary-strong: rgba(255, 255, 255, 0.24); --state-primary-medium: rgba(255, 255, 255, 0.16); --state-primary-subtle: rgba(255, 255, 255, 0.08); }