@workday/canvas-kit-react 16.0.0-alpha.0463-next.0 → 16.0.0-alpha.0465-next.0

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),
       },
     },
   },