@workday/canvas-tokens-web 3.0.0-alpha.2 → 3.0.0-alpha.3

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 (29) hide show
  1. package/css/base/_variables.css +1 -1
  2. package/css/brand/_variables.css +2 -1
  3. package/css/system/_variables.css +8 -8
  4. package/dist/common-js/base/index.d.ts +1 -1
  5. package/dist/common-js/base/index.js +1 -1
  6. package/dist/common-js/brand/index.d.ts +3 -1
  7. package/dist/common-js/brand/index.js +3 -2
  8. package/dist/common-js/index.d.ts +1 -1
  9. package/dist/common-js/index.js +1 -1
  10. package/dist/common-js/system/index.d.ts +40 -16
  11. package/dist/common-js/system/index.js +2 -2
  12. package/dist/es6/base/index.d.ts +1 -1
  13. package/dist/es6/base/index.js +1 -1
  14. package/dist/es6/brand/index.d.ts +3 -1
  15. package/dist/es6/brand/index.js +3 -2
  16. package/dist/es6/index.d.ts +1 -1
  17. package/dist/es6/index.js +1 -1
  18. package/dist/es6/system/index.d.ts +40 -16
  19. package/dist/es6/system/index.js +2 -2
  20. package/less/base/_variables.less +1 -1
  21. package/less/brand/_variables.less +2 -1
  22. package/less/system/_variables.less +8 -8
  23. package/package.json +1 -1
  24. package/scss/base/_variables.sass +1 -1
  25. package/scss/base/_variables.scss +1 -1
  26. package/scss/brand/_variables.sass +2 -1
  27. package/scss/brand/_variables.scss +2 -1
  28. package/scss/system/_variables.sass +8 -8
  29. package/scss/system/_variables.scss +8 -8
package/css/base/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  :root {
package/css/brand/_variables.css CHANGED
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --cnvs-brand-common-alert-outer: var(--cnvs-base-palette-amber-500);
7
8
  --cnvs-brand-common-alert-inner: var(--cnvs-base-palette-amber-400);
8
9
  --cnvs-brand-common-error-inner: var(--cnvs-base-palette-red-500);
9
10
  --cnvs-brand-common-focus-outline: var(--cnvs-base-palette-blue-500);
package/css/system/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -14,7 +14,7 @@
14
14
  --cnvs-sys-shape-zero: 0rem; /* This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels. */
15
15
  --cnvs-sys-opacity-full: 1; /* Dev only */
16
16
  --cnvs-sys-opacity-zero: 0; /* Dev only */
17
- --cnvs-sys-breakpoints-zero: 0px;
17
+ --cnvs-sys-breakpoints-zero: 0px; /* Use to set a media query `min-width` below small. */
18
18
  --cnvs-sys-color-static-amber-strongest: var(--cnvs-base-palette-amber-700); /* Stronger amber */
19
19
  --cnvs-sys-color-static-amber-soft: var(--cnvs-base-palette-amber-200); /* Soft amber */
20
20
  --cnvs-sys-color-static-amber-stronger: var(--cnvs-base-palette-amber-600); /* Stronger amber */
@@ -182,17 +182,17 @@
182
182
  --cnvs-sys-shape-round: calc(var(--cnvs-base-unit) * 250); /* Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges. */
183
183
  --cnvs-sys-shape-x2: calc(var(--cnvs-base-unit) * 2); /* Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts. */
184
184
  --cnvs-sys-shape-x1-half: calc(var(--cnvs-base-unit) * 1.5);
185
- --cnvs-sys-shape-x1: var(--cnvs-base-unit); /* Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners. */
185
+ --cnvs-sys-shape-x1: var(--cnvs-base-unit);
186
186
  --cnvs-sys-shape-half: calc(var(--cnvs-base-unit) * 0.5); /* Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches. */
187
187
  --cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-100); /* Alpha on second shadow */
188
188
  --cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-200); /* Alpha on first shadow */
