@workday/canvas-kit-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 (58) hide show
  1. package/action-bar/lib/ActionBarList.tsx +4 -4
  2. package/button/lib/BaseButton.tsx +50 -45
  3. package/button/lib/DeleteButton.tsx +2 -2
  4. package/button/lib/ExternalHyperlink.tsx +5 -6
  5. package/button/lib/Hyperlink.tsx +1 -1
  6. package/button/lib/PrimaryButton.tsx +2 -2
  7. package/button/lib/SecondaryButton.tsx +2 -2
  8. package/button/lib/TertiaryButton.tsx +25 -25
  9. package/button/lib/ToolbarDropdownButton.tsx +6 -6
  10. package/button/lib/ToolbarIconButton.tsx +5 -5
  11. package/common/lib/forwardFitTokens.ts +61 -3
  12. package/dist/commonjs/action-bar/lib/ActionBarList.d.ts.map +1 -1
  13. package/dist/commonjs/action-bar/lib/ActionBarList.js +2 -2
  14. package/dist/commonjs/button/lib/BaseButton.d.ts +29 -29
  15. package/dist/commonjs/button/lib/BaseButton.d.ts.map +1 -1
  16. package/dist/commonjs/button/lib/BaseButton.js +27 -27
  17. package/dist/commonjs/button/lib/DeleteButton.js +2 -2
  18. package/dist/commonjs/button/lib/ExternalHyperlink.d.ts.map +1 -1
  19. package/dist/commonjs/button/lib/ExternalHyperlink.js +2 -3
  20. package/dist/commonjs/button/lib/Hyperlink.js +4 -4
  21. package/dist/commonjs/button/lib/PrimaryButton.js +3 -3
  22. package/dist/commonjs/button/lib/SecondaryButton.js +3 -3
  23. package/dist/commonjs/button/lib/TertiaryButton.js +18 -18
  24. package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts +29 -29
  25. package/dist/commonjs/button/lib/ToolbarDropdownButton.js +4 -4
  26. package/dist/commonjs/button/lib/ToolbarIconButton.d.ts +58 -58
  27. package/dist/commonjs/button/lib/ToolbarIconButton.js +2 -2
  28. package/dist/commonjs/common/lib/forwardFitTokens.d.ts +59 -0
  29. package/dist/commonjs/common/lib/forwardFitTokens.d.ts.map +1 -1
  30. package/dist/commonjs/common/lib/forwardFitTokens.js +60 -2
  31. package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts +29 -29
  32. package/dist/commonjs/pagination/lib/Pagination/PageButton.js +2 -2
  33. package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js +1 -1
  34. package/dist/commonjs/tabs/lib/TabsItem.js +1 -1
  35. package/dist/es6/action-bar/lib/ActionBarList.d.ts.map +1 -1
  36. package/dist/es6/action-bar/lib/ActionBarList.js +3 -3
  37. package/dist/es6/button/lib/BaseButton.d.ts +29 -29
  38. package/dist/es6/button/lib/BaseButton.d.ts.map +1 -1
  39. package/dist/es6/button/lib/BaseButton.js +30 -30
  40. package/dist/es6/button/lib/DeleteButton.js +3 -3
  41. package/dist/es6/button/lib/ExternalHyperlink.d.ts.map +1 -1
  42. package/dist/es6/button/lib/ExternalHyperlink.js +3 -4
  43. package/dist/es6/button/lib/Hyperlink.js +4 -4
  44. package/dist/es6/button/lib/PrimaryButton.js +4 -4
  45. package/dist/es6/button/lib/SecondaryButton.js +4 -4
  46. package/dist/es6/button/lib/TertiaryButton.js +20 -20
  47. package/dist/es6/button/lib/ToolbarDropdownButton.d.ts +29 -29
  48. package/dist/es6/button/lib/ToolbarDropdownButton.js +5 -5
  49. package/dist/es6/button/lib/ToolbarIconButton.d.ts +58 -58
  50. package/dist/es6/button/lib/ToolbarIconButton.js +3 -3
  51. package/dist/es6/common/lib/forwardFitTokens.d.ts +59 -0
  52. package/dist/es6/common/lib/forwardFitTokens.d.ts.map +1 -1
  53. package/dist/es6/common/lib/forwardFitTokens.js +61 -3
  54. package/dist/es6/pagination/lib/Pagination/PageButton.d.ts +29 -29
  55. package/dist/es6/pagination/lib/Pagination/PageButton.js +2 -2
  56. package/dist/es6/segmented-control/lib/SegmentedControlButton.js +1 -1
  57. package/dist/es6/tabs/lib/TabsItem.js +1 -1
  58. package/package.json +6 -6
