@workday/canvas-kit-preview-react 11.0.0-alpha.764-next.0 → 11.0.0-alpha.765-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 (19) hide show
  1. package/dist/commonjs/form-field/lib/FormField.js +1 -1
  2. package/dist/commonjs/form-field/lib/FormFieldContainer.js +1 -1
  3. package/dist/commonjs/form-field/lib/FormFieldHint.js +1 -1
  4. package/dist/commonjs/form-field/lib/FormFieldLabel.js +2 -2
  5. package/dist/commonjs/radio/lib/RadioGroup.js +1 -1
  6. package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
  7. package/dist/commonjs/radio/lib/RadioText.js +1 -1
  8. package/dist/commonjs/radio/lib/StyledRadioButton.js +2 -2
  9. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +1 -1
  10. package/dist/es6/form-field/lib/FormField.js +1 -1
  11. package/dist/es6/form-field/lib/FormFieldContainer.js +1 -1
  12. package/dist/es6/form-field/lib/FormFieldHint.js +1 -1
  13. package/dist/es6/form-field/lib/FormFieldLabel.js +2 -2
  14. package/dist/es6/radio/lib/RadioGroup.js +1 -1
  15. package/dist/es6/radio/lib/RadioLabel.js +1 -1
  16. package/dist/es6/radio/lib/RadioText.js +1 -1
  17. package/dist/es6/radio/lib/StyledRadioButton.js +2 -2
  18. package/dist/es6/status-indicator/lib/StatusIndicator.js +1 -1
  19. package/package.json +4 -4
package/dist/commonjs/form-field/lib/FormField.js CHANGED
@@ -15,7 +15,7 @@ const FormFieldLabel_1 = require("./FormFieldLabel");
15
15
  const FormFieldHint_1 = require("./FormFieldHint");
16
16
  const FormFieldContainer_1 = require("./FormFieldContainer");
