@bonniernews/dn-design-system-web 3.0.0-alpha.75 → 3.0.0-alpha.77

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 (10) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/components/teaser-large/teaser-large.scss +1 -18
  3. package/foundations/variables/colorsCssVariables.scss +1 -0
  4. package/foundations/variables/colorsDnDarkTokens.scss +1 -0
  5. package/foundations/variables/colorsDnLightTokens.scss +1 -0
  6. package/foundations/variables/typographyTokensList.scss +1 -0
  7. package/foundations/variables/typographyTokensScreenLarge.scss +44 -36
  8. package/foundations/variables/typographyTokensScreenSmall.scss +32 -24
  9. package/package.json +1 -1
  10. package/tokens/colors-css-variables.json +1 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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.77](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.76...@bonniernews/dn-design-system-web@3.0.0-alpha.77) (2023-06-01)
7
+
8
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
9
+
10
+
11
+
12
+
13
+
14
+ ## [3.0.0-alpha.76](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.75...@bonniernews/dn-design-system-web@3.0.0-alpha.76) (2023-05-31)
15
+
16
+ **Note:** Version bump only for package @bonniernews/dn-design-system-web
17
+
18
+
19
+
20
+
21
+
6
22
  ## [3.0.0-alpha.75](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.74...@bonniernews/dn-design-system-web@3.0.0-alpha.75) (2023-05-31)
7
23
 
8
24
 
package/components/teaser-large/teaser-large.scss CHANGED
@@ -42,24 +42,7 @@
42
42
  .ds-teaser__title {
43
43
  grid-row: 1;
44
44
  grid-column: 1 / span 1;
45
- @include ds-mq-only-breakpoint(mobile) {
46
- @include ds-typography-without-mq(
47
- $ds-typography-expressive-heading04bold,
48
- mobile
49
- );
50
- }
51
- @include ds-mq-only-breakpoint(tablet) {
52
- @include ds-typography-without-mq(
53
- $ds-typography-expressive-heading04bold,
54
- tablet
55
- );
56
- }
57
- @include ds-mq-only-breakpoint(desktop) {
58
- @include ds-typography-without-mq(
59
- $ds-typography-expressive-heading05bold,
60
- desktop
61
- );
62
- }
45
+ @include ds-typography($ds-typography-expressive-heading04bold);
63
46
  }
64
47
 
65
48
  @include ds-hover(true) {
package/foundations/variables/colorsCssVariables.scss CHANGED
@@ -67,6 +67,7 @@ $ds-color-static-ad-yellow: var(--ds-color-static-ad-yellow);
67
67
  $ds-color-static-neutral-100: var(--ds-color-static-neutral-100);
68
68
  $ds-color-static-neutral-500: var(--ds-color-static-neutral-500);
69
69
  $ds-color-static-red-500: var(--ds-color-static-red-500);
70
+ $ds-color-static-yellow: var(--ds-color-static-yellow);
70
71
  $ds-color-gradient-content-fade-left: var(--ds-color-gradient-content-fade-left);
71
72
  $ds-color-gradient-content-fade-right: var(--ds-color-gradient-content-fade-right);
72
73
  $ds-color-gradient-content-fade-up: var(--ds-color-gradient-content-fade-up);
package/foundations/variables/colorsDnDarkTokens.scss CHANGED
@@ -72,3 +72,4 @@ $ds-hex-dark-static-ad-yellow: #FFEAC2;
72
72
  $ds-hex-dark-static-neutral-100: #EDEDED;
73
73
  $ds-hex-dark-static-neutral-500: #9E9E9E;
74
74
  $ds-hex-dark-static-red-500: #DA000D;
75
+ $ds-hex-dark-static-yellow: #FFE600;
package/foundations/variables/colorsDnLightTokens.scss CHANGED
@@ -67,6 +67,7 @@ $ds-hex-static-ad-yellow: #FFEAC2;
67
67
  $ds-hex-static-neutral-100: #EDEDED;
68
68
  $ds-hex-static-neutral-500: #9E9E9E;
69
69
  $ds-hex-static-red-500: #DA000D;
70
+ $ds-hex-static-yellow: #FFE600;
70
71
  $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
71
72
  $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
72
73
  $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);
