@workday/canvas-kit-preview-react 14.1.19 → 15.0.0-alpha.0008-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 (13) hide show
  1. package/dist/commonjs/pill/lib/Pill.d.ts +29 -29
  2. package/dist/commonjs/pill/lib/Pill.js +3 -3
  3. package/dist/commonjs/pill/lib/PillIconButton.d.ts +58 -58
  4. package/dist/commonjs/pill/lib/PillIconButton.js +1 -1
  5. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts +29 -29
  6. package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +1 -1
  7. package/dist/es6/pill/lib/Pill.d.ts +29 -29
  8. package/dist/es6/pill/lib/Pill.js +3 -3
  9. package/dist/es6/pill/lib/PillIconButton.d.ts +58 -58
  10. package/dist/es6/pill/lib/PillIconButton.js +1 -1
  11. package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts +29 -29
  12. package/dist/es6/segmented-control/lib/SegmentedControlItem.js +1 -1
  13. package/package.json +5 -5
package/dist/commonjs/pill/lib/Pill.d.ts CHANGED
@@ -62,45 +62,45 @@ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<
62
62
  size: {
63
63
  large: {
64
64
  fontWeight: "--cnvs-sys-font-weight-bold";
65
- height: string;
66
- paddingInline: "--cnvs-sys-space-x8";
67
- minWidth: string;
65
+ height: "var(--cnvs-sys-size-xl, 3rem)";
66
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
67
+ minWidth: "--cnvs-base-size-1400";
68
68
  fontFamily: "--cnvs-sys-font-family-default";
69
- lineHeight: "--cnvs-sys-line-height-body-small";
70
- fontSize: "--cnvs-sys-font-size-body-small";
71
- letterSpacing: "--cnvs-base-letter-spacing-200";
69
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
70
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
71
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
72
72
  };
73
73
  medium: {
74
74
  fontWeight: "--cnvs-sys-font-weight-bold";
75
- minWidth: string;
76
- paddingInline: "--cnvs-sys-space-x6";
77
- height: "--cnvs-sys-space-x10";
78
- fontFamily: "--cnvs-sys-font-family-default";
79
- lineHeight: "--cnvs-sys-line-height-subtext-large";
80
- fontSize: "--cnvs-sys-font-size-subtext-large";
81
- letterSpacing: "--cnvs-base-letter-spacing-150";
75
+ minWidth: "--cnvs-base-size-1200";
76
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
77
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
78
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
79
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
80
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
81
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
82
82
  };
83
83
  small: {
84
84
  fontWeight: "--cnvs-sys-font-weight-bold";
85
- height: "--cnvs-sys-space-x8";
86
- minWidth: "--cnvs-sys-space-x20";
87
- paddingInline: "--cnvs-sys-space-x4";
88
- gap: "--cnvs-sys-space-x1";
89
- fontFamily: "--cnvs-sys-font-family-default";
90
- lineHeight: "--cnvs-sys-line-height-subtext-large";
91
- fontSize: "--cnvs-sys-font-size-subtext-large";
92
- letterSpacing: "--cnvs-base-letter-spacing-150";
85
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
86
+ minWidth: "--cnvs-base-size-1000";
87
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
88
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
89
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
90
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
91
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
92
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
93
93
  };
94
94
  extraSmall: {
95
95
  fontWeight: "--cnvs-sys-font-weight-bold";
96
- height: "--cnvs-sys-space-x6";
96
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
97
97
  minWidth: string;
98
- paddingInline: "--cnvs-sys-space-x3";
99
- gap: "--cnvs-sys-space-x1";
100
- fontFamily: "--cnvs-sys-font-family-default";
101
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
102
- fontSize: "--cnvs-sys-font-size-subtext-medium";
103
- letterSpacing: "--cnvs-base-letter-spacing-100";
98
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
99
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
100
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
101
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
102
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
103
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
104
104
  };
105
105
  };
106
106
  grow: {
@@ -111,7 +111,7 @@ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<
111
111
  };