package/dist/commonjs/button/lib/ToolbarIconButton.d.ts CHANGED
@@ -9,45 +9,45 @@ export declare const toolbarIconButtonStencil: import("@workday/canvas-kit-styli
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 toolbarIconButtonStencil: import("@workday/canvas-kit-styli
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 toolbarIconButtonStencil: import("@workday/canvas-kit-styli
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 toolbarIconButtonStencil: import("@workday/canvas-kit-styli
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/button/lib/ToolbarIconButton.js CHANGED
@@ -33,8 +33,8 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
33
33
  const icon_1 = require("@workday/canvas-kit-react/icon");
34
34
  exports.toolbarIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
35
35
  extends: BaseButton_1.buttonStencil,
36
- base: { name: "kxe6i", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);height:var(--cnvs-sys-space-x8);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-x1);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:focus-visible, &.focus{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-stronger);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}&[aria-pressed='true']{--color-system-icon-3a4847:var(--cnvs-brand-primary-base);--background-button-85bf0e:var(--cnvs-brand-primary-lightest);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-brand-primary-dark);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);--color-system-icon-3a4847:var(--cnvs-brand-primary-dark);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-brand-primary-lightest);--color-system-icon-3a4847:var(--cnvs-brand-primary-light);}}" }
37
- }, "toolbar-icon-button-5efdf6");
36
+ base: { name: "3bwz16", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8));padding:var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8));--borderRadius-button-f6d2bd:var(--cnvs-sys-shape-xs, var(--cnvs-sys-shape-x1));--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:focus-visible, &.focus{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-stronger);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}&[aria-pressed='true']{--color-system-icon-3a4847:var(--cnvs-brand-primary-base);--background-button-f6d2bd:var(--cnvs-brand-primary-lightest);&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-brand-primary-dark);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);--color-system-icon-3a4847:var(--cnvs-brand-primary-dark);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-brand-primary-lightest);--color-system-icon-3a4847:var(--cnvs-brand-primary-light);}}" }
37
+ }, "toolbar-icon-button-0805ec");
38
38
  exports.ToolbarIconButton = (0, common_1.createComponent)('button')({
39
39
  displayName: 'ToolbarIconButton',
40
40
  Component: ({ onToggleChange, icon, shouldMirrorIcon = false, shouldMirrorIconInRTL = false, toggled, children, ...elemProps }, ref, Element) => {
package/dist/commonjs/common/lib/forwardFitTokens.d.ts CHANGED
@@ -4,7 +4,66 @@
4
4
  export declare const forwardFitTokens: {
5
5
  readonly system: {
6
6
  readonly shape: {
7
+ readonly xs: "var(--cnvs-sys-shape-xs, var(--cnvs-sys-shape-x1))";
7
8
  readonly sm: "var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1-half))";
9
+ readonly full: "var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round))";
10
+ };
11
+ readonly size: {
12
+ readonly xxs: "var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x4))";
13
+ readonly sm: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
14
+ readonly md: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
15
+ readonly lg: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
16
+ readonly xl: "var(--cnvs-sys-size-xl, 3rem)";
17
+ };
18
+ readonly padding: {
19
+ readonly none: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
20
+ readonly xxs: "var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1))";
21
+ readonly xs: "var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2))";
22
+ readonly sm: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
23
+ readonly md: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
24
+ readonly lg: "var(--cnvs-sys-padding-lg, 1.25rem)";
25
+ readonly xl: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
26
+ readonly xxl: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
27
+ };
28
+ readonly fontSize: {
29
+ readonly subtext: {
30
+ readonly lg: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
31
+ readonly md: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
32
+ readonly sm: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small))";
33
+ };
34
+ };
35
+ readonly gap: {
36
+ readonly none: "var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero))";
37
+ readonly xs: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
38
+ readonly sm: "var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2))";
39
+ readonly md: "var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4))";
40
+ };
41
+ readonly type: {
42
+ readonly subtext: {
43
+ readonly lg: {
44
+ readonly fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
45
+ readonly fontWeight: "var(--cnvs-sys-font-weight-normal, var(--cnvs-sys-font-weight-normal))";
46
+ readonly lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
47
+ readonly fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
48
+ readonly letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
49
+ };
50
+ readonly md: {
51
+ readonly fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
52
+ readonly fontWeight: "var(--cnvs-sys-font-weight-normal, var(--cnvs-sys-font-weight-normal))";
53
+ readonly lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
54
+ readonly fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
55
+ readonly letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
56
+ };
57
+ };
58
+ readonly body: {
59
+ readonly sm: {
60
+ readonly fontFamily: "--cnvs-sys-font-family-default";
61
+ readonly fontWeight: "--cnvs-sys-font-weight-normal";
62
+ readonly lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
63
+ readonly fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
64
+ readonly letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
65
+ };
66
+ };
8
67
  };
9
68
  };
10
69
  };
package/dist/commonjs/common/lib/forwardFitTokens.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"forwardFitTokens.d.ts","sourceRoot":"","sources":["../../../../common/lib/forwardFitTokens.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;CAOnB,CAAC"}
1
+ {"version":3,"file":"forwardFitTokens.d.ts","sourceRoot":"","sources":["../../../../common/lib/forwardFitTokens.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEnB,CAAC"}
package/dist/commonjs/common/lib/forwardFitTokens.js CHANGED
@@ -9,8 +9,66 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
9
9
  exports.forwardFitTokens = {
10
10
  system: {
11
11
  shape: {
12
- //TODO: in v4 Tokens and v15, we should replace this forward fit token with the actual token value
13
- sm: (0, canvas_kit_styling_1.cssVar)('--cnvs-sys-shape-sm', canvas_tokens_web_1.system.shape.x1Half),
12
+ xs: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.shape.xs, canvas_tokens_web_1.system.shape.x1),
13
+ sm: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.shape.sm, canvas_tokens_web_1.system.shape.x1Half),
14
+ full: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.shape.full, canvas_tokens_web_1.system.shape.round),
15
+ },
16
+ size: {
17
+ xxs: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.size.xxs, canvas_tokens_web_1.system.space.x4),
18
+ sm: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.size.sm, canvas_tokens_web_1.system.space.x6),
19
+ md: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.size.md, canvas_tokens_web_1.system.space.x8),
20
+ lg: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.size.lg, canvas_tokens_web_1.system.space.x10),
21
+ xl: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.size.xl, '3rem'),
22
+ },
23
+ padding: {
24
+ none: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.padding.none, canvas_tokens_web_1.system.space.zero),
25
+ xxs: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.padding.xxs, canvas_tokens_web_1.system.space.x1),
26
+ xs: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.padding.xs, canvas_tokens_web_1.system.space.x2),
27
+ sm: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.padding.sm, canvas_tokens_web_1.system.space.x3),
28
+ md: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.padding.md, canvas_tokens_web_1.system.space.x4),
29
+ lg: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.padding.lg, '1.25rem'),
30
+ xl: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.padding.xl, canvas_tokens_web_1.system.space.x6),
31
+ xxl: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.padding.xxl, canvas_tokens_web_1.system.space.x8),
32
+ },
33
+ fontSize: {
34
+ subtext: {
35
+ lg: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontSize.subtext.lg, canvas_tokens_web_1.system.fontSize.subtext.large),
36
+ md: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontSize.subtext.md, canvas_tokens_web_1.system.fontSize.subtext.medium),
37
+ sm: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontSize.subtext.sm, canvas_tokens_web_1.system.fontSize.subtext.small),
38
+ },
39
+ },
40
+ gap: {
41
+ none: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.gap.none, canvas_tokens_web_1.system.space.zero),
42
+ xs: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.gap.xs, canvas_tokens_web_1.system.space.x1),
43
+ sm: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.gap.sm, canvas_tokens_web_1.system.space.x2),
44
+ md: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.gap.md, canvas_tokens_web_1.system.space.x4),
45
+ },
46
+ type: {
47
+ subtext: {
48
+ lg: {
49
+ fontFamily: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontFamily.default, canvas_tokens_web_1.system.fontFamily.default),
50
+ fontWeight: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontWeight.normal, canvas_tokens_web_1.system.fontWeight.normal),
51
+ lineHeight: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.lineHeight.subtext.lg, canvas_tokens_web_1.system.lineHeight.subtext.large),
52
+ fontSize: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontSize.subtext.lg, canvas_tokens_web_1.system.fontSize.subtext.large),
53
+ letterSpacing: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.letterSpacing.subtext.lg, canvas_tokens_web_1.base.letterSpacing50),
54
+ },
55
+ md: {
56
+ fontFamily: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontFamily.default, canvas_tokens_web_1.system.fontFamily.default),
57
+ fontWeight: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontWeight.normal, canvas_tokens_web_1.system.fontWeight.normal),
58
+ lineHeight: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.lineHeight.subtext.md, canvas_tokens_web_1.system.lineHeight.subtext.medium),
59
+ fontSize: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontSize.subtext.md, canvas_tokens_web_1.system.fontSize.subtext.medium),
60
+ letterSpacing: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.letterSpacing.subtext.md, canvas_tokens_web_1.base.letterSpacing100),
61
+ },
62
+ },
63
+ body: {
64
+ sm: {
65
+ fontFamily: canvas_tokens_web_1.system.fontFamily.default,
66
+ fontWeight: canvas_tokens_web_1.system.fontWeight.normal,
67
+ lineHeight: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.lineHeight.body.sm, canvas_tokens_web_1.system.lineHeight.body.small),
68
+ fontSize: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.fontSize.body.sm, canvas_tokens_web_1.system.fontSize.body.small),
69
+ letterSpacing: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.letterSpacing.body.sm, canvas_tokens_web_1.base.letterSpacing200),
70
+ },
71
+ },
14
72
  },
