@preply/ds-web-core 0.30.0 → 0.31.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.
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED @Thu May 26 2022 15:13:46 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED @Fri Jun 10 2022 13:58:21 GMT+0000 (Coordinated Universal Time) */
2
2
 
3
3
  @breakpoints: {
4
4
  narrow-l: 400px;
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED @Thu May 26 2022 15:13:45 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED @Fri Jun 10 2022 13:58:20 GMT+0000 (Coordinated Universal Time) */
2
2
 
3
3
  @AVATAR_SIZE_OPTIONS: 2xs, xs, s, m, l, xl;
4
4
  @BUTTON_SIZE_OPTIONS: xs, s, m, l, xl;
@@ -6,7 +6,7 @@
6
6
  @COLOR_SCHEME_OPTIONS: base, banner, invert;
7
7
  @HEADING_LEVEL_OPTIONS: h1, h2, h3, h4, h5;
8
8
  @HEADING_TAG_OPTIONS: h1, h2, h3, h4, h5, p, div;
9
- @ICON_ACCENT_OPTIONS: normal, muted, brand, positive;
9
+ @ICON_ACCENT_OPTIONS: primary, secondary, branded, positive;
10
10
  @ICON_SIZE_OPTIONS: 2xs, xs, s, m, l;
11
11
  @LAYOUT_ALIGN_ITEMS_OPTIONS: center, start, end, stretch, baseline;
12
12
  @LAYOUT_FLEX_DIRECTION_OPTIONS: row, row-reverse, column, column-reverse;
@@ -16,9 +16,12 @@
16
16
  @LAYOUT_TAG_OPTIONS: div, main, header, footer, article, section, ul, ol, li, p, span;
17
17
  @PANEL_PADDING_OPTIONS: small, base, medium, large;
18
18
  @PREPLY_LOGO_VARIANT_OPTIONS: default, monochrome, ua;
19
- @TEXT_ACCENT_OPTIONS: normal, muted, brand, positive;
19
+ @TEXT_ACCENT_OPTIONS: primary, secondary, branded, positive;
20
20
  @TEXT_HIGHLIGHT_OPTIONS: blue, green;
21
21
  @TEXT_INLINE_TAG_OPTIONS: span, strong, em;
22
22
  @TEXT_SIZE_OPTIONS: 2xs, xs, s, m, l, xl;
23
23
  @TEXT_TAG_OPTIONS: p, div, span;
24
+ @TEXT_VARIANT_OPTIONS: xs, s, s-italic, s-medium, s-medium-italic, s-bold, s-bold-italic, m,
25
+ m-italic, m-medium, m-medium-italic, m-bold, m-bold-italic, l, l-italic, l-medium,
26
+ l-medium-italic, xl, xl-italic, xl-medium, xl-medium-italic;
24
27
  @THEME_OPTIONS: cluck-ui, base-ui, preply-ui;
@@ -1,4 +1,4 @@
1
- /* AUTO GENERATED @Thu May 26 2022 15:13:46 GMT+0000 (Coordinated Universal Time) */
1
+ /* AUTO GENERATED @Fri Jun 10 2022 13:58:21 GMT+0000 (Coordinated Universal Time) */
2
2
 
3
3
  @scheme-color: var(--aface);
4
4
  @scheme-bgColor: var(--786b9);
@@ -51,6 +51,13 @@
51
51
  @root-palette-magenta-500: var(--5893e);
52
52
  @root-text-base-typeface: var(--7068b);
53
53
  @root-text-base-fontFamily: var(--0e309);
54
+ @root-text-height-200: var(--3056a);
55
+ @root-text-height-400: var(--f8a46);
56
+ @root-text-height-600: var(--80463);
57
+ @root-text-height-1000: var(--6b62f);
58
+ @root-text-height-1600: var(--ad20b);
59
+ @root-text-height-2000: var(--3345f);
60
+ @root-text-height-2800: var(--25e5a);
54
61
  @root-text-size-70: var(--9fea4);
55
62
  @root-text-size-80: var(--cc496);
56
63
  @root-text-size-90: var(--38f57);
@@ -60,17 +67,29 @@
60
67
  @root-text-size-400: var(--c8989);
61
68
  @root-text-size-500: var(--76b8d);
62
69
  @root-text-size-600: var(--8be1e);
70
+ @root-text-size-800: var(--dcabc);
63
71
  @root-text-size-1000: var(--6f187);
64
72
  @root-text-size-1200: var(--f339d);
73
+ @root-text-size-1800: var(--00a28);
74
+ @root-text-size-2400: var(--b4751);
75
+ @root-text-spacing-tight: var(--f3cb5);
76
+ @root-text-spacing-regular: var(--28429);
77
+ @root-text-spacing-loose: var(--488ba);
78
+ @root-text-spacing-lax: var(--bc8cb);
79
+ @root-text-style-normal: var(--7bbf5);
80
+ @root-text-style-italic: var(--dfb50);
81
+ @root-text-weight-400: var(--2a8f5);
82
+ @root-text-weight-500: var(--d1c48);
83
+ @root-text-weight-700: var(--a25b2);
65
84
  @root-text-base-fontSize: var(--8d63e);
66
85
  @root-text-base-lineHeight: var(--d4313);
67
86
  @background-primary: var(--7271a);
68
87
  @background-secondary: var(--5836c);
69
88
  @background-overlay: var(--410fb);
70
- @content-primary: var(--8f6cf);
71
- @content-secondary: var(--cfb13);
72
- @content-branded: var(--d4c39);
73
- @content-positive: var(--d2701);
89
+ @content-primary-color: var(--e4113);
90
+ @content-secondary-color: var(--3d280);
91
+ @content-branded-color: var(--4dadf);
92
+ @content-positive-color: var(--31874);
74
93
  @action-base-borderRadius: var(--8d513);
75
94
  @action-base-disabled-color: var(--a8b89);
76
95
  @action-base-disabled-bgColor: var(--04dae);
@@ -162,6 +181,46 @@
162
181
  @heading-level-h3-fontSize: var(--ace69);
163
182
  @heading-level-h4-fontSize: var(--3e140);
164
183
  @heading-level-h5-fontSize: var(--af282);
184
+ @heading-level-h1-normal-fontSize: var(--d04d4);
185
+ @heading-level-h2-normal-fontSize: var(--2bd50);
186
+ @heading-level-h3-normal-fontSize: var(--28917);
187
+ @heading-level-h4-normal-fontSize: var(--63dde);
188
+ @heading-level-h5-normal-fontSize: var(--4dbf8);
189
+ @heading-level-h1-normal-fontWeight: var(--d41fd);
190
+ @heading-level-h2-normal-fontWeight: var(--a8a52);
191
+ @heading-level-h3-normal-fontWeight: var(--f6b07);
192
+ @heading-level-h4-normal-fontWeight: var(--aea9a);
193
+ @heading-level-h5-normal-fontWeight: var(--51bd6);
194
+ @heading-level-h1-normal-lineHeight: var(--263a0);
195
+ @heading-level-h2-normal-lineHeight: var(--74d17);
196
+ @heading-level-h3-normal-lineHeight: var(--33f70);
197
+ @heading-level-h4-normal-lineHeight: var(--2059e);
198
+ @heading-level-h5-normal-lineHeight: var(--4f103);
199
+ @heading-level-h1-normal-letterSpacing: var(--08c11);
200
+ @heading-level-h2-normal-letterSpacing: var(--ac8be);
201
+ @heading-level-h3-normal-letterSpacing: var(--02dfa);
202
+ @heading-level-h4-normal-letterSpacing: var(--b5659);
203
+ @heading-level-h5-normal-letterSpacing: var(--918f0);
204
+ @heading-level-h1-large-fontSize: var(--da58b);
205
+ @heading-level-h2-large-fontSize: var(--8a757);
206
+ @heading-level-h3-large-fontSize: var(--42200);
207
+ @heading-level-h4-large-fontSize: var(--abc50);
208
+ @heading-level-h5-large-fontSize: var(--3b191);
209
+ @heading-level-h1-large-fontWeight: var(--32576);
210
+ @heading-level-h2-large-fontWeight: var(--000cc);
211
+ @heading-level-h3-large-fontWeight: var(--80998);
212
+ @heading-level-h4-large-fontWeight: var(--0e9c4);
213
+ @heading-level-h5-large-fontWeight: var(--99df3);
214
+ @heading-level-h1-large-lineHeight: var(--a165a);
215
+ @heading-level-h2-large-lineHeight: var(--65785);
216
+ @heading-level-h3-large-lineHeight: var(--8c79b);
217
+ @heading-level-h4-large-lineHeight: var(--95bce);
218
+ @heading-level-h5-large-lineHeight: var(--759bb);
219
+ @heading-level-h1-large-letterSpacing: var(--921c8);
220
+ @heading-level-h2-large-letterSpacing: var(--56bc0);
221
+ @heading-level-h3-large-letterSpacing: var(--2f0fc);
222
+ @heading-level-h4-large-letterSpacing: var(--45a27);
223
+ @heading-level-h5-large-letterSpacing: var(--4400a);
165
224
  @panel-base-bgColor: var(--7c8e6);
166
225
  @panel-base-borderRadius: var(--ff478);
167
226
  @panel-divider-borderColor: var(--66a60);
@@ -169,10 +228,6 @@
169
228
  @panel-padding-base-padding: var(--c8793);
170
229
  @panel-padding-medium-padding: var(--0c9f7);
171
230
  @panel-padding-large-padding: var(--1d829);
172
- @text-accent-normal-color: var(--937a6);
173
- @text-accent-muted-color: var(--fe08e);
174
- @text-accent-brand-color: var(--32ad9);
175
- @text-accent-positive-color: var(--e0400);
176
231
  @text-highlight-blue-color: var(--68bd1);
177
232
  @text-highlight-green-color: var(--c5023);
178
233
  @text-highlight-blue-bgColor: var(--2d51a);
@@ -185,6 +240,111 @@
185
240
  @text-size-m-fontSize: var(--08192);
186
241
  @text-size-l-fontSize: var(--da41a);
187
242
  @text-size-xl-fontSize: var(--698b6);
243
+ @text-variant-xs-fontSize: var(--4c9f6);
244
+ @text-variant-s-fontSize: var(--a7cfd);
245
+ @text-variant-s-italic-fontSize: var(--79c03);
246
+ @text-variant-s-medium-fontSize: var(--28e99);
247
+ @text-variant-s-medium-italic-fontSize: var(--0e0e6);
248
+ @text-variant-s-bold-fontSize: var(--69b27);
249
+ @text-variant-s-bold-italic-fontSize: var(--0afa8);
250
+ @text-variant-m-fontSize: var(--0c62d);
251
+ @text-variant-m-italic-fontSize: var(--aa6f0);
252
+ @text-variant-m-medium-fontSize: var(--a5b1e);
253
+ @text-variant-m-medium-italic-fontSize: var(--a9ad4);
254
+ @text-variant-m-bold-fontSize: var(--29e81);
255
+ @text-variant-m-bold-italic-fontSize: var(--741af);
256
+ @text-variant-l-fontSize: var(--8d5be);
257
+ @text-variant-l-italic-fontSize: var(--feec7);
258
+ @text-variant-l-medium-fontSize: var(--0bcae);
259
+ @text-variant-l-medium-italic-fontSize: var(--007ce);
260
+ @text-variant-xl-fontSize: var(--c338f);
261
+ @text-variant-xl-italic-fontSize: var(--734b0);
262
+ @text-variant-xl-medium-fontSize: var(--19e13);
263
+ @text-variant-xl-medium-italic-fontSize: var(--88dc1);
264
+ @text-variant-xs-fontWeight: var(--71d69);
265
+ @text-variant-s-fontWeight: var(--dc8b9);
266
+ @text-variant-s-italic-fontWeight: var(--5127d);
267
+ @text-variant-s-medium-fontWeight: var(--ca04c);
268
+ @text-variant-s-medium-italic-fontWeight: var(--f9d4c);
269
+ @text-variant-s-bold-fontWeight: var(--a9bc9);
270
+ @text-variant-s-bold-italic-fontWeight: var(--363b4);
271
+ @text-variant-m-fontWeight: var(--cb99b);
272
+ @text-variant-m-italic-fontWeight: var(--fb483);
273
+ @text-variant-m-medium-fontWeight: var(--749dc);
274
+ @text-variant-m-medium-italic-fontWeight: var(--faf5f);
275
+ @text-variant-m-bold-fontWeight: var(--18f8e);
276
+ @text-variant-m-bold-italic-fontWeight: var(--c521d);
277
+ @text-variant-l-fontWeight: var(--0776b);
278
+ @text-variant-l-italic-fontWeight: var(--6e450);
279
+ @text-variant-l-medium-fontWeight: var(--149f7);
280
+ @text-variant-l-medium-italic-fontWeight: var(--fa919);
281
+ @text-variant-xl-fontWeight: var(--f8f48);
282
+ @text-variant-xl-italic-fontWeight: var(--0baf2);
283
+ @text-variant-xl-medium-fontWeight: var(--6455e);
284
+ @text-variant-xl-medium-italic-fontWeight: var(--cc6f6);
285
+ @text-variant-xs-lineHeight: var(--54357);
286
+ @text-variant-s-lineHeight: var(--c552e);
287
+ @text-variant-s-italic-lineHeight: var(--aeb64);
288
+ @text-variant-s-medium-lineHeight: var(--af784);
289
+ @text-variant-s-medium-italic-lineHeight: var(--88c2d);
290
+ @text-variant-s-bold-lineHeight: var(--42f89);
291
+ @text-variant-s-bold-italic-lineHeight: var(--49446);
292
+ @text-variant-m-lineHeight: var(--829b1);
293
+ @text-variant-m-italic-lineHeight: var(--33548);
294
+ @text-variant-m-medium-lineHeight: var(--76f1e);
295
+ @text-variant-m-medium-italic-lineHeight: var(--3bd2e);
296
+ @text-variant-m-bold-lineHeight: var(--3d432);
297
+ @text-variant-m-bold-italic-lineHeight: var(--c47e7);
298
+ @text-variant-l-lineHeight: var(--1cd7a);
299
+ @text-variant-l-italic-lineHeight: var(--1056e);
300
+ @text-variant-l-medium-lineHeight: var(--02fee);
301
+ @text-variant-l-medium-italic-lineHeight: var(--2c996);
302
+ @text-variant-xl-lineHeight: var(--2503f);
303
+ @text-variant-xl-italic-lineHeight: var(--e8423);
304
+ @text-variant-xl-medium-lineHeight: var(--85e4a);
305
+ @text-variant-xl-medium-italic-lineHeight: var(--904c1);
306
+ @text-variant-xs-letterSpacing: var(--29af8);
307
+ @text-variant-s-letterSpacing: var(--4d1d5);
308
+ @text-variant-s-italic-letterSpacing: var(--a50d8);
309
+ @text-variant-s-medium-letterSpacing: var(--015e8);
310
+ @text-variant-s-medium-italic-letterSpacing: var(--bc7f3);
311
+ @text-variant-s-bold-letterSpacing: var(--c2692);
312
+ @text-variant-s-bold-italic-letterSpacing: var(--10dc5);
313
+ @text-variant-m-letterSpacing: var(--03511);
314
+ @text-variant-m-italic-letterSpacing: var(--8330d);
315
+ @text-variant-m-medium-letterSpacing: var(--2a382);
316
+ @text-variant-m-medium-italic-letterSpacing: var(--fe4b2);
317
+ @text-variant-m-bold-letterSpacing: var(--6e9f2);
318
+ @text-variant-m-bold-italic-letterSpacing: var(--2e489);
319
+ @text-variant-l-letterSpacing: var(--b5b33);
320
+ @text-variant-l-italic-letterSpacing: var(--421c2);
321
+ @text-variant-l-medium-letterSpacing: var(--11ba2);
322
+ @text-variant-l-medium-italic-letterSpacing: var(--9705f);
323
+ @text-variant-xl-letterSpacing: var(--4aff4);
324
+ @text-variant-xl-italic-letterSpacing: var(--c9c19);
325
+ @text-variant-xl-medium-letterSpacing: var(--e7696);
326
+ @text-variant-xl-medium-italic-letterSpacing: var(--cf0e2);
327
+ @text-variant-xs-fontStyle: var(--647b4);
328
+ @text-variant-s-fontStyle: var(--b8dd4);
329
+ @text-variant-s-italic-fontStyle: var(--c89e0);
330
+ @text-variant-s-medium-fontStyle: var(--e1d91);
331
+ @text-variant-s-medium-italic-fontStyle: var(--38a14);
332
+ @text-variant-s-bold-fontStyle: var(--07031);
333
+ @text-variant-s-bold-italic-fontStyle: var(--36d92);
334
+ @text-variant-m-fontStyle: var(--a833d);
335
+ @text-variant-m-italic-fontStyle: var(--b8b43);
336
+ @text-variant-m-medium-fontStyle: var(--b079f);
337
+ @text-variant-m-medium-italic-fontStyle: var(--a19ae);
338
+ @text-variant-m-bold-fontStyle: var(--f02b4);
339
+ @text-variant-m-bold-italic-fontStyle: var(--8c577);
340
+ @text-variant-l-fontStyle: var(--af51c);
341
+ @text-variant-l-italic-fontStyle: var(--2adf6);
342
+ @text-variant-l-medium-fontStyle: var(--03e30);
343
+ @text-variant-l-medium-italic-fontStyle: var(--56d3f);
344
+ @text-variant-xl-fontStyle: var(--a93d9);
345
+ @text-variant-xl-italic-fontStyle: var(--0b0b0);
346
+ @text-variant-xl-medium-fontStyle: var(--0a5e6);
347
+ @text-variant-xl-medium-italic-fontStyle: var(--6fc94);
188
348
  @text-weight-base-fontWeight: var(--5b0e0);
189
349
  @text-weight-400-fontWeight: var(--73984);
190
350
  @text-weight-500-fontWeight: var(--6e979);
@@ -59,6 +59,26 @@
59
59
  font-size: @@token;
60
60
  }
