@workday/canvas-tokens-web 1.3.0 → 2.0.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.
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Fri, 03 May 2024 21:48:34 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -196,16 +196,9 @@
196
196
  --cnvs-base-line-height-400: 3rem;
197
197
  --cnvs-base-line-height-500: 3.5rem;
198
198
  --cnvs-base-line-height-600: 4rem;
199
- --cnvs-base-line-height-750: 5rem;
200
- --cnvs-base-line-height-900: 6rem;
201
- --cnvs-base-line-height-1050: 7rem;
202
- --cnvs-base-typescale-size-default: 0.125rem;
203
- --cnvs-base-typescale-size-heading: 0.25rem;
204
- --cnvs-base-typescale-size-title: 0.5rem;
205
- --cnvs-base-typescale-size-display: 1rem;
206
- --cnvs-base-typescale-height-default: 0.25rem;
207
- --cnvs-base-typescale-height-title: 0.5rem;
208
- --cnvs-base-typescale-height-display: 1rem;
199
+ --cnvs-base-line-height-750: 4.5rem;
200
+ --cnvs-base-line-height-900: 5.5rem;
201
+ --cnvs-base-line-height-1050: 6.5rem;
209
202
  --cnvs-base-font-family-50: "Roboto"; /* Default font-family */
210
203
  --cnvs-base-font-family-100: "Roboto Mono";
211
204
  --cnvs-base-font-family-200: "Noto Sans";
@@ -217,13 +210,6 @@
217
210
  --cnvs-base-letter-spacing-100: 0.02rem;
218
211
  --cnvs-base-letter-spacing-150: 0.015rem;
219
212
  --cnvs-base-letter-spacing-200: 0.01rem;
220
- --cnvs-base-shadow-100: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08);
221
- --cnvs-base-shadow-200: 0 0.125rem 0.5rem 0 rgba(31,38,46,0.12), 0 0.25rem 1rem 0 rgba(31,38,46,0.08); /* Top navigation, Bottom navigation */
222
- --cnvs-base-shadow-300: 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12), 0 0.375rem 1.5rem 0 rgba(31,38,46,0.08);
223
- --cnvs-base-shadow-400: 0 0.25rem 1rem 0 rgba(31,38,46,0.12), 0 0.5rem 2rem 0 rgba(31,38,46,0.08);
224
- --cnvs-base-shadow-500: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem 0 rgba(31,38,46,0.08);
225
- --cnvs-base-shadow-600: 0 0.375rem 1.5rem 0 rgba(31,38,46,0.12), 0 0.75rem 3rem 0 rgba(31,38,46,0.08);
226
- --cnvs-base-level: 2; /* Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading. */
227
213
  --cnvs-base-extended-palette-dragon-fruit-100: rgba(251,241,255,1);
228
214
  --cnvs-base-extended-palette-dragon-fruit-200: rgba(239,211,255,1);
229
215
  --cnvs-base-extended-palette-dragon-fruit-300: rgba(190,97,246,1);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Fri, 03 May 2024 21:48:34 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -40,3 +40,4 @@
40
40
  --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
41
41
  }
42
42
 
43
+
@@ -1,9 +1,15 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Fri, 03 May 2024 21:48:34 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --cnvs-sys-depth-1: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08); /* Standard card depth */
8
+ --cnvs-sys-depth-2: 0 0.125rem 0.5rem 0 rgba(31,38,46,0.12), 0 0.25rem 1rem 0 rgba(31,38,46,0.08); /* Top navigation, Bottom Navigation */
9
+ --cnvs-sys-depth-3: 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12), 0 0.375rem 1.5rem 0 rgba(31,38,46,0.08); /* Floating Action Buttons (FAB), Menus */
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
+ --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
+ --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) */
7
13
  --cnvs-sys-space-zero: 0; /* Stacks, rows in tables */
8
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. */
9
15
  --cnvs-sys-opacity-full: 1; /* Dev only */
@@ -14,6 +20,16 @@
14
20
  --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
15
21
  --cnvs-sys-font-weight-normal: var(--cnvs-base-font-weight-400);
16
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);
17
33
  --cnvs-sys-line-height-subtext-medium: var(--cnvs-base-line-height-50);
