@workday/canvas-tokens-web 2.0.2 → 2.1.1

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 +1 -1
  3. package/css/system/_variables.css +45 -45
  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 +52 -1
  7. package/dist/common-js/brand/index.js +9 -1
  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 +1165 -1165
  11. package/dist/common-js/system/index.js +182 -182
  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 +52 -1
  15. package/dist/es6/brand/index.js +9 -1
  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 +1165 -1165
  19. package/dist/es6/system/index.js +182 -182
  20. package/less/base/_variables.less +1 -1
  21. package/less/brand/_variables.less +1 -1
  22. package/less/system/_variables.less +45 -45
  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 +1 -1
  27. package/scss/brand/_variables.scss +1 -1
  28. package/scss/system/_variables.sass +45 -45
  29. package/scss/system/_variables.scss +45 -45
package/css/base/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 19:58:20 GMT
3
+ * Generated on Thu, 06 Feb 2025 15:20:12 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 Mon, 07 Oct 2024 19:58:20 GMT
3
+ * Generated on Thu, 06 Feb 2025 15:20:12 GMT
4
4
  */
5
5
 
6
6
  :root {
package/css/system/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 19:58:20 GMT
3
+ * Generated on Thu, 06 Feb 2025 15:20:12 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -10,54 +10,12 @@
10
10
  --cnvs-sys-depth-4: 0 0.25rem 1rem 0 rgba(31,38,46,0.12), 0 0.5rem 2rem 0 rgba(31,38,46,0.08); /* Bottom Sheets */
11
11
  --cnvs-sys-depth-5: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem 0 rgba(31,38,46,0.08); /* Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied) */
12
12
  --cnvs-sys-depth-6: 0 0.375rem 1.5rem 0 rgba(31,38,46,0.12), 0 0.75rem 3rem 0 rgba(31,38,46,0.08); /* Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied) */
13
+ --cnvs-sys-color-bg-critical-stronger: rgba(128,22,14,1); /* Stronger error background */
13
14
  --cnvs-sys-space-zero: 0; /* Stacks, rows in tables */
14
15
  --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
16
  --cnvs-sys-opacity-full: 1; /* Dev only */
16
17
  --cnvs-sys-opacity-zero: 0; /* Dev only */
17
18
  --cnvs-sys-breakpoints-zero: 0px; /* Use to set a media query `min-width` below small. */
18
- --cnvs-sys-color-bg-critical-stronger: rgba(128,22,14,1); /* Stronger error background */
19
- --cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
20
- --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
21
- --cnvs-sys-font-weight-normal: var(--cnvs-base-font-weight-400);
22
- --cnvs-sys-font-weight-light: var(--cnvs-base-font-weight-300);
23
- --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
24
- --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
25
- --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
26
- --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-350);
27
- --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-300);
28
- --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-250);
29
- --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-200);
30
- --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-200);
31
- --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-150);
32
- --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-100);
33
- --cnvs-sys-line-height-subtext-medium: var(--cnvs-base-line-height-50);
34
- --cnvs-sys-line-height-subtext-small: var(--cnvs-base-line-height-50);
35
- --cnvs-sys-font-size-subtext-small: var(--cnvs-base-font-size-25);
36
- --cnvs-sys-font-family-global: var(--cnvs-base-font-family-200);
37
- --cnvs-sys-font-family-mono: var(--cnvs-base-font-family-100);
38
- --cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
39
- --cnvs-sys-space-x20: calc(var(--cnvs-base-unit) * 20); /* - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available */
40
- --cnvs-sys-space-x16: calc(var(--cnvs-base-unit) * 16); /* - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections */
41
- --cnvs-sys-space-x10: calc(var(--cnvs-base-unit) * 10); /* • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections */
42
- --cnvs-sys-space-x8: calc(var(--cnvs-base-unit) * 8); /* • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs */
43
- --cnvs-sys-space-x6: calc(var(--cnvs-base-unit) * 6); /* • Padding around card content; • Related elements where more space between them can be afforded; • Separate section headings or titles from body text or inputs */
44
- --cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4); /* Default space token. Used to group Inputs with related data */
45
- --cnvs-sys-space-x3: calc(var(--cnvs-base-unit) * 3); /* Use when compact padding is required */
46
- --cnvs-sys-space-x2: calc(var(--cnvs-base-unit) * 2); /* Commonly used to group compact elements like icon buttons */
47
- --cnvs-sys-space-x1: var(--cnvs-base-unit); /* Compact spacing between text or icons */
48
- --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. */
49
- --cnvs-sys-shape-x2: calc(var(--cnvs-base-unit) * 2); /* Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts. */
50
- --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. */
51
- --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. */
52
- --cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-100); /* Alpha on second shadow */
53
- --cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-200); /* Alpha on first shadow */
54
- --cnvs-sys-opacity-contrast: var(--cnvs-base-opacity-500); /* Tooltips, Status Indicator */
55
- --cnvs-sys-opacity-overlay: var(--cnvs-base-opacity-400); /* Overlay */
56
- --cnvs-sys-opacity-disabled: var(--cnvs-base-opacity-300); /* Disabled states */
57
- --cnvs-sys-breakpoints-xl: 1440px; /* Used for extra large screens, such as wide monitors and TVs. */
58
- --cnvs-sys-breakpoints-l: 1024px; /* Large screens, such as desktops. */
59
- --cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
60
- --cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
61
19
  --cnvs-sys-color-static-black: var(--cnvs-base-palette-black-pepper-600); /* Just black */
