@bonniernews/dn-design-system-web 25.0.5 → 25.0.6-beta.1

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 (107) hide show
  1. package/assets/form-field/form-field.scss +6 -6
  2. package/assets/teaser/teaser.scss +5 -5
  3. package/components/article-top-image/article-top-image.scss +1 -1
  4. package/components/badge/badge.scss +5 -5
  5. package/components/blocked-content/blocked-content.scss +9 -9
  6. package/components/buddy-menu/buddy-menu.scss +15 -15
  7. package/components/button/button.scss +49 -33
  8. package/components/checkbox/checkbox.scss +9 -9
  9. package/components/disclaimer/disclaimer.scss +10 -10
  10. package/components/divider/divider.scss +3 -3
  11. package/components/empty-state/empty-state.scss +3 -3
  12. package/components/factbox/factbox.scss +13 -13
  13. package/components/footer/footer.scss +16 -16
  14. package/components/game-header/game-header.scss +6 -6
  15. package/components/group-header/group-header.scss +6 -6
  16. package/components/icon-with-wrapper/icon-with-wrapper.njk +1 -1
  17. package/components/image-caption/image-caption.scss +3 -3
  18. package/components/link-box/link-box-item.scss +4 -4
  19. package/components/link-box/link-box.scss +1 -1
  20. package/components/list-item/list-item.scss +24 -24
  21. package/components/modal/modal.scss +4 -4
  22. package/components/pagination/pagination.scss +4 -4
  23. package/components/pictogram/pictogram.scss +3 -3
  24. package/components/profile-header/profile-header.scss +7 -7
  25. package/components/quote/quote.scss +2 -2
  26. package/components/radio-button/radio-button.scss +9 -9
  27. package/components/spinner/spinner.scss +14 -14
  28. package/components/switch/switch.scss +13 -13
  29. package/components/tag-header/tag-header.scss +8 -8
  30. package/components/teaser-centered/teaser-centered.scss +1 -1
  31. package/components/teaser-footer/teaser-footer.scss +5 -5
  32. package/components/teaser-image/teaser-image.scss +4 -4
  33. package/components/teaser-large/teaser-large.scss +7 -6
  34. package/components/teaser-list-vertical/teaser-list-vertical.scss +8 -8
  35. package/components/teaser-longlife/teaser-longlife.scss +7 -7
  36. package/components/teaser-native/teaser-native.scss +19 -19
  37. package/components/teaser-onsite/teaser-onsite.scss +2 -2
  38. package/components/teaser-package/teaser-package.scss +2 -2
  39. package/components/teaser-right-now/teaser-right-now.scss +1 -1
  40. package/components/teaser-slideshow/teaser-slideshow.scss +3 -3
  41. package/components/teaser-split/teaser-split.scss +5 -5
  42. package/components/teaser-standard/teaser-standard.scss +5 -5
  43. package/components/teaser-swipe-card/teaser-swipe-card.scss +10 -10
  44. package/components/teaser-tipsa/teaser-tipsa.scss +2 -2
  45. package/components/text-button/text-button.scss +7 -7
  46. package/components/text-button-toggle/text-button-toggle.scss +7 -7
  47. package/components/text-input/text-input.scss +22 -23
  48. package/components/tooltip/tooltip.scss +5 -5
  49. package/components/video-caption/video-caption.scss +4 -4
  50. package/components/vip-badge/vip-badge.scss +10 -10
  51. package/foundations/colors.scss +6 -18
  52. package/foundations/cssVariables.scss +1 -0
  53. package/foundations/gradients.scss +25 -0
  54. package/foundations/helpers/colors.scss +10 -18
  55. package/foundations/helpers/forward.helpers.scss +1 -0
  56. package/foundations/helpers/gradients.scss +33 -0
  57. package/foundations/helpers/hover.scss +2 -2
  58. package/foundations/helpers/links.scss +4 -3
  59. package/foundations/helpers/metrics.scss +4 -6
  60. package/foundations/helpers/shadows.scss +5 -5
  61. package/foundations/helpers/typography.scss +11 -12
  62. package/foundations/shadows.scss +4 -4
  63. package/foundations/variables/border-width.scss +5 -0
  64. package/foundations/variables/colorsCssVariables.scss +84 -82
  65. package/foundations/variables/colorsDnDark.scss +89 -0
  66. package/foundations/variables/colorsDnLight.scss +89 -0
  67. package/foundations/variables/gradientsDnDark.scss +46 -0
  68. package/foundations/variables/gradientsDnLight.scss +46 -0
  69. package/foundations/variables/gradientsList.scss +4 -0
  70. package/foundations/variables/radius.scss +6 -0
  71. package/foundations/variables/shadowsDnDark.scss +30 -0
  72. package/foundations/variables/shadowsDnLight.scss +30 -0
  73. package/foundations/variables/shadowsList.scss +4 -0
  74. package/foundations/variables/spacingBase.scss +1 -0
  75. package/foundations/variables/spacingBaseList.scss +1 -0
  76. package/foundations/variables/spacingDetail.scss +3 -16
  77. package/foundations/variables/spacingDetailList.scss +3 -16
  78. package/foundations/variables/spacingDetailScreenLarge.scss +3 -16
  79. package/foundations/variables/typographyLetterSpacing.scss +1 -1
  80. package/foundations/variables/typographyLineHeight.scss +3 -3
  81. package/foundations/variables/typographyList.scss +54 -0
  82. package/foundations/variables/{typographyTokensScreenExtraLarge.scss → typographyScreenExtraLarge.scss} +267 -302
  83. package/foundations/variables/typographyScreenLarge.scss +387 -0
  84. package/foundations/variables/{typographyTokensScreenSmall.scss → typographyScreenSmall.scss} +271 -306
  85. package/package.json +2 -2
  86. package/preact/components/icon-with-wrapper/icon-with-wrapper.js +86 -84
  87. package/preact/components/icon-with-wrapper/icon-with-wrapper.js.map +3 -3
  88. package/types-lib/ds-color.d.ts +97 -93
  89. package/variables/colors-dark-mode.json +109 -0
  90. package/variables/colors-light-mode.json +109 -0
  91. package/variables/gradients-dark-mode.json +58 -0
  92. package/variables/gradients-light-mode.json +58 -0
  93. package/variables/typography-list.json +56 -0
  94. package/foundations/variables/colorsDnDarkTokens.scss +0 -88
  95. package/foundations/variables/colorsDnLightTokens.scss +0 -87
  96. package/foundations/variables/decorations.scss +0 -1
  97. package/foundations/variables/metrics.scss +0 -12
  98. package/foundations/variables/shadowsDnDarkTokens.scss +0 -34
  99. package/foundations/variables/shadowsDnLightTokens.scss +0 -34
  100. package/foundations/variables/shadowsTokensList.scss +0 -4
  101. package/foundations/variables/typographyTokensList.scss +0 -59
  102. package/foundations/variables/typographyTokensScreenLarge.scss +0 -422
  103. package/tokens/colors-dark-mode.json +0 -106
  104. package/tokens/colors-light-mode.json +0 -105
  105. package/tokens/typography-list.json +0 -61
  106. package/variables/shadows-css-variables.json +0 -6
  107. /package/{tokens → variables}/icon-list.json +0 -0
