@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/es6/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/es6/button/lib/ToolbarIconButton.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
- import { focusRing, createComponent } from '@workday/canvas-kit-react/common';
3
+ import { focusRing, createComponent, forwardFitTokens } from '@workday/canvas-kit-react/common';
4
4
  import { BaseButton, buttonStencil } from './BaseButton';
5
5
  import { brand, system } from '@workday/canvas-tokens-web';
6
6
  import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
7
7
  import { systemIconStencil } from '@workday/canvas-kit-react/icon';
8
8
  export const toolbarIconButtonStencil = createStencil({
9
9
  extends: buttonStencil,
10
- 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);}}" }
11
- }, "toolbar-icon-button-5efdf6");
10
+ 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);}}" }
11
+ }, "toolbar-icon-button-0805ec");
12
12
  export const ToolbarIconButton = createComponent('button')({
13
13
  displayName: 'ToolbarIconButton',
14
14
  Component: ({ onToggleChange, icon, shouldMirrorIcon = false, shouldMirrorIconInRTL = false, toggled, children, ...elemProps }, ref, Element) => {
package/dist/es6/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/es6/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/es6/common/lib/forwardFitTokens.js CHANGED
@@ -1,13 +1,71 @@
1
1
  import { cssVar } from '@workday/canvas-kit-styling';
2
- import { system } from '@workday/canvas-tokens-web';
2
+ import { system, base } from '@workday/canvas-tokens-web';
3
3
  /**
4
4
  * This file is NOT INTENDED to be used by consumers, only internally by Canvas Kit.
5
5
  */
6
6
  export const forwardFitTokens = {
7
7
  system: {
8
8
  shape: {
9
- //TODO: in v4 Tokens and v15, we should replace this forward fit token with the actual token value
10
- sm: cssVar('--cnvs-sys-shape-sm', system.shape.x1Half),
9
+ xs: cssVar(system.shape.xs, system.shape.x1),
10
+ sm: cssVar(system.shape.sm, system.shape.x1Half),
11
+ full: cssVar(system.shape.full, system.shape.round),
12
+ },
13
+ size: {
14
+ xxs: cssVar(system.size.xxs, system.space.x4),
15
+ sm: cssVar(system.size.sm, system.space.x6),
16
+ md: cssVar(system.size.md, system.space.x8),
17
+ lg: cssVar(system.size.lg, system.space.x10),
18
+ xl: cssVar(system.size.xl, '3rem'),
19
+ },
20
+ padding: {
21
+ none: cssVar(system.padding.none, system.space.zero),
22
+ xxs: cssVar(system.padding.xxs, system.space.x1),
23
+ xs: cssVar(system.padding.xs, system.space.x2),
24
+ sm: cssVar(system.padding.sm, system.space.x3),
25
+ md: cssVar(system.padding.md, system.space.x4),
26
+ lg: cssVar(system.padding.lg, '1.25rem'),
27
+ xl: cssVar(system.padding.xl, system.space.x6),
28
+ xxl: cssVar(system.padding.xxl, system.space.x8),
29
+ },
30
+ fontSize: {
31
+ subtext: {
32
+ lg: cssVar(system.fontSize.subtext.lg, system.fontSize.subtext.large),
33
+ md: cssVar(system.fontSize.subtext.md, system.fontSize.subtext.medium),
34
+ sm: cssVar(system.fontSize.subtext.sm, system.fontSize.subtext.small),
35
+ },
36
+ },
37
+ gap: {
38
+ none: cssVar(system.gap.none, system.space.zero),
39
+ xs: cssVar(system.gap.xs, system.space.x1),
40
+ sm: cssVar(system.gap.sm, system.space.x2),
41
+ md: cssVar(system.gap.md, system.space.x4),
42
+ },
43
+ type: {
44
+ subtext: {
45
+ lg: {
46
+ fontFamily: cssVar(system.fontFamily.default, system.fontFamily.default),
47
+ fontWeight: cssVar(system.fontWeight.normal, system.fontWeight.normal),
48
+ lineHeight: cssVar(system.lineHeight.subtext.lg, system.lineHeight.subtext.large),
49
+ fontSize: cssVar(system.fontSize.subtext.lg, system.fontSize.subtext.large),
50
+ letterSpacing: cssVar(system.letterSpacing.subtext.lg, base.letterSpacing50),
51
+ },
52
+ md: {
53
+ fontFamily: cssVar(system.fontFamily.default, system.fontFamily.default),
54
+ fontWeight: cssVar(system.fontWeight.normal, system.fontWeight.normal),
55
+ lineHeight: cssVar(system.lineHeight.subtext.md, system.lineHeight.subtext.medium),
56
+ fontSize: cssVar(system.fontSize.subtext.md, system.fontSize.subtext.medium),
57
+ letterSpacing: cssVar(system.letterSpacing.subtext.md, base.letterSpacing100),
58
+ },
59
+ },
60
+ body: {
61
+ sm: {
62
+ fontFamily: system.fontFamily.default,
63
+ fontWeight: system.fontWeight.normal,
64
+ lineHeight: cssVar(system.lineHeight.body.sm, system.lineHeight.body.small),
65
+ fontSize: cssVar(system.fontSize.body.sm, system.fontSize.body.small),
66
+ letterSpacing: cssVar(system.letterSpacing.body.sm, base.letterSpacing200),
67
+ },
68
+ },
11
69
  },
12
70
  },
13
71
  };
package/dist/es6/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/es6/pagination/lib/Pagination/PageButton.js CHANGED
@@ -7,10 +7,10 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
7
7
  import { PaginationContext } from './usePaginationModel';
8
8
  export const paginationPageButtonStencil = createStencil({
9
9
  extends: buttonStencil,
10
- 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);}" },
10
+ 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);}" },
11
11
  modifiers: {
12
12
  toggled: {
13
- 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);}" }
13
+ 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);}" }
14
14
  }
