@workday/canvas-kit-react 10.3.0-640-next.0 → 10.3.0-646-next.0

package/dist/es6/common/lib/styles/focusRing.js

@@ -1,8 +1,17 @@
 import { keyframes } from '@emotion/react';
 import { canvas } from '@workday/canvas-kit-react/tokens';
+import { cssVar } from '@workday/canvas-kit-styling';
 import { defaultCanvasTheme } from '../theming/index';
 function calculateFocusRing({ width, separation, animate, inset, innerColor, outerColor, }) {
     let boxShadow, innerWidth, outerWidth;
+    if (innerColor && innerColor.startsWith('--')) {
+        // eslint-disable-next-line no-param-reassign
+        innerColor = innerColor;
+    }
+    if (outerColor && outerColor.startsWith('--')) {
+        // eslint-disable-next-line no-param-reassign
+        outerColor = outerColor;
+    }
     switch (inset) {
         case 'outer':
             innerWidth = width + separation;

package/dist/es6/layout/lib/utils/mergeStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CAmCxC"}
+{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CAmCxC"}

package/dist/es6/layout/lib/utils/mergeStyles.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @emotion/no-vanilla
 import { css } from '@emotion/css';
 import { handleCsProp } from '@workday/canvas-kit-styling';
 import { boxStyleFn } from '../Box';

package/dist/es6/radio/lib/Radio.js

@@ -85,31 +85,17 @@ const RadioInput = styled('input')({
             borderWidth: '2px',
             borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
             boxShadow: 'none',
-            ...focusRing({
-                width: variant === 'inverse' ? 2 : 0,
-                separation: 0,
-                animate: false,
-                innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
-                outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
-            }),
+            ...{ boxShadow: `0 0 0 ${0} ${variant === 'inverse' ? colors.blackPepper400 : undefined}, 0 0 0 calc(${variant === 'inverse' ? 2 : 0} + ${0}) ${variant === 'inverse' ? colors.frenchVanilla100 : undefined}` },
         },
     },
     '&:checked:focus ~ div:first-of-type': {
-        ...focusRing({
-            separation: 2,
-            width: 2,
-            innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
-            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-        }),
+        ...{ boxShadow: `0 0 0 ${2} ${variant === 'inverse' ? colors.blackPepper400 : undefined}, 0 0 0 calc(${2} + ${2}) ${variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline}` },
         borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
         borderWidth: '2px',
     },
     ...mouseFocusBehavior({
         '&:focus ~ div:first-of-type': {
-            ...focusRing({
-                width: 0,
-                outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-            }),
+            ...{ boxShadow: `0 0 0 ${"0px"} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${0} + ${"0px"}) ${variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline}` },
             borderWidth: '1px',
             borderColor: checked
                 ? variant === 'inverse'

package/dist/es6/select/lib/Select.js

@@ -9,7 +9,7 @@ import { useSelectModel } from './hooks/useSelectModel';
 import { useSelectCard } from './hooks/useSelectCard';
 import { useSelectInput } from './hooks/useSelectInput';
 import { createStyles } from '@workday/canvas-kit-styling';
-const selectInputStyles = createStyles({ name: "it9e12", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
+const selectInputStyles = createStyles({ name: "l2q812", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,

package/dist/es6/switch/lib/Switch.js

@@ -31,7 +31,7 @@ const SwitchInput = styled('input')({
         '&:focus': {
             outline: 'none',
             '& ~ div:first-of-type': {
-                ...focusRing({ separation: 2, animate: false }, theme),
+                ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
             },
         },
         '& ~ div:first-of-type': {
@@ -41,7 +41,7 @@ const SwitchInput = styled('input')({
           0 0 0 5px ${errorColors.outer}`,
         },
         '&:focus ~ div:first-of-type': {
-            ...focusRing({ separation: 2, animate: false }, theme),
+            ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
         },
     };
     return {

package/dist/es6/tabs/lib/TabsItem.js

@@ -31,7 +31,7 @@ export const StyledTabItem = styled(Box.as('button'))(({ theme }) => ({
     },
     '&:focus': {
         outline: `none`,
-        ...focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
+        ...{ boxShadow: `inset 0 0 0 ${2} ${"--cnvs-brand-common-focus-outline"} inset 0 0 0 calc(${0} + ${2}) ${"--cnvs-base-palette-french-vanilla-100"}` },
     },
     '&:disabled, &[aria-disabled]': {
         color: colors.licorice100,

package/layout/lib/utils/mergeStyles.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @emotion/no-vanilla
 import {css} from '@emotion/css';
 import {CSToPropsInput, handleCsProp} from '@workday/canvas-kit-styling';
 import {boxStyleFn} from '../Box';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.3.0-640-next.0",
+  "version": "10.3.0-646-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",
@@ -50,8 +50,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.3.0-640-next.0",
-    "@workday/canvas-kit-styling": "^10.3.0-640-next.0",
+    "@workday/canvas-kit-popup-stack": "^10.3.0-646-next.0",
+    "@workday/canvas-kit-styling": "^10.3.0-646-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "cf296483a8e64ec53f135f394703bff587f85ad6"
+  "gitHead": "99b5f95ef4d26c34b68bfb57d27a74bd468948e5"
 }