@workday/canvas-kit-react 16.0.0-alpha.0484-next.0 → 16.0.0-alpha.0486-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "16.0.0-alpha.0484-next.0",
+  "version": "16.0.0-alpha.0486-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -53,9 +53,9 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0484-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0484-next.0",
-    "@workday/canvas-system-icons-web": "4.0.4",
+    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0486-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0486-next.0",
+    "@workday/canvas-system-icons-web": "5.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.7",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "3e56c1d93edfd1fe6f2c896ce52884919f1df7f5"
+  "gitHead": "8be87645060c8ea1b56dc5bebceecc64fa33bfc2"
 }

package/pill/lib/Pill.tsx

@@ -35,13 +35,9 @@ export const pillStencil = createStencil({
     flexDirection: 'row',
     alignItems: 'center',
     borderRadius: system.legacy.shape.sm,
-    fontFamily: system.fontFamily.default,
-    fontSize: system.legacy.fontSize.subtext.lg,
-    letterSpacing: system.legacy.letterSpacing.subtext.lg,
-    lineHeight: system.legacy.lineHeight.subtext.sm, // ensure correct line height when there's no elements and just text
+    ...system.legacy.type.subtext.md,
     boxShadow: 'none',
     outline: 'none',
-    fontWeight: system.fontWeight.medium,
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
     width: 'fit-content',
@@ -53,7 +49,7 @@ export const pillStencil = createStencil({
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    [buttonStencil.vars.background]: system.legacy.color.surface.alt.strong,
+    [buttonStencil.vars.background]: system.legacy.color.surface.alt.default,
     [buttonStencil.vars.border]: system.color.border.transparent,
     [buttonStencil.vars.label]: system.color.fg.strong,
     [systemIconStencil.vars.color]: 'currentColor',
@@ -61,14 +57,14 @@ export const pillStencil = createStencil({
 
     '&:has(span)': {
       display: 'flex',
-      lineHeight: system.legacy.lineHeight.subtext.lg, // ensure correct line height
+      lineHeight: system.legacy.lineHeight.subtext.md, // ensure correct line height
     },
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.alt.strong,
-        fallback: system.color.bg.alt.strong,
+        color: system.legacy.color.surface.alt.default,
+        fallback: system.legacy.color.surface.alt.default,
         mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.hover,
+        mixinValue: '0.0392',
       }),
       [buttonStencil.vars.border]: system.color.border.transparent,
       [buttonStencil.vars.label]: system.color.fg.stronger,
@@ -77,12 +73,12 @@ export const pillStencil = createStencil({
     },
     '&:active, &.active': {
       [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.alt.strong,
-        fallback: system.color.bg.alt.stronger,
+        color: system.legacy.color.surface.alt.default,
+        fallback: system.legacy.color.surface.alt.default,
         mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.pressed,
+        mixinValue: '0.0745',
       }),
-      [buttonStencil.vars.label]: system.color.fg.strong,
+      [buttonStencil.vars.label]: system.color.fg.stronger,
       [systemIconStencil.vars.color]: 'currentColor',
       [pillCountStencil.vars.borderColor]: 'transparent',
     },
@@ -100,10 +96,11 @@ export const pillStencil = createStencil({
       }),
     },
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: system.legacy.color.surface.alt.strong,
-      [buttonStencil.vars.label]: system.color.fg.disabled,
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
+      [buttonStencil.vars.background]: system.legacy.color.surface.alt.default,
+      [buttonStencil.vars.label]: system.color.fg.strong,
       [systemIconStencil.vars.color]: 'currentColor',
-      [pillCountStencil.vars.backgroundColor]: system.legacy.color.surface.alt.strong,
+      [pillCountStencil.vars.backgroundColor]: system.legacy.color.surface.alt.default,
       [pillCountStencil.vars.borderColor]: 'transparent',
     },
   }),