62
20
  --cnvs-sys-color-static-white: var(--cnvs-base-palette-french-vanilla-100); /* Just white */
63
21
  --cnvs-sys-color-static-gray-stronger: var(--cnvs-base-palette-licorice-500); /* Strongerer gray */
@@ -157,12 +115,54 @@
157
115
  --cnvs-sys-color-bg-translucent: rgba(0,0,0,var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
158
116
  --cnvs-sys-color-bg-transparent: transparent; /* Transparent background */
159
117
  --cnvs-sys-color-bg-default: var(--cnvs-base-palette-french-vanilla-100); /* Main background color; */
160
- --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
118
+ --cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
119
+ --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
120
+ --cnvs-sys-font-weight-normal: var(--cnvs-base-font-weight-400);
121
+ --cnvs-sys-font-weight-light: var(--cnvs-base-font-weight-300);
122
+ --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
123
+ --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
124
+ --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
125
+ --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-350);
126
+ --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-300);
127
+ --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-250);
128
+ --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-200);
129
+ --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-200);
130
+ --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-150);
131
+ --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-100);
132
+ --cnvs-sys-line-height-subtext-medium: var(--cnvs-base-line-height-50);
133
+ --cnvs-sys-line-height-subtext-small: var(--cnvs-base-line-height-50);
134
+ --cnvs-sys-font-size-subtext-small: var(--cnvs-base-font-size-25);
135
+ --cnvs-sys-font-family-global: var(--cnvs-base-font-family-200);
136
+ --cnvs-sys-font-family-mono: var(--cnvs-base-font-family-100);
137
+ --cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
138
+ --cnvs-sys-space-x20: calc(var(--cnvs-base-unit) * 20); /* - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available */
139
+ --cnvs-sys-space-x16: calc(var(--cnvs-base-unit) * 16); /* - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections */
140
+ --cnvs-sys-space-x10: calc(var(--cnvs-base-unit) * 10); /* • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections */
141
+ --cnvs-sys-space-x8: calc(var(--cnvs-base-unit) * 8); /* • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs */
142
+ --cnvs-sys-space-x6: calc(var(--cnvs-base-unit) * 6); /* • Padding around card content; • Related elements where more space between them can be afforded; • Separate section headings or titles from body text or inputs */
143
+ --cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4); /* Default space token. Used to group Inputs with related data */
144
+ --cnvs-sys-space-x3: calc(var(--cnvs-base-unit) * 3); /* Use when compact padding is required */
145
+ --cnvs-sys-space-x2: calc(var(--cnvs-base-unit) * 2); /* Commonly used to group compact elements like icon buttons */
146
+ --cnvs-sys-space-x1: var(--cnvs-base-unit); /* Compact spacing between text or icons */
147
+ --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. */
148
+ --cnvs-sys-shape-x2: calc(var(--cnvs-base-unit) * 2); /* Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts. */
149
+ --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. */
150
+ --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. */
151
+ --cnvs-sys-opacity-shadow-second: var(--cnvs-base-opacity-100); /* Alpha on second shadow */
152
+ --cnvs-sys-opacity-shadow-first: var(--cnvs-base-opacity-200); /* Alpha on first shadow */
153
+ --cnvs-sys-opacity-contrast: var(--cnvs-base-opacity-500); /* Tooltips, Status Indicator */
154
+ --cnvs-sys-opacity-overlay: var(--cnvs-base-opacity-400); /* Overlay */
155
+ --cnvs-sys-opacity-disabled: var(--cnvs-base-opacity-300); /* Disabled states */
156
+ --cnvs-sys-breakpoints-xl: 1440px; /* Used for extra large screens, such as wide monitors and TVs. */
157
+ --cnvs-sys-breakpoints-l: 1024px; /* Large screens, such as desktops. */
158
+ --cnvs-sys-breakpoints-m: 768px; /* Medium screens, such as laptops. */
159
+ --cnvs-sys-breakpoints-s: 320px; /* The `min-width` for mobile devices, such as phones and tablets. */
161
160
  --cnvs-sys-color-shadow-1: rgba(31,38,46,var(--cnvs-base-opacity-200)); /* First shadow color */
