@workday/canvas-kit-docs 14.2.0-0044-next.0 → 14.2.0-0052-next.0

package/dist/es6/lib/docs.js

@@ -202477,16 +202477,14 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "name": "PartialEmotionCanvasTheme",
             "value": "PartialEmotionCanvasTheme"
           },
-          "description": "",
+          "description": "⚠️ Only use this prop if you intent to to theme a part of your application that is different from global theming.\nFor more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#global-vs-scoped-theming).\n\nWhile we support theme overrides, we advise to use global theming via CSS Variables.",
           "declarations": [
             {
               "name": "theme",
               "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx"
             }
           ],
-          "tags": {
-            "deprecated": "⚠️ `theme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
-          }
+          "tags": {}
         }
       ]
     }
@@ -205386,9 +205384,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
       }
     ],
-    "tags": {
-      "deprecated": "⚠️ `PartialEmotionCanvasTheme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14)."
-    },
+    "tags": {},
     "type": {
       "kind": "object",
       "properties": [

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.26",
-    "@workday/canvas-kit-preview-react": "14.1.26",
-    "@workday/canvas-kit-react": "14.1.26",
-    "@workday/canvas-kit-react-fonts": "^14.1.26",
-    "@workday/canvas-kit-styling": "14.1.26",
+    "@workday/canvas-kit-labs-react": "14.1.27",
+    "@workday/canvas-kit-preview-react": "14.1.27",
+    "@workday/canvas-kit-react": "14.1.27",
+    "@workday/canvas-kit-react-fonts": "^14.1.27",
+    "@workday/canvas-kit-styling": "14.1.27",
     "@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.26",
-    "@workday/canvas-kit-preview-react": "14.1.26",
-    "@workday/canvas-kit-react": "14.1.26",
-    "@workday/canvas-kit-react-fonts": "^14.1.26",
-    "@workday/canvas-kit-styling": "14.1.26",
+    "@workday/canvas-kit-labs-react": "14.1.27",
+    "@workday/canvas-kit-preview-react": "14.1.27",
+    "@workday/canvas-kit-react": "14.1.27",
+    "@workday/canvas-kit-react-fonts": "^14.1.27",
+    "@workday/canvas-kit-styling": "14.1.27",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

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

@@ -83,7 +83,7 @@ input for LLMs to automate and assist with your migration process.
   migration
 
 <DownloadLLMFile
-  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-canvas-kit-upgrade-guide-v14.txt"
+  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm/llm-canvas-kit-upgrade-guide-v14.txt"
   filename="llm-canvas-kit-upgrade-guide-v14.txt"
 />
 

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

@@ -5,14 +5,19 @@ import Theming from './examples/Theming';
 
 # Canvas Kit Theming Guide
 
-> **Deprecation Notice:** The `theme` prop on `CanvasProvider` and all associated theming utilities (`useTheme`, `getTheme`, `styled`, `defaultCanvasTheme`, etc.) are deprecated. Please use CSS variables from `@workday/canvas-tokens-web` for theming. See the [Preferred Approach](#-preferred-approach-v14) section below.
-
 ## Overview
 
 Canvas Kit v14 introduces a significant shift in our approach to theming: we've moved away from
 JavaScript-based theme objects to CSS variables. This change provides better performance, improved
 developer experience, and greater flexibility for theming applications.
 
+> **📌 Quick Start:**
+> 1. **Import CSS variables once** at the root level of your application (e.g., in `index.css`)
+> 2. **Override tokens at `:root`** for global theming — this is the recommended approach
+> 3. **Use `CanvasProvider` scoped theming only** for specific scenarios like multi-brand sections or embedded components
+>
+> If your application renders within an environment that already imports these CSS variables, **do not re-import them**.
+
 ## Migration from v10 Theme Prop to v14 CSS Variables
 
 ### The Evolution
@@ -49,6 +54,8 @@ via a `className` scoping those brand variables to a wrapping div. In order for
 better solution to theming that is scalable and is more aligned with our CSS variables, we changed
 this approach.
 
+**Note:** While we support theme overrides, we advise to use global theming via CSS Variables.
+
 ## What is a Cascade Barrier?
 
 When we say "cascade barrier", we're talking about how
@@ -71,6 +78,8 @@ 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`.
 
+If you provide a `theme` to the `CanvasProvider`, it will create a scoped theme. Note that in v14, global CSS variables are the recommended way to theme Popups and Modals consistently.
+
 ## 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.
@@ -80,7 +89,9 @@ Canvas Kit v14 supports two theming strategies: **global theming** and **scoped
 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
+@import '@workday/canvas-tokens-web/css/base/_variables.css';
 :root {
+	// This is showing how you can change the value of a token at the root level of your application.
   --cnvs-brand-primary-base: var(--cnvs-base-palette-magenta-600);
 }
 ```
@@ -90,13 +101,13 @@ Global theming applies CSS variables at the `:root` level, making them available
 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
+// Using the theme prop for scoped theming. This will set the [brand.primary.**] tokens to shades of purple.
 <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.
+> **⚠️ Warning:** Scoped theming creates a cascade barrier that **will break global theming**. 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
 
@@ -178,13 +189,10 @@ const themedBrand = createStyles({
 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.
 
-> **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.
-
 **Before in v13**
 
 ```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.
+// 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 defined at the root.
 <CanvasProvider theme={{canvas: {palette: {primary: {main: 'blue'}}}}}>
   <Modal>//... rest of modal code</Modal>
 </CanvasProvider>
@@ -261,29 +269,6 @@ System tokens define component-specific values.
 }
 ```
 
-### App-Specific Theming
-
-```tsx
-import {createStyles} from '@workday/canvas-kit-styling';
-import {brand, base} from '@workday/canvas-tokens-web';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
-
-const greenTheme = createStyles({
-  [brand.primary.base]: base.green600,
-  [brand.primary.dark]: base.green700,
-  [brand.primary.darkest]: base.green800,
-  [brand.primary.light]: base.green200,
-  [brand.primary.lighter]: base.green50,
-  [brand.primary.lightest]: base.green25,
-  [brand.primary.accent]: base.neutral0,
-});
-
-<CanvasProvider className={greenTheme}>
-  <PrimaryButton>Click me</PrimaryButton>
-</CanvasProvider>;
-```
-
 <ExampleCodeBlock code={Theming} />
 
 ### Dark Mode Implementation

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

@@ -15,13 +15,31 @@ const customTheme = createStyles({
 
 const App = () => {
   return (
-    <Card>
-      <Card.Heading>Theming</Card.Heading>
-      <Card.Body>
-        <PrimaryButton>Theming</PrimaryButton>
-        <input />
-      </Card.Body>
-    </Card>
+    <CanvasProvider
+      theme={{
+        canvas: {
+          palette: {
+            primary: {
+              main: base.green600,
+              dark: base.green700,
+              darkest: base.green800,
+              light: base.green200,
+              lighter: base.green50,
+              lightest: base.green25,
+              contrast: base.neutral0,
+            },
+          },
+        },
+      }}
+    >
+      <Card>
+        <Card.Heading>Theming</Card.Heading>
+        <Card.Body>
+          <PrimaryButton>Theming</PrimaryButton>
+          <input />
+        </Card.Body>
+      </Card>
+    </CanvasProvider>
   );
 };
 

package/dist/mdx/style-props/stylePropsMigrationOverview.mdx

@@ -48,7 +48,7 @@ assist with your migration process.
   migration
 
 <DownloadLLMFile
-  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-style-props-migration.txt"
+  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm/llm-style-props-migration.txt"
   filename="llm-style-props-migration.txt"
 />
 

package/dist/mdx/tokens/TokenMigrationOverview.mdx

@@ -41,7 +41,7 @@ LLM consumption.
   migration
 
 <DownloadLLMFile
-  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-token-migration-14.txt"
+  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm/llm-token-migration-14.txt"
   filename="llm-token-migration-14.0.0.txt"
 />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.2.0-0044-next.0",
+  "version": "14.2.0-0052-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": "^14.2.0-0044-next.0",
-    "@workday/canvas-kit-preview-react": "^14.2.0-0044-next.0",
-    "@workday/canvas-kit-react": "^14.2.0-0044-next.0",
-    "@workday/canvas-kit-styling": "^14.2.0-0044-next.0",
+    "@workday/canvas-kit-labs-react": "^14.2.0-0052-next.0",
+    "@workday/canvas-kit-preview-react": "^14.2.0-0052-next.0",
+    "@workday/canvas-kit-react": "^14.2.0-0052-next.0",
+    "@workday/canvas-kit-styling": "^14.2.0-0052-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "9b7c0ac94acf364f9c84b803f9f52e1f2e10d77a"
+  "gitHead": "b1fc1f892afd637a9840c355759407aa0b579878"
 }