@workday/canvas-kit-docs 16.0.0-alpha.0490-next.0 → 16.0.0-alpha.0491-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)
@@ -254,11 +254,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 +324,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 +659,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"`.
 

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.0491-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.0491-next.0",
+    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0491-next.0",
+    "@workday/canvas-kit-react": "^16.0.0-alpha.0491-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0491-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.11",
     "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": "46f6ffe99425371997fcc5ad1821235567db140b"
 }