package/foundations/variables/radius.scss ADDED
@@ -0,0 +1,6 @@
1
+ $radius: (
2
+ 100: 16,
3
+ 012: 2,
4
+ 025: 4,
5
+ 050: 8
6
+ );
package/foundations/variables/shadowsDnDark.scss ADDED
@@ -0,0 +1,30 @@
1
+ $shadowsDnDark: (
2
+ elevation-xs: (
3
+ x: 0,
4
+ y: 0,
5
+ blur: 0,
6
+ spread: 0,
7
+ color: #0505051a
8
+ ),
9
+ elevation-sm: (
10
+ x: 0,
11
+ y: 0,
12
+ blur: 0,
13
+ spread: 0,
14
+ color: #0505051a
15
+ ),
16
+ elevation-md: (
17
+ x: 0,
18
+ y: 0,
19
+ blur: 0,
20
+ spread: 0,
21
+ color: #0505051a
22
+ ),
23
+ elevation-lg: (
24
+ x: 0,
25
+ y: 0,
26
+ blur: 0,
27
+ spread: 0,
28
+ color: #0000001a
29
+ )
30
+ );
package/foundations/variables/shadowsDnLight.scss ADDED
@@ -0,0 +1,30 @@
1
+ $shadowsDnLight: (
2
+ elevation-xs: (
3
+ x: 0,
4
+ y: 1,
5
+ blur: 2,
6
+ spread: 1,
7
+ color: #0505051a
8
+ ),
9
+ elevation-sm: (
10
+ x: 0,
11
+ y: 2,
12
+ blur: 4,
13
+ spread: 1,
14
+ color: #0505051a
15
+ ),
16
+ elevation-md: (
17
+ x: 0,
18
+ y: 4,
19
+ blur: 8,
20
+ spread: 0,
21
+ color: #0505051a
22
+ ),
23
+ elevation-lg: (
24
+ x: 0,
25
+ y: 4,
26
+ blur: 16,
27
+ spread: 0,
28
+ color: #0000001a
29
+ )
30
+ );
package/foundations/variables/shadowsList.scss ADDED
@@ -0,0 +1,4 @@
1
+ $ds-shadow-elevation-xs: --ds-shadow-elevation-xs;
2
+ $ds-shadow-elevation-sm: --ds-shadow-elevation-sm;
3
+ $ds-shadow-elevation-md: --ds-shadow-elevation-md;
4
+ $ds-shadow-elevation-lg: --ds-shadow-elevation-lg;
package/foundations/variables/spacingBase.scss CHANGED
@@ -8,6 +8,7 @@ $spacingBase: (
8
8
  350: 56,
9
9
  400: 64,
10
10
  500: 80,
11
+ 012: 2,
11
12
  025: 4,
12
13
  050: 8,
13
14
  075: 12
package/foundations/variables/spacingBaseList.scss CHANGED
@@ -7,6 +7,7 @@ $ds-s-300: 300;
7
7
  $ds-s-350: 350;
8
8
  $ds-s-400: 400;
9
9
  $ds-s-500: 500;
10
+ $ds-s-012: 012;
10
11
  $ds-s-025: 025;
11
12
  $ds-s-050: 050;
12
13
  $ds-s-075: 075;
package/foundations/variables/spacingDetail.scss CHANGED
@@ -1,18 +1,5 @@
1
1
  $spacingDetail: (
2
- outer: 16,
3
- outer-negative: -16,
4
- page-horizontal: 16,
5
- page-top-small: 16,
6
- gap-vertical-static-medium: 16,
7
- gap-vertical-medium: 16,
8
- gap-vertical-static-large: 32,
9
- gap-vertical-static-small: 8,
10
- page-top-xsmall: 4,
11
- teaser-vertical-small: 8,
12
- teaser-horizontal: 16,
13
- teaser-vertical-medium: 12,
14
- direkt-header-bottom: 48,
15
- spacing-sm: 4,
16
- spacing-md: 8,
17
- spacing-lg: 16
2
+ sm: 4,
3
+ md: 8,
4
+ lg: 16
18
5
  );
package/foundations/variables/spacingDetailList.scss CHANGED
@@ -1,16 +1,3 @@
1
- $ds-s-outer: outer;
2
- $ds-s-outer-negative: outer-negative;
3
- $ds-s-page-horizontal: page-horizontal;
4
- $ds-s-page-top-small: page-top-small;
5
- $ds-s-gap-vertical-static-medium: gap-vertical-static-medium;
6
- $ds-s-gap-vertical-medium: gap-vertical-medium;
7
- $ds-s-gap-vertical-static-large: gap-vertical-static-large;
8
- $ds-s-gap-vertical-static-small: gap-vertical-static-small;
9
- $ds-s-page-top-xsmall: page-top-xsmall;
10
- $ds-s-teaser-vertical-small: teaser-vertical-small;
11
- $ds-s-teaser-horizontal: teaser-horizontal;
12
- $ds-s-teaser-vertical-medium: teaser-vertical-medium;
13
- $ds-s-direkt-header-bottom: direkt-header-bottom;
14
- $ds-s-spacing-sm: spacing-sm;
15
- $ds-s-spacing-md: spacing-md;
16
- $ds-s-spacing-lg: spacing-lg;
1
+ $ds-s-sm: sm;
2
+ $ds-s-md: md;
3
+ $ds-s-lg: lg;
package/foundations/variables/spacingDetailScreenLarge.scss CHANGED
@@ -1,18 +1,5 @@
1
1
  $spacingDetailScreenLarge: (
2
- page-top-small: 32,
3
- page-horizontal: 32,
4
- gap-vertical-medium: 32,
5
- teaser-vertical-small: 12,
6
- teaser-horizontal: 16,
7
- teaser-vertical-medium: 16,
8
- direkt-header-bottom: 64,
9
- spacing-sm: 8,
10
- spacing-md: 16,
11
- spacing-lg: 32,
12
- outer: 16,
13
- outer-negative: -16,
14
- gap-vertical-static-medium: 16,
15
- gap-vertical-static-large: 32,
16
- gap-vertical-static-small: 8,
17
- page-top-xsmall: 4
2
+ sm: 8,
3
+ md: 16,
4
+ lg: 32
18
5
  );
package/foundations/variables/typographyLetterSpacing.scss CHANGED
@@ -1,3 +1,3 @@
1
1
  $ds-letterspacing-none: 0;
2
2
  $ds-letterspacing-xs: 0.2;
3
- $ds-letterspacing-s: 0.5;
3
+ $ds-letterspacing-sm: 0.5;
package/foundations/variables/typographyLineHeight.scss CHANGED
@@ -1,4 +1,4 @@
1
1
  $ds-lineheight-none: 1;
2
- $ds-lineheight-s: 1.1;
3
- $ds-lineheight-m: 1.2;
4
- $ds-lineheight-l: 1.5;
2
+ $ds-lineheight-sm: 1.1;
3
+ $ds-lineheight-md: 1.2;
4
+ $ds-lineheight-lg: 1.5;
package/foundations/variables/typographyList.scss ADDED
@@ -0,0 +1,54 @@
1
+ $ds-typography-expressive-heading-xxs: 'expressive-heading-xxs';
2
+ $ds-typography-expressive-heading-xs: 'expressive-heading-xs';
3
+ $ds-typography-expressive-heading-sm: 'expressive-heading-sm';
4
+ $ds-typography-expressive-heading-md: 'expressive-heading-md';
5
+ $ds-typography-expressive-heading-lg: 'expressive-heading-lg';
6
+ $ds-typography-expressive-heading-xl: 'expressive-heading-xl';
7
+ $ds-typography-expressive-body-sm: 'expressive-body-sm';
8
+ $ds-typography-expressive-body-md: 'expressive-body-md';
9
+ $ds-typography-expressive-body-lg: 'expressive-body-lg';
10
+ $ds-typography-expressive-ingress-sm: 'expressive-ingress-sm';
11
+ $ds-typography-expressive-ingress-md: 'expressive-ingress-md';
12
+ $ds-typography-functional-heading-xxs: 'functional-heading-xxs';
13
+ $ds-typography-functional-heading-xs: 'functional-heading-xs';
14
+ $ds-typography-functional-heading-sm: 'functional-heading-sm';
15
+ $ds-typography-functional-heading-md: 'functional-heading-md';
16
+ $ds-typography-functional-heading-lg: 'functional-heading-lg';
17
+ $ds-typography-functional-heading-xl: 'functional-heading-xl';
18
+ $ds-typography-functional-label-sm: 'functional-label-sm';
19
+ $ds-typography-functional-label-md: 'functional-label-md';
20
+ $ds-typography-functional-body-sm: 'functional-body-sm';
21
+ $ds-typography-functional-body-md: 'functional-body-md';
22
+ $ds-typography-functional-body-lg: 'functional-body-lg';
23
+ $ds-typography-functional-meta-sm: 'functional-meta-sm';
24
+ $ds-typography-functional-meta-md: 'functional-meta-md';
25
+ $ds-typography-functional-ingress-sm: 'functional-ingress-sm';
26
+ $ds-typography-functional-ingress-md: 'functional-ingress-md';
27
+ $ds-typography-detail-dropcap: 'detail-dropcap';
28
+ $ds-typography-detail-gameheader: 'detail-gameheader';
29
+ $ds-typography-detail-medryckare: 'detail-medryckare';
30
+ $ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
31
+ $ds-typography-detail-direkt-header: 'detail-direkt-header';
32
+ $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
33
+ $ds-typography-detail-teaser-standard-opinion: 'detail-teaser-standard-opinion';
34
+ $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
35
+ $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
36
+ $ds-typography-detail-teaser-large: 'detail-teaser-large';
37
+ $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
38
+ $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
39
+ $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
40
+ $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
41
+ $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
42
+ $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
43
+ $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
44
+ $ds-typography-detail-teaser-breaking: 'detail-teaser-breaking';
45
+ $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
46
+ $ds-typography-detail-teaser-story: 'detail-teaser-story';
47
+ $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
48
+ $ds-typography-detail-article-standard: 'detail-article-standard';
49
+ $ds-typography-detail-article-opinion: 'detail-article-opinion';
50
+ $ds-typography-detail-article-longread: 'detail-article-longread';
51
+ $ds-typography-detail-article-longread-premium: 'detail-article-longread-premium';
52
+ $ds-typography-detail-article-direkt: 'detail-article-direkt';
53
+ $ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
54
+ $ds-typography-detail-article-quote: 'detail-article-quote';