17
17
  const formFieldStencil = canvas_kit_styling_1.createStencil({
18
- base: { name: "6fc20a", styles: "border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
18
+ base: { name: "6fc20a", styles: "box-sizing:border-box;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
19
19
  modifiers: {
20
20
  grow: {
21
21
  true: { name: "59f66e", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
package/dist/commonjs/form-field/lib/FormFieldContainer.js CHANGED
@@ -9,7 +9,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
9
9
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
10
10
  const hooks_1 = require("./hooks");
11
11
  const formFieldContainerStencil = canvas_kit_styling_1.createStencil({
12
- base: { name: "299ca4", styles: "display:flex;flex-direction:column;" }
12
+ base: { name: "299ca4", styles: "box-sizing:border-box;display:flex;flex-direction:column;" }
13
13
  }, "cnvs-preview-form-field-container");
14
14
  exports.FormFieldContainer = common_1.createSubcomponent('div')({
15
15
  displayName: 'FormField.Container',
package/dist/commonjs/form-field/lib/FormFieldHint.js CHANGED
@@ -12,7 +12,7 @@ const hooks_1 = require("./hooks");
12
12
  const text_1 = require("@workday/canvas-kit-react/text");
13
13
  const layout_1 = require("@workday/canvas-kit-react/layout");
14
14
  const formFieldHintStencil = canvas_kit_styling_1.createStencil({
15
- base: { name: "b58835", styles: "margin:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);" },
15
+ base: { name: "b58835", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);" },
16
16
  modifiers: {
17
17
  error: {
18
18
  error: { name: "90c8b0", styles: "color:var(--cnvs-brand-error-base);" },
package/dist/commonjs/form-field/lib/FormFieldLabel.js CHANGED
@@ -11,10 +11,10 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
11
11
  const layout_1 = require("@workday/canvas-kit-react/layout");
12
12
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
13
13
  const formFieldLabelAsteriskStencil = canvas_kit_styling_1.createStencil({
14
- base: { name: "a59d7a", styles: "font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);" }
14
+ base: { name: "a59d7a", styles: "box-sizing:border-box;font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);" }
15
15
  }, "cnvs-preview-form-field-label-asterisk");
16
16
  const formFieldLabelStencil = canvas_kit_styling_1.createStencil({
17
- base: { name: "5443ce", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;" },
17
+ base: { name: "5443ce", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;" },
18
18
  modifiers: {
19
19
  orientation: {
20
20
  horizontal: { name: "ccfa06", styles: "float:left;max-height:var(--cnvs-sys-space-x10);" },
package/dist/commonjs/radio/lib/RadioGroup.js CHANGED
@@ -16,7 +16,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
16
16
  * Styles for RadioGroup
17
17
  */
18
18
  const radioGroupStencil = canvas_kit_styling_1.createStencil({
19
- base: { name: "b2bdc9", styles: "display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:calc(var(--cnvs-sys-space-x1) * -1) calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
19
+ base: { name: "b2bdc9", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:calc(var(--cnvs-sys-space-x1) * -1) calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
20
20
  modifiers: {
21
21
  error: {
22
22
  error: { name: "0ab954", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
package/dist/commonjs/radio/lib/RadioLabel.js CHANGED
@@ -13,7 +13,7 @@ const RadioText_1 = require("./RadioText");
13
13
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
14
14
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
15
15
  const radioLabelStencil = canvas_kit_styling_1.createStencil({
16
- base: { name: "1ec9ca", styles: "align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
16
+ base: { name: "1ec9ca", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
17
17
  }, "cnvs-preview-radio-label");
18
18
  exports.RadioLabelContext = react_1.default.createContext({});
19
19
  exports.RadioLabel = common_1.createSubcomponent('label')({
package/dist/commonjs/radio/lib/RadioText.js CHANGED
@@ -13,7 +13,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
13
13
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
14
14
  const layout_1 = require("@workday/canvas-kit-react/layout");
15
15
  const radioTextStencil = canvas_kit_styling_1.createStencil({
16
- base: { name: "313724", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);cursor:pointer;opacity:1;color:var(--cnvs-base-palette-black-pepper-300);" },
16
+ base: { name: "313724", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);cursor:pointer;opacity:1;color:var(--cnvs-base-palette-black-pepper-300);" },
17
17
  modifiers: {
18
18
  variant: {
19
19
  inverse: { name: "d4304f", styles: "color:var(--cnvs-base-palette-french-vanilla-100);" }
package/dist/commonjs/radio/lib/StyledRadioButton.js CHANGED
@@ -13,7 +13,7 @@ const RadioLabel_1 = require("./RadioLabel");
13
13
  const radioWidth = 18;
14
14
  const radioHeight = 18;
15
15
  const radioInputStencil = canvas_kit_styling_1.createStencil({
16
- base: { name: "075565", styles: "cursor:pointer;opacity:1;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);background-color:var(--cnvs-base-palette-soap-100);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:5px solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-base-palette-licorice-200);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:1;}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-500);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-blueberry-400);box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&: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 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
16
+ base: { name: "075565", styles: "box-sizing:border-box;cursor:pointer;opacity:1;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);background-color:var(--cnvs-base-palette-soap-100);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:5px solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-base-palette-licorice-200);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:1;}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-500);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-blueberry-400);box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&: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 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
17
17
  modifiers: {
18
18
  variant: {
19
19
  inverse: { name: "2dcd3d", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100);border-color:var(--cnvs-base-palette-soap-300);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100);border-color:var(--cnvs-base-palette-licorice-100);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-base-palette-french-vanilla-100);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-base-palette-french-vanilla-100);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-base-palette-black-pepper-400), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100);}" }
@@ -27,7 +27,7 @@ const StyledRadioInput = common_1.createComponent('input')({
27
27
  },
28
28
  });
29
29
  const radioInputWrapperStyles = canvas_kit_styling_1.createStencil({
30
- base: { name: "b3a7ec", styles: "height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:1;}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-base-palette-soap-200);}" },
30
+ base: { name: "b3a7ec", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:1;}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-base-palette-soap-200);}" },
31
31
  modifiers: {
32
32
  variant: {
33
33
  inverse: { name: "d678c6", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
package/dist/commonjs/status-indicator/lib/StatusIndicator.js CHANGED
@@ -14,7 +14,7 @@ const hooks_1 = require("./hooks");
14
14
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
15
15
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
16
16
  const statusIndicatorStencil = canvas_kit_styling_1.createStencil({
17
- base: { name: "e96360", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1)};" },
17
+ base: { name: "e96360", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1)};" },
18
18
  modifiers: {
19
19
  gray: {
20
20
  high: { name: "809d63", styles: "color:var(--cnvs-base-palette-french-vanilla-100);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);background:var(--cnvs-base-palette-licorice-300);" },
package/dist/es6/form-field/lib/FormField.js CHANGED
@@ -9,7 +9,7 @@ import { FormFieldLabel } from './FormFieldLabel';
9
9
  import { FormFieldHint } from './FormFieldHint';
10
10
  import { FormFieldContainer } from './FormFieldContainer';
11
11
  const formFieldStencil = createStencil({
12
- base: { name: "6fc20a", styles: "border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
12
+ base: { name: "6fc20a", styles: "box-sizing:border-box;border:none;padding:var(--cnvs-sys-space-zero);margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);" },
13
13
  modifiers: {
14
14
  grow: {
15
15
  true: { name: "59f66e", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
package/dist/es6/form-field/lib/FormFieldContainer.js CHANGED
@@ -3,7 +3,7 @@ import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
3
  import { handleCsProp, createStencil } from '@workday/canvas-kit-styling';
4
4
  import { useFormFieldModel } from './hooks';
5
5
  const formFieldContainerStencil = createStencil({
6
- base: { name: "299ca4", styles: "display:flex;flex-direction:column;" }
6
+ base: { name: "299ca4", styles: "box-sizing:border-box;display:flex;flex-direction:column;" }
7
7
  }, "cnvs-preview-form-field-container");
8
8
  export const FormFieldContainer = createSubcomponent('div')({
9
9
  displayName: 'FormField.Container',
package/dist/es6/form-field/lib/FormFieldHint.js CHANGED
@@ -6,7 +6,7 @@ import { useFormFieldHint, useFormFieldModel } from './hooks';
6
6
  import { Subtext } from '@workday/canvas-kit-react/text';
7
7
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
8
8
  const formFieldHintStencil = createStencil({
9
- base: { name: "b58835", styles: "margin:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);" },
9
+ base: { name: "b58835", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);" },
10
10
  modifiers: {
11
11
  error: {
12
12
  error: { name: "90c8b0", styles: "color:var(--cnvs-brand-error-base);" },
package/dist/es6/form-field/lib/FormFieldLabel.js CHANGED
@@ -5,10 +5,10 @@ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
5
5
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
6
6
  import { brand, system } from '@workday/canvas-tokens-web';
7
7
  const formFieldLabelAsteriskStencil = createStencil({
8
- base: { name: "a59d7a", styles: "font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);" }
8
+ base: { name: "a59d7a", styles: "box-sizing:border-box;font-size:var(--cnvs-sys-font-size-body-large);font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-brand-error-base);text-decoration:unset;margin-inline-start:var(--cnvs-sys-space-x1);" }
9
9
  }, "cnvs-preview-form-field-label-asterisk");
10
10
  const formFieldLabelStencil = createStencil({
11
- base: { name: "5443ce", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;" },
11
+ base: { name: "5443ce", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);padding-inline-start:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-x1);display:flex;align-items:center;min-width:11.25rem;" },
12
12
  modifiers: {
13
13
  orientation: {
14
14
  horizontal: { name: "ccfa06", styles: "float:left;max-height:var(--cnvs-sys-space-x10);" },
package/dist/es6/radio/lib/RadioGroup.js CHANGED
@@ -10,7 +10,7 @@ import { brand, system } from '@workday/canvas-tokens-web';
10
10
  * Styles for RadioGroup
11
11
  */
12
12
  const radioGroupStencil = createStencil({
13
- base: { name: "b2bdc9", styles: "display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:calc(var(--cnvs-sys-space-x1) * -1) calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
13
+ base: { name: "b2bdc9", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:calc(var(--cnvs-sys-space-x1) * -1) calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
14
14
  modifiers: {
15
15
  error: {
16
16
  error: { name: "0ab954", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
package/dist/es6/radio/lib/RadioLabel.js CHANGED
@@ -7,7 +7,7 @@ import { RadioText } from './RadioText';
7
7
  import { createStencil } from '@workday/canvas-kit-styling';
8
8
  import { system } from '@workday/canvas-tokens-web';
9
9
  const radioLabelStencil = createStencil({
10
- base: { name: "1ec9ca", styles: "align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
10
+ base: { name: "1ec9ca", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
11
11
  }, "cnvs-preview-radio-label");
12
12
  export const RadioLabelContext = React.createContext({});
13
13
  export const RadioLabel = createSubcomponent('label')({
package/dist/es6/radio/lib/RadioText.js CHANGED
@@ -7,7 +7,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
7
7
  import { base, system } from '@workday/canvas-tokens-web';
8
8
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
9
9
  const radioTextStencil = createStencil({
10
- base: { name: "313724", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);cursor:pointer;opacity:1;color:var(--cnvs-base-palette-black-pepper-300);" },
10
+ base: { name: "313724", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);cursor:pointer;opacity:1;color:var(--cnvs-base-palette-black-pepper-300);" },
11
11
  modifiers: {
12
12
  variant: {
13
13
  inverse: { name: "d4304f", styles: "color:var(--cnvs-base-palette-french-vanilla-100);" }
package/dist/es6/radio/lib/StyledRadioButton.js CHANGED
@@ -7,7 +7,7 @@ import { RadioLabelContext } from './RadioLabel';
7
7
  const radioWidth = 18;
8
8
  const radioHeight = 18;
9
9
  const radioInputStencil = createStencil({
10
- base: { name: "075565", styles: "cursor:pointer;opacity:1;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);background-color:var(--cnvs-base-palette-soap-100);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:5px solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-base-palette-licorice-200);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:1;}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-500);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-blueberry-400);box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&: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 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
10
+ base: { name: "075565", styles: "box-sizing:border-box;cursor:pointer;opacity:1;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);background-color:var(--cnvs-base-palette-soap-100);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:5px solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-base-palette-licorice-200);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:1;}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-500);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-blueberry-400);box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&: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 2px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
11
11
  modifiers: {
12
12
  variant: {
13
13
  inverse: { name: "2dcd3d", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100);border-color:var(--cnvs-base-palette-soap-300);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100);border-color:var(--cnvs-base-palette-licorice-100);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-base-palette-french-vanilla-100);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-base-palette-french-vanilla-100);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-base-palette-black-pepper-400), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100);}" }
@@ -21,7 +21,7 @@ const StyledRadioInput = createComponent('input')({
21
21
  },
22
22
  });
23
23
  const radioInputWrapperStyles = createStencil({
24
- base: { name: "b3a7ec", styles: "height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:1;}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-base-palette-soap-200);}" },
24
+ base: { name: "b3a7ec", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:1;}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-base-palette-soap-200);}" },
25
25
  modifiers: {
26
26
  variant: {
27
27
  inverse: { name: "d678c6", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
package/dist/es6/status-indicator/lib/StatusIndicator.js CHANGED
@@ -8,7 +8,7 @@ import { useStatusIndicatorModel } from './hooks';
8
8
  import { createStencil, px2rem } from '@workday/canvas-kit-styling';
9
9
  import { base, system } from '@workday/canvas-tokens-web';
10
10
  const statusIndicatorStencil = createStencil({
11
- base: { name: "e96360", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1)};" },
11
+ base: { name: "e96360", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1)};" },
12
12
  modifiers: {
13
13
  gray: {
14
14
  high: { name: "809d63", styles: "color:var(--cnvs-base-palette-french-vanilla-100);--cnvs-preview-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);background:var(--cnvs-base-palette-licorice-300);" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "11.0.0-alpha.764-next.0",
3
+ "version": "11.0.0-alpha.765-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",
@@ -46,8 +46,8 @@
46
46
  "dependencies": {
47
47
  "@emotion/react": "^11.7.1",
48
48
  "@emotion/styled": "^11.6.0",
49
- "@workday/canvas-kit-react": "^11.0.0-alpha.764-next.0",
50
- "@workday/canvas-kit-styling": "^11.0.0-alpha.764-next.0",
49
+ "@workday/canvas-kit-react": "^11.0.0-alpha.765-next.0",
50
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.765-next.0",
51
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
52
  "@workday/canvas-tokens-web": "^1.3.0",
53
53
  "@workday/design-assets-types": "^0.2.8"
@@ -58,5 +58,5 @@
58
58
  "react-hook-form": "7.36.1",
59
59
  "yup": "^0.32.11"
60
60
  },
61
- "gitHead": "d76c7698a6761ca15f9d54814fc53db72c183ebe"
61
+ "gitHead": "75a590b82446ba010969a3beb9a74df0571b163c"
62
62
  }