@workday/canvas-tokens-web 4.1.5 → 4.2.0-beta.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 +5 -5
  3. package/css/component/_variables.css +17 -2
  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 +5 -5
  8. package/dist/common-js/brand/index.js +1 -1
  9. package/dist/common-js/component/index.d.ts +120 -1
  10. package/dist/common-js/component/index.js +29 -1
  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 +1 -1
  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 +5 -5
  18. package/dist/es6/brand/index.js +1 -1
  19. package/dist/es6/component/index.d.ts +120 -1
  20. package/dist/es6/component/index.js +29 -1
  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 +1 -1
  24. package/dist/es6/system/index.js +1 -1
  25. package/less/base/_variables.less +1 -1
  26. package/less/brand/_variables.less +5 -5
  27. package/less/component/_variables.less +17 -2
  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 +5 -5
  33. package/scss/brand/_variables.scss +5 -5
  34. package/scss/component/_variables.sass +17 -2
  35. package/scss/component/_variables.scss +17 -2
  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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -13,7 +13,7 @@
13
13
  --cnvs-brand-positive-900: var(--cnvs-base-palette-green-900);
14
14
  --cnvs-brand-positive-800: var(--cnvs-base-palette-green-800);
15
15
  --cnvs-brand-positive-700: var(--cnvs-base-palette-green-700);
16
- --cnvs-brand-positive-600: var(--cnvs-base-palette-green-600); /* Base success color. Use fg.inverse on this. */
16
+ --cnvs-brand-positive-600: var(--cnvs-base-palette-green-600); /* Base success color. Use fg.inverse instead */
17
17
  --cnvs-brand-positive-500: var(--cnvs-base-palette-green-500);
18
18
  --cnvs-brand-positive-400: var(--cnvs-base-palette-green-400);
19
19
  --cnvs-brand-positive-300: var(--cnvs-base-palette-green-300);
@@ -32,7 +32,7 @@
32
32
  --cnvs-brand-caution-700: var(--cnvs-base-palette-amber-700);
33
33
  --cnvs-brand-caution-600: var(--cnvs-base-palette-amber-600);
34
34
  --cnvs-brand-caution-500: var(--cnvs-base-palette-amber-500);
35
- --cnvs-brand-caution-400: var(--cnvs-base-palette-amber-400); /* Base caution color (amber.400). Use fg.contrast.default on this. */
35
+ --cnvs-brand-caution-400: var(--cnvs-base-palette-amber-400); /* Base caution color (amber.400). Use fg.contrast.default instead */
36
36
  --cnvs-brand-caution-300: var(--cnvs-base-palette-amber-300);
37
37
  --cnvs-brand-caution-200: var(--cnvs-base-palette-amber-200);
38
38
  --cnvs-brand-caution-100: var(--cnvs-base-palette-amber-100);
@@ -47,7 +47,7 @@
47
47
  --cnvs-brand-critical-900: var(--cnvs-base-palette-red-900);
48
48
  --cnvs-brand-critical-800: var(--cnvs-base-palette-red-800);
49
49
  --cnvs-brand-critical-700: var(--cnvs-base-palette-red-700);
50
- --cnvs-brand-critical-600: var(--cnvs-base-palette-red-600); /* Base critical color. Use fg.inverse on this. */
50
+ --cnvs-brand-critical-600: var(--cnvs-base-palette-red-600); /* Base critical color. Use fg.inverse instead */
51
51
  --cnvs-brand-critical-500: var(--cnvs-base-palette-red-500);
52
52
  --cnvs-brand-critical-400: var(--cnvs-base-palette-red-400);
53
53
  --cnvs-brand-critical-300: var(--cnvs-base-palette-red-300);
@@ -129,7 +129,7 @@
129
129
  --cnvs-brand-primary-900: var(--cnvs-base-palette-blue-900);
130
130
  --cnvs-brand-primary-800: var(--cnvs-base-palette-blue-800);
131
131
  --cnvs-brand-primary-700: var(--cnvs-base-palette-blue-700);
