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