@bonniernews/dn-design-system-web 31.0.1-beta.2 → 31.0.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 (22) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/foundations/variables/gradientsDnDark.scss +9 -9
  3. package/foundations/variables/gradientsDnLight.scss +9 -9
  4. package/foundations/variables/gradientsList.scss +1 -1
  5. package/foundations/variables/shadowsDnDark.scss +7 -7
  6. package/foundations/variables/shadowsDnLight.scss +7 -7
  7. package/foundations/variables/shadowsList.scss +1 -1
  8. package/foundations/variables/typographyList.scss +35 -35
  9. package/foundations/variables/typographyScreenExtraLarge.scss +249 -249
  10. package/foundations/variables/typographyScreenLarge.scss +249 -249
  11. package/foundations/variables/typographyScreenSmall.scss +249 -249
  12. package/package.json +1 -1
  13. package/variables/gradients-dark-mode.json +11 -11
  14. package/variables/gradients-light-mode.json +11 -11
  15. package/variables/gradients-list.json +1 -1
  16. package/variables/shadows-list.json +2 -2
  17. package/variables/typography-list.json +35 -35
  18. package/components/teaser-text-on-image/README-UXD.md +0 -0
  19. package/components/teaser-text-on-image/README.md +0 -67
  20. package/components/teaser-text-on-image/teaser-text-on-image.js +0 -53
  21. package/components/teaser-text-on-image/teaser-text-on-image.njk +0 -42
  22. package/components/teaser-text-on-image/teaser-text-on-image.scss +0 -66
package/CHANGELOG.md CHANGED
@@ -4,6 +4,14 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
4
4
 
5
5
 
6
6
 
7
+ ## [31.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.0.0...@bonniernews/dn-design-system-web@31.0.1) (2025-03-12)
8
+
9
+
10
+ ### Maintenance
11
+
12
+ * **foundations:** update variables through figma api ([#1653](https://github.com/BonnierNews/dn-design-system/issues/1653)) ([264ae12](https://github.com/BonnierNews/dn-design-system/commit/264ae12d960da05222ed0ce8a0d73cddac40a08f))
13
+ * prerelease packages ([e00b605](https://github.com/BonnierNews/dn-design-system/commit/e00b6059b85097548056942c49795c5dce2d0b87))
14
+
7
15
  ## [31.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@30.1.1...@bonniernews/dn-design-system-web@31.0.0) (2025-03-06)
8
16
 
9
17
 
package/foundations/variables/gradientsDnDark.scss CHANGED
@@ -1,29 +1,29 @@
1
1
  $gradientsDnDark: (
2
- content-fade-left: (
2
+ content-fade-up: (
3
3
  type: linear,
4
- angle: 270,
4
+ angle: 180,
5
5
  stops: ((
6
- color: #171717,
6
+ color: rgba(23, 23, 23, 0),
7
7
  position: 0
8
8
  ), (
9
- color: rgba(23, 23, 23, 0),
9
+ color: #171717,
10
10
  position: 1
11
11
  ))
12
12
  ),
13
- content-fade-right: (
13
+ content-fade-left: (
14
14
  type: linear,
15
15
  angle: 270,
16
16
  stops: ((
17
- color: rgba(23, 23, 23, 0),
17
+ color: #171717,
18
18
  position: 0
19
19
  ), (
20
- color: #171717,
20
+ color: rgba(23, 23, 23, 0),
21
21
  position: 1
22
22
  ))
23
23
  ),
24
- content-fade-up: (
24
+ content-fade-right: (
25
25
  type: linear,
26
- angle: 180,
26
+ angle: 270,
27
27
  stops: ((
28
28
  color: rgba(23, 23, 23, 0),
29
29
  position: 0
package/foundations/variables/gradientsDnLight.scss CHANGED
@@ -1,29 +1,29 @@
1
1
  $gradientsDnLight: (
2
- content-fade-left: (
2
+ content-fade-up: (
3
3
  type: linear,
4
- angle: 270,
4
+ angle: 180,
5
5
  stops: ((
6
- color: #ffffff,
6
+ color: rgba(255, 255, 255, 0),
7
7
  position: 0
8
8
  ), (
9
- color: rgba(255, 255, 255, 0),
9
+ color: #ffffff,
10
10
  position: 1
11
11
  ))
12
12
  ),
13
- content-fade-right: (
13
+ content-fade-left: (
14
14
  type: linear,
15
15
  angle: 270,
16
16
  stops: ((
17
- color: rgba(255, 255, 255, 0),
17
+ color: #ffffff,
18
18
  position: 0
19
19
  ), (
20
- color: #ffffff,
20
+ color: rgba(255, 255, 255, 0),
21
21
  position: 1
22
22
  ))
23
23
  ),
24
- content-fade-up: (
24
+ content-fade-right: (
25
25
  type: linear,
26
- angle: 180,
26
+ angle: 270,
27
27
  stops: ((
28
28
  color: rgba(255, 255, 255, 0),
29
29
  position: 0
package/foundations/variables/gradientsList.scss CHANGED
@@ -1,4 +1,4 @@
1
+ $ds-gradient-content-fade-up: var(--ds-gradient-content-fade-up);
1
2
  $ds-gradient-content-fade-left: var(--ds-gradient-content-fade-left);
2
3
  $ds-gradient-content-fade-right: var(--ds-gradient-content-fade-right);
3
- $ds-gradient-content-fade-up: var(--ds-gradient-content-fade-up);
4
4
  $ds-gradient-content-fade-down: var(--ds-gradient-content-fade-down);
package/foundations/variables/shadowsDnDark.scss CHANGED
@@ -6,6 +6,13 @@ $shadowsDnDark: (
6
6
  spread: 1,
7
7
  color: rgba(13, 13, 13, 0.25)
8
8
  ),
9
+ elevation-lg: (
10
+ x: 0,
11
+ y: 4,
12
+ blur: 16,
13
+ spread: 0,
14
+ color: rgba(13, 13, 13, 0.25)
15
+ ),
9
16
  elevation-sm: (
10
17
  x: 0,
11
18
  y: 2,
@@ -19,12 +26,5 @@ $shadowsDnDark: (
19
26
  blur: 8,
20
27
  spread: 0,
21
28
  color: rgba(13, 13, 13, 0.25)
22
- ),
23
- elevation-lg: (
24
- x: 0,
25
- y: 4,
26
- blur: 16,
27
- spread: 0,
28
- color: rgba(13, 13, 13, 0.25)
29
29
  )
30
30
  );
package/foundations/variables/shadowsDnLight.scss CHANGED
@@ -6,6 +6,13 @@ $shadowsDnLight: (
6
6
  spread: 1,
7
7
  color: rgba(13, 13, 13, 0.15)
8
8
  ),
9
+ elevation-lg: (
10
+ x: 0,
11
+ y: 4,
12
+ blur: 16,
13
+ spread: 0,
14
+ color: rgba(13, 13, 13, 0.15)
15
+ ),
9
16
  elevation-sm: (
10
17
  x: 0,
11
18
  y: 2,
@@ -19,12 +26,5 @@ $shadowsDnLight: (
19
26
  blur: 8,
20
27
  spread: 0,
21
28
  color: rgba(13, 13, 13, 0.15)
22
- ),
23
- elevation-lg: (
24
- x: 0,
25
- y: 4,
26
- blur: 16,
27
- spread: 0,
28
- color: rgba(13, 13, 13, 0.15)
29
29
  )
30
30
  );
package/foundations/variables/shadowsList.scss CHANGED
@@ -1,4 +1,4 @@
1
1
  $ds-shadow-elevation-xs: --ds-shadow-elevation-xs;
2
+ $ds-shadow-elevation-lg: --ds-shadow-elevation-lg;
2
3
  $ds-shadow-elevation-sm: --ds-shadow-elevation-sm;
3
4
  $ds-shadow-elevation-md: --ds-shadow-elevation-md;
4
- $ds-shadow-elevation-lg: --ds-shadow-elevation-lg;
package/foundations/variables/typographyList.scss CHANGED
@@ -1,54 +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';
1
+ $ds-typography-expressive-ingress-md: 'expressive-ingress-md';
7
2
  $ds-typography-expressive-body-sm: 'expressive-body-sm';
8
- $ds-typography-expressive-body-md: 'expressive-body-md';
9
3
  $ds-typography-expressive-body-lg: 'expressive-body-lg';
4
+ $ds-typography-expressive-heading-xl: 'expressive-heading-xl';
5
+ $ds-typography-expressive-heading-xs: 'expressive-heading-xs';
6
+ $ds-typography-expressive-heading-lg: 'expressive-heading-lg';
7
+ $ds-typography-expressive-heading-md: 'expressive-heading-md';
10
8
  $ds-typography-expressive-ingress-sm: 'expressive-ingress-sm';
11
- $ds-typography-expressive-ingress-md: 'expressive-ingress-md';
9
+ $ds-typography-expressive-heading-xxs: 'expressive-heading-xxs';
10
+ $ds-typography-expressive-heading-sm: 'expressive-heading-sm';
11
+ $ds-typography-expressive-body-md: 'expressive-body-md';
12
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
13
  $ds-typography-functional-heading-lg: 'functional-heading-lg';
17
- $ds-typography-functional-heading-xl: 'functional-heading-xl';
14
+ $ds-typography-functional-heading-xs: 'functional-heading-xs';
15
+ $ds-typography-functional-meta-sm: 'functional-meta-sm';
18
16
  $ds-typography-functional-label-sm: 'functional-label-sm';
19
- $ds-typography-functional-label-md: 'functional-label-md';
17
+ $ds-typography-functional-meta-md: 'functional-meta-md';
18
+ $ds-typography-functional-heading-sm: 'functional-heading-sm';
20
19
  $ds-typography-functional-body-sm: 'functional-body-sm';
20
+ $ds-typography-functional-ingress-md: 'functional-ingress-md';
21
21
  $ds-typography-functional-body-md: 'functional-body-md';
22
+ $ds-typography-functional-heading-md: 'functional-heading-md';
23
+ $ds-typography-functional-label-md: 'functional-label-md';
24
+ $ds-typography-functional-heading-xl: 'functional-heading-xl';
22
25
  $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
26
  $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
27
  $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
28
  $ds-typography-detail-teaser-longlife: 'detail-teaser-longlife';
44
29
  $ds-typography-detail-teaser-centrerad: 'detail-teaser-centrerad';
45
- $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
30
+ $ds-typography-detail-teaser-standard: 'detail-teaser-standard';
31
+ $ds-typography-detail-teaser-large-compact: 'detail-teaser-large-compact';
32
+ $ds-typography-detail-teaser-baotaxl: 'detail-teaser-baotaxl';
46
33
  $ds-typography-detail-teaser-text-i-bild: 'detail-teaser-text-i-bild';
34
+ $ds-typography-detail-teaser-large-opinion: 'detail-teaser-large-opinion';
47
35
  $ds-typography-detail-teaser-large-rightcol: 'detail-teaser-large-rightcol';
36
+ $ds-typography-detail-teaser-standard-compact-opinion: 'detail-teaser-standard-compact-opinion';
37
+ $ds-typography-detail-teaser-twin: 'detail-teaser-twin';
38
+ $ds-typography-detail-teaser-standard-opinion: 'detail-teaser-standard-opinion';
39
+ $ds-typography-detail-teaser-tipsa: 'detail-teaser-tipsa';
40
+ $ds-typography-detail-teaser-storrubrik: 'detail-teaser-storrubrik';
41
+ $ds-typography-detail-teaser-standard-compact: 'detail-teaser-standard-compact';
42
+ $ds-typography-detail-teaser-storrubrik-opinion: 'detail-teaser-storrubrik-opinion';
43
+ $ds-typography-detail-medryckare: 'detail-medryckare';
44
+ $ds-typography-detail-article-quote: 'detail-article-quote';
48
45
  $ds-typography-detail-article-standard: 'detail-article-standard';
49
- $ds-typography-detail-article-opinion: 'detail-article-opinion';
46
+ $ds-typography-detail-article-direkt: 'detail-article-direkt';
50
47
  $ds-typography-detail-article-longread: 'detail-article-longread';
51
48
  $ds-typography-detail-article-longread-premium: 'detail-article-longread-premium';
52
- $ds-typography-detail-article-direkt: 'detail-article-direkt';
53
49
  $ds-typography-detail-article-direct-opinion: 'detail-article-direct-opinion';
54
- $ds-typography-detail-article-quote: 'detail-article-quote';
50
+ $ds-typography-detail-article-opinion: 'detail-article-opinion';
51
+ $ds-typography-detail-mellanrubrik: 'detail-mellanrubrik';
52
+ $ds-typography-detail-direkt-header: 'detail-direkt-header';
53
+ $ds-typography-detail-gameheader: 'detail-gameheader';
54
+ $ds-typography-detail-dropcap: 'detail-dropcap';