189
- --cnvs-sys-opacity-transclucent: var(--cnvs-base-opacity-500); /* Tooltips, Status Indicator */
189
+ --cnvs-sys-opacity-contrast: var(--cnvs-base-opacity-500); /* Tooltips, Status Indicator */
190
190
  --cnvs-sys-opacity-overlay: var(--cnvs-base-opacity-400); /* Overlay */
191
191
  --cnvs-sys-opacity-disabled: var(--cnvs-base-opacity-300); /* Disabled states */
192
- --cnvs-sys-breakpoints-xl: 1440px;
193
- --cnvs-sys-breakpoints-l: 1024px;
194
- --cnvs-sys-breakpoints-m: 768px;
195
- --cnvs-sys-breakpoints-s: 320px;
192
+ --cnvs-sys-breakpoints-xl: 1440px; /* Used for extra large screens, such as wide monitors and TVs. */
193
+ --cnvs-sys-breakpoints-l: 1024px; /* Large screens, such as desktops. */
194
+ --cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
195
+ --cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
196
196
  --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
197
197
  --cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-75);
198
198
  --cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
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, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  export declare const neutral0: "--cnvs-base-palette-neutral-0";
package/dist/common-js/base/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 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, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  export declare const primary: {
@@ -144,6 +144,8 @@ export declare const common: {
144
144
  "errorInner": "--cnvs-brand-common-error-inner",
145
145
  /** oklch(0.762 0.182 70.69 / 1) */
146
146
  "alertInner": "--cnvs-brand-common-alert-inner",
147
+ /** oklch(0.6682 0.1876 55.52 / 1) */
148
+ "alertOuter": "--cnvs-brand-common-alert-outer",
147
149
  };
148
150
 
149
151
  export declare const gradient: {
package/dist/common-js/brand/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -58,7 +58,8 @@ exports.action = {
58
58
  exports.common = {
59
59
  "focusOutline": "--cnvs-brand-common-focus-outline",
60
60
  "errorInner": "--cnvs-brand-common-error-inner",
61
- "alertInner": "--cnvs-brand-common-alert-inner"
61
+ "alertInner": "--cnvs-brand-common-alert-inner",
62
+ "alertOuter": "--cnvs-brand-common-alert-outer"
62
63
  };
63
64
  exports.gradient = {
64
65
  "primary": "--cnvs-brand-gradient-primary"
package/dist/common-js/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
package/dist/common-js/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  "use strict";
package/dist/common-js/system/index.d.ts CHANGED
@@ -1,18 +1,48 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  export declare const breakpoints: {
7
- /** 0 */
7
+ /**
8
+ * 0
9
+ *
10
+ * token: 0
11
+ *
12
+ * Use to set a media query `min-width` below small.
13
+ */
8
14
  "zero": "--cnvs-sys-breakpoints-zero",
9
- /** 20rem (320px) */
15
+ /**
16
+ * 20rem (320px)
17
+ *
18
+ * token: {base.unit} * 80
19
+ *
20
+ * The `min-width` for mobile devices, such as phones and tablets.
21
+ */
10
22
  "s": "--cnvs-sys-breakpoints-s",
11
- /** 48rem (768px) */
23
+ /**
24
+ * 48rem (768px)
25
+ *
26
+ * token: {base.unit} * 192
27
+ *
28
+ * Medium screens, such as laptops.
29
+ */
12
30
  "m": "--cnvs-sys-breakpoints-m",
13
- /** 64rem (1024px) */
31
+ /**
32
+ * 64rem (1024px)
33
+ *
34
+ * token: {base.unit} * 256
35
+ *
36
+ * Large screens, such as desktops.
37
+ */
14
38
  "l": "--cnvs-sys-breakpoints-l",
15
- /** 90rem (1440px) */
39
+ /**
40
+ * 90rem (1440px)
41
+ *
42
+ * token: {base.unit} * 360
43
+ *
44
+ * Used for extra large screens, such as wide monitors and TVs.
45
+ */
16
46
  "xl": "--cnvs-sys-breakpoints-xl",
17
47
  };
18
48
 
@@ -73,7 +103,7 @@ export declare const opacity: {
73
103
  /**
74
104
  * 0
75
105
  *
76
- *
106
+ * token: 0
77
107
  *
78
108
  * Dev only
79
109
  */
@@ -101,11 +131,11 @@ export declare const opacity: {
101
131
  *
102
132
  * Tooltips, Status Indicator
103
133
  */
104
- "transclucent": "--cnvs-sys-opacity-transclucent",
134
+ "contrast": "--cnvs-sys-opacity-contrast",
105
135
  /**
106
136
  * 1
107
137
  *
108
- *
138
+ * token: 1
109
139
  *
110
140
  * Dev only
111
141
  */
@@ -147,13 +177,7 @@ export declare const shape: {
147
177
  * Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
148
178
  */
149
179
  "half": "--cnvs-sys-shape-half",
150
- /**
151
- * 0.25rem (4px)
152
- *
153
- * token: base.unit
154
- *
155
- * Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
156
- */
180
+ /** 0.25rem (4px) */
157
181
  "x1": "--cnvs-sys-shape-x1",
158
182
  /** 0.375rem (6px) */
159
183
  "x1Half": "--cnvs-sys-shape-x1-half",
package/dist/common-js/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -25,7 +25,7 @@ exports.opacity = {
25
25
  "zero": "--cnvs-sys-opacity-zero",
26
26
  "disabled": "--cnvs-sys-opacity-disabled",
27
27
  "overlay": "--cnvs-sys-opacity-overlay",
28
- "transclucent": "--cnvs-sys-opacity-transclucent",
28
+ "contrast": "--cnvs-sys-opacity-contrast",
29
29
  "full": "--cnvs-sys-opacity-full",
30
30
  "shadow": {
31
31
  "first": "--cnvs-sys-opacity-shadow-first",
package/dist/es6/base/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  export declare const neutral0: "--cnvs-base-palette-neutral-0";
package/dist/es6/base/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  export const neutral0 = "--cnvs-base-palette-neutral-0";
package/dist/es6/brand/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  export declare const primary: {
@@ -144,6 +144,8 @@ export declare const common: {
144
144
  "errorInner": "--cnvs-brand-common-error-inner",
145
145
  /** oklch(0.762 0.182 70.69 / 1) */
146
146
  "alertInner": "--cnvs-brand-common-alert-inner",
147
+ /** oklch(0.6682 0.1876 55.52 / 1) */
148
+ "alertOuter": "--cnvs-brand-common-alert-outer",
147
149
  };
148
150
 
149
151
  export declare const gradient: {
package/dist/es6/brand/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  export const primary = {
@@ -55,7 +55,8 @@ export const action = {
55
55
  export const common = {
56
56
  "focusOutline": "--cnvs-brand-common-focus-outline",
57
57
  "errorInner": "--cnvs-brand-common-error-inner",
58
- "alertInner": "--cnvs-brand-common-alert-inner"
58
+ "alertInner": "--cnvs-brand-common-alert-inner",
59
+ "alertOuter": "--cnvs-brand-common-alert-outer"
59
60
  };
60
61
  export const gradient = {
61
62
  "primary": "--cnvs-brand-gradient-primary"
package/dist/es6/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
package/dist/es6/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
package/dist/es6/system/index.d.ts CHANGED
@@ -1,18 +1,48 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  export declare const breakpoints: {
7
- /** 0 */
7
+ /**
8
+ * 0
9
+ *
10
+ * token: 0
11
+ *
12
+ * Use to set a media query `min-width` below small.
13
+ */
8
14
  "zero": "--cnvs-sys-breakpoints-zero",
9
- /** 20rem (320px) */
15
+ /**
16
+ * 20rem (320px)
17
+ *
18
+ * token: {base.unit} * 80
19
+ *
20
+ * The `min-width` for mobile devices, such as phones and tablets.
21
+ */
10
22
  "s": "--cnvs-sys-breakpoints-s",
11
- /** 48rem (768px) */
23
+ /**
24
+ * 48rem (768px)
25
+ *
26
+ * token: {base.unit} * 192
27
+ *
28
+ * Medium screens, such as laptops.
29
+ */
12
30
  "m": "--cnvs-sys-breakpoints-m",
13
- /** 64rem (1024px) */
31
+ /**
32
+ * 64rem (1024px)
33
+ *
34
+ * token: {base.unit} * 256
35
+ *
36
+ * Large screens, such as desktops.
37
+ */
14
38
  "l": "--cnvs-sys-breakpoints-l",
15
- /** 90rem (1440px) */
39
+ /**
40
+ * 90rem (1440px)
41
+ *
42
+ * token: {base.unit} * 360
43
+ *
44
+ * Used for extra large screens, such as wide monitors and TVs.
45
+ */
16
46
  "xl": "--cnvs-sys-breakpoints-xl",
17
47
  };
18
48
 
@@ -73,7 +103,7 @@ export declare const opacity: {
73
103
  /**
74
104
  * 0
75
105
  *
76
- *
106
+ * token: 0
77
107
  *
78
108
  * Dev only
79
109
  */
@@ -101,11 +131,11 @@ export declare const opacity: {
101
131
  *
102
132
  * Tooltips, Status Indicator
103
133
  */
104
- "transclucent": "--cnvs-sys-opacity-transclucent",
134
+ "contrast": "--cnvs-sys-opacity-contrast",
105
135
  /**
106
136
  * 1
107
137
  *
108
- *
138
+ * token: 1
109
139
  *
110
140
  * Dev only
111
141
  */
@@ -147,13 +177,7 @@ export declare const shape: {
147
177
  * Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
148
178
  */
149
179
  "half": "--cnvs-sys-shape-half",
150
- /**
151
- * 0.25rem (4px)
152
- *
153
- * token: base.unit
154
- *
155
- * Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
156
- */
180
+ /** 0.25rem (4px) */
157
181
  "x1": "--cnvs-sys-shape-x1",
158
182
  /** 0.375rem (6px) */
159
183
  "x1Half": "--cnvs-sys-shape-x1-half",
package/dist/es6/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ * Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
  */
5
5
 
6
6
  export const breakpoints = {
@@ -22,7 +22,7 @@ export const opacity = {
22
22
  "zero": "--cnvs-sys-opacity-zero",
23
23
  "disabled": "--cnvs-sys-opacity-disabled",
24
24
  "overlay": "--cnvs-sys-opacity-overlay",
25
- "transclucent": "--cnvs-sys-opacity-transclucent",
25
+ "contrast": "--cnvs-sys-opacity-contrast",
26
26
  "full": "--cnvs-sys-opacity-full",
27
27
  "shadow": {
28
28
  "first": "--cnvs-sys-opacity-shadow-first",
package/less/base/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ // Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
 
5
5
  @cnvs-base-palette-neutral-0: oklch(1 0 0 / 1);
6
6
  @cnvs-base-palette-neutral-25: oklch(0.985 0 0 / 1);
package/less/brand/_variables.less CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ // Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
 
5
+ @cnvs-brand-common-alert-outer: @cnvs-base-palette-amber-500;
5
6
  @cnvs-brand-common-alert-inner: @cnvs-base-palette-amber-400;
6
7
  @cnvs-brand-common-error-inner: @cnvs-base-palette-red-500;
7
8
  @cnvs-brand-common-focus-outline: @cnvs-base-palette-blue-500;
package/less/system/_variables.less CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ // Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
 
5
5
  @cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
6
  @cnvs-sys-shape-zero: 0rem; // This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
7
7
  @cnvs-sys-opacity-full: 1; // Dev only
8
8
  @cnvs-sys-opacity-zero: 0; // Dev only
9
- @cnvs-sys-breakpoints-zero: 0px;
9
+ @cnvs-sys-breakpoints-zero: 0px; // Use to set a media query `min-width` below small.
10
10
  @cnvs-sys-color-static-amber-strongest: @cnvs-base-palette-amber-700; // Stronger amber
11
11
  @cnvs-sys-color-static-amber-soft: @cnvs-base-palette-amber-200; // Soft amber
12
12
  @cnvs-sys-color-static-amber-stronger: @cnvs-base-palette-amber-600; // Stronger amber
@@ -174,17 +174,17 @@
174
174
  @cnvs-sys-shape-round: calc(@cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
175
175
  @cnvs-sys-shape-x2: calc(@cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
176
176
  @cnvs-sys-shape-x1-half: calc(@cnvs-base-unit * 1.5);
177
- @cnvs-sys-shape-x1: @cnvs-base-unit; // Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
177
+ @cnvs-sys-shape-x1: @cnvs-base-unit;
178
178
  @cnvs-sys-shape-half: calc(@cnvs-base-unit * 0.5); // Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
179
179
  @cnvs-sys-opacity-shadow-second: @cnvs-base-opacity-100; // Alpha on second shadow
180
180
  @cnvs-sys-opacity-shadow-first: @cnvs-base-opacity-200; // Alpha on first shadow
181
- @cnvs-sys-opacity-transclucent: @cnvs-base-opacity-500; // Tooltips, Status Indicator
181
+ @cnvs-sys-opacity-contrast: @cnvs-base-opacity-500; // Tooltips, Status Indicator
182
182
  @cnvs-sys-opacity-overlay: @cnvs-base-opacity-400; // Overlay
183
183
  @cnvs-sys-opacity-disabled: @cnvs-base-opacity-300; // Disabled states
184
- @cnvs-sys-breakpoints-xl: 1440px;
185
- @cnvs-sys-breakpoints-l: 1024px;
186
- @cnvs-sys-breakpoints-m: 768px;
187
- @cnvs-sys-breakpoints-s: 320px;
184
+ @cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
185
+ @cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
186
+ @cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
187
+ @cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
188
188
  @cnvs-sys-font-size-subtext-medium: @cnvs-base-font-size-50;
189
189
  @cnvs-sys-font-size-subtext-large: @cnvs-base-font-size-75;
190
190
  @cnvs-sys-font-size-body-small: @cnvs-base-font-size-100;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-tokens-web",
3
- "version": "3.0.0-alpha.2",
3
+ "version": "3.0.0-alpha.3",
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, 26 Jun 2025 18:01:43 GMT
3
+ // Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
 
5
5
  $cnvs-base-palette-neutral-0: oklch(1 0 0 / 1);
6
6
  $cnvs-base-palette-neutral-25: oklch(0.985 0 0 / 1);
package/scss/base/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ // Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
 
5
5
  $cnvs-base-palette-neutral-0: oklch(1 0 0 / 1);
6
6
  $cnvs-base-palette-neutral-25: oklch(0.985 0 0 / 1);
package/scss/brand/_variables.sass CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ // Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
 
5
+ $cnvs-brand-common-alert-outer: $cnvs-base-palette-amber-500;
5
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-amber-400;
6
7
  $cnvs-brand-common-error-inner: $cnvs-base-palette-red-500;
7
8
  $cnvs-brand-common-focus-outline: $cnvs-base-palette-blue-500;
package/scss/brand/_variables.scss CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ // Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
 
5
+ $cnvs-brand-common-alert-outer: $cnvs-base-palette-amber-500;
5
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-amber-400;
6
7
  $cnvs-brand-common-error-inner: $cnvs-base-palette-red-500;
7
8
  $cnvs-brand-common-focus-outline: $cnvs-base-palette-blue-500;
package/scss/system/_variables.sass CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ // Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
 
5
5
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
6
  $cnvs-sys-shape-zero: 0rem; // This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
7
7
  $cnvs-sys-opacity-full: 1; // Dev only
8
8
  $cnvs-sys-opacity-zero: 0; // Dev only
9
- $cnvs-sys-breakpoints-zero: 0px;
9
+ $cnvs-sys-breakpoints-zero: 0px; // Use to set a media query `min-width` below small.
10
10
  $cnvs-sys-color-static-amber-strongest: $cnvs-base-palette-amber-700; // Stronger amber
11
11
  $cnvs-sys-color-static-amber-soft: $cnvs-base-palette-amber-200; // Soft amber
12
12
  $cnvs-sys-color-static-amber-stronger: $cnvs-base-palette-amber-600; // Stronger amber
@@ -174,17 +174,17 @@ $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
174
174
  $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
175
175
  $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
176
176
  $cnvs-sys-shape-x1-half: calc($cnvs-base-unit * 1.5);
177
- $cnvs-sys-shape-x1: $cnvs-base-unit; // Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
177
+ $cnvs-sys-shape-x1: $cnvs-base-unit;
178
178
  $cnvs-sys-shape-half: calc($cnvs-base-unit * 0.5); // Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
179
179
  $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
180
180
  $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
181
- $cnvs-sys-opacity-transclucent: $cnvs-base-opacity-500; // Tooltips, Status Indicator
181
+ $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
182
182
  $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
183
183
  $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
184
- $cnvs-sys-breakpoints-xl: 1440px;
185
- $cnvs-sys-breakpoints-l: 1024px;
186
- $cnvs-sys-breakpoints-m: 768px;
187
- $cnvs-sys-breakpoints-s: 320px;
184
+ $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
185
+ $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
186
+ $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
187
+ $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
188
188
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
189
189
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
190
190
  $cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
package/scss/system/_variables.scss CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 26 Jun 2025 18:01:43 GMT
3
+ // Generated on Thu, 26 Jun 2025 18:08:28 GMT
4
4
 
5
5
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
6
  $cnvs-sys-shape-zero: 0rem; // This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
7
7
  $cnvs-sys-opacity-full: 1; // Dev only
8
8
  $cnvs-sys-opacity-zero: 0; // Dev only
9
- $cnvs-sys-breakpoints-zero: 0px;
9
+ $cnvs-sys-breakpoints-zero: 0px; // Use to set a media query `min-width` below small.
10
10
  $cnvs-sys-color-static-amber-strongest: $cnvs-base-palette-amber-700; // Stronger amber
11
11
  $cnvs-sys-color-static-amber-soft: $cnvs-base-palette-amber-200; // Soft amber
12
12
  $cnvs-sys-color-static-amber-stronger: $cnvs-base-palette-amber-600; // Stronger amber
@@ -174,17 +174,17 @@ $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
174
174
  $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
175
175
  $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
176
176
  $cnvs-sys-shape-x1-half: calc($cnvs-base-unit * 1.5);
177
- $cnvs-sys-shape-x1: $cnvs-base-unit; // Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
177
+ $cnvs-sys-shape-x1: $cnvs-base-unit;
178
178
  $cnvs-sys-shape-half: calc($cnvs-base-unit * 0.5); // Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
179
179
  $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
180
180
  $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
181
- $cnvs-sys-opacity-transclucent: $cnvs-base-opacity-500; // Tooltips, Status Indicator
181
+ $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
182
182
  $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
183
183
  $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
184
- $cnvs-sys-breakpoints-xl: 1440px;
185
- $cnvs-sys-breakpoints-l: 1024px;
186
- $cnvs-sys-breakpoints-m: 768px;
187
- $cnvs-sys-breakpoints-s: 320px;
184
+ $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
185
+ $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
186
+ $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
187
+ $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
188
188
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
189
189
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
190
190
  $cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;