@workday/canvas-kit-react 11.0.0-alpha.696-next.0 → 11.0.0-alpha.699-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/commonjs/badge/lib/CountBadge.js +1 -1
  2. package/dist/commonjs/button/lib/TertiaryButton.js +1 -1
  3. package/dist/commonjs/card/lib/CardHeading.js +1 -1
  4. package/dist/commonjs/checkbox/lib/CheckboxCheck.js +3 -3
  5. package/dist/commonjs/checkbox/lib/CheckboxInput.js +1 -1
  6. package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
  7. package/dist/commonjs/select/lib/Select.js +1 -1
  8. package/dist/commonjs/switch/lib/Switch.d.ts +2 -2
  9. package/dist/commonjs/switch/lib/Switch.d.ts.map +1 -1
  10. package/dist/commonjs/switch/lib/Switch.js +46 -90
  11. package/dist/es6/badge/lib/CountBadge.js +1 -1
  12. package/dist/es6/button/lib/TertiaryButton.js +1 -1
  13. package/dist/es6/card/lib/CardHeading.js +1 -1
  14. package/dist/es6/checkbox/lib/CheckboxCheck.js +3 -3
  15. package/dist/es6/checkbox/lib/CheckboxInput.js +1 -1
  16. package/dist/es6/common/lib/AccessibleHide.js +1 -1
  17. package/dist/es6/select/lib/Select.js +1 -1
  18. package/dist/es6/switch/lib/Switch.d.ts +2 -2
  19. package/dist/es6/switch/lib/Switch.d.ts.map +1 -1
  20. package/dist/es6/switch/lib/Switch.js +47 -91
  21. package/package.json +4 -4
  22. package/switch/lib/Switch.tsx +118 -107
