/** * Semantic tokens * ------------------------------------------------------------------------ * Purpose-named tokens exported from Figma ("Semantic" variable * collection, Light/Dark modes — see `Light.tokens.json` / `Dark.tokens.json`). * Every value here aliases a primitive from `primitives.css` (loaded * first) — components should only ever consume tokens from THIS file, * never reach into `--blue-6` etc. directly. * * Theme switching: defaults to Light. Dark activates either by setting * `data-theme="dark"` on (explicit toggle) or by the OS preference * when no explicit `data-theme` has been set. Force light regardless of * OS with `data-theme="light"`. * * document.documentElement.dataset.theme = 'dark' | 'light' */ :root { /* ---- neutral (mode-independent) --------------------------------- */ --neutral-white: var(--color-white); --neutral-black: var(--color-black); /* ================================================================== Light (default) ================================================================== */ /* foreground */ --fg-logo: var(--blue-9); --fg-title: var(--color-black); --fg-default: var(--color-black); --fg-dimmed: var(--gray-6); --fg-link: var(--blue-6); --fg-placeholder: var(--gray-5); --fg-primary: var(--blue-6); --fg-disabled: var(--gray-5); --fg-error: var(--red-6); --fg-error-disabled: var(--red-4); --fg-warning: var(--yellow-6); --fg-success: var(--teal-6); --fg-gray: var(--gray-6); /* background */ --bg-body: var(--color-white); --bg-transparent: var(--color-transparent); --bg-default: var(--color-white); --bg-dimmed: var(--gray-0); --bg-default-hover: var(--gray-0); --bg-disabled: var(--gray-2); --bg-primary-filled: var(--blue-6); --bg-primary-filled-hover: var(--blue-7); --bg-primary-light: var(--primary-opacity-10); --bg-primary-light-hover: var(--primary-opacity-12); --bg-warning-filled: var(--yellow-6); --bg-warning-filled-hover: var(--yellow-7); --bg-warning-light: var(--yellow-opacity-10); --bg-warning-light-hover: var(--yellow-opacity-12); --bg-success-filled: var(--teal-6); --bg-success-filled-hover: var(--teal-7); --bg-success-light: var(--teal-opacity-10); --bg-success-light-hover: var(--teal-opacity-12); --bg-error-filled: var(--red-6); --bg-error-filled-hover: var(--red-7); --bg-error-light: var(--red-opacity-10); --bg-error-light-hover: var(--red-opacity-12); --bg-gray-filled: var(--gray-6); --bg-gray-filled-hover: var(--gray-7); --bg-gray-light: var(--gray-opacity-10); --bg-gray-light-hover: var(--gray-opacity-12); /* border */ --border-default: var(--gray-3); --border-primary: var(--blue-6); --border-success: var(--teal-6); --border-error: var(--red-6); --border-gray: var(--gray-6); --border-warning: var(--yellow-6); /* gray elevation scale (10 = lightest surface … 100 = darkest) */ --gray-10: var(--gray-0); --gray-20: var(--gray-1); --gray-30: var(--gray-2); --gray-40: var(--gray-3); --gray-50: var(--gray-4); --gray-60: var(--gray-5); --gray-70: var(--gray-6); --gray-80: var(--gray-7); --gray-90: var(--gray-8); --gray-100: var(--gray-9); } /* ================================================================== Dark ================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --fg-logo: var(--blue-2); --fg-title: var(--color-white); --fg-default: var(--color-white); --fg-dimmed: var(--gray-5); --fg-link: var(--blue-4); --fg-placeholder: var(--gray-4); --fg-primary: var(--blue-2); --fg-disabled: var(--gray-6); --fg-error: var(--red-3); --fg-error-disabled: var(--red-1); --fg-warning: var(--yellow-3); --fg-success: var(--teal-3); --fg-gray: var(--gray-3); --bg-body: var(--color-black); --bg-default: var(--color-black); --bg-dimmed: var(--gray-9); --bg-default-hover: var(--gray-9); --bg-disabled: var(--gray-8); --bg-primary-filled: var(--blue-8); --bg-primary-filled-hover: var(--blue-9); --bg-primary-light: var(--primary-opacity-15); --bg-primary-light-hover: var(--primary-opacity-20); --bg-warning-filled: var(--yellow-8); --bg-warning-filled-hover: var(--yellow-9); --bg-warning-light: var(--yellow-opacity-15); --bg-warning-light-hover: var(--yellow-opacity-20); --bg-success-filled: var(--teal-8); --bg-success-filled-hover: var(--teal-9); --bg-success-light: var(--teal-opacity-15); --bg-success-light-hover: var(--teal-opacity-20); --bg-error-filled: var(--red-8); --bg-error-filled-hover: var(--red-9); --bg-error-light: var(--red-opacity-15); --bg-error-light-hover: var(--red-opacity-20); --bg-gray-filled: var(--gray-8); --bg-gray-filled-hover: var(--gray-9); --bg-gray-light: var(--gray-opacity-15); --bg-gray-light-hover: var(--gray-opacity-20); --border-default: var(--gray-6); --border-primary: var(--blue-3); --border-success: var(--teal-3); --border-error: var(--red-3); --border-gray: var(--gray-3); --border-warning: var(--yellow-3); --gray-10: var(--gray-9); --gray-20: var(--gray-8); --gray-30: var(--gray-7); --gray-40: var(--gray-6); --gray-50: var(--gray-5); --gray-60: var(--gray-4); --gray-70: var(--gray-3); --gray-80: var(--gray-2); --gray-90: var(--gray-1); --gray-100: var(--gray-0); } } :root[data-theme='dark'] { --fg-logo: var(--blue-2); --fg-title: var(--color-white); --fg-default: var(--color-white); --fg-dimmed: var(--gray-5); --fg-link: var(--blue-4); --fg-placeholder: var(--gray-4); --fg-primary: var(--blue-2); --fg-disabled: var(--gray-6); --fg-error: var(--red-3); --fg-error-disabled: var(--red-1); --fg-warning: var(--yellow-3); --fg-success: var(--teal-3); --fg-gray: var(--gray-3); --bg-body: var(--color-black); --bg-default: var(--color-black); --bg-dimmed: var(--gray-9); --bg-default-hover: var(--gray-9); --bg-disabled: var(--gray-8); --bg-primary-filled: var(--blue-8); --bg-primary-filled-hover: var(--blue-9); --bg-primary-light: var(--primary-opacity-15); --bg-primary-light-hover: var(--primary-opacity-20); --bg-warning-filled: var(--yellow-8); --bg-warning-filled-hover: var(--yellow-9); --bg-warning-light: var(--yellow-opacity-15); --bg-warning-light-hover: var(--yellow-opacity-20); --bg-success-filled: var(--teal-8); --bg-success-filled-hover: var(--teal-9); --bg-success-light: var(--teal-opacity-15); --bg-success-light-hover: var(--teal-opacity-20); --bg-error-filled: var(--red-8); --bg-error-filled-hover: var(--red-9); --bg-error-light: var(--red-opacity-15); --bg-error-light-hover: var(--red-opacity-20); --bg-gray-filled: var(--gray-8); --bg-gray-filled-hover: var(--gray-9); --bg-gray-light: var(--gray-opacity-15); --bg-gray-light-hover: var(--gray-opacity-20); --border-default: var(--gray-6); --border-primary: var(--blue-3); --border-success: var(--teal-3); --border-error: var(--red-3); --border-gray: var(--gray-3); --border-warning: var(--yellow-3); --gray-10: var(--gray-9); --gray-20: var(--gray-8); --gray-30: var(--gray-7); --gray-40: var(--gray-6); --gray-50: var(--gray-5); --gray-60: var(--gray-4); --gray-70: var(--gray-3); --gray-80: var(--gray-2); --gray-90: var(--gray-1); --gray-100: var(--gray-0); }