@workday/canvas-kit-docs 16.0.0-alpha.0490-next.0 → 16.0.0-alpha.0492-next.0

package/dist/es6/lib/docs.js

@@ -46188,7 +46188,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -46196,7 +46196,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -131275,7 +131275,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -131283,7 +131283,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -155576,7 +155576,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -155584,7 +155584,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -209280,7 +209280,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -209288,7 +209288,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -240638,7 +240638,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -240646,7 +240646,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -293888,7 +293888,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -293896,7 +293896,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -326547,7 +326547,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -326555,7 +326555,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -360450,7 +360450,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -360458,7 +360458,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -391271,7 +391271,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -391279,7 +391279,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -454341,7 +454341,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": [
               {
                 "kind": "string",
-                "value": "borderless"
+                "value": "alt"
               },
               {
                 "kind": "string",
@@ -454349,7 +454349,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               }
             ]
           },
-          "description": "The variant of the Card. Can be `default`, `borderless` or `tonal`.",
+          "description": "The variant of the Card. Can be `alt`, `tonal` or default.",
           "declarations": [
             {
               "name": "variant",
@@ -470342,6 +470342,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": 100
           }
         },
+        {
+          "kind": "property",
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "string",
+            "value": "alt"
+          },
+          "description": "The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tooltip/lib/Tooltip.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "cs",
@@ -471219,6 +471236,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": false
           }
         },