112
112
  iconPosition: {
113
113
  only: {
114
- padding: "--cnvs-sys-space-zero";
114
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
115
115
  };
116
116
  start: {};
117
117
  end: {};
package/dist/commonjs/pill/lib/Pill.js CHANGED
@@ -19,11 +19,11 @@ exports.pillStencil = (0, canvas_kit_styling_1.createStencil)({
19
19
  vars: {
20
20
  maxWidth: '',
21
21
  },
22
- base: { name: "1xo8vu", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-02eca5);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--border-button-85bf0e:var(--cnvs-sys-color-border-input-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);--border-button-85bf0e:var(--cnvs-sys-color-border-input-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-primary-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-border-primary-default);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-disabled);--label-button-85bf0e:var(--cnvs-sys-color-fg-disabled);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-strong);--borderColor-pill-count-d778e9:transparent;}" },
22
+ base: { name: "1xo8vu", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-02eca5);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-primary-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-border-primary-default);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-disabled);--label-button-f6d2bd:var(--cnvs-sys-color-fg-disabled);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-strong);--borderColor-pill-count-d778e9:transparent;}" },
23
23
  modifiers: {
24
24
  variant: {
25
- readOnly: { name: "guhpk", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-container);cursor:default;--background-button-85bf0e:var(--cnvs-sys-color-bg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-container);--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}" },
26
- removable: { name: "3m1js2", styles: "&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:currentColor;}cursor:default;overflow:revert;position:relative;" }
25
+ readOnly: { name: "guhpk", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-container);cursor:default;--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-container);--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}" },
26
+ removable: { name: "3m1js2", styles: "&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:currentColor;}cursor:default;overflow:revert;position:relative;" }
27
27
  }
28
28
  }
29
29
  }, "pill-02eca5");
package/dist/commonjs/pill/lib/PillIconButton.d.ts CHANGED
@@ -9,45 +9,45 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
9
9
  size: {
10
10
  large: {
11
11
  fontWeight: "--cnvs-sys-font-weight-bold";
12
- height: string;
13
- paddingInline: "--cnvs-sys-space-x8";
14
- minWidth: string;
12
+ height: "var(--cnvs-sys-size-xl, 3rem)";
13
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
14
+ minWidth: "--cnvs-base-size-1400";
15
15
  fontFamily: "--cnvs-sys-font-family-default";
16
- lineHeight: "--cnvs-sys-line-height-body-small";
17
- fontSize: "--cnvs-sys-font-size-body-small";
18
- letterSpacing: "--cnvs-base-letter-spacing-200";
16
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
17
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
18
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
19
19
  };
20
20
  medium: {
21
21
  fontWeight: "--cnvs-sys-font-weight-bold";
22
- minWidth: string;
23
- paddingInline: "--cnvs-sys-space-x6";
24
- height: "--cnvs-sys-space-x10";
25
- fontFamily: "--cnvs-sys-font-family-default";
26
- lineHeight: "--cnvs-sys-line-height-subtext-large";
27
- fontSize: "--cnvs-sys-font-size-subtext-large";
28
- letterSpacing: "--cnvs-base-letter-spacing-150";
22
+ minWidth: "--cnvs-base-size-1200";
23
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
24
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
25
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
26
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
27
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
28
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
29
29
  };
30
30
  small: {
31
31
  fontWeight: "--cnvs-sys-font-weight-bold";
32
- height: "--cnvs-sys-space-x8";
33
- minWidth: "--cnvs-sys-space-x20";
34
- paddingInline: "--cnvs-sys-space-x4";
35
- gap: "--cnvs-sys-space-x1";
36
- fontFamily: "--cnvs-sys-font-family-default";
37
- lineHeight: "--cnvs-sys-line-height-subtext-large";
38
- fontSize: "--cnvs-sys-font-size-subtext-large";
39
- letterSpacing: "--cnvs-base-letter-spacing-150";
32
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
33
+ minWidth: "--cnvs-base-size-1000";
34
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
35
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
36
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
37
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
38
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
39
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
40
40
  };
41
41
  extraSmall: {
42
42
  fontWeight: "--cnvs-sys-font-weight-bold";
43
- height: "--cnvs-sys-space-x6";
43
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
44
44
  minWidth: string;
45
- paddingInline: "--cnvs-sys-space-x3";
46
- gap: "--cnvs-sys-space-x1";
47
- fontFamily: "--cnvs-sys-font-family-default";
48
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
49
- fontSize: "--cnvs-sys-font-size-subtext-medium";
50
- letterSpacing: "--cnvs-base-letter-spacing-100";
45
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
46
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
47
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
48
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
49
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
50
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
51
51
  };
52
52
  };
