@bonniernews/dn-design-system-web 3.0.0-alpha.2 → 3.0.0-alpha.4

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 (21) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/assets/article-image/article-image.njk +33 -0
  3. package/assets/article-image/article-image.scss +20 -0
  4. package/components/article-body-image/README.md +42 -0
  5. package/components/article-body-image/article-body-image.njk +23 -0
  6. package/components/article-body-image/article-body-image.scss +8 -0
  7. package/components/article-top-image/README.md +40 -0
  8. package/components/article-top-image/article-top-image.njk +23 -0
  9. package/components/article-top-image/article-top-image.scss +6 -0
  10. package/components/badge/badge.scss +2 -2
  11. package/components/blocked-content/blocked-content.scss +2 -2
  12. package/components/buddy-menu/buddy-menu.scss +2 -2
  13. package/components/byline/byline.scss +5 -2
  14. package/components/disclaimer/disclaimer.scss +2 -2
  15. package/components/factbox/factbox.scss +2 -2
  16. package/foundations/typography/fontDefinitions.scss +52 -21
  17. package/foundations/variables/spacingLayoutLargeScreen.scss +2 -9
  18. package/foundations/variables/typographyTokensList.scss +31 -30
  19. package/foundations/variables/typographyTokensScreenLarge.scss +113 -107
  20. package/foundations/variables/typographyTokensScreenSmall.scss +124 -118
  21. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.3...@bonniernews/dn-design-system-web@3.0.0-alpha.4) (2023-03-08)
