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

package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.d.ts

@@ -0,0 +1,2 @@
+export declare const StorybookInformationHighlight: ({ variant, emphasis, title, description, link, linkText, isExternal, }: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../mdx/tokens/StorybookInformationHighlight/index.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,6BAA6B,2EAQvC,GAAG,4CAaL,CAAC"}

package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalHyperlink } from '@workday/canvas-kit-react/button';
+import { InformationHighlight } from '@workday/canvas-kit-preview-react/information-highlight';
+import { Unstyled } from '@storybook/blocks';
+export const StorybookInformationHighlight = ({ variant, emphasis, title, description, link, linkText, isExternal, }) => {
+    return (_jsx(Unstyled, { children: _jsxs(InformationHighlight, { variant: variant, emphasis: emphasis, children: [_jsx(InformationHighlight.Icon, {}), _jsx(InformationHighlight.Heading, { children: title }), _jsx(InformationHighlight.Body, { children: description }), _jsx(InformationHighlight.Link, { as: isExternal && ExternalHyperlink, href: link, children: linkText })] }) }));
+};

package/dist/mdx/labs-react/ai-assistant-ingress-button/AiAssistantIngressButton.mdx

@@ -0,0 +1,35 @@
+import {SymbolDoc, Specifications, ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
+import {AiAssistantIngressButton} from '@workday/canvas-kit-labs-react/ai-assistant-ingress-button';
+import Basic from './examples/Basic';
+import Inverse from './examples/Inverse';
+
+# AI Assistant Ingress Button
+
+CTA to open and close AI assistant
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+
+## Usage
+
+### Basic Example
+
+You can click to toggle the AI assistant.
+
+<ExampleCodeBlock code={Basic} />
+
+### Inverse Example
+
+The Button can also be used on dark backgrounds.
+
+<ExampleCodeBlock code={Inverse} />
+
+
+## Component API
+
+<SymbolDoc name="AiAssistantIngressButton" hideDescription />

package/dist/mdx/labs-react/ai-assistant-ingress-button/examples/Basic.tsx

@@ -0,0 +1,16 @@
+import {useState} from 'react';
+
+import {AiAssistantIngressButton} from '@workday/canvas-kit-labs-react/ai-assistant-ingress-button';
+
+export default () => {
+  const [toggled, setToggled] = useState(false);
+  return (
+    <div>
+      <AiAssistantIngressButton
+        aria-label={toggled ? 'Hide AI Assistant' : 'Show AI Assistant'}
+        onClick={() => setToggled(!toggled)}
+        toggled={toggled}
+      />
+    </div>
+  );
+};

package/dist/mdx/labs-react/ai-assistant-ingress-button/examples/Inverse.tsx

@@ -0,0 +1,24 @@
+import {useState} from 'react';
+
+import {AiAssistantIngressButton} from '@workday/canvas-kit-labs-react/ai-assistant-ingress-button';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const darkBackground = createStyles({
+  background: system.color.bg.contrast.strong,
+  padding: system.space.x8,
+});
+
+export default () => {
+  const [toggled, setToggled] = useState(false);
+  return (
+    <div className={darkBackground}>
+      <AiAssistantIngressButton
+        variant="inverse"
+        onClick={() => setToggled(!toggled)}
+        aria-label={toggled ? 'Hide Assistant' : 'Show Assistant'}
+        toggled={toggled}
+      />
+    </div>
+  );
+};

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {slugify} from '@workday/canvas-kit-react/common';
 import {isCursor} from '@workday/canvas-kit-react/collection';
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
@@ -46,13 +47,15 @@ export default () => {
 
       // wait for stabilization of state
       requestAnimationFrame(() => {
-        document.querySelector<HTMLElement>(`#${model.state.id}-${nextId}`)?.focus();
+        document
+          .querySelector<HTMLElement>(`[id="${slugify(`${model.state.id}-${nextId}`)}"]`)
+          ?.focus();
       });
     }
   };
 
   const onKeyDown = (id: string) => (e: React.KeyboardEvent<HTMLElement>) => {
-    if (e.key === 'Delete' && id !== 'add') {
+    if ((e.key === 'Delete' || e.key === 'Backspace') && id !== 'add') {
       setTabs(tabs.filter(item => item.id !== id));
       const model = modelRef.current;
       removeItem(id, model);

package/dist/mdx/react/tokens/Tokens.mdx

@@ -5,15 +5,16 @@ import Overview from './examples/Overview';
 
 # Tokens
 
-<InformationHighlight>
+<InformationHighlight variant="caution" className="sb-unstyled" cs={{p: {margin: 0}}}>
   <InformationHighlight.Icon />
-  <InformationHighlight.Heading>New Tokens Package Available!</InformationHighlight.Heading>
+  <InformationHighlight.Heading>React tokens have been deprecated!</InformationHighlight.Heading>
   <InformationHighlight.Body>
-    The tokens documented below are still available in Canvas Kit but are being replaced by our new
-    Canvas Tokens Web package. We encourage you to begin moving to our new tokens.
+    The tokens documented below are deprecated and will be removed in a future release. You must
+    migrate to the new Canvas Tokens Web package to ensure continued support and access to the
+    latest tokens.
   </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs">
-    View the Docs
+  <InformationHighlight.Link href="/?path=/docs/guides-tokens-migration-overview--docs">
+    See migration guide
   </InformationHighlight.Link>
 </InformationHighlight>
 

package/dist/mdx/tokens/TokenMigrationCodemod.mdx

@@ -0,0 +1,217 @@
+# Canvas Kit Tokens Migration Codemod
+
+This codemod helps migrate Canvas Kit tokens from `@workday/canvas-kit-react/tokens` to
+`@workday/canvas-tokens-web` v2 format. It automatically transforms token usage in your codebase to
+use the new token system.
+
+## Important Notes
+
+- **Run on Small Batches**: We recommend running the codemod on a small number of files in batches
+  instead of your entire repository all at once. This makes the changes easier to review and allows
+  you to catch issues more quickly with less frustration. This allows for easier manual review of
+  the changes and helps catch any potential issues early.
+- **Use System Tokens**: You should generally always opt to use system (semantic) tokens over base
+  tokens. This clarifies the token's intent, simplifies future updates to new tokens, and maintains
+  better consistency across your codebase.
+- **Codemod Limitations**: The codemod does not cover every possible token usage or migration
+  scenario. Please review the codemod's changes and be prepared to update tokens as needed. Some
+  manual changes will be required, especially for:
+  - Custom or dynamic token usages
+  - Inline styles, string templates, or non-standard patterns
+  - Updating documentation, comments, or non-code files
+  - Ensuring correct semantic token choices for your specific use case
+
+## Required Dependencies
+
+The codemod requires the following packages to be installed:
+
+- `@workday/canvas-kit-styling`
+- `@workday/canvas-tokens-web`. See
+  [instructions here](/docs/guides-tokens-migration-installation-setup--docs).
+
+## Installation
+
+You can run the codemod using npx:
+
+```sh
+npx @workday/canvas-tokens-codemod v2 [path]
+```
+
+Or install the package and run it directly. But remember to uninstall the package after you have
+completed the upgrade.
+
+```sh
+yarn add @workday/canvas-tokens-codemod
+canvas-tokens-codemod v2 [path]
+```
+
+> Note: These codemods only work on .js, .jsx, .ts, and .tsx extensions. You may need to make some
+> manual changes in other file types (.json, .mdx, .md, etc.).
+
+> Note: You may need to run your linter after executing the codemod, as its resulting formatting
+> (spacing, quotes, etc.) may not match your project's styling.
+
+## What This Codemod Does
+
+The codemod transforms the following tokens:
+
+- [Colors](#colors)
+- [Depth](#depth)
+- [Shape](#shape)
+- [Space](#space)
+- [Typography](#typography)
+
+### Colors
+
+- Converts color tokens from `@workday/canvas-kit-react/tokens` to the new system
+- Transforms color usage in `createStyles`, `createStencil`, and CSS objects
+- Maps old color tokens to new semantic color tokens
+- Adds required imports for `cssVar` and new token packages
+
+#### Color Token Mappings to System
+
+##### Background Colors
+
+| Old Token                 | New Token                           |
+| ------------------------- | ----------------------------------- |
+| `colors.frenchVanilla100` | `system.color.bg.default`           |
+| `colors.blueberry200`     | `system.color.bg.primary.soft`      |
+| `colors.blueberry400`     | `system.color.bg.primary.default`   |
+| `colors.blueberry500`     | `system.color.bg.primary.strong`    |
+| `colors.blueberry600`     | `system.color.bg.primary.stronger`  |
+| `colors.cantaloupe100`    | `system.color.bg.caution.softer`    |
+| `colors.cantaloupe400`    | `system.color.bg.caution.default`   |
+| `colors.cantaloupe500`    | `system.color.bg.caution.strong`    |
+| `colors.cantaloupe600`    | `system.color.bg.caution.stronger`  |
+| `colors.cinnamon100`      | `system.color.bg.critical.softer`   |
+| `colors.cinnamon500`      | `system.color.bg.critical.default`  |
+| `colors.cinnamon600`      | `system.color.bg.critical.strong`   |
+| `colors.greenApple100`    | `system.color.bg.positive.softer`   |
+| `colors.greenApple400`    | `system.color.bg.positive.default`  |
+| `colors.greenApple500`    | `system.color.bg.positive.strong`   |
+| `colors.greenApple600`    | `system.color.bg.positive.stronger` |
+| `colors.licorice100`      | `system.color.bg.muted.softer`      |
+| `colors.licorice200`      | `system.color.bg.muted.soft`        |
+| `colors.licorice300`      | `system.color.bg.muted.default`     |
+| `colors.licorice500`      | `system.color.bg.muted.strong`      |
+| `colors.soap100`          | `system.color.bg.alt.softer`        |
+| `colors.soap200`          | `system.color.bg.alt.soft`          |
+| `colors.soap300`          | `system.color.bg.alt.default`       |
+| `colors.soap400`          | `system.color.bg.alt.strong`        |
+| `colors.soap500`          | `system.color.bg.alt.stronger`      |
+| `colors.blackPepper400`   | `system.color.bg.contrast.default`  |
+| `colors.blackPepper500`   | `system.color.bg.contrast.strong`   |
+
+##### Foreground Colors
+
+| Old Token                 | New Token                          |
+| ------------------------- | ---------------------------------- |
+| `colors.blackPepper300`   | `system.color.fg.default`          |
+| `colors.blackPepper400`   | `system.color.fg.strong`           |
+| `colors.blackPepper500`   | `system.color.fg.stronger`         |
+| `colors.blueberry400`     | `system.color.fg.primary.default`  |
+| `colors.blueberry500`     | `system.color.fg.primary.strong`   |
+| `colors.cinnamon500`      | `system.color.fg.critical.default` |
+| `colors.frenchVanilla100` | `system.color.fg.inverse`          |
+| `colors.licorice100`      | `system.color.fg.disabled`         |
+| `colors.licorice200`      | `system.color.fg.muted.soft`       |
+| `colors.licorice300`      | `system.color.fg.muted.default`    |
+| `colors.licorice400`      | `system.color.fg.muted.strong`     |
+| `colors.licorice500`      | `system.color.fg.muted.stronger`   |
+
+##### Border Colors
+
+| Old Token                 | New Token                              |
+| ------------------------- | -------------------------------------- |
+| `colors.blackPepper400`   | `system.color.border.contrast.default` |
+| `colors.blackPepper500`   | `system.color.border.contrast.strong`  |
+| `colors.blueberry400`     | `system.color.border.primary.default`  |
+| `colors.cantaloupe400`    | `system.color.border.caution.default`  |
+| `colors.cantaloupe600`    | `system.color.border.caution.strong`   |
+| `colors.cinnamon500`      | `system.color.border.critical.default` |
+| `colors.frenchVanilla100` | `system.color.border.inverse`          |
+| `colors.licorice100`      | `system.color.border.input.disabled`   |
+| `colors.licorice200`      | `system.color.border.input.default`    |
+| `colors.licorice500`      | `system.color.border.input.strong`     |
+| `colors.soap300`          | `system.color.border.input.inverse`    |
+| `colors.soap400`          | `system.color.border.divider`          |
+| `colors.soap500`          | `system.color.border.container`        |
+
+##### Other Colors
+
+| Old Token                      | New Token                           |
+| ------------------------------ | ----------------------------------- |
+| `colors.blackPepper600`        | `system.color.static.black`         |
+| `colors.toastedMarshmallow600` | `system.color.static.gold.stronger` |
+
+### Depth
+
+- Converts depth tokens to objects with `boxShadow` property
+- Handles special case for depth[0] (converts to `boxShadow: "none"`)
+- Transforms depth tokens in nested CSS selectors
+- Handles depth tokens in component props
+
+### Shape
+
+- Converts border radius tokens to
+  [new shape tokens](/docs/guides-tokens-migration-mapping-tables-system--docs#shape-border-radius-token-migration)
+- Transforms `borderRadius.m` to `system.shape.x1`
+
+### Space
+
+- Converts all space tokens to the new system tokens
+- Maps old space values to
+  [a new scale](/docs/guides-tokens-migration-mapping-tables-system--docs#space)
+
+### Typography
+
+- Converts font family tokens to
+  [new system tokens](docs/guides-tokens-migration-mapping-tables-system--docs#font-family)
+- Transforms font size tokens to
+  [new system tokens](docs/guides-tokens-migration-mapping-tables-system--docs#font-size)
+- Converts font weight tokens to
+  [new system tokens](docs/guides-tokens-migration-mapping-tables-system--docs#font-weight)
+- Handles type levels and their properties
+- Transforms typography in component styles
+
+## What to Expect
+
+After running the codemod, your code will:
+
+1. Use the new token system with `cssVar` and system tokens
+2. Have updated imports for the new token packages
+3. Use semantic color tokens instead of direct color values
+4. Have consistent spacing and typography using the new scale
+
+## Example Transformations
+
+### Before
+
+```typescript
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+const styles = createStyles({
+  background: colors.frenchVanilla100,
+  color: colors.blueberry400,
+});
+```
+
+### After
+
+```typescript
+import {cssVar} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const styles = createStyles({
+  background: system.color.bg.default,
+  color: system.color.fg.primary.default,
+});
+```
+
+## Summary
+
+- The codemod handles various edge cases including aliased imports and nested CSS selectors
+- It preserves existing code structure while updating token usage
+- It adds necessary imports automatically
+- It handles template literals and spread operators in CSS objects
+- It maintains proper type safety through the transformation process

package/dist/mdx/tokens/TokenMigrationFinal.mdx

@@ -0,0 +1,201 @@
+# Q&A and more
+
+## Common Pitfalls & Solutions
+
+### Forgetting CSS Variable Imports
+
+**Problem**: Styles don't apply because CSS variables aren't defined. **Solution**: Ensure you've
+imported the CSS variable files at your app's top level.
+
+### Not Using var() Wrapper
+
+**Problem**: CSS properties don't work with raw token values. **Solution**: Use `createStyles` or
+`cssVar` utility instead of direct token references.
+
+### Mixing Old and New Tokens
+
+**Problem**: Inconsistent styling and potential conflicts. **Solution**: Migrate completely to new
+tokens rather than mixing systems.
+
+### Using Base Tokens for Everything
+
+**Problem**: Missing out on theming capabilities. **Solution**: Prefer system tokens for their
+semantic meaning and theming support.
+
+## Incremental Migration Strategy
+
+1. **Start with New Projects**: Use new tokens for all new components and features
+2. **Component-by-Component**: Migrate existing components one at a time
+3. **Test Thoroughly**: Ensure visual consistency after each component migration
+4. **Update Style Patterns**: Migrate from style props to `createStyles` where needed
+5. **Consolidate Imports**: Remove old token imports once migration is complete
+
+## Complete Migration Examples
+
+<br />
+
+### Example 1: Card Component Migration
+
+#### Before (Old Tokens)
+
+```javascript
+import {colors, space, borderRadius, type, depth} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const cardStyles = createStyles({
+  padding: space.l,
+  backgroundColor: colors.frenchVanilla100,
+  borderColor: colors.soap500,
+  borderRadius: borderRadius.m,
+  color: colors.blackPepper300,
+  depth: 1,
+  ...type.levels.body.medium,
+});
+
+const headerStyles = createStyles({
+  color: colors.blackPepper500,
+  marginBottom: space.s,
+  ...type.levels.heading.small,
+});
+
+const errorTextStyles = createStyles({
+  color: colors.cinnamon500,
+  ...type.levels.subtext.large,
+});
+```
+
+#### After (New Tokens - Semantic System Approach)
+
+```javascript
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const cardStyles = createStyles({
+  padding: system.space.x8,
+  backgroundColor: system.color.bg.default,
+  border: `solid ${px2rem(1)}`,
+  borderColor: system.color.border.container,
+  borderRadius: system.shape.x1,
+  color: system.color.text.default,
+  boxShadow: system.depth[1],
+  ...system.type.body.medium,
+});
+
+const headerStyles = createStyles({
+  color: system.color.text.default,
+  marginBottom: system.space.x4,
+  ...system.type.heading.small,
+});
+
+const errorTextStyles = createStyles({
+  color: system.color.text.critical.default,
+  ...system.type.subtext.large,
+});
+```
+
+### Example 2: Form Input Migration
+
+#### Before (Old Tokens)
+
+```javascript
+import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
+
+const inputStyles = createStyles({
+  padding: `${space.xs} ${space.s}`,
+  backgroundColor: colors.frenchVanilla100,
+  borderColor: colors.soap400,
+  borderRadius: borderRadius.s,
+  color: colors.blackPepper400,
+  '&:focus': {
+    borderColor: colors.blueberry400,
+    backgroundColor: colors.frenchVanilla100,
+  },
+  '&.error': {
+    borderColor: colors.cinnamon500,
+    backgroundColor: colors.cinnamon100,
+  },
+  '&:disabled': {
+    backgroundColor: colors.soap200,
+    color: colors.soap600,
+  },
+});
+```
+
+#### After (New Tokens - System Approach)
+
+```javascript
+import {system} from '@workday/canvas-tokens-web';
+
+const inputStyles = createStyles({
+  padding: `${system.space.x3} ${system.space.x4}`,
+  backgroundColor: system.color.bg.default,
+  borderColor: system.color.border.default,
+  borderRadius: system.shape.half,
+  color: system.color.text.default,
+  '&:focus': {
+    borderColor: system.color.border.contrast,
+    backgroundColor: system.color.bg.default,
+  },
+  '&.error': {
+    borderColor: system.color.border.critical.default,
+    backgroundColor: system.color.bg.critical.subtle,
+  },
+  '&:disabled': {
+    backgroundColor: system.color.bg.disabled,
+    color: system.color.text.disabled,
+  },
+});
+```
+
+### Example 3: Button Migration with Brand Colors
+
+#### Before (Old Tokens)
+
+```javascript
+import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
+import {theme} from '@emotion/react';
+
+const primaryButtonStyles = createStyles({
+  padding: `${space.xs} ${space.m}`,
+  backgroundColor: theme.canvas.palette.primary.main,
+  borderColor: theme.canvas.palette.primary.main,
+  borderRadius: borderRadius.m,
+  color: theme.canvas.palette.primary.contrast,
+  '&:hover': {
+    backgroundColor: theme.canvas.palette.primary.dark,
+  },
+});
+```
+
+#### After (New Tokens - Brand + System)
+
+```javascript
+import {system, brand} from '@workday/canvas-tokens-web';
+
+const primaryButtonStyles = createStyles({
+  padding: `${system.space.x3} ${system.space.x6}`,
+  backgroundColor: brand.primary.base,
+  borderColor: brand.primary.base,
+  borderRadius: system.shape.x1,
+  color: brand.primary.accent,
+  '&:hover': {
+    backgroundColor: brand.primary.dark,
+  },
+});
+```
+
+## Next Steps
+
+After completing the token migration:
+
+- Review your components for consistent use of system tokens
+- Consider implementing theming if not already in place
+- Update your team's coding standards to reflect new token usage
+- Monitor for any visual regressions and address them promptly
+
+## Resources
+
+- [Canvas Tokens Documentation](https://canvas.workday.com/styles/tokens/)
+- [Canvas Kit Styling Documentation](https://workday.github.io/canvas-kit/?path=/docs/features-styling-welcome--page)
+- [Token Migration Discussion](https://github.com/Workday/canvas-tokens/discussions/77)
+- [Canvas Kit GitHub Repository](https://github.com/Workday/canvas-kit)