@workday/canvas-kit-preview-react 12.5.0-1046-next.0 → 12.5.0

package/dist/es6/status-indicator/lib/StatusIndicator.js

@@ -7,31 +7,31 @@ import { systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { StatusIndicatorIcon } from './StatusIndicatorIcon';
 import { StatusIndicatorLabel } from './StatusIndicatorLabel';
 const statusIndicatorStencil = createStencil({
-    base: { name: "zid71g", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);" },
+    base: { name: "ckem1g", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);outline:0.0625rem solid transparent;" },
     modifiers: {
         gray: {
-            high: { name: "zid71k", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
-            low: { name: "zid71l", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
+            high: { name: "ckem1k", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
+            low: { name: "ckem1l", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
         },
         orange: {
-            high: { name: "zid71m", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
-            low: { name: "zid71n", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
+            high: { name: "ckem1m", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
+            low: { name: "ckem1n", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
         },
         blue: {
-            high: { name: "zid71o", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
-            low: { name: "zid71p", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
+            high: { name: "ckem1o", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
+            low: { name: "ckem1p", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
         },
         green: {
-            high: { name: "zid71q", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
-            low: { name: "zid71r", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
+            high: { name: "ckem1q", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
+            low: { name: "ckem1r", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
         },
         red: {
-            high: { name: "zid71s", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
-            low: { name: "zid71t", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
+            high: { name: "ckem1s", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
+            low: { name: "ckem1t", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
         },
         transparent: {
-            high: { name: "zid71u", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
-            low: { name: "zid71v", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
+            high: { name: "ckem1u", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
+            low: { name: "ckem1v", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
         }
     }
 }, "status-indicator-1a565e");

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js

@@ -6,7 +6,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 const statusIndicatorLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "zid71f", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
+    base: { name: "ckem1f", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
     defaultModifiers: { typeLevel: 'subtext.large' }
 }, "status-indicator-label-fbd39a");
 export const StatusIndicatorLabel = createComponent('span')({

package/information-highlight/lib/InformationHighlight.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {createContainer} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
+import {cssVar, createStencil, handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 import {InformationHighlightHeading} from './parts/Heading';
@@ -20,6 +20,7 @@ export const informationHighlightStencil = createStencil({
     rowGap: system.space.x2,
     padding: system.space.x4,
     borderRadius: system.shape.x1,
+    outline: `${px2rem(1)} solid transparent`,
   },
   modifiers: {
     informational: {

package/loading-sparkles/lib/LoadingSparkles.tsx

@@ -67,6 +67,13 @@ const loadingSparklesIconStyles = createStyles({
   '&:nth-child(3)': {
     animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (2/3))`,
   },
+  // for Windows high contrast desktop themes
+  '@media (prefers-contrast: more)': {
+    '.wd-sparkle-fill': {
+      color: 'currentColor',
+      fill: 'currentColor',
+    },
+  },
 });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "12.5.0-1046-next.0",
+  "version": "12.5.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^12.5.0-1046-next.0",
-    "@workday/canvas-kit-styling": "^12.5.0-1046-next.0",
+    "@workday/canvas-kit-react": "^12.5.0",
+    "@workday/canvas-kit-styling": "^12.5.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "@workday/design-assets-types": "^0.2.8"
@@ -58,5 +58,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "3350db5e9a6aa32c04b6bad66fb7638b61010650"
+  "gitHead": "3f9fe28cbb758a0a56d3f9db5cee2a29509f0cd2"
 }

package/side-panel/lib/SidePanel.tsx

@@ -6,6 +6,7 @@ import {jsx, keyframes, CSSObject} from '@emotion/react';
 import {colors, depth} from '@workday/canvas-kit-react/tokens';
 import {SidePanelContext} from './hooks';
 import {SidePanelToggleButton} from './SidePanelToggleButton';
+import {px2rem} from '@workday/canvas-kit-styling';
 
 export type SidePanelVariant = 'standard' | 'alternate';
 export type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
@@ -99,6 +100,7 @@ const Panel = styled('section')({
   position: 'relative',
   boxSizing: 'border-box',
   height: '100%',
+  outline: `${px2rem(1)} solid transparent`,
 });
 
 export const SidePanel = createComponent('section')({

package/status-indicator/lib/StatusIndicator.tsx

@@ -38,6 +38,7 @@ const statusIndicatorStencil = createStencil({
     borderRadius: system.shape.half,
     height: px2rem(20),
     padding: `${system.space.zero} ${system.space.x1}`,
+    outline: `${px2rem(1)} solid transparent`,
   },
   modifiers: {
     gray: {