// Generated by scripts/sync-tokens.ts from tokens.css. Do not edit. export const ROXY_UI_TOKENS_CSS = `/** * Roxy UI design tokens. 47 CSS custom properties that every component reads. Light + dark defaults. Host page overrides at :root or per element. No Tailwind, no class-name overrides, no JS theme switcher. * * Delivery model: this file ships as a global light-DOM stylesheet (linked, or auto-injected by the CDN bundle). Custom properties inherit through the shadow boundary, so tokens set on a light-DOM ancestor reach every component shadow. The explicit theme blocks therefore target light-DOM selectors (:root, .dark, [data-theme="dark"], a wrapper element), NOT :host (a :host rule in a global sheet matches nothing). The :host([data-theme]) selectors are kept only for the case where this CSS is ever adopted directly into a shadow root; they are inert in global delivery. * * Light is the default. Dark applies under any of: * - prefers-color-scheme: dark * - [data-theme="dark"] on the element itself or any ancestor (typically :root) * - .dark class on the element itself or any ancestor (typically :root) * * Explicit choice wins over the OS: the [data-theme] / .dark blocks come after the @media (prefers-color-scheme: dark) block in source order, and a closer ancestor overrides a farther one through normal custom-property inheritance. * * Motion gating: * - --roxy-motion-duration defaults to 200ms. Set to 0ms to disable. * - prefers-reduced-motion: reduce forces 0ms regardless of host overrides. */ /* * Every selector below is wrapped in :where(), which has ZERO specificity. * * Source order still decides among these rules, so the explicit dark block still beats the * light defaults when it matches. But ANY declaration you write outranks all of them, whatever * selector you use. That is what makes a plain \`:root { --roxy-accent: #8b5cf6 }\` actually * rebrand the library. * * Without it, \`:root.dark\` and \`[data-theme="dark"]\` carry class/attribute specificity (0,1,1) * and outrank a plain \`:root\` (0,1,0). A brand override would then hold under * prefers-color-scheme and be reverted under the other two dark signals: one override, three * different results. * * Do NOT reach for a cascade layer instead. Layers mean UNLAYERED rules win, so every theme * block becomes weaker than ANY unlayered rule on the page (a consumer's Tailwind reset, a demo * page's own CSS) and dark mode stops applying at all. :where() lowers only OUR specificity, * which is exactly the intent, and leaves the cascade otherwise untouched. */ :where(:root, :host) { /* Native controls follow the theme, and this is the ONLY thing that makes them. * * \`color-scheme\` is a real property, not the \`prefers-color-scheme\` query above it, and * without it the browser paints every native control in its LIGHT appearance whatever our * tokens say. A