@workday/canvas-kit-docs 14.0.0-alpha.1252-next.0 → 14.0.0-alpha.1254-next.0

package/dist/es6/mdx/welcomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAgDA,eAAO,MAAM,WAAW,+CAmGvB,CAAC"}
+{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAqDA,eAAO,MAAM,WAAW,+CAmGvB,CAAC"}

package/dist/es6/mdx/welcomePage.js

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore: Cannot find module error
 import headerImage from './ck-banner.jpg';
+// @ts-ignore: Cannot find module error
+import componentsImage from './Components.png';
+// @ts-ignore: Cannot find module error
+import tokensImage from './Tokens.png';
+// @ts-ignore: Cannot find module error
+import stylingImage from './Styling.png';
 import { Flex, Grid, Box } from '@workday/canvas-kit-react/layout';
 import { InstallBlock } from './installBlock';
 import { Text, Heading } from '@workday/canvas-kit-react/text';
 import { Card } from '@workday/canvas-kit-react/card';
 import { ExternalHyperlink, Hyperlink } from '@workday/canvas-kit-react/button';
-import { rocketIcon, tokensIcon, shapesIcon } from '@workday/canvas-system-icons-web';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { system, base } from '@workday/canvas-tokens-web';
+import { system } from '@workday/canvas-tokens-web';
 import { createStyles } from '@workday/canvas-kit-styling';
+import { Graphic } from '@workday/canvas-kit-react/icon';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
 const parentFlexStyles = createStyles({
@@ -32,7 +37,7 @@ const imageStyles = createStyles({
     height: 'auto',
 });
 const gridStyles = createStyles({
-    maxHeight: 320,
+    maxHeight: 400,
     gridTemplateRows: '1fr 1fr 2fr 1fr',
     display: 'grid',
 });
@@ -41,5 +46,5 @@ const linkStyles = createStyles({
     marginTop: system.space.x3,
 });
 export const WelcomePage = () => {
-    return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles }), _jsx(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', right: '5%' }, children: _jsxs(Text, { typeLevel: "title.medium", cs: [bannerTextStyles, versionStyles], children: ["v", version] }) })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", cs: { marginInlineStart: system.space.x1 }, children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", children: "Quick Links" }), _jsxs(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s", children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.magenta600, icon: rocketIcon, size: 60 }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.red300, icon: tokensIcon, size: 60 }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: ExternalHyperlink, className: linkStyles, href: "https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.teal500, icon: shapesIcon, size: 60 }), _jsx(Card.Heading, { children: "Styling" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Learn how to style Canvas components using tokens, theming, and custom CSS approaches." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs", children: "Get Started" })] })] }), _jsx(Heading, { size: "medium", children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
+    return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles }), _jsx(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', right: '5%' }, children: _jsxs(Text, { typeLevel: "title.medium", cs: [bannerTextStyles, versionStyles], children: ["v", version] }) })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", cs: { marginInlineStart: system.space.x1 }, children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", children: "Quick Links" }), _jsxs(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s", children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: componentsImage } }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: tokensImage } }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: ExternalHyperlink, className: linkStyles, href: "https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: stylingImage } }), _jsx(Card.Heading, { children: "Styling" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Learn how to style Canvas components using tokens, theming, and custom CSS approaches." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs", children: "Get Started" })] })] }), _jsx(Heading, { size: "medium", children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
 };

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

@@ -9,7 +9,9 @@ any questions.
 v14.0 Introduces Workday's new brand direction which includes a new color palette and with it, some
 styling updates to our components.
 
-> **Note:** v14.0 requires an upgrade to the `@workday/canvas-tokens-web` package to `@v3.0.0`.
+**Please consult our [v14 Visual Changes](/help/upgrade-guides/canvas-v14-upgrade-guide/#tab=visual-changes) page for a visual reference of what's changed.**
+
+> **Note:** While v14 does not require an upgrade to our v3 tokens, we strongly advise to upgrade to the latest to ensure proper branding.
 
 ## Table of contents
 
@@ -18,9 +20,10 @@ styling updates to our components.
 - [Tokens](#tokens)
 - [Caution Naming](#caution-naming)
 - [Theming](#theming)
+  - [New Documentation](#new-documentation)
   - [Canvas Provider](#canvas-provider-)
 - [Component Updates](#component-updates)
-  - [Avatar Preview](#avatar-preview)
+  - [Avatar (Preview)](#avatar-preview)
   - [Branding Changes](#branding-changes-)
   - [Buttons](#buttons)
   - [Card](#card-)
@@ -28,24 +31,24 @@ styling updates to our components.
   - [Expandable](#expandable)
   - [Hyperlink and ExternalHyperlink](#hyperlink-and-external-hyperlink)
   - [Loading Dots](#loading-dots)
-  - [Pill](#pill)
-  - [SearchForm](#search-form)
-  - [Status Indicator (Preview)](#status-indicator-preview)
+  - [Pill (Preview)](#pill-preview)
+  - [Search Form (Labs)](#searchform-)
+  - [Status Indicator (Preview)](#status-indicator-preview-)
 - [Deprecations](#deprecations)
-  - [Avatar in Main](#avatar-in-main)
+  - [Avatar (Main)](#avatar-in-main)
   - [Combobox (Labs)](#combobox-labs)
   - [Radio (Main)](#radio-main)
-  - [SearchForm (Labs)](#search-form-labs)
+  - [Search Form (Labs)](#searchform-labs)
   - [Segmented Control (Main)](#segmented-control-main)
   - [Side Panel (Main)](#side-panel-main)
   - [Tokens](#tokens)
 - [Removals](#removals)
   - [Deprecated Buttons](#deprecated-buttons)
   - [Input Provider](#input-provider)
-  - [Menu (preview)](#menu-preview)
-  - [readyOnlyPillStencil and removeablePillStencil](#readyOnlyPillStencil-and-removeablePillStencil)
-  - [Text Area](#text-area)
-  - [Text Input](#text-input)
+  - [Menu (Preview)](#menu-preview)
+  - [readyOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
+  - [Text Area (Labs)](#text-area)
+  - [Text Input (Labs)](#text-input)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -116,7 +119,7 @@ yarn remove @workday/canvas-kit-codemod
 ## Tokens
 
 Canvas Kit v14 now uses `@workday/canvas-tokens-web` v3, which introduces new color palettes and
-replaces the old "fruity" color names (for example, use `red` instead of `cinnamon`, `blue` instead
+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
@@ -142,8 +145,7 @@ Follow these guides to migrate:
 To better align with the brand refresh, Alert and Warning states are being renamed to Caution for
 better semantics.
 
-This change mostly affects how you pass an error state to our input components. In most cases, our
-inputs components should be used with our `FormField` component to ensure correct accessiblity.
+This change mostly affects how you pass an error state to our input components. In most cases, our input components should be used with our `FormField` component to ensure correct accessibility.
 
 **Before in v13**
 
@@ -169,8 +171,7 @@ inputs components should be used with our `FormField` component to ensure correc
 </FormField>
 ```
 
-If you are using the error type either from our `Common` package or the one exposed from the
-component, the naming as also changed.
+If you are using the error type either from our `Common` package or the one exposed from the component, the naming has also changed.
 
 **Before in v13**
 
@@ -195,7 +196,6 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Switch} from '@workday/canvas-kit-react/switch';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 
-
 someFunction(ErrorType.Caution);
 
 <TextInput error={TextInput.ErrorType.Caution} />
@@ -208,6 +208,10 @@ someFunction(ErrorType.Caution);
 
 ## Theming
 
+### New Documentation
+
+We've **significantly** improved our theming documentation. Please consult our new [Canvas Kit Theming Guide](/get-started/for-developers/theming/overview/).
+
 ### Canvas Provider 🚨
 
 **PRs:** [#3407](https://github.com/Workday/canvas-kit/pull/3407),
@@ -222,7 +226,10 @@ Canvas Provider has been updated to **remove** default branding colors to ensure
 our CSS variables. Instead of generating a palette and shifting the brightness and darkness with
 `chroma.js`, we use `oklch` to generate the palette colors.
 
-**Before in v13** In v13, the `useTheme` hook would call `createCanvasTheme` which generated a
+Prior to v14, `CanvasProvider` created a [cascade barrier](/get-started/for-developers/theming/overview/#what-is-a-cascade-barrier), which redefined brand CSS variables under a class and created a higher specificity. This made it difficult to override brand tokens in certain scenarios. v14 removes that barrier.
+
+**Before in v13**
+In v13, the `useTheme` hook would call `createCanvasTheme` which generated a
 palette given a `main` color via `chroma.js`.
 
 ```tsx
@@ -258,7 +265,7 @@ different. If you want more control over the colors, we suggest providing the fu
 **Or**
 
 ```tsx
-<CanvasProvider theme={{canvas: {palette: {primary: {main: cssVar(base.blue600)}}}}}>
+<CanvasProvider theme={{canvas: {palette: {primary: {main: base.blue600}}}}}>
   <App />
 </CanvasProvider>
 ```
@@ -289,7 +296,7 @@ specificity.
 A new `Avatar` component has been added to the `@workday/canvas-kit-preview-react` package that
 matches our brand refresh.
 
-#### API Changes from the Main Avatar
+#### API Changes from Avatar in Main
 
 - `Avatar` has a `name` prop. This is required to ensure a fallback if a `url` is not provided. The
   `name` prop also determines the initials and the `alt` text for the image if a `url` is provided.
@@ -318,7 +325,7 @@ import { Avatar } from '@workday/canvas-kit-react/avatar';
 
 <Avatar altText="John Doe" size="extraExtraLarge" variant="light" as="div" url={yourImageUrl} />
 
-// For Avatars that where buttons
+// For Avatars that were buttons
 <Avatar altText="John Doe" size="extraExtraLarge" variant="dark" url={yourImageUrl} />
 ```
 
@@ -340,12 +347,9 @@ revolve around the use of our new brand colors. For a better guide on what has c
 tokens, please view the Tokens v3.0.0
 [Upgrade Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs).
 
-> **Note:** If you want a visual diff of the changes, please view the [Visual Changes](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v14-0-visual-changes--docs) guide.
+The following components have been updated (**see [v14 Visual Changes](/help/upgrade-guides/canvas-v14-upgrade-guide/#tab=visual-changes) for a visual reference of the updates**):
 
-The following components have been updated:
-
-- `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270),
-  [#3447](https://github.com/Workday/canvas-kit/pull/3447)
+- `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270),[#3447](https://github.com/Workday/canvas-kit/pull/3447)
 - `Buttons` [#3394](https://github.com/Workday/canvas-kit/pull/3394)
 - `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
 - `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
@@ -361,25 +365,32 @@ The following components have been updated:
 
 ### Buttons
 
-#### TertiaryButton
+#### TertiaryButton 🚨
 
-The `TertiaryButton` component no longer supports the `isThemable` prop. To customize the appearance
-of `TertiaryButton`, use the `cs` prop for custom styles or the `colors` prop for palette-based
-color overrides.
+**Breaking Changes**
 
-**After in v14**
+- The `TertiaryButton` component no longer supports the `isThemable` prop. To customize the appearance
+  of `TertiaryButton`, use the `cs` prop for custom styles or the `colors` prop for palette-based
+  color overrides.
+- The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
+  our new brand direction.
+
+**Before in v13**
 
 ```tsx
-<TertiaryButton cs={{[buttonStencil.vars.background: 'red']}}>
-  Click Me
-</TertiaryButton>
+<TertiaryButton isThemable>Themable Button</TertiaryButton>
 ```
 
-The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
-our new brand direction.
+**After in v14**
+
+```tsx
+<TertiaryButton cs={{/* custom styles */}}>Custom Button</TertiaryButton>
+// OR
+<TertiaryButton colors={{/* palette colors */}}>Custom Button</TertiaryButton>
+```
 
 If you need to override default styles, follow
-[this guide](https://workday.github.io/canvas-kit/?path=/docs/components-buttons--docs#custom-styles)
+[this guide](https://workday.github.io/canvas-kit/?path=/docs/components-buttons--docs#custom-styles).
 
 ### Card 🚨
 
@@ -388,12 +399,12 @@ If you need to override default styles, follow
 We've rebranded the `Card` component to align with our new brand directions and provide better
 visual hierarchy and more flexible styling options. The following changes have been made:
 
-#### Default Card No Longer Has Shadow
+#### Default Card No Longer Has a Box Shadow
 
-The default `Card` variant no longer includes a box shadow, creating a cleaner, flatter appearance
-that aligns with our new brand's emphasis on simplicity and clarity. This is a **visual breaking
-change** that may affect your application's visual hierarchy. If your design requires a shadow you
-can add it through `cs` prop.
+The default `Card` variant no longer includes a box shadow, creating a cleaner, flatter appearance that
+aligns with our new brand's emphasis on simplicity and clarity. This is a **visual breaking change**
+that may affect your application's visual hierarchy. If your design requires shadow you can add it
+through the `cs` prop.
 
 **Before in v13**
 
@@ -404,7 +415,8 @@ can add it through `cs` prop.
 </Card>
 ```
 
-**After in v14** Only do this if you need a shadow. Otherwise, adhere to the default styling.
+**After in v14**
+Only do this if you need a shadow. Otherwise, adhere to the default styling.
 
 ```tsx
 import {system} from '@workday/canvas-tokens-web';
@@ -485,8 +497,8 @@ emphasis for the badge.
 
 ```tsx
 <CountBadge /> // Default count badge with high emphasis
-<CountBadge variant="inverse" /> // Inverse default count badge to use on dark backgrounds
-// new
+<CountBadge variant="inverse" /> // Inverse default count badge
+// New emphasis prop
 <CountBadge emphasis="low" /> // Default count badge with low emphasis
 <CountBadge variant="inverse" emphasis="low" /> // Inverse count badge with low emphasis
 ```
@@ -496,23 +508,25 @@ emphasis for the badge.
 **PRs:** [#3389](https://github.com/Workday/canvas-kit/pull/3389),
 [#3430](https://github.com/Workday/canvas-kit/pull/3430)
 
-- `<Expandable.Target>` hover state has been update to use `system.color.bg.alt.soft` instead of
+- `<Expandable.Target>` hover state has been updated to use `system.color.bg.alt.soft` instead of
   `system.color.bg.alt.default` to match our new brand directions.
-- The `focus` state has been update to use `system.color.border.primary.default` to ensure the same
+- The `focus` state has been updated to use `system.color.border.primary.default` to ensure the same
   focus state color across all components.
 - `Expandable.Avatar` has been updated to use the `Avatar` component from Preview. This change
   requires that you update the `altText` prop to `name`.
 
 > 🤖 The codemod will handle the change of `altText` to `name` on `Expandable.Avatar`.
 
-### Hyperlink and External Hyperlink
+These changes are only **visual** and should not affect the functionality of the component.
+
+### Hyperlink and ExternalHyperlink
 
 **PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
 
 - `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standaloneInverse` variant. This
   removes the underline text decoration for use outside the context of body text.
 
-**In v14**
+**Hyperlink and ExternalHyperlink in v14**
 
 ```tsx
 <Hyperlink variant="standalone" href="#hyperlink">Hyperlink</Hyperlink>
@@ -530,7 +544,7 @@ emphasis for the badge.
 
 - We've updated the colors to match our brand refresh. The default color changes from
   `system.color.bg.alt.strong` to `system.color.bg.muted.strong`.
-- `LoadingDots` now has a `inverse` variant. Use this variant when the Loading Dots are on a dark
+- `LoadingDots` now has an `inverse` variant. Use this variant when the Loading Dots are on a dark
   background or image.
 
 **After in v14**
@@ -553,7 +567,7 @@ emphasis for the badge.
 - The `Pill` component no longer supports `'default'` as a value for the `variant` prop. If the
   `variant` prop is not provided, the component will use its default styling.
 
-- `readyOnlyPillStencil` and `removeablePillStencil` have been removed due to some styling clean up.
+- `readyOnlyPillStencil` and `removeablePillStencil` have been removed due to some styling cleanup.
   Please use `pillStencil` instead.
 
 **Before in v13**
@@ -574,7 +588,7 @@ emphasis for the badge.
 </Pill>
 ```
 
-### Search Form 🚨
+### SearchForm 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
 
@@ -585,20 +599,19 @@ emphasis for the badge.
 
 ```tsx
 const customTheme = {
-	background: colors.cinnamon600,
-	backgroundFocus: colors.frenchVanilla100,
-	placeholderColor: colors.frenchVanilla100,
-	placeholderColorFocus: colors.blackPepper400,
-	boxShadow: ['10px 5px 5px red', '60px -16px teal']
-	boxShadowFocus: ['10px 5px 5px red', '60px -16px teal']
+  background: colors.cinnamon600,
+  backgroundFocus: colors.frenchVanilla100,
+  placeholderColor: colors.frenchVanilla100,
+  placeholderColorFocus: colors.blackPepper400,
+  boxShadow: ['10px 5px 5px red', '60px -16px teal'],
+  boxShadowFocus: ['10px 5px 5px red', '60px -16px teal']
 } as SearchThemeAttributes;
-	//...
 
-	<SearchForm
-	searchTheme={customTheme}
-	autocompleteItems={menuItems}
-	onInputChange={filterMenuItems}
-	onSubmit={handleSubmit}
+<SearchForm
+  searchTheme={customTheme}
+  autocompleteItems={menuItems}
+  onInputChange={filterMenuItems}
+  onSubmit={handleSubmit}
 />
 ```
 
@@ -613,14 +626,13 @@ const customTheme = {
   boxShadow: '10px 5px 5px red',
   boxShadowFocus: '10px 5px 5px red',
 } as SearchThemeAttributes;
-//...
 
 <SearchForm
   searchTheme={customTheme}
   autocompleteItems={menuItems}
   onInputChange={filterMenuItems}
   onSubmit={handleSubmit}
-/>;
+/>
 ```
 
 - `SearchTheme` enum type has been updated to have string values `light`, `dark` and `transparent`.
@@ -631,20 +643,40 @@ const customTheme = {
 
 **PR:** [#3287](https://github.com/Workday/canvas-kit/pull/3287)
 
-Preview `StatusIndicator` is a rounder and more vibrant base emphasis (`low`).
+Preview `StatusIndicator` is rounder and more vibrant with base emphasis (`low`).
 
 Variant names of the preview `StatusIndicator` have been updated by the following mapping:
 
-- `blue` -> `primary`
-- `green` -> `success`
-- `orange` -> `caution`
-- `red` -> `critical`
-- `gray` -> `neutral`
+- `blue` → `primary`
+- `green` → `success`
+- `orange` → `caution`
+- `red` → `critical`
+- `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.
 
+**Before in v13**
+
+```tsx
+<StatusIndicator variant="blue" />
+<StatusIndicator variant="green" />
+<StatusIndicator variant="orange" />
+<StatusIndicator variant="red" />
+<StatusIndicator variant="gray" />
+```
+
+**After in v14**
+
+```tsx
+<StatusIndicator variant="primary" />
+<StatusIndicator variant="success" />
+<StatusIndicator variant="caution" />
+<StatusIndicator variant="critical" />
+<StatusIndicator variant="neutral" />
+```
+
 ## Deprecations
 
 We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
@@ -663,10 +695,10 @@ We've deprecated the `Avatar` component in `@workday/canvas-kit-react` Main pack
 ```tsx
 import { Avatar } from '@workday/canvas-kit-react/avatar';
 
-// For Avatars that where divs
+// For Avatars that were divs
 <Avatar altText="John Doe" size="extraExtraLarge" as="div" url={yourImageUrl} />
 
-// For Avatars that where buttons
+// For Avatars that were buttons
 <Avatar altText="John Doe" onClick={() => console.log('Avatar clicked')} />
 ```
 
@@ -675,8 +707,8 @@ import { Avatar } from '@workday/canvas-kit-react/avatar';
 ```tsx
 import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
 // name is used as a fallback if the image url is broken or still loading
-// variant light or dark are not used. Instead, variant defines the color of the Avatar
-<Avatar name="John Doe" size="extraExtraLarge" variant="teal" url={yourImageUrl} />;
+// variant defines the color of the Avatar
+<Avatar name="John Doe" size="extraExtraLarge" variant="teal" url={yourImageUrl} />
 ```
 
 If you need to render a `button` element use the `BaseAvatar` component.
@@ -692,7 +724,7 @@ import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
   onClick={() => console.log('Avatar clicked')}
 >
   <BaseAvatar.Name name="John Doe" />
-</BaseAvatar>;
+</BaseAvatar>
 ```
 
 ### Combobox (Labs)
@@ -708,7 +740,7 @@ The Radio component in `@workday/canvas-kit-react/radio` has been deprecated. Pl
 [Radio](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-radio--docs) component
 from the same package, which offers improved accessibility and API consistency.
 
-### Search Form (Labs)
+### SearchForm (Labs)
 
 **PR:** [#3469](https://github.com/Workday/canvas-kit/pull/3469)
 
@@ -735,9 +767,9 @@ functionality.
 
 The legacy tokens from `@workday/canvas-kit-react/tokens` are now deprecated. Please use the new
 [Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
-package (`@workday/canvas-tokens-web`) for all token usage. Follow
-[a migration guide](https://workday.github.io/canvas-kit?path=/docs/guides-tokens-migration-overview--docs)
-for smootier upgrade.
+package (`@workday/canvas-tokens-web`) for all token usage. Follow the
+[migration guide](https://workday.github.io/canvas-kit?path=/docs/guides-tokens-migration-overview--docs)
+for a smoother upgrade.
 
 ## Removals
 
@@ -751,10 +783,10 @@ promoted or replaced a component or utility.
 Long overdue, but a sign of moving forward, we are removing our `DeprecatedButton`. Our design
 system supported this for quite some time, but with the advancement in theming, our components API
 and our flexibility, it is time for us to finally remove this component. This component has served
-as a reminder of how far we've come and it part we're thankful for this change.
+as a reminder of how far we've come and we're thankful for this change.
 
-Al though unlikely, but not impossible, if you were using `DeprecatedButton` please use our flexible
-and themable buttons like `PrimaryButton`, `ScondaryButton` or `TertiaryButton`.
+Although unlikely, if you were using `DeprecatedButton` please use our flexible
+and themable buttons like `PrimaryButton`, `SecondaryButton` or `TertiaryButton`.
 
 ### Input Provider
 
@@ -766,7 +798,7 @@ browser heuristics to determine when an element should receive visual focus styl
 information, please view the
 [MDN docs on `:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible).
 
-If you are trying to apply focus styles to our components, we strongly avise to use `:focus-visible`
+If you are trying to apply focus styles to our components, we strongly advise using the `:focus-visible`
 pseudo selector.
 
 ```tsx
@@ -780,11 +812,11 @@ const buttonStyles = createStyles({
 })
 
 <PrimaryButton cs={buttonStyles}>
-	Click Me
+  Click Me
 </PrimaryButton>
 ```
 
-### Menu (preview)
+### Menu (Preview)
 
 **PR:** [#3353](https://github.com/Workday/canvas-kit/pull/3353)
 
@@ -797,7 +829,7 @@ We've removed `Menu` from `@workday/canvas-kit-preview-react` package. Please us
 The `readyOnlyPillStencil` and `removeablePillStencil` utilities have been removed from the Pill
 package. Please use `pillStencil` instead.
 
-### Text Area (preview)
+### Text Area (Preview)
 
 **PR:** [#3471](https://github.com/Workday/canvas-kit/pull/3471)
 
@@ -867,19 +899,35 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
 
 ## Troubleshooting
 
-- When upgrading to the latest major version of Canvas Kit, all related Canvas Kit packages should
+### Common Issues
+
+- **Dependency Conflicts**: When upgrading to the latest major version of Canvas Kit, all related Canvas Kit packages should
   be updated at the same time:
-  - `"@workday/canvas-kit-react": "^13.5.6"` -> `"@workday/canvas-kit-react": "^14.0.0"`
-  - `"@workday/canvas-kit-styling": "^13.5.6"` -> `"@workday/canvas-kit-styling": "^14.0.0"`
-  - `"@workday/canvas-kit-preview-react": "^13.5.6"` ->
+  - `"@workday/canvas-kit-react": "^13.5.6"` → `"@workday/canvas-kit-react": "^14.0.0"`
+  - `"@workday/canvas-kit-styling": "^13.5.6"` → `"@workday/canvas-kit-styling": "^14.0.0"`
+  - `"@workday/canvas-kit-preview-react": "^13.5.6"` →
     `"@workday/canvas-kit-preview-react": "^14.0.0"`
-  - `"@workday/canvas-kit-labs-react": "^13.5.6"` -> `"@workday/canvas-kit-labs-react": "^14.0.0"`
-- Our components rely on the `@workday/canvas-tokens-web` package which provides our CSS variables
+  - `"@workday/canvas-kit-labs-react": "^13.5.6"` → `"@workday/canvas-kit-labs-react": "^14.0.0"`
+
+- **Token Issues**: Our components rely on the `@workday/canvas-tokens-web` package which provides our CSS variables
   and ensures the correct styling of our components. Make sure to upgrade to the latest version of
   Canvas Tokens Web and install it correctly. For more information,
   [view our docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
 
+- **Color Discrepancies**: If you notice visual differences after upgrading, this may be due to the change from `chroma.js` to `oklch` color generation. Consider providing explicit color values in your theme configuration.
+
+- **Build Errors**: If you encounter build errors after running the codemod, ensure your linter is run as the codemod's formatting may not match your project conventions.
+
 ## Glossary
 
-For an overview of the different packages we provide, plase view our docs
-[here](https://workday.github.io/canvas-kit/?path=/docs/guides-packages--docs).
+For an overview of the different packages we provide, please view our docs
+[here](https://workday.github.io/canvas-kit/?path=/docs/guides-packages--docs).
+
+### Main
+Components in the Main package are stable and ready for production use.
+
+### Preview
+Components in the Preview package are mostly stable but may still receive breaking changes before being promoted to Main.
+
+### Labs
+Components in the Labs package are experimental and may receive significant changes or be removed entirely.

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

@@ -22,7 +22,7 @@ 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](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v14-0-overview--docs).
+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}} />

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

@@ -0,0 +1,417 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import RTL from './examples/RTL';
+import Theming from './examples/Theming';
+
+
+# Canvas Kit Theming Guide
+
+## 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.
+
+## 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 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"
+
+<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
+   <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.
+
+## 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:
+
+```css
+:root {
+	--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;
+}
+```
+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+)
+
+Canvas Kit v14 promotes using CSS variables for theming, which can be applied in two ways:
+
+### Method 1: Global CSS Variables (Recommended)
+
+Apply theming at the global level by importing CSS variable files and overriding values in your root CSS:
+
+```css
+/* index.css */
+@import '@workday/canvas-tokens-web/css/base/_variables.css';
+@import '@workday/canvas-tokens-web/css/system/_variables.css';
+@import '@workday/canvas-tokens-web/css/brand/_variables.css';
+
+:root {
+  /* Override brand primary colors */
+  --cnvs-brand-primary-base: var(--cnvs-base-palette-magenta-600);
+  --cnvs-brand-primary-light: var(--cnvs-base-palette-magenta-200);
+  --cnvs-brand-primary-lighter: var(--cnvs-base-palette-magenta-50);
+  --cnvs-brand-primary-lightest: var(--cnvs-base-palette-magenta-25);
+  --cnvs-brand-primary-dark: var(--cnvs-base-palette-magenta-700);
+  --cnvs-brand-primary-darkest: var(--cnvs-base-palette-magenta-800);
+  --cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0);
+}
+```
+
+> **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:
+
+> **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"
+import {brand, base} from "@workday/canvas-tokens-web"
+import {CanvasProvider} from "@workday/canvas-kit-react/common"
+
+// You can import the CSS variables in a ts file or an index.css file. You do not need to do both.
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+
+// Generate a class name that defines CSS variables
+const themedBrand = createStyles({
+  [brand.primary.accent]: base.neutral0,
+  [brand.primary.darkest]: base.blue800,
+  [brand.primary.dark]: base.blue700,
+  [brand.primary.base]: base.blue600,
+  [brand.primary.light]: base.blue200,
+  [brand.primary.lighter]: base.blue50,
+  [brand.primary.lightest]: base.blue25,
+})
+
+<CanvasProvider className={themedBrand}>
+  <App/>
+</CanvasProvider>
+```
+
+## CSS Token Structure
+
+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);
+--cnvs-base-font-size-100: 1rem;
+--cnvs-base-space-x4: calc(var(--cnvs-base-unit) * 4);
+```
+
+### 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);
+--cnvs-brand-error-base: var(--cnvs-base-palette-red-600);
+--cnvs-brand-success-base: var(--cnvs-base-palette-green-600);
+```
+
+### 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);
+--cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4);
+```
+
+## Practical Examples
+
+### Complete Brand Theming
+
+```css
+/* themes/magenta-theme.css */
+@import '@workday/canvas-tokens-web/css/base/_variables.css';
+@import '@workday/canvas-tokens-web/css/system/_variables.css';
+@import '@workday/canvas-tokens-web/css/brand/_variables.css';
+
+:root {
+  /* Primary brand colors */
+  --cnvs-brand-primary-base: var(--cnvs-base-palette-magenta-600);
+  --cnvs-brand-primary-light: var(--cnvs-base-palette-magenta-200);
+  --cnvs-brand-primary-lighter: var(--cnvs-base-palette-magenta-50);
+  --cnvs-brand-primary-lightest: var(--cnvs-base-palette-magenta-25);
+  --cnvs-brand-primary-dark: var(--cnvs-base-palette-magenta-700);
+  --cnvs-brand-primary-darkest: var(--cnvs-base-palette-magenta-800);
+  --cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0);
+}
+```
+
+### 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
+
+```css
+/* Dark mode theming */
+[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);
+  --cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-800);
+}
+```
+
+### 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).
+
+<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.
+
+```tsx
+import {CanvasProvider, defaultBranding} from "@workday/canvas-kit-react/common"
+
+<CanvasProvider className={defaultBranding}>
+	<SomeSubComponent/>
+</CanvasProvider>
+```
+
+> **Note:** Doing the following **will create a cascade barrier**. Only use this method if you intentionally want to override the default theme.
+
+## Migration Guide
+
+### Step 1: Identify Current Theme Usage
+
+Find all instances of `CanvasProvider` with theme props in your application.
+
+```tsx
+// Find these patterns:
+<CanvasProvider theme={{canvas: {palette: {...}}}}>
+```
+
+### Step 2: Extract Theme Values
+
+Convert JavaScript theme objects to CSS variable overrides.
+
+```tsx
+// Old approach:
+const theme = {
+  canvas: {
+    palette: {
+      primary: {
+        main: colors.greenApple400,
+        dark: colors.greenApple500,
+      }
+    }
+  }
+};
+
+// New approach - CSS variables:
+:root {
+  --cnvs-brand-primary-base: var(--cnvs-base-palette-green-400);
+  --cnvs-brand-primary-dark: var(--cnvs-base-palette-green-500);
+}
+```
+
+### Step 3: App Level Theming Usage
+
+Replace theme-based `CanvasProvider` usage with CSS class-based theming.
+
+```tsx
+// Before:
+<CanvasProvider theme={customTheme}>
+  <App />
+</CanvasProvider>
+
+// After:
+<CanvasProvider className={customThemeClass}>
+  <App />
+</CanvasProvider>
+```
+
+> **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";
+
+// This should automatically use your CSS variable overrides
+<PrimaryButton>Themed Button</PrimaryButton>
+```
+
+## Best Practices
+
+### 1. Use Semantic Token Names
+Use brand tokens instead of base tokens for better maintainability.
+
+```css
+/* ✅ Good - semantic meaning */
+--cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
+
+/* ❌ Avoid - direct base token usage */
+--cnvs-base-palette-blue-600: blue;
+```
+
+
+### 2. Test Accessibility
+Ensure color combinations meet accessibility standards.
+
+```css
+/* Verify contrast ratios for text/background combinations */
+:root {
+  --cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
+  --cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0); /* White text */
+}
+```
+
+### 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.
+
+```tsx
+/* ✅ Good - App level theming */
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, brand} from '@workday/canvas-tokens-web';
+
+const myCustomTheme = createStyles({
+  [brand.primary.base]: base.magenta600
+})
+
+
+<CanvasProvider className={myCustomTheme}>
+  <App/>
+</CanvasProvider>
+
+/* ❌ Avoid - wrapping components to theme */
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+
+const myCustomTheme = createStyles({
+  [brand.primary.base]: base.magenta600
+})
+
+<CanvasProvider className={myCustomTheme}>
+  <PrimaryButton>Click Me</PrimaryButton>
+</CanvasProvider>
+
+```
+
+## 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.
+
+### Supported Components
+- ✅ All Button variants (`PrimaryButton`, `SecondaryButton`, etc.)
+- ✅ Form components (`TextInput`, `FormField`, etc.)
+- ✅ Layout components (`Card`, `Modal`, etc.)
+- ✅ Navigation components (`Tabs`, `SidePanel`, etc.)
+
+## Performance Benefits
+
+The CSS variable approach provides several performance improvements:
+
+- **Reduced Bundle Size**: No JavaScript theme object processing
+- **Better Caching**: CSS variables can be cached by the browser
+- **Faster Rendering**: Native CSS cascade instead of JavaScript calculations
+- **Runtime Efficiency**: No theme context propagation overhead
+
+## Troubleshooting
+
+### Theme Not Applied
+Ensure CSS variable files are imported in the correct order.
+
+```css
+/* Correct order */
+@import '@workday/canvas-tokens-web/css/base/_variables.css';
+@import '@workday/canvas-tokens-web/css/system/_variables.css';
+@import '@workday/canvas-tokens-web/css/brand/_variables.css';
+
+/* Your overrides after imports */
+:root {
+  --cnvs-brand-primary-base: var(--cnvs-base-palette-magenta-600);
+}
+```
+
+### Inconsistent Theming
+Check for CSS specificity issues.
+
+```css
+/* Ensure your overrides have sufficient specificity */
+:root {
+  --cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600) !important;
+}
+
+/* Or use more specific selectors */
+.my-app {
+  --cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
+}
+```
+
+### 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";
+
+// Check token availability in development
+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.
+
+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/react/common/mdx/examples/RTL.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Card} from '@workday/canvas-kit-react/card';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {arrowRightSmallIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const rtlStyles = createStyles({
+  paddingInlineStart: system.space.x16,
+});
+
+const rtlButtonStyles = createStyles({
+  ':dir(rtl)': {
+    svg: {
+      transform: 'rotate(180deg)',
+    },
+  },
+});
+
+const App = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+  return (
+    <Card>
+      <Card.Heading>RTL Support</Card.Heading>
+      <Card.Body cs={rtlStyles}>
+        <FormField>
+          <FormField.Label>Email</FormField.Label>
+          <FormField.Field>
+            <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+          </FormField.Field>
+        </FormField>
+        <PrimaryButton cs={rtlButtonStyles} iconPosition="end" icon={arrowRightSmallIcon}>
+          RTL
+        </PrimaryButton>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default () => {
+  return (
+    <CanvasProvider dir="rtl">
+      <App />
+    </CanvasProvider>
+  );
+};

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

@@ -0,0 +1,34 @@
+import {createStyles} from '@workday/canvas-kit-styling';
+import {brand, base, system} from '@workday/canvas-tokens-web';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Card} from '@workday/canvas-kit-react/card';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+
+const customTheme = createStyles({
+  [brand.primary.base]: base.green600,
+  [brand.primary.dark]: base.green700,
+  [brand.primary.darkest]: base.green800,
+  [brand.common.focusOutline]: base.green600,
+  [system.color.fg.strong]: base.indigo900,
+  [system.color.border.container]: base.indigo300,
+});
+
+const App = () => {
+  return (
+    <Card>
+      <Card.Heading>Theming</Card.Heading>
+      <Card.Body>
+        <PrimaryButton>Theming</PrimaryButton>
+        <input />
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default () => {
+  return (
+    <CanvasProvider className={customTheme}>
+      <App />
+    </CanvasProvider>
+  );
+};

package/dist/mdx/welcome.mdx

@@ -9,8 +9,7 @@ import { version } from '../../../lerna.json';
 
 ### Canvas Provider
 
-The `<CanvasProvider>` is required for proper branding support. Furthermore, if you use Emotion for
-styling your components, the `<CanvasProvider>` ensures your styles will merge as expected. Note:
+If you use Emotion for styling your components, the `<CanvasProvider>` ensures your styles will merge as expected. Note:
 Custom use of `<CacheProvider>` provided by Emotion is not supported. `@workday/canvas-kit-styling`
 owns the creating of the cache reference. This ensures both static styling and Emotion’s dynamic
 styling solutions work together. In most cases you'll want to wrap your application at the root
@@ -20,9 +19,6 @@ level in `<CanvasProvider>`.
 import * as React from 'react';
 import {
   CanvasProvider,
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
 } from '@workday/canvas-kit-react/common';
 // Ensure CSS variables are defined. You Can also do this at the root index.css
 import '@workday/canvas-tokens-web/css/base/_variables.css';
@@ -30,15 +26,8 @@ import '@workday/canvas-tokens-web/css/brand/_variables.css';
 import '@workday/canvas-tokens-web/css/system/_variables.css';
 
 export const App = () => {
-  // useTheme is filling in the Canvas theme object if any keys are missing
-  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
-    canvas: {
-      // Switch to `ContentDirection.RTL` to change direction
-      direction: ContentDirection.LTR,
-    },
-  });
   return (
-    <CanvasProvider theme={canvasTheme}>
+    <CanvasProvider>
         <main>
           <p>Get Started With Canvas Kit</p>
         </main>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1252-next.0",
+  "version": "14.0.0-alpha.1254-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.1252-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1252-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1252-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1252-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1254-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1254-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1254-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1254-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": "80e4dc6c529068c00bce5b14c625ea69a6ee63c2"
+  "gitHead": "a177192ec9673c8f8d71ab20c7effc6382cae308"
 }