132
- --cnvs-brand-primary-600: var(--cnvs-base-palette-blue-600); /* Base primary color. Use fg.inverse on this. */
132
+ --cnvs-brand-primary-600: var(--cnvs-base-palette-blue-600); /* Base primary color. Use fg.inverse instead */
133
133
  --cnvs-brand-primary-500: var(--cnvs-base-palette-blue-500);
134
134
  --cnvs-brand-primary-400: var(--cnvs-base-palette-blue-400);
135
135
  --cnvs-brand-primary-300: var(--cnvs-base-palette-blue-300);
package/css/component/_variables.css CHANGED
@@ -1,10 +1,25 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 GMT
4
4
  */
5
5
 
6
6
  :root {
7
-
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);
8
23
  }
9
24
 
10
25
 
package/css/system/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 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 Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 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 Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 GMT
4
4
  */
5
5
 
6
6
  /**
@@ -57,7 +57,7 @@ export declare const primary500: "--cnvs-brand-primary-500";
57
57
  *
58
58
  * **CSS Var**: `--cnvs-brand-primary-600`
59
59
  *
60
- * Base primary color. Use fg.inverse on this.
60
+ * Base primary color. Use fg.inverse instead
61
61
  */
62
62
  export declare const primary600: "--cnvs-brand-primary-600";
63
63
 
@@ -716,7 +716,7 @@ export declare const critical500: "--cnvs-brand-critical-500";
716
716
  *
717
717
  * **CSS Var**: `--cnvs-brand-critical-600`
718
718
  *
719
- * Base critical color. Use fg.inverse on this.
719
+ * Base critical color. Use fg.inverse instead
720
720
  */
721
721
  export declare const critical600: "--cnvs-brand-critical-600";
722
722
 
@@ -823,7 +823,7 @@ export declare const caution300: "--cnvs-brand-caution-300";
823
823
  *
824
824
  * **CSS Var**: `--cnvs-brand-caution-400`
825
825
  *
826
- * Base caution color (amber.400). Use fg.contrast.default on this.
826
+ * Base caution color (amber.400). Use fg.contrast.default instead
827
827
  */
828
828
  export declare const caution400: "--cnvs-brand-caution-400";
829
829
 
@@ -958,7 +958,7 @@ export declare const positive500: "--cnvs-brand-positive-500";
958
958
  *
959
959
  * **CSS Var**: `--cnvs-brand-positive-600`
960
960
  *
961
- * Base success color. Use fg.inverse on this.
961
+ * Base success color. Use fg.inverse instead
962
962
  */
963
963
  export declare const positive600: "--cnvs-brand-positive-600";
964
964
 
package/dist/common-js/brand/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 GMT
4
4
  */
5
5
 
6
6
  "use strict";
package/dist/common-js/component/index.d.ts CHANGED
@@ -1,5 +1,124 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 GMT
4
4
  */
5
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 CHANGED
@@ -1,8 +1,36 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 GMT
4
4
  */
5
5
 
6
6
  "use strict";
7
7
  Object.defineProperty(exports, "__esModule", { value: true });
8
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 Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 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 Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 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 Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 GMT
4
4
  */
5
5
 