15
73
  },
16
74
  };
package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts CHANGED
@@ -20,45 +20,45 @@ export declare const paginationPageButtonStencil: import("@workday/canvas-kit-st
20
20
  size: {
21
21
  large: {
22
22
  fontWeight: "--cnvs-sys-font-weight-bold";
23
- height: string;
24
- paddingInline: "--cnvs-sys-space-x8";
25
- minWidth: string;
23
+ height: "var(--cnvs-sys-size-xl, 3rem)";
24
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
25
+ minWidth: "--cnvs-base-size-1400";
26
26
  fontFamily: "--cnvs-sys-font-family-default";
27
- lineHeight: "--cnvs-sys-line-height-body-small";
28
- fontSize: "--cnvs-sys-font-size-body-small";
29
- letterSpacing: "--cnvs-base-letter-spacing-200";
27
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
28
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
29
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
30
30
  };
31
31
  medium: {
32
32
  fontWeight: "--cnvs-sys-font-weight-bold";
33
- minWidth: string;
34
- paddingInline: "--cnvs-sys-space-x6";
35
- height: "--cnvs-sys-space-x10";
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";
33
+ minWidth: "--cnvs-base-size-1200";
34
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
35
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
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
  small: {
42
42
  fontWeight: "--cnvs-sys-font-weight-bold";
43
- height: "--cnvs-sys-space-x8";
44
- minWidth: "--cnvs-sys-space-x20";
45
- paddingInline: "--cnvs-sys-space-x4";
46
- gap: "--cnvs-sys-space-x1";
47
- fontFamily: "--cnvs-sys-font-family-default";
48
- lineHeight: "--cnvs-sys-line-height-subtext-large";
49
- fontSize: "--cnvs-sys-font-size-subtext-large";
50
- letterSpacing: "--cnvs-base-letter-spacing-150";
43
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
44
+ minWidth: "--cnvs-base-size-1000";
45
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
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-lg, var(--cnvs-sys-line-height-subtext-large))";
49
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
50
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
51
51
  };
52
52
  extraSmall: {
53
53
  fontWeight: "--cnvs-sys-font-weight-bold";
54
- height: "--cnvs-sys-space-x6";
54
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
55
55
  minWidth: string;
56
- paddingInline: "--cnvs-sys-space-x3";
57
- gap: "--cnvs-sys-space-x1";
58
- fontFamily: "--cnvs-sys-font-family-default";
59
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
60
- fontSize: "--cnvs-sys-font-size-subtext-medium";
61
- letterSpacing: "--cnvs-base-letter-spacing-100";
56
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
57
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
58
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
59
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
60
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
61
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
62
62
  };
63
63
  };
64
64
  grow: {
@@ -69,7 +69,7 @@ export declare const paginationPageButtonStencil: import("@workday/canvas-kit-st
69
69
  };
70
70
  iconPosition: {
71
71
  only: {
72
- padding: "--cnvs-sys-space-zero";
72
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
73
73
  };
74
74
  start: {};
75
75
  end: {};
package/dist/commonjs/pagination/lib/Pagination/PageButton.js CHANGED
@@ -33,10 +33,10 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
33
33
  const usePaginationModel_1 = require("./usePaginationModel");
34
34
  exports.paginationPageButtonStencil = (0, canvas_kit_styling_1.createStencil)({
35
35
  extends: button_1.buttonStencil,
36
- base: { name: "3ab7uj", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);font-weight:var(--cnvs-sys-font-weight-normal);--label-button-85bf0e:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-fg-disabled);}" },
36
+ base: { name: "3ab7uj", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);font-weight:var(--cnvs-sys-font-weight-normal);--label-button-f6d2bd:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-soft);--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-f6d2bd:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-fg-disabled);}" },
37
37
  modifiers: {
38
38
  toggled: {
39
- true: { name: "253ue8", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-85bf0e:var(--cnvs-brand-primary-base);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-brand-primary-base);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-fg-disabled);}" }
39
+ true: { name: "253ue8", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-f6d2bd:var(--cnvs-brand-primary-base);--label-button-f6d2bd:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-f6d2bd:var(--cnvs-brand-primary-base);--label-button-f6d2bd:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-fg-disabled);}" }
40
40
  }
