@workday/canvas-kit-preview-react 16.0.0-alpha.0441-next.0 → 16.0.0-alpha.0445-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 (31) hide show
  1. package/dist/commonjs/radio/lib/RadioGroup.d.ts.map +1 -1
  2. package/dist/commonjs/radio/lib/RadioGroup.js +5 -4
  3. package/dist/commonjs/radio/lib/RadioLabel.js +2 -2
  4. package/dist/commonjs/radio/lib/StyledRadioButton.d.ts +2 -2
  5. package/dist/commonjs/radio/lib/StyledRadioButton.d.ts.map +1 -1
  6. package/dist/commonjs/radio/lib/StyledRadioButton.js +7 -7
  7. package/dist/commonjs/switch/lib/SwitchBackground.js +2 -2
  8. package/dist/commonjs/switch/lib/SwitchCircle.js +3 -3
  9. package/dist/commonjs/switch/lib/SwitchContainer.js +2 -2
  10. package/dist/commonjs/switch/lib/SwitchIcon.js +1 -1
  11. package/dist/commonjs/switch/lib/SwitchInput.js +3 -3
  12. package/dist/es6/radio/lib/RadioGroup.d.ts.map +1 -1
  13. package/dist/es6/radio/lib/RadioGroup.js +6 -5
  14. package/dist/es6/radio/lib/RadioLabel.js +3 -3
  15. package/dist/es6/radio/lib/StyledRadioButton.d.ts +2 -2
  16. package/dist/es6/radio/lib/StyledRadioButton.d.ts.map +1 -1
  17. package/dist/es6/radio/lib/StyledRadioButton.js +8 -8
  18. package/dist/es6/switch/lib/SwitchBackground.js +3 -3
  19. package/dist/es6/switch/lib/SwitchCircle.js +4 -4
  20. package/dist/es6/switch/lib/SwitchContainer.js +3 -3
  21. package/dist/es6/switch/lib/SwitchIcon.js +1 -1
  22. package/dist/es6/switch/lib/SwitchInput.js +3 -3
  23. package/package.json +4 -4
  24. package/radio/lib/RadioGroup.tsx +9 -5
  25. package/radio/lib/RadioLabel.tsx +2 -2
  26. package/radio/lib/StyledRadioButton.tsx +18 -16
  27. package/switch/lib/SwitchBackground.tsx +4 -4
  28. package/switch/lib/SwitchCircle.tsx +5 -5
  29. package/switch/lib/SwitchContainer.tsx +2 -2
  30. package/switch/lib/SwitchIcon.tsx +2 -2
  31. package/switch/lib/SwitchInput.tsx +2 -2