61
61
 
62
+ .font-weight(@namespace, @key) {
63
+ @token: '@{namespace}-@{key}-fontWeight';
64
+ font-weight: @@token;
65
+ }
66
+
67
+ .line-height(@namespace, @key) {
68
+ @token: '@{namespace}-@{key}-lineHeight';
69
+ line-height: @@token;
70
+ }
71
+
72
+ .letter-spacing(@namespace, @key) {
73
+ @token: '@{namespace}-@{key}-letterSpacing';
74
+ letter-spacing: @@token;
75
+ }
76
+
77
+ .font-style(@namespace, @key) {
78
+ @token: '@{namespace}-@{key}-fontStyle';
79
+ font-style: @@token;
80
+ }
81
+
62
82
  .color(@namespace, @key) {
63
83
  @token: '@{namespace}-@{key}-color';
64
84
  color: @@token;
@@ -1,6 +1,7 @@
1
1
  @import '../../generated/tokens.less';
2
2
  @import '../../generated/options.less';
3
3
  @import '../../theme/style/declarations.mixins.less';
4
+ @import '../../responsive/style/mixins.less';
4
5
 
5
6
  .type-base() {
6
7
  font-family: @root-text-base-fontFamily;
@@ -14,8 +15,7 @@
14
15
  .text-accents() {
15
16
  each(@TEXT_ACCENT_OPTIONS, {
16
17
  &--accent-@{value} {
17
- @token: 'accent-@{value}';
18
- .color('text', @token);
18
+ .color('content', @value);
19
19
  }
20
20
  });
21
21
  }
@@ -39,11 +39,39 @@
39
39
  });