package/foundations/variables/typographyTokensList.scss CHANGED
@@ -82,3 +82,4 @@ $ds-typography-detaildropcap: 'detaildropcap';
82
82
  $ds-typography-detailstandard-button-small: 'detailstandard-button-small';
83
83
  $ds-typography-detailarticle-label: 'detailarticle-label';
84
84
  $ds-typography-detailmedryckare: 'detailmedryckare';
85
+ $ds-typography-detailbaota-xl-label: 'detailbaota-xl-label';
package/foundations/variables/typographyTokensScreenLarge.scss CHANGED
@@ -41,39 +41,39 @@ $typographyTokensScreenLarge: (
41
41
  expressive-heading02regular: (
42
42
  fontFamily: "DN Serif",
43
43
  fontWeight: Regular,
44
- fontSize: 22,
45
- lineHeight: 26,
44
+ fontSize: 24,
45
+ lineHeight: 28,
46
46
  paragraphSpacing: 16
47
47
  ),
48
48
  expressive-heading02semibold: (
49
49
  fontFamily: "DN Serif",
50
50
  fontWeight: SemiBold,
51
- fontSize: 22,
52
- lineHeight: 26
51
+ fontSize: 24,
52
+ lineHeight: 28
53
53
  ),
54
54
  expressive-heading02bold: (
55
55
  fontFamily: "DN Serif",
56
56
  fontWeight: Bold,
57
- fontSize: 22,
58
- lineHeight: 26
57
+ fontSize: 24,
58
+ lineHeight: 28
59
59
  ),
60
60
  expressive-heading02italicregular: (
61
- fontSize: 22,
62
- lineHeight: 26,
61
+ fontSize: 24,
62
+ lineHeight: 28,
63
63
  fontWeight: Regular,
64
64
  fontFamily: "DN Serif Italic",
65
65
  fontStyle: italic
66
66
  ),
67
67
  expressive-heading02italicsemibold: (
68
- fontSize: 22,
69
- lineHeight: 26,
68
+ fontSize: 24,
69
+ lineHeight: 28,
70
70
  fontWeight: SemiBold,
71
71
  fontFamily: "DN Serif Italic",
72
72
  fontStyle: italic
73
73
  ),
74
74
  expressive-heading02italicbold: (
75
- fontSize: 22,
76
- lineHeight: 26,
75
+ fontSize: 24,
76
+ lineHeight: 28,
77
77
  fontWeight: Bold,
78
78
  fontFamily: "DN Serif Italic",
79
79
  fontStyle: italic
@@ -81,38 +81,38 @@ $typographyTokensScreenLarge: (
81
81
  expressive-heading03regular: (
82
82
  fontFamily: "DN Serif",
83
83
  fontWeight: Regular,
84
- fontSize: 32,
85
- lineHeight: 36
84
+ fontSize: 36,
85
+ lineHeight: 40
86
86
  ),
87
87
  expressive-heading03semibold: (
88
88
  fontFamily: "DN Serif",
89
89
  fontWeight: SemiBold,
90
- fontSize: 32,
91
- lineHeight: 36
90
+ fontSize: 36,
91
+ lineHeight: 40
92
92
  ),
93
93
  expressive-heading03bold: (
94
94
  fontFamily: "DN Serif",
95
95
  fontWeight: Bold,
96
- fontSize: 32,
97
- lineHeight: 36
96
+ fontSize: 36,
97
+ lineHeight: 40
98
98
  ),
99
99
  expressive-heading03italicregular: (
100
- fontSize: 32,
101
- lineHeight: 36,
100
+ fontSize: 36,
101
+ lineHeight: 40,
102
102
  fontWeight: Regular,
103
103
  fontFamily: "DN Serif Italic",
104
104
  fontStyle: italic
105
105
  ),
106
106
  expressive-heading03italicsemibold: (
107
- fontSize: 32,
108
- lineHeight: 36,
107
+ fontSize: 36,
108
+ lineHeight: 40,
109
109
  fontWeight: SemiBold,
110
110
  fontFamily: "DN Serif Italic",
111
111
  fontStyle: italic
112
112
  ),
113
113
  expressive-heading03italicbold: (
114
- fontSize: 32,
115
- lineHeight: 36,
114
+ fontSize: 36,
115
+ lineHeight: 40,
116
116
  fontWeight: Bold,
117
117
  fontFamily: "DN Serif Italic",
118
118
  fontStyle: italic
@@ -120,38 +120,38 @@ $typographyTokensScreenLarge: (
120
120
  expressive-heading04regular: (
121
121
  fontFamily: "DN Serif",
122
122
  fontWeight: Regular,
123
- fontSize: 48,
124
- lineHeight: 52
123
+ fontSize: 56,
124
+ lineHeight: 60
125
125
  ),
126
126
  expressive-heading04semibold: (
127
127
  fontFamily: "DN Serif",
128
128
  fontWeight: SemiBold,
129
- fontSize: 48,
130
- lineHeight: 52
129
+ fontSize: 56,
130
+ lineHeight: 60
131
131
  ),
132
132
  expressive-heading04bold: (
133
133
  fontFamily: "DN Serif",
134
134
  fontWeight: Bold,
135
- fontSize: 48,
136
- lineHeight: 52
135
+ fontSize: 56,
136
+ lineHeight: 60
137
137
  ),
138
138
  expressive-heading04italicregular: (
139
- fontSize: 48,
140
- lineHeight: 52,
139
+ fontSize: 56,
140
+ lineHeight: 60,
141
141
  fontWeight: Regular,
142
142
  fontFamily: "DN Serif Italic",
143
143
  fontStyle: italic
144
144
  ),
145
145
  expressive-heading04italicsemibold: (
146
- fontSize: 48,
147
- lineHeight: 52,
146
+ fontSize: 56,
147
+ lineHeight: 60,
148
148
  fontWeight: SemiBold,
149
149
  fontFamily: "DN Serif Italic",
150
150
  fontStyle: italic
151
151
  ),
152
152
  expressive-heading04italicbold: (
153
- fontSize: 48,
154
- lineHeight: 52,
153
+ fontSize: 56,
154
+ lineHeight: 60,
155
155
  fontWeight: Bold,
156
156
  fontFamily: "DN Serif Italic",
157
157
  fontStyle: italic
@@ -534,5 +534,13 @@ $typographyTokensScreenLarge: (
534
534
  fontWeight: Regular,
535
535
  fontSize: 16,
536
536
  lineHeight: 22
537
+ ),
538
+ detailbaota-xl-label: (
539
+ fontFamily: "DN Sans",
540
+ fontWeight: Bold,
541
+ lineHeight: 24,
542
+ fontSize: 16,
543
+ textCase: upperCase,
544
+ letterSpacing: 0.7
537
545
  )
538
546
  );
package/foundations/variables/typographyTokensScreenSmall.scss CHANGED
@@ -44,78 +44,78 @@ $typographyTokensScreenSmall: (
44
44
  expressive-heading02regular: (
45
45
  fontFamily: "DN Serif",
46
46
  fontWeight: Regular,
47
- fontSize: 16,
48
- lineHeight: 20
47
+ fontSize: 18,
48
+ lineHeight: 22
49
49
  ),
50
50
  expressive-heading02semibold: (
51
51
  fontFamily: "DN Serif",
52
52
  fontWeight: SemiBold,
53
- fontSize: 16,
54
- lineHeight: 20
53
+ fontSize: 18,
54
+ lineHeight: 22
55
55
  ),
56
56
  expressive-heading02bold: (
57
57
  fontFamily: "DN Serif",
58
58
  fontWeight: Bold,
59
- fontSize: 16,
60
- lineHeight: 20
59
+ fontSize: 18,
60
+ lineHeight: 22
61
61
  ),
62
62
  expressive-heading02italicregular: (
63
63
  fontFamily: "DN Serif Italic",
64
64
  fontWeight: Regular,
65
- fontSize: 16,
66
- lineHeight: 20,
65
+ fontSize: 18,
66
+ lineHeight: 22,
67
67
  fontStyle: italic
68
68
  ),
69
69
  expressive-heading02italicsemibold: (
70
70
  fontFamily: "DN Serif Italic",
71
71
  fontWeight: SemiBold,
72
- fontSize: 16,
73
- lineHeight: 20,
72
+ fontSize: 18,
73
+ lineHeight: 22,
74
74
  fontStyle: italic
75
75
  ),
76
76
  expressive-heading02italicbold: (
77
77
  fontFamily: "DN Serif Italic",
78
78
  fontWeight: Bold,
79
- fontSize: 16,
80
- lineHeight: 20,
79
+ fontSize: 18,
80
+ lineHeight: 22,
81
81
  fontStyle: italic
82
82
  ),
83
83
  expressive-heading03regular: (
84
84
  fontFamily: "DN Serif",
85
85
  fontWeight: Regular,
86
- fontSize: 20,
87
- lineHeight: 24
86
+ fontSize: 22,
87
+ lineHeight: 26
88
88
  ),
89
89
  expressive-heading03semibold: (
90
90
  fontFamily: "DN Serif",
91
91
  fontWeight: SemiBold,
92
- fontSize: 20,
93
- lineHeight: 24
92
+ fontSize: 22,
93
+ lineHeight: 26
94
94
  ),
95
95
  expressive-heading03bold: (
96
96
  fontFamily: "DN Serif",
97
97
  fontWeight: Bold,
98
- fontSize: 20,
99
- lineHeight: 24
98
+ fontSize: 22,
99
+ lineHeight: 26
100
100
  ),
101
101
  expressive-heading03italicregular: (
102
102
  fontFamily: "DN Serif Italic",
103
- fontSize: 20,
104
- lineHeight: 24,
103
+ fontSize: 22,
104
+ lineHeight: 26,
105
105
  fontWeight: Regular,
106
106
  fontStyle: italic
107
107
  ),
108
108
  expressive-heading03italicsemibold: (
109
109
  fontFamily: "DN Serif Italic",
110
- fontSize: 20,
111
- lineHeight: 24,
110
+ fontSize: 22,
111
+ lineHeight: 26,
112
112
  fontWeight: SemiBold,
113
113
  fontStyle: italic
114
114
  ),
115
115
  expressive-heading03italicbold: (
116
116
  fontFamily: "DN Serif Italic",
117
- fontSize: 20,
118
- lineHeight: 24,
117
+ fontSize: 22,
118
+ lineHeight: 26,
119
119
  fontWeight: Bold,
120
120
  fontStyle: italic
121
121
  ),
@@ -539,5 +539,13 @@ $typographyTokensScreenSmall: (
539
539
  fontWeight: Regular,
540
540
  fontSize: 16,
541
541
  lineHeight: 22
542
+ ),
543
+ detailbaota-xl-label: (
544
+ fontFamily: "DN Sans",
545
+ fontWeight: Bold,
546
+ lineHeight: 24,
547
+ fontSize: 16,
548
+ textCase: upperCase,
549
+ letterSpacing: 0.7
542
550
  )
543
551
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bonniernews/dn-design-system-web",
3
- "version": "3.0.0-alpha.75",
3
+ "version": "3.0.0-alpha.77",
4
4
  "description": "DN design system for web.",
5
5
  "main": "index.js",
6
6
  "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",
package/tokens/colors-css-variables.json CHANGED
@@ -68,6 +68,7 @@
68
68
  "static-neutral-100": "var(--ds-color-static-neutral-100)",
69
69
  "static-neutral-500": "var(--ds-color-static-neutral-500)",
70
70
  "static-red-500": "var(--ds-color-static-red-500)",
71
+ "static-yellow": "var(--ds-color-static-yellow)",
71
72
  "gradient-content-fade-left": "var(--ds-color-gradient-content-fade-left)",
72
73
  "gradient-content-fade-right": "var(--ds-color-gradient-content-fade-right)",
73
74
  "gradient-content-fade-up": "var(--ds-color-gradient-content-fade-up)",