aaf23fa33f
Re-scoped from @lilith/ui-theme to @cocotte/ui-theme. In-set cross-package deps re-pointed to @cocotte; out-of-set @lilith deps preserved (same Verdaccio). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
36 lines
No EOL
1,010 B
JavaScript
36 lines
No EOL
1,010 B
JavaScript
/** @jsxImportSource react */
|
|
import { createGlobalStyle } from '@lilith/ui-styled-components';
|
|
import { flattenThemeToCssVars } from '../utils/css-variables';
|
|
/**
|
|
* Global style component that injects theme values as CSS custom properties on :root.
|
|
*
|
|
* Opt-in via `<ThemeProvider cssVariables>` or standalone `<ThemeCssVariables />`.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* // Via ThemeProvider prop
|
|
* <ThemeProvider themeName="cyberpunk" cssVariables>
|
|
* <App />
|
|
* </ThemeProvider>
|
|
*
|
|
* // Or standalone (must be inside ThemeProvider)
|
|
* <ThemeCssVariables />
|
|
*
|
|
* // Then use in CSS:
|
|
* .card {
|
|
* background: var(--theme-color-background-primary);
|
|
* border-radius: var(--theme-radius-md);
|
|
* }
|
|
* ```
|
|
*/
|
|
export const ThemeCssVariables = createGlobalStyle `
|
|
:root {
|
|
${({ theme }) => {
|
|
const vars = flattenThemeToCssVars(theme);
|
|
return Object.entries(vars)
|
|
.map(([name, value]) => `${name}: ${value};`)
|
|
.join('\n ');
|
|
}}
|
|
}
|
|
`;
|
|
//# sourceMappingURL=ThemeCssVariables.js.map
|