41
41
  }
42
42
  }, "pagination-page-button-88d20c");
package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js CHANGED
@@ -9,7 +9,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
9
9
  const icon_1 = require("@workday/canvas-kit-react/icon");
10
10
  const segmentedControlButtonStencil = (0, canvas_kit_styling_1.createStencil)({
11
11
  extends: button_1.buttonStencil,
12
- base: { name: "1mdcmu", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-85bf0e:var(--cnvs-brand-primary-base);--border-button-85bf0e:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
12
+ base: { name: "1mdcmu", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-soft);--border-button-f6d2bd:var(--cnvs-sys-color-border-container);--borderRadius-button-f6d2bd:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-softer);--border-button-f6d2bd:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-f6d2bd:var(--cnvs-brand-primary-base);--border-button-f6d2bd:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-softer);--border-button-f6d2bd:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
13
13
  modifiers: {
14
14
  segmentedControlButtonSize: {
15
15
  small: { name: "1zrudd", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);" },
package/dist/commonjs/tabs/lib/TabsItem.js CHANGED
@@ -12,7 +12,7 @@ const useTabsModel_1 = require("./useTabsModel");
12
12
  const button_1 = require("@workday/canvas-kit-react/button");
13
13
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
14
14
  const tabItemStencil = (0, canvas_kit_styling_1.createStencil)({
15
- base: { name: "2b6sek", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);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);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-3a4847:currentColor;&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-alt-default);color:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));--boxShadowInner-button-85bf0e:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-85bf0e:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-3a4847:var(--cnvs-brand-primary-base);&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-brand-primary-base);}}" }
15
+ base: { name: "2b6sek", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);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);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-3a4847:currentColor;&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-alt-default);color:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));--boxShadowInner-button-f6d2bd:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-f6d2bd:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-3a4847:var(--cnvs-brand-primary-base);&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-brand-primary-base);}}" }
16
16
  }, "tab-item-116136");