18
34
  --cnvs-sys-line-height-subtext-small: var(--cnvs-base-line-height-50);
19
35
  --cnvs-sys-font-size-subtext-small: var(--cnvs-base-font-size-25);
@@ -50,7 +66,7 @@
50
66
  --cnvs-sys-color-static-gray-default: var(--cnvs-base-palette-licorice-300); /* Gray */
51
67
  --cnvs-sys-color-static-orange-strong: var(--cnvs-base-palette-cantaloupe-600); /* Stronger orange */
52
68
  --cnvs-sys-color-static-orange-soft: var(--cnvs-base-palette-cantaloupe-100); /* Soft orange */
53
- --cnvs-sys-color-static-orange-default: var(--cnvs-base-palette-cantaloupe-500); /* Orange */
69
+ --cnvs-sys-color-static-orange-default: var(--cnvs-base-palette-cantaloupe-400); /* Orange */
54
70
  --cnvs-sys-color-static-red-strong: var(--cnvs-base-palette-cinnamon-600); /* Strong red */
55
71
  --cnvs-sys-color-static-red-soft: var(--cnvs-base-palette-cinnamon-100); /* Light red */
56
72
  --cnvs-sys-color-static-red-default: var(--cnvs-base-palette-cinnamon-500); /* Red */
@@ -62,7 +78,7 @@
62
78
  --cnvs-sys-color-static-blue-soft: var(--cnvs-base-palette-blueberry-100); /* Light blue */
63
79
  --cnvs-sys-color-static-blue-default: var(--cnvs-base-palette-blueberry-400); /* Blue */
64
80
  --cnvs-sys-color-shadow-default: var(--cnvs-base-palette-licorice-600); /* Main shadow color */
65
- --cnvs-sys-color-shadow-2: var(--cnvs-base-palette-licorice-600); /* Second shadow color */
81
+ --cnvs-sys-color-shadow-2: rgba(31,38,46,var(--cnvs-base-opacity-100)); /* Second shadow color */
66
82
  --cnvs-sys-color-border-container: var(--cnvs-base-palette-soap-500); /* Cards, Toasts */
67
83
  --cnvs-sys-color-border-divider: var(--cnvs-base-palette-soap-400); /* Dividers */
68
84
  --cnvs-sys-color-border-inverse: var(--cnvs-base-palette-french-vanilla-100); /* Inverse */
@@ -121,7 +137,7 @@
121
137
  --cnvs-sys-color-bg-caution-default: var(--cnvs-base-palette-cantaloupe-400); /* Default warning background */
122
138
  --cnvs-sys-color-bg-positive-stronger: var(--cnvs-base-palette-green-apple-600); /* Active success background */
123
139
  --cnvs-sys-color-bg-positive-strong: var(--cnvs-base-palette-green-apple-500); /* Hover success background */
124
- --cnvs-sys-color-bg-positive-soft: var(--cnvs-base-palette-green-apple-100); /* Default success background */
140
+ --cnvs-sys-color-bg-positive-softer: var(--cnvs-base-palette-green-apple-100); /* Softer success background */
125
141
  --cnvs-sys-color-bg-positive-default: var(--cnvs-base-palette-green-apple-400); /* Disabled success background */
126
142
  --cnvs-sys-color-bg-primary-stronger: var(--cnvs-base-palette-blueberry-600); /* Brand active background */
127
143
  --cnvs-sys-color-bg-primary-strong: var(--cnvs-base-palette-blueberry-500); /* Brand hover background */
@@ -138,38 +154,22 @@
138
154
  --cnvs-sys-color-bg-alt-softer: var(--cnvs-base-palette-soap-100); /* Disabled inputs and column headers */
139
155
  --cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-soap-200); /* Page background */
140
156
  --cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-soap-300); /* Hover states */