@@ -113,6 +110,7 @@ export const pillStencil = createStencil({
         border: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
         cursor: 'default',
         [buttonStencil.vars.background]: system.color.bg.default,
+        [buttonStencil.vars.label]: system.color.fg.default,
         '&:hover, &.hover': {
           borderColor: system.legacy.color.border.default,
           [buttonStencil.vars.background]: system.color.bg.default,
@@ -136,19 +134,19 @@ export const pillStencil = createStencil({
         },
         '&:hover, &.hover': {
           [buttonStencil.vars.background]: colorSpace.darken({
-            color: system.legacy.color.surface.alt.strong,
-            fallback: system.color.bg.alt.strong,
+            color: system.legacy.color.surface.alt.default,
+            fallback: system.legacy.color.surface.alt.default,
             mixinColor: system.legacy.color.surface.overlay.mixin,
-            mixinValue: system.legacy.opacity.surface.hover,
+            mixinValue: '0.0392',
           }),
           [pillCountStencil.vars.backgroundColor]: system.legacy.color.surface.transparent,
         },
         '&:active, &.active': {
           [buttonStencil.vars.background]: colorSpace.darken({
-            color: system.legacy.color.surface.alt.strong,
-            fallback: system.color.bg.alt.stronger,
+            color: system.legacy.color.surface.alt.default,
+            fallback: system.legacy.color.surface.alt.default,
             mixinColor: system.legacy.color.surface.overlay.mixin,
-            mixinValue: system.legacy.opacity.surface.pressed,
+            mixinValue: '0.0745',
           }),
           [pillCountStencil.vars.backgroundColor]: system.legacy.color.surface.transparent,
         },

package/pill/lib/PillIcon.tsx

@@ -13,7 +13,7 @@ export const pillIconStencil = createStencil({
   extends: systemIconStencil,
   base: {
     marginInlineStart: calc.negate(system.legacy.gap.xs),
-    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.sm,
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.xs,
     flex: '0 0 auto',
   },
 });

package/pill/lib/PillIconButton.tsx

@@ -1,5 +1,5 @@
 import {buttonStencil} from '@workday/canvas-kit-react/button';
-import {createSubcomponent, focusRing} from '@workday/canvas-kit-react/common';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
@@ -19,34 +19,40 @@ export const pillIconButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
     marginInlineEnd: calc.negate(px2rem(7)), // visually pull in the pill to the right size  by -7px
-    marginInlineStart: calc.negate(px2rem(2)), // visually create space between label and the button by -2px
-    borderRadius: px2rem(2),
-    height: system.legacy.size.xxs,
-    width: system.legacy.size.xxs,
+    marginInlineStart: 0, // leave room for the 24x24 focus ring
+    [buttonStencil.vars.borderRadius]: system.legacy.shape.sm,
+    height: system.legacy.size.xxxs,
+    width: system.legacy.size.xxxs,
     padding: 0,
     overflow: 'visible',
     flex: '0 0 auto',
     [buttonStencil.vars.border]: system.color.border.transparent,
     [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
 
-    [systemIconStencil.vars.color]: system.color.fg.strong,
-    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.sm,
+    [systemIconStencil.vars.color]: system.color.fg.default,
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.xs,
     '::after': {
       content: '""',
-      height: system.legacy.size.sm,
-      width: system.legacy.size.sm,
+      boxSizing: 'border-box',
       position: 'absolute',
-      left: calc.negate(px2rem(7)),
-      bottom: calc.negate(px2rem(7)),
+      top: calc.negate(px2rem(5)),
+      right: calc.negate(px2rem(5)),
+      bottom: calc.negate(px2rem(5)),
+      left: calc.negate(px2rem(5)),
       margin: 0,
       pointerEvents: 'all',
+      borderRadius: system.legacy.shape.sm,
+      borderStyle: 'solid',
+      borderWidth: px2rem(2),
+      borderColor: 'transparent',
     },
 
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.border]: system.color.border.transparent,
-      ...focusRing({
-        innerColor: system.color.border.transparent,
-      }),
+      boxShadow: 'none',
+      '::after': {
+        borderColor: system.legacy.color.brand.border.primary,
+      },
     },
     '&:hover, &.hover': {
       [buttonStencil.vars.border]: system.color.border.transparent,
@@ -56,7 +62,7 @@ export const pillIconButtonStencil = createStencil({
     },
     '&:disabled, &.disabled': {
       [buttonStencil.vars.border]: system.color.border.transparent,
-      [systemIconStencil.vars.color]: system.color.fg.disabled,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
     },
   },
 });

package/skeleton/lib/parts/SkeletonHeader.tsx

@@ -2,12 +2,12 @@ import {createComponent} from '@workday/canvas-kit-react/common';
 import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-import {SkeletonShape} from './SkeletonShape';
+import {SkeletonShape, skeletonSurfaceFillStencil} from './SkeletonShape';
 
 export interface SkeletonHeaderProps extends CSProps {
   /**
    * The background color of the skeleton
-   * @default `system.color.bg.alt.strong`
+   * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
    */
   backgroundColor?: string;
   /**
@@ -23,14 +23,14 @@ export interface SkeletonHeaderProps extends CSProps {
 }
 
 export const skeletonHeaderStencil = createStencil({
+  extends: skeletonSurfaceFillStencil,
   vars: {
     width: '',
     height: '',
     backgroundColor: '',
   },
-  base: ({width, backgroundColor, height}) => ({
-    backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading),
-    borderRadius: system.legacy.shape.md,
+  base: ({width, height}) => ({
+    borderRadius: system.legacy.shape.sm,
     height: cssVar(height, system.legacy.size.xs),
     width: width,
     marginBlockEnd: system.legacy.size.xxxs,

package/skeleton/lib/parts/SkeletonShape.tsx

@@ -2,6 +2,23 @@ import {createComponent} from '@workday/canvas-kit-react/common';
 import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
+/** Default Surface/Shimmer fill for skeleton placeholders (Shape, Header, Text lines). */
+export const skeletonSurfaceFillStencil = createStencil({
+  vars: {
+    backgroundColor: '',
+  },
+  base: ({backgroundColor}) => ({
+    background: cssVar(
+      backgroundColor,
+      `linear-gradient(to left, ${system.legacy.color.surface.alt.strong}, ${system.legacy.color.surface.loading})`
+    ),
+    border: `${px2rem(1)} solid transparent`,
+    '@media (forced-colors: active)': {
+      borderColor: 'CanvasText',
+    },
+  }),
+});
+
 export interface SkeletonShapeProps extends CSProps {
   /**
    *  The width of the shape in `px` or `%`.
@@ -20,20 +37,20 @@ export interface SkeletonShapeProps extends CSProps {
   borderRadius?: number | string;
   /**
    * The background color of the skeleton
-   * @default `system.color.bg.alt.strong`
+   * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
    */
   backgroundColor?: string;
 }
 
 export const skeletonShapeStencil = createStencil({
+  extends: skeletonSurfaceFillStencil,
   vars: {
     width: '',
     height: '',
     borderRadius: '',
     backgroundColor: '',
   },
-  base: ({width, height, borderRadius, backgroundColor}) => ({
-    backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading),
+  base: ({width, height, borderRadius}) => ({
     borderRadius: cssVar(borderRadius, '0'),
     height: cssVar(height, '100%'),
     width: width,

package/skeleton/lib/parts/SkeletonText.tsx

@@ -1,7 +1,9 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {CSProps, createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
+import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
+import {skeletonSurfaceFillStencil} from './SkeletonShape';
+
 export interface SkeletonTextProps extends CSProps {
   /**
    * The number of "lines" that SkeletonText will display. If there is more than one line, the last line will have a width of `60%`.
@@ -10,25 +12,29 @@ export interface SkeletonTextProps extends CSProps {
   lineCount?: number;
   /**
    * The background color of the skeleton
-   * @default `system.color.bg.alt.strong`
+   * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
    */
   backgroundColor?: string;
 }
 
-export const skeletonTextStencil = createStencil({
+export const skeletonTextLineStencil = createStencil({
+  extends: skeletonSurfaceFillStencil,
   vars: {
     backgroundColor: '',
   },
-  base: ({backgroundColor}) => ({
+  base: () => ({
+    height: system.legacy.size.xxxs,
+    // We do not have a `gap` token for 0.75rem so `padding` is being used here
+    marginBlockEnd: system.legacy.padding.sm,
+    borderRadius: system.legacy.shape.xxxl,
+    width: '100%',
+    display: 'block',
+  }),
+});
+
+export const skeletonTextStencil = createStencil({
+  base: () => ({
     marginBlockEnd: system.legacy.size.xs,
-    '& [data-part="skeleton-text-lines"]': {
-      backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.loading),
-      height: system.legacy.size.xxxs,
-      // We do not have a `gap` token for 0.75rem so `padding` is being used here
-      marginBlockEnd: system.legacy.padding.sm,
-      borderRadius: system.legacy.shape.md,
-      width: '100%',
-    },
     '& [data-part="skeleton-text-lines"]:last-child': {
       width: '60%',
     },
@@ -40,9 +46,13 @@ export const SkeletonText = createComponent('div')({
   Component: ({backgroundColor, lineCount = 2, ...elemProps}: SkeletonTextProps, ref, Element) => {
     const lines = new Array(lineCount).fill(null);
     return lineCount > 0 ? (
-      <Element ref={ref} {...handleCsProp(elemProps, skeletonTextStencil({backgroundColor}))}>
+      <Element ref={ref} {...handleCsProp(elemProps, skeletonTextStencil())}>
         {lines.map((_value, index) => (
-          <div data-part={'skeleton-text-lines'} key={index}></div>
+          <div
+            data-part="skeleton-text-lines"
+            key={index}
+            {...handleCsProp({}, skeletonTextLineStencil({backgroundColor}))}
+          />
         ))}
       </Element>
     ) : null;