@workday/canvas-tokens-web 4.1.4 → 5.0.0-alpha.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 (37) hide show
  1. package/css/base/_variables.css +1 -1
  2. package/css/brand/_variables.css +1 -1
  3. package/css/component/_variables.css +25 -0
  4. package/css/system/_variables.css +1 -1
  5. package/dist/common-js/base/index.d.ts +1 -1
  6. package/dist/common-js/base/index.js +1 -1
  7. package/dist/common-js/brand/index.d.ts +1 -1
  8. package/dist/common-js/brand/index.js +1 -1
  9. package/dist/common-js/component/index.d.ts +124 -0
  10. package/dist/common-js/component/index.js +36 -0
  11. package/dist/common-js/index.d.ts +3 -2
  12. package/dist/common-js/index.js +3 -1
  13. package/dist/common-js/system/index.d.ts +3 -3
  14. package/dist/common-js/system/index.js +1 -1
  15. package/dist/es6/base/index.d.ts +1 -1
  16. package/dist/es6/base/index.js +1 -1
  17. package/dist/es6/brand/index.d.ts +1 -1
  18. package/dist/es6/brand/index.js +1 -1
  19. package/dist/es6/component/index.d.ts +124 -0
  20. package/dist/es6/component/index.js +33 -0
  21. package/dist/es6/index.d.ts +3 -2
  22. package/dist/es6/index.js +3 -2
  23. package/dist/es6/system/index.d.ts +3 -3
  24. package/dist/es6/system/index.js +1 -1
  25. package/less/base/_variables.less +1 -1
  26. package/less/brand/_variables.less +1 -1
  27. package/less/component/_variables.less +22 -0
  28. package/less/system/_variables.less +1 -1
  29. package/package.json +1 -1
  30. package/scss/base/_variables.sass +1 -1
  31. package/scss/base/_variables.scss +1 -1
  32. package/scss/brand/_variables.sass +1 -1
  33. package/scss/brand/_variables.scss +1 -1
  34. package/scss/component/_variables.sass +22 -0
  35. package/scss/component/_variables.scss +22 -0
  36. package/scss/system/_variables.sass +1 -1
  37. package/scss/system/_variables.scss +1 -1
package/css/base/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
  */
5
5
 
