@workday/canvas-kit-docs 14.0.0-alpha.1135-next.0 → 14.0.0-alpha.1144-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": "13.0.5",
-    "@workday/canvas-kit-preview-react": "13.0.5",
-    "@workday/canvas-kit-react": "13.0.5",
-    "@workday/canvas-kit-react-fonts": "^13.0.5",
-    "@workday/canvas-kit-styling": "13.0.5",
+    "@workday/canvas-kit-labs-react": "13.1.3",
+    "@workday/canvas-kit-preview-react": "13.1.3",
+    "@workday/canvas-kit-react": "13.1.3",
+    "@workday/canvas-kit-react-fonts": "^13.1.3",
+    "@workday/canvas-kit-styling": "13.1.3",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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": "13.0.5",
-    "@workday/canvas-kit-preview-react": "13.0.5",
-    "@workday/canvas-kit-react": "13.0.5",
-    "@workday/canvas-kit-react-fonts": "^13.0.5",
-    "@workday/canvas-kit-styling": "13.0.5",
+    "@workday/canvas-kit-labs-react": "13.1.3",
+    "@workday/canvas-kit-preview-react": "13.1.3",
+    "@workday/canvas-kit-react": "13.1.3",
+    "@workday/canvas-kit-react-fonts": "^13.1.3",
+    "@workday/canvas-kit-styling": "13.1.3",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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

@@ -1 +1 @@
-{"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,4CA8BrE,CAAC"}
+{"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,4CA8BrE,CAAC"}

package/dist/es6/mdx/installBlock.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Flex } from '@workday/canvas-kit-react/layout';
-import { colors } from '@workday/canvas-kit-react/tokens';
+import { system } from '@workday/canvas-tokens-web';
 import { PrimaryButton } from '@workday/canvas-kit-react/button';
+import { cssVar } from '@workday/canvas-kit-styling';
 export const InstallBlock = ({ command, packageName }) => {
     const commandRef = React.useRef(null);
     const [copied, setCopied] = React.useState(false);
@@ -15,5 +16,5 @@ export const InstallBlock = ({ command, packageName }) => {
             navigator.clipboard.writeText(commandRef.current.innerText);
         }
     };
-    return (_jsxs(Flex, { padding: "xs", backgroundColor: colors.licorice500, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: 'wrap', children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: { color: colors.blueberry200 }, children: command }), ' ', _jsx("span", { style: { color: colors.frenchVanilla100 }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
+    return (_jsxs(Flex, { padding: "xs", backgroundColor: system.color.bg.contrast.default, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: { color: cssVar(system.color.fg.primary.soft) }, children: command }), ' ', _jsx("span", { style: { color: cssVar(system.color.fg.inverse) }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
 };

package/dist/es6/mdx/welcomePage.js

@@ -8,7 +8,7 @@ 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';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
@@ -24,7 +24,7 @@ const textStyles = createStyles({
     lineHeight: '5vmin',
 });
 const versionStyles = createStyles({
-    fontWeight: base.fontFamily100,
+    ...system.type.body.medium,
     marginInlineStart: system.space.x4,
 });
 const imageStyles = createStyles({
@@ -32,7 +32,7 @@ const imageStyles = createStyles({
     height: 'auto',
 });
 const borderStyles = createStyles({
-    borderBottom: `1px solid ${base.blueberry200}`,
+    borderBottom: `1px solid ${system.color.border.primary.default}`,
     marginBottom: system.space.x2,
 });
 const gridStyles = createStyles({
@@ -45,5 +45,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: [_jsxs(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' }, children: [_jsx(Text, { typeLevel: "title.medium", cs: textStyles, children: "Canvas Kit" }), _jsxs(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles], children: ["v", version] })] }), _jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })] }), _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", children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", className: borderStyles, 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.cantaloupe400, colorHover: base.cantaloupe400, 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.blueberry400, icon: tokensIcon, colorHover: base.blueberry400, 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: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.greenApple400, icon: shapesIcon, size: 60, colorHover: base.greenApple400 }), _jsx(Card.Heading, { children: "Assets" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Assets are graphics which help communicate meaning or highlight areas of interaction to our users." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview", children: "View Assets" })] })] }), _jsx(Heading, { size: "medium", className: borderStyles, 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: [_jsxs(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' }, children: [_jsx(Text, { typeLevel: "title.medium", cs: textStyles, children: "Canvas Kit" }), _jsxs(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles], children: ["v", version] })] }), _jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })] }), _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", children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", className: borderStyles, 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: system.color.static.amber.default, colorHover: system.color.static.amber.default, 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: system.color.fg.primary.default, icon: tokensIcon, colorHover: system.color.fg.primary.default, 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: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: system.color.static.green.default, icon: shapesIcon, size: 60, colorHover: system.color.static.green.default }), _jsx(Card.Heading, { children: "Assets" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Assets are graphics which help communicate meaning or highlight areas of interaction to our users." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview", children: "View Assets" })] })] }), _jsx(Heading, { size: "medium", className: borderStyles, 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/11.0-UPGRADE-GUIDE.mdx

@@ -262,8 +262,8 @@ Components affected:
       <Table.Cell />
       <Table.Cell>disabled</Table.Cell>
       <Table.Cell>borderColor</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
+      <Table.Cell>soap600</Table.Cell>
+      <Table.Cell	>
         licorice100
       </Table.Cell>
     </Table.Row>
@@ -272,8 +272,8 @@ Components affected:
       <Table.Cell>Inverse</Table.Cell>
       <Table.Cell>disabled</Table.Cell>
       <Table.Cell>borderColor</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
+      <Table.Cell>soap600</Table.Cell>
+      <Table.Cell>
         licorice100
       </Table.Cell>
     </Table.Row>
@@ -282,8 +282,8 @@ Components affected:
       <Table.Cell />
       <Table.Cell>disabled</Table.Cell>
       <Table.Cell>backgroundColor</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(brand.error.light)}}>error.light</Table.Cell>
-      <Table.Cell cs={{backgroundColor: 'rgba(222,46,33,0.4)'}}>error.base</Table.Cell>
+      <Table.Cell>error.light</Table.Cell>
+      <Table.Cell>error.base</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>DeleteButton</Table.Cell>
@@ -298,8 +298,8 @@ Components affected:
       <Table.Cell />
       <Table.Cell>disabled</Table.Cell>
       <Table.Cell>borderColor</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
+      <Table.Cell>soap600</Table.Cell>
+      <Table.Cell>
         licorice100
       </Table.Cell>
     </Table.Row>
@@ -308,10 +308,8 @@ Components affected:
       <Table.Cell>Inverse</Table.Cell>
       <Table.Cell>focus</Table.Cell>
       <Table.Cell>border</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.blackPepper400), backgroundColor: cssVar(base.soap400)}}>
-        soap400
-      </Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.blackPepper400), backgroundColor: 'transparent'}}>
+      <Table.Cell>soap400</Table.Cell>
+      <Table.Cell>
         transparent
       </Table.Cell>
     </Table.Row>
@@ -320,10 +318,8 @@ Components affected:
       <Table.Cell>Inverse</Table.Cell>
       <Table.Cell>focus</Table.Cell>
       <Table.Cell>boxShdaow (Inner Color)</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
-        blackPepper500
-      </Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
+      <Table.Cell>blackPepper500</Table.Cell>
+      <Table.Cell>
         blackPepper400
       </Table.Cell>
     </Table.Row>
@@ -332,10 +328,8 @@ Components affected:
       <Table.Cell>Inverse</Table.Cell>
       <Table.Cell>focus</Table.Cell>
       <Table.Cell>color</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
-        blackPepper500
-      </Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
+      <Table.Cell>blackPepper500</Table.Cell>
+      <Table.Cell>
         blackPepper400
       </Table.Cell>
     </Table.Row>
@@ -344,10 +338,8 @@ Components affected:
       <Table.Cell>Inverse</Table.Cell>
       <Table.Cell>focus</Table.Cell>
       <Table.Cell>fill</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
-        blackPepper500
-      </Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
+      <Table.Cell>blackPepper500</Table.Cell>
+      <Table.Cell>
         blackPepper400
       </Table.Cell>
     </Table.Row>
@@ -356,10 +348,8 @@ Components affected:
       <Table.Cell>transparent</Table.Cell>
       <Table.Cell/>
       <Table.Cell>backgroundColor</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
