corpushub-design-system 0.0.2 → 0.1.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.
Files changed (19) hide show
  1. package/dist/primitives/index.js +1 -1
  2. package/dist/primitives/styles/base/_typographs.scss +376 -0
  3. package/dist/primitives/styles/font-googleapis.scss +222 -0
  4. package/dist/primitives/styles/main.scss +112 -0
  5. package/dist/styles/base/_typographs.scss +1 -376
  6. package/dist/styles/main.scss +1 -112
  7. package/package.json +1 -1
  8. /package/dist/{fonts → primitives/fonts}/material-symbols-outlined.woff2 +0 -0
  9. /package/dist/{fonts → primitives/fonts}/work-sans-latin-ext.woff2 +0 -0
  10. /package/dist/{fonts → primitives/fonts}/work-sans-latin.woff2 +0 -0
  11. /package/dist/{fonts → primitives/fonts}/work-sans-vietnamese.woff2 +0 -0
  12. /package/dist/{fonts.d.ts → primitives/fonts.d.ts} +0 -0
  13. /package/dist/{fonts.js → primitives/fonts.js} +0 -0
  14. /package/dist/{styles → primitives/styles}/base/_borders.scss +0 -0
  15. /package/dist/{styles → primitives/styles}/base/_colors.scss +0 -0
  16. /package/dist/{styles → primitives/styles}/base/_displays.scss +0 -0
  17. /package/dist/{styles → primitives/styles}/base/_margins.css +0 -0
  18. /package/dist/{styles → primitives/styles}/base/_spacing.scss +0 -0
  19. /package/dist/{styles → primitives/styles}/base/_tokens.scss +0 -0
package/dist/primitives/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { injectFontFaces } from '../fonts';
1
+ import { injectFontFaces } from './fonts';
2
2
  injectFontFaces();
3
3
  export { default as AlphaFilter } from './AlphaFilter';
4
4
  export { default as AnchorLink } from './AnchorLink';