package/dist/commonjs/badge/lib/CountBadge.js CHANGED
@@ -26,7 +26,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
26
26
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
27
27
  const grow = canvas_kit_styling_1.keyframes({ name: "b0dw69", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
28
28
  const countBadgeStencil = canvas_kit_styling_1.createStencil({
29
- base: { name: "n9a3hm", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.375rem;" },
29
+ base: { name: "10yvklm", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;" },
30
30
  modifiers: {
31
31
  modifiers: {
32
32
  default: { name: "ls097g", styles: "background:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
package/dist/commonjs/button/lib/TertiaryButton.js CHANGED
@@ -28,7 +28,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
28
28
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
29
29
  const tokens_1 = require("@workday/canvas-kit-react/tokens");
30
30
  const Button_1 = require("./Button");
31
- const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "o529iz", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0px;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}" });
31
+ const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "1ps4nqo", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}" });
32
32
  exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
33
33
  isThemeable: {
34
34
  true: canvas_kit_styling_1.createStyles({ name: "1t7d7ry", styles: "--cnvs-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));" }),
package/dist/commonjs/card/lib/CardHeading.js CHANGED
@@ -26,7 +26,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
26
26
  const text_1 = require("@workday/canvas-kit-react/text");
27
27
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
28
28
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
29
- const cardHeadingBaseStyles = canvas_kit_styling_1.createStyles({ name: "1oy61zb", styles: "font-weight:var(--cnvs-sys-font-weight-bold, 700);margin-bottom:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin-top:0px;" });
29
+ const cardHeadingBaseStyles = canvas_kit_styling_1.createStyles({ name: "qs1nz6", styles: "font-weight:var(--cnvs-sys-font-weight-bold, 700);margin-bottom:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin-top:0;" });
30
30
  exports.CardHeading = common_1.createComponent('h3')({
31
31
  displayName: 'Card.Heading',
32
32
  Component: ({ children, ...elemProps }, ref, Element) => {
package/dist/commonjs/checkbox/lib/CheckboxCheck.js CHANGED
@@ -28,13 +28,13 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
28
28
  const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
29
29
  const CheckBackground_1 = require("./CheckBackground");
30
30
  const checkboxCheckStencil = canvas_kit_styling_1.createStencil({
31
- base: { name: "e9m2ww", styles: "display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:0px;transform:scale(0.5);" },
31
+ base: { name: "1ei0szh", styles: "display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:0;transform:scale(0.5);" },
32
32
  modifiers: {
33
33
  modifiers: {
34
- true: { name: "11cckse", styles: "opacity:1px;transform:scale(1);" }
34
+ true: { name: "1exxrn1", styles: "opacity:1;transform:scale(1);" }
35
35
  },
36
36
  modifiers: {
37
- true: { name: "11cckse", styles: "opacity:1px;transform:scale(1);" }
37
+ true: { name: "1exxrn1", styles: "opacity:1;transform:scale(1);" }
38
38
  },
39
39
  modifiers: {
40
40
  inverse: { name: "18xh6xb", styles: "& > div{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}" }
package/dist/commonjs/checkbox/lib/CheckboxInput.js CHANGED
@@ -26,7 +26,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
26
26
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
27
27
  const CheckBackground_1 = require("./CheckBackground");
28
28
  const checkboxInputStencil = canvas_kit_styling_1.createStencil({
29
- base: { name: "44rtbm", styles: "border-radius:var(--cnvs-sys-shape-half, calc(0.25rem * 0.5));width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin:var(--cnvs-sys-space-zero, 0);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:0px;&:not(:disabled){cursor:pointer;}&:where(:hover, .hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-500, rgba(51,61,71,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&:disabled ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));opacity:1px;}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));background-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 0px var(--cnvs-brand-common-focus-outline);}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline, var(--cnvs-base-palette-blueberry-400));border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
29
+ base: { name: "ortu5v", styles: "border-radius:var(--cnvs-sys-shape-half, calc(0.25rem * 0.5));width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin:var(--cnvs-sys-space-zero, 0);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:0;&:not(:disabled){cursor:pointer;}&:where(:hover, .hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-500, rgba(51,61,71,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&:disabled ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));opacity:1;}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));background-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 0px var(--cnvs-brand-common-focus-outline);}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline, var(--cnvs-base-palette-blueberry-400));border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
30
30
  modifiers: {
31
31
  modifiers: {
32
32
  inverse: { name: "k4w4a2", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled, 0.4);}& ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&:disabled ~ div:first-of-type{background-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));opacity:var(--cnvs-sys-opacity-disabled, 0.4);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));background-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));box-shadow:0 0 0 0px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}}" }
package/dist/commonjs/common/lib/AccessibleHide.js CHANGED
@@ -39,7 +39,7 @@ exports.accessibleHide = {
39
39
  padding: 0,
40
40
  border: 0,
41
41
  };
42
- const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "1jqqftm", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
42
+ const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "i19yjz", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;" });
43
43
  /**
44
44
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
45
45
  */
package/dist/commonjs/select/lib/Select.js CHANGED
@@ -16,7 +16,7 @@ const useSelectCard_1 = require("./hooks/useSelectCard");
16
16
  const useSelectInput_1 = require("./hooks/useSelectInput");
17
17
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
18
18
  const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
19
- const hiddenSelectStyles = canvas_kit_styling_1.createStyles({ name: "1uxiz6e", styles: "position:absolute;top:0px;bottom:0px;left:0px;right:0px;opacity:0px;cursor:default;pointer-events:none;" });
19
+ const hiddenSelectStyles = canvas_kit_styling_1.createStyles({ name: "skcwps", styles: "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;cursor:default;pointer-events:none;" });
20
20
  exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
21
21
  modelHook: useSelectModel_1.useSelectModel,
22
22
  elemPropsHook: useSelectInput_1.useSelectInput,
package/dist/commonjs/switch/lib/Switch.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
- import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
3
- export interface SwitchProps extends Themeable {
2
+ import { ErrorType } from '@workday/canvas-kit-react/common';
3
+ export interface SwitchProps {
4
4
  /**
5
5
  * If true, set the Switch to the on state.
6
6
  * @default false
package/dist/commonjs/switch/lib/Switch.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAKT,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAwHD,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
1
+ {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA2ID,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
package/dist/commonjs/switch/lib/Switch.js CHANGED
@@ -22,107 +22,63 @@ Object.defineProperty(exports, "__esModule", { value: true });
22
22
  exports.Switch = void 0;
23
23
  const React = __importStar(require("react"));
24
24
  const common_1 = require("@workday/canvas-kit-react/common");
25
- const tokens_1 = require("@workday/canvas-kit-react/tokens");
26
- const circleSize = tokens_1.space.xs;
27
- const switchWidth = tokens_1.space.l;
28
- const switchHeight = tokens_1.space.s;
29
- const switchTapArea = tokens_1.space.l;
30
- const translateLength = tokens_1.space.s;
31
- const SwitchContainer = common_1.styled('div')({
32
- position: 'relative',
33
- height: tokens_1.space.m,
34
- width: switchTapArea,
25
+ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
26
+ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
27
+ const layout_1 = require("../../layout");
28
+ const switchContainerStencil = canvas_kit_styling_1.createStencil({
29
+ base: { name: "hzoxkl", styles: "position:relative;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }
30
+ }, "switch-container");
31
+ const SwitchContainer = common_1.createComponent('div')({
32
+ displayName: 'SwitchContainer',
33
+ Component: ({ children, ...elemProps }, ref, Element) => {
34
+ return (React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, switchContainerStencil())), children));
35
+ },
35
36
  });
36
- const SwitchInput = common_1.styled('input')({
37
- position: 'absolute',
38
- height: tokens_1.space.m,
39
- width: switchTapArea,
40
- margin: 0,
41
- marginLeft: tokens_1.space.xxxs,
42
- borderRadius: tokens_1.borderRadius.circle,
43
- opacity: 0,
44
- display: 'block',
45
- }, ({ disabled }) => ({
46
- cursor: disabled ? 'not-allowed' : 'pointer',
47
- }), ({ error, theme }) => {
48
- const errorColors = common_1.getErrorColors(error, theme);
49
- if (errorColors.outer === errorColors.inner) {
50
- errorColors.outer = 'transparent';
37
+ const switchInputStencil = canvas_kit_styling_1.createStencil({
38
+ base: { name: "1b5jngs", styles: "display:flex;position:absolute;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));margin:var(--cnvs-sys-space-zero, 0);margin-left:var(--cnvs-sys-space-x1, 0.25rem);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&:disabled, &.disabled{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}}" },
39
+ modifiers: {
40
+ modifiers: {
41
+ error: { name: "1hlx7w2", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),\n 0 0 0 var(--cnvs-sys-space-x1, 0.25rem) var(--cnvs-brand-error-base, rgba(222,46,33,1)),\n 0 0 0 0.3125rem transparent;}" },
42
+ alert: { name: "gisk2r", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),\n 0 0 0 var(--cnvs-sys-space-x1, 0.25rem) var(--cnvs-brand-alert-base, rgba(255,161,38,1)),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest, rgba(192,108,0,1));}" }
43
+ }
51
44
  }
52
- const styles = {
53
- '&:focus': {
54
- outline: 'none',
55
- '& ~ div:first-of-type': {
56
- ...common_1.focusRing({ separation: 2, animate: false }, theme),
57
- },
58
- },
59
- '& ~ div:first-of-type': {
60
- boxShadow: `
61
- 0 0 0 2px ${tokens_1.colors.frenchVanilla100},
62
- 0 0 0 4px ${errorColors.inner},
63
- 0 0 0 5px ${errorColors.outer}`,
64
- },
65
- '&:focus ~ div:first-of-type': {
66
- ...common_1.focusRing({ separation: 2, animate: false }, theme),
67
- },
68
- };
69
- return {
70
- ...styles,
71
- // Error rings take precedence over focus
72
- ...common_1.mouseFocusBehavior({
73
- ...styles,
74
- '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
75
- boxShadow: `
76
- 0 0 0 2px ${tokens_1.colors.frenchVanilla100},
77
- 0 0 0 4px ${errorColors.inner},
78
- 0 0 0 5px ${errorColors.outer}`,
79
- },
80
- }),
81
- };
45
+ }, "switch-input");
46
+ const SwitchInput = common_1.createComponent('input')({
47
+ displayName: 'SwitchInput',
48
+ Component: ({ error, ...elemProps }, ref, Element) => {
49
+ return React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, switchInputStencil({ error }))));
50
+ },
82
51
  });
83
- const SwitchBackground = common_1.styled('div')({
84
- boxSizing: 'border-box',
85
- position: 'absolute',
86
- display: 'flex',
87
- alignItems: 'center',
88
- pointerEvents: 'none',
89
- marginTop: tokens_1.space.xxxs,
90
- width: switchWidth,
91
- height: switchHeight,
92
- borderRadius: tokens_1.borderRadius.circle,
93
- padding: '0px 2px',
94
- transition: 'background-color 200ms ease',
95
- }, ({ checked, disabled, theme: { canvas: { palette: { primary: themePrimary }, }, }, }) => {
96
- if (checked) {
97
- return {
98
- backgroundColor: disabled ? themePrimary.light : themePrimary.main,
99
- };
100
- }
101
- else {
102
- return {
103
- backgroundColor: disabled ? tokens_1.colors.soap400 : tokens_1.colors.licorice200,
104
- };
52
+ const switchBackgroundStencil = canvas_kit_styling_1.createStencil({
53
+ base: { name: "zbf8t", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1, 0.25rem);width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));padding:var(--cnvs-sys-space-zero, 0) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-base-palette-licorice-200, rgba(123,133,143,1));" }
54
+ }, "switch-background");
55
+ const SwitchBackground = common_1.createComponent('div')({
56
+ displayName: 'SwitchBackground',
57
+ Component: ({ children, ...elemProps }, ref, Element) => {
58
+ return (React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, switchBackgroundStencil())), children));
59
+ },
60
+ });
61
+ const switchCircleStencil = canvas_kit_styling_1.createStencil({
62
+ base: { name: "1ojn95k", styles: "width:var(--cnvs-sys-space-x3, calc(0.25rem * 3));height:var(--cnvs-sys-space-x3, calc(0.25rem * 3));border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-shadow:var(--cnvs-sys-depth-1, 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12),0 0.125rem 0.5rem 0 rgba(31,38,46,0.08));transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));transform:translateX(var(--cnvs-sys-space-zero, 0));" },
63
+ modifiers: {
64
+ modifiers: {
65
+ true: { name: "obbyya", styles: "transform:translateX(var(--cnvs-sys-space-x4, calc(0.25rem * 4)));" }
66
+ }
105
67
  }
68
+ }, "switch-circle");
69
+ const SwitchCircle = common_1.createComponent('div')({
70
+ displayName: 'SwitchCircle',
71
+ Component: ({ checked, ...elemProps }, ref, Element) => {
72
+ return React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, switchCircleStencil({ checked }))));
73
+ },
106
74
  });
107
- const SwitchCircle = common_1.styled('div')({
108
- width: circleSize,
109
- height: circleSize,
110
- borderRadius: tokens_1.borderRadius.circle,
111
- ...tokens_1.depth[1],
112
- transition: 'transform 150ms ease',
113
- pointerEvents: 'none',
114
- }, ({ theme }) => ({
115
- backgroundColor: theme.canvas.palette.primary.contrast,
116
- }), ({ checked }) => ({
117
- transform: checked ? `translateX(${translateLength})` : 'translateX(0)',
118
- }));
119
75
  exports.Switch = common_1.createComponent('input')({
120
76
  displayName: 'Switch',
121
77
  Component: ({ checked = false, id, disabled = false, onChange, value, ...elemProps }, ref, Element) => {
122
78
  const inputId = common_1.useUniqueId(id);
123
79
  return (React.createElement(SwitchContainer, null,
124
80
  React.createElement(SwitchInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "switch", type: "checkbox", value: value }, elemProps)),
125
- React.createElement(SwitchBackground, { checked: checked, disabled: disabled },
81
+ React.createElement(SwitchBackground, null,
126
82
  React.createElement(SwitchCircle, { checked: checked }))));
127
83
  },
128
84
  subComponents: {
package/dist/es6/badge/lib/CountBadge.js CHANGED
@@ -4,7 +4,7 @@ import { handleCsProp, createStencil, px2rem, keyframes } from '@workday/canvas-
4
4
  import { base, system } from '@workday/canvas-tokens-web';
5
5
  const grow = keyframes({ name: "b0dw69", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
6
6
  const countBadgeStencil = createStencil({
7
- base: { name: "n9a3hm", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.375rem;" },
7
+ base: { name: "10yvklm", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;" },
8
8
  modifiers: {
9
9
  modifiers: {
10
10
  default: { name: "ls097g", styles: "background:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
package/dist/es6/button/lib/TertiaryButton.js CHANGED
@@ -6,7 +6,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
6
6
  import { system, brand, base } from '@workday/canvas-tokens-web';
7
7
  import { borderRadius, space } from '@workday/canvas-kit-react/tokens';
8
8
  import { Button } from './Button';
9
- const tertiaryStyles = createStyles({ name: "o529iz", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0px;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}" });
9
+ const tertiaryStyles = createStyles({ name: "1ps4nqo", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}" });
10
10
  export const tertiaryButtonModifiers = createModifiers({
11
11
  isThemeable: {
12
12
  true: createStyles({ name: "1t7d7ry", styles: "--cnvs-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));" }),
package/dist/es6/card/lib/CardHeading.js CHANGED
@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
4
  import { BodyText } from '@workday/canvas-kit-react/text';
5
5
  import { createStyles } from '@workday/canvas-kit-styling';
6
6
  import { system } from '@workday/canvas-tokens-web';
7
- const cardHeadingBaseStyles = createStyles({ name: "1oy61zb", styles: "font-weight:var(--cnvs-sys-font-weight-bold, 700);margin-bottom:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin-top:0px;" });
7
+ const cardHeadingBaseStyles = createStyles({ name: "qs1nz6", styles: "font-weight:var(--cnvs-sys-font-weight-bold, 700);margin-bottom:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin-top:0;" });
8
8
  export const CardHeading = createComponent('h3')({
9
9
  displayName: 'Card.Heading',
10
10
  Component: ({ children, ...elemProps }, ref, Element) => {
package/dist/es6/checkbox/lib/CheckboxCheck.js CHANGED
@@ -6,13 +6,13 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
6
6
  import { checkSmallIcon } from '@workday/canvas-system-icons-web';
7
7
  import { CheckBackground } from './CheckBackground';
8
8
  const checkboxCheckStencil = createStencil({
9
- base: { name: "e9m2ww", styles: "display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:0px;transform:scale(0.5);" },
9
+ base: { name: "1ei0szh", styles: "display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:0;transform:scale(0.5);" },
10
10
  modifiers: {
11
11
  modifiers: {
12
- true: { name: "11cckse", styles: "opacity:1px;transform:scale(1);" }
12
+ true: { name: "1exxrn1", styles: "opacity:1;transform:scale(1);" }
13
13
  },
14
14
  modifiers: {
15
- true: { name: "11cckse", styles: "opacity:1px;transform:scale(1);" }
15
+ true: { name: "1exxrn1", styles: "opacity:1;transform:scale(1);" }
16
16
  },
17
17
  modifiers: {
18
18
  inverse: { name: "18xh6xb", styles: "& > div{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}" }
package/dist/es6/checkbox/lib/CheckboxInput.js CHANGED
@@ -4,7 +4,7 @@ import { calc, createStencil, cssVar, handleCsProp, px2rem, } from '@workday/can
4
4
  import { base, brand, system } from '@workday/canvas-tokens-web';
5
5
  import { backgroundVars } from './CheckBackground';
6
6
  const checkboxInputStencil = createStencil({
7
- base: { name: "44rtbm", styles: "border-radius:var(--cnvs-sys-shape-half, calc(0.25rem * 0.5));width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin:var(--cnvs-sys-space-zero, 0);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:0px;&:not(:disabled){cursor:pointer;}&:where(:hover, .hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-500, rgba(51,61,71,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&:disabled ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));opacity:1px;}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));background-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 0px var(--cnvs-brand-common-focus-outline);}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline, var(--cnvs-base-palette-blueberry-400));border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
7
+ base: { name: "ortu5v", styles: "border-radius:var(--cnvs-sys-shape-half, calc(0.25rem * 0.5));width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin:var(--cnvs-sys-space-zero, 0);margin-top:calc(0.1875rem * -1);margin-inline-start:calc(0.1875rem * -1);position:absolute;opacity:0;&:not(:disabled){cursor:pointer;}&:where(:hover, .hover) ~ span:first-of-type{box-shadow:0 0 0 0.4375rem var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-500, rgba(51,61,71,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&:disabled ~ div:first-of-type{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));opacity:1;}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));background-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));}&:where(:focus-visible, :active, .focus, .active){outline:none;}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 0px var(--cnvs-brand-common-focus-outline);}&:checked:focus-visible, &:indeterminate:focus-visible, &:checked.focus, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline, var(--cnvs-base-palette-blueberry-400));border-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-width:0.125rem;span{margin-inline-start:calc(0.4375rem * -1);}}}" },
8
8
  modifiers: {
9
9
  modifiers: {
10
10
  inverse: { name: "k4w4a2", styles: "& ~ span:first-of-type{opacity:var(--cnvs-sys-opacity-disabled, 0.4);}& ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&:disabled ~ div:first-of-type{background-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));opacity:var(--cnvs-sys-opacity-disabled, 0.4);}&:disabled:where(:checked, :indeterminate) ~ div:first-of-type{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));background-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:where(:focus-visible, .focus) ~ div:first-of-type{border-color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));box-shadow:0 0 0 0px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus{& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}}" }
package/dist/es6/common/lib/AccessibleHide.js CHANGED
@@ -17,7 +17,7 @@ export const accessibleHide = {
17
17
  padding: 0,
18
18
  border: 0,
19
19
  };
20
- const accessibleHideStyles = createStyles({ name: "1jqqftm", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
20
+ const accessibleHideStyles = createStyles({ name: "i19yjz", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0;border:0;" });
21
21
  /**
22
22
  * A convenient component wrapper to visually hide content, while still making it accessible to screen readers
23
23
  */
package/dist/es6/select/lib/Select.js CHANGED
@@ -10,7 +10,7 @@ import { useSelectCard } from './hooks/useSelectCard';
10
10
  import { useSelectInput } from './hooks/useSelectInput';
11
11
  import { createStyles } from '@workday/canvas-kit-styling';
12
12
  const selectInputStyles = createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
13
- const hiddenSelectStyles = createStyles({ name: "1uxiz6e", styles: "position:absolute;top:0px;bottom:0px;left:0px;right:0px;opacity:0px;cursor:default;pointer-events:none;" });
13
+ const hiddenSelectStyles = createStyles({ name: "skcwps", styles: "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;cursor:default;pointer-events:none;" });
14
14
  export const SelectInput = createSubcomponent(TextInput)({
15
15
  modelHook: useSelectModel,
16
16
  elemPropsHook: useSelectInput,
package/dist/es6/switch/lib/Switch.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
- import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
3
- export interface SwitchProps extends Themeable {
2
+ import { ErrorType } from '@workday/canvas-kit-react/common';
3
+ export interface SwitchProps {
4
4
  /**
5
5
  * If true, set the Switch to the on state.
6
6
  * @default false
package/dist/es6/switch/lib/Switch.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAKT,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAwHD,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
1
+ {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA2ID,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
package/dist/es6/switch/lib/Switch.js CHANGED
@@ -1,106 +1,62 @@
1
1
  import * as React from 'react';
2
- import { createComponent, ErrorType, focusRing, mouseFocusBehavior, getErrorColors, styled, useUniqueId, } from '@workday/canvas-kit-react/common';
3
- import { borderRadius, colors, depth, space } from '@workday/canvas-kit-react/tokens';
4
- const circleSize = space.xs;
5
- const switchWidth = space.l;
6
- const switchHeight = space.s;
7
- const switchTapArea = space.l;
8
- const translateLength = space.s;
9
- const SwitchContainer = styled('div')({
10
- position: 'relative',
11
- height: space.m,
12
- width: switchTapArea,
2
+ import { createComponent, ErrorType, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
3
+ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
4
+ import { base, brand, system } from '@workday/canvas-tokens-web';
5
+ import { mergeStyles } from '../../layout';
6
+ const switchContainerStencil = createStencil({
7
+ base: { name: "hzoxkl", styles: "position:relative;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }
8
+ }, "switch-container");
9
+ const SwitchContainer = createComponent('div')({
10
+ displayName: 'SwitchContainer',
11
+ Component: ({ children, ...elemProps }, ref, Element) => {
12
+ return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, switchContainerStencil())), children));
13
+ },
13
14
  });
14
- const SwitchInput = styled('input')({
15
- position: 'absolute',
16
- height: space.m,
17
- width: switchTapArea,
18
- margin: 0,
19
- marginLeft: space.xxxs,
20
- borderRadius: borderRadius.circle,
21
- opacity: 0,
22
- display: 'block',
23
- }, ({ disabled }) => ({
24
- cursor: disabled ? 'not-allowed' : 'pointer',
25
- }), ({ error, theme }) => {
26
- const errorColors = getErrorColors(error, theme);
27
- if (errorColors.outer === errorColors.inner) {
28
- errorColors.outer = 'transparent';
15
+ const switchInputStencil = createStencil({
16
+ base: { name: "1b5jngs", styles: "display:flex;position:absolute;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));margin:var(--cnvs-sys-space-zero, 0);margin-left:var(--cnvs-sys-space-x1, 0.25rem);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&:disabled, &.disabled{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-light, rgba(166,210,255,1));}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}}" },
17
+ modifiers: {
18
+ modifiers: {
19
+ error: { name: "1hlx7w2", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),\n 0 0 0 var(--cnvs-sys-space-x1, 0.25rem) var(--cnvs-brand-error-base, rgba(222,46,33,1)),\n 0 0 0 0.3125rem transparent;}" },
20
+ alert: { name: "gisk2r", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),\n 0 0 0 var(--cnvs-sys-space-x1, 0.25rem) var(--cnvs-brand-alert-base, rgba(255,161,38,1)),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest, rgba(192,108,0,1));}" }
21
+ }
29
22
  }
30
- const styles = {
31
- '&:focus': {
32
- outline: 'none',
33
- '& ~ div:first-of-type': {
34
- ...focusRing({ separation: 2, animate: false }, theme),
35
- },
36
- },
37
- '& ~ div:first-of-type': {
38
- boxShadow: `
39
- 0 0 0 2px ${colors.frenchVanilla100},
40
- 0 0 0 4px ${errorColors.inner},
41
- 0 0 0 5px ${errorColors.outer}`,
42
- },
43
- '&:focus ~ div:first-of-type': {
44
- ...focusRing({ separation: 2, animate: false }, theme),
45
- },
46
- };
47
- return {
48
- ...styles,
49
- // Error rings take precedence over focus
50
- ...mouseFocusBehavior({
51
- ...styles,
52
- '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
53
- boxShadow: `
54
- 0 0 0 2px ${colors.frenchVanilla100},
55
- 0 0 0 4px ${errorColors.inner},
56
- 0 0 0 5px ${errorColors.outer}`,
57
- },
58
- }),
59
- };
23
+ }, "switch-input");
24
+ const SwitchInput = createComponent('input')({
25
+ displayName: 'SwitchInput',
26
+ Component: ({ error, ...elemProps }, ref, Element) => {
27
+ return React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, switchInputStencil({ error }))));
28
+ },
60
29
  });
61
- const SwitchBackground = styled('div')({
62
- boxSizing: 'border-box',
63
- position: 'absolute',
64
- display: 'flex',
65
- alignItems: 'center',
66
- pointerEvents: 'none',
67
- marginTop: space.xxxs,
68
- width: switchWidth,
69
- height: switchHeight,
70
- borderRadius: borderRadius.circle,
71
- padding: '0px 2px',
72
- transition: 'background-color 200ms ease',
73
- }, ({ checked, disabled, theme: { canvas: { palette: { primary: themePrimary }, }, }, }) => {
74
- if (checked) {
75
- return {
76
- backgroundColor: disabled ? themePrimary.light : themePrimary.main,
77
- };
78
- }
79
- else {
80
- return {
81
- backgroundColor: disabled ? colors.soap400 : colors.licorice200,
82
- };
30
+ const switchBackgroundStencil = createStencil({
31
+ base: { name: "zbf8t", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1, 0.25rem);width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));padding:var(--cnvs-sys-space-zero, 0) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-base-palette-licorice-200, rgba(123,133,143,1));" }
32
+ }, "switch-background");
33
+ const SwitchBackground = createComponent('div')({
34
+ displayName: 'SwitchBackground',
35
+ Component: ({ children, ...elemProps }, ref, Element) => {
36
+ return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, switchBackgroundStencil())), children));
37
+ },
38
+ });
39
+ const switchCircleStencil = createStencil({
40
+ base: { name: "1ojn95k", styles: "width:var(--cnvs-sys-space-x3, calc(0.25rem * 3));height:var(--cnvs-sys-space-x3, calc(0.25rem * 3));border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-shadow:var(--cnvs-sys-depth-1, 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12),0 0.125rem 0.5rem 0 rgba(31,38,46,0.08));transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));transform:translateX(var(--cnvs-sys-space-zero, 0));" },
41
+ modifiers: {
42
+ modifiers: {
43
+ true: { name: "obbyya", styles: "transform:translateX(var(--cnvs-sys-space-x4, calc(0.25rem * 4)));" }
44
+ }
83
45
  }
46
+ }, "switch-circle");
47
+ const SwitchCircle = createComponent('div')({
48
+ displayName: 'SwitchCircle',
49
+ Component: ({ checked, ...elemProps }, ref, Element) => {
50
+ return React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, switchCircleStencil({ checked }))));
51
+ },
84
52
  });
85
- const SwitchCircle = styled('div')({
86
- width: circleSize,
87
- height: circleSize,
88
- borderRadius: borderRadius.circle,
89
- ...depth[1],
90
- transition: 'transform 150ms ease',
91
- pointerEvents: 'none',
92
- }, ({ theme }) => ({
93
- backgroundColor: theme.canvas.palette.primary.contrast,
94
- }), ({ checked }) => ({
95
- transform: checked ? `translateX(${translateLength})` : 'translateX(0)',
96
- }));
97
53
  export const Switch = createComponent('input')({
98
54
  displayName: 'Switch',
99
55
  Component: ({ checked = false, id, disabled = false, onChange, value, ...elemProps }, ref, Element) => {
100
56
  const inputId = useUniqueId(id);
101
57
  return (React.createElement(SwitchContainer, null,
102
58
  React.createElement(SwitchInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "switch", type: "checkbox", value: value }, elemProps)),
103
- React.createElement(SwitchBackground, { checked: checked, disabled: disabled },
59
+ React.createElement(SwitchBackground, null,
104
60
  React.createElement(SwitchCircle, { checked: checked }))));
105
61
  },
106
62
  subComponents: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "11.0.0-alpha.696-next.0",
3
+ "version": "11.0.0-alpha.699-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -50,8 +50,8 @@
50
50
  "@emotion/styled": "^11.6.0",
51
51
  "@popperjs/core": "^2.5.4",
52
52
  "@workday/canvas-colors-web": "^2.0.0",
53
- "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.696-next.0",
54
- "@workday/canvas-kit-styling": "^11.0.0-alpha.696-next.0",
53
+ "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.699-next.0",
54
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.699-next.0",
55
55
  "@workday/canvas-system-icons-web": "^3.0.0",
56
56
  "@workday/canvas-tokens-web": "^1.0.2",
57
57
  "@workday/design-assets-types": "^0.2.8",
@@ -69,5 +69,5 @@
69
69
  "@workday/canvas-accent-icons-web": "^3.0.0",
70
70
  "@workday/canvas-applet-icons-web": "^2.0.0"
71
71
  },
72
- "gitHead": "2b897235cbf8b889cd1e7f750e8c905b56944368"
72
+ "gitHead": "6dca00808a902605bad2c3c2f083ad6ba310bf4b"
73
73
  }
package/switch/lib/Switch.tsx CHANGED
@@ -1,18 +1,10 @@
1
1
  import * as React from 'react';
2
- import {
3
- createComponent,
4
- StyledType,
5
- ErrorType,
6
- focusRing,
7
- mouseFocusBehavior,
8
- getErrorColors,
9
- styled,
10
- Themeable,
11
- useUniqueId,
12
- } from '@workday/canvas-kit-react/common';
13
- import {borderRadius, colors, depth, space} from '@workday/canvas-kit-react/tokens';
2
+ import {createComponent, ErrorType, focusRing, useUniqueId} from '@workday/canvas-kit-react/common';
3
+ import {createStencil, px2rem} from '@workday/canvas-kit-styling';
4
+ import {base, brand, system} from '@workday/canvas-tokens-web';
5
+ import {mergeStyles} from '../../layout';
14
6
 
15
- export interface SwitchProps extends Themeable {
7
+ export interface SwitchProps {
16
8
  /**
17
9
  * If true, set the Switch to the on state.
18
10
  * @default false
@@ -42,123 +34,142 @@ export interface SwitchProps extends Themeable {
42
34
  error?: ErrorType;
43
35
  }
44
36
 
45
- const circleSize = space.xs;
46
- const switchWidth = space.l;
47
- const switchHeight = space.s;
48
- const switchTapArea = space.l;
49
- const translateLength = space.s;
50
-
51
- const SwitchContainer = styled('div')({
52
- position: 'relative',
53
- height: space.m,
54
- width: switchTapArea,
37
+ const switchContainerStencil = createStencil({
38
+ base: {
39
+ position: 'relative',
40
+ height: system.space.x6,
41
+ width: system.space.x8,
42
+ },
55
43
  });
56
44
 
57
- const SwitchInput = styled('input')<SwitchProps & StyledType>(
58
- {
59
- position: 'absolute',
60
- height: space.m,
61
- width: switchTapArea,
62
- margin: 0,
63
- marginLeft: space.xxxs,
64
- borderRadius: borderRadius.circle,
65
- opacity: 0,
66
- display: 'block',
45
+ const SwitchContainer = createComponent('div')({
46
+ displayName: 'SwitchContainer',
47
+ Component: ({children, ...elemProps}, ref, Element) => {
48
+ return (
49
+ <Element ref={ref} {...mergeStyles(elemProps, switchContainerStencil())}>
50
+ {children}
51
+ </Element>
52
+ );
67
53
  },
68
- ({disabled}) => ({
69
- cursor: disabled ? 'not-allowed' : 'pointer',
70
- }),
71
- ({error, theme}) => {
72
- const errorColors = getErrorColors(error, theme);
73
-
74
- if (errorColors.outer === errorColors.inner) {
75
- errorColors.outer = 'transparent';
76
- }
54
+ });
77
55
 
78
- const styles = {
79
- '&:focus': {
80
- outline: 'none',
56
+ const switchInputStencil = createStencil({
57
+ base: {
58
+ display: 'flex',
59
+ position: 'absolute',
60
+ height: system.space.x6,
61
+ width: system.space.x8,
62
+ margin: system.space.zero,
63
+ marginLeft: system.space.x1,
64
+ borderRadius: system.shape.round,
65
+ opacity: '0',
66
+ cursor: 'pointer',
67
+ '&:checked, &.checked': {
68
+ '& ~ div:first-of-type': {
69
+ backgroundColor: brand.primary.base,
70
+ },
71
+ '&:disabled, &.disabled': {
81
72
  '& ~ div:first-of-type': {
82
- ...focusRing({separation: 2, animate: false}, theme),
73
+ backgroundColor: brand.primary.light,
83
74
  },
84
75
  },
76
+ },
77
+ '&:disabled, &.disabled': {
78
+ cursor: 'not-allowed',
85
79
  '& ~ div:first-of-type': {
86
- boxShadow: `
87
- 0 0 0 2px ${colors.frenchVanilla100},
88
- 0 0 0 4px ${errorColors.inner},
89
- 0 0 0 5px ${errorColors.outer}`,
80
+ backgroundColor: base.soap400,
90
81
  },
91
- '&:focus ~ div:first-of-type': {
92
- ...focusRing({separation: 2, animate: false}, theme),
82
+ },
83
+ '&:focus-visible, &:focus, &.focus': {
84
+ outline: 'none',
85
+ '& ~ div:first-of-type': {
86
+ ...focusRing({separation: 2, animate: false}),
93
87
  },
94
- };
95
- return {
96
- ...styles,
97
- // Error rings take precedence over focus
98
- ...mouseFocusBehavior({
99
- ...styles,
100
- '&:focus ~ div:first-of-type, &:active ~ div:first-of-type': {
88
+ },
89
+ },
90
+ modifiers: {
91
+ error: {
92
+ error: {
93
+ '& ~ div:first-of-type': {
101
94
  boxShadow: `
102
- 0 0 0 2px ${colors.frenchVanilla100},
103
- 0 0 0 4px ${errorColors.inner},
104
- 0 0 0 5px ${errorColors.outer}`,
95
+ 0 0 0 ${px2rem(2)} ${base.frenchVanilla100},
96
+ 0 0 0 ${system.space.x1} ${brand.error.base},
97
+ 0 0 0 ${px2rem(5)} transparent`,
105
98
  },
106
- }),
107
- };
108
- }
109
- );
99
+ },
100
+ alert: {
101
+ '& ~ div:first-of-type': {
102
+ boxShadow: `
103
+ 0 0 0 ${px2rem(2)} ${base.frenchVanilla100},
104
+ 0 0 0 ${system.space.x1} ${brand.alert.base},
105
+ 0 0 0 ${px2rem(5)} ${brand.alert.darkest}`,
106
+ },
107
+ },
108
+ },
109
+ },
110
+ });
111
+
112
+ const SwitchInput = createComponent('input')<SwitchProps>({
113
+ displayName: 'SwitchInput',
114
+ Component: ({error, ...elemProps}, ref, Element) => {
115
+ return <Element ref={ref} {...mergeStyles(elemProps, switchInputStencil({error}))} />;
116
+ },
117
+ });
110
118
 
111
- const SwitchBackground = styled('div')<Pick<SwitchProps, 'checked' | 'disabled'>>(
112
- {
119
+ const switchBackgroundStencil = createStencil({
120
+ base: {
113
121
  boxSizing: 'border-box',
114
122
  position: 'absolute',
115
123
  display: 'flex',
116
124
  alignItems: 'center',
117
125
  pointerEvents: 'none',
118
- marginTop: space.xxxs,
119
- width: switchWidth,
120
- height: switchHeight,
121
- borderRadius: borderRadius.circle,
122
- padding: '0px 2px',
126
+ marginTop: system.space.x1,
127
+ width: system.space.x8,
128
+ height: system.space.x4,
129
+ borderRadius: system.shape.round,
130
+ padding: `${system.space.zero} ${px2rem(2)}`,
123
131
  transition: 'background-color 200ms ease',
132
+ backgroundColor: base.licorice200,
124
133
  },
125
- ({
126
- checked,
127
- disabled,
128
- theme: {
129
- canvas: {
130
- palette: {primary: themePrimary},
131
- },
132
- },
133
- }) => {
134
- if (checked) {
135
- return {
136
- backgroundColor: disabled ? themePrimary.light : themePrimary.main,
137
- };
138
- } else {
139
- return {
140
- backgroundColor: disabled ? colors.soap400 : colors.licorice200,
141
- };
142
- }
143
- }
144
- );
134
+ });
145
135
 
146
- const SwitchCircle = styled('div')<Pick<SwitchProps, 'checked' | 'theme'>>(
147
- {
148
- width: circleSize,
149
- height: circleSize,
150
- borderRadius: borderRadius.circle,
151
- ...depth[1],
136
+ const SwitchBackground = createComponent('div')({
137
+ displayName: 'SwitchBackground',
138
+ Component: ({children, ...elemProps}, ref, Element) => {
139
+ return (
140
+ <Element ref={ref} {...mergeStyles(elemProps, switchBackgroundStencil())}>
141
+ {children}
142
+ </Element>
143
+ );
144
+ },
145
+ });
146
+
147
+ const switchCircleStencil = createStencil({
148
+ base: {
149
+ width: system.space.x3,
150
+ height: system.space.x3,
151
+ borderRadius: system.shape.round,
152
+ boxShadow: system.depth[1],
152
153
  transition: 'transform 150ms ease',
153
154
  pointerEvents: 'none',
155
+ backgroundColor: brand.primary.accent,
156
+ transform: `translateX(${system.space.zero})`,
157
+ },
158
+ modifiers: {
159
+ checked: {
160
+ true: {
161
+ transform: `translateX(${system.space.x4})`,
162
+ },
163
+ },
154
164
  },
155
- ({theme}) => ({
156
- backgroundColor: theme.canvas.palette.primary.contrast,
157
- }),
158
- ({checked}) => ({
159
- transform: checked ? `translateX(${translateLength})` : 'translateX(0)',
160
- })
161
- );
165
+ });
166
+
167
+ const SwitchCircle = createComponent('div')<Pick<SwitchProps, 'checked'>>({
168
+ displayName: 'SwitchCircle',
169
+ Component: ({checked, ...elemProps}, ref, Element) => {
170
+ return <Element ref={ref} {...mergeStyles(elemProps, switchCircleStencil({checked}))} />;
171
+ },
172
+ });
162
173
 
163
174
  export const Switch = createComponent('input')({
164
175
  displayName: 'Switch',
@@ -182,7 +193,7 @@ export const Switch = createComponent('input')({
182
193
  value={value}
183
194
  {...elemProps}
184
195
  />
185
- <SwitchBackground checked={checked} disabled={disabled}>
196
+ <SwitchBackground>
186
197
  <SwitchCircle checked={checked} />
187
198
  </SwitchBackground>
188
199
  </SwitchContainer>