@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
33 lines • 1.53 kB
TypeScript
import type { CanvasNumericalBrandTheme } from './types';
/**
* Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
* Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
*/
export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
/**
* Pass to root `CanvasProvider` to forward Sana brand CSS variables onto popup containers
* (menus, selects, modals, tooltips).
*
* **When to use it**
* - **Required** when you cannot set `data-theme="sana-canvas"` on `<html>` (embedded apps,
* microfrontends, third-party shells). Popups portal to `document.body` and will not inherit
* a nested `data-theme` — this preset copies Sana brand vars onto the popup stack container.
* - Also useful in tests without global Sana CSS, or custom popup hosts outside normal cascade.
*
* **When you can skip it**
* - Prefer setting `data-theme="sana-canvas"` on `<html>` with Sana CSS imported. Popups then
* inherit brand variables from the document and no `theme` prop is needed.
*
* @example
* ```tsx
* // Preferred — control <html>
* import '@workday/canvas-tokens-web/css/sana/_variables.css';
* // <html data-theme="sana-canvas">
* <CanvasProvider><App /></CanvasProvider>
*
* // No access to <html> — required for popup parity
* <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
* ```
*/
export declare const sanaCanvasProviderTheme: CanvasNumericalBrandTheme;
//# sourceMappingURL=sanaTheme.d.ts.map