53
53
  grow: {
@@ -58,7 +58,7 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
58
58
  };
59
59
  iconPosition: {
60
60
  only: {
61
- padding: "--cnvs-sys-space-zero";
61
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
62
62
  };
63
63
  start: {};
64
64
  end: {};
@@ -75,45 +75,45 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
75
75
  size: {
76
76
  large: {
77
77
  fontWeight: "--cnvs-sys-font-weight-bold";
78
- height: string;
79
- paddingInline: "--cnvs-sys-space-x8";
80
- minWidth: string;
78
+ height: "var(--cnvs-sys-size-xl, 3rem)";
79
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
80
+ minWidth: "--cnvs-base-size-1400";
81
81
  fontFamily: "--cnvs-sys-font-family-default";
82
- lineHeight: "--cnvs-sys-line-height-body-small";
83
- fontSize: "--cnvs-sys-font-size-body-small";
84
- letterSpacing: "--cnvs-base-letter-spacing-200";
82
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
83
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
84
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
85
85
  };
86
86
  medium: {
87
87
  fontWeight: "--cnvs-sys-font-weight-bold";
88
- minWidth: string;
89
- paddingInline: "--cnvs-sys-space-x6";
90
- height: "--cnvs-sys-space-x10";
91
- fontFamily: "--cnvs-sys-font-family-default";
92
- lineHeight: "--cnvs-sys-line-height-subtext-large";
93
- fontSize: "--cnvs-sys-font-size-subtext-large";
94
- letterSpacing: "--cnvs-base-letter-spacing-150";
88
+ minWidth: "--cnvs-base-size-1200";
89
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
90
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
91
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
92
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
93
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
94
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
95
95
  };
96
96
  small: {
97
97
  fontWeight: "--cnvs-sys-font-weight-bold";
98
- height: "--cnvs-sys-space-x8";
99
- minWidth: "--cnvs-sys-space-x20";
100
- paddingInline: "--cnvs-sys-space-x4";
101
- gap: "--cnvs-sys-space-x1";
102
- fontFamily: "--cnvs-sys-font-family-default";
103
- lineHeight: "--cnvs-sys-line-height-subtext-large";
104
- fontSize: "--cnvs-sys-font-size-subtext-large";
105
- letterSpacing: "--cnvs-base-letter-spacing-150";
98
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
99
+ minWidth: "--cnvs-base-size-1000";
100
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
101
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
102
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
103
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
104
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
105
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
106
106
  };
107
107
  extraSmall: {
108
108
  fontWeight: "--cnvs-sys-font-weight-bold";
109
- height: "--cnvs-sys-space-x6";
109
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
110
110
  minWidth: string;
111
- paddingInline: "--cnvs-sys-space-x3";
112
- gap: "--cnvs-sys-space-x1";
113
- fontFamily: "--cnvs-sys-font-family-default";
114
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
115
- fontSize: "--cnvs-sys-font-size-subtext-medium";
116
- letterSpacing: "--cnvs-base-letter-spacing-100";
111
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
112
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
113
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
114
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
115
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
116
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
117
117
  };
118
118
  };
119
119
  grow: {
@@ -124,7 +124,7 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
124
124
  };
125
125
  iconPosition: {
126
126
  only: {
127
- padding: "--cnvs-sys-space-zero";
127
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
128
128
  };
129
129
  start: {};
130
130
  end: {};
package/dist/commonjs/pill/lib/PillIconButton.js CHANGED
@@ -12,7 +12,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
12
12
  const layout_1 = require("@workday/canvas-kit-react/layout");
13
13
  exports.pillIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
14
14
  extends: button_1.buttonStencil,
15
- base: { name: "2frebw", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
15
+ base: { name: "2frebw", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
16
16
  }, "pill-icon-button-10e7a0");
17
17
  exports.PillIconButton = (0, common_1.createSubcomponent)('button')({
18
18
  modelHook: usePillModel_1.usePillModel,
package/dist/commonjs/segmented-control/lib/SegmentedControlItem.d.ts CHANGED
@@ -66,45 +66,45 @@ export declare const segmentedControlItemStencil: import("@workday/canvas-kit-st
66
66
  size: {
67
67
  large: {
68
68
  fontWeight: "--cnvs-sys-font-weight-bold";
69
- height: string;
70
- paddingInline: "--cnvs-sys-space-x8";
71
- minWidth: string;
69
+ height: "var(--cnvs-sys-size-xl, 3rem)";
70
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
71
+ minWidth: "--cnvs-base-size-1400";
72
72
  fontFamily: "--cnvs-sys-font-family-default";
73
- lineHeight: "--cnvs-sys-line-height-body-small";
74
- fontSize: "--cnvs-sys-font-size-body-small";
75
- letterSpacing: "--cnvs-base-letter-spacing-200";
73
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
74
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
75
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
76
76
  };
77
77
  medium: {
78
78
  fontWeight: "--cnvs-sys-font-weight-bold";
79
- minWidth: string;
80
- paddingInline: "--cnvs-sys-space-x6";
81
- height: "--cnvs-sys-space-x10";
82
- fontFamily: "--cnvs-sys-font-family-default";
83
- lineHeight: "--cnvs-sys-line-height-subtext-large";
84
- fontSize: "--cnvs-sys-font-size-subtext-large";
85
- letterSpacing: "--cnvs-base-letter-spacing-150";
79
+ minWidth: "--cnvs-base-size-1200";
80
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
81
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
82
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
83
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
84
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
85
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
86
86
  };
87
87
  small: {
88
88
  fontWeight: "--cnvs-sys-font-weight-bold";
89
- height: "--cnvs-sys-space-x8";
90
- minWidth: "--cnvs-sys-space-x20";
91
- paddingInline: "--cnvs-sys-space-x4";
92
- gap: "--cnvs-sys-space-x1";
93
- fontFamily: "--cnvs-sys-font-family-default";
94
- lineHeight: "--cnvs-sys-line-height-subtext-large";
95
- fontSize: "--cnvs-sys-font-size-subtext-large";
96
- letterSpacing: "--cnvs-base-letter-spacing-150";
89
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
90
+ minWidth: "--cnvs-base-size-1000";
91
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
92
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
93
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
94
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
95
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
96
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
97
97
  };
98
98
  extraSmall: {
99
99
  fontWeight: "--cnvs-sys-font-weight-bold";
100
- height: "--cnvs-sys-space-x6";
100
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
101
101
  minWidth: string;
102
- paddingInline: "--cnvs-sys-space-x3";
103
- gap: "--cnvs-sys-space-x1";
104
- fontFamily: "--cnvs-sys-font-family-default";
105
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
106
- fontSize: "--cnvs-sys-font-size-subtext-medium";
107
- letterSpacing: "--cnvs-base-letter-spacing-100";
102
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
103
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
104
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
105
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
106
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
107
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
108
108
  };
109
109
  };
110
110
  grow: {
@@ -115,7 +115,7 @@ export declare const segmentedControlItemStencil: import("@workday/canvas-kit-st
115
115
  };
116
116
  iconPosition: {
117
117
  only: {
118
- padding: "--cnvs-sys-space-zero";
118
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
119
119
  };
120
120
  start: {};
121
121
  end: {};
package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js CHANGED
@@ -37,7 +37,7 @@ const useSegmentedControlModel_1 = require("./hooks/useSegmentedControlModel");
37
37
  const useSegmentedControlItem_1 = require("./hooks/useSegmentedControlItem");
38
38
  exports.segmentedControlItemStencil = (0, canvas_kit_styling_1.createStencil)({
39
39
  extends: button_1.buttonStencil,
40
- base: { name: "20d23", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-x1);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
40
+ base: { name: "20d23", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-f6d2bd:var(--cnvs-sys-shape-x1);--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
41
41
  modifiers: {
42
42
  size: {
43
43
  large: { name: "1sin8t", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
package/dist/es6/pill/lib/Pill.d.ts CHANGED
@@ -62,45 +62,45 @@ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<
62
62
  size: {
63
63
  large: {
64
64
  fontWeight: "--cnvs-sys-font-weight-bold";
65
- height: string;
66
- paddingInline: "--cnvs-sys-space-x8";
67
- minWidth: string;
65
+ height: "var(--cnvs-sys-size-xl, 3rem)";
66
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
67
+ minWidth: "--cnvs-base-size-1400";
68
68
  fontFamily: "--cnvs-sys-font-family-default";
69
- lineHeight: "--cnvs-sys-line-height-body-small";
70
- fontSize: "--cnvs-sys-font-size-body-small";
71
- letterSpacing: "--cnvs-base-letter-spacing-200";
69
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
70
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
71
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
72
72
  };
73
73
  medium: {
74
74
  fontWeight: "--cnvs-sys-font-weight-bold";
75
- minWidth: string;
76
- paddingInline: "--cnvs-sys-space-x6";
77
- height: "--cnvs-sys-space-x10";
78
- fontFamily: "--cnvs-sys-font-family-default";
79
- lineHeight: "--cnvs-sys-line-height-subtext-large";
80
- fontSize: "--cnvs-sys-font-size-subtext-large";
81
- letterSpacing: "--cnvs-base-letter-spacing-150";
75
+ minWidth: "--cnvs-base-size-1200";
76
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
77
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
78
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
79
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
80
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
81
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
82
82
  };
83
83
  small: {
84
84
  fontWeight: "--cnvs-sys-font-weight-bold";
85
- height: "--cnvs-sys-space-x8";
86
- minWidth: "--cnvs-sys-space-x20";
87
- paddingInline: "--cnvs-sys-space-x4";
88
- gap: "--cnvs-sys-space-x1";
89
- fontFamily: "--cnvs-sys-font-family-default";
90
- lineHeight: "--cnvs-sys-line-height-subtext-large";
91
- fontSize: "--cnvs-sys-font-size-subtext-large";
92
- letterSpacing: "--cnvs-base-letter-spacing-150";
85
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
86
+ minWidth: "--cnvs-base-size-1000";
87
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
88
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
89
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
90
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
91
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
92
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
93
93
  };
94
94
  extraSmall: {
95
95
  fontWeight: "--cnvs-sys-font-weight-bold";
96
- height: "--cnvs-sys-space-x6";
96
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
97
97
  minWidth: string;
98
- paddingInline: "--cnvs-sys-space-x3";
99
- gap: "--cnvs-sys-space-x1";
100
- fontFamily: "--cnvs-sys-font-family-default";
101
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
102
- fontSize: "--cnvs-sys-font-size-subtext-medium";
103
- letterSpacing: "--cnvs-base-letter-spacing-100";
98
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
99
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
100
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
101
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
102
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
103
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
104
104
  };
105
105
  };
106
106
  grow: {
@@ -111,7 +111,7 @@ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<
111
111
  };
112
112
  iconPosition: {
113
113
  only: {
114
- padding: "--cnvs-sys-space-zero";
114
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
115
115
  };
116
116
  start: {};
117
117
  end: {};
package/dist/es6/pill/lib/Pill.js CHANGED
@@ -16,11 +16,11 @@ export const pillStencil = createStencil({
16
16
  vars: {
17
17
  maxWidth: '',
18
18
  },
19
- base: { name: "1xo8vu", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-02eca5);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--border-button-85bf0e:var(--cnvs-sys-color-border-input-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);--border-button-85bf0e:var(--cnvs-sys-color-border-input-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-primary-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-border-primary-default);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-disabled);--label-button-85bf0e:var(--cnvs-sys-color-fg-disabled);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-strong);--borderColor-pill-count-d778e9:transparent;}" },
19
+ base: { name: "1xo8vu", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-02eca5);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-primary-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-border-primary-default);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-disabled);--label-button-f6d2bd:var(--cnvs-sys-color-fg-disabled);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-strong);--borderColor-pill-count-d778e9:transparent;}" },
20
20
  modifiers: {
21
21
  variant: {
22
- readOnly: { name: "guhpk", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-container);cursor:default;--background-button-85bf0e:var(--cnvs-sys-color-bg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-container);--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);}" },
23
- removable: { name: "3m1js2", styles: "&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:currentColor;}cursor:default;overflow:revert;position:relative;" }
22
+ readOnly: { name: "guhpk", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-container);cursor:default;--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-container);--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);}" },
23
+ removable: { name: "3m1js2", styles: "&:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:currentColor;}cursor:default;overflow:revert;position:relative;" }
24
24
  }
25
25
  }
26
26
  }, "pill-02eca5");
package/dist/es6/pill/lib/PillIconButton.d.ts CHANGED
@@ -9,45 +9,45 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
9
9
  size: {
10
10
  large: {
11
11
  fontWeight: "--cnvs-sys-font-weight-bold";
12
- height: string;
13
- paddingInline: "--cnvs-sys-space-x8";
14
- minWidth: string;
12
+ height: "var(--cnvs-sys-size-xl, 3rem)";
13
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
14
+ minWidth: "--cnvs-base-size-1400";
15
15
  fontFamily: "--cnvs-sys-font-family-default";
16
- lineHeight: "--cnvs-sys-line-height-body-small";
17
- fontSize: "--cnvs-sys-font-size-body-small";
18
- letterSpacing: "--cnvs-base-letter-spacing-200";
16
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
17
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
18
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
19
19
  };
20
20
  medium: {
21
21
  fontWeight: "--cnvs-sys-font-weight-bold";
22
- minWidth: string;
23
- paddingInline: "--cnvs-sys-space-x6";
24
- height: "--cnvs-sys-space-x10";
25
- fontFamily: "--cnvs-sys-font-family-default";
26
- lineHeight: "--cnvs-sys-line-height-subtext-large";
27
- fontSize: "--cnvs-sys-font-size-subtext-large";
28
- letterSpacing: "--cnvs-base-letter-spacing-150";
22
+ minWidth: "--cnvs-base-size-1200";
23
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
24
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
25
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
26
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
27
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
28
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
29
29
  };
30
30
  small: {
31
31
  fontWeight: "--cnvs-sys-font-weight-bold";
32
- height: "--cnvs-sys-space-x8";
33
- minWidth: "--cnvs-sys-space-x20";
34
- paddingInline: "--cnvs-sys-space-x4";
35
- gap: "--cnvs-sys-space-x1";
36
- fontFamily: "--cnvs-sys-font-family-default";
37
- lineHeight: "--cnvs-sys-line-height-subtext-large";
38
- fontSize: "--cnvs-sys-font-size-subtext-large";
39
- letterSpacing: "--cnvs-base-letter-spacing-150";
32
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
33
+ minWidth: "--cnvs-base-size-1000";
34
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
35
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
36
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
37
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
38
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
39
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
40
40
  };
41
41
  extraSmall: {
42
42
  fontWeight: "--cnvs-sys-font-weight-bold";
43
- height: "--cnvs-sys-space-x6";
43
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
44
44
  minWidth: string;
45
- paddingInline: "--cnvs-sys-space-x3";
46
- gap: "--cnvs-sys-space-x1";
47
- fontFamily: "--cnvs-sys-font-family-default";
48
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
49
- fontSize: "--cnvs-sys-font-size-subtext-medium";
50
- letterSpacing: "--cnvs-base-letter-spacing-100";
45
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
46
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
47
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
48
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
49
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
50
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
51
51
  };
52
52
  };
53
53
  grow: {
@@ -58,7 +58,7 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
58
58
  };
59
59
  iconPosition: {
60
60
  only: {
61
- padding: "--cnvs-sys-space-zero";
61
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
62
62
  };
63
63
  start: {};
64
64
  end: {};
@@ -75,45 +75,45 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
75
75
  size: {
76
76
  large: {
77
77
  fontWeight: "--cnvs-sys-font-weight-bold";
78
- height: string;
79
- paddingInline: "--cnvs-sys-space-x8";
80
- minWidth: string;
78
+ height: "var(--cnvs-sys-size-xl, 3rem)";
79
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
80
+ minWidth: "--cnvs-base-size-1400";
81
81
  fontFamily: "--cnvs-sys-font-family-default";
82
- lineHeight: "--cnvs-sys-line-height-body-small";
83
- fontSize: "--cnvs-sys-font-size-body-small";
84
- letterSpacing: "--cnvs-base-letter-spacing-200";
82
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
83
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
84
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
85
85
  };
86
86
  medium: {
87
87
  fontWeight: "--cnvs-sys-font-weight-bold";
88
- minWidth: string;
89
- paddingInline: "--cnvs-sys-space-x6";
90
- height: "--cnvs-sys-space-x10";
91
- fontFamily: "--cnvs-sys-font-family-default";
92
- lineHeight: "--cnvs-sys-line-height-subtext-large";
93
- fontSize: "--cnvs-sys-font-size-subtext-large";
94
- letterSpacing: "--cnvs-base-letter-spacing-150";
88
+ minWidth: "--cnvs-base-size-1200";
89
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
90
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
91
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
92
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
93
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
94
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
95
95
  };
96
96
  small: {
97
97
  fontWeight: "--cnvs-sys-font-weight-bold";
98
- height: "--cnvs-sys-space-x8";
99
- minWidth: "--cnvs-sys-space-x20";
100
- paddingInline: "--cnvs-sys-space-x4";
101
- gap: "--cnvs-sys-space-x1";
102
- fontFamily: "--cnvs-sys-font-family-default";
103
- lineHeight: "--cnvs-sys-line-height-subtext-large";
104
- fontSize: "--cnvs-sys-font-size-subtext-large";
105
- letterSpacing: "--cnvs-base-letter-spacing-150";
98
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
99
+ minWidth: "--cnvs-base-size-1000";
100
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
101
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
102
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
103
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
104
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
105
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
106
106
  };
107
107
  extraSmall: {
108
108
  fontWeight: "--cnvs-sys-font-weight-bold";
109
- height: "--cnvs-sys-space-x6";
109
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
110
110
  minWidth: string;
111
- paddingInline: "--cnvs-sys-space-x3";
112
- gap: "--cnvs-sys-space-x1";
113
- fontFamily: "--cnvs-sys-font-family-default";
114
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
115
- fontSize: "--cnvs-sys-font-size-subtext-medium";
116
- letterSpacing: "--cnvs-base-letter-spacing-100";
111
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
112
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
113
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
114
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
115
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
116
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
117
117
  };
118
118
  };
119
119
  grow: {
@@ -124,7 +124,7 @@ export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling"
124
124
  };
125
125
  iconPosition: {
126
126
  only: {
127
- padding: "--cnvs-sys-space-zero";
127
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
128
128
  };
129
129
  start: {};
130
130
  end: {};
package/dist/es6/pill/lib/PillIconButton.js CHANGED
@@ -9,7 +9,7 @@ import { system } from '@workday/canvas-tokens-web';
9
9
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
10
10
  export const pillIconButtonStencil = createStencil({
11
11
  extends: buttonStencil,
12
- base: { name: "2frebw", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-85bf0e:var(--cnvs-sys-color-border-transparent);--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
12
+ base: { name: "2frebw", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
13
13
  }, "pill-icon-button-10e7a0");
14
14
  export const PillIconButton = createSubcomponent('button')({
15
15
  modelHook: usePillModel,
package/dist/es6/segmented-control/lib/SegmentedControlItem.d.ts CHANGED
@@ -66,45 +66,45 @@ export declare const segmentedControlItemStencil: import("@workday/canvas-kit-st
66
66
  size: {
67
67
  large: {
68
68
  fontWeight: "--cnvs-sys-font-weight-bold";
69
- height: string;
70
- paddingInline: "--cnvs-sys-space-x8";
71
- minWidth: string;
69
+ height: "var(--cnvs-sys-size-xl, 3rem)";
70
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
71
+ minWidth: "--cnvs-base-size-1400";
72
72
  fontFamily: "--cnvs-sys-font-family-default";
73
- lineHeight: "--cnvs-sys-line-height-body-small";
74
- fontSize: "--cnvs-sys-font-size-body-small";
75
- letterSpacing: "--cnvs-base-letter-spacing-200";
73
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
74
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
75
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
76
76
  };
77
77
  medium: {
78
78
  fontWeight: "--cnvs-sys-font-weight-bold";
79
- minWidth: string;
80
- paddingInline: "--cnvs-sys-space-x6";
81
- height: "--cnvs-sys-space-x10";
82
- fontFamily: "--cnvs-sys-font-family-default";
83
- lineHeight: "--cnvs-sys-line-height-subtext-large";
84
- fontSize: "--cnvs-sys-font-size-subtext-large";
85
- letterSpacing: "--cnvs-base-letter-spacing-150";
79
+ minWidth: "--cnvs-base-size-1200";
80
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
81
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
82
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
83
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
84
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
85
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
86
86
  };
87
87
  small: {
88
88
  fontWeight: "--cnvs-sys-font-weight-bold";
89
- height: "--cnvs-sys-space-x8";
90
- minWidth: "--cnvs-sys-space-x20";
91
- paddingInline: "--cnvs-sys-space-x4";
92
- gap: "--cnvs-sys-space-x1";
93
- fontFamily: "--cnvs-sys-font-family-default";
94
- lineHeight: "--cnvs-sys-line-height-subtext-large";
95
- fontSize: "--cnvs-sys-font-size-subtext-large";
96
- letterSpacing: "--cnvs-base-letter-spacing-150";
89
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
90
+ minWidth: "--cnvs-base-size-1000";
91
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
92
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
93
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
94
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
95
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
96
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
97
97
  };
98
98
  extraSmall: {
99
99
  fontWeight: "--cnvs-sys-font-weight-bold";
100
- height: "--cnvs-sys-space-x6";
100
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
101
101
  minWidth: string;
102
- paddingInline: "--cnvs-sys-space-x3";
103
- gap: "--cnvs-sys-space-x1";
104
- fontFamily: "--cnvs-sys-font-family-default";
105
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
106
- fontSize: "--cnvs-sys-font-size-subtext-medium";
107
- letterSpacing: "--cnvs-base-letter-spacing-100";
102
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
103
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
104
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
105
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
106
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
107
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
108
108
  };
109
109
  };
110
110
  grow: {
@@ -115,7 +115,7 @@ export declare const segmentedControlItemStencil: import("@workday/canvas-kit-st
115
115
  };
116
116
  iconPosition: {
117
117
  only: {
118
- padding: "--cnvs-sys-space-zero";
118
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
119
119
  };
120
120
  start: {};
121
121
  end: {};
package/dist/es6/segmented-control/lib/SegmentedControlItem.js CHANGED
@@ -11,7 +11,7 @@ import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
11
11
  import { useSegmentedControlItem } from './hooks/useSegmentedControlItem';
12
12
  export const segmentedControlItemStencil = createStencil({
13
13
  extends: buttonStencil,
14
- base: { name: "20d23", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-x1);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
14
+ base: { name: "20d23", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-f6d2bd:var(--cnvs-sys-shape-x1);--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-f6d2bd:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-input-default);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
15
15
  modifiers: {
16
16
  size: {
17
17
  large: { name: "1sin8t", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "14.1.19",
3
+ "version": "15.0.0-alpha.0008-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,10 +48,10 @@
48
48
  "dependencies": {
49
49
  "@emotion/react": "^11.7.1",
50
50
  "@emotion/styled": "^11.6.0",
51
- "@workday/canvas-kit-react": "^14.1.19",
52
- "@workday/canvas-kit-styling": "^14.1.19",
51
+ "@workday/canvas-kit-react": "^15.0.0-alpha.0008-next.0",
52
+ "@workday/canvas-kit-styling": "^15.0.0-alpha.0008-next.0",
53
53
  "@workday/canvas-system-icons-web": "^3.0.36",
54
- "@workday/canvas-tokens-web": "^3.1.1",
54
+ "@workday/canvas-tokens-web": "4.0.0-alpha.3",
55
55
  "@workday/design-assets-types": "^0.2.10"
56
56
  },
57
57
  "devDependencies": {
@@ -60,5 +60,5 @@
60
60
  "react-hook-form": "7.36.1",
61
61
  "yup": "^0.32.11"
62
62
  },
63
- "gitHead": "29a5672bb1d695563c5469d21223c15ba0321599"
63
+ "gitHead": "26a8bc06dba5ae759ca62ae8922aeaa7bba7015c"
64
64
  }