17
17
  exports.StyledTabItem = (0, common_1.createComponent)('button')({
18
18
  displayName: 'StyledTabItem',
package/dist/es6/action-bar/lib/ActionBarList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAMnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1D;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,iJAmB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWxB,CAAC"}
1
+ {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,YAAY,EAAmB,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAMnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1D;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,iJAmB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWxB,CAAC"}
package/dist/es6/action-bar/lib/ActionBarList.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { system } from '@workday/canvas-tokens-web';
3
- import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
+ import { createSubcomponent, forwardFitTokens } from '@workday/canvas-kit-react/common';
4
4
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
5
5
  import { useOverflowListMeasure, useListRenderItems } from '@workday/canvas-kit-react/collection';
6
6
  import { useActionBarModel } from './useActionBarModel';
7
7
  import { createStencil, cssVar } from '@workday/canvas-kit-styling';
8
8
  export const actionBarListStencil = createStencil({
9
- base: { name: "3tnfh5", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-1);gap:var(--cnvs-sys-space-x4);background:var(--cnvs-sys-color-bg-default);border-block-start:solid 1px var(--cnvs-sys-color-border-divider);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x10) ;position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-space-x4);> *{flex:1;}}" }
10
- }, "action-bar-list-887890");
9
+ base: { name: "xl287", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-1);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4));background:var(--cnvs-sys-color-bg-default);border-block-start:solid 1px var(--cnvs-sys-color-border-divider);padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4)) var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8)) ;position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));> *{flex:1;}}" }
10
+ }, "action-bar-list-0c9a57");
11
11
  export const useActionBarList = useOverflowListMeasure;
