feat: Update Toast and Tooltip styles to match Sana

modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md

@@ -16,7 +16,8 @@ Soon to be...
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
   - [Avatar](#avatar)
-  - [Buttons](#buttons) - [Delete Button Outline Variant](#delete-button-outline-variant)
+  - [Buttons](#buttons)
+    - [Delete Button Outline Variant](#delete-button-outline-variant)
   - [Card](#card)
   - [Inputs](#inputs)
     - [Accessibility: Checked-State Contrast](#accessibility-checked-state-contrast)
@@ -69,9 +70,10 @@ our team. We'd be very happy to walk you through the process to set you up for s
 
 ### Instructions
 
-The easiest way to run our codemod is to use `npx` in your terminal.```sh
-npx @workday/canvas-kit-codemod v16 [path]
-```
+The easiest way to run our codemod is to use `npx` in your terminal.```sh npx
+@workday/canvas-kit-codemod v16 [path]
+
+````
 
 Be sure to provide specific directories that need to be updated via the `[path]` argument. This
 decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
@@ -87,7 +89,7 @@ finished.
 yarn add @workday/canvas-kit-codemod --dev
 yarn canvas-kit-codemod v16 [path]
 yarn remove @workday/canvas-kit-codemod
-```
+````
 
 > **Note:** The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
 > manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
@@ -328,6 +330,34 @@ If you customize `brand.success.base` in your theme, please verify the following
 - Error and caution states no longer display a status background color; only the standard background
   is shown.
 
+### Toast
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+#### Visual Updates
+
+- Padding is now applied to the `Toast` container itself instead of being distributed across
+  `Toast.Body` and `Toast.Icon`.
+- Gap between the icon, body, and close icon is now `base.size150` (12px).
+- Shape uses `system.shape.xl`.
+- `Toast.Body` no longer has a gap between text and link.
+- `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
+  LTR).
+- `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
+
+### Tooltip
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+#### Visual Updates
+
+- The default tooltip has been restyled from a dark surface to a light surface.
+- A visible border (`system.color.border.default`) is now applied to the container, replacing the
+  previous transparent outline.
+- Shape is now fully rounded using `system.shape.full`.
+- Type level is now `subtext.lg` (previously `subtext.md`).
+- Padding and spacing have been adjusted to accommodate the new styling.
+
 ## New Utilities
 
 ### cornerShapeStencil
@@ -403,8 +433,8 @@ things you'll want to keep in mind.
   dependencies on your own.
   - We recommend upgrading dependencies before running the codemod.
   - Always review your `package.json` files to make sure your dependency versions look correct.
-- The codemod will not handle every breaking change in this upgrade. You will likely need to make some manual
-  changes to be compatible. Use our Upgrade Guide as a checklist.
+- The codemod will not handle every breaking change in this upgrade. You will likely need to make
+  some manual changes to be compatible. Use our Upgrade Guide as a checklist.
 - Codemods are not bulletproof.
   - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
   - As a safety precaution, we recommend committing the changes from the codemod as a single
@@ -417,9 +447,10 @@ our team. We'd be very happy to walk you through the process to set you up for s
 
 ### Instructions
 
-The easiest way to run our codemod is to use `npx` in your terminal.```sh
-npx @workday/canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
-```
+The easiest way to run our codemod is to use `npx` in your terminal.```sh npx
+@workday/canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
+
+````
 
 Be sure to provide specific directories that need to be updated via the `[path]` argument. This
 decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
@@ -435,11 +466,11 @@ finished.
 yarn add @workday/canvas-kit-codemod --dev
 yarn canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
 yarn remove @workday/canvas-kit-codemod
-```
+````
 
 > **Note**: The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
 > manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
 > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
 > your project conventions.
 
-No codemod transformations available for v16.
+No codemod transformations available for v16.

modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx

@@ -20,7 +20,8 @@ Soon to be...
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
   - [Avatar](#avatar)
-  - [Buttons](#buttons) - [Delete Button Outline Variant](#delete-button-outline-variant)
+  - [Buttons](#buttons)
+    - [Delete Button Outline Variant](#delete-button-outline-variant)
   - [Card](#card)
   - [Inputs](#inputs)
     - [Accessibility: Checked-State Contrast](#accessibility-checked-state-contrast)
@@ -334,6 +335,36 @@ If you customize `brand.success.base` in your theme, please verify the following
 - Error and caution states no longer display a status background color; only the standard background
   is shown.
 
+### Toast
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+#### Visual Updates
+
+- Padding is now applied to the `Toast` container itself instead of being distributed across
+  `Toast.Body` and `Toast.Icon`.
+- Gap between the icon, body, and close icon is now `base.size150` (12px).
+- Shape uses `system.shape.xl`.
+- `Toast.Body` no longer has a gap between text and link.
+- `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
+  LTR).
+- `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
+
+### Tooltip
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+#### Visual Updates
+
+- The default tooltip has been restyled from a dark surface to a light surface.
+- A visible border (`system.color.border.default`) is now applied to the container, replacing the
+  previous transparent outline.
+- Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
+  Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
+- Shape is now fully rounded using `system.shape.full`.
+- Type level is now `subtext.lg` (previously `subtext.md`).
+- Padding and spacing have been adjusted to accommodate the new styling.
+
 ## New Utilities
 
 ### cornerShapeStencil

modules/labs-react/kbd/stories/KBD.mdx

@@ -6,6 +6,7 @@ import {KBD} from '@workday/canvas-kit-labs-react/kbd';
 
 import KBDStoriesMeta from './KBD.stories';
 import {Basic} from './examples/Basic';
+import {InTooltip} from './examples/InTooltip';
 import {Items} from './examples/Items';
 import {RTL} from './examples/RTL';
 import {Size} from './examples/Size';
@@ -71,6 +72,13 @@ standard style or `plain` for a more minimal appearance. The `variant` is shared
 
 <ExampleCodeBlock code={Variant} />
 
+### In Tooltip
+
+`KBD` can be used inside a `Tooltip` to communicate the keyboard shortcut associated with an
+interactive control. Pair it with descriptive text so the shortcut is easy to understand.
+
+<ExampleCodeBlock code={InTooltip} />
+
 ## Accessibility
 
 `KBD` is **presentational and semantic text**. It renders a `kbd` element so assistive technology

modules/labs-react/kbd/stories/KBD.stories.tsx

@@ -2,6 +2,7 @@ import {Meta} from '@storybook/react';
 
 import mdxDoc from './KBD.mdx';
 import {Basic as BasicExample} from './examples/Basic';
+import {InTooltip as InTooltipExample} from './examples/InTooltip';
 import {Items as ItemsExample} from './examples/Items';
 import {RTL as RTLExample} from './examples/RTL';
 import {Size as SizeExample} from './examples/Size';
@@ -36,3 +37,7 @@ export const Variant = {
 export const Items = {
   render: ItemsExample,
 };
+
+export const InTooltip = {
+  render: InTooltipExample,
+};

modules/labs-react/kbd/stories/examples/InTooltip.tsx

@@ -0,0 +1,38 @@
+import {KBD} from '@workday/canvas-kit-labs-react/kbd';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Subtext} from '@workday/canvas-kit-react/text';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {copyIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const flexContainer = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.xs,
+  p: {
+    margin: 0,
+  },
+});
+
+export const InTooltip = () => {
+  return (
+    <Tooltip
+      title={
+        <div className={flexContainer}>
+          <Subtext size="large">Copy to clipboard</Subtext>
+          <KBD>
+            <KBD.Item>
+              <KBD variant="plain">
+                <KBD.Item aria-label="Command">⌘</KBD.Item>
+                <KBD.Item>C</KBD.Item>
+              </KBD>
+            </KBD.Item>
+          </KBD>
+        </div>
+      }
+    >
+      <SecondaryButton icon={copyIcon} aria-keyshortcuts="Command+C" />
+    </Tooltip>
+  );
+};

modules/react/checkbox/lib/CheckboxContainer.tsx

@@ -43,7 +43,6 @@ const checkboxContainerStencil = createStencil({
   modifiers: {
     disabled: {
       true: ({labelPart}) => ({
-        opacity: system.opacity.disabled,
         [labelPart]: {
           cursor: 'default',
         },

modules/react/toast/lib/Toast.tsx

@@ -4,7 +4,7 @@ import {ExtractProps, createContainer} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {ToastBody} from './ToastBody';
 import {ToastCloseIcon} from './ToastCloseIcon';
@@ -52,9 +52,17 @@ const toastStencil = createStencil({
     display: 'flex',
     flexDirection: 'row',
     width: px2rem(360),
-    padding: 0,
-    gap: system.legacy.gap.xs,
+    paddingBlock: system.legacy.padding.sm,
+    paddingInline: `${system.legacy.padding.md} ${system.legacy.padding.xl}`,
+    gap: base.legacy.size150,
     borderRadius: system.legacy.shape.xl,
+    border: `${px2rem(1)} solid ${system.color.border.default}`,
+    backgroundColor: system.legacy.color.surface.default,
+    boxShadow: system.depth[3],
+
+    '@media (forced-colors: active)': {
+      outline: `${px2rem(1)} solid CanvasText`,
+    },
   },
 });
 

modules/react/toast/lib/ToastBody.tsx

@@ -2,7 +2,6 @@ import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {}
 
@@ -11,9 +10,8 @@ export const toastBodyStencil = createStencil({
     alignItems: 'flex-start',
     flexDirection: 'column',
     justifyContent: 'center',
-    paddingBlock: system.legacy.padding.md,
     flexGrow: 1,
-    gap: system.legacy.gap.xs,
+    gap: 0,
   },
 });
 

modules/react/toast/lib/ToastCloseIcon.tsx

@@ -1,13 +1,15 @@
 import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 
 export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {}
 
 export const toastCloseIconStencil = createStencil({
   base: {
-    position: 'relative',
+    position: 'absolute',
+    insetBlockStart: px2rem(2),
+    insetInlineEnd: px2rem(2),
   },
 });
 
@@ -18,7 +20,7 @@ export const ToastCloseIcon = createComponent('button')({
       <Popup.CloseIcon
         as={Element}
         ref={ref}
-        size="small"
+        size="extraSmall"
         {...mergeStyles(elemProps, toastCloseIconStencil())}
       />
     );

modules/react/toast/lib/ToastIcon.tsx

@@ -1,20 +1,26 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {component} from '@workday/canvas-tokens-web';
 
 export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {}
 
 export const toastIconStencil = createStencil({
   base: {
     alignSelf: 'start',
-    margin: `${system.legacy.gap.md} ${base.legacy.size150}`,
   },
 });
 
 export const ToastIcon = createComponent('div')({
   displayName: 'Toast.Icon',
   Component: (elemProps: ToastIconProps, ref, Element) => {
-    return <SystemIcon ref={ref} as={Element} {...handleCsProp(elemProps, toastIconStencil())} />;
+    return (
+      <SystemIcon
+        ref={ref}
+        as={Element}
+        size={component.legacy.systemIcon.size.md}
+        {...handleCsProp(elemProps, toastIconStencil())}
+      />
+    );
   },
 });

modules/react/toast/stories/examples/Basic.tsx

@@ -5,7 +5,7 @@ import {system} from '@workday/canvas-tokens-web';
 export const Basic = () => {
   return (
     <Toast>
-      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+      <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       </Toast.Body>

modules/react/toast/stories/examples/RTL.tsx

@@ -9,7 +9,7 @@ export const RTL = () => {
   return (
     <CanvasProvider dir="rtl">
       <Toast>
-        <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+        <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
         <Toast.Body>
           <Toast.Message>Your workbook was successfully processed.</Toast.Message>
         </Toast.Body>

modules/react/toast/stories/examples/ToastAlert.tsx

@@ -4,7 +4,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 export const ToastAlert = () => (
   <Toast mode="alert">
-    <Toast.Icon icon={exclamationCircleIcon} color={system.color.fg.warning.default} />
+    <Toast.Icon icon={exclamationCircleIcon} color={system.color.brand.fg.caution.default} />
     <Toast.Body>
       <Toast.Message>There was an error with your workbook.</Toast.Message>
     </Toast.Body>

modules/react/toast/stories/examples/ToastDialog.tsx

@@ -4,7 +4,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 export const ToastDialog = () => (
   <Toast mode="dialog" aria-label="notification">
-    <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+    <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
     <Toast.Body>
       <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       <Toast.Link href="#hreflink">Custom Link</Toast.Link>

modules/react/toast/stories/examples/WithActionLinkAndCloseIcon.tsx

@@ -7,7 +7,7 @@ export const WithActionLinkAndCloseIcon = () => {
 
   return (
     <Toast mode="dialog" aria-label="notification">
-      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+      <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully</Toast.Message>
         <Toast.Link href="#hyperlink">Custom Link</Toast.Link>

modules/react/toast/stories/examples/WithPopper.tsx

@@ -23,7 +23,7 @@ export const WithPopper = () => {
       <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>
       <Popper placement="bottom-end" open={open} anchorElement={containerRef}>
         <Toast mode="dialog" aria-label="notification">
-          <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+          <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
           <Toast.Body>
             <Toast.Message>Your workbook was successfully processed.</Toast.Message>
           </Toast.Body>