Skip to content

fix: Update Canvas Provider theming #4060

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alanbsmith merged 27 commits into from
Jul 31, 2026
Merged

fix: Update Canvas Provider theming #4060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
ebe8ee4
fix: Update Canvas Provider theming
Jul 14, 2026
c1ee910
fix: Ai did something
Jul 17, 2026
2c41d0d
Merge branch 'prerelease/major' of https://github.com/Workday/canvas-…
Jul 17, 2026
258ac75
fix: Update canvas provider theming to support branch
Jul 20, 2026
39cbf48
Merge branch 'prerelease/major' into mc-theming-sana-canvas
mannycarrera4 Jul 27, 2026
b2ca0a7
Merge branch 'prerelease/major' of https://github.com/Workday/canvas-…
Jul 28, 2026
9a8f7e5
fix: Update theming docs and upgrade guide
Jul 28, 2026
6307c50
Merge branch 'mc-theming-sana-canvas' of https://github.com/mannycarr…
Jul 28, 2026
6c562e5
Merge branch 'prerelease/major' into mc-theming-sana-canvas
mannycarrera4 Jul 28, 2026
a6873b0
Merge branch 'prerelease/major' into mc-theming-sana-canvas
mannycarrera4 Jul 30, 2026
592b2aa
fix: Fix type errors
Jul 31, 2026
05c92ec
docs: Add design spec for making sanaCanvasProviderTheme optional
Jul 31, 2026
a5a1cfb
docs: Clarify sanaCanvasProviderTheme is optional with global Sana CSS
Jul 31, 2026
288dcd3
feat: Add console warning for unnecessary sanaCanvasProviderTheme usage
Jul 31, 2026
14e08b8
fix: Suppress console output in CanvasProvider test spies
Jul 31, 2026
c3a8a1b
docs: Update JSDoc to clarify sanaCanvasProviderTheme is optional
Jul 31, 2026
ccfae0e
docs: Add migration guide for simplified Sana Canvas setup
Jul 31, 2026
ea0c1e1
docs: Sync LLM upgrade guide with MDX version
Jul 31, 2026
0f552b8
test: Add story demonstrating simplified Sana Canvas setup
Jul 31, 2026
797e690
fix: Update setup
Jul 31, 2026
61f29ba
fix: Resolve merge conflicts
Jul 31, 2026
c3952e0
fix: Update upgrade guide
Jul 31, 2026
f8734a6
fix: Address pr comments
Jul 31, 2026
649ff6d
fix: Update docs
Jul 31, 2026
96601df
fix: Remove file
Jul 31, 2026
3a4c17b
docs: Update docs
Jul 31, 2026
24dceba
Merge branch 'prerelease/major' into mc-theming-sana-canvas
Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,13 @@ import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/brand/_variables.css';
import '@workday/canvas-tokens-web/css/component/_variables.css';
import '@workday/canvas-tokens-web/css/system/_variables.css';
// Imported after system so its equal-specificity `[data-theme="sana-canvas"]` rules win
// the cascade tie over system's unscoped `:root` rules when set on <html>.
// Sana's `[data-theme="sana-canvas"]` selector and system/brand/base's `:root`
// selector have equal specificity (0,1,0). When both match the same element
// (i.e. `data-theme="sana-canvas"` is set on <html>), the cascade falls back
// to source order. Importing sana last is therefore required and sufficient —
// this is deterministic as long as each file is imported exactly once, in
// this order, by a single root entry point (true for both Storybook and any
// real consuming app). See the Theming docs for the guidance we give consumers.
import '@workday/canvas-tokens-web/css/sana/_variables.css';

import {CanvasProviderDecorator} from '../utils/storybook';
Expand Down
19 changes: 18 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,13 @@ const root = createRoot(container);
root.render(<App />);
```

The in your `App.js` you can set a global theme.
Set `data-theme="sana-canvas"` on `<html>` in your `index.html`:

```html
<html lang="en" data-theme="sana-canvas"></html>
```

Then in your `App.js` you can wrap your application with `CanvasProvider`.

```jsx
import {CanvasProvider} from '@workday/canvas-kit-react/common';
Expand All @@ -105,6 +111,17 @@ export const App = () => {
};
```

If you cannot control `<html>` (embedded apps, microfrontends), pass `sanaCanvasProviderTheme`
instead so menus, selects, and other popups still get Sana brand variables:

```jsx
import {CanvasProvider, sanaCanvasProviderTheme} from '@workday/canvas-kit-react/common';

<CanvasProvider theme={sanaCanvasProviderTheme}>
<App />
</CanvasProvider>
```

> **Note:** Don't use the `CanvasProvider` to theme, instead use our CSS tokens from
> `@workday/canvas-tokens-web`. For more information, view our
> [Token docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
Expand Down
Loading