-        blackPepper600
-      </Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(system.color.bg.translucent), color: cssVar(base.frenchVanilla100)}}>
+      <Table.Cell>blackPepper600</Table.Cell>
+      <Table.Cell>
         rgba(0,0,0,.84)
       </Table.Cell>
     </Table.Row>
@@ -378,8 +368,8 @@ Components affected:
       <Table.Cell>Checked and Disabled</Table.Cell>
       <Table.Cell/>
       <Table.Cell>backgroundColor, opacity</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.blueberry200)}}>blueberry200</Table.Cell>
-      <Table.Cell cs={{backgroundColor: 'rgba(8,117,225,.3)'}}>
+      <Table.Cell>blueberry200</Table.Cell>
+      <Table.Cell>
         backgroundColor: brand.primary.base
 				opacity: system.opacity.disabled
       </Table.Cell>
@@ -389,36 +379,32 @@ Components affected:
       <Table.Cell />
       <Table.Cell />
       <Table.Cell>borderColor</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap400)}}>soap400</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap500)}}>soap500</Table.Cell>
+      <Table.Cell>soap400</Table.Cell>
+      <Table.Cell>soap500</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>TertiaryButton</Table.Cell>
       <Table.Cell />
       <Table.Cell>hover</Table.Cell>
       <Table.Cell>backgroundColor</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap200)}}>soap200</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap300)}}>soap300</Table.Cell>
+      <Table.Cell>soap200</Table.Cell>
+      <Table.Cell>soap300</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>TertiaryButton</Table.Cell>
       <Table.Cell />
       <Table.Cell>active</Table.Cell>
       <Table.Cell>backgroundColor</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap300)}}>soap300</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap400)}}>soap400</Table.Cell>
+      <Table.Cell>soap300</Table.Cell>
+      <Table.Cell>soap400</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>TertiaryButton</Table.Cell>
       <Table.Cell />
       <Table.Cell>active</Table.Cell>
       <Table.Cell>color</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(brand.primary.dark)}}>
-        primary.dark
-      </Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(brand.primary.darkest)}}>
-        primary.darkest
-      </Table.Cell>
+      <Table.Cell>primary.dark</Table.Cell>
+      <Table.Cell>primary.darkest</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>TertiaryButton</Table.Cell>
@@ -433,42 +419,32 @@ Components affected:
       <Table.Cell />
       <Table.Cell>focus</Table.Cell>
       <Table.Cell>fill</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
-        blackPepper500
-      </Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
-        blackPepper400
-      </Table.Cell>
+      <Table.Cell>blackPepper500</Table.Cell>
+      <Table.Cell>blackPepper400</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>TertiaryButton (Icon Only)</Table.Cell>
       <Table.Cell />
       <Table.Cell>hover</Table.Cell>
       <Table.Cell>fill</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
-        blackPepper500
-      </Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
-        blackPepper400
-      </Table.Cell>
+      <Table.Cell>blackPepper500</Table.Cell>
+      <Table.Cell>blackPepper400</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>TextArea</Table.Cell>
       <Table.Cell />
       <Table.Cell>disabled</Table.Cell>
       <Table.Cell>borderColor</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
-        licorice100
-      </Table.Cell>
+      <Table.Cell>soap600</Table.Cell>
+      <Table.Cell>licorice100</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>TextInput</Table.Cell>
       <Table.Cell />
       <Table.Cell>disabled</Table.Cell>
       <Table.Cell>borderColor</Table.Cell>
-      <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
-      <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
+      <Table.Cell>soap600</Table.Cell>
+      <Table.Cell>
         licorice100
       </Table.Cell>
     </Table.Row>

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