package/dist/primitives/styles/base/_typographs.scss ADDED
@@ -0,0 +1,376 @@
1
+ // typographs styles
2
+
3
+ @mixin button-large {
4
+ font-size: 20px;
5
+ font-weight: 600;
6
+ line-height: 100%;
7
+ letter-spacing: 0.32px;
8
+ }
9
+
10
+ @mixin button-medium {
11
+ font-size: 16px;
12
+ font-weight: 600;
13
+ line-height: 100%;
14
+ letter-spacing: 0.32px;
15
+ text-transform: uppercase;
16
+ }
17
+
18
+ @mixin button-small {
19
+ font-size: 14px;
20
+ font-weight: 700;
21
+ line-height: 100%;
22
+ letter-spacing: 0.32px;
23
+ text-transform: uppercase;
24
+ }
25
+
26
+ @mixin label-large-1 {
27
+ font-size: 20px;
28
+ font-weight: 400;
29
+ line-height: 120%;
30
+ letter-spacing: 0px;
31
+ }
32
+
33
+ @mixin label-large-2 {
34
+ font-size: 20px;
35
+ font-weight: 700;
36
+ line-height: 120%;
37
+ letter-spacing: 0px;
38
+ }
39
+
40
+ @mixin label-medium-1 {
41
+ font-size: 16px;
42
+ font-weight: 400;
43
+ line-height: 120%;
44
+ letter-spacing: 0px;
45
+ }
46
+
47
+ @mixin label-medium-2 {
48
+ font-size: 16px;
49
+ font-weight: 700;
50
+ line-height: 120%;
51
+ letter-spacing: 0px;
52
+ }
53
+
54
+ @mixin label-small-1 {
55
+ font-size: 14px;
56
+ font-weight: 400;
57
+ line-height: 100%;
58
+ letter-spacing: 0px;
59
+ }
60
+
61
+ @mixin label-small-2 {
62
+ font-size: 14px;
63
+ font-weight: 700;
64
+ line-height: 100%;
65
+ letter-spacing: 0px;
66
+ }
67
+
68
+ @mixin tag-large-1 {
69
+ font-size: 16px;
70
+ font-weight: 500;
71
+ line-height: 100%;
72
+ letter-spacing: 1px;
73
+ text-transform: uppercase;
74
+ }
75
+
76
+ @mixin tag-large-2 {
77
+ font-family: "Lora";
78
+ font-size: 20px;
79
+ font-weight: 800;
80
+ line-height: 100%;
81
+ letter-spacing: 1px;
82
+ text-transform: uppercase;
83
+ }
84
+
85
+ @mixin tag-medium-1 {
86
+ font-size: 14px;
87
+ font-weight: 500;
88
+ line-height: 100%;
89
+ letter-spacing: 1px;
90
+ text-transform: uppercase;
91
+ }
92
+
93
+ @mixin tag-medium-2 {
94
+ font-family: "Lora";
95
+ font-size: 14px;
96
+ font-weight: 800;
97
+ line-height: 100%;
98
+ letter-spacing: 1px;
99
+ text-transform: uppercase;
100
+ }
101
+
102
+ @mixin tag-small-1 {
103
+ font-size: 12px;
104
+ font-weight: 500;
105
+ line-height: 100%;
106
+ letter-spacing: 1px;
107
+ text-transform: uppercase;
108
+ }
109
+
110
+ @mixin tag-small-2 {
111
+ font-family: "Lora";
112
+ font-size: 12px;
113
+ font-weight: 800;
114
+ line-height: 100%;
115
+ letter-spacing: 1px;
116
+ text-transform: uppercase;
117
+ }
118
+
119
+ @mixin helper-large-1 {
120
+ font-size: 14px;
121
+ font-weight: 400;
122
+ line-height: 100%;
123
+ letter-spacing: 0.16px;
124
+ }
125
+
126
+ @mixin helper-large-2 {
127
+ font-size: 14px;
128
+ font-weight: 700;
129
+ line-height: 120%;
130
+ letter-spacing: 0.16px;
131
+ }
132
+
133
+ @mixin helper-medium-1 {
134
+ font-size: 12px;
135
+ font-weight: 400;
136
+ line-height: 100%;
137
+ letter-spacing: 0.16px;
138
+ }
139
+
140
+ @mixin helper-medium-2 {
141
+ font-size: 12px;
142
+ font-weight: 700;
143
+ line-height: 120%;
144
+ letter-spacing: 0.16px;
145
+ }
146
+
147
+ @mixin helper-small-1 {
148
+ font-size: 10px;
149
+ font-weight: 400;
150
+ line-height: 100%;
151
+ letter-spacing: 0.16px;
152
+ }
153
+
154
+ @mixin helper-small-2 {
155
+ font-size: 10px;
156
+ font-weight: 700;
157
+ line-height: 120%;
158
+ letter-spacing: 0.16px;
159
+ }
160
+
161
+ @mixin body-large-1 {
162
+ font-size: 20px;
163
+ font-weight: 400;
164
+ line-height: 150%;
165
+ letter-spacing: 0px;
166
+ }
167
+
168
+ @mixin body-large-2 {
169
+ font-size: 20px;
170
+ font-weight: 700;
171
+ line-height: 150%;
172
+ letter-spacing: 0px;
173
+ }
174
+
175
+ @mixin body-xmedium-1 {
176
+ font-size: 18px;
177
+ font-weight: 400;
178
+ line-height: 150%;
179
+ letter-spacing: 0px;
180
+ }
181
+
182
+ @mixin body-xmedium-2 {
183
+ font-size: 18px;
184
+ font-weight: 700;
185
+ line-height: 150%;
186
+ letter-spacing: 0px;
187
+ }
188
+
189
+ // sets as important to override MuiTooltip-tooltip
190
+ @mixin body-medium-1 {
191
+ font-size: 16px !important;
192
+ font-weight: 400 !important;
193
+ line-height: 150% !important;
194
+ letter-spacing: 0px !important;
195
+ }
196
+
197
+ @mixin body-medium-2 {
198
+ font-size: 16px;
199
+ font-weight: 500;
200
+ line-height: 150%;
201
+ letter-spacing: 0px;
202
+ }
203
+
204
+ @mixin body-small-1 {
205
+ font-size: 14px;
206
+ font-weight: 400;
207
+ line-height: 150%;
208
+ letter-spacing: 0px;
209
+ }
210
+
211
+ @mixin body-small-2 {
212
+ font-size: 14px;
213
+ font-weight: 400;
214
+ line-height: 150%;
215
+ letter-spacing: 0px;
216
+ }
217
+
218
+ @mixin link-large {
219
+ font-size: 20px;
220
+ font-weight: 400;
221
+ line-height: 120%;
222
+ letter-spacing: 0px;
223
+ decoration: underline;
224
+ }
225
+
226
+ @mixin link-medium {
227
+ font-size: 16px;
228
+ font-weight: 400;
229
+ line-height: 120%;
230
+ letter-spacing: 0px;
231
+ decoration: underline;
232
+ }
233
+
234
+ @mixin link-small {
235
+ font-size: 14px;
236
+ font-weight: 700;
237
+ line-height: 120%;
238
+ letter-spacing: 0px;
239
+ decoration: underline;
240
+ }
241
+
242
+ @mixin heading-x-large {
243
+ font-family: "Lora";
244
+ font-size: 64px;
245
+ font-weight: 500;
246
+ line-height: 120%;
247
+ letter-spacing: 0px;
248
+ }
249
+
250
+ @mixin heading-large {
251
+ font-family: "Lora";
252
+ font-size: 56px;
253
+ font-weight: 500;
254
+ line-height: 120%;
255
+ letter-spacing: 0px;
256
+ }
257
+
258
+ @mixin heading-medium {
259
+ font-family: "Lora";
260
+ font-size: 48px;
261
+ font-weight: 500;
262
+ line-height: 120%;
263
+ letter-spacing: 0px;
264
+ }
265
+
266
+ @mixin heading-small {
267
+ font-family: "Lora";
268
+ font-size: 40px;
269
+ font-weight: 500;
270
+ line-height: 120%;
271
+ letter-spacing: 0px;
272
+ }
273
+
274
+ @mixin heading-x-small {
275
+ font-family: "Lora";
276
+ font-size: 32px;
277
+ font-weight: 500;
278
+ line-height: 120%;
279
+ letter-spacing: 0px;
280
+ }
281
+
282
+ @mixin subtitle-large-1 {
283
+ font-size: 32px;
284
+ font-weight: 300;
285
+ line-height: 120%;
286
+ letter-spacing: 0px;
287
+ }
288
+
289
+ @mixin subtitle-large-2 {
290
+ font-size: 32px;
291
+ font-weight: 600;
292
+ line-height: 120%;
293
+ letter-spacing: 0px;
294
+ }
295
+
296
+ @mixin subtitle-medium-1 {
297
+ font-size: 28px;
298
+ font-weight: 300;
299
+ line-height: 120%;
300
+ letter-spacing: 0px;
301
+ }
302
+
303
+ @mixin subtitle-medium-2 {
304
+ font-size: 28px;
305
+ font-weight: 600;
306
+ line-height: 120%;
307
+ letter-spacing: 0px;
308
+ }
309
+
310
+ @mixin subtitle-smedium-1 {
311
+ font-size: 24px;
312
+ font-weight: 300;
313
+ line-height: 120%;
314
+ letter-spacing: 0px;
315
+ }
316
+
317
+ @mixin subtitle-smedium-2 {
318
+ font-size: 24px;
319
+ font-weight: 600;
320
+ line-height: 120%;
321
+ letter-spacing: 0px;
322
+ }
323
+
324
+ @mixin subtitle-small-1 {
325
+ font-size: 20px;
326
+ font-weight: 300;
327
+ line-height: 120%;
328
+ letter-spacing: 1px;
329
+ }
330
+
331
+ @mixin subtitle-small-2 {
332
+ font-size: 20px;
333
+ font-weight: 600;
334
+ line-height: 120%;
335
+ letter-spacing: 1px;
336
+ }
337
+
338
+ @mixin display-x-large {
339
+ font-family: "Lora";
340
+ font-size: 144px;
341
+ font-weight: 300;
342
+ line-height: 100%;
343
+ letter-spacing: 0px;
344
+ }
345
+
346
+ @mixin display-large {
347
+ font-family: "Lora";
348
+ font-size: 120px;
349
+ font-weight: 300;
350
+ line-height: 100%;
351
+ letter-spacing: 0px;
352
+ }
353
+
354
+ @mixin display-medium {
355
+ font-family: "Lora";
356
+ font-size: 112px;
357
+ font-weight: 300;
358
+ line-height: 100%;
359
+ letter-spacing: 0px;
360
+ }
361
+
362
+ @mixin display-small {
363
+ font-family: "Lora";
364
+ font-size: 96px;
365
+ font-weight: 300;
366
+ line-height: 100%;
367
+ letter-spacing: 0px;
368
+ }
369
+
370
+ @mixin display-x-small {
371
+ font-family: "Lora";
372
+ font-size: 80px;
373
+ font-weight: 300;
374
+ line-height: 100%;
375
+ letter-spacing: 0px;
376
+ }
package/dist/primitives/styles/font-googleapis.scss ADDED
@@ -0,0 +1,222 @@
1
+ /* fallback */
2
+ @font-face {
3
+ font-family: 'Material Symbols Outlined';
4
+ font-style: normal;
5
+ font-weight: 200;
6
+ font-display: swap;
7
+ src: url('./fonts/material-symbols-outlined.woff2') format('woff2');
8
+ }
9
+ /* vietnamese */
10
+ @font-face {
11
+ font-family: 'Work Sans';
12
+ font-style: normal;
13
+ font-weight: 300;
14
+ font-display: swap;
15
+ src: url('./fonts/work-sans-vietnamese.woff2') format('woff2');
16
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
17
+ U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
18
+ U+0329, U+1EA0-1EF9, U+20AB;
19
+ }
20
+ /* latin-ext */
21
+ @font-face {
22
+ font-family: 'Work Sans';
23
+ font-style: normal;
24
+ font-weight: 300;
25
+ font-display: swap;
26
+ src: url('./fonts/work-sans-latin-ext.woff2') format('woff2');
27
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
28
+ U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
29
+ U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
30
+ }
31
+ /* latin */
32
+ @font-face {
33
+ font-family: 'Work Sans';
34
+ font-style: normal;
35
+ font-weight: 300;
36
+ font-display: swap;
37
+ src: url('./fonts/work-sans-latin.woff2') format('woff2');
38
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
39
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
40
+ U+2212, U+2215, U+FEFF, U+FFFD;
41
+ }
42
+ /* vietnamese */
43
+ @font-face {
44
+ font-family: 'Work Sans';
45
+ font-style: normal;
46
+ font-weight: 400;
47
+ font-display: swap;
48
+ src: url('./fonts/work-sans-vietnamese.woff2') format('woff2');
49
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
50
+ U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
51
+ U+0329, U+1EA0-1EF9, U+20AB;
52
+ }
53
+ /* latin-ext */
54
+ @font-face {
55
+ font-family: 'Work Sans';
56
+ font-style: normal;
57
+ font-weight: 400;
58
+ font-display: swap;
59
+ src: url('./fonts/work-sans-latin-ext.woff2') format('woff2');
60
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
61
+ U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
62
+ U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
63
+ }
64
+ /* latin */
65
+ @font-face {
66
+ font-family: 'Work Sans';
67
+ font-style: normal;
68
+ font-weight: 400;
69
+ font-display: swap;
70
+ src: url('./fonts/work-sans-latin.woff2') format('woff2');
71
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
72
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
73
+ U+2212, U+2215, U+FEFF, U+FFFD;
74
+ }
75
+ /* vietnamese */
76
+ @font-face {
77
+ font-family: 'Work Sans';
78
+ font-style: normal;
79
+ font-weight: 500;
80
+ font-display: swap;
81
+ src: url('./fonts/work-sans-vietnamese.woff2') format('woff2');
82
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
83
+ U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
84
+ U+0329, U+1EA0-1EF9, U+20AB;
85
+ }
86
+ /* latin-ext */
87
+ @font-face {
88
+ font-family: 'Work Sans';
89
+ font-style: normal;
90
+ font-weight: 500;
91
+ font-display: swap;
92
+ src: url('./fonts/work-sans-latin-ext.woff2') format('woff2');
93
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
94
+ U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
95
+ U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
96
+ }
97
+ /* latin */
98
+ @font-face {
99
+ font-family: 'Work Sans';
100
+ font-style: normal;
101
+ font-weight: 500;
102
+ font-display: swap;
103
+ src: url('./fonts/work-sans-latin.woff2') format('woff2');
104
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
105
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
106
+ U+2212, U+2215, U+FEFF, U+FFFD;
107
+ }
108
+ /* vietnamese */
109
+ @font-face {
110
+ font-family: 'Work Sans';
111
+ font-style: normal;
112
+ font-weight: 600;
113
+ font-display: swap;
114
+ src: url('./fonts/work-sans-vietnamese.woff2') format('woff2');
115
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
116
+ U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
117
+ U+0329, U+1EA0-1EF9, U+20AB;
118
+ }
119
+ /* latin-ext */
120
+ @font-face {
121
+ font-family: 'Work Sans';
122
+ font-style: normal;
123
+ font-weight: 600;
124
+ font-display: swap;
125
+ src: url('./fonts/work-sans-latin-ext.woff2') format('woff2');
126
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
127
+ U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
128
+ U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
129
+ }
130
+ /* latin */
131
+ @font-face {
132
+ font-family: 'Work Sans';
133
+ font-style: normal;
134
+ font-weight: 600;
135
+ font-display: swap;
136
+ src: url('./fonts/work-sans-latin.woff2') format('woff2');
137
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
138
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
139
+ U+2212, U+2215, U+FEFF, U+FFFD;
140
+ }
141
+ /* vietnamese */
142
+ @font-face {
143
+ font-family: 'Work Sans';
144
+ font-style: normal;
145
+ font-weight: 700;
146
+ font-display: swap;
147
+ src: url('./fonts/work-sans-vietnamese.woff2') format('woff2');
148
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
149
+ U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
150
+ U+0329, U+1EA0-1EF9, U+20AB;
151
+ }
152
+ /* latin-ext */
153
+ @font-face {
154
+ font-family: 'Work Sans';
155
+ font-style: normal;
156
+ font-weight: 700;
157
+ font-display: swap;
158
+ src: url('./fonts/work-sans-latin-ext.woff2') format('woff2');
159
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
160
+ U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
161
+ U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
162
+ }
163
+ /* latin */
164
+ @font-face {
165
+ font-family: 'Work Sans';
166
+ font-style: normal;
167
+ font-weight: 700;
168
+ font-display: swap;
169
+ src: url('./fonts/work-sans-latin.woff2') format('woff2');
170
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
171
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
172
+ U+2212, U+2215, U+FEFF, U+FFFD;
173
+ }
174
+ /* vietnamese */
175
+ @font-face {
176
+ font-family: 'Work Sans';
177
+ font-style: normal;
178
+ font-weight: 800;
179
+ font-display: swap;
180
+ src: url('./fonts/work-sans-vietnamese.woff2') format('woff2');
181
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
182
+ U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
183
+ U+0329, U+1EA0-1EF9, U+20AB;
184
+ }
185
+ /* latin-ext */
186
+ @font-face {
187
+ font-family: 'Work Sans';
188
+ font-style: normal;
189
+ font-weight: 800;
190
+ font-display: swap;
191
+ src: url('./fonts/work-sans-latin-ext.woff2') format('woff2');
192
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
193
+ U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
194
+ U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
195
+ }
196
+ /* latin */
197
+ @font-face {
198
+ font-family: 'Work Sans';
199
+ font-style: normal;
200
+ font-weight: 800;
201
+ font-display: swap;
202
+ src: url('./fonts/work-sans-latin.woff2') format('woff2');
203
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
204
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
205
+ U+2212, U+2215, U+FEFF, U+FFFD;
206
+ }
207
+
208
+ .material-symbols-outlined {
209
+ font-family: 'Material Symbols Outlined';
210
+ font-weight: normal;
211
+ font-style: normal;
212
+ font-size: 24px;
213
+ line-height: 1;
214
+ letter-spacing: normal;
215
+ text-transform: none;
216
+ display: inline-block;
217
+ white-space: nowrap;
218
+ word-wrap: normal;
219
+ direction: ltr;
220
+ -webkit-font-feature-settings: 'liga';
221
+ -webkit-font-smoothing: antialiased;
222
+ }
package/dist/primitives/styles/main.scss ADDED
@@ -0,0 +1,112 @@
1
+ @use "./base/typographs" as *;
2
+ @use "./base/borders";
3
+ @use "./base/colors";
4
+ @use "./base/displays";
5
+ @use "./base/margins";
6
+ @use "./base/spacing";
7
+ @use "./base/tokens";
8
+
9
+ :root {
10
+ --font-family:
11
+ "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
12
+ "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
13
+ "Segoe UI Symbol", "Noto Color Emoji";
14
+ --height-viewport: calc(100vh - 48px);
15
+ --border-default: 1px solid var(--border-subtle-2);
16
+ --font-weight-large: 700;
17
+ }
18
+
19
+ html,
20
+ body,
21
+ #root {
22
+ background-color: var(--background-default);
23
+ height: calc(100% - 48px);
24
+ font-family: var(--font-family);
25
+ }
26
+
27
+ body {
28
+ margin: 0;
29
+ }
30
+
31
+ ::-webkit-scrollbar {
32
+ width: 8px;
33
+ height: 8px;
34
+ cursor: pointer;
35
+ }
36
+
37
+ ::-webkit-scrollbar-thumb {
38
+ background-color: #888;
39
+ border-radius: var(--radius-full);
40
+ }
41
+
42
+ ::-webkit-scrollbar-track {
43
+ background: #f1f1f1;
44
+ border-radius: var(--radius-full);
45
+ }
46
+
47
+ ::-webkit-scrollbar-corner {
48
+ background: #fff;
49
+ }
50
+
51
+ .pointer {
52
+ cursor: pointer;
53
+ }
54
+
55
+ .spin {
56
+ display: inline-block;
57
+ animation: spin 2s linear infinite;
58
+ color: var(--icon-primary-default);
59
+ }
60
+
61
+ .fixed-top {
62
+ position: fixed;
63
+ top: 0;
64
+ right: 0;
65
+ left: 0;
66
+ z-index: 1030;
67
+ }
68
+
69
+ @keyframes spin {
70
+ from {
71
+ transform: rotate(0deg);
72
+ }
73
+ to {
74
+ transform: rotate(360deg); /* Positive value for clockwise */
75
+ }
76
+ }
77
+
78
+ .desktop-only {
79
+ display: flex !important;
80
+ }
81
+
82
+ .tablet-only,
83
+ .mobile-only,
84
+ .desktop-never {
85
+ display: none !important;
86
+ }
87
+
88
+ @media (max-width: 768px) {
89
+ .desktop-only,
90
+ .mobile-only,
91
+ .tablet-never {
92
+ display: none !important;
93
+ }
94
+
95
+ .tablet-only,
96
+ .desktop-never {
97
+ display: flex !important;
98
+ }
99
+ }
100
+
101
+ @media (max-width: 767px) {
102
+ .desktop-only,
103
+ .tablet-only,
104
+ .mobile-never {
105
+ display: none !important;
106
+ }
107
+
108
+ .mobile-only,
109
+ .desktop-never {
110
+ display: flex !important;
111
+ }
112
+ }
package/dist/styles/base/_typographs.scss CHANGED
@@ -1,376 +1 @@
1
- // typographs styles
2
-
3
- @mixin button-large {
4
- font-size: 20px;
5
- font-weight: 600;
6
- line-height: 100%;
7
- letter-spacing: 0.32px;
8
- }
9
-
10
- @mixin button-medium {
11
- font-size: 16px;
12
- font-weight: 600;
13
- line-height: 100%;
14
- letter-spacing: 0.32px;
15
- text-transform: uppercase;
16
- }
17
-
18
- @mixin button-small {
19
- font-size: 14px;
20
- font-weight: 700;
21
- line-height: 100%;
22
- letter-spacing: 0.32px;
23
- text-transform: uppercase;
24
- }
25
-
26
- @mixin label-large-1 {
27
- font-size: 20px;
28
- font-weight: 400;
29
- line-height: 120%;
30
- letter-spacing: 0px;
31
- }
32
-
33
- @mixin label-large-2 {
34
- font-size: 20px;
35
- font-weight: 700;
36
- line-height: 120%;
37
- letter-spacing: 0px;
38
- }
39
-
40
- @mixin label-medium-1 {
41
- font-size: 16px;
42
- font-weight: 400;
43
- line-height: 120%;
44
- letter-spacing: 0px;
45
- }
46
-
47
- @mixin label-medium-2 {
48
- font-size: 16px;
49
- font-weight: 700;
50
- line-height: 120%;
51
- letter-spacing: 0px;
52
- }
53
-
54
- @mixin label-small-1 {
55
- font-size: 14px;
56
- font-weight: 400;
57
- line-height: 100%;
58
- letter-spacing: 0px;
59
- }
60
-
61
- @mixin label-small-2 {
62
- font-size: 14px;
63
- font-weight: 700;
64
- line-height: 100%;
65
- letter-spacing: 0px;
66
- }
67
-
68
- @mixin tag-large-1 {
69
- font-size: 16px;
70
- font-weight: 500;
71
- line-height: 100%;
72
- letter-spacing: 1px;
73
- text-transform: uppercase;
74
- }
75
-
76
- @mixin tag-large-2 {
77
- font-family: "Lora";
78
- font-size: 20px;
79
- font-weight: 800;
80
- line-height: 100%;
81
- letter-spacing: 1px;
82
- text-transform: uppercase;
83
- }
84
-
85
- @mixin tag-medium-1 {
86
- font-size: 14px;
87
- font-weight: 500;
88
- line-height: 100%;
89
- letter-spacing: 1px;
90
- text-transform: uppercase;
91
- }
92
-
93
- @mixin tag-medium-2 {
94
- font-family: "Lora";
95
- font-size: 14px;
96
- font-weight: 800;
97
- line-height: 100%;
98
- letter-spacing: 1px;
99
- text-transform: uppercase;
100
- }
101
-
102
- @mixin tag-small-1 {
103
- font-size: 12px;
104
- font-weight: 500;
105
- line-height: 100%;
106
- letter-spacing: 1px;
107
- text-transform: uppercase;
108
- }
109
-
110
- @mixin tag-small-2 {
111
- font-family: "Lora";
112
- font-size: 12px;
113
- font-weight: 800;
114
- line-height: 100%;
115
- letter-spacing: 1px;
116
- text-transform: uppercase;
117
- }
118
-
119
- @mixin helper-large-1 {
120
- font-size: 14px;
121
- font-weight: 400;
122
- line-height: 100%;
123
- letter-spacing: 0.16px;
124
- }
125
-
126
- @mixin helper-large-2 {
127
- font-size: 14px;
128
- font-weight: 700;
129
- line-height: 120%;
130
- letter-spacing: 0.16px;
131
- }
132
-
133
- @mixin helper-medium-1 {
134
- font-size: 12px;
135
- font-weight: 400;
136
- line-height: 100%;
137
- letter-spacing: 0.16px;
138
- }
139
-
140
- @mixin helper-medium-2 {
141
- font-size: 12px;
142
- font-weight: 700;
143
- line-height: 120%;
144
- letter-spacing: 0.16px;
145
- }
146
-
147
- @mixin helper-small-1 {
148
- font-size: 10px;
149
- font-weight: 400;
150
- line-height: 100%;
151
- letter-spacing: 0.16px;
152
- }
153
-
154
- @mixin helper-small-2 {
155
- font-size: 10px;
156
- font-weight: 700;
157
- line-height: 120%;
158
- letter-spacing: 0.16px;
159
- }
160
-
161
- @mixin body-large-1 {
162
- font-size: 20px;
163
- font-weight: 400;
164
- line-height: 150%;
165
- letter-spacing: 0px;
166
- }
167
-
168
- @mixin body-large-2 {
169
- font-size: 20px;
170
- font-weight: 700;
171
- line-height: 150%;
172
- letter-spacing: 0px;
173
- }
174
-
175
- @mixin body-xmedium-1 {
176
- font-size: 18px;
177
- font-weight: 400;
178
- line-height: 150%;
179
- letter-spacing: 0px;
180
- }
181
-
182
- @mixin body-xmedium-2 {
183
- font-size: 18px;
184
- font-weight: 700;
185
- line-height: 150%;
186
- letter-spacing: 0px;
187
- }
188
-
189
- // sets as important to override MuiTooltip-tooltip
190
- @mixin body-medium-1 {
191
- font-size: 16px !important;
192
- font-weight: 400 !important;
193
- line-height: 150% !important;
194
- letter-spacing: 0px !important;
195
- }
196
-
197
- @mixin body-medium-2 {
198
- font-size: 16px;
199
- font-weight: 500;
200
- line-height: 150%;
201
- letter-spacing: 0px;
202
- }
203
-
204
- @mixin body-small-1 {
205
- font-size: 14px;
206
- font-weight: 400;
207
- line-height: 150%;
208
- letter-spacing: 0px;
209
- }
210
-
211
- @mixin body-small-2 {
212
- font-size: 14px;
213
- font-weight: 400;
214
- line-height: 150%;
215
- letter-spacing: 0px;
216
- }
217
-
218
- @mixin link-large {
219
- font-size: 20px;
220
- font-weight: 400;
221
- line-height: 120%;
222
- letter-spacing: 0px;
223
- decoration: underline;
224
- }
225
-
226
- @mixin link-medium {
227
- font-size: 16px;
228
- font-weight: 400;
229
- line-height: 120%;
230
- letter-spacing: 0px;
231
- decoration: underline;
232
- }
233
-
234
- @mixin link-small {
235
- font-size: 14px;
236
- font-weight: 700;
237
- line-height: 120%;
238
- letter-spacing: 0px;
239
- decoration: underline;
240
- }
241
-
242
- @mixin heading-x-large {
243
- font-family: "Lora";
244
- font-size: 64px;
245
- font-weight: 500;
246
- line-height: 120%;
247
- letter-spacing: 0px;
248
- }
249
-
250
- @mixin heading-large {
251
- font-family: "Lora";
252
- font-size: 56px;
253
- font-weight: 500;
254
- line-height: 120%;
255
- letter-spacing: 0px;
256
- }
257
-
258
- @mixin heading-medium {
259
- font-family: "Lora";
260
- font-size: 48px;
261
- font-weight: 500;
262
- line-height: 120%;
263
- letter-spacing: 0px;
264
- }
265
-
266
- @mixin heading-small {
267
- font-family: "Lora";
268
- font-size: 40px;
269
- font-weight: 500;
270
- line-height: 120%;
271
- letter-spacing: 0px;
272
- }
273
-
274
- @mixin heading-x-small {
275
- font-family: "Lora";
276
- font-size: 32px;
277
- font-weight: 500;
278
- line-height: 120%;
279
- letter-spacing: 0px;
280
- }
281
-
282
- @mixin subtitle-large-1 {
283
- font-size: 32px;
284
- font-weight: 300;
285
- line-height: 120%;
286
- letter-spacing: 0px;
287
- }
288
-
289
- @mixin subtitle-large-2 {
290
- font-size: 32px;
291
- font-weight: 600;
292
- line-height: 120%;
293
- letter-spacing: 0px;
294
- }
295
-
296
- @mixin subtitle-medium-1 {
297
- font-size: 28px;
298
- font-weight: 300;
299
- line-height: 120%;
300
- letter-spacing: 0px;
301
- }
302
-
303
- @mixin subtitle-medium-2 {
304
- font-size: 28px;
305
- font-weight: 600;
306
- line-height: 120%;
307
- letter-spacing: 0px;
308
- }
309
-
310
- @mixin subtitle-smedium-1 {
311
- font-size: 24px;
312
- font-weight: 300;
313
- line-height: 120%;
314
- letter-spacing: 0px;
315
- }
316
-
317
- @mixin subtitle-smedium-2 {
318
- font-size: 24px;
319
- font-weight: 600;
320
- line-height: 120%;
321
- letter-spacing: 0px;
322
- }
323
-
324
- @mixin subtitle-small-1 {
325
- font-size: 20px;
326
- font-weight: 300;
327
- line-height: 120%;
328
- letter-spacing: 1px;
329
- }
330
-
331
- @mixin subtitle-small-2 {
332
- font-size: 20px;
333
- font-weight: 600;
334
- line-height: 120%;
335
- letter-spacing: 1px;
336
- }
337
-
338
- @mixin display-x-large {
339
- font-family: "Lora";
340
- font-size: 144px;
341
- font-weight: 300;
342
- line-height: 100%;
343
- letter-spacing: 0px;
344
- }
345
-
346
- @mixin display-large {
347
- font-family: "Lora";
348
- font-size: 120px;
349
- font-weight: 300;
350
- line-height: 100%;
351
- letter-spacing: 0px;
352
- }
353
-
354
- @mixin display-medium {
355
- font-family: "Lora";
356
- font-size: 112px;
357
- font-weight: 300;
358
- line-height: 100%;
359
- letter-spacing: 0px;
360
- }
361
-
362
- @mixin display-small {
363
- font-family: "Lora";
364
- font-size: 96px;
365
- font-weight: 300;
366
- line-height: 100%;
367
- letter-spacing: 0px;
368
- }
369
-
370
- @mixin display-x-small {
371
- font-family: "Lora";
372
- font-size: 80px;
373
- font-weight: 300;
374
- line-height: 100%;
375
- letter-spacing: 0px;
376
- }
1
+ @forward "../../primitives/styles/base/typographs";
package/dist/styles/main.scss CHANGED
@@ -1,115 +1,4 @@
1
- @use './base/typographs' as *;
2
- @use './base/borders';
3
- @use './base/colors';
4
- @use './base/displays';
5
- @use './base/margins';
6
- @use './base/spacing';
7
- @use './base/tokens';
8
-
9
- :root {
10
- --font-family:
11
- 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
12
- 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
13
- 'Segoe UI Symbol', 'Noto Color Emoji';
14
- --height-viewport: calc(100vh - 48px);
15
- --border-default: 1px solid var(--border-subtle-2);
16
- --font-weight-large: 700;
17
- }
18
-
19
- html,
20
- body,
21
- #root {
22
- background-color: var(--background-default);
23
- height: calc(100% - 48px);
24
- font-family: var(--font-family);
25
- }
26
-
27
- body {
28
- margin: 0;
29
- }
30
-
31
- ::-webkit-scrollbar {
32
- width: 8px;
33
- height: 8px;
34
- cursor: pointer;
35
- }
36
-
37
- ::-webkit-scrollbar-thumb {
38
- background-color: #888;
39
- border-radius: var(--radius-full);
40
- }
41
-
42
- ::-webkit-scrollbar-track {
43
- background: #f1f1f1;
44
- border-radius: var(--radius-full);
45
- }
46
-
47
- ::-webkit-scrollbar-corner {
48
- background: #fff;
49
- }
50
-
51
- .pointer {
52
- cursor: pointer;
53
- }
54
-
55
- .spin {
56
- display: inline-block;
57
- animation: spin 2s linear infinite;
58
- color: var(--icon-primary-default);
59
- }
60
-
61
- .fixed-top {
62
- position: fixed;
63
- top: 0;
64
- right: 0;
65
- left: 0;
66
- z-index: 1030;
67
- }
68
-
69
- @keyframes spin {
70
- from {
71
- transform: rotate(0deg);
72
- }
73
- to {
74
- transform: rotate(360deg); /* Positive value for clockwise */
75
- }
76
- }
77
-
78
- .desktop-only {
79
- display: flex !important;
80
- }
81
-
82
- .tablet-only,
83
- .mobile-only,
84
- .desktop-never {
85
- display: none !important;
86
- }
87
-
88
- @media (max-width: 768px) {
89
- .desktop-only,
90
- .mobile-only,
91
- .tablet-never {
92
- display: none !important;
93
- }
94
-
95
- .tablet-only,
96
- .desktop-never {
97
- display: flex !important;
98
- }
99
- }
100
-
101
- @media (max-width: 767px) {
102
- .desktop-only,
103
- .tablet-only,
104
- .mobile-never {
105
- display: none !important;
106
- }
107
-
108
- .mobile-only,
109
- .desktop-never {
110
- display: flex !important;
111
- }
112
- }
1
+ @use "../primitives/styles/main";
113
2
 
114
3
  .icon-button {
115
4
  border: none;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "corpushub-design-system",
3
3
  "private": false,
4
- "version": "0.0.2",
4
+ "version": "0.1.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
/package/dist/{fonts.d.ts → primitives/fonts.d.ts} RENAMED
File without changes
/package/dist/{fonts.js → primitives/fonts.js} RENAMED
File without changes