@workday/canvas-tokens-web 1.0.0 → 1.0.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 +1 -1
  4. package/less/base/_variables.less +1 -1
  5. package/less/brand/_variables.less +1 -1
  6. package/less/system/_variables.less +1 -1
  7. package/package.json +1 -1
  8. package/scss/base/_variables.sass +1 -1
  9. package/scss/base/_variables.scss +1 -1
  10. package/scss/brand/_variables.sass +1 -1
  11. package/scss/brand/_variables.scss +1 -1
  12. package/scss/system/_variables.sass +1 -1
  13. package/scss/system/_variables.scss +1 -1
  14. package/dist/common-js/base/index.d.ts +0 -226
  15. package/dist/common-js/base/index.js +0 -229
  16. package/dist/common-js/brand/index.d.ts +0 -93
  17. package/dist/common-js/brand/index.js +0 -56
  18. package/dist/common-js/index.d.ts +0 -9
  19. package/dist/common-js/index.js +0 -14
  20. package/dist/common-js/system/index.d.ts +0 -366
  21. package/dist/common-js/system/index.js +0 -179
  22. package/dist/es6/base/index.d.ts +0 -226
  23. package/dist/es6/base/index.js +0 -226
  24. package/dist/es6/brand/index.d.ts +0 -93
  25. package/dist/es6/brand/index.js +0 -53
  26. package/dist/es6/index.d.ts +0 -9
  27. package/dist/es6/index.js +0 -9
  28. package/dist/es6/system/index.d.ts +0 -366
  29. package/dist/es6/system/index.js +0 -176