@@ -10,7 +10,7 @@ any questions.
   - [Instructions](#instructions)
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
-	- [SearchForm](#search-form)
+  - [SearchForm](#search-form)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -78,6 +78,8 @@ yarn remove @workday/canvas-kit-codemod
 > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
 > your project conventions.
 
+
+
 ## Styling API and Canvas Tokens 💅
 
 Several components have been refactored to use our Canvas tokens and styling API. The React
@@ -96,7 +98,7 @@ The following components have been updated:
 - `ToolbarDropdownButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
 - `ToolbarIconButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
 
-### Search Form 🚨
+## Search Form 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
 

package/dist/mdx/preview-react/pill/examples/CustomStyles.tsx

@@ -1,33 +1,41 @@
 import {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-preview-react/pill';
 
 import {createStencil} from '@workday/canvas-kit-styling';
-import {base} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 
 const customPillStencil = createStencil({
   base: {
-    [pillStencil.vars.background]: base.berrySmoothie300,
-    [pillStencil.vars.border]: base.berrySmoothie500,
-    [pillStencil.vars.label]: base.frenchVanilla100,
-    [systemIconStencil.vars.color]: base.frenchVanilla100,
-    [pillCountStencil.vars.backgroundColor]: base.berrySmoothie400,
+    [pillStencil.vars.background]: system.color.static.green.default,
+    [pillStencil.vars.border]: system.color.static.green.stronger,
+    [pillStencil.vars.label]: system.color.static.white,
+    [systemIconStencil.vars.color]: system.color.static.white,
+    [pillCountStencil.vars.backgroundColor]: system.color.static.green.default,
+    [pillCountStencil.vars.borderColor]: system.color.static.green.default,
 
     '&:hover, &.hover': {
-      [pillStencil.vars.background]: base.berrySmoothie400,
-      [pillStencil.vars.label]: base.frenchVanilla100,
-      [pillCountStencil.vars.backgroundColor]: base.berrySmoothie500,
-      [systemIconStencil.vars.color]: base.frenchVanilla100,
+      [pillStencil.vars.background]: system.color.static.green.stronger,
+      [pillStencil.vars.label]: system.color.static.white,
+      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,
+      [systemIconStencil.vars.color]: system.color.static.white,
+      [pillCountStencil.vars.borderColor]: system.color.static.green.stronger,
     },
     '&:active, &.active': {
-      [pillStencil.vars.background]: base.berrySmoothie400,
-      [pillStencil.vars.label]: base.frenchVanilla100,
-      [systemIconStencil.vars.color]: base.frenchVanilla100,
-      [pillCountStencil.vars.backgroundColor]: base.berrySmoothie500,
+      [pillStencil.vars.background]: system.color.static.green.stronger,
+      [pillStencil.vars.label]: system.color.static.white,
+      [systemIconStencil.vars.color]: system.color.static.white,
+      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,
+    },
+    '&:focus, &.focus, &:focus-visible': {
+      [pillStencil.vars.background]: system.color.static.green.stronger,
+      [pillStencil.vars.label]: system.color.static.white,
+      [systemIconStencil.vars.color]: system.color.static.white,
+      [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,
     },
     '&:disabled, &.disabled': {
-      [pillStencil.vars.background]: base.berrySmoothie400,
-      [pillStencil.vars.label]: base.frenchVanilla100,
-      [systemIconStencil.vars.color]: base.frenchVanilla100,
+      [pillStencil.vars.background]: system.color.static.green.default,
+      [pillStencil.vars.label]: system.color.static.white,
+      [systemIconStencil.vars.color]: system.color.static.white,
     },
   },
 });

package/dist/mdx/preview-react/radio/examples/Custom.tsx

@@ -3,14 +3,14 @@ import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {base} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   formfieldInputStyles: createStyles({
     width: px2rem(200),
   }),
   radioGroupLabelTextStyles: createStyles({
-    color: base.berrySmoothie400,
+    color: system.color.fg.default,
   }),
 };
 

package/dist/mdx/preview-react/side-panel/examples/AlwaysOpen.tsx

@@ -4,7 +4,7 @@ import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
 const stylesOverride = {
@@ -21,7 +21,7 @@ const stylesOverride = {
     paddingX: system.space.x4,
   }),
   panelHeading: createStyles({
-    color: base.licorice500,
+    color: system.color.fg.default,
   }),
   mainContent: createStyles({
     alignItems: 'center',

package/dist/mdx/preview-react/side-panel/examples/ExternalControl.tsx

@@ -8,7 +8,7 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const stylesOverride = {
   viewport: createStyles({
@@ -20,7 +20,7 @@ const stylesOverride = {
     paddingX: system.space.x4,
   }),
   panelHeading: createStyles({
-    color: base.licorice500,
+    color: system.color.fg.muted.stronger,
   }),
   main: createStyles({
     alignItems: 'center',

package/dist/mdx/preview-react/side-panel/examples/Variant.tsx

@@ -5,7 +5,7 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
 import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 // local helper hook for setting content direction;
 import {useDirection} from './useDirection';
@@ -13,7 +13,7 @@ import {useDirection} from './useDirection';
 const stylesOverride = {
   viewport: createStyles({
     height: px2rem(320),
-    backgroundColor: base.soap100,
+    backgroundColor: system.color.bg.alt.default,
   }),
   panel: createStyles({
     alignItems: 'center',

package/dist/mdx/react/_examples/mdx/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx

@@ -5,8 +5,8 @@ import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {system, base} from '@workday/canvas-tokens-web';
-import {createStyles, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
 const fruits = [
   'Apples',
@@ -20,8 +20,8 @@ const fruits = [
 ];
 
 const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${base.cantaloupe400}`,
-  backgroundColor: base.cantaloupe100,
+  border: `${px2rem(1)} solid ${system.color.bg.caution.stronger}`,
+  backgroundColor: system.color.bg.caution.default,
   padding: system.space.x2,
 });
 

package/dist/mdx/react/_examples/mdx/examples/GlobalHeader.tsx

@@ -9,7 +9,7 @@ import {
   ExtractProps,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {calc, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {
   notificationsIcon,
@@ -73,7 +73,7 @@ const styleOverrides = {
   }),
   menuButtonStyles: createStyles({
     textDecoration: 'none',
-    color: base.blackPepper500,
+    color: system.color.fg.strong,
   }),
   notificationContainerStyles: createStyles({
     boxSizing: 'border-box',

package/dist/mdx/react/_examples/mdx/examples/SidePanelWithNavigation.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Subtext, Text} from '@workday/canvas-kit-react/text';
@@ -30,7 +30,7 @@ const stylesOverride = {
   navContainer: createStyles({
     height: px2rem(800),
     positio: 'relative',
-    backgroundColor: base.frenchVanilla100,
+    backgroundColor: system.color.bg.alt.default,
   }),
   accordionContainer: createStyles({
     flexDirection: 'column',

package/dist/mdx/react/_examples/mdx/examples/SidePanelWithOverlay.tsx

@@ -3,12 +3,12 @@ import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-pa
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {system, base} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const stylesOverride = {
   panelContainer: createStyles({
     height: px2rem(320),
-    backgroundColor: base.soap100,
+    backgroundColor: system.color.bg.alt.soft,
     position: 'relative',
   }),
   panelContent: createStyles({

package/dist/mdx/react/_examples/mdx/examples/Table/WithSelectableRows.tsx

@@ -6,7 +6,7 @@ import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {createComponent, generateUniqueId} from '@workday/canvas-kit-react/common';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {createStencil, createStyles} from '@workday/canvas-kit-styling';
-import {base} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 const selectableRowStencil = createStencil({
   base: {
@@ -16,14 +16,14 @@ const selectableRowStencil = createStencil({
   modifiers: {
     isSelected: {
       true: {
-        backgroundColor: base.blueberry100,
+        backgroundColor: system.color.bg.primary.soft,
       },
     },
   },
 });
 
 const tableHeaderStyles = createStyles({
-  backgroundColor: base.soap100,
+  backgroundColor: system.color.bg.alt.soft,
 });
 
 const tableCellStyles = createStyles({

package/dist/mdx/react/_examples/mdx/examples/common/FilterListWithLiveStatus.tsx

@@ -3,7 +3,7 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {system, base} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
 const fruits = [
@@ -18,8 +18,8 @@ const fruits = [
 ];
 
 const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${base.cantaloupe400}`,
-  backgroundColor: base.cantaloupe100,
+  border: `${px2rem(1)} solid ${system.color.border.caution.strong}`,
+  backgroundColor: system.color.bg.caution.default,
   padding: system.space.x2,
 });
 

package/dist/mdx/react/_examples/mdx/examples/common/VisibleLiveRegion.tsx

@@ -4,12 +4,12 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
-import {system, base} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
 const liveRegionStyle = createStyles({
-  border: `${px2rem(1)} solid ${base.cantaloupe400}`,
-  backgroundColor: base.cantaloupe100,
+  border: `${px2rem(1)} solid ${system.color.bg.caution.stronger}`,
+  backgroundColor: system.color.bg.caution.default,
   padding: system.space.x4,
   display: 'block',
   margin: system.space.x4 + ' 0',