@workday/canvas-kit-docs 14.0.0-alpha.1256-next.0 → 14.0.0-alpha.1257-next.0

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

@@ -1,3 +1,6 @@
+import {StorybookStatusIndicator, DownloadLLMFile} from '@workday/canvas-kit-docs';
+
+
 # Canvas Kit 14.0 Upgrade Guide
 
 This guide contains an overview of the changes in Canvas Kit v14. Please
@@ -16,6 +19,7 @@ styling updates to our components.
 
 ## Table of contents
 
+- [LLM Assisted Migration](#llm)
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Tokens](#tokens)
@@ -58,6 +62,30 @@ styling updates to our components.
   - [Preview](#preview)
   - [Labs](#labs)
 
+## LLM Assisted Migration <StorybookStatusIndicator type="ai" />
+
+We provide a **LLM migration mapping file** (`llm-canvas-kit-upgrade-guide-v14.txt`) specifically designed for
+use with LLM-based code assistants (such as [Cursor](https://www.cursor.so/) or similar tools). This
+file is not intended for direct human reference or team documentation, but rather as structured
+input for LLMs to automate and assist with your token migration process.
+
+> **Important:** LLMs can make mistakes. Please review changes to be sure they are correct using our
+> docs and upgrade guides.
+
+This file contains a compiled LLM consumption version of this v14 Upgrade Guide.
+
+**How to use:**
+
+- **View raw file**: Open the file in a new tab to see the complete migration mapping
+- **Download as txt**: Save the file locally to upload or paste into your LLM/code assistant
+- **Use with LLM**: Provide the raw content to your LLM/code assistant as context for automated
+  migration
+
+<DownloadLLMFile
+  rawFileDir="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-canvas-kit-upgrade-guide-v14.txt"
+  filenames="llm-canvas-kit-upgrade-guide-v14.txt"
+/>
+
 ## Codemod
 
 We've provided a [codemod](https://github.com/Workday/canvas-kit/tree/master/modules/codemod) to
@@ -114,20 +142,23 @@ yarn canvas-kit-codemod v14 [path]
 yarn remove @workday/canvas-kit-codemod
 ```
 
-> **Note**: The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
+> **Note:** The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
 > manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
 > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
 > your project conventions.
 
 ## Tokens
 
-Canvas Kit v14 now uses `@workday/canvas-tokens-web` v3, which introduces new color palettes and
+Canvas Kit v14 uses `@workday/canvas-tokens-web` v3, which introduces new color palettes and
 deprecates the old "fruity" color names (for example, use `red` instead of `cinnamon`, `blue`
 instead of `blueberry`, and `green` instead of `greenApple`). We strongly recommend upgrading to
 `@workday/canvas-tokens-web` v3, as using older versions will not match the new brand guidelines or
 color system. Although this dependency upgrade is not required, we've offered migration guides and
 codemods separately from the v14 upgrade so that teams can upgrade when they can.
 
+For more information and changes, please view our
+[Tokens v3 Upgrade Guide](https://workday.github.io/canvas-tokens/?path=/guides-upgrade-guides-v3-overview--docs).
+
 > **Note:** v3 Tokens should be backwards compatible with older versions of Canvas Kit.
 
 Follow these guides to migrate:
@@ -671,8 +702,8 @@ Variant names of the preview `StatusIndicator` have been updated by the followin
 - `gray` → `neutral`
 
 The `StatusIndicatorVariant` type has been updated to contain the new variant names listed above. If
-you use the old variant values, update to use the new ones mapped above. It has also been
-deprecated. Use `StatusIndicatorProps['variant']` instead.
+you use the old variant values, update to use the new ones mapped above. Use
+`StatusIndicatorProps['variant']` instead.
 
 **Before in v13**
 

package/dist/mdx/14.0-VISUAL-CHANGES.mdx

@@ -22,23 +22,26 @@ import textInputImage from './images/v14-text-input.png';
 
 # Canvas Kit 14.0 Visual Changes
 
-This guide contains an overview of the changes in Canvas Kit v14. If you have any issues, feel free to report them [here](https://github.com/Workday/canvas-kit/issues). For a mode detailed overview of the changes in v14, please view our [v14 Upgrade Guide](/help/upgrade-guides/canvas-v14-upgrade-guide/).
+This guide contains an overview of the changes in Canvas Kit v14. If you have any issues, feel free
+to report them [here](https://github.com/Workday/canvas-kit/issues). For a mode detailed overview of
+the changes in v14, please view our
+[v14 Upgrade Guide](/help/upgrade-guides/canvas-v14-upgrade-guide/).
 
 <Graphic src={{url: avatarImage}} />
 <Graphic src={{url: breadcrumbsImage}} />
+<Graphic src={{url: primaryButtonImage}} />
+<Graphic src={{url: secondaryButtonImage}} />
+<Graphic src={{url: tertiaryButtonImage}} />
 <Graphic src={{url: cardImage}} />
 <Graphic src={{url: checkboxImage}} />
+<Graphic src={{url: radioImage}} />
+<Graphic src={{url: selectImage}} />
+<Graphic src={{url: textAreaImage}} />
+<Graphic src={{url: textInputImage}} />
 <Graphic src={{url: countBadgeImage}} />
 <Graphic src={{url: expandableImage}} />
 <Graphic src={{url: infoHighlightImage}} />
 <Graphic src={{url: loadingDotsImage}} />
 <Graphic src={{url: pillImage}} />
-<Graphic src={{url: primaryButtonImage}} />
-<Graphic src={{url: radioImage}} />
-<Graphic src={{url: secondaryButtonImage}} />
-<Graphic src={{url: selectImage}} />
 <Graphic src={{url: statusIndicatorImage}} />
-<Graphic src={{url: tabsImage}} />
-<Graphic src={{url: tertiaryButtonImage}} />
-<Graphic src={{url: textAreaImage}} />
-<Graphic src={{url: textInputImage}} />
+<Graphic src={{url: tabsImage}} />

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

@@ -7,54 +7,67 @@ import Theming from './examples/Theming';
 
 ## 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.
+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.
 
 ## Migration from v10 Theme Prop to v14 CSS Variables
 
 ### The Evolution
 
-**Canvas Kit v10** introduced CSS tokens through the `@workday/canvas-tokens-web` package, providing a foundation for consistent design system values.
+**Canvas Kit v10** introduced CSS tokens through the `@workday/canvas-tokens-web` package, providing
+a foundation for consistent design system values.
 
-**Canvas Kit v14** Removes the cascade barrier created by the `CanvasProvider`, allowing CSS variables to work as intended.
+**Canvas Kit v14** Removes the cascade barrier created by the `CanvasProvider`, allowing CSS
+variables to work as intended.
 
 ## Old Approach (v10-v13)
 
 The old theming approach used JavaScript objects passed to the `CanvasProvider` theme prop:
 
 ```tsx
-import {CanvasProvider} from "@workday/canvas-kit-react/common"
-import {base} from "@workday/canvas-tokens-web"
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {base} from '@workday/canvas-tokens-web';
 
 <CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
-   <App/>
-</CanvasProvider>
+  <App />
+</CanvasProvider>;
 ```
 
 This would use `chroma.js` to generate a palette based on the `main` color provided.
 
 **Why we're moving away from this approach:**
+
 - Performance overhead from JavaScript theme object processing
 - Limited flexibility for complex theming scenarios
 - Inconsistent cascade behavior
 
-Any time `theme` is passed, the `CanvasProvider` would generate a palette and attach brand variables via a `className` scoping those brand variables to a wrapping div.
-In order for us to provide a better solution to theming that is scalable and is more aligned with our CSS variables, we changed this approach.
+Any time `theme` is passed, the `CanvasProvider` would generate a palette and attach brand variables
+via a `className` scoping those brand variables to a wrapping div. In order for us to provide a
+better solution to theming that is scalable and is more aligned with our CSS variables, we changed
+this approach.
 
 ## What is a Cascade Barrier?
 
-When we say "cascade barrier", we're talking about how [CSS cascades](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade) and takes precedence. Take the following example:
+When we say "cascade barrier", we're talking about how
+[CSS cascades](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade) and takes
+precedence. Take the following example:
 
 ```css
 :root {
-	--cnbvs-brand-primary-base: blue;
+  --cnbvs-brand-primary-base: blue;
 }
 
 // the element with the class .my-app will have a higher specificity than root, creating a barrier where the CSS variables gets redefined and takes precedence over what is defined at root.
 .my-app {
-	--cnvs-brand-primary-base: red;
+  --cnvs-brand-primary-base: red;
 }
 ```
-In the case of the `CanvasProvider` prior to v14, all our brand tokens where defined within a class and scoped to the `div` that the `CanvasProvider` created. This meant that anything set on `:root` or outside of the `CanvasProvider` would not be able to cascade down to the components within the `CanvasProvider`.
+
+In the case of the `CanvasProvider` prior to v14, all our brand tokens where defined within a class
+and scoped to the `div` that the `CanvasProvider` created. This meant that anything set on `:root`
+or outside of the `CanvasProvider` would not be able to cascade down to the components within the
+`CanvasProvider`.
 
 ## ✅ Preferred Approach (v14+)
 
@@ -62,7 +75,8 @@ Canvas Kit v14 promotes using CSS variables for theming, which can be applied in
 
 ### Method 1: Global CSS Variables (Recommended)
 
-Apply theming at the global level by importing CSS variable files and overriding values in your root CSS:
+Apply theming at the global level by importing CSS variable files and overriding values in your root
+CSS:
 
 ```css
 /* index.css */
@@ -82,13 +96,17 @@ Apply theming at the global level by importing CSS variable files and overriding
 }
 ```
 
-> **Note:** You should only import the CSS variables *once* at the root level of your application. If your application renders within another environment that imports these and sets them, **do not** re import them.
+> **Note:** You should only import the CSS variables _once_ at the root level of your application.
+> If your application renders within another environment that imports these and sets them, **do
+> not** re import them.
 
 ### Method 2: Provider-Level CSS Variables
 
-Use Canvas Kit's `createStyles` utility to generate themed class names that can be applied to specific components or sections:
+Use Canvas Kit's `createStyles` utility to generate themed class names that can be applied to
+specific components or sections:
 
-> **Note:** Doing the following **will create a cascade barrier**. Only use this method if you intentionally want to override the default theme.
+> **Note:** Doing the following **will create a cascade barrier**. Only use this method if you
+> intentionally want to override the default theme.
 
 ```tsx
 import {createStyles}from "@workday/canvas-kit-styling"
@@ -121,7 +139,9 @@ const themedBrand = createStyles({
 Canvas Kit provides three layers of CSS variables.
 
 ### Base Tokens (`base/_variables.css`)
+
 Base tokens define foundation palette and design values.
+
 ```css
 --cnvs-base-palette-blue-600: oklch(0.5198 0.1782 256.11 / 1);
 --cnvs-base-palette-magenta-600: oklch(0.534 0.183 344.19 / 1);
@@ -130,7 +150,9 @@ Base tokens define foundation palette and design values.
 ```
 
 ### Brand Tokens (`brand/_variables.css`)
+
 Brand tokens define semantic color assignments.
+
 ```css
 --cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
 --cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0);
@@ -139,7 +161,9 @@ Brand tokens define semantic color assignments.
 ```
 
 ### System Tokens (`system/_variables.css`)
+
 System tokens define component-specific values.
+
 ```css
 --cnvs-sys-color-bg-primary-default: var(--cnvs-base-palette-blue-600);
 --cnvs-sys-color-text-primary-default: var(--cnvs-base-palette-blue-600);
@@ -171,10 +195,10 @@ 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";
+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,
@@ -187,9 +211,8 @@ const greenTheme = createStyles({
 });
 
 <CanvasProvider className={greenTheme}>
-    <PrimaryButton>Click me</PrimaryButton>
-  </CanvasProvider>
-);
+  <PrimaryButton>Click me</PrimaryButton>
+</CanvasProvider>;
 ```
 
 <ExampleCodeBlock code={Theming} />
@@ -198,7 +221,7 @@ const greenTheme = createStyles({
 
 ```css
 /* Dark mode theming */
-[data-theme="dark"] {
+[data-theme='dark'] {
   --cnvs-sys-color-bg-default: var(--cnvs-base-palette-neutral-950);
   --cnvs-sys-color-text-default: var(--cnvs-base-palette-neutral-50);
   --cnvs-sys-color-border-container: var(--cnvs-base-palette-slate-700);
@@ -207,25 +230,30 @@ const greenTheme = createStyles({
 ```
 
 ### RTL Support
-Canvas Kit supports RTL out of the box. Our components are styled to use [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values). If you want to add additional styles based on RTL,
-you can also use the `:dir` [pseudo selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir).
+
+Canvas Kit supports RTL out of the box. Our components are styled to use
+[CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
+If you want to add additional styles based on RTL, you can also use the `:dir`
+[pseudo selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir).
 
 <ExampleCodeBlock code={RTL} />
 
 ### Resetting to Default Brand Theme
 
-If you need to reset the theme in parts of your application, there's a few ways to do this.
-We export a `defaultBranding` class that can be applied to the `CanvasProvider` which can wrap parts of your application.
+If you need to reset the theme in parts of your application, there's a few ways to do this. We
+export a `defaultBranding` class that can be applied to the `CanvasProvider` which can wrap parts of
+your application.
 
 ```tsx
-import {CanvasProvider, defaultBranding} from "@workday/canvas-kit-react/common"
+import {CanvasProvider, defaultBranding} from '@workday/canvas-kit-react/common';
 
 <CanvasProvider className={defaultBranding}>
-	<SomeSubComponent/>
-</CanvasProvider>
+  <SomeSubComponent />
+</CanvasProvider>;
 ```
 
-> **Note:** Doing the following **will create a cascade barrier**. Only use this method if you intentionally want to override the default theme.
+> **Note:** Doing the following **will create a cascade barrier**. Only use this method if you
+> intentionally want to override the default theme.
 
 ## Migration Guide
 
@@ -278,22 +306,24 @@ Replace theme-based `CanvasProvider` usage with CSS class-based theming.
 </CanvasProvider>
 ```
 
-> **Note:** Using a class means you will need to define each property of the palette for full control over theming.
+> **Note:** Using a class means you will need to define each property of the palette for full
+> control over theming.
 
 ### Step 4: Test Component Rendering
 
 Verify that Canvas Kit components (like `PrimaryButton`) correctly use the new CSS variables.
 
 ```tsx
-import {PrimaryButton} from "@workday/canvas-kit-react/button";
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
 
 // This should automatically use your CSS variable overrides
-<PrimaryButton>Themed Button</PrimaryButton>
+<PrimaryButton>Themed Button</PrimaryButton>;
 ```
 
 ## Best Practices
 
 ### 1. Use Semantic Token Names
+
 Use brand tokens instead of base tokens for better maintainability.
 
 ```css
@@ -304,8 +334,8 @@ Use brand tokens instead of base tokens for better maintainability.
 --cnvs-base-palette-blue-600: blue;
 ```
 
-
 ### 2. Test Accessibility
+
 Ensure color combinations meet accessibility standards.
 
 ```css
@@ -318,7 +348,8 @@ Ensure color combinations meet accessibility standards.
 
 ### 3. Avoid Component Level Theming
 
-Theming is meant to be done at the app level or root level of the application. Avoid theming at the component level.
+Theming is meant to be done at the app level or root level of the application. Avoid theming at the
+component level.
 
 ```tsx
 /* ✅ Good - App level theming */
@@ -351,9 +382,11 @@ const myCustomTheme = createStyles({
 
 ## Component Compatibility
 
-All Canvas Kit components in v14 automatically consume CSS variables. No component-level changes are required when switching from the theme prop approach to CSS variables.
+All Canvas Kit components in v14 automatically consume CSS variables. No component-level changes are
+required when switching from the theme prop approach to CSS variables.
 
 ### Supported Components
+
 - ✅ All Button variants (`PrimaryButton`, `SecondaryButton`, etc.)
 - ✅ Form components (`TextInput`, `FormField`, etc.)
 - ✅ Layout components (`Card`, `Modal`, etc.)
@@ -371,8 +404,13 @@ The CSS variable approach provides several performance improvements:
 ## Troubleshooting
 
 ### Theme Not Applied
+
 Ensure CSS variable files are imported in the correct order.
 
+> **Note:** You should only import the CSS variables _once_ at the root level of your application.
+> If your application renders within another environment that imports these and sets them, **do
+> not** re import them.
+
 ```css
 /* Correct order */
 @import '@workday/canvas-tokens-web/css/base/_variables.css';
@@ -386,6 +424,7 @@ Ensure CSS variable files are imported in the correct order.
 ```
 
 ### Inconsistent Theming
+
 Check for CSS specificity issues.
 
 ```css
@@ -401,10 +440,11 @@ Check for CSS specificity issues.
 ```
 
 ### Missing Token Values
+
 Verify all required CSS token files are imported and token names are correct.
 
 ```tsx
-import {brand, base, system} from "@workday/canvas-tokens-web";
+import {brand, base, system} from '@workday/canvas-tokens-web';
 
 // Check token availability in development
 console.log(brand.primary.base); // Should output CSS variable name
@@ -412,6 +452,9 @@ console.log(brand.primary.base); // Should output CSS variable name
 
 ## Conclusion
 
-The migration to CSS variables in Canvas Kit v14 provides a more performant, flexible, and maintainable theming solution. By following this guide and best practices, you can successfully migrate your applications and take advantage of the improved theming capabilities.
+The migration to CSS variables in Canvas Kit v14 provides a more performant, flexible, and
+maintainable theming solution. By following this guide and best practices, you can successfully
+migrate your applications and take advantage of the improved theming capabilities.
 
-For additional support and examples, refer to the Canvas Kit Storybook documentation and the `@workday/canvas-tokens` [repository](https://github.com/Workday/canvas-tokens).
+For additional support and examples, refer to the Canvas Kit Storybook documentation and the
+`@workday/canvas-tokens` [repository](https://github.com/Workday/canvas-tokens).

package/dist/mdx/tokens/TokenMigrationOverview.mdx

@@ -25,8 +25,9 @@ use with LLM-based code assistants (such as [Cursor](https://www.cursor.so/) or
 file is not intended for direct human reference or team documentation, but rather as structured
 input for LLMs to automate and assist with your token migration process.
 
-> The LLM migration file is regularly updated to reflect the latest token mappings and best
-> practices. For more details, see other sections of this migration guide.
+> Important: LLMs can make mistakes. Please review changes to be sure they are correct using our
+> docs and upgrade guides. The LLM migration file is regularly updated to reflect the latest token
+> mappings and best practices. For more details, see other sections of this migration guide.
 
 This file contains a comprehensive mapping of old Canvas Kit token usages to their new equivalents
 in `@workday/canvas-tokens-web`, along with migration tips and examples and formatted for optimal
@@ -40,7 +41,7 @@ LLM consumption.
   migration
 
 <DownloadLLMFile
-  rawFileDir="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-token-migration-14.0.0.txt"
+  rawFileDir="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-token-migration-14.txt"
   filenames="llm-token-migration-14.0.0.txt"
 />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1256-next.0",
+  "version": "14.0.0-alpha.1257-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.0.0-alpha.1256-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1256-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1256-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1256-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1257-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1257-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1257-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1257-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "ecb8230f9b648de52e89d8b84340dcd31b2514b2"
+  "gitHead": "4638acfc42f1ba3f4b2cfe455750dc0916e33d3c"
 }