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

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 (56) hide show
  1. package/CHANGELOG.md +166 -0
  2. package/README.md +1 -1
  3. package/assets/article-image/article-image.njk +34 -0
  4. package/assets/article-image/article-image.scss +6 -0
  5. package/assets/form-field/form-field.scss +5 -9
  6. package/components/article-body-image/README.md +42 -0
  7. package/components/article-body-image/article-body-image.njk +19 -0
  8. package/components/article-body-image/article-body-image.scss +8 -0
  9. package/components/article-top-image/README.md +40 -0
  10. package/components/article-top-image/article-top-image.njk +19 -0
  11. package/components/article-top-image/article-top-image.scss +6 -0
  12. package/components/badge/badge.scss +5 -9
  13. package/components/blocked-content/blocked-content.scss +6 -6
  14. package/components/buddy-menu/buddy-menu.scss +14 -21
  15. package/components/button/button.scss +22 -19
  16. package/components/button-toggle/button-toggle.scss +22 -21
  17. package/components/byline/byline.scss +11 -8
  18. package/components/checkbox/checkbox.scss +10 -14
  19. package/components/disclaimer/disclaimer.scss +26 -12
  20. package/components/divider/divider.scss +1 -1
  21. package/components/factbox/factbox.scss +11 -9
  22. package/components/footer/footer.scss +14 -20
  23. package/components/icon-button/icon-button.scss +3 -3
  24. package/components/icon-button-toggle/icon-button-toggle.scss +3 -3
  25. package/components/image-caption/README.md +38 -0
  26. package/components/image-caption/image-caption.njk +25 -0
  27. package/components/image-caption/image-caption.scss +15 -0
  28. package/components/list-item/list-item.scss +9 -9
  29. package/components/quote/quote.scss +2 -2
  30. package/components/radio-button/radio-button.scss +10 -15
  31. package/components/switch/switch.scss +2 -2
  32. package/components/text-button/text-button.scss +8 -13
  33. package/components/text-button-toggle/text-button-toggle.scss +4 -10
  34. package/components/text-input/text-input.scss +20 -24
  35. package/components/thematic-break/thematic-break.scss +1 -1
  36. package/components/video-caption/README.md +37 -0
  37. package/components/video-caption/video-caption.njk +26 -0
  38. package/components/video-caption/video-caption.scss +18 -0
  39. package/foundations/helpers/README-links.md +1 -1
  40. package/foundations/helpers/README-spacing.md +48 -10
  41. package/foundations/helpers/spacing.scss +3 -1
  42. package/foundations/typography/fontDefinitions.scss +106 -60
  43. package/foundations/variables/colorsCssVariables.scss +3 -0
  44. package/foundations/variables/colorsDnDarkTokens.scss +4 -1
  45. package/foundations/variables/colorsDnLightTokens.scss +3 -0
  46. package/foundations/variables/spacingComponentList.scss +10 -0
  47. package/foundations/variables/spacingLayout.scss +1 -0
  48. package/foundations/variables/spacingLayoutLargeScreen.scss +3 -9
  49. package/foundations/variables/spacingLayoutList.scss +9 -0
  50. package/foundations/variables/typographyTokensList.scss +31 -30
  51. package/foundations/variables/typographyTokensScreenLarge.scss +167 -161
  52. package/foundations/variables/typographyTokensScreenSmall.scss +189 -183
  53. package/package.json +2 -2
  54. package/tokens/colors-css-variables.json +3 -0
  55. package/tokens/spacing-component-list.json +12 -0
  56. package/tokens/spacing-layout-list.json +11 -0
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';