package/dist/commonjs/radio/lib/RadioGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,SAAS,EAAkB,MAAM,kCAAkC,CAAC;AACvF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAOjF,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,OAAO,EAAE,SAAS;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA8BD;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
1
+ {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAOjF,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,OAAO,EAAE,SAAS;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA6BD;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
package/dist/commonjs/radio/lib/RadioGroup.js CHANGED
@@ -13,14 +13,15 @@ const useRadioModel_1 = require("./hooks/useRadioModel");
13
13
  * Styles for RadioGroup
14
14
  */
15
15
  const radioGroupStencil = (0, canvas_kit_styling_1.createStencil)({
16
- base: { name: "29nlcx", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
16
+ extends: common_1.cornerShapeStencil,
17
+ base: { name: "43r76a", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
17
18
  modifiers: {
18
19
  error: {
19
- error: { name: "24risq", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));" },
20
- caution: { name: "2dlrky", styles: "background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
20
+ error: { name: "a6q09", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
21
+ caution: { name: "4bp858", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
21
22
  }
22
23
  }
23
- }, "radio-group-aea204");
24
+ }, "radio-group-6fa928");
24
25
  /**
25
26
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
26
27
  *
package/dist/commonjs/radio/lib/RadioLabel.js CHANGED
@@ -14,8 +14,8 @@ const RadioInput_1 = require("./RadioInput");
14
14
  const RadioText_1 = require("./RadioText");
15
15
  const useRadioModel_1 = require("./hooks/useRadioModel");
16
16
  const radioLabelStencil = (0, canvas_kit_styling_1.createStencil)({
17
- base: { name: "28ztkz", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-base-size-225, 1.125rem);position:relative;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
18
- }, "radio-label-e77300");
17
+ base: { name: "1e06ft", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));position:relative;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
18
+ }, "radio-label-0ab968");
19
19
  exports.RadioLabelContext = react_1.default.createContext({});
20
20
  exports.RadioLabel = (0, common_1.createSubcomponent)('label')({
21
21
  displayName: 'Radio.Label',
package/dist/commonjs/radio/lib/StyledRadioButton.d.ts CHANGED
@@ -19,7 +19,7 @@ export declare const radioInputStencil: import("@workday/canvas-kit-styling").St
19
19
  backgroundColor: "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
20
20
  borderColor: "var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)))";
21
21
  } | {
22
- backgroundColor: "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
22
+ backgroundColor: "var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))";
23
23
  borderColor: "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))";
24
24
  };
25
25
  opacity: "--cnvs-sys-opacity-disabled";
@@ -47,7 +47,7 @@ export declare const radioInputStencil: import("@workday/canvas-kit-styling").St
47
47
  backgroundColor: "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
48
48
  borderColor: "var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)))";
49
49
  } | {
50
- backgroundColor: "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
50
+ backgroundColor: "var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))";
51
51
  borderColor: "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))";
52
52
  };
53
53
  opacity: "--cnvs-sys-opacity-disabled";
package/dist/commonjs/radio/lib/StyledRadioButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAA8B,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAKzF,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAiH5B,CAAC;AASH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;wBAsCnC,CAAC;AAmBH,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAsB5B,CAAC"}
1
+ {"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAA8B,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAKzF,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAiH5B,CAAC;AASH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;wBAwCnC,CAAC;AAmBH,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAsB5B,CAAC"}
package/dist/commonjs/radio/lib/StyledRadioButton.js CHANGED
@@ -15,13 +15,13 @@ exports.radioInputStencil = (0, canvas_kit_styling_1.createStencil)({
15
15
  parts: {
16
16
  check: 'cnvs-radio-check',
17
17
  },
18
- base: { name: "6c3g7", styles: "box-sizing:border-box;cursor:pointer;height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;opacity:var(--cnvs-sys-opacity-disabled);&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-default);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{outline:transparent;border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}" },
18
+ base: { name: "1ee0wn", styles: "box-sizing:border-box;cursor:pointer;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));position:absolute;margin:0;opacity:var(--cnvs-sys-opacity-zero);&:focus-visible, &.focus, &:active{outline:0.0625rem solid transparent;}&:disabled, &.disabled{cursor:auto;&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-default);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{outline:transparent;border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}" },
19
19
  modifiers: {
20
20
  variant: {
21
- inverse: { name: "1temsa", styles: "+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}}&:hover + [data-part=\"cnvs-radio-check\"], &.hover + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"], &.focus:hover + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:focus-visible:checked + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover:checked + [data-part=\"cnvs-radio-check\"], &.focus:checked + [data-part=\"cnvs-radio-check\"], &.focus:hover:checked + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}" }
21
+ inverse: { name: "255wwi", styles: "+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}}&:hover + [data-part=\"cnvs-radio-check\"], &.hover + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"], &.focus:hover + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:focus-visible:checked + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover:checked + [data-part=\"cnvs-radio-check\"], &.focus:checked + [data-part=\"cnvs-radio-check\"], &.focus:hover:checked + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}" }
22
22
  }
23
23
  }
24
- }, "radio-input-edcf25");
24
+ }, "radio-input-374248");
25
25
  const StyledRadioInput = (0, common_1.createComponent)('input')({
26
26
  displayName: 'StyledRadioInput',
27
27
  Component: ({ children, variant, ...elemProps }, ref, Element) => {
@@ -29,16 +29,16 @@ const StyledRadioInput = (0, common_1.createComponent)('input')({
29
29
  },
30
30
  });
31
31
  exports.radioInputWrapperStencil = (0, canvas_kit_styling_1.createStencil)({
32
- base: { name: "3g4drg", styles: "box-sizing:border-box;height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:var(--cnvs-base-size-225, 1.125rem);transition:box-shadow 150ms ease-out;width:var(--cnvs-base-size-225, 1.125rem);pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}" },
32
+ base: { name: "1b70ml", styles: "box-sizing:border-box;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));flex:0 0 auto;align-items:center;justify-content:center;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));transition:box-shadow 150ms ease-out;width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 0.25rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}" },
33
33
  modifiers: {
34
34
  variant: {
35
- inverse: { name: "3sqt5b", styles: "&:hover:before, &.hover:before{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}" }
35
+ inverse: { name: "1m3s54", styles: "&:hover:before, &.hover:before{box-shadow:0 0 0 0.25rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}" }
36
36
  },
37
37
  disabled: {
38
- true: { name: "7cym2", styles: "opacity:var(--cnvs-sys-opacity-disabled);&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
38
+ true: { name: "3z3h5n", styles: "opacity:var(--cnvs-sys-opacity-disabled);&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
39
39
  }
40
40
  }
41
- }, "radio-input-wrapper-7ebbb3");
41
+ }, "radio-input-wrapper-16420d");
42
42
  const RadioInputWrapper = (0, common_1.createComponent)(layout_1.Flex)({
43
43
  displayName: 'RadioInputWrapper',
44
44
  Component: ({ children, variant, ...elemProps }, ref, Element) => {
package/dist/commonjs/switch/lib/SwitchBackground.js CHANGED
@@ -6,8 +6,8 @@ const common_1 = require("@workday/canvas-kit-react/common");
6
6
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
7
7
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
8
8
  exports.switchBackgroundStencil = (0, canvas_kit_styling_1.createStencil)({
9
- base: { name: "27st9r", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;border:0.0625rem solid transparent;height:var(--cnvs-base-size-225, 1.125rem);width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:0 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-accent-muted-soft, var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)));" }
10
- }, "switch-background-71891f");
9
+ base: { name: "onff2", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;border:0.0625rem solid transparent;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:0 0.0625rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));" }
10
+ }, "switch-background-fbb710");
11
11
  exports.SwitchBackground = (0, common_1.createComponent)('div')({
12
12
  displayName: 'SwitchBackground',
13
13
  Component: ({ children, ...elemProps }, ref, Element) => {
package/dist/commonjs/switch/lib/SwitchCircle.js CHANGED
@@ -6,13 +6,13 @@ const common_1 = require("@workday/canvas-kit-react/common");
6
6
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
7
7
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
8
8
  exports.switchCircleStencil = (0, canvas_kit_styling_1.createStencil)({
9
- base: { name: "3q13oq", styles: "box-sizing:border-box;width:var(--cnvs-base-size-150, 0.75rem);height:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid transparent;box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-sys-color-fg-inverse);transform:translateX(0);" },
9
+ base: { name: "3kbufe", styles: "box-sizing:border-box;width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid transparent;box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-sys-color-fg-inverse);transform:translateX(0);" },
10
10
  modifiers: {
11
11
  checked: {
12
- true: { name: "3d8tjr", styles: "transform:translateX(1rem);:dir(rtl){transform:translateX(-1rem);}" }
12
+ true: { name: "1blgnr", styles: "transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" }
13
13
  }
14
14
  }
15
- }, "switch-circle-1553b5");
15
+ }, "switch-circle-f808e0");
16
16
  exports.SwitchCircle = (0, common_1.createComponent)('div')({
17
17
  displayName: 'SwitchCircle',
18
18
  Component: ({ checked, ...elemProps }, ref, Element) => {
package/dist/commonjs/switch/lib/SwitchContainer.js CHANGED
@@ -6,8 +6,8 @@ const common_1 = require("@workday/canvas-kit-react/common");
6
6
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
7
7
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
8
8
  exports.switchContainerStencil = (0, canvas_kit_styling_1.createStencil)({
9
- base: { name: "3elj35", styles: "box-sizing:border-box;position:relative;margin-block-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));height:var(--cnvs-base-size-225, 1.125rem);width:2.125rem;" }
10
- }, "switch-container-0724f3");
9
+ base: { name: "4cu5ut", styles: "box-sizing:border-box;position:relative;margin-block-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;" }
10
+ }, "switch-container-f03251");
11
11
  exports.SwitchContainer = (0, common_1.createComponent)('div')({
12
12
  displayName: 'SwitchContainer',
13
13
  Component: ({ children, ...elemProps }, ref, Element) => {
package/dist/commonjs/switch/lib/SwitchIcon.js CHANGED
@@ -8,7 +8,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
8
8
  const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
9
9
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
10
10
  exports.switchIconStencil = (0, canvas_kit_styling_1.createStencil)({
11
- base: { name: "jxtta", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.75rem);:dir(rtl){transform:translateX(-0.75rem);}" },
11
+ base: { name: "jxtta", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" },
12
12
  modifiers: {
13
13
  checked: {
14
14
  true: { name: "4bs4m5", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
package/dist/commonjs/switch/lib/SwitchInput.js CHANGED
@@ -6,11 +6,11 @@ const common_1 = require("@workday/canvas-kit-react/common");
6
6
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
7
7
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
8
8
  exports.switchInputStencil = (0, canvas_kit_styling_1.createStencil)({
9
- base: { name: "gzg1j", styles: "box-sizing:border-box;display:flex;position:absolute;margin:0;height:var(--cnvs-base-size-225, 1.125rem);width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));opacity:0;cursor:pointer;& ~ div:first-of-type{outline-offset:0.125rem;}&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{outline:0.0625rem solid transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
9
+ base: { name: "3ifvha", styles: "box-sizing:border-box;display:flex;position:absolute;margin:0;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));opacity:0;cursor:pointer;& ~ div:first-of-type{outline-offset:0.125rem;}&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{outline:0.0625rem solid transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
10
10
  modifiers: {
11
11
  error: {
12
- error: { name: "42czuu", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),\n 0 0 0 0.3125rem transparent;}" },
13
- caution: { name: "4c4ydd", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}" }
12
+ error: { name: "wwp3s", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),\n 0 0 0 0.3125rem transparent;}" },
13
+ caution: { name: "1x2tpo", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}" }
14
14
  }
15
15
  }
16
16
  }, "switch-input-cce660");
package/dist/es6/radio/lib/RadioGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,SAAS,EAAkB,MAAM,kCAAkC,CAAC;AACvF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAOjF,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,OAAO,EAAE,SAAS;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA8BD;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
1
+ {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAOjF,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,OAAO,EAAE,SAAS;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA6BD;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
package/dist/es6/radio/lib/RadioGroup.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createContainer } from '@workday/canvas-kit-react/common';
2
+ import { cornerShapeStencil, createContainer, } from '@workday/canvas-kit-react/common';
3
3
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
4
  import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
5
5
  import { base, system } from '@workday/canvas-tokens-web';
@@ -10,14 +10,15 @@ import { useRadioModel } from './hooks/useRadioModel';
10
10
  * Styles for RadioGroup
11
11
  */
12
12
  const radioGroupStencil = createStencil({
13
- base: { name: "29nlcx", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
13
+ extends: cornerShapeStencil,
14
+ base: { name: "43r76a", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
14
15
  modifiers: {
15
16
  error: {
16
- error: { name: "24risq", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));" },
17
- caution: { name: "2dlrky", styles: "background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
17
+ error: { name: "a6q09", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
18
+ caution: { name: "4bp858", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
18
19
  }
19
20
  }
20
- }, "radio-group-aea204");
21
+ }, "radio-group-6fa928");
21
22
  /**
22
23
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
23
24
  *
package/dist/es6/radio/lib/RadioLabel.js CHANGED
@@ -3,13 +3,13 @@ import React from 'react';
3
3
  import { createSubcomponent } from '@workday/canvas-kit-react/common';
4
4
  import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
5
5
  import { createStencil } from '@workday/canvas-kit-styling';
6
- import { base, system } from '@workday/canvas-tokens-web';
6
+ import { system } from '@workday/canvas-tokens-web';
7
7
  import { RadioInput } from './RadioInput';
8
8
  import { RadioText } from './RadioText';
9
9
  import { useRadioModel } from './hooks/useRadioModel';
10
10
  const radioLabelStencil = createStencil({
11
- base: { name: "28ztkz", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-base-size-225, 1.125rem);position:relative;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
12
- }, "radio-label-e77300");
11
+ base: { name: "1e06ft", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));position:relative;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
12
+ }, "radio-label-0ab968");
13
13
  export const RadioLabelContext = React.createContext({});
14
14
  export const RadioLabel = createSubcomponent('label')({
15
15
  displayName: 'Radio.Label',
package/dist/es6/radio/lib/StyledRadioButton.d.ts CHANGED
@@ -19,7 +19,7 @@ export declare const radioInputStencil: import("@workday/canvas-kit-styling").St
19
19
  backgroundColor: "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
20
20
  borderColor: "var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)))";
21
21
  } | {
22
- backgroundColor: "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
22
+ backgroundColor: "var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))";
23
23
  borderColor: "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))";
24
24
  };
25
25
  opacity: "--cnvs-sys-opacity-disabled";
@@ -47,7 +47,7 @@ export declare const radioInputStencil: import("@workday/canvas-kit-styling").St
47
47
  backgroundColor: "var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
48
48
  borderColor: "var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)))";
49
49
  } | {
50
- backgroundColor: "var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))";
50
+ backgroundColor: "var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)))";
51
51
  borderColor: "var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)))";
52
52
  };
53
53
  opacity: "--cnvs-sys-opacity-disabled";
package/dist/es6/radio/lib/StyledRadioButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAA8B,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAKzF,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAiH5B,CAAC;AASH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;wBAsCnC,CAAC;AAmBH,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAsB5B,CAAC"}
1
+ {"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAA8B,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAKzF,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAiH5B,CAAC;AASH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;wBAwCnC,CAAC;AAmBH,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAsB5B,CAAC"}
package/dist/es6/radio/lib/StyledRadioButton.js CHANGED
@@ -3,19 +3,19 @@ import React from 'react';
3
3
  import { createComponent } from '@workday/canvas-kit-react/common';
4
4
  import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
5
5
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
6
- import { base, system } from '@workday/canvas-tokens-web';
6
+ import { system } from '@workday/canvas-tokens-web';
7
7
  import { RadioLabelContext } from './RadioLabel';
8
8
  export const radioInputStencil = createStencil({
9
9
  parts: {
10
10
  check: 'cnvs-radio-check',
11
11
  },
12
- base: { name: "6c3g7", styles: "box-sizing:border-box;cursor:pointer;height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;opacity:var(--cnvs-sys-opacity-disabled);&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-default);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{outline:transparent;border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}" },
12
+ base: { name: "1ee0wn", styles: "box-sizing:border-box;cursor:pointer;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));position:absolute;margin:0;opacity:var(--cnvs-sys-opacity-zero);&:focus-visible, &.focus, &:active{outline:0.0625rem solid transparent;}&:disabled, &.disabled{cursor:auto;&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-default);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{outline:transparent;border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.3125rem solid var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ,0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1))) ;}" },
13
13
  modifiers: {
14
14
  variant: {
15
- inverse: { name: "1temsa", styles: "+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}}&:hover + [data-part=\"cnvs-radio-check\"], &.hover + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"], &.focus:hover + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:focus-visible:checked + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover:checked + [data-part=\"cnvs-radio-check\"], &.focus:checked + [data-part=\"cnvs-radio-check\"], &.focus:hover:checked + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}" }
15
+ inverse: { name: "255wwi", styles: "+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}}&:hover + [data-part=\"cnvs-radio-check\"], &.hover + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"]{border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:checked + [data-part=\"cnvs-radio-check\"], &.checked + [data-part=\"cnvs-radio-check\"]{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));border-color:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));}&:focus-visible + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover + [data-part=\"cnvs-radio-check\"], &.focus + [data-part=\"cnvs-radio-check\"], &.focus:hover + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:focus-visible:checked + [data-part=\"cnvs-radio-check\"], &:focus-visible:hover:checked + [data-part=\"cnvs-radio-check\"], &.focus:checked + [data-part=\"cnvs-radio-check\"], &.focus:hover:checked + [data-part=\"cnvs-radio-check\"]{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-contrast-default) ,0 0 0 0.25rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))) ;}" }
16
16
  }
17
17
  }
18
- }, "radio-input-edcf25");
18
+ }, "radio-input-374248");
19
19
  const StyledRadioInput = createComponent('input')({
20
20
  displayName: 'StyledRadioInput',
21
21
  Component: ({ children, variant, ...elemProps }, ref, Element) => {
@@ -23,16 +23,16 @@ const StyledRadioInput = createComponent('input')({
23
23
  },
24
24
  });
25
25
  export const radioInputWrapperStencil = createStencil({
26
- base: { name: "3g4drg", styles: "box-sizing:border-box;height:var(--cnvs-base-size-225, 1.125rem);width:var(--cnvs-base-size-225, 1.125rem);flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:var(--cnvs-base-size-225, 1.125rem);transition:box-shadow 150ms ease-out;width:var(--cnvs-base-size-225, 1.125rem);pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}" },
26
+ base: { name: "1b70ml", styles: "box-sizing:border-box;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));flex:0 0 auto;align-items:center;justify-content:center;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));transition:box-shadow 150ms ease-out;width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 0.25rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}" },
27
27
  modifiers: {
28
28
  variant: {
29
- inverse: { name: "3sqt5b", styles: "&:hover:before, &.hover:before{box-shadow:0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}" }
29
+ inverse: { name: "1m3s54", styles: "&:hover:before, &.hover:before{box-shadow:0 0 0 0.25rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));}" }
30
30
  },
31
31
  disabled: {
32
- true: { name: "7cym2", styles: "opacity:var(--cnvs-sys-opacity-disabled);&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
32
+ true: { name: "3z3h5n", styles: "opacity:var(--cnvs-sys-opacity-disabled);&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
33
33
  }
34
34
  }
35
- }, "radio-input-wrapper-7ebbb3");
35
+ }, "radio-input-wrapper-16420d");
36
36
  const RadioInputWrapper = createComponent(Flex)({
37
37
  displayName: 'RadioInputWrapper',
38
38
  Component: ({ children, variant, ...elemProps }, ref, Element) => {
package/dist/es6/switch/lib/SwitchBackground.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
- import { base, system } from '@workday/canvas-tokens-web';
4
+ import { system } from '@workday/canvas-tokens-web';
5
5
  export const switchBackgroundStencil = createStencil({
6
- base: { name: "27st9r", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;border:0.0625rem solid transparent;height:var(--cnvs-base-size-225, 1.125rem);width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:0 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-accent-muted-soft, var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)));" }
7
- }, "switch-background-71891f");
6
+ base: { name: "onff2", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;border:0.0625rem solid transparent;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:0 0.0625rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));" }
7
+ }, "switch-background-fbb710");
8
8
  export const SwitchBackground = createComponent('div')({
9
9
  displayName: 'SwitchBackground',
10
10
  Component: ({ children, ...elemProps }, ref, Element) => {
package/dist/es6/switch/lib/SwitchCircle.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
- import { base, system } from '@workday/canvas-tokens-web';
4
+ import { system } from '@workday/canvas-tokens-web';
5
5
  export const switchCircleStencil = createStencil({
6
- base: { name: "3q13oq", styles: "box-sizing:border-box;width:var(--cnvs-base-size-150, 0.75rem);height:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid transparent;box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-sys-color-fg-inverse);transform:translateX(0);" },
6
+ base: { name: "3kbufe", styles: "box-sizing:border-box;width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid transparent;box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-sys-color-fg-inverse);transform:translateX(0);" },
7
7
  modifiers: {
8
8
  checked: {
9
- true: { name: "3d8tjr", styles: "transform:translateX(1rem);:dir(rtl){transform:translateX(-1rem);}" }
9
+ true: { name: "1blgnr", styles: "transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" }
10
10
  }
11
11
  }
12
- }, "switch-circle-1553b5");
12
+ }, "switch-circle-f808e0");
13
13
  export const SwitchCircle = createComponent('div')({
14
14
  displayName: 'SwitchCircle',
15
15
  Component: ({ checked, ...elemProps }, ref, Element) => {
package/dist/es6/switch/lib/SwitchContainer.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
- import { base, system } from '@workday/canvas-tokens-web';
4
+ import { system } from '@workday/canvas-tokens-web';
5
5
  export const switchContainerStencil = createStencil({
6
- base: { name: "3elj35", styles: "box-sizing:border-box;position:relative;margin-block-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));height:var(--cnvs-base-size-225, 1.125rem);width:2.125rem;" }
7
- }, "switch-container-0724f3");
6
+ base: { name: "4cu5ut", styles: "box-sizing:border-box;position:relative;margin-block-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;" }
7
+ }, "switch-container-f03251");
8
8
  export const SwitchContainer = createComponent('div')({
9
9
  displayName: 'SwitchContainer',
10
10
  Component: ({ children, ...elemProps }, ref, Element) => {
package/dist/es6/switch/lib/SwitchIcon.js CHANGED
@@ -5,7 +5,7 @@ import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling
5
5
  import { checkSmallIcon, xSmallIcon } from '@workday/canvas-system-icons-web';
6
6
  import { component, system } from '@workday/canvas-tokens-web';
7
7
  export const switchIconStencil = createStencil({
8
- base: { name: "jxtta", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.75rem);:dir(rtl){transform:translateX(-0.75rem);}" },
8
+ base: { name: "jxtta", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" },
9
9
  modifiers: {
10
10
  checked: {
11
11
  true: { name: "4bs4m5", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
package/dist/es6/switch/lib/SwitchInput.js CHANGED
@@ -3,11 +3,11 @@ import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
3
3
  import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { base, system } from '@workday/canvas-tokens-web';
5
5
  export const switchInputStencil = createStencil({
6
- base: { name: "gzg1j", styles: "box-sizing:border-box;display:flex;position:absolute;margin:0;height:var(--cnvs-base-size-225, 1.125rem);width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));opacity:0;cursor:pointer;& ~ div:first-of-type{outline-offset:0.125rem;}&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{outline:0.0625rem solid transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
6
+ base: { name: "3ifvha", styles: "box-sizing:border-box;display:flex;position:absolute;margin:0;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));opacity:0;cursor:pointer;& ~ div:first-of-type{outline-offset:0.125rem;}&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{outline:0.0625rem solid transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
7
7
  modifiers: {
8
8
  error: {
9
- error: { name: "42czuu", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),\n 0 0 0 0.3125rem transparent;}" },
10
- caution: { name: "4c4ydd", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}" }
9
+ error: { name: "wwp3s", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),\n 0 0 0 0.3125rem transparent;}" },
10
+ caution: { name: "1x2tpo", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}" }
11
11
  }
12
12
  }
13
13
  }, "switch-input-cce660");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "16.0.0-alpha.0441-next.0",
3
+ "version": "16.0.0-alpha.0445-next.0",
4
4
  "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.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -48,8 +48,8 @@
48
48
  "dependencies": {
49
49
  "@emotion/react": "^11.7.1",
50
50
  "@emotion/styled": "^11.6.0",
51
- "@workday/canvas-kit-react": "^16.0.0-alpha.0441-next.0",
52
- "@workday/canvas-kit-styling": "^16.0.0-alpha.0441-next.0",
51
+ "@workday/canvas-kit-react": "^16.0.0-alpha.0445-next.0",
52
+ "@workday/canvas-kit-styling": "^16.0.0-alpha.0445-next.0",
53
53
  "@workday/canvas-system-icons-web": "4.0.4",
54
54
  "@workday/canvas-tokens-web": "4.4.0-beta.3",
55
55
  "@workday/design-assets-types": "^0.3.0"
@@ -60,5 +60,5 @@
60
60
  "react-hook-form": "7.36.1",
61
61
  "yup": "^0.32.11"
62
62
  },
63
- "gitHead": "df9a69acd1329b7bc14a225dfbe46d4cfe3265c0"
63
+ "gitHead": "fc927ea8a9cdb16ad227bbfc5d843dba09009b43"
64
64
  }
package/radio/lib/RadioGroup.tsx CHANGED
@@ -1,4 +1,9 @@
1
- import {ErrorType, Themeable, createContainer} from '@workday/canvas-kit-react/common';
1
+ import {
2
+ ErrorType,
3
+ Themeable,
4
+ cornerShapeStencil,
5
+ createContainer,
6
+ } from '@workday/canvas-kit-react/common';
2
7
  import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
3
8
  import {CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
4
9
  import {base, system} from '@workday/canvas-tokens-web';
@@ -18,12 +23,13 @@ export interface RadioGroupProps extends Themeable, CSProps, FlexProps {
18
23
  * Styles for RadioGroup
19
24
  */
20
25
  const radioGroupStencil = createStencil({
26
+ extends: cornerShapeStencil,
21
27
  base: {
28
+ [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
22
29
  display: 'flex',
23
30
  flexDirection: 'column',
24
- borderRadius: system.legacy.shape.md,
25
31
  gap: system.legacy.gap.sm,
26
- padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`,
32
+ padding: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`,
27
33
  margin: `0 ${calc.negate(base.legacy.size150)}`,
28
34
  transition: '100ms box-shadow',
29
35
  width: 'fit-content',
@@ -32,10 +38,8 @@ const radioGroupStencil = createStencil({
32
38
  error: {
33
39
  error: {
34
40
  boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
35
- backgroundColor: system.legacy.color.brand.surface.critical.default,
36
41
  },
37
42
  caution: {
38
- backgroundColor: system.legacy.color.brand.surface.caution.default,
39
43
  boxShadow: `inset 0 0 0 ${px2rem(1)} ${system.legacy.color.brand.focus.caution.inner}, inset 0 0 0 ${px2rem(3)} ${system.legacy.color.brand.border.caution}`,
40
44
  },
41
45
  },
package/radio/lib/RadioLabel.tsx CHANGED
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import {ExtractProps, Themeable, createSubcomponent} from '@workday/canvas-kit-react/common';
4
4
  import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
5
5
  import {CSProps, createStencil} from '@workday/canvas-kit-styling';
6
- import {base, system} from '@workday/canvas-tokens-web';
6
+ import {system} from '@workday/canvas-tokens-web';
7
7
 
8
8
  import {RadioInput} from './RadioInput';
9
9
  import {RadioText} from './RadioText';
@@ -28,7 +28,7 @@ export interface RadioLabelProps
28
28
  const radioLabelStencil = createStencil({
29
29
  base: {
30
30
  alignItems: 'flex-start',
31
- minHeight: base.legacy.size225,
31
+ minHeight: system.legacy.size.xxxs,
32
32
  position: 'relative',
33
33
  gap: system.legacy.gap.sm,
34
34
  },
package/radio/lib/StyledRadioButton.tsx CHANGED
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import {ExtractProps, StyledType, createComponent} from '@workday/canvas-kit-react/common';
4
4
  import {Box, Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
5
5
  import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
6
- import {base, system} from '@workday/canvas-tokens-web';
6
+ import {system} from '@workday/canvas-tokens-web';
7
7
 
8
8
  import {RadioLabelContext} from './RadioLabel';
9
9
 
@@ -17,23 +17,23 @@ export const radioInputStencil = createStencil({
17
17
  },
18
18
  base: {
19
19
  cursor: 'pointer',
20
- height: base.legacy.size225,
21
- width: base.legacy.size225,
20
+ height: system.legacy.size.xs,
21
+ width: system.legacy.size.xs,
22
22
  borderRadius: system.legacy.shape.full,
23
23
  position: 'absolute',
24
24
  margin: 0,
25
+ opacity: system.opacity.zero,
25
26
  '&:focus-visible, &.focus, &:active': {
26
- outline: 'transparent',
27
+ outline: `${px2rem(1)} solid transparent`,
27
28
  },
28
29
  '&:disabled, &.disabled': {
29
30
  cursor: 'auto',
30
- opacity: system.opacity.disabled,
31
31
  // This creates the inner circle when the Radio is checked.
32
32
  // The backgroundColor represents the dot in the middle of the radio.
33
33
  // The borderColor represents the border around the middle dot of the radio.
34
34
  '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
35
35
  backgroundColor: system.legacy.color.surface.default, // inner circle background color
36
- border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.primary}`, // inner circle border color
36
+ border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.positive}`, // inner circle border color
37
37
  },
38
38
  },
39
39
 
@@ -45,8 +45,8 @@ export const radioInputStencil = createStencil({
45
45
  backgroundColor: system.color.bg.default,
46
46
  boxSizing: 'border-box',
47
47
  border: `${px2rem(1)} solid ${system.color.border.input.default}`,
48
- height: base.legacy.size225,
49
- width: base.legacy.size225,
48
+ height: system.legacy.size.xxxs,
49
+ width: system.legacy.size.xxxs,
50
50
  borderRadius: system.legacy.shape.full,
51
51
  justifyContent: 'center',
52
52
  pointerEvents: 'none',
@@ -69,7 +69,7 @@ export const radioInputStencil = createStencil({
69
69
  // The borderColor represents the border around the middle dot of the radio.
70
70
  '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
71
71
  backgroundColor: system.legacy.color.surface.default, // inner circle background color
72
- border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.primary}`, // inner circle border color
72
+ border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.positive}`, // inner circle border color
73
73
  },
74
74
 
75
75
  '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check':
@@ -96,7 +96,7 @@ export const radioInputStencil = createStencil({
96
96
  // The backgroundColor represents the dot in the middle of the radio.
97
97
  // The borderColor represents the border around the middle dot of the radio.
98
98
  [`&:checked + ${checkPart}, &.checked + ${checkPart}`]: {
99
- backgroundColor: system.legacy.color.brand.accent.primary, // inner circle background color
99
+ backgroundColor: system.legacy.color.brand.accent.positive, // inner circle background color
100
100
  borderColor: system.legacy.color.border.inverse.default, // inner circle border color
101
101
  },
102
102
  },
@@ -135,29 +135,31 @@ const StyledRadioInput = createComponent('input')<StyledRadioButtonProps & Style
135
135
 
136
136
  export const radioInputWrapperStencil = createStencil({
137
137
  base: {
138
- height: base.legacy.size225,
139
- width: base.legacy.size225,
138
+ height: system.legacy.size.xxs,
139
+ width: system.legacy.size.xxs,
140
140
  flex: '0 0 auto',
141
+ alignItems: 'center',
142
+ justifyContent: 'center',
141
143
  // Hover Ripple element
142
144
  '::before': {
143
145
  content: "''",
144
146
  position: 'absolute',
145
147
  borderRadius: system.legacy.shape.full,
146
- height: base.legacy.size225,
148
+ height: system.legacy.size.xxxs,
147
149
  transition: 'box-shadow 150ms ease-out',
148
- width: base.legacy.size225,
150
+ width: system.legacy.size.xxxs,
149
151
  pointerEvents: 'none',
150
152
  opacity: system.opacity.full,
151
153
  },
152
154
  '&:hover:before, &.hover:before': {
153
- boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.default}`,
155
+ boxShadow: `0 0 0 ${px2rem(4)} ${system.legacy.color.surface.overlay.hover.default}`,
154
156
  },
155
157
  },
156
158
  modifiers: {
157
159
  variant: {
158
160
  inverse: {
159
161
  '&:hover:before, &.hover:before': {
160
- boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.inverse}`,
162
+ boxShadow: `0 0 0 ${px2rem(4)} ${system.legacy.color.surface.overlay.hover.inverse}`,
161
163
  },
162
164
  },
163
165
  },
package/switch/lib/SwitchBackground.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import {createComponent} from '@workday/canvas-kit-react/common';
2
2
  import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
3
- import {base, system} from '@workday/canvas-tokens-web';
3
+ import {system} from '@workday/canvas-tokens-web';
4
4
 
5
5
  export const switchBackgroundStencil = createStencil({
6
6
  base: {
@@ -10,14 +10,14 @@ export const switchBackgroundStencil = createStencil({
10
10
  pointerEvents: 'none',
11
11
  // This is used in "High Contrast Mode" to show a border on the Switch background.
12
12
  border: `${px2rem(1)} solid transparent`,
13
- height: base.legacy.size225,
13
+ height: system.legacy.size.xxs,
14
14
  // This value is in the spec and there is no token for this size.
15
15
  // calc() does not work inside of cssVar() as the first value.
16
16
  width: px2rem(34),
17
17
  borderRadius: system.legacy.shape.full,
18
- padding: `0 ${px2rem(2)}`,
18
+ padding: `0 ${px2rem(1)}`,
19
19
  transition: 'background-color 200ms ease',
20
- backgroundColor: system.legacy.color.accent.muted.soft,
20
+ backgroundColor: system.legacy.color.accent.muted.default,
21
21
  },
22
22
  });
23
23
 
package/switch/lib/SwitchCircle.tsx CHANGED
@@ -1,13 +1,13 @@
1
1
  import {createComponent} from '@workday/canvas-kit-react/common';
2
2
  import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
3
- import {base, system} from '@workday/canvas-tokens-web';
3
+ import {system} from '@workday/canvas-tokens-web';
4
4
 
5
5
  import {SwitchProps} from './Switch';
6
6
 
7
7
  export const switchCircleStencil = createStencil({
8
8
  base: {
9
- width: base.legacy.size150,
10
- height: base.legacy.size150,
9
+ width: system.legacy.size.xxxs,
10
+ height: system.legacy.size.xxxs,
11
11
  borderRadius: system.legacy.shape.full,
12
12
  // This is used in "High Contrast Mode" to show a border on the Switch thumb.
13
13
  border: `${px2rem(1)} solid transparent`,
@@ -20,9 +20,9 @@ export const switchCircleStencil = createStencil({
20
20
  modifiers: {
21
21
  checked: {
22
22
  true: {
23
- transform: `translateX(${px2rem(16)})`,
23
+ transform: `translateX(${px2rem(14)})`,
24
24
  ':dir(rtl)': {
25
- transform: `translateX(${px2rem(-16)})`,
25
+ transform: `translateX(${px2rem(-14)})`,
26
26
  },
27
27
  },
28
28
  },
package/switch/lib/SwitchContainer.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  import {createComponent} from '@workday/canvas-kit-react/common';
2
2
  import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
3
- import {base, system} from '@workday/canvas-tokens-web';
3
+ import {system} from '@workday/canvas-tokens-web';
4
4
 
5
5
  export const switchContainerStencil = createStencil({
6
6
  base: {
7
7
  position: 'relative',
8
8
  marginBlockStart: system.legacy.gap.xs,
9
- height: base.legacy.size225,
9
+ height: system.legacy.size.xxs,
10
10
  // This value is in the spec and there is no token for this size.
11
11
  // calc() does not work inside of cssVar() as the first value.
12
12
  width: px2rem(34),
package/switch/lib/SwitchIcon.tsx CHANGED
@@ -13,9 +13,9 @@ export const switchIconStencil = createStencil({
13
13
  position: 'absolute',
14
14
  transition: 'transform 0ms',
15
15
  pointerEvents: 'none',
16
- transform: `translateX(${px2rem(12)})`,
16
+ transform: `translateX(${px2rem(14)})`,
17
17
  ':dir(rtl)': {
18
- transform: `translateX(${px2rem(-12)})`,
18
+ transform: `translateX(${px2rem(-14)})`,
19
19
  },
20
20
  },
21
21
  modifiers: {
package/switch/lib/SwitchInput.tsx CHANGED
@@ -10,7 +10,7 @@ export const switchInputStencil = createStencil({
10
10
  position: 'absolute',
11
11
  // This allows for the input to be the same size as the clickable area for the Switch
12
12
  margin: 0,
13
- height: base.legacy.size225,
13
+ height: system.legacy.size.xs,
14
14
  // This value is in the spec and there is no token for this size.
15
15
  // calc() does not work inside of cssVar() as the first value.
16
16
  width: px2rem(34),
@@ -23,7 +23,7 @@ export const switchInputStencil = createStencil({
23
23
  },
24
24
  '&:checked, &.checked': {
25
25
  '& ~ div:first-of-type': {
26
- backgroundColor: system.legacy.color.brand.accent.primary,
26
+ backgroundColor: system.legacy.color.brand.accent.positive,
27
27
  },
28
28
  '&:disabled, &.disabled': {
29
29
  '& ~ div:first-of-type': {