@moderneinc/neo-design 1.2.4 → 1.2.5
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/dist/breakpoints.js +28 -0
- package/dist/colors.js +56 -0
- package/dist/semantic-colors.js +333 -0
- package/dist/typography.js +35 -0
- package/package.json +1 -1
package/dist/breakpoints.js
CHANGED
|
@@ -4,12 +4,40 @@
|
|
|
4
4
|
* @generated
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* @typedef {{ }} Xl
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @type {Xl}
|
|
13
|
+
*/
|
|
7
14
|
export const xl = 1920;
|
|
8
15
|
|
|
16
|
+
/**
|
|
17
|
+
* @typedef {{ }} Lg
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* @type {Lg}
|
|
22
|
+
*/
|
|
9
23
|
export const lg = 1280;
|
|
10
24
|
|
|
25
|
+
/**
|
|
26
|
+
* @typedef {{ }} Md
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* @type {Md}
|
|
31
|
+
*/
|
|
11
32
|
export const md = 960;
|
|
12
33
|
|
|
34
|
+
/**
|
|
35
|
+
* @typedef {{ }} Sm
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* @type {Sm}
|
|
40
|
+
*/
|
|
13
41
|
export const sm = 600;
|
|
14
42
|
|
|
15
43
|
// Default export with all color groups
|
package/dist/colors.js
CHANGED
|
@@ -4,6 +4,13 @@
|
|
|
4
4
|
* @generated
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* @typedef {{ 50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, main: string }} DigitalBlue
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @type {DigitalBlue}
|
|
13
|
+
*/
|
|
7
14
|
export const digitalBlue = {
|
|
8
15
|
"50": "#f2f3ff",
|
|
9
16
|
"100": "#dce0ff",
|
|
@@ -20,6 +27,13 @@ export const digitalBlue = {
|
|
|
20
27
|
"main": "#2f42ff"
|
|
21
28
|
};
|
|
22
29
|
|
|
30
|
+
/**
|
|
31
|
+
* @typedef {{ 50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, main: string }} DigitalGreen
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* @type {DigitalGreen}
|
|
36
|
+
*/
|
|
23
37
|
export const digitalGreen = {
|
|
24
38
|
"50": "#f3fff5",
|
|
25
39
|
"100": "#cfffd7",
|
|
@@ -34,6 +48,13 @@ export const digitalGreen = {
|
|
|
34
48
|
"main": "#5ec46f"
|
|
35
49
|
};
|
|
36
50
|
|
|
51
|
+
/**
|
|
52
|
+
* @typedef {{ 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, main: string }} Gold
|
|
53
|
+
*/
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* @type {Gold}
|
|
57
|
+
*/
|
|
37
58
|
export const gold = {
|
|
38
59
|
"100": "#fbf1d2",
|
|
39
60
|
"200": "#f7e3a5",
|
|
@@ -47,6 +68,13 @@ export const gold = {
|
|
|
47
68
|
"main": "#ecb81f"
|
|
48
69
|
};
|
|
49
70
|
|
|
71
|
+
/**
|
|
72
|
+
* @typedef {{ 50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, main: string }} Grey
|
|
73
|
+
*/
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* @type {Grey}
|
|
77
|
+
*/
|
|
50
78
|
export const grey = {
|
|
51
79
|
"50": "#f9fafb",
|
|
52
80
|
"100": "#f3f4f6",
|
|
@@ -61,6 +89,13 @@ export const grey = {
|
|
|
61
89
|
"main": "#6b7280"
|
|
62
90
|
};
|
|
63
91
|
|
|
92
|
+
/**
|
|
93
|
+
* @typedef {{ 50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, main: string }} Orange
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* @type {Orange}
|
|
98
|
+
*/
|
|
64
99
|
export const orange = {
|
|
65
100
|
"50": "#fff8e5",
|
|
66
101
|
"100": "#ffebb7",
|
|
@@ -75,6 +110,13 @@ export const orange = {
|
|
|
75
110
|
"main": "#ffb800"
|
|
76
111
|
};
|
|
77
112
|
|
|
113
|
+
/**
|
|
114
|
+
* @typedef {{ 50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, main: string }} Red
|
|
115
|
+
*/
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* @type {Red}
|
|
119
|
+
*/
|
|
78
120
|
export const red = {
|
|
79
121
|
"50": "#ffedef",
|
|
80
122
|
"100": "#ffc6cd",
|
|
@@ -89,6 +131,13 @@ export const red = {
|
|
|
89
131
|
"main": "#cb3446"
|
|
90
132
|
};
|
|
91
133
|
|
|
134
|
+
/**
|
|
135
|
+
* @typedef {{ 50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, main: string }} TealGreen
|
|
136
|
+
*/
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* @type {TealGreen}
|
|
140
|
+
*/
|
|
92
141
|
export const tealGreen = {
|
|
93
142
|
"50": "#eefffa",
|
|
94
143
|
"100": "#c9fff1",
|
|
@@ -103,6 +152,13 @@ export const tealGreen = {
|
|
|
103
152
|
"main": "#3bcca6"
|
|
104
153
|
};
|
|
105
154
|
|
|
155
|
+
/**
|
|
156
|
+
* @typedef {{ 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, main: string }} Violet
|
|
157
|
+
*/
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* @type {Violet}
|
|
161
|
+
*/
|
|
106
162
|
export const violet = {
|
|
107
163
|
"100": "#ebd5f1",
|
|
108
164
|
"200": "#d6ace3",
|
package/dist/semantic-colors.js
CHANGED
|
@@ -4,226 +4,559 @@
|
|
|
4
4
|
* @generated
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* @type {string}
|
|
9
|
+
*/
|
|
7
10
|
export const base_primatives_blue = "#2f42ff";
|
|
8
11
|
|
|
12
|
+
/**
|
|
13
|
+
* @type {string}
|
|
14
|
+
*/
|
|
9
15
|
export const activity_recipe_run = "#992fb9";
|
|
10
16
|
|
|
17
|
+
/**
|
|
18
|
+
* @type {string}
|
|
19
|
+
*/
|
|
11
20
|
export const activity_commit_job = "#2f42ff";
|
|
12
21
|
|
|
22
|
+
/**
|
|
23
|
+
* @type {string}
|
|
24
|
+
*/
|
|
13
25
|
export const activity_visualization = "#27aa88";
|
|
14
26
|
|
|
27
|
+
/**
|
|
28
|
+
* @type {string}
|
|
29
|
+
*/
|
|
15
30
|
export const border_primary = "#d1d5db";
|
|
16
31
|
|
|
32
|
+
/**
|
|
33
|
+
* @type {string}
|
|
34
|
+
*/
|
|
17
35
|
export const border_input = "#9ca3af";
|
|
18
36
|
|
|
37
|
+
/**
|
|
38
|
+
* @type {string}
|
|
39
|
+
*/
|
|
19
40
|
export const border_tab_active = "#2f42ff";
|
|
20
41
|
|
|
42
|
+
/**
|
|
43
|
+
* @type {string}
|
|
44
|
+
*/
|
|
21
45
|
export const border_code_dashed = "#9ca3af";
|
|
22
46
|
|
|
47
|
+
/**
|
|
48
|
+
* @type {string}
|
|
49
|
+
*/
|
|
23
50
|
export const border_card = "#d1d5db";
|
|
24
51
|
|
|
52
|
+
/**
|
|
53
|
+
* @type {string}
|
|
54
|
+
*/
|
|
25
55
|
export const border_card_header = "#d1d5db";
|
|
26
56
|
|
|
57
|
+
/**
|
|
58
|
+
* @type {string}
|
|
59
|
+
*/
|
|
27
60
|
export const buttons_destructive = "#cb3446";
|
|
28
61
|
|
|
62
|
+
/**
|
|
63
|
+
* @type {string}
|
|
64
|
+
*/
|
|
29
65
|
export const buttons_navigation_active = "#ffffff";
|
|
30
66
|
|
|
67
|
+
/**
|
|
68
|
+
* @type {string}
|
|
69
|
+
*/
|
|
31
70
|
export const buttons_primary_pressed = "#131e7a";
|
|
32
71
|
|
|
72
|
+
/**
|
|
73
|
+
* @type {string}
|
|
74
|
+
*/
|
|
33
75
|
export const buttons_primary_default = "#2f42ff";
|
|
34
76
|
|
|
77
|
+
/**
|
|
78
|
+
* @type {string}
|
|
79
|
+
*/
|
|
35
80
|
export const buttons_primary_hover = "#1e2ec2";
|
|
36
81
|
|
|
82
|
+
/**
|
|
83
|
+
* @type {string}
|
|
84
|
+
*/
|
|
37
85
|
export const buttons_primary_disabled = "#b6bfff";
|
|
38
86
|
|
|
87
|
+
/**
|
|
88
|
+
* @type {string}
|
|
89
|
+
*/
|
|
39
90
|
export const buttons_primary_focus = "#2f42ff";
|
|
40
91
|
|
|
92
|
+
/**
|
|
93
|
+
* @type {string}
|
|
94
|
+
*/
|
|
41
95
|
export const buttons_secondary_default_border = "#b6bfff";
|
|
42
96
|
|
|
97
|
+
/**
|
|
98
|
+
* @type {string}
|
|
99
|
+
*/
|
|
43
100
|
export const buttons_secondary_hover_background = "#f2f3ff";
|
|
44
101
|
|
|
102
|
+
/**
|
|
103
|
+
* @type {string}
|
|
104
|
+
*/
|
|
45
105
|
export const buttons_secondary_pressed_background = "#dce0ff";
|
|
46
106
|
|
|
107
|
+
/**
|
|
108
|
+
* @type {string}
|
|
109
|
+
*/
|
|
47
110
|
export const buttons_secondary_disabled = "#626eff";
|
|
48
111
|
|
|
112
|
+
/**
|
|
113
|
+
* @type {string}
|
|
114
|
+
*/
|
|
49
115
|
export const buttons_secondary_focus = "#2f42ff";
|
|
50
116
|
|
|
117
|
+
/**
|
|
118
|
+
* @type {string}
|
|
119
|
+
*/
|
|
51
120
|
export const buttons_tertiary_default = "#2f42ff";
|
|
52
121
|
|
|
122
|
+
/**
|
|
123
|
+
* @type {string}
|
|
124
|
+
*/
|
|
53
125
|
export const buttons_tertiary_hover = "#1e2ec2";
|
|
54
126
|
|
|
127
|
+
/**
|
|
128
|
+
* @type {string}
|
|
129
|
+
*/
|
|
55
130
|
export const buttons_tertiary_pressed = "#131e7a";
|
|
56
131
|
|
|
132
|
+
/**
|
|
133
|
+
* @type {string}
|
|
134
|
+
*/
|
|
57
135
|
export const buttons_tertiary_focus = "#2f42ff";
|
|
58
136
|
|
|
137
|
+
/**
|
|
138
|
+
* @type {string}
|
|
139
|
+
*/
|
|
59
140
|
export const buttons_tertiary_disabled = "#626eff";
|
|
60
141
|
|
|
142
|
+
/**
|
|
143
|
+
* @type {string}
|
|
144
|
+
*/
|
|
61
145
|
export const icons_default = "#1f2937";
|
|
62
146
|
|
|
147
|
+
/**
|
|
148
|
+
* @type {string}
|
|
149
|
+
*/
|
|
63
150
|
export const icons_active = "#2f42ff";
|
|
64
151
|
|
|
152
|
+
/**
|
|
153
|
+
* @type {string}
|
|
154
|
+
*/
|
|
65
155
|
export const icons_hover = "#131e7a";
|
|
66
156
|
|
|
157
|
+
/**
|
|
158
|
+
* @type {string}
|
|
159
|
+
*/
|
|
67
160
|
export const icons_hover_background = "#e5e7eb";
|
|
68
161
|
|
|
162
|
+
/**
|
|
163
|
+
* @type {string}
|
|
164
|
+
*/
|
|
69
165
|
export const icons_disabled = "#9ca3af";
|
|
70
166
|
|
|
167
|
+
/**
|
|
168
|
+
* @type {string}
|
|
169
|
+
*/
|
|
71
170
|
export const icons_placeholder = "#4b5563";
|
|
72
171
|
|
|
172
|
+
/**
|
|
173
|
+
* @type {string}
|
|
174
|
+
*/
|
|
73
175
|
export const icons_checkbox = "#4b5563";
|
|
74
176
|
|
|
177
|
+
/**
|
|
178
|
+
* @type {string}
|
|
179
|
+
*/
|
|
75
180
|
export const base_digital_blue_900 = "#000855";
|
|
76
181
|
|
|
182
|
+
/**
|
|
183
|
+
* @type {string}
|
|
184
|
+
*/
|
|
77
185
|
export const base_digital_blue_800 = "#131e7a";
|
|
78
186
|
|
|
187
|
+
/**
|
|
188
|
+
* @type {string}
|
|
189
|
+
*/
|
|
79
190
|
export const base_digital_blue_700 = "#1e2ec2";
|
|
80
191
|
|
|
192
|
+
/**
|
|
193
|
+
* @type {string}
|
|
194
|
+
*/
|
|
81
195
|
export const base_digital_blue_600 = "#2637e6";
|
|
82
196
|
|
|
197
|
+
/**
|
|
198
|
+
* @type {string}
|
|
199
|
+
*/
|
|
83
200
|
export const base_digital_blue_500 = "#2f42ff";
|
|
84
201
|
|
|
202
|
+
/**
|
|
203
|
+
* @type {string}
|
|
204
|
+
*/
|
|
85
205
|
export const base_digital_blue_400 = "#626eff";
|
|
86
206
|
|
|
207
|
+
/**
|
|
208
|
+
* @type {string}
|
|
209
|
+
*/
|
|
87
210
|
export const base_digital_blue_300 = "#8d99ff";
|
|
88
211
|
|
|
212
|
+
/**
|
|
213
|
+
* @type {string}
|
|
214
|
+
*/
|
|
89
215
|
export const base_digital_blue_200 = "#b6bfff";
|
|
90
216
|
|
|
217
|
+
/**
|
|
218
|
+
* @type {string}
|
|
219
|
+
*/
|
|
91
220
|
export const base_digital_blue_100 = "#dce0ff";
|
|
92
221
|
|
|
222
|
+
/**
|
|
223
|
+
* @type {string}
|
|
224
|
+
*/
|
|
93
225
|
export const base_digital_blue_50 = "#f2f3ff";
|
|
94
226
|
|
|
227
|
+
/**
|
|
228
|
+
* @type {string}
|
|
229
|
+
*/
|
|
95
230
|
export const base_grey_grey_900 = "#111827";
|
|
96
231
|
|
|
232
|
+
/**
|
|
233
|
+
* @type {string}
|
|
234
|
+
*/
|
|
97
235
|
export const base_grey_grey_800 = "#1f2937";
|
|
98
236
|
|
|
237
|
+
/**
|
|
238
|
+
* @type {string}
|
|
239
|
+
*/
|
|
99
240
|
export const base_grey_grey_700 = "#374151";
|
|
100
241
|
|
|
242
|
+
/**
|
|
243
|
+
* @type {string}
|
|
244
|
+
*/
|
|
101
245
|
export const base_grey_grey_600 = "#4b5563";
|
|
102
246
|
|
|
247
|
+
/**
|
|
248
|
+
* @type {string}
|
|
249
|
+
*/
|
|
103
250
|
export const base_grey_grey_500 = "#6b7280";
|
|
104
251
|
|
|
252
|
+
/**
|
|
253
|
+
* @type {string}
|
|
254
|
+
*/
|
|
105
255
|
export const base_grey_grey_400 = "#9ca3af";
|
|
106
256
|
|
|
257
|
+
/**
|
|
258
|
+
* @type {string}
|
|
259
|
+
*/
|
|
107
260
|
export const base_grey_grey_300 = "#d1d5db";
|
|
108
261
|
|
|
262
|
+
/**
|
|
263
|
+
* @type {string}
|
|
264
|
+
*/
|
|
109
265
|
export const base_grey_grey_200 = "#e5e7eb";
|
|
110
266
|
|
|
267
|
+
/**
|
|
268
|
+
* @type {string}
|
|
269
|
+
*/
|
|
111
270
|
export const base_grey_grey_100 = "#f3f4f6";
|
|
112
271
|
|
|
272
|
+
/**
|
|
273
|
+
* @type {string}
|
|
274
|
+
*/
|
|
113
275
|
export const base_grey_grey_50 = "#f9fafb";
|
|
114
276
|
|
|
277
|
+
/**
|
|
278
|
+
* @type {string}
|
|
279
|
+
*/
|
|
115
280
|
export const base_digital_green_digital_green_50 = "#f3fff5";
|
|
116
281
|
|
|
282
|
+
/**
|
|
283
|
+
* @type {string}
|
|
284
|
+
*/
|
|
117
285
|
export const base_digital_green_digital_green_100 = "#cfffd7";
|
|
118
286
|
|
|
287
|
+
/**
|
|
288
|
+
* @type {string}
|
|
289
|
+
*/
|
|
119
290
|
export const base_digital_green_digital_green_600 = "#4ca75a";
|
|
120
291
|
|
|
292
|
+
/**
|
|
293
|
+
* @type {string}
|
|
294
|
+
*/
|
|
121
295
|
export const base_digital_green_digital_green_700 = "#3b8948";
|
|
122
296
|
|
|
297
|
+
/**
|
|
298
|
+
* @type {string}
|
|
299
|
+
*/
|
|
123
300
|
export const base_red_red_50 = "#ffedef";
|
|
124
301
|
|
|
302
|
+
/**
|
|
303
|
+
* @type {string}
|
|
304
|
+
*/
|
|
125
305
|
export const base_red_red_100 = "#ffc6cd";
|
|
126
306
|
|
|
307
|
+
/**
|
|
308
|
+
* @type {string}
|
|
309
|
+
*/
|
|
127
310
|
export const base_red_red_400 = "#ed4a5d";
|
|
128
311
|
|
|
312
|
+
/**
|
|
313
|
+
* @type {string}
|
|
314
|
+
*/
|
|
129
315
|
export const base_red_red_500 = "#cb3446";
|
|
130
316
|
|
|
317
|
+
/**
|
|
318
|
+
* @type {string}
|
|
319
|
+
*/
|
|
131
320
|
export const base_teal_green_teal_green_500 = "#3bcca6";
|
|
132
321
|
|
|
322
|
+
/**
|
|
323
|
+
* @type {string}
|
|
324
|
+
*/
|
|
133
325
|
export const base_teal_green_teal_green_600 = "#27aa88";
|
|
134
326
|
|
|
327
|
+
/**
|
|
328
|
+
* @type {string}
|
|
329
|
+
*/
|
|
135
330
|
export const status_success_dark = "#4ca75a";
|
|
136
331
|
|
|
332
|
+
/**
|
|
333
|
+
* @type {string}
|
|
334
|
+
*/
|
|
137
335
|
export const status_warning_dark = "#ffb800";
|
|
138
336
|
|
|
337
|
+
/**
|
|
338
|
+
* @type {string}
|
|
339
|
+
*/
|
|
139
340
|
export const status_error_dark = "#cb3446";
|
|
140
341
|
|
|
342
|
+
/**
|
|
343
|
+
* @type {string}
|
|
344
|
+
*/
|
|
141
345
|
export const status_success_light = "#f3fff5";
|
|
142
346
|
|
|
347
|
+
/**
|
|
348
|
+
* @type {string}
|
|
349
|
+
*/
|
|
143
350
|
export const status_error_light = "#ffedef";
|
|
144
351
|
|
|
352
|
+
/**
|
|
353
|
+
* @type {string}
|
|
354
|
+
*/
|
|
145
355
|
export const status_warning_light = "#fff8e5";
|
|
146
356
|
|
|
357
|
+
/**
|
|
358
|
+
* @type {string}
|
|
359
|
+
*/
|
|
147
360
|
export const surfaces_black = "#000000";
|
|
148
361
|
|
|
362
|
+
/**
|
|
363
|
+
* @type {string}
|
|
364
|
+
*/
|
|
149
365
|
export const surfaces_white = "#ffffff";
|
|
150
366
|
|
|
367
|
+
/**
|
|
368
|
+
* @type {string}
|
|
369
|
+
*/
|
|
151
370
|
export const surfaces_page = "#f9fafb";
|
|
152
371
|
|
|
372
|
+
/**
|
|
373
|
+
* @type {string}
|
|
374
|
+
*/
|
|
153
375
|
export const surfaces_card = "#ffffff";
|
|
154
376
|
|
|
377
|
+
/**
|
|
378
|
+
* @type {string}
|
|
379
|
+
*/
|
|
155
380
|
export const surfaces_card_header = "#f3f4f6";
|
|
156
381
|
|
|
382
|
+
/**
|
|
383
|
+
* @type {string}
|
|
384
|
+
*/
|
|
157
385
|
export const surfaces_tab_active = "#f3f4f6";
|
|
158
386
|
|
|
387
|
+
/**
|
|
388
|
+
* @type {string}
|
|
389
|
+
*/
|
|
159
390
|
export const surfaces_list_hover = "#f9fafb";
|
|
160
391
|
|
|
392
|
+
/**
|
|
393
|
+
* @type {string}
|
|
394
|
+
*/
|
|
161
395
|
export const surfaces_input_hover = "#f3f4f6";
|
|
162
396
|
|
|
397
|
+
/**
|
|
398
|
+
* @type {string}
|
|
399
|
+
*/
|
|
163
400
|
export const surfaces_table_disabled_row = "#f3f4f6";
|
|
164
401
|
|
|
402
|
+
/**
|
|
403
|
+
* @type {string}
|
|
404
|
+
*/
|
|
165
405
|
export const surfaces_table_background = "#ffffff";
|
|
166
406
|
|
|
407
|
+
/**
|
|
408
|
+
* @type {string}
|
|
409
|
+
*/
|
|
167
410
|
export const surfaces_shadow_neutral = "#1f2937";
|
|
168
411
|
|
|
412
|
+
/**
|
|
413
|
+
* @type {string}
|
|
414
|
+
*/
|
|
169
415
|
export const surfaces_scrim = "#1f2937";
|
|
170
416
|
|
|
417
|
+
/**
|
|
418
|
+
* @type {string}
|
|
419
|
+
*/
|
|
171
420
|
export const surfaces_shadow_primary = "#2f42ff";
|
|
172
421
|
|
|
422
|
+
/**
|
|
423
|
+
* @type {string}
|
|
424
|
+
*/
|
|
173
425
|
export const surfaces_tooltip = "#4b5563";
|
|
174
426
|
|
|
427
|
+
/**
|
|
428
|
+
* @type {string}
|
|
429
|
+
*/
|
|
175
430
|
export const typography_page_header = "#111827";
|
|
176
431
|
|
|
432
|
+
/**
|
|
433
|
+
* @type {string}
|
|
434
|
+
*/
|
|
177
435
|
export const typography_section_header = "#374151";
|
|
178
436
|
|
|
437
|
+
/**
|
|
438
|
+
* @type {string}
|
|
439
|
+
*/
|
|
179
440
|
export const typography_body = "#1f2937";
|
|
180
441
|
|
|
442
|
+
/**
|
|
443
|
+
* @type {string}
|
|
444
|
+
*/
|
|
181
445
|
export const typography_button_primary = "#f9fafb";
|
|
182
446
|
|
|
447
|
+
/**
|
|
448
|
+
* @type {string}
|
|
449
|
+
*/
|
|
183
450
|
export const typography_button_secondary = "#2f42ff";
|
|
184
451
|
|
|
452
|
+
/**
|
|
453
|
+
* @type {string}
|
|
454
|
+
*/
|
|
185
455
|
export const typography_button_disabled = "#9ca3af";
|
|
186
456
|
|
|
457
|
+
/**
|
|
458
|
+
* @type {string}
|
|
459
|
+
*/
|
|
187
460
|
export const typography_input_placeholder = "#6b7280";
|
|
188
461
|
|
|
462
|
+
/**
|
|
463
|
+
* @type {string}
|
|
464
|
+
*/
|
|
189
465
|
export const typography_input_default = "#1f2937";
|
|
190
466
|
|
|
467
|
+
/**
|
|
468
|
+
* @type {string}
|
|
469
|
+
*/
|
|
191
470
|
export const typography_code_primary = "#1f2937";
|
|
192
471
|
|
|
472
|
+
/**
|
|
473
|
+
* @type {string}
|
|
474
|
+
*/
|
|
193
475
|
export const typography_code_secondary = "#6b7280";
|
|
194
476
|
|
|
477
|
+
/**
|
|
478
|
+
* @type {string}
|
|
479
|
+
*/
|
|
195
480
|
export const typography_tab_inactive = "#4b5563";
|
|
196
481
|
|
|
482
|
+
/**
|
|
483
|
+
* @type {string}
|
|
484
|
+
*/
|
|
197
485
|
export const typography_tab_active = "#626eff";
|
|
198
486
|
|
|
487
|
+
/**
|
|
488
|
+
* @type {string}
|
|
489
|
+
*/
|
|
199
490
|
export const typography_link_primary = "#2f42ff";
|
|
200
491
|
|
|
492
|
+
/**
|
|
493
|
+
* @type {string}
|
|
494
|
+
*/
|
|
201
495
|
export const typography_link_disabled = "#b6bfff";
|
|
202
496
|
|
|
497
|
+
/**
|
|
498
|
+
* @type {string}
|
|
499
|
+
*/
|
|
203
500
|
export const typography_link_default = "#f9fafb";
|
|
204
501
|
|
|
502
|
+
/**
|
|
503
|
+
* @type {string}
|
|
504
|
+
*/
|
|
205
505
|
export const typography_error = "#cb3446";
|
|
206
506
|
|
|
507
|
+
/**
|
|
508
|
+
* @type {string}
|
|
509
|
+
*/
|
|
207
510
|
export const typography_success = "#4ca75a";
|
|
208
511
|
|
|
512
|
+
/**
|
|
513
|
+
* @type {string}
|
|
514
|
+
*/
|
|
209
515
|
export const typography_warning = "#1f2937";
|
|
210
516
|
|
|
517
|
+
/**
|
|
518
|
+
* @type {string}
|
|
519
|
+
*/
|
|
211
520
|
export const typography_tooltip = "#ffffff";
|
|
212
521
|
|
|
522
|
+
/**
|
|
523
|
+
* @type {string}
|
|
524
|
+
*/
|
|
213
525
|
export const data_green = "#4ca75a";
|
|
214
526
|
|
|
527
|
+
/**
|
|
528
|
+
* @type {string}
|
|
529
|
+
*/
|
|
215
530
|
export const data_yellow = "#fdda04";
|
|
216
531
|
|
|
532
|
+
/**
|
|
533
|
+
* @type {string}
|
|
534
|
+
*/
|
|
217
535
|
export const data_orange_1 = "#ffc008";
|
|
218
536
|
|
|
537
|
+
/**
|
|
538
|
+
* @type {string}
|
|
539
|
+
*/
|
|
219
540
|
export const data_orange_2 = "#ff9800";
|
|
220
541
|
|
|
542
|
+
/**
|
|
543
|
+
* @type {string}
|
|
544
|
+
*/
|
|
221
545
|
export const data_orange_3 = "#f9a91b";
|
|
222
546
|
|
|
547
|
+
/**
|
|
548
|
+
* @type {string}
|
|
549
|
+
*/
|
|
223
550
|
export const data_red_1 = "#ff5c24";
|
|
224
551
|
|
|
552
|
+
/**
|
|
553
|
+
* @type {string}
|
|
554
|
+
*/
|
|
225
555
|
export const data_red_2 = "#ed4134";
|
|
226
556
|
|
|
557
|
+
/**
|
|
558
|
+
* @type {string}
|
|
559
|
+
*/
|
|
227
560
|
export const data_red_3 = "#cb3446";
|
|
228
561
|
|
|
229
562
|
// Default export with all tokens
|
package/dist/typography.js
CHANGED
|
@@ -4,12 +4,26 @@
|
|
|
4
4
|
* @generated
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* @typedef {{ heading: string, body: string, code: string }} FontFamily
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @type {FontFamily}
|
|
13
|
+
*/
|
|
7
14
|
export const fontFamily = {
|
|
8
15
|
"heading": "Inter",
|
|
9
16
|
"body": "Inter",
|
|
10
17
|
"code": "Jetbrains Mono"
|
|
11
18
|
};
|
|
12
19
|
|
|
20
|
+
/**
|
|
21
|
+
* @typedef {{ xxs: number, xs: number, sm: number, default: number, h6: number, caption: number, code: number, h5: number, h4: number, h3: number, h2: number, h1: number }} FontSize
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* @type {FontSize}
|
|
26
|
+
*/
|
|
13
27
|
export const fontSize = {
|
|
14
28
|
"xxs": 10,
|
|
15
29
|
"xs": 12,
|
|
@@ -25,6 +39,13 @@ export const fontSize = {
|
|
|
25
39
|
"h1": 36
|
|
26
40
|
};
|
|
27
41
|
|
|
42
|
+
/**
|
|
43
|
+
* @typedef {{ thin: number, light: number, regular: number, medium: number, semiBold: number, bold: number, extraBold: number }} FontWeight
|
|
44
|
+
*/
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* @type {FontWeight}
|
|
48
|
+
*/
|
|
28
49
|
export const fontWeight = {
|
|
29
50
|
"thin": 100,
|
|
30
51
|
"light": 300,
|
|
@@ -35,6 +56,13 @@ export const fontWeight = {
|
|
|
35
56
|
"extraBold": 800
|
|
36
57
|
};
|
|
37
58
|
|
|
59
|
+
/**
|
|
60
|
+
* @typedef {{ xs: number, s: number, m: number, l: number, xl: number }} LineHeight
|
|
61
|
+
*/
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* @type {LineHeight}
|
|
65
|
+
*/
|
|
38
66
|
export const lineHeight = {
|
|
39
67
|
/** value in pixels */
|
|
40
68
|
"xs": 16,
|
|
@@ -44,6 +72,13 @@ export const lineHeight = {
|
|
|
44
72
|
"xl": 32
|
|
45
73
|
};
|
|
46
74
|
|
|
75
|
+
/**
|
|
76
|
+
* @typedef {{ underline: string }} TextDecoration
|
|
77
|
+
*/
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* @type {TextDecoration}
|
|
81
|
+
*/
|
|
47
82
|
export const textDecoration = {
|
|
48
83
|
"underline": "underline"
|
|
49
84
|
};
|