162
161
  --cnvs-sys-color-border-transparent: transparent; /* Transparent */
163
162
  --cnvs-sys-color-text-caution-strong: var(--cnvs-sys-color-text-stronger); /* Strong warning text */
164
163
  --cnvs-sys-color-text-caution-default: var(--cnvs-sys-color-text-strong); /* Warning text */
165
164
  --cnvs-sys-color-bg-overlay: rgba(0,0,0,var(--cnvs-base-opacity-400)); /* Overlay background */
165
+ --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
166
166
  --cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-75);
167
167
  --cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
168
168
  --cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
package/dist/common-js/base/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 19:58:21 GMT
3
+ * Generated on Thu, 06 Feb 2025 15:20:12 GMT
4
4
  */
5
5
 
6
6
  export declare const cinnamon100: "--cnvs-base-palette-cinnamon-100";
package/dist/common-js/base/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 19:58:20 GMT
3
+ * Generated on Thu, 06 Feb 2025 15:20:12 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 Mon, 07 Oct 2024 19:58:21 GMT
3
+ * Generated on Thu, 06 Feb 2025 15:20:12 GMT
4
4
  */
5
5
 
6
6
  export declare const primary: {
@@ -78,6 +78,57 @@ export declare const neutral: {
78
78
  "accent": "--cnvs-brand-neutral-accent",
79
79
  };
80
80
 
81
+ export declare const action: {
82
+ /**
83
+ * #D7EAFC
84
+ *
85
+ * token: brand.primary.lightest
86
+ *
87
+ * Lightest action color
88
+ */
89
+ "lightest": "--cnvs-brand-action-lightest",
90
+ /**
91
+ * #A6D2FF
92
+ *
93
+ * token: brand.primary.light
94
+ *
95
+ * Light action color
96
+ */
97
+ "light": "--cnvs-brand-action-light",
98
+ /**
99
+ * #0875E1
100
+ *
101
+ * token: brand.primary.base
102
+ *
103
+ * Base action color
104
+ */
105
+ "base": "--cnvs-brand-action-base",
106
+ /**
107
+ * #005cb9
108
+ *
109
+ * token: brand.primary.dark
110
+ *
111
+ * Dark action color
112
+ */
113
+ "dark": "--cnvs-brand-action-dark",
114
+ /**
115
+ * #004387
116
+ *
117
+ * token: brand.primary.darkest
118
+ *
119
+ * Darkest action color
120
+ */
121
+ "darkest": "--cnvs-brand-action-darkest",
122
+ /**
123
+ * #ffffff
124
+ *
125
+ * token: brand.primary.accent
126
+ *
127
+ * Foreground color in actions
128
+ */
129
+ "accent": "--cnvs-brand-action-accent",
130
+ };
131
+
81
132
  export declare const common: {
82
133
  /** #0875E1 */
83
134
  "focusOutline": "--cnvs-brand-common-focus-outline",
package/dist/common-js/brand/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 19:58:21 GMT
3
+ * Generated on Thu, 06 Feb 2025 15:20:12 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -46,6 +46,14 @@ exports.neutral = {
46
46
  "darkest": "--cnvs-brand-neutral-darkest",
47
47
  "accent": "--cnvs-brand-neutral-accent"
48
48
  };
49
+ exports.action = {
50
+ "lightest": "--cnvs-brand-action-lightest",
51
+ "light": "--cnvs-brand-action-light",
52
+ "base": "--cnvs-brand-action-base",
53
+ "dark": "--cnvs-brand-action-dark",
54
+ "darkest": "--cnvs-brand-action-darkest",
55
+ "accent": "--cnvs-brand-action-accent"
56
+ };
49
57
  exports.common = {
50
58
  "focusOutline": "--cnvs-brand-common-focus-outline",
51
59
  "errorInner": "--cnvs-brand-common-error-inner",
package/dist/common-js/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 19:58:21 GMT
3
+ * Generated on Thu, 06 Feb 2025 15:20:12 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 Mon, 07 Oct 2024 19:58:20 GMT
3
+ * Generated on Thu, 06 Feb 2025 15:20:12 GMT
4
4
  */
5
5
 
6
6
  "use strict";