+        {
+          "kind": "property",
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "string",
+            "value": "alt"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tooltip/lib/TooltipContainer.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "children",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -23,9 +23,9 @@ export const packageJSONFile = `{
     "@workday/canvas-kit-react": "15.1.4",
     "@workday/canvas-kit-react-fonts": "^15.1.4",
     "@workday/canvas-kit-styling": "15.1.4",
-    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-system-icons-web": "5.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.1",
-    "@workday/canvas-tokens-web": "4.2.0"
+    "@workday/canvas-tokens-web": "4.4.0-beta.11"
   },
   "devDependencies": {
     "@types/react": "^18.2.59",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -24,9 +24,9 @@ export const packageJSONFile = `{
     "@workday/canvas-kit-react": "15.1.4",
     "@workday/canvas-kit-react-fonts": "^15.1.4",
     "@workday/canvas-kit-styling": "15.1.4",
-    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-system-icons-web": "5.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.1",
-    "@workday/canvas-tokens-web": "4.2.0"
+    "@workday/canvas-tokens-web": "4.4.0-beta.11"
   },
   "devDependencies": {
     "@types/react": "^18.2.59",

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

@@ -20,8 +20,9 @@ Soon to be...
   - [Avatar](#avatar)
   - [Buttons](#buttons)
     - [Delete Button Outline Variant](#delete-button-outline-variant)
-  - [Card](#card)
-  - [Expandable](#expandable)
+	- [Container Components](#container-components)
+	  - [Card](#card)
+    - [Expandable](#expandable)
   - [Indicators](#indicators)
     - [Banner](#banner)
     - [Count Badge](#count-badge)
@@ -29,7 +30,6 @@ Soon to be...
     - [Pill](#pill)
     - [Skeleton](#skeleton)
     - [Status Indicator](#status-indicator)
-  - [Form Field](#form-field)
   - [Inputs](#inputs)
     - [Accessibility: Checked-State Contrast](#accessibility-checked-state-contrast)
     - [Checkbox](#checkbox)
@@ -55,6 +55,7 @@ Soon to be...
   - [Tooltip](#tooltip)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
+- [Fonts](#fonts)
 - [Deprecations](#deprecations)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -254,11 +255,69 @@ import {DeleteButton} from '@workday/canvas-kit-react/button';
 <DeleteButton variant="outline">Delete</DeleteButton>;
 ```
 
-### Card
+### Container Components
 
-**PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014)
+**PR:** [#4088](https://github.com/Workday/canvas-kit/pull/4088)
 
-#### Visual Updates
+#### Alt Variant Support
+
+Several container components now support an `alt` variant that provides an elevated surface appearance:
+
+- `Menu.Card` - Can use `variant="alt"` for elevated menu styling
+- `Dialog.Card` - Can use `variant="alt"` for elevated dialog styling
+- `Popup.Card` - Can use `variant="alt"` for elevated popup styling
+- `Toast` - Can use `variant="alt"` for elevated toast styling
+- `Tooltip` - Can use `variant="alt"` for elevated tooltip styling
+
+The `alt` variant uses `system.sana.color.surface.elevated` background with inverse borders, providing visual hierarchy and depth to these components when placed on an alt background.
+
+```tsx
+// Examples of using the alt variant
+<Menu.Card variant="alt">
+  <Menu.List>...</Menu.List>
+</Menu.Card>
+
+<Dialog.Card variant="alt">
+  <Dialog.Heading>Dialog Title</Dialog.Heading>
+  <Dialog.Body>Content</Dialog.Body>
+</Dialog.Card>
+
+<Toast variant="alt">
+  <Toast.Body>
+    <Toast.Message>Notification message</Toast.Message>
+  </Toast.Body>
+</Toast>
+```
+
+#### Card
+
+**PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014), [#4088](https://github.com/Workday/canvas-kit/pull/4088)
+
+##### Variant Changes
+
+The `Card` component's variants have been updated:
+- **Removed:** The `borderless` variant has been removed and replaced with `alt`
+- **New:** The `alt` variant provides an elevated surface with inverse borders
+- **Updated:** The default variant now has a visible border
+- The `tonal` variant now uses a `system.legacy.color.surface.alt.strong` background.
+
+**Note:** If you were previously using `variant="borderless"`, you should use `variant="alt"` instead. While the styles are different, both where intended to be used on an `alt` background.
+
+🤖 The codemod will automatically update `variant="borderless"` to `variant="alt"`.
+
+```tsx
+// v15
+<Card variant="borderless">
+  <Card.Body>Content</Card.Body>
+</Card>
+
+// v16
+<Card variant="alt">
+  <Card.Body>Content</Card.Body>
+</Card>
+```
+
+##### Visual Updates
 
 - `Card.Heading` now defaults to `body.small` type level (previously `body.large`). If your design
   requires a larger heading, you can override the `typeLevel` prop on `Card.Heading`.
@@ -266,10 +325,12 @@ import {DeleteButton} from '@workday/canvas-kit-react/button';
   `padding.sm`).
 - Card's border radius is now managed via the new `cornerShapeStencil` (see
   [New Utilities](#new-utilities)).
+- The default variant now includes a visible border (`system.color.border.default`).
+- The `alt` variant uses an elevated surface color (`system.sana.color.surface.elevated`) with inverse borders.
 
-### Expandable
+#### Expandable
 
-#### Visual Updates
+##### Visual Updates
 
 - `Expandable.Target` border radius changed from `shape.xxl` (24px, pill) to `shape.lg` (12px), now
   managed via `cornerShapeStencil` (see [New Utilities](#new-utilities)).
@@ -599,7 +660,7 @@ Menu icons are now smaller to align with Sana Canvas specs. In v15, `Menu.Item.I
 `size` prop and fell back to the `SystemIcon` default of `lg` (24px / 1.5rem). In v16, all icons
 rendered through `Menu.Item.Icon` and `Menu.Option.Icon` use `size="md"` (20px / 1.25rem).
 
-The selected checkmark in `Menu.Option` now uses `checkIcon` at `size="xs"` instead of
+The selected checkmark in `Menu.Option` now uses `checkIcon` at `size="md"` instead of
 `checkSmallIcon` at the previous 24px default. The nested submenu chevron in `Submenu.TargetItem`
 also changed from `chevronRightSmallIcon` to `chevronRightIcon` at `size="md"`.
 
@@ -827,8 +888,15 @@ export const myStencil = createStencil({
 });
 ```
 
-`Card`, `Expandable` (`Expandable.Target`), `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`), `MultiSelect`, and
-`Table` (`BaseTable`, `Table`) extend this stencil for their rounded corners.
+`Card`, `Expandable` (`Expandable.Target`), `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`),
+`MultiSelect`, and `Table` (`BaseTable`, `Table`) extend this stencil for their rounded corners.
+
+## Fonts
+
+Sana Canvas is a new theme available in v16, enabled by setting `data-theme="sana-canvas"` on
+`<html>` (or a scoped ancestor element). See our
+[Fonts guide](https://workday.github.io/canvas-kit/?path=/docs/guides-fonts--docs) for instructions
+on setting up the Sana Sans font required by this theme.
 
 ## Deprecations
 

package/dist/mdx/FONTS.mdx

@@ -0,0 +1,128 @@
+# Fonts
+
+Canvas Kit doesn't include fonts by default. Which font you need, and how to load it, depends on
+whether your application has the [Sana Canvas theme](#sana-sans) (`data-theme="sana-canvas"`)
+enabled.
+
+- If the Sana Canvas theme **is** enabled, use [Sana Sans](#sana-sans).
+- If the Sana Canvas theme **is not** enabled (the default/legacy Canvas theme), configure your app
+  to use [Roboto](#roboto) instead.
+
+## Sana Sans
+
+Sana Sans should be applied whenever the
+[Sana Canvas theme](#using-sana-sans-with-the-sana-canvas-theme) is enabled in your application.
+
+### Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+### Usage
+
+The `fonts` module, exported from `@workday/canvas-kit-react`, makes importing font files simple so
+you know you're using the correct font in your environment. We use Sana Sans for most languages we
+support at Workday.
+
+> Note: If your application environment already provides Sana Sans, you don't need to inject it as
+> in the example below. Otherwise, follow these steps to inject it.
+
+You can inject our CSS `@font-face` styles into your application by using `injectGlobal`. We prefer
+this approach over `@emotion/react`'s [Global](https://emotion.sh/docs/globals) component that
+injects the styles at runtime.
+
+```ts
+import {fonts} from '@workday/canvas-kit-react/fonts';
+import {injectGlobal} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+injectGlobal({
+  ...fonts,
+  'html, body': {
+    fontFamily: system.fontFamily.default,
+    margin: 0,
+    minHeight: '100vh',
+  },
+});
+```
+
+### Hosting Fonts
+
+We currently host Sana Sans on AWS S3, and the `fonts` module includes `@font-face` rules to connect
+the proper font files.
+
+### Variable Fonts
+
+Sana Sans is a
+[variable font](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts). That
+means instead of importing multiple static files, you can import a single, dynamic file that
+supports multiple font weights and styles. It also provides more flexibility and customization than
+traditional, static fonts. But you should be able to use it identically to how you've been using
+other fonts.
+
+- **Family**: Sana Sans
+- **Format**: TrueType variable font
+- **Weight range**: 100–700 (Regular through Bold)
+- **Styles**: normal, italic
+- **Source**: `https://design.workdaycdn.com/assets/fonts/Sana-Sans/SanaSansLCG05-Variable.ttf`
+
+### Monospace Font
+
+The `fonts` module also includes IBM Plex Mono, used for `system.fontFamily.mono` under the Sana
+Canvas theme.
+
+- **Family**: IBM Plex Mono
+- **Format**: WOFF2
+- **Weight**: 400 (Regular)
+- **Styles**: normal
+- **Source**: `https://design.workdaycdn.com/assets/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2`
+
+### Using Sana Sans with the Sana Canvas Theme
+
+The Sana Canvas theme is enabled by setting `data-theme="sana-canvas"` on `<html>` (or a scoped
+ancestor element). This switches the `--cnvs-sys-font-family-default` token
+(`system.fontFamily.default`) to reference `'Sana Sans VF'` via the cascade in
+`@workday/canvas-tokens-web/css/sana/_variables.css`.
+
+To use this theme, you also must import `@workday/canvas-tokens-web/css/sana/_variables.css` in
+addition to the other token CSS files. See the
+[Getting Started guide](https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs)
+for a full tokens CSS file import example.
+
+> **Note:** This requires `@workday/canvas-tokens-web` `4.4.0` or later. If you're on an older
+> version, upgrade `@workday/canvas-tokens-web` first.
+
+Once the theme's font-family token and the loaded `@font-face` share the same family name, no
+additional CSS override is required — import and use the `fonts` module exactly as described in
+[Usage](#usage) above, and Sana Sans will render automatically wherever `data-theme="sana-canvas"`
+is set.
+
+## Roboto
+
+If your application doesn't have the Sana Canvas theme enabled, install
+`@workday/canvas-kit-react-fonts` to load Roboto instead. This module also includes Roboto Mono,
+used for `system.fontFamily.mono`.
+
+### Installation
+
+```sh
+yarn add @workday/canvas-kit-react-fonts
+```
+
+### Usage
+
+```ts
+import {fonts} from '@workday/canvas-kit-react-fonts';
+import {injectGlobal} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+injectGlobal({
+  ...fonts,
+  'html, body': {
+    fontFamily: system.fontFamily.default,
+    margin: 0,
+    minHeight: '100vh',
+  },
+});
+```

package/dist/mdx/react/card/card.mdx

@@ -1,6 +1,6 @@
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
-import Borderless from './examples/Borderless';
+import Alt from './examples/Alt';
 import Tonal from './examples/Tonal';
 import WithCustomStyles from './examples/CustomStyles';
 import WithStencils from './examples/Stencils';
@@ -29,13 +29,11 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
-### Borderless Example
+### Alt Example
 
-The `borderless` variant removes the border from the Card, creating a cleaner appearance while
-maintaining the same internal spacing and structure. Use this variant when placing cards on colored
-backgrounds where you want the card to blend seamlessly without borders or shadows.
+The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.
 
-<ExampleCodeBlock code={Borderless} />
+<ExampleCodeBlock code={Alt} />
 
 ### Tonal Example
 
@@ -50,6 +48,8 @@ grayish background to create visual separation from the page background.
 Card and its subcomponents support custom styling via the `cs` prop. For more information, check our
 ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
+**Note:** The card uses the `background` css property to style the background color. If you want to override the background, you can use the `[cardStencil.vars.background]` css variable.
+
 <ExampleCodeBlock code={WithCustomStyles} />
 
 ## Stencils

package/dist/mdx/react/card/examples/{Borderless.tsx → Alt.tsx}

@@ -1,16 +1,18 @@
+import React from 'react';
+
 import {Card} from '@workday/canvas-kit-react/card';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = createStyles({
-  background: system.color.surface.raised,
+  background: system.color.bg.alt.default,
   padding: system.padding.md,
 });
 
 export default () => {
   return (
     <div className={styles}>
-      <Card variant="borderless">
+      <Card variant="alt">
         <Card.Heading>Canvas Supreme</Card.Heading>
         <Card.Body>
           Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,

package/dist/mdx/react/card/examples/CustomStyles.tsx

@@ -1,4 +1,4 @@
-import {Card} from '@workday/canvas-kit-react/card';
+import {Card, cardStencil} from '@workday/canvas-kit-react/card';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -6,6 +6,8 @@ const customCardStyles = createStyles({
   boxShadow: system.depth[2],
   maxWidth: px2rem(320),
   padding: system.padding.sm,
+  color: system.color.fg.default,
+  [cardStencil.vars.background]: system.color.surface.info.default,
 });
 
 export default () => (

package/dist/mdx/react/card/examples/Tonal.tsx

@@ -1,15 +1,22 @@
-import React from 'react';
-
 import {Card} from '@workday/canvas-kit-react/card';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styles = createStyles({
+  background: system.color.bg.default,
+  padding: system.padding.md,
+});
 
 export default () => {
   return (
-    <Card variant="tonal">
-      <Card.Heading>Canvas Supreme</Card.Heading>
-      <Card.Body>
-        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
-        onions, and oregano.
-      </Card.Body>
-    </Card>
+    <div className={styles}>
+      <Card variant="tonal">
+        <Card.Heading>Canvas Supreme</Card.Heading>
+        <Card.Body>
+          Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
+          onions, and oregano.
+        </Card.Body>
+      </Card>
+    </div>
   );
 };

package/dist/mdx/react/dialog/Dialog.mdx

@@ -1,6 +1,7 @@
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Focus from './examples/Focus';
+import Alt from './examples/Alt';
 
 # Canvas Kit Dialog
 
@@ -33,6 +34,12 @@ shows how Dialog manages focus in and out of the component.
 > **Accessibility Note**: Focus redirect **will not** have any effect on the reading order of a
 > screen reader.
 
+### Alt Example
+
+The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.
+
+<ExampleCodeBlock code={Alt} />
+
 ## Accessibility
 
 `Dialog` composes the popup stack with `useInitialFocus`, `useReturnFocus`, `useCloseOnEscape`,

package/dist/mdx/react/dialog/examples/Alt.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Dialog} from '@workday/canvas-kit-react/dialog';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const altBackgroundStyles = createStyles({
+  background: system.color.bg.alt.default,
+  padding: system.padding.xl,
+  borderRadius: system.shape.md,
+  minHeight: px2rem(400),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export default () => {
+  return (
+    <div className={altBackgroundStyles}>
+      <Dialog>
+        <Dialog.Target as={SecondaryButton}>Open Dialog</Dialog.Target>
+        <Dialog.Popper>
+          <Dialog.Card variant="alt">
+            <Dialog.CloseIcon aria-label="Close" />
+            <Dialog.Heading>Dialog with Alt Variant</Dialog.Heading>
+            <Dialog.Body>
+              This dialog uses the alt variant for proper contrast on colored backgrounds.
+            </Dialog.Body>
+            <Dialog.ButtonGroup>
+              <Dialog.CloseButton as={SecondaryButton}>Cancel</Dialog.CloseButton>
+              <Dialog.CloseButton>OK</Dialog.CloseButton>
+            </Dialog.ButtonGroup>
+          </Dialog.Card>
+        </Dialog.Popper>
+      </Dialog>
+    </div>
+  );
+};

package/dist/mdx/react/menu/Menu.mdx

@@ -1,6 +1,7 @@
 import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
+import Alt from './examples/Alt';
 import ContextMenu from './examples/ContextMenu';
 import Grouping from './examples/Grouping';
 import Icons from './examples/Icons';
@@ -33,6 +34,12 @@ yarn add @workday/canvas-kit-react
 `Menu` will automatically focus on the cursor item (first item by default). The `Menu` uses a menu
 model which composes a list model and a popup model and sets up accessibility features for you.
 
+### Alt Example
+
+The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.
+
+<ExampleCodeBlock code={Alt} />
+
 ### Context Menu
 
 <ExampleCodeBlock code={ContextMenu} />

package/dist/mdx/react/menu/examples/Alt.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const altBackgroundStyles = createStyles({
+  background: system.color.bg.alt.default,
+  padding: system.padding.xl,
+  borderRadius: system.shape.md,
+  minHeight: px2rem(300),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export default () => {
+  return (
+    <div className={altBackgroundStyles}>
+      <Menu>
+        <Menu.Target as={SecondaryButton}>Open Menu</Menu.Target>
+        <Menu.Popper>
+          <Menu.Card variant="alt">
+            <Menu.List>
+              <Menu.Item>First Item</Menu.Item>
+              <Menu.Item>Second Item</Menu.Item>
+              <Menu.Item>Third Item</Menu.Item>
+            </Menu.List>
+          </Menu.Card>
+        </Menu.Popper>
+      </Menu>
+    </div>
+  );
+};

package/dist/mdx/react/toast/examples/Alt.tsx

@@ -0,0 +1,22 @@
+import {Toast} from '@workday/canvas-kit-react/toast';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const styles = createStyles({
+  background: system.color.bg.alt.default,
+  padding: system.padding.md,
+});
+
+export default () => {
+  return (
+    <div className={styles}>
+      <Toast variant="alt">
+        <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
+        <Toast.Body>
+          <Toast.Message>Your workbook was successfully processed.</Toast.Message>
+        </Toast.Body>
+      </Toast>
+    </div>
+  );
+};

package/dist/mdx/react/toast/toast.mdx

@@ -2,6 +2,7 @@ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import {Toast} from '@workday/canvas-kit-react/toast';
 
 import Basic from './examples/Basic';
+import Alt from './examples/Alt';
 import RTL from './examples/RTL';
 import ToastAlert from './examples/ToastAlert';
 import ToastDialog from './examples/ToastDialog';
@@ -35,6 +36,12 @@ such as a successful action.
 
 <ExampleCodeBlock code={Basic} />
 
+### Alt Example
+
+The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.
+
+<ExampleCodeBlock code={Alt} />
+
 A `status` `Toast` will wrap the message within a `polite` ARIA live region with a `role` of
 `status`.
 

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -11,6 +11,7 @@ import LineClamp from './examples/LineClamp';
 import Muted from './examples/Muted';
 import Placements from './examples/Placements';
 import UseTooltip from './examples/UseTooltip';
+import Alt from './examples/Alt';
 
 
 # Canvas Kit React Tooltips
@@ -64,6 +65,12 @@ and focus events.
 
 <ExampleCodeBlock code={Default} />
 
+### Alt Example
+
+The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.
+
+<ExampleCodeBlock code={Alt} />
+
 ### Describing an Element
 
 <InformationHighlight variant={'caution'} className="sb-unstyled">

package/dist/mdx/react/tooltip/examples/Alt.tsx

@@ -0,0 +1,20 @@
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {xIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const customStyles = createStyles({
+  background: system.color.bg.alt.default,
+  padding: system.padding.xl,
+});
+
+export default () => {
+  return (
+    <div className={customStyles}>
+      <Tooltip title="Close" variant="alt">
+        <TertiaryButton icon={xIcon} aria-label="Close" />
+      </Tooltip>
+    </div>
+  );
+};

package/lib/stackblitzFiles/packageJSONFile.ts

@@ -24,9 +24,9 @@ export const packageJSONFile = `{
     "@workday/canvas-kit-react": "${version}",
     "@workday/canvas-kit-react-fonts": "^${version}",
     "@workday/canvas-kit-styling": "${version}",
-    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-system-icons-web": "5.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.1",
-    "@workday/canvas-tokens-web": "4.2.0"
+    "@workday/canvas-tokens-web": "4.4.0-beta.11"
   },
   "devDependencies": {
     "@types/react": "^18.2.59",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.0.0-alpha.0490-next.0",
+  "version": "16.0.0-alpha.0492-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,12 +47,12 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^16.0.0-alpha.0490-next.0",
-    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0490-next.0",
-    "@workday/canvas-kit-react": "^16.0.0-alpha.0490-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0490-next.0",
+    "@workday/canvas-kit-labs-react": "^16.0.0-alpha.0492-next.0",
+    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0492-next.0",
+    "@workday/canvas-kit-react": "^16.0.0-alpha.0492-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0492-next.0",
     "@workday/canvas-system-icons-web": "5.0.1",
-    "@workday/canvas-tokens-web": "4.4.0-beta.7",
+    "@workday/canvas-tokens-web": "4.4.0-beta.13",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "84f8bdfe0708c6a33b246744ae4827349c123303"
+  "gitHead": "27691d763b93d270f78808ca298848d405c888e1"
 }

package/dist/mdx/react/fonts/mdx/Fonts.mdx

@@ -1,46 +0,0 @@
-# Sana Sans Font
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-The fonts package makes importing font files simple so you know you're using the correct font in your environment. We use Sana Sans for most languages we support at Workday.
-
-> Note: If your application environment already provides Sana Sans, you don't need to inject it as in the example below. But this package is useful for testing, documentation, and development where you don't have the font readily available. This package is likely not appropriate to use in production environments due to how the font is [hosted](#hosting-fonts).
-
-You can inject our CSS `@font-face` styles into your application by using `injectGlobal`. We prefer this approach over `@emotion/react`'s [Global](https://emotion.sh/docs/globals) component that injects the styles at runtime.
-
-```ts
-import {injectGlobal} from '@workday/canvas-kit-styling';
-import {fonts} from '@workday/canvas-kit-react/fonts';
-import {system} from '@workday/canvas-tokens-web';
-
-injectGlobal(...fonts);
-injectGlobal({
-  'html, body': {
-    fontFamily: system.fontFamily.default,
-    margin: 0,
-    minHeight: '100vh',
-  },
-});
-```
-
-## Hosting Fonts
-
-We currently host Sana Sans through durable storage, and this package connects `@font-faces` to those font files. This keeps the package size minimal, while ensuring you don't have to worry about the wiring. But because durable storage is regionally-bound, you might consider using a CDN if your environment experiences degraded performance.
-
-## Variable Fonts
-
-Sana Sans is a [variable font](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts). That means instead of importing multiple static files, you can import a single, dynamic file that supports multiple font weights and styles. It also provides more flexibility and customization than traditional, static fonts. But you should be able to use it identically to how you've been using other fonts.
-
-### Sana Sans
-
-- **Family**: Sana Sans
-- **Format**: TrueType variable font
-- **Weight range**: 100–700 (Regular through Bold)
-- **Styles**: normal, italic
-- **Source**: `https://design.workdaycdn.com/assets/fonts/Sana-Sans/SanaSansLCG05-Variable.ttf`