40
40
  }
41
41
 
42
+ .text-variants() {
43
+ .responsive({
44
+ each(@TEXT_VARIANT_OPTIONS, {
45
+ &--variant-@{value} {
46
+ @token: 'variant-@{value}';
47
+ .font-size('text', @token);
48
+ .font-weight('text', @token);
49
+ .line-height('text', @token);
50
+ .letter-spacing('text', @token);
51
+ .font-style('text', @token)
52
+ }
53
+ });
54
+ });
55
+ }
56
+
42
57
  .heading-levels() {
43
- each(@HEADING_LEVEL_OPTIONS, {
44
- &--level-@{value} {
45
- @token: 'level-@{value}';
46
- .font-size('heading', @token);
47
- }
58
+ .responsive({
59
+ each(@HEADING_LEVEL_OPTIONS, {
60
+ &--level-@{value}-normal {
61
+ @token: 'level-@{value}-normal';
62
+ .font-size('heading', @token);
63
+ .font-weight('heading', @token);
64
+ .line-height('heading', @token);
65
+ .letter-spacing('heading', @token);
66
+ }
67
+
68
+ &--level-@{value}-large {
69
+ @token: 'level-@{value}-large';
70
+ .font-size('heading', @token);
71
+ .font-weight('heading', @token);
72
+ .line-height('heading', @token);
73
+ .letter-spacing('heading', @token);
74
+ }
75
+ });
48
76
  });
49
77
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@preply/ds-web-core",
3
- "version": "0.30.0",
3
+ "version": "0.31.2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -19,14 +19,14 @@
19
19
  "dev": "run build:rollup -w"
20
20
  },
21
21
  "dependencies": {
22
- "@preply/ds-core": "0.30.0",
23
- "@preply/ds-core-types": "0.30.0"
22
+ "@preply/ds-core": "0.31.2",
23
+ "@preply/ds-core-types": "0.31.2"
24
24
  },
25
25
  "peerDependencies": {
26
- "@preply/ds-core": "0.30.0",
27
- "@preply/ds-core-types": "0.30.0",
26
+ "@preply/ds-core": "0.31.2",
27
+ "@preply/ds-core-types": "0.31.2",
28
28
  "react": "^16.8.3",
29
29
  "react-dom": "^16.8.3"
30
30
  },
31
- "gitHead": "674aebf63e1040a9b486e2d350ba757582db2a00"
31
+ "gitHead": "7fc442ad57c03733c5834ad711e0d78729021e67"
32
32
  }