@workday/canvas-tokens-web 0.1.6 → 1.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.
- package/css/base/_variables.css +228 -0
- package/{dist/css → css}/brand/_variables.css +5 -5
- package/css/system/_variables.css +148 -0
- package/dist/common-js/base/index.d.ts +222 -223
- package/dist/common-js/base/index.js +19 -20
- package/dist/common-js/brand/index.d.ts +44 -9
- package/dist/common-js/brand/index.js +4 -2
- package/dist/common-js/index.d.ts +1 -1
- package/dist/common-js/index.js +1 -1
- package/dist/common-js/system/index.d.ts +231 -152
- package/dist/common-js/system/index.js +17 -117
- package/dist/es6/base/index.d.ts +222 -223
- package/dist/es6/base/index.js +19 -20
- package/dist/es6/brand/index.d.ts +44 -9
- package/dist/es6/brand/index.js +4 -2
- package/dist/es6/index.d.ts +1 -1
- package/dist/es6/index.js +1 -1
- package/dist/es6/system/index.d.ts +231 -152
- package/dist/es6/system/index.js +17 -117
- package/less/base/_variables.less +225 -0
- package/{dist/less → less}/brand/_variables.less +5 -5
- package/less/system/_variables.less +145 -0
- package/package.json +8 -3
- package/scss/base/_variables.sass +225 -0
- package/scss/base/_variables.scss +225 -0
- package/{dist/scss → scss}/brand/_variables.sass +5 -5
- package/{dist/scss → scss}/brand/_variables.scss +5 -5
- package/scss/system/_variables.sass +145 -0
- package/scss/system/_variables.scss +145 -0
- package/dist/css/base/_variables.css +0 -229
- package/dist/css/system/_variables.css +0 -218
- package/dist/less/base/_variables.less +0 -226
- package/dist/less/system/_variables.less +0 -215
- package/dist/scss/base/_variables.sass +0 -226
- package/dist/scss/base/_variables.scss +0 -226
- package/dist/scss/system/_variables.sass +0 -215
- package/dist/scss/system/_variables.scss +0 -215
package/dist/es6/system/index.js
CHANGED
|
@@ -1,105 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Mon, 23 Oct 2023 23:15:29 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
export const border = "--cnvs-sys-border";
|
|
7
|
-
export const color = {
|
|
8
|
-
"bg": {
|
|
9
|
-
"default": "--cnvs-sys-color-bg-default",
|
|
10
|
-
"alt": "--cnvs-sys-color-bg-alt",
|
|
11
|
-
"hover": "--cnvs-sys-color-bg-hover",
|
|
12
|
-
"active": "--cnvs-sys-color-bg-active",
|
|
13
|
-
"selected": "--cnvs-sys-color-bg-selected",
|
|
14
|
-
"primary": {
|
|
15
|
-
"default": "--cnvs-sys-color-bg-primary-default",
|
|
16
|
-
"hover": "--cnvs-sys-color-bg-primary-hover",
|
|
17
|
-
"active": "--cnvs-sys-color-bg-primary-active"
|
|
18
|
-
},
|
|
19
|
-
"secondary": {
|
|
20
|
-
"default": "--cnvs-sys-color-bg-secondary-default",
|
|
21
|
-
"focus": "--cnvs-sys-color-bg-secondary-focus",
|
|
22
|
-
"hover": "--cnvs-sys-color-bg-secondary-hover",
|
|
23
|
-
"active": "--cnvs-sys-color-bg-secondary-active"
|
|
24
|
-
},
|
|
25
|
-
"delete": {
|
|
26
|
-
"default": "--cnvs-sys-color-bg-delete-default",
|
|
27
|
-
"hover": "--cnvs-sys-color-bg-delete-hover",
|
|
28
|
-
"active": "--cnvs-sys-color-bg-delete-active"
|
|
29
|
-
},
|
|
30
|
-
"status": {
|
|
31
|
-
"success": "--cnvs-sys-color-bg-status-success",
|
|
32
|
-
"error": "--cnvs-sys-color-bg-status-error",
|
|
33
|
-
"alert": "--cnvs-sys-color-bg-status-alert"
|
|
34
|
-
},
|
|
35
|
-
"help": "--cnvs-sys-color-bg-help",
|
|
36
|
-
"overlay": "--cnvs-sys-color-bg-overlay"
|
|
37
|
-
},
|
|
38
|
-
"fg": {
|
|
39
|
-
"type": {
|
|
40
|
-
"heading": "--cnvs-sys-color-fg-type-heading",
|
|
41
|
-
"body": "--cnvs-sys-color-fg-type-body",
|
|
42
|
-
"hint": "--cnvs-sys-color-fg-type-hint",
|
|
43
|
-
"disabled": "--cnvs-sys-color-fg-type-disabled",
|
|
44
|
-
"link": {
|
|
45
|
-
"default": "--cnvs-sys-color-fg-type-link-default",
|
|
46
|
-
"focus": "--cnvs-sys-color-fg-type-link-focus",
|
|
47
|
-
"active": "--cnvs-sys-color-fg-type-link-active",
|
|
48
|
-
"visited": "--cnvs-sys-color-fg-type-link-visited"
|
|
49
|
-
},
|
|
50
|
-
"inverse": "--cnvs-sys-color-fg-type-inverse",
|
|
51
|
-
"error": "--cnvs-sys-color-fg-type-error",
|
|
52
|
-
"selected": "--cnvs-sys-color-fg-type-selected"
|
|
53
|
-
},
|
|
54
|
-
"icon": {
|
|
55
|
-
"fill": "--cnvs-sys-color-fg-icon-fill",
|
|
56
|
-
"background": "--cnvs-sys-color-fg-icon-background",
|
|
57
|
-
"accent": "--cnvs-sys-color-fg-icon-accent",
|
|
58
|
-
"hover": "--cnvs-sys-color-fg-icon-hover",
|
|
59
|
-
"disabled": "--cnvs-sys-color-fg-icon-disabled",
|
|
60
|
-
"inverse": "--cnvs-sys-color-fg-icon-inverse",
|
|
61
|
-
"primary": "--cnvs-sys-color-fg-icon-primary"
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
"border": {
|
|
65
|
-
"input": {
|
|
66
|
-
"default": "--cnvs-sys-color-border-input-default",
|
|
67
|
-
"hover": "--cnvs-sys-color-border-input-hover",
|
|
68
|
-
"disabled": "--cnvs-sys-color-border-input-disabled",
|
|
69
|
-
"active": "--cnvs-sys-color-border-input-active",
|
|
70
|
-
"error": "--cnvs-sys-color-border-input-error",
|
|
71
|
-
"alert": "--cnvs-sys-color-border-input-alert"
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
"shadow": {
|
|
75
|
-
"main": "--cnvs-sys-color-shadow-main",
|
|
76
|
-
"accent": "--cnvs-sys-color-shadow-accent"
|
|
77
|
-
},
|
|
78
|
-
"focusRing": "--cnvs-sys-color-focus-ring",
|
|
79
|
-
"gradient": "--cnvs-sys-color-gradient",
|
|
80
|
-
"overlay": {
|
|
81
|
-
"modal": "--cnvs-sys-color-overlay-modal",
|
|
82
|
-
"tooltip": "--cnvs-sys-color-overlay-tooltip"
|
|
83
|
-
},
|
|
84
|
-
"dataViz": {
|
|
85
|
-
"10": "--cnvs-sys-color-data-viz-10",
|
|
86
|
-
"11": "--cnvs-sys-color-data-viz-11",
|
|
87
|
-
"12": "--cnvs-sys-color-data-viz-12",
|
|
88
|
-
"13": "--cnvs-sys-color-data-viz-13",
|
|
89
|
-
"14": "--cnvs-sys-color-data-viz-14",
|
|
90
|
-
"15": "--cnvs-sys-color-data-viz-15",
|
|
91
|
-
"16": "--cnvs-sys-color-data-viz-16",
|
|
92
|
-
"01": "--cnvs-sys-color-data-viz-01",
|
|
93
|
-
"02": "--cnvs-sys-color-data-viz-02",
|
|
94
|
-
"03": "--cnvs-sys-color-data-viz-03",
|
|
95
|
-
"04": "--cnvs-sys-color-data-viz-04",
|
|
96
|
-
"05": "--cnvs-sys-color-data-viz-05",
|
|
97
|
-
"06": "--cnvs-sys-color-data-viz-06",
|
|
98
|
-
"07": "--cnvs-sys-color-data-viz-07",
|
|
99
|
-
"08": "--cnvs-sys-color-data-viz-08",
|
|
100
|
-
"09": "--cnvs-sys-color-data-viz-09"
|
|
101
|
-
}
|
|
102
|
-
};
|
|
103
6
|
export const depth = {
|
|
104
7
|
"1": "--cnvs-sys-depth-1",
|
|
105
8
|
"2": "--cnvs-sys-depth-2",
|
|
@@ -113,10 +16,10 @@ export const opacity = {
|
|
|
113
16
|
};
|
|
114
17
|
export const shape = {
|
|
115
18
|
"zero": "--cnvs-sys-shape-zero",
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
"
|
|
19
|
+
"half": "--cnvs-sys-shape-half",
|
|
20
|
+
"x1": "--cnvs-sys-shape-x1",
|
|
21
|
+
"x2": "--cnvs-sys-shape-x2",
|
|
22
|
+
"round": "--cnvs-sys-shape-round"
|
|
120
23
|
};
|
|
121
24
|
export const space = {
|
|
122
25
|
"zero": "--cnvs-sys-space-zero",
|
|
@@ -124,12 +27,9 @@ export const space = {
|
|
|
124
27
|
"x2": "--cnvs-sys-space-x2",
|
|
125
28
|
"x3": "--cnvs-sys-space-x3",
|
|
126
29
|
"x4": "--cnvs-sys-space-x4",
|
|
127
|
-
"x5": "--cnvs-sys-space-x5",
|
|
128
30
|
"x6": "--cnvs-sys-space-x6",
|
|
129
31
|
"x8": "--cnvs-sys-space-x8",
|
|
130
32
|
"x10": "--cnvs-sys-space-x10",
|
|
131
|
-
"x12": "--cnvs-sys-space-x12",
|
|
132
|
-
"x14": "--cnvs-sys-space-x14",
|
|
133
33
|
"x16": "--cnvs-sys-space-x16",
|
|
134
34
|
"x20": "--cnvs-sys-space-x20"
|
|
135
35
|
};
|
|
@@ -193,21 +93,21 @@ export const type = {
|
|
|
193
93
|
"small": {
|
|
194
94
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
195
95
|
"fontWeight": "--cnvs-base-font-weight-400",
|
|
196
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
96
|
+
"lineHeight": "--cnvs-base-line-height-50",
|
|
197
97
|
"fontSize": "--cnvs-base-font-size-25",
|
|
198
98
|
"letterSpacing": "--cnvs-base-letter-spacing-50"
|
|
199
99
|
},
|
|
200
100
|
"medium": {
|
|
201
101
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
202
102
|
"fontWeight": "--cnvs-base-font-weight-400",
|
|
203
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
103
|
+
"lineHeight": "--cnvs-base-line-height-50",
|
|
204
104
|
"fontSize": "--cnvs-base-font-size-50",
|
|
205
105
|
"letterSpacing": "--cnvs-base-letter-spacing-100"
|
|
206
106
|
},
|
|
207
107
|
"large": {
|
|
208
108
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
209
109
|
"fontWeight": "--cnvs-base-font-weight-400",
|
|
210
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
110
|
+
"lineHeight": "--cnvs-base-line-height-100",
|
|
211
111
|
"fontSize": "--cnvs-base-font-size-75",
|
|
212
112
|
"letterSpacing": "--cnvs-base-letter-spacing-150"
|
|
213
113
|
}
|
|
@@ -216,20 +116,20 @@ export const type = {
|
|
|
216
116
|
"small": {
|
|
217
117
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
218
118
|
"fontWeight": "--cnvs-base-font-weight-400",
|
|
219
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
119
|
+
"lineHeight": "--cnvs-base-line-height-150",
|
|
220
120
|
"fontSize": "--cnvs-base-font-size-100",
|
|
221
121
|
"letterSpacing": "--cnvs-base-letter-spacing-200"
|
|
222
122
|
},
|
|
223
123
|
"medium": {
|
|
224
124
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
225
125
|
"fontWeight": "--cnvs-base-font-weight-400",
|
|
226
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
126
|
+
"lineHeight": "--cnvs-base-line-height-200",
|
|
227
127
|
"fontSize": "--cnvs-base-font-size-125"
|
|
228
128
|
},
|
|
229
129
|
"large": {
|
|
230
130
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
231
131
|
"fontWeight": "--cnvs-base-font-weight-400",
|
|
232
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
132
|
+
"lineHeight": "--cnvs-base-line-height-200",
|
|
233
133
|
"fontSize": "--cnvs-base-font-size-150"
|
|
234
134
|
}
|
|
235
135
|
},
|
|
@@ -237,19 +137,19 @@ export const type = {
|
|
|
237
137
|
"small": {
|
|
238
138
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
239
139
|
"fontWeight": "--cnvs-base-font-weight-700",
|
|
240
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
140
|
+
"lineHeight": "--cnvs-base-line-height-250",
|
|
241
141
|
"fontSize": "--cnvs-base-font-size-200"
|
|
242
142
|
},
|
|
243
143
|
"medium": {
|
|
244
144
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
245
145
|
"fontWeight": "--cnvs-base-font-weight-700",
|
|
246
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
146
|
+
"lineHeight": "--cnvs-base-line-height-300",
|
|
247
147
|
"fontSize": "--cnvs-base-font-size-250"
|
|
248
148
|
},
|
|
249
149
|
"large": {
|
|
250
150
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
251
151
|
"fontWeight": "--cnvs-base-font-weight-700",
|
|
252
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
152
|
+
"lineHeight": "--cnvs-base-line-height-350",
|
|
253
153
|
"fontSize": "--cnvs-base-font-size-300"
|
|
254
154
|
}
|
|
255
155
|
},
|
|
@@ -257,19 +157,19 @@ export const type = {
|
|
|
257
157
|
"small": {
|
|
258
158
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
259
159
|
"fontWeight": "--cnvs-base-font-weight-700",
|
|
260
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
160
|
+
"lineHeight": "--cnvs-base-line-height-400",
|
|
261
161
|
"fontSize": "--cnvs-base-font-size-400"
|
|
262
162
|
},
|
|
263
163
|
"medium": {
|
|
264
164
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
265
165
|
"fontWeight": "--cnvs-base-font-weight-700",
|
|
266
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
166
|
+
"lineHeight": "--cnvs-base-line-height-500",
|
|
267
167
|
"fontSize": "--cnvs-base-font-size-500"
|
|
268
168
|
},
|
|
269
169
|
"large": {
|
|
270
170
|
"fontFamily": "--cnvs-base-font-family-50",
|
|
271
171
|
"fontWeight": "--cnvs-base-font-weight-700",
|
|
272
|
-
"lineHeight": "--cnvs-base-line-height-
|
|
172
|
+
"lineHeight": "--cnvs-base-line-height-600",
|
|
273
173
|
"fontSize": "--cnvs-base-font-size-600"
|
|
274
174
|
}
|
|
275
175
|
}
|
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Mon, 23 Oct 2023 23:15:29 GMT
|
|
4
|
+
|
|
5
|
+
@cnvs-base-palette-cinnamon-100: rgba(255,239,238,1);
|
|
6
|
+
@cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
|
|
7
|
+
@cnvs-base-palette-cinnamon-300: rgba(255,134,125,1);
|
|
8
|
+
@cnvs-base-palette-cinnamon-400: rgba(255,83,71,1);
|
|
9
|
+
@cnvs-base-palette-cinnamon-500: rgba(222,46,33,1);
|
|
10
|
+
@cnvs-base-palette-cinnamon-600: rgba(163,27,18,1);
|
|
11
|
+
@cnvs-base-palette-peach-100: rgba(255,243,240,1);
|
|
12
|
+
@cnvs-base-palette-peach-200: rgba(255,194,179,1);
|
|
13
|
+
@cnvs-base-palette-peach-300: rgba(255,149,122,1);
|
|
14
|
+
@cnvs-base-palette-peach-400: rgba(255,100,61,1);
|
|
15
|
+
@cnvs-base-palette-peach-500: rgba(222,71,33,1);
|
|
16
|
+
@cnvs-base-palette-peach-600: rgba(181,52,19,1);
|
|
17
|
+
@cnvs-base-palette-chili-mango-100: rgba(255,230,217,1);
|
|
18
|
+
@cnvs-base-palette-chili-mango-200: rgba(255,199,171,1);
|
|
19
|
+
@cnvs-base-palette-chili-mango-300: rgba(255,155,105,1);
|
|
20
|
+
@cnvs-base-palette-chili-mango-400: rgba(255,103,27,1);
|
|
21
|
+
@cnvs-base-palette-chili-mango-500: rgba(224,75,0,1);
|
|
22
|
+
@cnvs-base-palette-chili-mango-600: rgba(163,54,0,1);
|
|
23
|
+
@cnvs-base-palette-cantaloupe-100: rgba(255,238,217,1);
|
|
24
|
+
@cnvs-base-palette-cantaloupe-200: rgba(252,212,159,1);
|
|
25
|
+
@cnvs-base-palette-cantaloupe-300: rgba(255,188,99,1);
|
|
26
|
+
@cnvs-base-palette-cantaloupe-400: rgba(255,161,38,1);
|
|
27
|
+
@cnvs-base-palette-cantaloupe-500: rgba(243,139,0,1);
|
|
28
|
+
@cnvs-base-palette-cantaloupe-600: rgba(192,108,0,1);
|
|
29
|
+
@cnvs-base-palette-sour-lemon-100: rgba(255,249,230,1);
|
|
30
|
+
@cnvs-base-palette-sour-lemon-200: rgba(255,236,171,1);
|
|
31
|
+
@cnvs-base-palette-sour-lemon-300: rgba(255,218,97,1);
|
|
32
|
+
@cnvs-base-palette-sour-lemon-400: rgba(255,198,41,1);
|
|
33
|
+
@cnvs-base-palette-sour-lemon-500: rgba(235,180,0,1);
|
|
34
|
+
@cnvs-base-palette-sour-lemon-600: rgba(189,145,0,1);
|
|
35
|
+
@cnvs-base-palette-juicy-pear-100: rgba(247,250,230,1);
|
|
36
|
+
@cnvs-base-palette-juicy-pear-200: rgba(226,243,145,1);
|
|
37
|
+
@cnvs-base-palette-juicy-pear-300: rgba(196,222,64,1);
|
|
38
|
+
@cnvs-base-palette-juicy-pear-400: rgba(168,194,36,1);
|
|
39
|
+
@cnvs-base-palette-juicy-pear-500: rgba(142,166,24,1);
|
|
40
|
+
@cnvs-base-palette-juicy-pear-600: rgba(104,120,24,1);
|
|
41
|
+
@cnvs-base-palette-kiwi-100: rgba(236,252,215,1);
|
|
42
|
+
@cnvs-base-palette-kiwi-200: rgba(202,245,147,1);
|
|
43
|
+
@cnvs-base-palette-kiwi-300: rgba(167,224,92,1);
|
|
44
|
+
@cnvs-base-palette-kiwi-400: rgba(119,188,31,1);
|
|
45
|
+
@cnvs-base-palette-kiwi-500: rgba(96,153,21,1);
|
|
46
|
+
@cnvs-base-palette-kiwi-600: rgba(83,120,36,1);
|
|
47
|
+
@cnvs-base-palette-green-apple-100: rgba(235,255,240,1);
|
|
48
|
+
@cnvs-base-palette-green-apple-200: rgba(172,245,190,1);
|
|
49
|
+
@cnvs-base-palette-green-apple-300: rgba(95,227,128,1);
|
|
50
|
+
@cnvs-base-palette-green-apple-400: rgba(67,196,99,1);
|
|
51
|
+
@cnvs-base-palette-green-apple-500: rgba(49,156,76,1);
|
|
52
|
+
@cnvs-base-palette-green-apple-600: rgba(33,122,55,1);
|
|
53
|
+
@cnvs-base-palette-watermelon-100: rgba(235,253,248,1);
|
|
54
|
+
@cnvs-base-palette-watermelon-200: rgba(183,237,222,1);
|
|
55
|
+
@cnvs-base-palette-watermelon-300: rgba(101,204,175,1);
|
|
56
|
+
@cnvs-base-palette-watermelon-400: rgba(18,166,124,1);
|
|
57
|
+
@cnvs-base-palette-watermelon-500: rgba(12,122,91,1);
|
|
58
|
+
@cnvs-base-palette-watermelon-600: rgba(0,87,62,1);
|
|
59
|
+
@cnvs-base-palette-jewel-100: rgba(235,253,255,1);
|
|
60
|
+
@cnvs-base-palette-jewel-200: rgba(172,236,243,1);
|
|
61
|
+
@cnvs-base-palette-jewel-300: rgba(68,200,215,1);
|
|
62
|
+
@cnvs-base-palette-jewel-400: rgba(30,164,179,1);
|
|
63
|
+
@cnvs-base-palette-jewel-500: rgba(26,129,140,1);
|
|
64
|
+
@cnvs-base-palette-jewel-600: rgba(21,105,115,1);
|
|
65
|
+
@cnvs-base-palette-toothpaste-100: rgba(215,241,252,1);
|
|
66
|
+
@cnvs-base-palette-toothpaste-200: rgba(153,224,255,1);
|
|
67
|
+
@cnvs-base-palette-toothpaste-300: rgba(64,180,229,1);
|
|
68
|
+
@cnvs-base-palette-toothpaste-400: rgba(24,148,201,1);
|
|
69
|
+
@cnvs-base-palette-toothpaste-500: rgba(2,113,161,1);
|
|
70
|
+
@cnvs-base-palette-toothpaste-600: rgba(0,91,130,1);
|
|
71
|
+
@cnvs-base-palette-blueberry-100: rgba(215,234,252,1);
|
|
72
|
+
@cnvs-base-palette-blueberry-200: rgba(166,210,255,1);
|
|
73
|
+
@cnvs-base-palette-blueberry-300: rgba(64,160,255,1);
|
|
74
|
+
@cnvs-base-palette-blueberry-400: rgba(8,117,225,1);
|
|
75
|
+
@cnvs-base-palette-blueberry-500: rgba(0,92,185,1);
|
|
76
|
+
@cnvs-base-palette-blueberry-600: rgba(0,67,135,1);
|
|
77
|
+
@cnvs-base-palette-plum-100: rgba(230,241,255,1);
|
|
78
|
+
@cnvs-base-palette-plum-200: rgba(166,205,255,1);
|
|
79
|
+
@cnvs-base-palette-plum-300: rgba(82,155,250,1);
|
|
80
|
+
@cnvs-base-palette-plum-400: rgba(56,129,225,1);
|
|
81
|
+
@cnvs-base-palette-plum-500: rgba(49,102,171,1);
|
|
82
|
+
@cnvs-base-palette-plum-600: rgba(38,74,122,1);
|
|
83
|
+
@cnvs-base-palette-berry-smoothie-100: rgba(232,237,255,1);
|
|
84
|
+
@cnvs-base-palette-berry-smoothie-200: rgba(195,194,255,1);
|
|
85
|
+
@cnvs-base-palette-berry-smoothie-300: rgba(120,145,255,1);
|
|
86
|
+
@cnvs-base-palette-berry-smoothie-400: rgba(94,119,230,1);
|
|
87
|
+
@cnvs-base-palette-berry-smoothie-500: rgba(75,94,179,1);
|
|
88
|
+
@cnvs-base-palette-berry-smoothie-600: rgba(59,73,135,1);
|
|
89
|
+
@cnvs-base-palette-blackberry-100: rgba(240,240,255,1);
|
|
90
|
+
@cnvs-base-palette-blackberry-200: rgba(195,194,255,1);
|
|
91
|
+
@cnvs-base-palette-blackberry-300: rgba(132,131,230,1);
|
|
92
|
+
@cnvs-base-palette-blackberry-400: rgba(92,89,230,1);
|
|
93
|
+
@cnvs-base-palette-blackberry-500: rgba(65,63,204,1);
|
|
94
|
+
@cnvs-base-palette-blackberry-600: rgba(46,45,145,1);
|
|
95
|
+
@cnvs-base-palette-island-punch-100: rgba(245,240,255,1);
|
|
96
|
+
@cnvs-base-palette-island-punch-200: rgba(210,190,250,1);
|
|
97
|
+
@cnvs-base-palette-island-punch-300: rgba(168,138,230,1);
|
|
98
|
+
@cnvs-base-palette-island-punch-400: rgba(134,96,209,1);
|
|
99
|
+
@cnvs-base-palette-island-punch-500: rgba(99,69,161,1);
|
|
100
|
+
@cnvs-base-palette-island-punch-600: rgba(80,56,130,1);
|
|
101
|
+
@cnvs-base-palette-grape-soda-100: rgba(254,235,255,1);
|
|
102
|
+
@cnvs-base-palette-grape-soda-200: rgba(250,192,255,1);
|
|
103
|
+
@cnvs-base-palette-grape-soda-300: rgba(222,138,230,1);
|
|
104
|
+
@cnvs-base-palette-grape-soda-400: rgba(200,96,209,1);
|
|
105
|
+
@cnvs-base-palette-grape-soda-500: rgba(151,73,158,1);
|
|
106
|
+
@cnvs-base-palette-grape-soda-600: rgba(124,56,130,1);
|
|
107
|
+
@cnvs-base-palette-pomegranate-100: rgba(255,235,243,1);
|
|
108
|
+
@cnvs-base-palette-pomegranate-200: rgba(255,189,189,1);
|
|
109
|
+
@cnvs-base-palette-pomegranate-300: rgba(255,92,154,1);
|
|
110
|
+
@cnvs-base-palette-pomegranate-400: rgba(243,17,103,1);
|
|
111
|
+
@cnvs-base-palette-pomegranate-500: rgba(199,5,80,1);
|
|
112
|
+
@cnvs-base-palette-pomegranate-600: rgba(153,0,58,1);
|
|
113
|
+
@cnvs-base-palette-fruit-punch-100: rgba(255,238,238,1);
|
|
114
|
+
@cnvs-base-palette-fruit-punch-200: rgba(255,189,189,1);
|
|
115
|
+
@cnvs-base-palette-fruit-punch-300: rgba(255,126,126,1);
|
|
116
|
+
@cnvs-base-palette-fruit-punch-400: rgba(255,76,76,1);
|
|
117
|
+
@cnvs-base-palette-fruit-punch-500: rgba(225,47,47,1);
|
|
118
|
+
@cnvs-base-palette-fruit-punch-600: rgba(184,40,40,1);
|
|
119
|
+
@cnvs-base-palette-root-beer-100: rgba(250,243,240,1);
|
|
120
|
+
@cnvs-base-palette-root-beer-200: rgba(235,215,207,1);
|
|
121
|
+
@cnvs-base-palette-root-beer-300: rgba(220,187,173,1);
|
|
122
|
+
@cnvs-base-palette-root-beer-400: rgba(186,154,140,1);
|
|
123
|
+
@cnvs-base-palette-root-beer-500: rgba(140,114,102,1);
|
|
124
|
+
@cnvs-base-palette-root-beer-600: rgba(102,77,66,1);
|
|
125
|
+
@cnvs-base-palette-toasted-marshmallow-100: rgba(253,246,230,1);
|
|
126
|
+
@cnvs-base-palette-toasted-marshmallow-200: rgba(235,214,169,1);
|
|
127
|
+
@cnvs-base-palette-toasted-marshmallow-300: rgba(230,191,108,1);
|
|
128
|
+
@cnvs-base-palette-toasted-marshmallow-400: rgba(204,158,59,1);
|
|
129
|
+
@cnvs-base-palette-toasted-marshmallow-500: rgba(179,127,16,1);
|
|
130
|
+
@cnvs-base-palette-toasted-marshmallow-600: rgba(140,96,0,1);
|
|
131
|
+
@cnvs-base-palette-coconut-100: rgba(240,238,238,1);
|
|
132
|
+
@cnvs-base-palette-coconut-200: rgba(227,223,223,1);
|
|
133
|
+
@cnvs-base-palette-coconut-300: rgba(209,203,204,1);
|
|
134
|
+
@cnvs-base-palette-coconut-400: rgba(179,172,172,1);
|
|
135
|
+
@cnvs-base-palette-coconut-500: rgba(158,149,149,1);
|
|
136
|
+
@cnvs-base-palette-coconut-600: rgba(143,134,135,1);
|
|
137
|
+
@cnvs-base-palette-cappuccino-100: rgba(122,115,116,1);
|
|
138
|
+
@cnvs-base-palette-cappuccino-200: rgba(112,104,105,1);
|
|
139
|
+
@cnvs-base-palette-cappuccino-300: rgba(94,87,87,1);
|
|
140
|
+
@cnvs-base-palette-cappuccino-400: rgba(74,66,66,1);
|
|
141
|
+
@cnvs-base-palette-cappuccino-500: rgba(53,47,47,1);
|
|
142
|
+
@cnvs-base-palette-cappuccino-600: rgba(35,31,32,1);
|
|
143
|
+
@cnvs-base-palette-licorice-100: rgba(161,170,179,1);
|
|
144
|
+
@cnvs-base-palette-licorice-200: rgba(123,133,143,1);
|
|
145
|
+
@cnvs-base-palette-licorice-300: rgba(94,106,117,1);
|
|
146
|
+
@cnvs-base-palette-licorice-400: rgba(74,85,97,1);
|
|
147
|
+
@cnvs-base-palette-licorice-500: rgba(51,61,71,1);
|
|
148
|
+
@cnvs-base-palette-licorice-600: rgba(31,38,46,1);
|
|
149
|
+
@cnvs-base-palette-soap-100: rgba(246,247,248,1);
|
|
150
|
+
@cnvs-base-palette-soap-200: rgba(240,241,242,1);
|
|
151
|
+
@cnvs-base-palette-soap-300: rgba(232,235,237,1);
|
|
152
|
+
@cnvs-base-palette-soap-400: rgba(223,226,230,1);
|
|
153
|
+
@cnvs-base-palette-soap-500: rgba(206,211,217,1);
|
|
154
|
+
@cnvs-base-palette-soap-600: rgba(185,192,199,1);
|
|
155
|
+
@cnvs-base-palette-french-vanilla-100: rgba(255,255,255,1);
|
|
156
|
+
@cnvs-base-palette-french-vanilla-200: rgba(235,235,235,1);
|
|
157
|
+
@cnvs-base-palette-french-vanilla-300: rgba(212,212,212,1);
|
|
158
|
+
@cnvs-base-palette-french-vanilla-400: rgba(189,189,189,1);
|
|
159
|
+
@cnvs-base-palette-french-vanilla-500: rgba(166,166,166,1);
|
|
160
|
+
@cnvs-base-palette-french-vanilla-600: rgba(143,143,143,1);
|
|
161
|
+
@cnvs-base-palette-black-pepper-100: rgba(120,120,120,1);
|
|
162
|
+
@cnvs-base-palette-black-pepper-200: rgba(97,97,97,1);
|
|
163
|
+
@cnvs-base-palette-black-pepper-300: rgba(73,73,73,1);
|
|
164
|
+
@cnvs-base-palette-black-pepper-400: rgba(51,51,51,1);
|
|
165
|
+
@cnvs-base-palette-black-pepper-500: rgba(30,30,30,1);
|
|
166
|
+
@cnvs-base-palette-black-pepper-600: rgba(0,0,0,1);
|
|
167
|
+
@cnvs-base-opacity-100: 0.08;
|
|
168
|
+
@cnvs-base-opacity-200: 0.12;
|
|
169
|
+
@cnvs-base-opacity-300: 0.4;
|
|
170
|
+
@cnvs-base-opacity-400: 0.65;
|
|
171
|
+
@cnvs-base-opacity-500: 0.85;
|
|
172
|
+
@cnvs-base-font-size-25: 0.625rem;
|
|
173
|
+
@cnvs-base-font-size-50: 0.75rem;
|
|
174
|
+
@cnvs-base-font-size-75: 0.875rem;
|
|
175
|
+
@cnvs-base-font-size-100: 1rem;
|
|
176
|
+
@cnvs-base-font-size-125: 1.125rem;
|
|
177
|
+
@cnvs-base-font-size-150: 1.25rem;
|
|
178
|
+
@cnvs-base-font-size-200: 1.5rem;
|
|
179
|
+
@cnvs-base-font-size-250: 1.75rem;
|
|
180
|
+
@cnvs-base-font-size-300: 2rem;
|
|
181
|
+
@cnvs-base-font-size-400: 2.5rem;
|
|
182
|
+
@cnvs-base-font-size-500: 3rem;
|
|
183
|
+
@cnvs-base-font-size-600: 3.5rem;
|
|
184
|
+
@cnvs-base-font-size-750: 4.5rem;
|
|
185
|
+
@cnvs-base-font-size-900: 5.5rem;
|
|
186
|
+
@cnvs-base-font-size-1050: 6.5rem;
|
|
187
|
+
@cnvs-base-line-height-50: 1rem;
|
|
188
|
+
@cnvs-base-line-height-100: 1.25rem;
|
|
189
|
+
@cnvs-base-line-height-150: 1.5rem;
|
|
190
|
+
@cnvs-base-line-height-200: 1.75rem;
|
|
191
|
+
@cnvs-base-line-height-250: 2rem;
|
|
192
|
+
@cnvs-base-line-height-300: 2.25rem;
|
|
193
|
+
@cnvs-base-line-height-350: 2.5rem;
|
|
194
|
+
@cnvs-base-line-height-400: 3rem;
|
|
195
|
+
@cnvs-base-line-height-500: 3.5rem;
|
|
196
|
+
@cnvs-base-line-height-600: 4rem;
|
|
197
|
+
@cnvs-base-line-height-750: 5rem;
|
|
198
|
+
@cnvs-base-line-height-900: 6rem;
|
|
199
|
+
@cnvs-base-line-height-1050: 7rem;
|
|
200
|
+
@cnvs-base-typescale-size-default: 0.125rem;
|
|
201
|
+
@cnvs-base-typescale-size-heading: 0.25rem;
|
|
202
|
+
@cnvs-base-typescale-size-title: 0.5rem;
|
|
203
|
+
@cnvs-base-typescale-size-display: 1rem;
|
|
204
|
+
@cnvs-base-typescale-height-default: 0.25rem;
|
|
205
|
+
@cnvs-base-typescale-height-title: 0.5rem;
|
|
206
|
+
@cnvs-base-typescale-height-display: 1rem;
|
|
207
|
+
@cnvs-base-font-family-50: "Roboto"; // Default font-family
|
|
208
|
+
@cnvs-base-font-family-100: "Roboto Mono";
|
|
209
|
+
@cnvs-base-font-family-200: "Noto Sans";
|
|
210
|
+
@cnvs-base-font-weight-300: 300;
|
|
211
|
+
@cnvs-base-font-weight-400: 400;
|
|
212
|
+
@cnvs-base-font-weight-500: 500;
|
|
213
|
+
@cnvs-base-font-weight-700: 700;
|
|
214
|
+
@cnvs-base-letter-spacing-50: 0.025rem;
|
|
215
|
+
@cnvs-base-letter-spacing-100: 0.02rem;
|
|
216
|
+
@cnvs-base-letter-spacing-150: 0.015rem;
|
|
217
|
+
@cnvs-base-letter-spacing-200: 0.01rem;
|
|
218
|
+
@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);
|
|
219
|
+
@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
|
|
220
|
+
@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);
|
|
221
|
+
@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);
|
|
222
|
+
@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);
|
|
223
|
+
@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);
|
|
224
|
+
@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.
|
|
225
|
+
@cnvs-base-unit: 0.25rem; // The base unit used in the grid system.;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Mon, 23 Oct 2023 23:15:29 GMT
|
|
4
4
|
|
|
5
5
|
@cnvs-brand-error-darkest: rgba(128,22,14,1);
|
|
6
|
+
@cnvs-brand-common-alert-inner: @cnvs-base-palette-cantaloupe-400;
|
|
7
|
+
@cnvs-brand-common-error-inner: @cnvs-base-palette-cinnamon-500;
|
|
8
|
+
@cnvs-brand-common-focus-outline: @cnvs-base-palette-blueberry-400;
|
|
6
9
|
@cnvs-brand-neutral-accent: @cnvs-base-palette-french-vanilla-100;
|
|
7
10
|
@cnvs-brand-neutral-darkest: @cnvs-base-palette-licorice-400;
|
|
8
11
|
@cnvs-brand-neutral-dark: @cnvs-base-palette-licorice-300;
|
|
@@ -32,8 +35,5 @@
|
|
|
32
35
|
@cnvs-brand-primary-base: @cnvs-base-palette-blueberry-400;
|
|
33
36
|
@cnvs-brand-primary-light: @cnvs-base-palette-blueberry-200;
|
|
34
37
|
@cnvs-brand-primary-lightest: @cnvs-base-palette-blueberry-100;
|
|
35
|
-
@cnvs-brand-gradient: linear-gradient(90deg, @cnvs-brand-primary-base 0%, @cnvs-brand-primary-dark 100%);
|
|
36
|
-
@cnvs-brand-common-alert-inner: @cnvs-brand-alert-base;
|
|
37
|
-
@cnvs-brand-common-error-inner: @cnvs-brand-error-base;
|
|
38
|
-
@cnvs-brand-common-focus-outline: @cnvs-brand-primary-base;
|
|
38
|
+
@cnvs-brand-gradient-primary: linear-gradient(90deg, @cnvs-brand-primary-base 0%, @cnvs-brand-primary-dark 100%);
|
|
39
39
|
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Mon, 23 Oct 2023 23:15:29 GMT
|
|
4
|
+
|
|
5
|
+
@cnvs-sys-space-zero: 0; // Stacks, rows in tables
|
|
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
|
+
@cnvs-sys-font-weight-bold: @cnvs-base-font-weight-700;
|
|
8
|
+
@cnvs-sys-font-weight-medium: @cnvs-base-font-weight-500;
|
|
9
|
+
@cnvs-sys-font-weight-normal: @cnvs-base-font-weight-400;
|
|
10
|
+
@cnvs-sys-font-weight-light: @cnvs-base-font-weight-300;
|
|
11
|
+
@cnvs-sys-line-height-subtext-medium: @cnvs-base-line-height-50;
|
|
12
|
+
@cnvs-sys-line-height-subtext-small: @cnvs-base-line-height-50;
|
|
13
|
+
@cnvs-sys-font-size-subtext-small: @cnvs-base-font-size-25;
|
|
14
|
+
@cnvs-sys-font-family-global: @cnvs-base-font-family-200;
|
|
15
|
+
@cnvs-sys-font-family-mono: @cnvs-base-font-family-100;
|
|
16
|
+
@cnvs-sys-font-family-default: @cnvs-base-font-family-50;
|
|
17
|
+
@cnvs-sys-space-x20: calc(@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
|
|
18
|
+
@cnvs-sys-space-x16: calc(@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
|
|
19
|
+
@cnvs-sys-space-x10: calc(@cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
|
|
20
|
+
@cnvs-sys-space-x8: calc(@cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
|
|
21
|
+
@cnvs-sys-space-x6: calc(@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
|
|
22
|
+
@cnvs-sys-space-x4: calc(@cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
|
|
23
|
+
@cnvs-sys-space-x3: calc(@cnvs-base-unit * 3); // Use when compact padding is required
|
|
24
|
+
@cnvs-sys-space-x2: calc(@cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
|
|
25
|
+
@cnvs-sys-space-x1: @cnvs-base-unit; // Compact spacing between text or icons
|
|
26
|
+
@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.
|
|
27
|
+
@cnvs-sys-shape-x2: calc(@cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
|
|
28
|
+
@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.
|
|
29
|
+
@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.
|
|
30
|
+
@cnvs-sys-opacity-disabled: @cnvs-base-opacity-300; // State layer added on top of disabled elements.
|
|
31
|
+
@cnvs-sys-line-height-subtext-large: @cnvs-base-line-height-100;
|
|
32
|
+
@cnvs-sys-font-size-subtext-medium: @cnvs-base-font-size-50;
|
|
33
|
+
@cnvs-sys-depth-6: @cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
|
|
34
|
+
@cnvs-sys-depth-5: @cnvs-base-shadow-500; // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
|
|
35
|
+
@cnvs-sys-depth-4: @cnvs-base-shadow-400; // Bottom Sheets
|
|
36
|
+
@cnvs-sys-depth-3: @cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
|
|
37
|
+
@cnvs-sys-depth-2: @cnvs-base-shadow-200; // Top navigation, Bottom Navigation
|
|
38
|
+
@cnvs-sys-depth-1: @cnvs-base-shadow-100; // Standard card depth
|
|
39
|
+
@cnvs-sys-line-height-body-small: @cnvs-base-line-height-150;
|
|
40
|
+
@cnvs-sys-font-size-subtext-large: @cnvs-base-font-size-75;
|
|
41
|
+
@cnvs-sys-line-height-body-large: @cnvs-base-line-height-200;
|
|
42
|
+
@cnvs-sys-line-height-body-medium: @cnvs-base-line-height-200;
|
|
43
|
+
@cnvs-sys-font-size-body-small: @cnvs-base-font-size-100;
|
|
44
|
+
@cnvs-sys-line-height-heading-small: @cnvs-base-line-height-250;
|
|
45
|
+
@cnvs-sys-font-size-body-medium: @cnvs-base-font-size-125;
|
|
46
|
+
@cnvs-sys-line-height-heading-medium: @cnvs-base-line-height-300;
|
|
47
|
+
@cnvs-sys-font-size-body-large: @cnvs-base-font-size-150;
|
|
48
|
+
@cnvs-sys-line-height-heading-large: @cnvs-base-line-height-350;
|
|
49
|
+
@cnvs-sys-font-size-heading-small: @cnvs-base-font-size-200;
|
|
50
|
+
@cnvs-sys-line-height-title-small: @cnvs-base-line-height-400;
|
|
51
|
+
@cnvs-sys-font-size-heading-medium: @cnvs-base-font-size-250;
|
|
52
|
+
@cnvs-sys-line-height-title-medium: @cnvs-base-line-height-500;
|
|
53
|
+
@cnvs-sys-font-size-heading-large: @cnvs-base-font-size-300;
|
|
54
|
+
@cnvs-sys-line-height-title-large: @cnvs-base-line-height-600;
|
|
55
|
+
@cnvs-sys-font-size-title-small: @cnvs-base-font-size-400;
|
|
56
|
+
@cnvs-sys-font-size-title-medium: @cnvs-base-font-size-500;
|
|
57
|
+
@cnvs-sys-font-size-title-large: @cnvs-base-font-size-600;
|
|
58
|
+
|
|
59
|
+
.cnvs-sys-type-subtext-small {
|
|
60
|
+
font-family: @cnvs-base-font-family-50;
|
|
61
|
+
font-weight: @cnvs-base-font-weight-400;
|
|
62
|
+
line-height: @cnvs-base-line-height-50;
|
|
63
|
+
font-size: @cnvs-base-font-size-25;
|
|
64
|
+
letter-spacing: @cnvs-base-letter-spacing-50;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.cnvs-sys-type-subtext-medium {
|
|
68
|
+
font-family: @cnvs-base-font-family-50;
|
|
69
|
+
font-weight: @cnvs-base-font-weight-400;
|
|
70
|
+
line-height: @cnvs-base-line-height-50;
|
|
71
|
+
font-size: @cnvs-base-font-size-50;
|
|
72
|
+
letter-spacing: @cnvs-base-letter-spacing-100;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.cnvs-sys-type-subtext-large {
|
|
76
|
+
font-family: @cnvs-base-font-family-50;
|
|
77
|
+
font-weight: @cnvs-base-font-weight-400;
|
|
78
|
+
line-height: @cnvs-base-line-height-100;
|
|
79
|
+
font-size: @cnvs-base-font-size-75;
|
|
80
|
+
letter-spacing: @cnvs-base-letter-spacing-150;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.cnvs-sys-type-body-small {
|
|
84
|
+
font-family: @cnvs-base-font-family-50;
|
|
85
|
+
font-weight: @cnvs-base-font-weight-400;
|
|
86
|
+
line-height: @cnvs-base-line-height-150;
|
|
87
|
+
font-size: @cnvs-base-font-size-100;
|
|
88
|
+
letter-spacing: @cnvs-base-letter-spacing-200;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.cnvs-sys-type-body-medium {
|
|
92
|
+
font-family: @cnvs-base-font-family-50;
|
|
93
|
+
font-weight: @cnvs-base-font-weight-400;
|
|
94
|
+
line-height: @cnvs-base-line-height-200;
|
|
95
|
+
font-size: @cnvs-base-font-size-125;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.cnvs-sys-type-body-large {
|
|
99
|
+
font-family: @cnvs-base-font-family-50;
|
|
100
|
+
font-weight: @cnvs-base-font-weight-400;
|
|
101
|
+
line-height: @cnvs-base-line-height-200;
|
|
102
|
+
font-size: @cnvs-base-font-size-150;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.cnvs-sys-type-heading-small {
|
|
106
|
+
font-family: @cnvs-base-font-family-50;
|
|
107
|
+
font-weight: @cnvs-base-font-weight-700;
|
|
108
|
+
line-height: @cnvs-base-line-height-250;
|
|
109
|
+
font-size: @cnvs-base-font-size-200;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.cnvs-sys-type-heading-medium {
|
|
113
|
+
font-family: @cnvs-base-font-family-50;
|
|
114
|
+
font-weight: @cnvs-base-font-weight-700;
|
|
115
|
+
line-height: @cnvs-base-line-height-300;
|
|
116
|
+
font-size: @cnvs-base-font-size-250;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.cnvs-sys-type-heading-large {
|
|
120
|
+
font-family: @cnvs-base-font-family-50;
|
|
121
|
+
font-weight: @cnvs-base-font-weight-700;
|
|
122
|
+
line-height: @cnvs-base-line-height-350;
|
|
123
|
+
font-size: @cnvs-base-font-size-300;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.cnvs-sys-type-title-small {
|
|
127
|
+
font-family: @cnvs-base-font-family-50;
|
|
128
|
+
font-weight: @cnvs-base-font-weight-700;
|
|
129
|
+
line-height: @cnvs-base-line-height-400;
|
|
130
|
+
font-size: @cnvs-base-font-size-400;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.cnvs-sys-type-title-medium {
|
|
134
|
+
font-family: @cnvs-base-font-family-50;
|
|
135
|
+
font-weight: @cnvs-base-font-weight-700;
|
|
136
|
+
line-height: @cnvs-base-line-height-500;
|
|
137
|
+
font-size: @cnvs-base-font-size-500;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.cnvs-sys-type-title-large {
|
|
141
|
+
font-family: @cnvs-base-font-family-50;
|
|
142
|
+
font-weight: @cnvs-base-font-weight-700;
|
|
143
|
+
line-height: @cnvs-base-line-height-600;
|
|
144
|
+
font-size: @cnvs-base-font-size-600;
|
|
145
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-tokens-web",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
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",
|
|
@@ -8,9 +8,14 @@
|
|
|
8
8
|
"module": "dist/es6/index.js",
|
|
9
9
|
"sideEffects": false,
|
|
10
10
|
"types": "dist/es6/index.d.ts",
|
|
11
|
-
"scripts": {
|
|
11
|
+
"scripts": {
|
|
12
|
+
"clean": "rimraf dist"
|
|
13
|
+
},
|
|
12
14
|
"files": [
|
|
13
|
-
"dist/"
|
|
15
|
+
"dist/",
|
|
16
|
+
"css/",
|
|
17
|
+
"less/",
|
|
18
|
+
"scss/"
|
|
14
19
|
],
|
|
15
20
|
"dependencies": {}
|
|
16
21
|
}
|