7
+
8
+
9
+ ### ⚠ BREAKING CHANGES
10
+
11
+ * typography medium to semibold (#717)
12
+
13
+ ### Miscellaneous Chores
14
+
15
+ * typography medium to semibold ([#717](https://github.com/BonnierNews/dn-design-system/issues/717)) ([964de48](https://github.com/BonnierNews/dn-design-system/commit/964de485f43f18cd3f93ce4f0f82a1ce89219dee))
16
+
17
+
18
+
19
+ ## [3.0.0-alpha.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.2...@bonniernews/dn-design-system-web@3.0.0-alpha.3) (2023-03-08)
20
+
21
+
22
+ ### Features
23
+
24
+ * **web:** article image ([#697](https://github.com/BonnierNews/dn-design-system/issues/697)) ([e3e9cec](https://github.com/BonnierNews/dn-design-system/commit/e3e9cecd96f4d6240854ffc593a082f7d6c66793))
25
+
26
+
27
+
6
28
  ## [3.0.0-alpha.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.1...@bonniernews/dn-design-system-web@3.0.0-alpha.2) (2023-03-06)
7
29
 
8
30
 
package/assets/article-image/article-image.njk ADDED
@@ -0,0 +1,33 @@
1
+ {% macro ArticleImage(params) %}
2
+ {% set macroClassName = "ds-article-image" %}
3
+ {% set additionalClasses = [] %}
4
+
5
+ {% if params.classNames %}
6
+ {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
7
+ {% endif %}
8
+
9
+ {% set classes = macroClassName + " " + additionalClasses | join(" ") %}
10
+
11
+ <figure class="{{ classes }}" {{- params.attributes | safe }}>
12
+ {% if params.fullWidth %}
13
+ <div class="ds-full-width-element">
14
+ {{ params.imageHtml | safe }}
15
+ </div>
16
+ {% else %}
17
+ {{ params.imageHtml | safe }}
18
+ {% endif %}
19
+
20
+ {% if params.caption or params.author %}
21
+ <figcaption>
22
+ {% if params.caption %}
23
+ <span aria-hidden="true">{{ params.caption | safe }}</span>
24
+ {% endif %}
25
+ {% if params.author %}
26
+ <span class="ds-article-image__credits">
27
+ {%- if params.imageType %}{{ params.imageType | capitalize }}: {% endif %}{{ params.author -}}
28
+ </span>
29
+ {% endif %}
30
+ </figcaption>
31
+ {% endif %}
32
+ </figure>
33
+ {% endmacro %}
package/assets/article-image/article-image.scss ADDED
@@ -0,0 +1,20 @@
1
+ @use "../../foundations/helpers/forward.helpers.scss" as *;
2
+
3
+ .ds-article-image {
4
+ margin: 0;
5
+
6
+ > figcaption {
7
+ @include ds-typography($ds-typography-functional-body01regular);
8
+ margin-top: ds-spacing-component(x2);
9
+ color: $ds-color-text-primary;
10
+
11
+ @at-root .ds-force-px#{&} {
12
+ @include ds-typography($ds-typography-functional-body01regular, true);
13
+ }
14
+
15
+ > .ds-article-image__credits {
16
+ display: block;
17
+ color: $ds-color-text-primary-02;
18
+ }
19
+ }
20
+ }
package/components/article-body-image/README.md ADDED
@@ -0,0 +1,42 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-body-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-body-image)
2
+ - Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-bodyimage-web--article-body-image)
3
+
4
+ ----
5
+
6
+ # ArticleBodyImage
7
+
8
+ ## Parameters
9
+
10
+ |parameter | type | required | options | default | description |
11
+ |:--- | :--- | :--- | :--- | :--- | :--- |
12
+ |imageHtml | String | yes | | | Use to populate figure tag with image information |
13
+ |fullWidth | Bool | no | true, false | false | Image will have styleable wrapping element |
14
+ |caption | String | no | | | Ex "Detta är en bildtext" |
15
+ |imageType | String | no | | | Type of image. Ex "Foto" |
16
+ |author | String | no | | | Ex "Paul Hansen" |
17
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
18
+ |classNames | String | no | | | Ex. "my-special-class" |
19
+ |forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
20
+
21
+ ## Minimum requirement example
22
+
23
+ ### Nunjucks
24
+
25
+ These are copy paste friendly examples to quickliy get started using a component.
26
+
27
+ ```html
28
+ {% from '@bonniernews/dn-design-system-web/components/article-body-image/article-body-image.njk' import ArticleBodyImage %}
29
+
30
+ {{ ArticleBodyImage({
31
+ imageHtml: exampleArticleBodyImageHtml(),
32
+ fullWidth: true,
33
+ caption: "En bildtext",
34
+ imageType: "Foto",
35
+ author: "Paul Hansen",
36
+ })}}
37
+ ```
38
+
39
+ ### SCSS
40
+ ```scss
41
+ @use "@bonniernews/dn-design-system-web/components/article-body-image/article-body-image";
42
+ ```
package/components/article-body-image/article-body-image.njk ADDED
@@ -0,0 +1,23 @@
1
+ {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
2
+ {% from '@bonniernews/dn-design-system-web/assets/article-image/article-image.njk' import ArticleImage %}
3
+ {% set classes = [] %}
4
+
5
+ {% macro ArticleBodyImage(params) %}
6
+ {% set componentClassName = "ds-article-image--body" %}
7
+ {% set additionalClasses = [] %}
8
+ {% set attributes = getAttributes(params.attributes) %}
9
+
10
+ {% if params.classNames %}
11
+ {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
12
+ {% endif %}
13
+
14
+ {% if params.forcePx %}
15
+ {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
16
+ {% endif %}
17
+
18
+ {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
19
+
20
+ {% set imageParams = { fullWidth: params.fullWidth, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes } %}
21
+
22
+ {% call ArticleImage(imageParams) %}{% endcall %}
23
+ {% endmacro %}
package/components/article-body-image/article-body-image.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../foundations/helpers/forward.helpers.scss" as *;
2
+ @use "../../assets/article-image/article-image.scss" as *;
3
+
4
+ .ds-article-image--body {
5
+ @include ds-spacing-layout(
6
+ gap-vertical-static-medium 0 gap-vertical-static-large
7
+ );
8
+ }
package/components/article-top-image/README.md ADDED
@@ -0,0 +1,40 @@
1
+ - GitHub: [BonnierNews/dn-design-system/../web/src/components/article-top-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/article-top-image)
2
+ - Storybook: [Disclaimer > Web](https://designsystem.dn.se/?path=/story/components-app-web-article-components-image-topimage-web--article-top-image)
3
+
4
+ ----
5
+
6
+ # ArticleTopImage
7
+
8
+ ## Parameters
9
+
10
+ |parameter | type | required | options | default | description |
11
+ |:--- | :--- | :--- | :--- | :--- | :--- |
12
+ |imageHtml | String | yes | | | Use to populate figure tag with image information |
13
+ |caption | String | no | | | Ex "Detta är en bildtext" |
14
+ |imageType | String | no | | | Type of image. Ex "Foto" |
15
+ |author | String | no | | | Ex "Paul Hansen" |
16
+ |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
17
+ |classNames | String | no | | | Ex. "my-special-class" |
18
+ |forcePx | Bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
19
+
20
+ ## Minimum requirement example
21
+
22
+ ### Nunjucks
23
+
24
+ These are copy paste friendly examples to quickliy get started using a component.
25
+
26
+ ```html
27
+ {% from '@bonniernews/dn-design-system-web/components/article-top-image/article-top-image.njk' import ArticleTopImage %}
28
+
29
+ {{ ArticleTopImage({
30
+ imageHtml: exampleArticleTopImageHtml(),
31
+ caption: "En bildtext",
32
+ imageType: "Foto",
33
+ author: "Beatrice Lundborg",
34
+ })}}
35
+ ```
36
+
37
+ ### SCSS
38
+ ```scss
39
+ @use "@bonniernews/dn-design-system-web/components/article-top-image/article-top-image";
40
+ ```
package/components/article-top-image/article-top-image.njk ADDED
@@ -0,0 +1,23 @@
1
+ {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
2
+ {% from '@bonniernews/dn-design-system-web/assets/article-image/article-image.njk' import ArticleImage %}
3
+ {% set classes = [] %}
4
+
5
+ {% macro ArticleTopImage(params) %}
6
+ {% set componentClassName = "ds-article-image--top" %}
7
+ {% set additionalClasses = [] %}
8
+ {% set attributes = getAttributes(params.attributes) %}
9
+
10
+ {% if params.classNames %}
11
+ {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
12
+ {% endif %}
13
+
14
+ {% if params.forcePx %}
15
+ {% set additionalClasses = (additionalClasses.push("ds-force-px"), additionalClasses) %}
16
+ {% endif %}
17
+
18
+ {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
19
+
20
+ {% set imageParams = { fullWidth: true, caption: params.caption, imageType: params.imageType, author: params.author, imageHtml: params.imageHtml, classNames: classes, attributes: attributes } %}
21
+
22
+ {% call ArticleImage(imageParams) %}{% endcall %}
23
+ {% endmacro %}
package/components/article-top-image/article-top-image.scss ADDED
@@ -0,0 +1,6 @@
1
+ @use "../../foundations/helpers/forward.helpers.scss" as *;
2
+ @use "../../assets/article-image/article-image.scss" as *;
3
+
4
+ .ds-article-image--top {
5
+ @include ds-spacing-layout(gap-vertical-static-large, px, padding-bottom);
6
+ }
package/components/badge/badge.scss CHANGED
@@ -11,7 +11,7 @@ $ds-badge__min-size: 8px;
11
11
  box-sizing: content-box;
12
12
 
13
13
  .ds-badge__inner {
14
- @include ds-typography($ds-typography-functional-meta02medium);
14
+ @include ds-typography($ds-typography-functional-meta02semibold);
15
15
  color: $ds-color-static-white;
16
16
  background-color: $ds-color-component-brand;
17
17
  border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
@@ -23,7 +23,7 @@ $ds-badge__min-size: 8px;
23
23
  min-width: ds-px-to-rem($ds-badge__min-size);
24
24
  padding: 0 ds-px-to-rem(ds-spacing-component(x1));
25
25
  @at-root .ds-force-px#{&} {
26
- @include ds-typography($ds-typography-functional-meta02medium, true);
26
+ @include ds-typography($ds-typography-functional-meta02semibold, true);
27
27
  min-height: $ds-badge__min-size;
28
28
  min-width: $ds-badge__min-size;
29
29
  padding: 0 ds-spacing-component(x1);
package/components/blocked-content/blocked-content.scss CHANGED
@@ -24,11 +24,11 @@
24
24
  }
25
25
  }
26
26
  .ds-blocked-content__title {
27
- @include ds-typography($ds-typography-functional-heading01medium);
27
+ @include ds-typography($ds-typography-functional-heading01semibold);
28
28
  color: $ds-color-text-primary;
29
29
  margin: 0 0 ds-spacing-component(x2);
30
30
  @at-root .ds-force-px#{&} {
31
- @include ds-typography($ds-typography-functional-heading01medium, true);
31
+ @include ds-typography($ds-typography-functional-heading01semibold, true);
32
32
  }
33
33
  }
34
34
  }
package/components/buddy-menu/buddy-menu.scss CHANGED
@@ -64,7 +64,7 @@
64
64
  .ds-buddy-menu__account-title,
65
65
  .ds-buddy-menu__addons-title,
66
66
  .ds-buddy-menu__links-title {
67
- @include ds-typography($ds-typography-functional-body02medium);
67
+ @include ds-typography($ds-typography-functional-body02semibold);
68
68
  color: $ds-color-text-primary;
69
69
  margin: ds-spacing-component(0 0 x1);
70
70
  }
@@ -103,7 +103,7 @@
103
103
  .ds-buddy-menu__account-title,
104
104
  .ds-buddy-menu__addons-title,
105
105
  .ds-buddy-menu__links-title {
106
- @include ds-typography($ds-typography-functional-body02medium, true);
106
+ @include ds-typography($ds-typography-functional-body02semibold, true);
107
107
  }
108
108
  .ds-buddy-menu__addons-list a {
109
109
  @include ds-typography($ds-typography-functional-body02regular, true);
package/components/byline/byline.scss CHANGED
@@ -101,9 +101,12 @@ $ds-byline__image-size: 44px;
101
101
  word-break: break-all;
102
102
 
103
103
  .ds-byline__title {
104
- @include ds-typography($ds-typography-functional-heading01medium);
104
+ @include ds-typography($ds-typography-functional-heading01semibold);
105
105
  @at-root .ds-force-px#{&} {
106
- @include ds-typography($ds-typography-functional-heading01medium, true);
106
+ @include ds-typography(
107
+ $ds-typography-functional-heading01semibold,
108
+ true
109
+ );
107
110
  }
108
111
  color: $ds-color-text-primary;
109
112
  text-align: left;
package/components/disclaimer/disclaimer.scss CHANGED
@@ -33,10 +33,10 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
33
33
  }
34
34
 
35
35
  strong {
36
- @include ds-typography($ds-typography-functional-body01medium);
36
+ @include ds-typography($ds-typography-functional-body01semibold);
37
37
  color: $ds-color-text-primary;
38
38
  @at-root .ds-force-px#{&} {
39
- @include ds-typography($ds-typography-functional-body01medium, true);
39
+ @include ds-typography($ds-typography-functional-body01semibold, true);
40
40
  }
41
41
  }
42
42
  }
package/components/factbox/factbox.scss CHANGED
@@ -52,9 +52,9 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
52
52
  @include ds-link($ds-link-article-body);
53
53
  }
54
54
  strong {
55
- @include ds-typography($ds-typography-functional-body02medium);
55
+ @include ds-typography($ds-typography-functional-body02semibold);
56
56
  @at-root .ds-force-px#{&} {
57
- @include ds-typography($ds-typography-functional-body02medium, true);
57
+ @include ds-typography($ds-typography-functional-body02semibold, true);
58
58
  }
59
59
  }
60
60
  img {
package/foundations/typography/fontDefinitions.scss CHANGED
@@ -249,7 +249,7 @@ $dnSans: (
249
249
  fontFamily: DNSansVF,
250
250
  sources: (
251
251
  (
252
- file: "DNSans10-Variable.woff2",
252
+ file: "DNSans11-Variable.woff2",
253
253
  format: "woff2-variations",
254
254
  ),
255
255
  ),
@@ -260,11 +260,11 @@ $dnSans: (
260
260
  fontFamily: DNSans,
261
261
  sources: (
262
262
  (
263
- file: "DNSans10-Light.woff2",
263
+ file: "DNSans11-Light.woff2",
264
264
  format: "woff2",
265
265
  ),
266
266
  (
267
- file: "DNSans10-Light.woff",
267
+ file: "DNSans11-Light.woff",
268
268
  format: "woff",
269
269
  ),
270
270
  ),
@@ -275,11 +275,11 @@ $dnSans: (
275
275
  fontFamily: DNSans,
276
276
  sources: (
277
277
  (
278
- file: "DNSans10-LightItalic.woff2",
278
+ file: "DNSans11-LightItalic.woff2",
279
279
  format: "woff2",
280
280
  ),
281
281
  (
282
- file: "DNSans10-LightItalic.woff",
282
+ file: "DNSans11-LightItalic.woff",
283
283
  format: "woff",
284
284
  ),
285
285
  ),
@@ -291,11 +291,11 @@ $dnSans: (
291
291
  fontFamily: DNSans,
292
292
  sources: (
293
293
  (
294
- file: "DNSans10-Regular.woff2",
294
+ file: "DNSans11-Regular.woff2",
295
295
  format: "woff2",
296
296
  ),
297
297
  (
298
- file: "DNSans10-Regular.woff",
298
+ file: "DNSans11-Regular.woff",
299
299
  format: "woff",
300
300
  ),
301
301
  ),
@@ -306,11 +306,11 @@ $dnSans: (
306
306
  fontFamily: DNSans,
307
307
  sources: (
308
308
  (
309
- file: "DNSans10-RegularItalic.woff2",
309
+ file: "DNSans11-RegularItalic.woff2",
310
310
  format: "woff2",
311
311
  ),
312
312
  (
313
- file: "DNSans10-RegularItalic.woff",
313
+ file: "DNSans11-RegularItalic.woff",
314
314
  format: "woff",
315
315
  ),
316
316
  ),
@@ -322,11 +322,11 @@ $dnSans: (
322
322
  fontFamily: DNSans,
323
323
  sources: (
324
324
  (
325
- file: "DNSans10-Medium.woff2",
325
+ file: "DNSans11-Medium.woff2",
326
326
  format: "woff2",
327
327
  ),
328
328
  (
329
- file: "DNSans10-Medium.woff",
329
+ file: "DNSans11-Medium.woff",
330
330
  format: "woff",
331
331
  ),
332
332
  ),
@@ -337,11 +337,11 @@ $dnSans: (
337
337
  fontFamily: DNSans,
338
338
  sources: (
339
339
  (
340
- file: "DNSans10-MediumItalic.woff2",
340
+ file: "DNSans11-MediumItalic.woff2",
341
341
  format: "woff2",
342
342
  ),
343
343
  (
344
- file: "DNSans10-MediumItalic.woff",
344
+ file: "DNSans11-MediumItalic.woff",
345
345
  format: "woff",
346
346
  ),
347
347
  ),
@@ -353,11 +353,42 @@ $dnSans: (
353
353
  fontFamily: DNSans,
354
354
  sources: (
355
355
  (
356
- file: "DNSans10-Bold.woff2",
356
+ file: "DNSans11-SemiBold.woff2",
357
357
  format: "woff2",
358
358
  ),
359
359
  (
360
- file: "DNSans10-Bold.woff",
360
+ file: "DNSans11-SemiBold.woff",
361
+ format: "woff",
362
+ ),
363
+ ),
364
+ fontWeight: 600,
365
+ fontDisplay: swap,
366
+ ),
367
+ (
368
+ fontFamily: DNSans,
369
+ sources: (
370
+ (
371
+ file: "DNSans11-SemiBoldItalic.woff2",
372
+ format: "woff2",
373
+ ),
374
+ (
375
+ file: "DNSans11-SemiBoldItalic.woff",
376
+ format: "woff",
377
+ ),
378
+ ),
379
+ fontWeight: 600,
380
+ fontStyle: italic,
381
+ fontDisplay: swap,
382
+ ),
383
+ (
384
+ fontFamily: DNSans,
385
+ sources: (
386
+ (
387
+ file: "DNSans11-Bold.woff2",
388
+ format: "woff2",
389
+ ),
390
+ (
391
+ file: "DNSans11-Bold.woff",
361
392
  format: "woff",
362
393
  ),
363
394
  ),
@@ -368,11 +399,11 @@ $dnSans: (
368
399
  fontFamily: DNSans,
369
400
  sources: (
370
401
  (
371
- file: "DNSans10-BoldItalic.woff2",
402
+ file: "DNSans11-BoldItalic.woff2",
372
403
  format: "woff2",
373
404
  ),
374
405
  (
375
- file: "DNSans10-BoldItalic.woff",
406
+ file: "DNSans11-BoldItalic.woff",
376
407
  format: "woff",
377
408
  ),
378
409
  ),
@@ -384,11 +415,11 @@ $dnSans: (
384
415
  fontFamily: DNSans,
385
416
  sources: (
386
417
  (
387
- file: "DNSans10-Black.woff2",
418
+ file: "DNSans11-Black.woff2",
388
419
  format: "woff2",
389
420
  ),
390
421
  (
391
- file: "DNSans10-Black.woff",
422
+ file: "DNSans11-Black.woff",
392
423
  format: "woff",
393
424
  ),
394
425
  ),
@@ -399,11 +430,11 @@ $dnSans: (
399
430
  fontFamily: DNSans,
400
431
  sources: (
401
432
  (
402
- file: "DNSans10-BlackItalic.woff2",
433
+ file: "DNSans11-BlackItalic.woff2",
403
434
  format: "woff2",
404
435
  ),
405
436
  (
406
- file: "DNSans10-BlackItalic.woff",
437
+ file: "DNSans11-BlackItalic.woff",
407
438
  format: "woff",
408
439
  ),
409
440
  ),
package/foundations/variables/spacingLayoutLargeScreen.scss CHANGED
@@ -1,17 +1,10 @@
1
1
  $spacingLayoutLargeScreen: (
2
2
  page-top-small: 32,
3
- page-top-large: 32,
3
+ page-top-large: 48,
4
4
  page-bottom: 32,
5
5
  page-horizontal: 32,
6
6
  gap-vertical-static-medium: 16,
7
7
  gap-vertical-static-large: 32,
8
8
  gap-horizontal-static-small: 8,
9
- gap-vertical-static-small: 8,
10
- x1: 8,
11
- x2: 16,
12
- x3: 24,
13
- x4: 32,
14
- x5: 40,
15
- x6: 48,
16
- x8: 64
9
+ gap-vertical-static-small: 8
17
10
  );
package/foundations/variables/typographyTokensList.scss CHANGED
@@ -1,83 +1,84 @@
1
1
  $ds-typography-expressive-heading01regular: 'expressive-heading01regular';
2
- $ds-typography-expressive-heading01medium: 'expressive-heading01medium';
2
+ $ds-typography-expressive-heading01semibold: 'expressive-heading01semibold';
3
3
  $ds-typography-expressive-heading01bold: 'expressive-heading01bold';
4
4
  $ds-typography-expressive-heading01italicregular: 'expressive-heading01italicregular';
5
- $ds-typography-expressive-heading01italicmedium: 'expressive-heading01italicmedium';
5
+ $ds-typography-expressive-heading01italicsemibold: 'expressive-heading01italicsemibold';
6
6
  $ds-typography-expressive-heading01italicbold: 'expressive-heading01italicbold';
7
7
  $ds-typography-expressive-heading02regular: 'expressive-heading02regular';
8
- $ds-typography-expressive-heading02medium: 'expressive-heading02medium';
8
+ $ds-typography-expressive-heading02semibold: 'expressive-heading02semibold';
9
9
  $ds-typography-expressive-heading02bold: 'expressive-heading02bold';
10
10
  $ds-typography-expressive-heading02italicregular: 'expressive-heading02italicregular';
11
- $ds-typography-expressive-heading02italicmedium: 'expressive-heading02italicmedium';
11
+ $ds-typography-expressive-heading02italicsemibold: 'expressive-heading02italicsemibold';
12
12
  $ds-typography-expressive-heading02italicbold: 'expressive-heading02italicbold';
13
13
  $ds-typography-expressive-heading03regular: 'expressive-heading03regular';
14
- $ds-typography-expressive-heading03medium: 'expressive-heading03medium';
14
+ $ds-typography-expressive-heading03semibold: 'expressive-heading03semibold';
15
15
  $ds-typography-expressive-heading03bold: 'expressive-heading03bold';
16
16
  $ds-typography-expressive-heading03italicregular: 'expressive-heading03italicregular';
17
- $ds-typography-expressive-heading03italicmedium: 'expressive-heading03italicmedium';
17
+ $ds-typography-expressive-heading03italicsemibold: 'expressive-heading03italicsemibold';
18
18
  $ds-typography-expressive-heading03italicbold: 'expressive-heading03italicbold';
19
19
  $ds-typography-expressive-heading04regular: 'expressive-heading04regular';
20
- $ds-typography-expressive-heading04medium: 'expressive-heading04medium';
20
+ $ds-typography-expressive-heading04semibold: 'expressive-heading04semibold';
21
21
  $ds-typography-expressive-heading04bold: 'expressive-heading04bold';
22
22
  $ds-typography-expressive-heading04italicregular: 'expressive-heading04italicregular';
23
- $ds-typography-expressive-heading04italicmedium: 'expressive-heading04italicmedium';
23
+ $ds-typography-expressive-heading04italicsemibold: 'expressive-heading04italicsemibold';
24
24
  $ds-typography-expressive-heading04italicbold: 'expressive-heading04italicbold';
25
25
  $ds-typography-expressive-heading05regular: 'expressive-heading05regular';
26
- $ds-typography-expressive-heading05medium: 'expressive-heading05medium';
26
+ $ds-typography-expressive-heading05semibold: 'expressive-heading05semibold';
27
27
  $ds-typography-expressive-heading05bold: 'expressive-heading05bold';
28
28
  $ds-typography-expressive-heading05italicregular: 'expressive-heading05italicregular';
29
- $ds-typography-expressive-heading05italicmedium: 'expressive-heading05italicmedium';
29
+ $ds-typography-expressive-heading05italicsemibold: 'expressive-heading05italicsemibold';
30
30
  $ds-typography-expressive-heading05italicbold: 'expressive-heading05italicbold';
31
31
  $ds-typography-functional-heading01regular: 'functional-heading01regular';
32
- $ds-typography-functional-heading01medium: 'functional-heading01medium';
32
+ $ds-typography-functional-heading01semibold: 'functional-heading01semibold';
33
33
  $ds-typography-functional-heading01bold: 'functional-heading01bold';
34
34
  $ds-typography-functional-heading02regular: 'functional-heading02regular';
35
- $ds-typography-functional-heading02medium: 'functional-heading02medium';
35
+ $ds-typography-functional-heading02semibold: 'functional-heading02semibold';
36
36
  $ds-typography-functional-heading02bold: 'functional-heading02bold';
37
37
  $ds-typography-functional-heading03regular: 'functional-heading03regular';
38
- $ds-typography-functional-heading03medium: 'functional-heading03medium';
38
+ $ds-typography-functional-heading03semibold: 'functional-heading03semibold';
39
39
  $ds-typography-functional-heading03bold: 'functional-heading03bold';
40
40
  $ds-typography-functional-heading04regular: 'functional-heading04regular';
41
- $ds-typography-functional-heading04medium: 'functional-heading04medium';
41
+ $ds-typography-functional-heading04semibold: 'functional-heading04semibold';
42
42
  $ds-typography-functional-heading04bold: 'functional-heading04bold';
43
43
  $ds-typography-functional-heading05regular: 'functional-heading05regular';
44
- $ds-typography-functional-heading05medium: 'functional-heading05medium';
44
+ $ds-typography-functional-heading05semibold: 'functional-heading05semibold';
45
45
  $ds-typography-functional-heading05bold: 'functional-heading05bold';
46
- $ds-typography-expressive-paragraph01regular: 'expressive-paragraph01regular';
47
- $ds-typography-expressive-paragraph01medium: 'expressive-paragraph01medium';
48
- $ds-typography-expressive-paragraph01bold: 'expressive-paragraph01bold';
49
- $ds-typography-expressive-paragraph01italicregular: 'expressive-paragraph01italicregular';
50
- $ds-typography-expressive-paragraph01italicmedium: 'expressive-paragraph01italicmedium';
51
- $ds-typography-expressive-paragraph01italicbold: 'expressive-paragraph01italicbold';
46
+ $ds-typography-expressive-preamble01regular: 'expressive-preamble01regular';
47
+ $ds-typography-expressive-preamble01semibold: 'expressive-preamble01semibold';
48
+ $ds-typography-expressive-preamble01bold: 'expressive-preamble01bold';
49
+ $ds-typography-expressive-preamble01italicregular: 'expressive-preamble01italicregular';
50
+ $ds-typography-expressive-preamble01italicsemibold: 'expressive-preamble01italicsemibold';
51
+ $ds-typography-expressive-preamble01italicbold: 'expressive-preamble01italicbold';
52
52
  $ds-typography-expressive-body01regular: 'expressive-body01regular';
53
- $ds-typography-expressive-body01medium: 'expressive-body01medium';
53
+ $ds-typography-expressive-body01semibold: 'expressive-body01semibold';
54
54
  $ds-typography-expressive-body01bold: 'expressive-body01bold';
55
55
  $ds-typography-expressive-body01italicregular: 'expressive-body01italicregular';
56
- $ds-typography-expressive-body01italicmedium: 'expressive-body01italicmedium';
56
+ $ds-typography-expressive-body01italicsemibold: 'expressive-body01italicsemibold';
57
57
  $ds-typography-expressive-body01italicbold: 'expressive-body01italicbold';
58
58
  $ds-typography-expressive-body02regular: 'expressive-body02regular';
59
- $ds-typography-expressive-body02medium: 'expressive-body02medium';
59
+ $ds-typography-expressive-body02semibold: 'expressive-body02semibold';
60
60
  $ds-typography-expressive-body02bold: 'expressive-body02bold';
61
61
  $ds-typography-expressive-body02italicregular: 'expressive-body02italicregular';
62
- $ds-typography-expressive-body02italicmedium: 'expressive-body02italicmedium';
62
+ $ds-typography-expressive-body02italicsemibold: 'expressive-body02italicsemibold';
63
63
  $ds-typography-expressive-body02italicbold: 'expressive-body02italicbold';
64
64
  $ds-typography-functional-body01regular: 'functional-body01regular';
65
- $ds-typography-functional-body01medium: 'functional-body01medium';
65
+ $ds-typography-functional-body01semibold: 'functional-body01semibold';
66
66
  $ds-typography-functional-body01bold: 'functional-body01bold';
67
67
  $ds-typography-functional-body02regular: 'functional-body02regular';
68
- $ds-typography-functional-body02medium: 'functional-body02medium';
68
+ $ds-typography-functional-body02semibold: 'functional-body02semibold';
69
69
  $ds-typography-functional-body02bold: 'functional-body02bold';
70
70
  $ds-typography-functional-body03regular: 'functional-body03regular';
71
- $ds-typography-functional-body03medium: 'functional-body03medium';
71
+ $ds-typography-functional-body03semibold: 'functional-body03semibold';
72
72
  $ds-typography-functional-body03bold: 'functional-body03bold';
73
73
  $ds-typography-functional-meta01regular: 'functional-meta01regular';
74
- $ds-typography-functional-meta01medium: 'functional-meta01medium';
74
+ $ds-typography-functional-meta01semibold: 'functional-meta01semibold';
75
75
  $ds-typography-functional-meta01bold: 'functional-meta01bold';
76
76
  $ds-typography-functional-meta02regular: 'functional-meta02regular';
77
- $ds-typography-functional-meta02medium: 'functional-meta02medium';
77
+ $ds-typography-functional-meta02semibold: 'functional-meta02semibold';
78
78
  $ds-typography-functional-meta02bold: 'functional-meta02bold';
79
79
  $ds-typography-detailstandard-button: 'detailstandard-button';
80
80
  $ds-typography-detailbottom-nav: 'detailbottom-nav';
81
81
  $ds-typography-detaildropcap: 'detaildropcap';
82
82
  $ds-typography-detailstandard-button-small: 'detailstandard-button-small';
83
83
  $ds-typography-detailarticle-label: 'detailarticle-label';
84
+ $ds-typography-detailmedryckare: 'detailmedryckare';