15
15
  }
16
16
  }, "pagination-page-button-88d20c");
package/dist/es6/segmented-control/lib/SegmentedControlButton.js CHANGED
@@ -6,7 +6,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
6
6
  import { systemIconStencil } from '@workday/canvas-kit-react/icon';
7
7
  const segmentedControlButtonStencil = createStencil({
8
8
  extends: buttonStencil,
9
- 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;}" },
9
+ 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;}" },
10
10
  modifiers: {
11
11
  segmentedControlButtonSize: {
12
12
  small: { name: "1zrudd", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);" },
package/dist/es6/tabs/lib/TabsItem.js CHANGED
@@ -9,7 +9,7 @@ import { useTabsModel } from './useTabsModel';
9
9
  import { buttonStencil } from '@workday/canvas-kit-react/button';
10
10
  import { system, brand } from '@workday/canvas-tokens-web';
11
11
  const tabItemStencil = createStencil({
12
- 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);}}" }
12
+ 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);}}" }
13
13
  }, "tab-item-116136");
14
14
  export const StyledTabItem = createComponent('button')({
15
15
  displayName: 'StyledTabItem',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "14.1.19",
3
+ "version": "15.0.0-alpha.0008-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -52,11 +52,11 @@
52
52
  "@popperjs/core": "^2.5.4",
53
53
  "@tanstack/react-virtual": "^3.13.9",
54
54
  "@workday/canvas-colors-web": "^2.0.0",
55
- "@workday/canvas-kit-popup-stack": "^14.1.19",
56
- "@workday/canvas-kit-preview-react": "^14.1.19",
57
- "@workday/canvas-kit-styling": "^14.1.19",
55
+ "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0008-next.0",
56
+ "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0008-next.0",
57
+ "@workday/canvas-kit-styling": "^15.0.0-alpha.0008-next.0",
58
58
  "@workday/canvas-system-icons-web": "^3.0.36",
59
- "@workday/canvas-tokens-web": "^3.1.1",
59
+ "@workday/canvas-tokens-web": "4.0.0-alpha.3",
60
60
  "@workday/design-assets-types": "^0.2.10",
61
61
  "chroma-js": "^2.2.0",
62
62
  "csstype": "^3.0.2",
@@ -69,5 +69,5 @@
69
69
  "@workday/canvas-accent-icons-web": "^3.0.0",
70
70
  "@workday/canvas-applet-icons-web": "^2.0.0"
71
71
  },
72
- "gitHead": "29a5672bb1d695563c5469d21223c15ba0321599"
72
+ "gitHead": "26a8bc06dba5ae759ca62ae8922aeaa7bba7015c"
73
73
  }