/** * Theme Provider Component * * Applies theme tokens and sets color-scheme for light-dark() to work. * Themes are created with `defineTheme()` and applied via CSS: * - Token overrides set as CSS custom properties on [data-astryx-theme] * - Component overrides scoped via @scope'd CSS selectors on the stable Astryx * selector surface (`.xds-*` classes today; components also emit `data-*` * prop reflections for the data-attribute selector migration) * * Root detection: The first Theme in the tree (no parent Theme) * automatically syncs attributes to `document.documentElement`: * - `data-theme` — drives `color-scheme` via reset.css rules, ensuring browser * chrome (scrollbars, native form controls, date pickers) reflects the mode. * - `data-astryx-theme` — enables @scope'd theme CSS to reach elements rendered * outside the Theme wrapper (portals, toast fallback viewports). * * For RSC / SSR, set `data-theme` on `` in your root server layout * to avoid a flash of wrong theme before hydration: * * * * @example * ``` * const ocean = defineTheme({ * name: 'ocean', * tokens: { '--color-accent': ['#0077B6', '#48CAE4'] }, * components: { card: { base: { borderWidth: '2px' } } }, * icons: oceanIcons, * }); * * ``` */ import React from 'react'; import type { ThemeMode } from './types'; import { type DefinedTheme } from './defineTheme'; /** * Theme provider props */ interface ThemeProps { /** Theme from defineTheme() */ theme: DefinedTheme; /** Color mode - 'system' follows OS preference */ mode?: ThemeMode; /** Children to render */ children: React.ReactNode; } /** * Theme provider component * * Sets data-astryx-theme attribute so @scope'd CSS takes effect. * Component overrides are pure CSS scoped under the theme attribute — * components render with stable `.xds-*` classes plus `data-*` prop * reflections and don't need context. * * When this is the root Theme (no parent Theme in the tree), * it syncs `data-theme` and `data-astryx-theme` to `` so browser * chrome reflects the active mode and @scope'd CSS reaches portals. * Nested Theme instances skip the sync. */ export declare function Theme({ theme, mode, children, }: ThemeProps): React.ReactElement; export declare namespace Theme { var displayName: string; } export {}; //# sourceMappingURL=Theme.d.ts.map