6
6
  :root {
package/css/brand/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
  */
5
5
 
6
6
  :root {
package/css/component/_variables.css ADDED
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
+ */
5
+
6
+ :root {
7
+ --cnvs-component-system-icon-color-background: var(--cnvs-base-palette-neutral-a0); /* Component level color used on the background of system icons */
8
+ --cnvs-component-system-icon-color-fill: var(--cnvs-base-palette-neutral-800); /* Component level color used on the fill areas of system icons */
9
+ --cnvs-component-system-icon-color-accent: var(--cnvs-base-palette-neutral-800); /* Component level color used on the accent areas of system icons */
10
+ --cnvs-component-expressive-icon-color-fill: var(--cnvs-base-palette-neutral-800); /* Component level color used on the visible outlines of expressive icons */
11
+ --cnvs-component-expressive-icon-color-accent: var(--cnvs-base-palette-neutral-a200); /* Component level color used on the soft filled areas of expressive icons */
12
+ --cnvs-component-system-icon-size-xl: var(--cnvs-base-size-400);
13
+ --cnvs-component-system-icon-size-lg: var(--cnvs-base-size-300);
14
+ --cnvs-component-system-icon-size-md: var(--cnvs-base-size-250);
15
+ --cnvs-component-system-icon-size-sm: var(--cnvs-base-size-225);
16
+ --cnvs-component-system-icon-size-xs: var(--cnvs-base-size-200);
17
+ --cnvs-component-system-icon-size-xxs: var(--cnvs-base-size-175);
18
+ --cnvs-component-expressive-icon-size-xl: var(--cnvs-base-size-1200);
19
+ --cnvs-component-expressive-icon-size-lg: var(--cnvs-base-size-800);
20
+ --cnvs-component-expressive-icon-size-md: var(--cnvs-base-size-700);
21
+ --cnvs-component-expressive-icon-size-sm: var(--cnvs-base-size-600);
22
+ --cnvs-component-expressive-icon-size-xs: var(--cnvs-base-size-500);
23
+ }
24
+
25
+
package/css/system/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/common-js/base/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  export declare const fontSize: "--cnvs-base-font-size";
package/dist/common-js/base/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  "use strict";
package/dist/common-js/brand/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  /**
package/dist/common-js/brand/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  "use strict";
package/dist/common-js/component/index.d.ts ADDED
@@ -0,0 +1,124 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
+ */
5
+
6
+ export declare const expressiveIcon: {
7
+ "color": {
8
+ /**
9
+ * **value**: `{base.palette.neutral.A200}`
10
+ *
11
+ * **CSS Var**: `--cnvs-component-expressive-icon-color-accent`
12
+ *
13
+ * Component level color used on the soft filled areas of expressive icons
14
+ */
15
+ "accent": "--cnvs-component-expressive-icon-color-accent",
16
+ /**
17
+ * **value**: `{base.palette.neutral.800}`
18
+ *
19
+ * **CSS Var**: `--cnvs-component-expressive-icon-color-fill`
20
+ *
21
+ * Component level color used on the visible outlines of expressive icons
22
+ */
23
+ "fill": "--cnvs-component-expressive-icon-color-fill",
24
+ },
25
+ "size": {
26
+ /**
27
+ * **value**: `{base.size.500}` (2.5rem | 40px)
28
+ *
29
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-xs`
30
+ */
31
+ "xs": "--cnvs-component-expressive-icon-size-xs",
32
+ /**
33
+ * **value**: `{base.size.600}` (3rem | 48px)
34
+ *
35
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-sm`
36
+ */
37
+ "sm": "--cnvs-component-expressive-icon-size-sm",
38
+ /**
39
+ * **value**: `{base.size.700}` (3.5rem | 56px)
40
+ *
41
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-md`
42
+ */
43
+ "md": "--cnvs-component-expressive-icon-size-md",
44
+ /**
45
+ * **value**: `{base.size.800}` (4rem | 64px)
46
+ *
47
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-lg`
48
+ */
49
+ "lg": "--cnvs-component-expressive-icon-size-lg",
50
+ /**
51
+ * **value**: `{base.size.1200}` (6rem | 96px)
52
+ *
53
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-xl`
54
+ */
55
+ "xl": "--cnvs-component-expressive-icon-size-xl",
56
+ },
57
+ };
58
+
59
+ export declare const systemIcon: {
60
+ "color": {
61
+ /**
62
+ * **value**: `{base.palette.neutral.800}`
63
+ *
64
+ * **CSS Var**: `--cnvs-component-system-icon-color-accent`
65
+ *
66
+ * Component level color used on the accent areas of system icons
67
+ */
68
+ "accent": "--cnvs-component-system-icon-color-accent",
69
+ /**
70
+ * **value**: `{base.palette.neutral.800}`
71
+ *
72
+ * **CSS Var**: `--cnvs-component-system-icon-color-fill`
73
+ *
74
+ * Component level color used on the fill areas of system icons
75
+ */
76
+ "fill": "--cnvs-component-system-icon-color-fill",
77
+ /**
78
+ * **value**: `{base.palette.neutral.A0}`
79
+ *
80
+ * **CSS Var**: `--cnvs-component-system-icon-color-background`
81
+ *
82
+ * Component level color used on the background of system icons
83
+ */
84
+ "background": "--cnvs-component-system-icon-color-background",
85
+ },
86
+ "size": {
87
+ /**
88
+ * **value**: `{base.size.175}` (0.875rem | 14px)
89
+ *
90
+ * **CSS Var**: `--cnvs-component-system-icon-size-xxs`
91
+ */
92
+ "xxs": "--cnvs-component-system-icon-size-xxs",
93
+ /**
94
+ * **value**: `{base.size.200}` (1rem | 16px)
95
+ *
96
+ * **CSS Var**: `--cnvs-component-system-icon-size-xs`
97
+ */
98
+ "xs": "--cnvs-component-system-icon-size-xs",
99
+ /**
100
+ * **value**: `{base.size.225}` (1.125rem | 18px)
101
+ *
102
+ * **CSS Var**: `--cnvs-component-system-icon-size-sm`
103
+ */
104
+ "sm": "--cnvs-component-system-icon-size-sm",
105
+ /**
106
+ * **value**: `{base.size.250}` (1.25rem | 20px)
107
+ *
108
+ * **CSS Var**: `--cnvs-component-system-icon-size-md`
109
+ */
110
+ "md": "--cnvs-component-system-icon-size-md",
111
+ /**
112
+ * **value**: `{base.size.300}` (1.5rem | 24px)
113
+ *
114
+ * **CSS Var**: `--cnvs-component-system-icon-size-lg`
115
+ */
116
+ "lg": "--cnvs-component-system-icon-size-lg",
117
+ /**
118
+ * **value**: `{base.size.400}` (2rem | 32px)
119
+ *
120
+ * **CSS Var**: `--cnvs-component-system-icon-size-xl`
121
+ */
122
+ "xl": "--cnvs-component-system-icon-size-xl",
123
+ },
124
+ };
package/dist/common-js/component/index.js ADDED
@@ -0,0 +1,36 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
+ */
5
+
6
+ "use strict";
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+
9
+ exports.expressiveIcon = {
10
+ "color": {
11
+ "accent": "--cnvs-component-expressive-icon-color-accent",
12
+ "fill": "--cnvs-component-expressive-icon-color-fill"
13
+ },
14
+ "size": {
15
+ "xs": "--cnvs-component-expressive-icon-size-xs",
16
+ "sm": "--cnvs-component-expressive-icon-size-sm",
17
+ "md": "--cnvs-component-expressive-icon-size-md",
18
+ "lg": "--cnvs-component-expressive-icon-size-lg",
19
+ "xl": "--cnvs-component-expressive-icon-size-xl"
20
+ }
21
+ };
22
+ exports.systemIcon = {
23
+ "color": {
24
+ "accent": "--cnvs-component-system-icon-color-accent",
25
+ "fill": "--cnvs-component-system-icon-color-fill",
26
+ "background": "--cnvs-component-system-icon-color-background"
27
+ },
28
+ "size": {
29
+ "xxs": "--cnvs-component-system-icon-size-xxs",
30
+ "xs": "--cnvs-component-system-icon-size-xs",
31
+ "sm": "--cnvs-component-system-icon-size-sm",
32
+ "md": "--cnvs-component-system-icon-size-md",
33
+ "lg": "--cnvs-component-system-icon-size-lg",
34
+ "xl": "--cnvs-component-system-icon-size-xl"
35
+ }
36
+ };
package/dist/common-js/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
7
7
  import * as brand from "./brand";
8
8
  import * as system from "./system";
9
- export {base,brand,system}
9
+ import * as component from "./component";
10
+ export {base,brand,system,component}
package/dist/common-js/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -12,3 +12,5 @@ var brand = require("./brand");
12
12
  exports.brand = brand;
13
13
  var system = require("./system");
14
14
  exports.system = system;
15
+ var component = require("./component");
16
+ exports.component = component;
package/dist/common-js/system/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  export declare const breakpoints: {
@@ -1594,7 +1594,7 @@ export declare const color: {
1594
1594
  *
1595
1595
  * Active states
1596
1596
  *
1597
- * @deprecated Use sys.color.surface.default tokens instead with sys.color.surface.overlay.hover.default
1597
+ * @deprecated Use sys.color.surface.default tokens instead with sys.color.surface.overlay.hover.default tokens instead
1598
1598
  */
1599
1599
  "strong": "--cnvs-sys-color-bg-alt-strong",
1600
1600
  /**
@@ -1604,7 +1604,7 @@ export declare const color: {
1604
1604
  *
1605
1605
  * Active state for segmented control, Pill
1606
1606
  *
1607
- * @deprecated Use sys.color.surface.alt.default with sys.color.surface.overlay.pressed.default
1607
+ * @deprecated Use sys.color.surface.alt.default with sys.color.surface.overlay.pressed.default tokens instead
1608
1608
  */
1609
1609
  "stronger": "--cnvs-sys-color-bg-alt-stronger",
1610
1610
  /**
package/dist/common-js/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  "use strict";
package/dist/es6/base/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  export declare const fontSize: "--cnvs-base-font-size";
package/dist/es6/base/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  export const fontSize = "--cnvs-base-font-size";
package/dist/es6/brand/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  /**
package/dist/es6/brand/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  export const primary25 = "--cnvs-brand-primary-25";
package/dist/es6/component/index.d.ts ADDED
@@ -0,0 +1,124 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
+ */
5
+
6
+ export declare const expressiveIcon: {
7
+ "color": {
8
+ /**
9
+ * **value**: `{base.palette.neutral.A200}`
10
+ *
11
+ * **CSS Var**: `--cnvs-component-expressive-icon-color-accent`
12
+ *
13
+ * Component level color used on the soft filled areas of expressive icons
14
+ */
15
+ "accent": "--cnvs-component-expressive-icon-color-accent",
16
+ /**
17
+ * **value**: `{base.palette.neutral.800}`
18
+ *
19
+ * **CSS Var**: `--cnvs-component-expressive-icon-color-fill`
20
+ *
21
+ * Component level color used on the visible outlines of expressive icons
22
+ */
23
+ "fill": "--cnvs-component-expressive-icon-color-fill",
24
+ },
25
+ "size": {
26
+ /**
27
+ * **value**: `{base.size.500}` (2.5rem | 40px)
28
+ *
29
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-xs`
30
+ */
31
+ "xs": "--cnvs-component-expressive-icon-size-xs",
32
+ /**
33
+ * **value**: `{base.size.600}` (3rem | 48px)
34
+ *
35
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-sm`
36
+ */
37
+ "sm": "--cnvs-component-expressive-icon-size-sm",
38
+ /**
39
+ * **value**: `{base.size.700}` (3.5rem | 56px)
40
+ *
41
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-md`
42
+ */
43
+ "md": "--cnvs-component-expressive-icon-size-md",
44
+ /**
45
+ * **value**: `{base.size.800}` (4rem | 64px)
46
+ *
47
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-lg`
48
+ */
49
+ "lg": "--cnvs-component-expressive-icon-size-lg",
50
+ /**
51
+ * **value**: `{base.size.1200}` (6rem | 96px)
52
+ *
53
+ * **CSS Var**: `--cnvs-component-expressive-icon-size-xl`
54
+ */
55
+ "xl": "--cnvs-component-expressive-icon-size-xl",
56
+ },
57
+ };
58
+
59
+ export declare const systemIcon: {
60
+ "color": {
61
+ /**
62
+ * **value**: `{base.palette.neutral.800}`
63
+ *
64
+ * **CSS Var**: `--cnvs-component-system-icon-color-accent`
65
+ *
66
+ * Component level color used on the accent areas of system icons
67
+ */
68
+ "accent": "--cnvs-component-system-icon-color-accent",
69
+ /**
70
+ * **value**: `{base.palette.neutral.800}`
71
+ *
72
+ * **CSS Var**: `--cnvs-component-system-icon-color-fill`
73
+ *
74
+ * Component level color used on the fill areas of system icons
75
+ */
76
+ "fill": "--cnvs-component-system-icon-color-fill",
77
+ /**
78
+ * **value**: `{base.palette.neutral.A0}`
79
+ *
80
+ * **CSS Var**: `--cnvs-component-system-icon-color-background`
81
+ *
82
+ * Component level color used on the background of system icons
83
+ */
84
+ "background": "--cnvs-component-system-icon-color-background",
85
+ },
86
+ "size": {
87
+ /**
88
+ * **value**: `{base.size.175}` (0.875rem | 14px)
89
+ *
90
+ * **CSS Var**: `--cnvs-component-system-icon-size-xxs`
91
+ */
92
+ "xxs": "--cnvs-component-system-icon-size-xxs",
93
+ /**
94
+ * **value**: `{base.size.200}` (1rem | 16px)
95
+ *
96
+ * **CSS Var**: `--cnvs-component-system-icon-size-xs`
97
+ */
98
+ "xs": "--cnvs-component-system-icon-size-xs",
99
+ /**
100
+ * **value**: `{base.size.225}` (1.125rem | 18px)
101
+ *
102
+ * **CSS Var**: `--cnvs-component-system-icon-size-sm`
103
+ */
104
+ "sm": "--cnvs-component-system-icon-size-sm",
105
+ /**
106
+ * **value**: `{base.size.250}` (1.25rem | 20px)
107
+ *
108
+ * **CSS Var**: `--cnvs-component-system-icon-size-md`
109
+ */
110
+ "md": "--cnvs-component-system-icon-size-md",
111
+ /**
112
+ * **value**: `{base.size.300}` (1.5rem | 24px)
113
+ *
114
+ * **CSS Var**: `--cnvs-component-system-icon-size-lg`
115
+ */
116
+ "lg": "--cnvs-component-system-icon-size-lg",
117
+ /**
118
+ * **value**: `{base.size.400}` (2rem | 32px)
119
+ *
120
+ * **CSS Var**: `--cnvs-component-system-icon-size-xl`
121
+ */
122
+ "xl": "--cnvs-component-system-icon-size-xl",
123
+ },
124
+ };
package/dist/es6/component/index.js ADDED
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
+ */
5
+
6
+ export const expressiveIcon = {
7
+ "color": {
8
+ "accent": "--cnvs-component-expressive-icon-color-accent",
9
+ "fill": "--cnvs-component-expressive-icon-color-fill"
10
+ },
11
+ "size": {
12
+ "xs": "--cnvs-component-expressive-icon-size-xs",
13
+ "sm": "--cnvs-component-expressive-icon-size-sm",
14
+ "md": "--cnvs-component-expressive-icon-size-md",
15
+ "lg": "--cnvs-component-expressive-icon-size-lg",
16
+ "xl": "--cnvs-component-expressive-icon-size-xl"
17
+ }
18
+ };
19
+ export const systemIcon = {
20
+ "color": {
21
+ "accent": "--cnvs-component-system-icon-color-accent",
22
+ "fill": "--cnvs-component-system-icon-color-fill",
23
+ "background": "--cnvs-component-system-icon-color-background"
24
+ },
25
+ "size": {
26
+ "xxs": "--cnvs-component-system-icon-size-xxs",
27
+ "xs": "--cnvs-component-system-icon-size-xs",
28
+ "sm": "--cnvs-component-system-icon-size-sm",
29
+ "md": "--cnvs-component-system-icon-size-md",
30
+ "lg": "--cnvs-component-system-icon-size-lg",
31
+ "xl": "--cnvs-component-system-icon-size-xl"
32
+ }
33
+ };
package/dist/es6/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
7
7
  import * as brand from "./brand";
8
8
  import * as system from "./system";
9
- export {base,brand,system}
9
+ import * as component from "./component";
10
+ export {base,brand,system,component}
package/dist/es6/index.js CHANGED
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
7
7
  import * as brand from "./brand";
8
8
  import * as system from "./system";
9
- export {base,brand,system}
9
+ import * as component from "./component";
10
+ export {base,brand,system,component}
package/dist/es6/system/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  export declare const breakpoints: {
@@ -1594,7 +1594,7 @@ export declare const color: {
1594
1594
  *
1595
1595
  * Active states
1596
1596
  *
1597
- * @deprecated Use sys.color.surface.default tokens instead with sys.color.surface.overlay.hover.default
1597
+ * @deprecated Use sys.color.surface.default tokens instead with sys.color.surface.overlay.hover.default tokens instead
1598
1598
  */
1599
1599
  "strong": "--cnvs-sys-color-bg-alt-strong",
1600
1600
  /**
@@ -1604,7 +1604,7 @@ export declare const color: {
1604
1604
  *
1605
1605
  * Active state for segmented control, Pill
1606
1606
  *
1607
- * @deprecated Use sys.color.surface.alt.default with sys.color.surface.overlay.pressed.default
1607
+ * @deprecated Use sys.color.surface.alt.default with sys.color.surface.overlay.pressed.default tokens instead
1608
1608
  */
1609
1609
  "stronger": "--cnvs-sys-color-bg-alt-stronger",
1610
1610
  /**
package/dist/es6/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 12 Mar 2026 23:03:00 GMT
3
+ * Generated on Wed, 25 Mar 2026 22:28:09 GMT
4
4
  */
5
5
 
6
6
  export const breakpoints = {
package/less/base/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
 
5
5
  @cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overriden by user preferences
6
6
  @cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
package/less/brand/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
 
5
5
  @cnvs-brand-positive-a200: @cnvs-base-palette-green-a200;
6
6
  @cnvs-brand-positive-a100: @cnvs-base-palette-green-a100;
package/less/component/_variables.less ADDED
@@ -0,0 +1,22 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
+
5
+ @cnvs-component-system-icon-color-background: @cnvs-base-palette-neutral-a0; // Component level color used on the background of system icons
6
+ @cnvs-component-system-icon-color-fill: @cnvs-base-palette-neutral-800; // Component level color used on the fill areas of system icons
7
+ @cnvs-component-system-icon-color-accent: @cnvs-base-palette-neutral-800; // Component level color used on the accent areas of system icons
8
+ @cnvs-component-expressive-icon-color-fill: @cnvs-base-palette-neutral-800; // Component level color used on the visible outlines of expressive icons
9
+ @cnvs-component-expressive-icon-color-accent: @cnvs-base-palette-neutral-a200; // Component level color used on the soft filled areas of expressive icons
10
+ @cnvs-component-system-icon-size-xl: @cnvs-base-size-400;
11
+ @cnvs-component-system-icon-size-lg: @cnvs-base-size-300;
12
+ @cnvs-component-system-icon-size-md: @cnvs-base-size-250;
13
+ @cnvs-component-system-icon-size-sm: @cnvs-base-size-225;
14
+ @cnvs-component-system-icon-size-xs: @cnvs-base-size-200;
15
+ @cnvs-component-system-icon-size-xxs: @cnvs-base-size-175;
16
+ @cnvs-component-expressive-icon-size-xl: @cnvs-base-size-1200;
17
+ @cnvs-component-expressive-icon-size-lg: @cnvs-base-size-800;
18
+ @cnvs-component-expressive-icon-size-md: @cnvs-base-size-700;
19
+ @cnvs-component-expressive-icon-size-sm: @cnvs-base-size-600;
20
+ @cnvs-component-expressive-icon-size-xs: @cnvs-base-size-500;
21
+
22
+
package/less/system/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
 
5
5
  @cnvs-sys-opacity-full: 1; // Dev only
6
6
  @cnvs-sys-space-zero: 0; // Stacks, rows in tables
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-tokens-web",
3
- "version": "4.1.4",
3
+ "version": "5.0.0-alpha.0",
4
4
  "description": "Canvas design tokens for web",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "CC-BY-ND-4.0",
package/scss/base/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
 
5
5
  $cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overriden by user preferences
6
6
  $cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
package/scss/base/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
 
5
5
  $cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overriden by user preferences
6
6
  $cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
package/scss/brand/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
 
5
5
  $cnvs-brand-positive-a200: $cnvs-base-palette-green-a200;
6
6
  $cnvs-brand-positive-a100: $cnvs-base-palette-green-a100;
package/scss/brand/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
 
5
5
  $cnvs-brand-positive-a200: $cnvs-base-palette-green-a200;
6
6
  $cnvs-brand-positive-a100: $cnvs-base-palette-green-a100;
package/scss/component/_variables.sass ADDED
@@ -0,0 +1,22 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
+
5
+ $cnvs-component-system-icon-color-background: $cnvs-base-palette-neutral-a0; // Component level color used on the background of system icons
6
+ $cnvs-component-system-icon-color-fill: $cnvs-base-palette-neutral-800; // Component level color used on the fill areas of system icons
7
+ $cnvs-component-system-icon-color-accent: $cnvs-base-palette-neutral-800; // Component level color used on the accent areas of system icons
8
+ $cnvs-component-expressive-icon-color-fill: $cnvs-base-palette-neutral-800; // Component level color used on the visible outlines of expressive icons
9
+ $cnvs-component-expressive-icon-color-accent: $cnvs-base-palette-neutral-a200; // Component level color used on the soft filled areas of expressive icons
10
+ $cnvs-component-system-icon-size-xl: $cnvs-base-size-400;
11
+ $cnvs-component-system-icon-size-lg: $cnvs-base-size-300;
12
+ $cnvs-component-system-icon-size-md: $cnvs-base-size-250;
13
+ $cnvs-component-system-icon-size-sm: $cnvs-base-size-225;
14
+ $cnvs-component-system-icon-size-xs: $cnvs-base-size-200;
15
+ $cnvs-component-system-icon-size-xxs: $cnvs-base-size-175;
16
+ $cnvs-component-expressive-icon-size-xl: $cnvs-base-size-1200;
17
+ $cnvs-component-expressive-icon-size-lg: $cnvs-base-size-800;
18
+ $cnvs-component-expressive-icon-size-md: $cnvs-base-size-700;
19
+ $cnvs-component-expressive-icon-size-sm: $cnvs-base-size-600;
20
+ $cnvs-component-expressive-icon-size-xs: $cnvs-base-size-500;
21
+
22
+
package/scss/component/_variables.scss ADDED
@@ -0,0 +1,22 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
+
5
+ $cnvs-component-system-icon-color-background: $cnvs-base-palette-neutral-a0; // Component level color used on the background of system icons
6
+ $cnvs-component-system-icon-color-fill: $cnvs-base-palette-neutral-800; // Component level color used on the fill areas of system icons
7
+ $cnvs-component-system-icon-color-accent: $cnvs-base-palette-neutral-800; // Component level color used on the accent areas of system icons
8
+ $cnvs-component-expressive-icon-color-fill: $cnvs-base-palette-neutral-800; // Component level color used on the visible outlines of expressive icons
9
+ $cnvs-component-expressive-icon-color-accent: $cnvs-base-palette-neutral-a200; // Component level color used on the soft filled areas of expressive icons
10
+ $cnvs-component-system-icon-size-xl: $cnvs-base-size-400;
11
+ $cnvs-component-system-icon-size-lg: $cnvs-base-size-300;
12
+ $cnvs-component-system-icon-size-md: $cnvs-base-size-250;
13
+ $cnvs-component-system-icon-size-sm: $cnvs-base-size-225;
14
+ $cnvs-component-system-icon-size-xs: $cnvs-base-size-200;
15
+ $cnvs-component-system-icon-size-xxs: $cnvs-base-size-175;
16
+ $cnvs-component-expressive-icon-size-xl: $cnvs-base-size-1200;
17
+ $cnvs-component-expressive-icon-size-lg: $cnvs-base-size-800;
18
+ $cnvs-component-expressive-icon-size-md: $cnvs-base-size-700;
19
+ $cnvs-component-expressive-icon-size-sm: $cnvs-base-size-600;
20
+ $cnvs-component-expressive-icon-size-xs: $cnvs-base-size-500;
21
+
22
+
package/scss/system/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
 
5
5
  $cnvs-sys-opacity-full: 1; // Dev only
6
6
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
package/scss/system/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 12 Mar 2026 23:02:59 GMT
3
+ // Generated on Wed, 25 Mar 2026 22:28:08 GMT
4
4
 
5
5
  $cnvs-sys-opacity-full: 1; // Dev only
6
6
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables