@workday/canvas-kit-react 16.0.0-alpha.0462-next.0 → 16.0.0-alpha.0464-next.0

package/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())}
+      />
+    );
   },
 });

package/tooltip/lib/TooltipContainer.tsx

@@ -54,34 +54,28 @@ export const tooltipContainerStencil = createStencil({
     tooltipTransformOriginVertical: '',
   },
   base: ({tooltipTransformOriginHorizontal, tooltipTransformOriginVertical}) => ({
-    // ...system.legacy.type.subtext.md
-    // components do not support spreading for legacy type token
-    fontFamily: system.fontFamily.default,
-    fontWeight: system.fontWeight.normal,
-    fontSize: system.legacy.fontSize.subtext.md,
-    lineHeight: system.legacy.lineHeight.subtext.md,
-    letterSpacing: system.legacy.letterSpacing.subtext.md,
+    ...system.legacy.type.subtext.lg,
     display: 'inline-flex',
     position: 'relative',
-    padding: system.legacy.padding.sm,
-    color: system.color.fg.inverse,
+    padding: `${px2rem(6)} ${system.legacy.padding.sm}`,
+    color: system.color.fg.default,
     animationName: tooltipAnimation,
     animationDuration: '150ms',
     animationTimingFunction: 'ease-out',
     transformOrigin: `${tooltipTransformOriginVertical} ${tooltipTransformOriginHorizontal}`,
+    margin: system.legacy.gap.xs,
     a: {
-      color: system.color.fg.inverse,
+      color: system.color.fg.default,
       textDecoration: 'underline',
     },
     // use :before vs margin to increase the tooltip hit-box
     '&:before': {
       content: '""',
-      borderRadius: system.legacy.shape.md,
-      outline: `${px2rem(1)} solid transparent`,
-      outlineOffset: `-${px2rem(1)}`,
+      borderRadius: system.legacy.shape.full,
+      border: `${px2rem(1)} solid ${system.color.border.default}`,
       zIndex: -1,
-      margin: system.legacy.gap.xs,
-      backgroundColor: system.legacy.color.surface.contrast.default,
+      margin: 0,
+      backgroundColor: system.legacy.color.surface.default,
       position: 'absolute',
       top: 0,
       left: 0,
@@ -108,14 +102,15 @@ export const tooltipContainerStencil = createStencil({
     '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
       bottom: calc.negate(base.legacy.size50),
     },
+
+    '@media (forced-colors: active)': {
+      outline: `${px2rem(1)} solid CanvasText`,
+    },
   }),
   modifiers: {
     elementHasFocus: {
       true: {
-        padding: calc.subtract(system.legacy.padding.md, calc.divide(system.legacy.padding.xxs, 2)),
-        '&:before': {
-          margin: base.legacy.size75,
-        },
+        margin: px2rem(6),
       },
     },
   },