@workday/canvas-kit-docs 15.0.0-alpha.0028-next.0 → 15.0.0-alpha.0032-next.0

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.23",
-    "@workday/canvas-kit-preview-react": "14.1.23",
-    "@workday/canvas-kit-react": "14.1.23",
-    "@workday/canvas-kit-react-fonts": "^14.1.23",
-    "@workday/canvas-kit-styling": "14.1.23",
+    "@workday/canvas-kit-labs-react": "14.1.24",
+    "@workday/canvas-kit-preview-react": "14.1.24",
+    "@workday/canvas-kit-react": "14.1.24",
+    "@workday/canvas-kit-react-fonts": "^14.1.24",
+    "@workday/canvas-kit-styling": "14.1.24",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.23",
-    "@workday/canvas-kit-preview-react": "14.1.23",
-    "@workday/canvas-kit-react": "14.1.23",
-    "@workday/canvas-kit-react-fonts": "^14.1.23",
-    "@workday/canvas-kit-styling": "14.1.23",
+    "@workday/canvas-kit-labs-react": "14.1.24",
+    "@workday/canvas-kit-preview-react": "14.1.24",
+    "@workday/canvas-kit-react": "14.1.24",
+    "@workday/canvas-kit-react-fonts": "^14.1.24",
+    "@workday/canvas-kit-styling": "14.1.24",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -653,33 +653,47 @@ instead.
 
 ### Modals and Dialogs
 
-Previously, the `usePopupStack` hook created a CSS class name that was passed to our Popups. We attached those theme styles to that class name. This allowed the theme to be available in our Popups. But it also created a cascade barrier that blocked the global theme from being applied to our Popup components.
-Because we now use global CSS variables, we no longer need this class name to provide the global theme to Popups. But we have to remove this generated class name to allow the global theme to be applied to Popups.
+Previously, the `usePopupStack` hook created a CSS class name that was passed to our Popups. We
+attached those theme styles to that class name. This allowed the theme to be available in our
+Popups. But it also created a cascade barrier that blocked the global theme from being applied to
+our Popup components. Because we now use global CSS variables, we no longer need this class name to
+provide the global theme to Popups. But we have to remove this generated class name to allow the
+global theme to be applied to Popups. Instead, only the defined theme properties from the `theme` prop from the `CanvasProvider` will be applied to Popups and Modals.
 
+If you want to have scoped theming where a part of your application needs different theming, you can
+still do this via the `theme` prop.
 
-> **Important:** Passing a `theme` to the `CanvasProvider` **will not** theme components in Modals
-> and Dialogs. You can either pass a `className` or define CSS variables at the root.
+> **Note:** Only the properties of the theme object that are changed will be forward to popups and
+> modals. IE, if you change theme.palette.primary.main, only those tokens will change for popups and
+> modals.
 
-**Before in v13**
+#### Scoped Theming vs Global Theming
+
+**Only** use the `theme` prop on the `CanvasProvider` if you intentionally want to theme part of
+your application that is different from global theming.
+
+**Scoped Theming**
 
 ```tsx
-// When passing a theme to the Canvas Provider, the `usePopupStack` would grab the theme and generate a class to forward the theme to Modals and Dialogs. This would create a cascade barrier for any CSS variables deinfed at the root.
-<CanvasProvider theme={{canvas: {palette: {primary: {main: 'blue'}}}}}>
-  <Modal>//... rest of modal code</Modal>
+
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'teal'}}}}}>
+ {//part of your app to have different theme from the rest of your application}
 </CanvasProvider>
 ```
 
-**After in v14**
+> **Important:** Use the `theme` prop on the `CanvasProvider` if you intentionally want to theme
+> part of your application that is different from global theming.
+
+**Global Theming**
 
 ```tsx
-// If you wish to still theme you application and Modals, you can either define the CSS variables at the root level of your application or define a className and pass it to the CanvasProvider.
-:root {
- --cnvs-brand-primary-base: blue;
-}
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
 
 <CanvasProvider>
-  <Modal>//... rest of modal code</Modal>
-</CanvasProvider>
+  <App />
+</CanvasProvider>;
 ```
 ### Search Form (Labs) 🚨
 

package/dist/mdx/react/common/mdx/Theming.mdx

@@ -71,6 +71,43 @@ and scoped to the `div` that the `CanvasProvider` created. This meant that anyth
 or outside of the `CanvasProvider` would not be able to cascade down to the components within the
 `CanvasProvider`.
 
+## Global vs Scoped Theming
+
+Canvas Kit v14 supports two theming strategies: **global theming** and **scoped theming**. Understanding the difference is important to avoid unexpected behavior.
+
+### Global Theming
+
+Global theming applies CSS variables at the `:root` level, making them available throughout your entire application. This is the **recommended approach** for most use cases.
+
+```css
+:root {
+  --cnvs-brand-primary-base: var(--cnvs-base-palette-magenta-600);
+}
+```
+
+### Scoped Theming
+
+Scoped theming applies CSS variables to a specific section of your application using the `CanvasProvider` with either a `className` or `theme` prop. The theme only affects components within that provider.
+
+```tsx
+// Using the theme prop for scoped theming
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
+  <ScopedSection />
+</CanvasProvider>
+```
+
+> **⚠️ Warning:** Scoped theming creates a cascade barrier that **will break global theming** within its scope. Any CSS variables defined at `:root` will be overridden by the scoped theme. Only the tokens explicitly defined in the `theme` prop will be changed - other tokens will use their default values, not your global overrides.
+
+### When to Use Scoped Theming
+
+Only use scoped theming when you intentionally need a different theme for a specific section of your application, such as:
+
+- Embedding a Canvas Kit component in a third-party application with a different brand
+- Creating a preview panel that shows components with different themes
+- Supporting multi-tenant applications where sections have different branding
+
+For all other cases, use global theming at `:root` to ensure consistent theming throughout your application.
+
 ## ✅ Preferred Approach (v14+)
 
 Canvas Kit v14 promotes using CSS variables for theming, which can be applied in two ways:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.0028-next.0",
+  "version": "15.0.0-alpha.0032-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0028-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0028-next.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0028-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0028-next.0",
+    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0032-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0032-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0032-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0032-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "0054a4629daac5e8d66cc4ce3ab221681677150f"
+  "gitHead": "f48e25e031c1287c7d5160ef76a8746fe726de1c"
 }