package/dist/es6/brand/index.d.ts DELETED
@@ -1,93 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 23 Oct 2023 23:15:29 GMT
4
- */
5
-
6
- export declare const primary = {
7
- /** #D7EAFC */
8
- "lightest": "--cnvs-brand-primary-lightest",
9
- /** #A6D2FF */
10
- "light": "--cnvs-brand-primary-light",
11
- /** #0875E1 */
12
- "base": "--cnvs-brand-primary-base",
13
- /** #005cb9 */
14
- "dark": "--cnvs-brand-primary-dark",
15
- /** #004387 */
16
- "darkest": "--cnvs-brand-primary-darkest",
17
- /** #ffffff */
18
- "accent": "--cnvs-brand-primary-accent",
19
- } as const;
20
-
21
- export declare const alert = {
22
- /** #ffeed9 */
23
- "lightest": "--cnvs-brand-alert-lightest",
24
- /** #fcd49f */
25
- "light": "--cnvs-brand-alert-light",
26
- /** #ffa126 */
27
- "base": "--cnvs-brand-alert-base",
28
- /** #f38b00 */
29
- "dark": "--cnvs-brand-alert-dark",
30
- /** #c06c00 */
31
- "darkest": "--cnvs-brand-alert-darkest",
32
- /** #ffffff */
33
- "accent": "--cnvs-brand-alert-accent",
34
- } as const;
35
-
36
- export declare const error = {
37
- /** #ffefee */
38
- "lightest": "--cnvs-brand-error-lightest",
39
- /** #FCC9C5 */
40
- "light": "--cnvs-brand-error-light",
41
- /** #de2e21 */
42
- "base": "--cnvs-brand-error-base",
43
- /** #a31b12 */
44
- "dark": "--cnvs-brand-error-dark",
45
- /** #80160E */
46
- "darkest": "--cnvs-brand-error-darkest",
47
- /** #ffffff */
48
- "accent": "--cnvs-brand-error-accent",
49
- } as const;
50
-
51
- export declare const success = {
52
- /** #ebfff0 */
53
- "lightest": "--cnvs-brand-success-lightest",
54
- /** #5fe380 */
55
- "light": "--cnvs-brand-success-light",
56
- /** #43c463 */
57
- "base": "--cnvs-brand-success-base",
58
- /** #319c4c */
59
- "dark": "--cnvs-brand-success-dark",
60
- /** #217a37 */
61
- "darkest": "--cnvs-brand-success-darkest",
62
- /** #ffffff */
63
- "accent": "--cnvs-brand-success-accent",
64
- } as const;
65
-
66
- export declare const neutral = {
67
- /** #F0F1F2 */
68
- "lightest": "--cnvs-brand-neutral-lightest",
69
- /** #e8ebed */
70
- "light": "--cnvs-brand-neutral-light",
71
- /** #B9C0C7 */
72
- "base": "--cnvs-brand-neutral-base",
73
- /** #5E6A75 */
74
- "dark": "--cnvs-brand-neutral-dark",
75
- /** #4a5561 */
76
- "darkest": "--cnvs-brand-neutral-darkest",
77
- /** #ffffff */
78
- "accent": "--cnvs-brand-neutral-accent",
79
- } as const;
80
-
81
- export declare const common = {
82
- /** #0875E1 */
83
- "focusOutline": "--cnvs-brand-common-focus-outline",
84
- /** #de2e21 */
85
- "errorInner": "--cnvs-brand-common-error-inner",
86
- /** #ffa126 */
87
- "alertInner": "--cnvs-brand-common-alert-inner",
88
- } as const;
89
-
90
- export declare const gradient = {
91
- /** linear-gradient(90deg, #0875E1 0%, #005cb9 100%) */
92
- "primary": "--cnvs-brand-gradient-primary",
93
- } as const;
package/dist/es6/brand/index.js DELETED
@@ -1,53 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 23 Oct 2023 23:15:29 GMT
4
- */
5
-
6
- export const primary = {
7
- "lightest": "--cnvs-brand-primary-lightest",
8
- "light": "--cnvs-brand-primary-light",
9
- "base": "--cnvs-brand-primary-base",
10
- "dark": "--cnvs-brand-primary-dark",
11
- "darkest": "--cnvs-brand-primary-darkest",
12
- "accent": "--cnvs-brand-primary-accent"
13
- };
14
- export const alert = {
15
- "lightest": "--cnvs-brand-alert-lightest",
16
- "light": "--cnvs-brand-alert-light",
17
- "base": "--cnvs-brand-alert-base",
18
- "dark": "--cnvs-brand-alert-dark",
19
- "darkest": "--cnvs-brand-alert-darkest",
20
- "accent": "--cnvs-brand-alert-accent"
21
- };
22
- export const error = {
23
- "lightest": "--cnvs-brand-error-lightest",
24
- "light": "--cnvs-brand-error-light",
25
- "base": "--cnvs-brand-error-base",
26
- "dark": "--cnvs-brand-error-dark",
27
- "darkest": "--cnvs-brand-error-darkest",
28
- "accent": "--cnvs-brand-error-accent"
29
- };
30
- export const success = {
31
- "lightest": "--cnvs-brand-success-lightest",
32
- "light": "--cnvs-brand-success-light",
33
- "base": "--cnvs-brand-success-base",
34
- "dark": "--cnvs-brand-success-dark",
35
- "darkest": "--cnvs-brand-success-darkest",
36
- "accent": "--cnvs-brand-success-accent"
37
- };
38
- export const neutral = {
39
- "lightest": "--cnvs-brand-neutral-lightest",
40
- "light": "--cnvs-brand-neutral-light",
41
- "base": "--cnvs-brand-neutral-base",
42
- "dark": "--cnvs-brand-neutral-dark",
43
- "darkest": "--cnvs-brand-neutral-darkest",
44
- "accent": "--cnvs-brand-neutral-accent"
45
- };
46
- export const common = {
47
- "focusOutline": "--cnvs-brand-common-focus-outline",
48
- "errorInner": "--cnvs-brand-common-error-inner",
49
- "alertInner": "--cnvs-brand-common-alert-inner"
50
- };
51
- export const gradient = {
52
- "primary": "--cnvs-brand-gradient-primary"
53
- };
package/dist/es6/index.d.ts DELETED
@@ -1,9 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 23 Oct 2023 23:15:29 GMT
4
- */
5
-
6
- import * as base from "./base";
7
- import * as brand from "./brand";
8
- import * as system from "./system";
9
- export {base,brand,system}
package/dist/es6/index.js DELETED
@@ -1,9 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 23 Oct 2023 23:15:29 GMT
4
- */
5
-
6
- import * as base from "./base";
7
- import * as brand from "./brand";
8
- import * as system from "./system";
9
- export {base,brand,system}
package/dist/es6/system/index.d.ts DELETED
@@ -1,366 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 23 Oct 2023 23:15:29 GMT
4
- */
5
-
6
- export declare const depth = {
7
- /**
8
- * Standard card depth
9
- * 0 0.0625rem 0.25rem 0 rgba(#1f262e,0.12), 0 0.125rem 0.5rem 0 rgba(#1f262e,0.08)
10
- */
11
- "1": "--cnvs-sys-depth-1",
12
- /**
13
- * Top navigation, Bottom Navigation
14
- * 0 0.125rem 0.5rem 0 rgba(#1f262e,0.12), 0 0.25rem 1rem 0 rgba(#1f262e,0.08)
15
- */
16
- "2": "--cnvs-sys-depth-2",
17
- /**
18
- * Floating Action Buttons (FAB), Menus
19
- * 0 0.1875rem 0.75rem 0 rgba(#1f262e,0.12), 0 0.375rem 1.5rem 0 rgba(#1f262e,0.08)
20
- */
21
- "3": "--cnvs-sys-depth-3",
22
- /**
23
- * Bottom Sheets
24
- * 0 0.25rem 1rem 0 rgba(#1f262e,0.12), 0 0.5rem 2rem 0 rgba(#1f262e,0.08)
25
- */
26
- "4": "--cnvs-sys-depth-4",
27
- /**
28
- * Banners, Snackbars, Toast Messages, Non modal Dialogs,
29
- * Side Panels (when opacity overlay behaviour is not applied)
30
- * 0 0.3125rem 1.25rem 0 rgba(#1f262e,0.12), 0 0.625rem 2.5rem 0 rgba(#1f262e,0.08)
31
- */
32
- "5": "--cnvs-sys-depth-5",
33
- /**
34
- * Modal Dialogs, Side Panels (when opacity overlay behaviour
35
- * is applied)
36
- * 0 0.375rem 1.5rem 0 rgba(#1f262e,0.12), 0 0.75rem 3rem 0 rgba(#1f262e,0.08)
37
- */
38
- "6": "--cnvs-sys-depth-6",
39
- } as const;
40
-
41
- export declare const opacity = {
42
- /**
43
- * State layer added on top of disabled elements.
44
- * 0.4
45
- */
46
- "disabled": "--cnvs-sys-opacity-disabled",
47
- } as const;
48
-
49
- export declare const shape = {
50
- /**
51
- * This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
52
- * 0rem
53
- */
54
- "zero": "--cnvs-sys-shape-zero",
55
- /**
56
- * Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
57
- * 0.125rem (2px)
58
- */
59
- "half": "--cnvs-sys-shape-half",
60
- /**
61
- * Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
62
- * 0.25rem (4px)
63
- */
64
- "x1": "--cnvs-sys-shape-x1",
65
- /**
66
- * Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
67
- * 0.5rem (8px)
68
- */
69
- "x2": "--cnvs-sys-shape-x2",
70
- /**
71
- * Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
72
- * 62.5rem (1000px)
73
- */
74
- "round": "--cnvs-sys-shape-round",
75
- } as const;
76
-
77
- export declare const space = {
78
- /**
79
- * Stacks, rows in tables
80
- * 0
81
- */
82
- "zero": "--cnvs-sys-space-zero",
83
- /**
84
- * Compact spacing between text or icons
85
- * 0.25rem (4px)
86
- */
87
- "x1": "--cnvs-sys-space-x1",
88
- /**
89
- * Commonly used to group compact elements like icon buttons
90
- * 0.5rem (8px)
91
- */
92
- "x2": "--cnvs-sys-space-x2",
93
- /**
94
- * Use when compact padding is required
95
- * 0.75rem (12px)
96
- */
97
- "x3": "--cnvs-sys-space-x3",
98
- /**
99
- * Default space token. Used to group Inputs with related data
100
- * 1rem (16px)
101
- */
102
- "x4": "--cnvs-sys-space-x4",
103
- /**
104
- * • Padding around card content
105
- * • Related elements where more space between them can be afforded
106
- * • Separate section headings or titles from body text or inputs
107
- * 1.5rem (24px)
108
- */
109
- "x6": "--cnvs-sys-space-x6",
110
- /**
111
- * • Standard spacing between cards
112
- * • Used to separate groups of content
113
- * • Separate section headings or titles from body text or inputs
114
- * 2rem (32px)
115
- */
116
- "x8": "--cnvs-sys-space-x8",
117
- /**
118
- * • Used for outer margins on the overall page content
119
- * • Used for inner margins on large items such as page sections
120
- * 2.5rem (40px)
121
- */
122
- "x10": "--cnvs-sys-space-x10",
123
- /**
124
- * - Use to de-clutter your UI when a lot of space is available
125
- * - Separate banner sections from page content
126
- * - Use to differentiate page content like page sections
127
- * 4rem (64px)
128
- */
129
- "x16": "--cnvs-sys-space-x16",
130
- /**
131
- * - Use sparingly
132
- * - Helps to put focus on the primary element within your page
133
- * - Use to de-clutter your UI when a lot of space is available
134
- * 5rem (80px)
135
- */
136
- "x20": "--cnvs-sys-space-x20",
137
- } as const;
138
-
139
- export declare const fontFamily = {
140
- /** Roboto */
141
- "default": "--cnvs-sys-font-family-default",
142
- /** Roboto Mono */
143
- "mono": "--cnvs-sys-font-family-mono",
144
- /** Noto Sans */
145
- "global": "--cnvs-sys-font-family-global",
146
- } as const;
147
-
148
- export declare const fontSize = {
149
- "subtext": {
150
- /** 0.625rem (10px) */
151
- "small": "--cnvs-sys-font-size-subtext-small",
152
- /** 0.75rem (12px) */
153
- "medium": "--cnvs-sys-font-size-subtext-medium",
154
- /** 0.875rem (14px) */
155
- "large": "--cnvs-sys-font-size-subtext-large",
156
- },
157
- "body": {
158
- /** 1rem (16px) */
159
- "small": "--cnvs-sys-font-size-body-small",
160
- /** 1.125rem (18px) */
161
- "medium": "--cnvs-sys-font-size-body-medium",
162
- /** 1.25rem (20px) */
163
- "large": "--cnvs-sys-font-size-body-large",
164
- },
165
- "heading": {
166
- /** 1.5rem (24px) */
167
- "small": "--cnvs-sys-font-size-heading-small",
168
- /** 1.75rem (28px) */
169
- "medium": "--cnvs-sys-font-size-heading-medium",
170
- /** 2rem (32px) */
171
- "large": "--cnvs-sys-font-size-heading-large",
172
- },
173
- "title": {
174
- /** 2.5rem (40px) */
175
- "small": "--cnvs-sys-font-size-title-small",
176
- /** 3rem (48px) */
177
- "medium": "--cnvs-sys-font-size-title-medium",
178
- /** 3.5rem (56px) */
179
- "large": "--cnvs-sys-font-size-title-large",
180
- },
181
- } as const;
182
-
183
- export declare const lineHeight = {
184
- "subtext": {
185
- /** 1rem (16px) */
186
- "small": "--cnvs-sys-line-height-subtext-small",
187
- /** 1rem (16px) */
188
- "medium": "--cnvs-sys-line-height-subtext-medium",
189
- /** 1.25rem (20px) */
190
- "large": "--cnvs-sys-line-height-subtext-large",
191
- },
192
- "body": {
193
- /** 1.5rem (24px) */
194
- "small": "--cnvs-sys-line-height-body-small",
195
- /** 1.75rem (28px) */
196
- "medium": "--cnvs-sys-line-height-body-medium",
197
- /** 1.75rem (28px) */
198
- "large": "--cnvs-sys-line-height-body-large",
199
- },
200
- "heading": {
201
- /** 2rem (32px) */
202
- "small": "--cnvs-sys-line-height-heading-small",
203
- /** 2.25rem (36px) */
204
- "medium": "--cnvs-sys-line-height-heading-medium",
205
- /** 2.5rem (40px) */
206
- "large": "--cnvs-sys-line-height-heading-large",
207
- },
208
- "title": {
209
- /** 3rem (48px) */
210
- "small": "--cnvs-sys-line-height-title-small",
211
- /** 3.5rem (56px) */
212
- "medium": "--cnvs-sys-line-height-title-medium",
213
- /** 4rem (64px) */
214
- "large": "--cnvs-sys-line-height-title-large",
215
- },
216
- } as const;
217
-
218
- export declare const fontWeight = {
219
- /** 300 */
220
- "light": "--cnvs-sys-font-weight-light",
221
- /** 400 */
222
- "normal": "--cnvs-sys-font-weight-normal",
223
- /** 500 */
224
- "medium": "--cnvs-sys-font-weight-medium",
225
- /** 700 */
226
- "bold": "--cnvs-sys-font-weight-bold",
227
- } as const;
228
-
229
- export declare const type = {
230
- "subtext": {
231
- "small": {
232
- /** Roboto */
233
- "fontFamily": "--cnvs-base-font-family-50",
234
- /** 400 */
235
- "fontWeight": "--cnvs-base-font-weight-400",
236
- /** 1rem (16px) */
237
- "lineHeight": "--cnvs-base-line-height-50",
238
- /** 0.625rem (10px) */
239
- "fontSize": "--cnvs-base-font-size-25",
240
- /** 0.4 */
241
- "letterSpacing": "--cnvs-base-letter-spacing-50",
242
- },
243
- "medium": {
244
- /** Roboto */
245
- "fontFamily": "--cnvs-base-font-family-50",
246
- /** 400 */
247
- "fontWeight": "--cnvs-base-font-weight-400",
248
- /** 1rem (16px) */
249
- "lineHeight": "--cnvs-base-line-height-50",
250
- /** 0.75rem (12px) */
251
- "fontSize": "--cnvs-base-font-size-50",
252
- /** 0.32 */
253
- "letterSpacing": "--cnvs-base-letter-spacing-100",
254
- },
255
- "large": {
256
- /** Roboto */
257
- "fontFamily": "--cnvs-base-font-family-50",
258
- /** 400 */
259
- "fontWeight": "--cnvs-base-font-weight-400",
260
- /** 1.25rem (20px) */
261
- "lineHeight": "--cnvs-base-line-height-100",
262
- /** 0.875rem (14px) */
263
- "fontSize": "--cnvs-base-font-size-75",
264
- /** 0.24 */
265
- "letterSpacing": "--cnvs-base-letter-spacing-150",
266
- },
267
- },
268
- "body": {
269
- "small": {
270
- /** Roboto */
271
- "fontFamily": "--cnvs-base-font-family-50",
272
- /** 400 */
273
- "fontWeight": "--cnvs-base-font-weight-400",
274
- /** 1.5rem (24px) */
275
- "lineHeight": "--cnvs-base-line-height-150",
276
- /** 1rem (16px) */
277
- "fontSize": "--cnvs-base-font-size-100",
278
- /** 0.16 */
279
- "letterSpacing": "--cnvs-base-letter-spacing-200",
280
- },
281
- "medium": {
282
- /** Roboto */
283
- "fontFamily": "--cnvs-base-font-family-50",
284
- /** 400 */
285
- "fontWeight": "--cnvs-base-font-weight-400",
286
- /** 1.75rem (28px) */
287
- "lineHeight": "--cnvs-base-line-height-200",
288
- /** 1.125rem (18px) */
289
- "fontSize": "--cnvs-base-font-size-125",
290
- },
291
- "large": {
292
- /** Roboto */
293
- "fontFamily": "--cnvs-base-font-family-50",
294
- /** 400 */
295
- "fontWeight": "--cnvs-base-font-weight-400",
296
- /** 1.75rem (28px) */
297
- "lineHeight": "--cnvs-base-line-height-200",
298
- /** 1.25rem (20px) */
299
- "fontSize": "--cnvs-base-font-size-150",
300
- },
301
- },
302
- "heading": {
303
- "small": {
304
- /** Roboto */
305
- "fontFamily": "--cnvs-base-font-family-50",
306
- /** 700 */
307
- "fontWeight": "--cnvs-base-font-weight-700",
308
- /** 2rem (32px) */
309
- "lineHeight": "--cnvs-base-line-height-250",
310
- /** 1.5rem (24px) */
311
- "fontSize": "--cnvs-base-font-size-200",
312
- },
313
- "medium": {
314
- /** Roboto */
315
- "fontFamily": "--cnvs-base-font-family-50",
316
- /** 700 */
317
- "fontWeight": "--cnvs-base-font-weight-700",
318
- /** 2.25rem (36px) */
319
- "lineHeight": "--cnvs-base-line-height-300",
320
- /** 1.75rem (28px) */
321
- "fontSize": "--cnvs-base-font-size-250",
322
- },
323
- "large": {
324
- /** Roboto */
325
- "fontFamily": "--cnvs-base-font-family-50",
326
- /** 700 */
327
- "fontWeight": "--cnvs-base-font-weight-700",
328
- /** 2.5rem (40px) */
329
- "lineHeight": "--cnvs-base-line-height-350",
330
- /** 2rem (32px) */
331
- "fontSize": "--cnvs-base-font-size-300",
332
- },
333
- },
334
- "title": {
335
- "small": {
336
- /** Roboto */
337
- "fontFamily": "--cnvs-base-font-family-50",
338
- /** 700 */
339
- "fontWeight": "--cnvs-base-font-weight-700",
340
- /** 3rem (48px) */
341
- "lineHeight": "--cnvs-base-line-height-400",
342
- /** 2.5rem (40px) */
343
- "fontSize": "--cnvs-base-font-size-400",
344
- },
345
- "medium": {
346
- /** Roboto */
347
- "fontFamily": "--cnvs-base-font-family-50",
348
- /** 700 */
349
- "fontWeight": "--cnvs-base-font-weight-700",
350
- /** 3.5rem (56px) */
351
- "lineHeight": "--cnvs-base-line-height-500",
352
- /** 3rem (48px) */
353
- "fontSize": "--cnvs-base-font-size-500",
354
- },
355
- "large": {
356
- /** Roboto */
357
- "fontFamily": "--cnvs-base-font-family-50",
358
- /** 700 */
359
- "fontWeight": "--cnvs-base-font-weight-700",
360
- /** 4rem (64px) */
361
- "lineHeight": "--cnvs-base-line-height-600",
362
- /** 3.5rem (56px) */
363
- "fontSize": "--cnvs-base-font-size-600",
364
- },
365
- },
366
- } as const;