141
- --cnvs-sys-color-bg-translucent: rgba(var(--cnvs-base-palette-black-pepper-600) ,var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
142
- --cnvs-sys-color-bg-transparent: rgba(var(--cnvs-base-palette-french-vanilla-100), 0); /* Transparent background */
157
+ --cnvs-sys-color-bg-translucent: rgba(0,0,0,var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
158
+ --cnvs-sys-color-bg-transparent: transparent; /* Transparent background */
143
159
  --cnvs-sys-color-bg-default: var(--cnvs-base-palette-french-vanilla-100); /* Main background color; */
144
- --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-100);
145
160
  --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
146
- --cnvs-sys-depth-6: var(--cnvs-base-shadow-600); /* Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied) */
147
- --cnvs-sys-depth-5: var(--cnvs-base-shadow-500); /* Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied) */
148
- --cnvs-sys-depth-4: var(--cnvs-base-shadow-400); /* Bottom Sheets */
149
- --cnvs-sys-depth-3: var(--cnvs-base-shadow-300); /* Floating Action Buttons (FAB), Menus */
150
- --cnvs-sys-depth-2: var(--cnvs-base-shadow-200); /* Top navigation, Bottom Navigation */
151
- --cnvs-sys-depth-1: var(--cnvs-base-shadow-100); /* Standard card depth */
152
- --cnvs-sys-color-shadow-1: var(--cnvs-sys-color-shadow-default); /* First shadow color */
153
- --cnvs-sys-color-border-transparent: rgba(var(--cnvs-sys-color-static-white), 0%); /* Transparent */
161
+ --cnvs-sys-color-shadow-1: rgba(31,38,46,var(--cnvs-base-opacity-200)); /* First shadow color */
162
+ --cnvs-sys-color-border-transparent: transparent; /* Transparent */
154
163
  --cnvs-sys-color-text-caution-strong: var(--cnvs-sys-color-text-stronger); /* Strong warning text */
155
164
  --cnvs-sys-color-text-caution-default: var(--cnvs-sys-color-text-strong); /* Warning text */
156
165
  --cnvs-sys-color-bg-overlay: rgba(0,0,0,var(--cnvs-base-opacity-400)); /* Overlay background */
157
- --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-150);
158
166
  --cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-75);
159
- --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-200);
160
- --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-200);
161
167
  --cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
162
- --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-250);
163
168
  --cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
164
- --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-300);
165
169
  --cnvs-sys-font-size-body-large: var(--cnvs-base-font-size-150);
166
- --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-350);
167
170
  --cnvs-sys-font-size-heading-small: var(--cnvs-base-font-size-200);
168
- --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
169
171
  --cnvs-sys-font-size-heading-medium: var(--cnvs-base-font-size-250);
170
- --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
171
172
  --cnvs-sys-font-size-heading-large: var(--cnvs-base-font-size-300);
172
- --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
173
173
  --cnvs-sys-font-size-title-small: var(--cnvs-base-font-size-400);
174
174
  --cnvs-sys-font-size-title-medium: var(--cnvs-base-font-size-500);
175
175
  --cnvs-sys-font-size-title-large: var(--cnvs-base-font-size-600);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Fri, 03 May 2024 21:48:34 GMT
4
4
  */
5
5
 
6
6
  export declare const cinnamon100 = "--cnvs-base-palette-cinnamon-100" as const;
@@ -198,13 +198,6 @@ export declare const lineHeight600 = "--cnvs-base-line-height-600" as const;
198
198
  export declare const lineHeight750 = "--cnvs-base-line-height-750" as const;
199
199
  export declare const lineHeight900 = "--cnvs-base-line-height-900" as const;
200
200
  export declare const lineHeight1050 = "--cnvs-base-line-height-1050" as const;
201
- export declare const typescaleSizeDefault = "--cnvs-base-typescale-size-default" as const;
202
- export declare const typescaleSizeHeading = "--cnvs-base-typescale-size-heading" as const;
203
- export declare const typescaleSizeTitle = "--cnvs-base-typescale-size-title" as const;
204
- export declare const typescaleSizeDisplay = "--cnvs-base-typescale-size-display" as const;
205
- export declare const typescaleHeightDefault = "--cnvs-base-typescale-height-default" as const;
206
- export declare const typescaleHeightTitle = "--cnvs-base-typescale-height-title" as const;
207
- export declare const typescaleHeightDisplay = "--cnvs-base-typescale-height-display" as const;
208
201
  export declare const fontFamily50 = "--cnvs-base-font-family-50" as const;
209
202
  export declare const fontFamily100 = "--cnvs-base-font-family-100" as const;
210
203
  export declare const fontFamily200 = "--cnvs-base-font-family-200" as const;
