@scalewing/react 1.39.0 → 1.41.0

package/dist/theme/ThemeProvider.d.ts

@@ -1,10 +1,20 @@
 import { type ReactNode } from 'react';
 import { type ColorScheme, type PaletteId, type Theme, type ThemeColors } from '@scalewing/tokens';
+import { type ThemeCanvas } from '../css/css-canvas-grouped.js';
 export type ThemeProviderProps = {
     colorScheme?: ColorScheme | 'system';
     palette?: PaletteId;
     colors?: ThemeColors;
+    /**
+     * The page's tone: `default` is the theme's background; `grouped` (opt-in)
+     * is a quiet grey in the light scheme (the background in the dark one,
+     * already darker than its surface), so white cards stand apart from the
+     * page. Put links and accent words in the cards: on the grouped grey the
+     * accent falls under 4.5:1 in some palettes, while the text and muted
+     * colours keep it. An unknown value throws a `RangeError`.
+     */
+    canvas?: ThemeCanvas;
     children: ReactNode;
 };
-export declare function ThemeProvider({ colorScheme, palette, colors, children, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ colorScheme, palette, colors, canvas, children, }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): Theme;

package/dist/theme/ThemeProvider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
 import { createTheme, secondaryActionBorder, semanticColorKeys, } from '@scalewing/tokens';
+import { assertThemeCanvas, } from '../css/css-canvas-grouped.js';
 const ThemeContext = createContext(null);
 function schemeFromMedia() {
     if (typeof window === 'undefined' ||
@@ -24,7 +25,8 @@ function themeCssVars(theme) {
     vars['--sw-glass-specular'] = theme.glass.specular;
     return vars;
 }
-export function ThemeProvider({ colorScheme = 'system', palette, colors, children, }) {
+export function ThemeProvider({ colorScheme = 'system', palette, colors, canvas = 'default', children, }) {
+    assertThemeCanvas(canvas);
     const [systemScheme, setSystemScheme] = useState(schemeFromMedia);
     useEffect(() => {
         if (colorScheme !== 'system' || typeof window.matchMedia !== 'function') {
@@ -40,7 +42,7 @@ export function ThemeProvider({ colorScheme = 'system', palette, colors, childre
     }, [colorScheme]);
     const resolvedScheme = colorScheme === 'system' ? systemScheme : colorScheme;
     const theme = useMemo(() => createTheme({ colorScheme: resolvedScheme, palette, colors }), [colors, palette, resolvedScheme]);
-    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-palette": palette, "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }));
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-canvas": canvas === 'default' ? undefined : canvas, "data-palette": palette, "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }));
 }
 export function useTheme() {
     const theme = useContext(ThemeContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.39.0",
+  "version": "1.41.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",