12
12
  export const ActionBarList = createSubcomponent('div')({
13
13
  displayName: 'ActionBar.List',
package/dist/es6/button/lib/BaseButton.d.ts CHANGED
@@ -64,45 +64,45 @@ export declare const buttonStencil: import("@workday/canvas-kit-styling").Stenci
64
64
  size: {
65
65
  large: {
66
66
  fontWeight: "--cnvs-sys-font-weight-bold";
67
- height: string;
68
- paddingInline: "--cnvs-sys-space-x8";
69
- minWidth: string;
67
+ height: "var(--cnvs-sys-size-xl, 3rem)";
68
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
69
+ minWidth: "--cnvs-base-size-1400";
70
70
  fontFamily: "--cnvs-sys-font-family-default";
71
- lineHeight: "--cnvs-sys-line-height-body-small";
72
- fontSize: "--cnvs-sys-font-size-body-small";
73
- letterSpacing: "--cnvs-base-letter-spacing-200";
71
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
72
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
73
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
74
74
  };
75
75
  medium: {
76
76
  fontWeight: "--cnvs-sys-font-weight-bold";
77
- minWidth: string;
78
- paddingInline: "--cnvs-sys-space-x6";
79
- height: "--cnvs-sys-space-x10";
80
- fontFamily: "--cnvs-sys-font-family-default";
81
- lineHeight: "--cnvs-sys-line-height-subtext-large";
82
- fontSize: "--cnvs-sys-font-size-subtext-large";
83
- letterSpacing: "--cnvs-base-letter-spacing-150";
77
+ minWidth: "--cnvs-base-size-1200";
78
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
79
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
80
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
81
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
82
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
83
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
84
84
  };
85
85
  small: {
86
86
  fontWeight: "--cnvs-sys-font-weight-bold";
87
- height: "--cnvs-sys-space-x8";
88
- minWidth: "--cnvs-sys-space-x20";
89
- paddingInline: "--cnvs-sys-space-x4";
90
- gap: "--cnvs-sys-space-x1";
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";
87
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
88
+ minWidth: "--cnvs-base-size-1000";
89
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
90
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
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
  extraSmall: {
97
97
  fontWeight: "--cnvs-sys-font-weight-bold";
98
- height: "--cnvs-sys-space-x6";
98
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
99
99
  minWidth: string;
100
- paddingInline: "--cnvs-sys-space-x3";
101
- gap: "--cnvs-sys-space-x1";
102
- fontFamily: "--cnvs-sys-font-family-default";
103
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
104
- fontSize: "--cnvs-sys-font-size-subtext-medium";
105
- letterSpacing: "--cnvs-base-letter-spacing-100";
100
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
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-md, var(--cnvs-sys-line-height-subtext-medium))";
104
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
105
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
106
106
  };
107
107
  };
108
108
  grow: {
@@ -113,7 +113,7 @@ export declare const buttonStencil: import("@workday/canvas-kit-styling").Stenci
113
113
  };
114
114
  iconPosition: {
115
115
  only: {
116
- padding: "--cnvs-sys-space-zero";
116
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
117
117
  };
118
118
  start: {};
119
119
  end: {};
package/dist/es6/button/lib/BaseButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IA6ItB;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAiIL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAqCrB,CAAC"}
1
+ {"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAEL,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IA6ItB;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAiIL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAqCrB,CAAC"}