@@ -216,13 +209,6 @@ export declare const letterSpacing50 = "--cnvs-base-letter-spacing-50" as const;
216
209
  export declare const letterSpacing100 = "--cnvs-base-letter-spacing-100" as const;
217
210
  export declare const letterSpacing150 = "--cnvs-base-letter-spacing-150" as const;
218
211
  export declare const letterSpacing200 = "--cnvs-base-letter-spacing-200" as const;
219
- export declare const shadow100 = "--cnvs-base-shadow-100" as const;
220
- export declare const shadow200 = "--cnvs-base-shadow-200" as const;
221
- export declare const shadow300 = "--cnvs-base-shadow-300" as const;
222
- export declare const shadow400 = "--cnvs-base-shadow-400" as const;
223
- export declare const shadow500 = "--cnvs-base-shadow-500" as const;
224
- export declare const shadow600 = "--cnvs-base-shadow-600" as const;
225
- export declare const baseLevel = "--cnvs-base-level" as const;
226
212
  export declare const extendedDragonFruit100 = "--cnvs-base-extended-palette-dragon-fruit-100" as const;
227
213
  export declare const extendedDragonFruit200 = "--cnvs-base-extended-palette-dragon-fruit-200" as const;
228
214
  export declare const extendedDragonFruit300 = "--cnvs-base-extended-palette-dragon-fruit-300" as const;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Fri, 03 May 2024 21:48:34 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -201,13 +201,6 @@ exports.lineHeight600 = "--cnvs-base-line-height-600";
201
201
  exports.lineHeight750 = "--cnvs-base-line-height-750";
202
202
  exports.lineHeight900 = "--cnvs-base-line-height-900";
203
203
  exports.lineHeight1050 = "--cnvs-base-line-height-1050";
204
- exports.typescaleSizeDefault = "--cnvs-base-typescale-size-default";
205
- exports.typescaleSizeHeading = "--cnvs-base-typescale-size-heading";
206
- exports.typescaleSizeTitle = "--cnvs-base-typescale-size-title";
207
- exports.typescaleSizeDisplay = "--cnvs-base-typescale-size-display";
208
- exports.typescaleHeightDefault = "--cnvs-base-typescale-height-default";
209
- exports.typescaleHeightTitle = "--cnvs-base-typescale-height-title";
210
- exports.typescaleHeightDisplay = "--cnvs-base-typescale-height-display";
211
204
  exports.fontFamily50 = "--cnvs-base-font-family-50";
212
205
  exports.fontFamily100 = "--cnvs-base-font-family-100";
213
206
  exports.fontFamily200 = "--cnvs-base-font-family-200";
@@ -219,13 +212,6 @@ exports.letterSpacing50 = "--cnvs-base-letter-spacing-50";
219
212
  exports.letterSpacing100 = "--cnvs-base-letter-spacing-100";
220
213
  exports.letterSpacing150 = "--cnvs-base-letter-spacing-150";
221
214
  exports.letterSpacing200 = "--cnvs-base-letter-spacing-200";
222
- exports.shadow100 = "--cnvs-base-shadow-100";
223
- exports.shadow200 = "--cnvs-base-shadow-200";
224
- exports.shadow300 = "--cnvs-base-shadow-300";
225
- exports.shadow400 = "--cnvs-base-shadow-400";
226
- exports.shadow500 = "--cnvs-base-shadow-500";
227
- exports.shadow600 = "--cnvs-base-shadow-600";
228
- exports.baseLevel = "--cnvs-base-level";
229
215
  exports.extendedDragonFruit100 = "--cnvs-base-extended-palette-dragon-fruit-100";
230
216
  exports.extendedDragonFruit200 = "--cnvs-base-extended-palette-dragon-fruit-200";
231
217
  exports.extendedDragonFruit300 = "--cnvs-base-extended-palette-dragon-fruit-300";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Fri, 03 May 2024 21:48:34 GMT
4
4
  */
5
5
 
6
6
  export declare const primary = {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Fri, 03 May 2024 21:48:34 GMT
4
4
  */
5
5
 
6
6
  "use strict";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Fri, 03 May 2024 21:48:34 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Fri, 03 May 2024 21:48:34 GMT
4
4
  */
5
5
 
6
6
  "use strict";