6
6
  export declare const breakpoints: {
package/dist/common-js/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:49 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 GMT
4
4
  */
5
5
 
6
6
  /**
@@ -57,7 +57,7 @@ export declare const primary500: "--cnvs-brand-primary-500";
57
57
  *
58
58
  * **CSS Var**: `--cnvs-brand-primary-600`
59
59
  *
60
- * Base primary color. Use fg.inverse on this.
60
+ * Base primary color. Use fg.inverse instead
61
61
  */
62
62
  export declare const primary600: "--cnvs-brand-primary-600";
63
63
 
@@ -716,7 +716,7 @@ export declare const critical500: "--cnvs-brand-critical-500";
716
716
  *
717
717
  * **CSS Var**: `--cnvs-brand-critical-600`
718
718
  *
719
- * Base critical color. Use fg.inverse on this.
719
+ * Base critical color. Use fg.inverse instead
720
720
  */
721
721
  export declare const critical600: "--cnvs-brand-critical-600";
722
722
 
@@ -823,7 +823,7 @@ export declare const caution300: "--cnvs-brand-caution-300";
823
823
  *
824
824
  * **CSS Var**: `--cnvs-brand-caution-400`
825
825
  *
826
- * Base caution color (amber.400). Use fg.contrast.default on this.
826
+ * Base caution color (amber.400). Use fg.contrast.default instead
827
827
  */
828
828
  export declare const caution400: "--cnvs-brand-caution-400";
829
829
 
@@ -958,7 +958,7 @@ export declare const positive500: "--cnvs-brand-positive-500";
958
958
  *
959
959
  * **CSS Var**: `--cnvs-brand-positive-600`
960
960
  *
961
- * Base success color. Use fg.inverse on this.
961
+ * Base success color. Use fg.inverse instead
962
962
  */
963
963
  export declare const positive600: "--cnvs-brand-positive-600";
964
964
 
package/dist/es6/brand/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 GMT
4
4
  */
5
5
 
6
6
  export const primary25 = "--cnvs-brand-primary-25";
package/dist/es6/component/index.d.ts CHANGED
@@ -1,5 +1,124 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 GMT
4
4
  */
5
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 CHANGED
@@ -1,5 +1,33 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:04 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 GMT
4
4
  */
5
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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 GMT
4
4
  */
5
5
 
6
6
  export declare const breakpoints: {
package/dist/es6/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 25 Mar 2026 17:29:03 GMT
3
+ * Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 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;
@@ -11,7 +11,7 @@
11
11
  @cnvs-brand-positive-900: @cnvs-base-palette-green-900;
12
12
  @cnvs-brand-positive-800: @cnvs-base-palette-green-800;
13
13
  @cnvs-brand-positive-700: @cnvs-base-palette-green-700;
14
- @cnvs-brand-positive-600: @cnvs-base-palette-green-600; // Base success color. Use fg.inverse on this.
14
+ @cnvs-brand-positive-600: @cnvs-base-palette-green-600; // Base success color. Use fg.inverse instead
15
15
  @cnvs-brand-positive-500: @cnvs-base-palette-green-500;
16
16
  @cnvs-brand-positive-400: @cnvs-base-palette-green-400;
17
17
  @cnvs-brand-positive-300: @cnvs-base-palette-green-300;
@@ -30,7 +30,7 @@
30
30
  @cnvs-brand-caution-700: @cnvs-base-palette-amber-700;
31
31
  @cnvs-brand-caution-600: @cnvs-base-palette-amber-600;
32
32
  @cnvs-brand-caution-500: @cnvs-base-palette-amber-500;
33
- @cnvs-brand-caution-400: @cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default on this.
33
+ @cnvs-brand-caution-400: @cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default instead
34
34
  @cnvs-brand-caution-300: @cnvs-base-palette-amber-300;
35
35
  @cnvs-brand-caution-200: @cnvs-base-palette-amber-200;
36
36
  @cnvs-brand-caution-100: @cnvs-base-palette-amber-100;
@@ -45,7 +45,7 @@
45
45
  @cnvs-brand-critical-900: @cnvs-base-palette-red-900;
46
46
  @cnvs-brand-critical-800: @cnvs-base-palette-red-800;
47
47
  @cnvs-brand-critical-700: @cnvs-base-palette-red-700;
48
- @cnvs-brand-critical-600: @cnvs-base-palette-red-600; // Base critical color. Use fg.inverse on this.
48
+ @cnvs-brand-critical-600: @cnvs-base-palette-red-600; // Base critical color. Use fg.inverse instead
49
49
  @cnvs-brand-critical-500: @cnvs-base-palette-red-500;
50
50
  @cnvs-brand-critical-400: @cnvs-base-palette-red-400;
51
51
  @cnvs-brand-critical-300: @cnvs-base-palette-red-300;
@@ -127,7 +127,7 @@
127
127
  @cnvs-brand-primary-900: @cnvs-base-palette-blue-900;
128
128
  @cnvs-brand-primary-800: @cnvs-base-palette-blue-800;
129
129
  @cnvs-brand-primary-700: @cnvs-base-palette-blue-700;
130
- @cnvs-brand-primary-600: @cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse on this.
130
+ @cnvs-brand-primary-600: @cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse instead
131
131
  @cnvs-brand-primary-500: @cnvs-base-palette-blue-500;
132
132
  @cnvs-brand-primary-400: @cnvs-base-palette-blue-400;
133
133
  @cnvs-brand-primary-300: @cnvs-base-palette-blue-300;
package/less/component/_variables.less CHANGED
@@ -1,7 +1,22 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 25 Mar 2026 17:29:03 GMT
4
-
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 GMT
5
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;
6
21
 
7
22
 
package/less/system/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 25 Mar 2026 17:29:03 GMT
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 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.5",
3
+ "version": "4.2.0-beta.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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 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;
@@ -11,7 +11,7 @@ $cnvs-brand-positive-950: $cnvs-base-palette-green-950;
11
11
  $cnvs-brand-positive-900: $cnvs-base-palette-green-900;
12
12
  $cnvs-brand-positive-800: $cnvs-base-palette-green-800;
13
13
  $cnvs-brand-positive-700: $cnvs-base-palette-green-700;
14
- $cnvs-brand-positive-600: $cnvs-base-palette-green-600; // Base success color. Use fg.inverse on this.
14
+ $cnvs-brand-positive-600: $cnvs-base-palette-green-600; // Base success color. Use fg.inverse instead
15
15
  $cnvs-brand-positive-500: $cnvs-base-palette-green-500;
16
16
  $cnvs-brand-positive-400: $cnvs-base-palette-green-400;
17
17
  $cnvs-brand-positive-300: $cnvs-base-palette-green-300;
@@ -30,7 +30,7 @@ $cnvs-brand-caution-800: $cnvs-base-palette-amber-800;
30
30
  $cnvs-brand-caution-700: $cnvs-base-palette-amber-700;
31
31
  $cnvs-brand-caution-600: $cnvs-base-palette-amber-600;
32
32
  $cnvs-brand-caution-500: $cnvs-base-palette-amber-500;
33
- $cnvs-brand-caution-400: $cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default on this.
33
+ $cnvs-brand-caution-400: $cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default instead
34
34
  $cnvs-brand-caution-300: $cnvs-base-palette-amber-300;
35
35
  $cnvs-brand-caution-200: $cnvs-base-palette-amber-200;
36
36
  $cnvs-brand-caution-100: $cnvs-base-palette-amber-100;
@@ -45,7 +45,7 @@ $cnvs-brand-critical-950: $cnvs-base-palette-red-950;
45
45
  $cnvs-brand-critical-900: $cnvs-base-palette-red-900;
46
46
  $cnvs-brand-critical-800: $cnvs-base-palette-red-800;
47
47
  $cnvs-brand-critical-700: $cnvs-base-palette-red-700;
48
- $cnvs-brand-critical-600: $cnvs-base-palette-red-600; // Base critical color. Use fg.inverse on this.
48
+ $cnvs-brand-critical-600: $cnvs-base-palette-red-600; // Base critical color. Use fg.inverse instead
49
49
  $cnvs-brand-critical-500: $cnvs-base-palette-red-500;
50
50
  $cnvs-brand-critical-400: $cnvs-base-palette-red-400;
51
51
  $cnvs-brand-critical-300: $cnvs-base-palette-red-300;
@@ -127,7 +127,7 @@ $cnvs-brand-primary-950: $cnvs-base-palette-blue-950;
127
127
  $cnvs-brand-primary-900: $cnvs-base-palette-blue-900;
128
128
  $cnvs-brand-primary-800: $cnvs-base-palette-blue-800;
129
129
  $cnvs-brand-primary-700: $cnvs-base-palette-blue-700;
130
- $cnvs-brand-primary-600: $cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse on this.
130
+ $cnvs-brand-primary-600: $cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse instead
131
131
  $cnvs-brand-primary-500: $cnvs-base-palette-blue-500;
132
132
  $cnvs-brand-primary-400: $cnvs-base-palette-blue-400;
133
133
  $cnvs-brand-primary-300: $cnvs-base-palette-blue-300;
package/scss/brand/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 25 Mar 2026 17:29:03 GMT
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 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;
@@ -11,7 +11,7 @@ $cnvs-brand-positive-950: $cnvs-base-palette-green-950;
11
11
  $cnvs-brand-positive-900: $cnvs-base-palette-green-900;
12
12
  $cnvs-brand-positive-800: $cnvs-base-palette-green-800;
13
13
  $cnvs-brand-positive-700: $cnvs-base-palette-green-700;
14
- $cnvs-brand-positive-600: $cnvs-base-palette-green-600; // Base success color. Use fg.inverse on this.
14
+ $cnvs-brand-positive-600: $cnvs-base-palette-green-600; // Base success color. Use fg.inverse instead
15
15
  $cnvs-brand-positive-500: $cnvs-base-palette-green-500;
16
16
  $cnvs-brand-positive-400: $cnvs-base-palette-green-400;
17
17
  $cnvs-brand-positive-300: $cnvs-base-palette-green-300;
@@ -30,7 +30,7 @@ $cnvs-brand-caution-800: $cnvs-base-palette-amber-800;
30
30
  $cnvs-brand-caution-700: $cnvs-base-palette-amber-700;
31
31
  $cnvs-brand-caution-600: $cnvs-base-palette-amber-600;
32
32
  $cnvs-brand-caution-500: $cnvs-base-palette-amber-500;
33
- $cnvs-brand-caution-400: $cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default on this.
33
+ $cnvs-brand-caution-400: $cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default instead
34
34
  $cnvs-brand-caution-300: $cnvs-base-palette-amber-300;
35
35
  $cnvs-brand-caution-200: $cnvs-base-palette-amber-200;
36
36
  $cnvs-brand-caution-100: $cnvs-base-palette-amber-100;
@@ -45,7 +45,7 @@ $cnvs-brand-critical-950: $cnvs-base-palette-red-950;
45
45
  $cnvs-brand-critical-900: $cnvs-base-palette-red-900;
46
46
  $cnvs-brand-critical-800: $cnvs-base-palette-red-800;
47
47
  $cnvs-brand-critical-700: $cnvs-base-palette-red-700;
48
- $cnvs-brand-critical-600: $cnvs-base-palette-red-600; // Base critical color. Use fg.inverse on this.
48
+ $cnvs-brand-critical-600: $cnvs-base-palette-red-600; // Base critical color. Use fg.inverse instead
49
49
  $cnvs-brand-critical-500: $cnvs-base-palette-red-500;
50
50
  $cnvs-brand-critical-400: $cnvs-base-palette-red-400;
51
51
  $cnvs-brand-critical-300: $cnvs-base-palette-red-300;
@@ -127,7 +127,7 @@ $cnvs-brand-primary-950: $cnvs-base-palette-blue-950;
127
127
  $cnvs-brand-primary-900: $cnvs-base-palette-blue-900;
128
128
  $cnvs-brand-primary-800: $cnvs-base-palette-blue-800;
129
129
  $cnvs-brand-primary-700: $cnvs-base-palette-blue-700;
130
- $cnvs-brand-primary-600: $cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse on this.
130
+ $cnvs-brand-primary-600: $cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse instead
131
131
  $cnvs-brand-primary-500: $cnvs-base-palette-blue-500;
132
132
  $cnvs-brand-primary-400: $cnvs-base-palette-blue-400;
133
133
  $cnvs-brand-primary-300: $cnvs-base-palette-blue-300;
package/scss/component/_variables.sass CHANGED
@@ -1,7 +1,22 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 25 Mar 2026 17:29:03 GMT
4
-
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 GMT
5
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;
6
21
 
7
22
 
package/scss/component/_variables.scss CHANGED
@@ -1,7 +1,22 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 25 Mar 2026 17:29:03 GMT
4
-
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 GMT
5
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;
6
21
 
7
22
 
package/scss/system/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 25 Mar 2026 17:29:03 GMT
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 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 Wed, 25 Mar 2026 17:29:03 GMT
3
+ // Generated on Tue, 07 Apr 2026 01:00:48 GMT
4
4
 
5
5
  $cnvs-sys-opacity-full: 1; // Dev only
6
6
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables