@bonniernews/dn-design-system-web 33.0.8 → 34.0.0

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 (28) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/components/button/button.scss +1 -1
  3. package/components/direkt-header/direkt-header.scss +1 -1
  4. package/components/teaser-counter/teaser-counter.scss +1 -1
  5. package/foundations/variables/colorsCssVariables.scss +10 -4
  6. package/foundations/variables/colorsDnDark.scss +24 -18
  7. package/foundations/variables/colorsDnLight.scss +21 -15
  8. package/foundations/variables/gradientsDnDark.scss +12 -12
  9. package/foundations/variables/gradientsDnLight.scss +12 -12
  10. package/foundations/variables/gradientsList.scss +3 -3
  11. package/foundations/variables/shadowsDnDark.scss +7 -7
  12. package/foundations/variables/shadowsDnLight.scss +7 -7
  13. package/foundations/variables/shadowsList.scss +1 -1
  14. package/package.json +1 -1
  15. package/preact/components/icon-with-wrapper/icon-with-wrapper.js +10 -4
  16. package/preact/components/icon-with-wrapper/icon-with-wrapper.js.map +2 -2
  17. package/preact/components/teaser-centered/teaser-centered.js +1 -1
  18. package/preact/components/teaser-centered/teaser-centered.js.map +2 -2
  19. package/preact/components/teaser-large/teaser-large.js +1 -1
  20. package/preact/components/teaser-large/teaser-large.js.map +2 -2
  21. package/types-lib/ds-color.d.ts +10 -4
  22. package/variables/colors-css-variables.json +10 -4
  23. package/variables/colors-dark-mode.json +27 -19
  24. package/variables/colors-light-mode.json +24 -16
  25. package/variables/gradients-dark-mode.json +12 -12
  26. package/variables/gradients-light-mode.json +12 -12
  27. package/variables/gradients-list.json +3 -3
  28. package/variables/shadows-list.json +1 -1
package/variables/colors-light-mode.json CHANGED
@@ -2,7 +2,6 @@
2
2
  "surface": {
3
3
  "foreground": "#f2f2f2",
4
4
  "primary": "#ffffff",
5
- "media": "#000000",
6
5
  "primary-raised-soft": "#f2f2f2",
7
6
  "primary-raised-strong": "#e5e5e5",
8
7
  "primary-elevated": "#ffffff",
@@ -12,11 +11,12 @@
12
11
  "brand": "#da000d",
13
12
  "success": "#3a8352",
14
13
  "culture": "#227ac3",
15
- "breaking": "#300407",
14
+ "breaking": "#320b0e",
16
15
  "overlay": "#05050580",
17
16
  "ad-yellow": "#ffeac6",
18
17
  "native-article": "#ededed",
19
- "quiz": "#ea3e3f"
18
+ "quiz": "#ea3e3f",
19
+ "media": "#000000"
20
20
  },
21
21
  "border": {
22
22
  "primary": "#0505051a",
@@ -46,22 +46,30 @@
46
46
  "gradients": {
47
47
  "primary-start": "#ffffff",
48
48
  "primary-end": "#ffffff00",
49
- "overlay-start": "#24242480",
49
+ "overlay-start": "#242424bf",
50
50
  "overlay-end": "#24242400"
51
51
  },
52
+ "button": {
53
+ "primary-default": "#da000d",
54
+ "primary-hover": "#96171f",
55
+ "primary-pressed": "#96171f",
56
+ "primary-disabled": "#f2f2f2",
57
+ "secondary-filled-default": "#da000d",
58
+ "secondary-filled-hover": "#96171f",
59
+ "secondary-filled-pressed": "#96171f",
60
+ "secondary-filled-disabled": "#f2f2f2"
61
+ },
52
62
  "brand": {
53
- "0": "#fbf4f4",
54
- "100": "#f9eced",
55
- "200": "#f2d9da",
56
- "300": "#f0c2c4",
57
- "400": "#f2888e",
58
- "500": "#fd2330",
59
- "600": "#da000d",
60
- "700": "#af010b",
61
- "800": "#85020a",
62
- "900": "#5a0308",
63
- "1000": "#300407",
64
- "1100": "#1a0506"
63
+ "100": "#ffd0d3",
64
+ "200": "#ffa9ae",
65
+ "300": "#ff757d",
66
+ "400": "#f43434",
67
+ "500": "#da000d",
68
+ "600": "#b8000b",
69
+ "700": "#96171f",
70
+ "800": "#6e1c20",
71
+ "900": "#320b0e",
72
+ "050": "#ffe9ea"
65
73
  },
66
74
  "culture": {
67
75
  "0": "#f4f7fa",
package/variables/gradients-dark-mode.json CHANGED
@@ -1,56 +1,56 @@
1
1
  {
2
- "content-fade-up": {
2
+ "content-fade-down": {
3
3
  "type": "linear",
4
4
  "angle": "180",
5
5
  "stops": [
6
6
  {
7
- "color": "rgba(23, 23, 23, 0)",
7
+ "color": "#171717",
8
8
  "position": 0
9
9
  },
10
10
  {
11
- "color": "#171717",
11
+ "color": "rgba(23, 23, 23, 0)",
12
12
  "position": 1
13
13
  }
14
14
  ]
15
15
  },
16
- "content-fade-left": {
16
+ "content-fade-right": {
17
17
  "type": "linear",
18
18
  "angle": "270",
19
19
  "stops": [
20
20
  {
21
- "color": "#171717",
21
+ "color": "rgba(23, 23, 23, 0)",
22
22
  "position": 0
23
23
  },
24
24
  {
25
- "color": "rgba(23, 23, 23, 0)",
25
+ "color": "#171717",
26
26
  "position": 1
27
27
  }
28
28
  ]
29
29
  },
30
- "content-fade-right": {
30
+ "content-fade-left": {
31
31
  "type": "linear",
32
32
  "angle": "270",
33
33
  "stops": [
34
34
  {
35
- "color": "rgba(23, 23, 23, 0)",
35
+ "color": "#171717",
36
36
  "position": 0
37
37
  },
38
38
  {
39
- "color": "#171717",
39
+ "color": "rgba(23, 23, 23, 0)",
40
40
  "position": 1
41
41
  }
42
42
  ]
43
43
  },
44
- "content-fade-down": {
44
+ "content-fade-up": {
45
45
  "type": "linear",
46
46
  "angle": "180",
47
47
  "stops": [
48
48
  {
49
- "color": "#171717",
49
+ "color": "rgba(23, 23, 23, 0)",
50
50
  "position": 0
51
51
  },
52
52
  {
53
- "color": "rgba(23, 23, 23, 0)",
53
+ "color": "#171717",
54
54
  "position": 1
55
55
  }
56
56
  ]
package/variables/gradients-light-mode.json CHANGED
@@ -1,56 +1,56 @@
1
1
  {
2
- "content-fade-up": {
2
+ "content-fade-down": {
3
3
  "type": "linear",
4
4
  "angle": "180",
5
5
  "stops": [
6
6
  {
7
- "color": "rgba(255, 255, 255, 0)",
7
+ "color": "#ffffff",
8
8
  "position": 0
9
9
  },
10
10
  {
11
- "color": "#ffffff",
11
+ "color": "rgba(255, 255, 255, 0)",
12
12
  "position": 1
13
13
  }
14
14
  ]
15
15
  },
16
- "content-fade-left": {
16
+ "content-fade-right": {
17
17
  "type": "linear",
18
18
  "angle": "270",
19
19
  "stops": [
20
20
  {
21
- "color": "#ffffff",
21
+ "color": "rgba(255, 255, 255, 0)",
22
22
  "position": 0
23
23
  },
24
24
  {
25
- "color": "rgba(255, 255, 255, 0)",
25
+ "color": "#ffffff",
26
26
  "position": 1
27
27
  }
28
28
  ]
29
29
  },
30
- "content-fade-right": {
30
+ "content-fade-left": {
31
31
  "type": "linear",
32
32
  "angle": "270",
33
33
  "stops": [
34
34
  {
35
- "color": "rgba(255, 255, 255, 0)",
35
+ "color": "#ffffff",
36
36
  "position": 0
37
37
  },
38
38
  {
39
- "color": "#ffffff",
39
+ "color": "rgba(255, 255, 255, 0)",
40
40
  "position": 1
41
41
  }
42
42
  ]
43
43
  },
44
- "content-fade-down": {
44
+ "content-fade-up": {
45
45
  "type": "linear",
46
46
  "angle": "180",
47
47
  "stops": [
48
48
  {
49
- "color": "#ffffff",
49
+ "color": "rgba(255, 255, 255, 0)",
50
50
  "position": 0
51
51
  },
52
52
  {
53
- "color": "rgba(255, 255, 255, 0)",
53
+ "color": "#ffffff",
54
54
  "position": 1
55
55
  }
56
56
  ]
package/variables/gradients-list.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
- "content-fade-up": "var(--ds-gradient-content-fade-up)",
3
- "content-fade-left": "var(--ds-gradient-content-fade-left)",
2
+ "content-fade-down": "var(--ds-gradient-content-fade-down)",
4
3
  "content-fade-right": "var(--ds-gradient-content-fade-right)",
5
- "content-fade-down": "var(--ds-gradient-content-fade-down)"
4
+ "content-fade-left": "var(--ds-gradient-content-fade-left)",
5
+ "content-fade-up": "var(--ds-gradient-content-fade-up)"
6
6
  }
package/variables/shadows-list.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
+ "elevation-sm": "--ds-shadow-elevation-sm",
2
3
  "elevation-xs": "--ds-shadow-elevation-xs",
3
4
  "elevation-lg": "--ds-shadow-elevation-lg",
4
- "elevation-sm": "--ds-shadow-elevation-sm",
5
5
  "elevation-md": "--ds-shadow-elevation-md"
6
6
  }