@financial-times/o-teaser 7.0.2 → 7.1.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 (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/package.json +1 -1
  3. package/src/scss/_mixins.scss +1 -0
  4. package/src/scss/elements/_default.scss +5 -5
  5. package/src/scss/themes/_hero.scss +8 -5
  6. package/src/scss/themes/_large.scss +4 -4
  7. package/src/scss/themes/_package.scss +40 -8
  8. package/src/scss/themes/_small.scss +4 -1
  9. package/src/scss/themes/_standard.scss +39 -8
  10. package/src/scss/themes/_top-stories.scss +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## [7.1.0](https://github.com/Financial-Times/origami/compare/o-teaser-v7.0.2...o-teaser-v7.1.0) (2025-04-10)
4
+
5
+
6
+ ### Features
7
+
8
+ * Adjust headline type use-case tokens. ([94de648](https://github.com/Financial-Times/origami/commit/94de648780ab8d8877a7263fc07634fd29d035c8))
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * Correct misc teaser colours ([22a7ebd](https://github.com/Financial-Times/origami/commit/22a7ebdd5352786a8bca3fd70781fd3099831e5f))
14
+
3
15
  ## [7.0.2](https://github.com/Financial-Times/origami/compare/o-teaser-v7.0.1...o-teaser-v7.0.2) (2025-03-25)
4
16
 
5
17
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/o-teaser",
3
- "version": "7.0.2",
3
+ "version": "7.1.0",
4
4
  "description": "Provides styling for teaser elements, which contain information about an article and link through to it",
5
5
  "keywords": [
6
6
  "article",
package/src/scss/_mixins.scss CHANGED
@@ -87,6 +87,7 @@
87
87
  }
88
88
 
89
89
  @mixin _oTeaserElementsTimestamp {
90
+ .o-teaser__timestamp-date,
90
91
  .o-teaser__timestamp {
91
92
  @include _oTeaserTimestamp;
92
93
  }
package/src/scss/elements/_default.scss CHANGED
@@ -56,10 +56,10 @@
56
56
  /// Tag styling.
57
57
  /// Element should be a link, otherwise use _oTeaserMeta
58
58
  @mixin _oTeaserTag {
59
- font-family: oPrivateFoundationGet('o3-type-detail-font-family');
60
- font-size: oPrivateFoundationGet('o3-type-detail-font-size');
61
- font-weight: oPrivateFoundationGet('o3-type-detail-font-weight');
62
- line-height: oPrivateFoundationGet('o3-type-detail-line-height');
59
+ font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
60
+ font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
61
+ font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
62
+ line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
63
63
 
64
64
  color: inherit;
65
65
  text-decoration: none;
@@ -121,7 +121,7 @@
121
121
  }
122
122
 
123
123
  &:visited {
124
- color: $_o-teaser-muted;
124
+ // color: $_o-teaser-muted;
125
125
  }
126
126
  }
127
127
  }
package/src/scss/themes/_hero.scss CHANGED
@@ -188,7 +188,10 @@
188
188
  }
189
189
 
190
190
  .o-teaser__heading {
191
- @include oPrivateTypographyDisplay($scale: 4);
191
+ font-family: oPrivateFoundationGet('o3-type-headline-md-font-family');
192
+ font-size: oPrivateFoundationGet('o3-type-headline-md-font-size');
193
+ font-weight: oPrivateFoundationGet('o3-type-headline-md-font-weight');
194
+ line-height: oPrivateFoundationGet('o3-type-headline-md-line-height');
192
195
  }
193
196
 
194
197
  .o-teaser__meta:after {
@@ -207,10 +210,10 @@
207
210
  /// Hero standalone theme styles
208
211
  @mixin _oTeaserHeroStandalone {
209
212
  .o-teaser__heading {
210
- font-family: oPrivateFoundationGet('o3-type-headline-sm-font-family');
211
- font-size: oPrivateFoundationGet('o3-type-headline-sm-font-size');
212
- font-weight: oPrivateFoundationGet('o3-type-headline-sm-font-weight');
213
- line-height: oPrivateFoundationGet('o3-type-headline-sm-line-height');
213
+ font-family: oPrivateFoundationGet('o3-type-headline-md-font-family');
214
+ font-size: oPrivateFoundationGet('o3-type-headline-md-font-size');
215
+ font-weight: oPrivateFoundationGet('o3-type-headline-md-font-weight');
216
+ line-height: oPrivateFoundationGet('o3-type-headline-md-line-height');
214
217
  }
215
218
 
216
219
  .o-teaser__image-container {
package/src/scss/themes/_large.scss CHANGED
@@ -9,10 +9,10 @@
9
9
  }
10
10
 
11
11
  .o-teaser__heading {
12
- font-family: oPrivateFoundationGet('o3-type-headline-sm-font-family');
13
- font-size: oPrivateFoundationGet('o3-type-headline-sm-font-size');
14
- font-weight: oPrivateFoundationGet('o3-type-headline-sm-font-weight');
15
- line-height: oPrivateFoundationGet('o3-type-headline-sm-line-height');
12
+ font-family: oPrivateFoundationGet('o3-type-headline-md-font-family');
13
+ font-size: oPrivateFoundationGet('o3-type-headline-md-font-size');
14
+ font-weight: oPrivateFoundationGet('o3-type-headline-md-font-weight');
15
+ line-height: oPrivateFoundationGet('o3-type-headline-md-line-height');
16
16
  }
17
17
 
18
18
  .o-teaser__standfirst {
package/src/scss/themes/_package.scss CHANGED
@@ -19,6 +19,7 @@
19
19
  position: relative;
20
20
  top: -50px;
21
21
  background: inherit;
22
+ margin-bottom: 0;
22
23
 
23
24
  &:after {
24
25
  content: '';
@@ -31,7 +32,10 @@
31
32
  }
32
33
 
33
34
  .o-teaser__heading {
34
- @include oPrivateTypographyDisplay($scale: 4);
35
+ font-family: oPrivateFoundationGet('o3-type-headline-md-font-family');
36
+ font-size: oPrivateFoundationGet('o3-type-headline-md-font-size');
37
+ font-weight: oPrivateFoundationGet('o3-type-headline-md-font-weight');
38
+ line-height: oPrivateFoundationGet('o3-type-headline-md-line-height');
35
39
  color: $_o-teaser-base-color;
36
40
  background: inherit;
37
41
  padding: 20px;
@@ -64,11 +68,30 @@
64
68
  color: oPrivateFoundationGet('o3-color-palette-white');
65
69
 
66
70
  a:hover,
67
- a:visited,
68
- &:focus {
69
- $special-report-color: oPrivateFoundationGet(
71
+ a:visited {
72
+ $special-report-color: oPrivateFoundationGet('o3-color-palette-white');
73
+ $special-report-background: oPrivateFoundationGet(
70
74
  'o3-color-palette-claret-70'
71
75
  );
76
+ color: oPrivateColorsMix(
77
+ $special-report-color,
78
+ $special-report-background,
79
+ $percentage: 78
80
+ );
81
+ }
82
+ }
83
+
84
+ .package-teaser__landing-link {
85
+ color: oPrivateFoundationGet('o3-color-palette-white');
86
+
87
+ a {
88
+ color: inherit;
89
+ }
90
+
91
+ a:hover,
92
+ a:visited,
93
+ &:focus {
94
+ $special-report-color: oPrivateFoundationGet('o3-color-palette-white');
72
95
  $special-report-background: oPrivateFoundationGet(
73
96
  'o3-color-palette-claret-70'
74
97
  );
@@ -105,6 +128,18 @@
105
128
  }
106
129
  }
107
130
 
131
+ .package-teaser__landing-link {
132
+ a,
133
+ a:visited {
134
+ color: oPrivateFoundationGet('o3-color-palette-lemon');
135
+ }
136
+
137
+ a:hover,
138
+ &:focus {
139
+ color: oPrivateFoundationGet('o3-color-palette-white');
140
+ }
141
+ }
142
+
108
143
  .o-teaser__timestamp {
109
144
  color: oPrivateFoundationGet('o3-color-palette-white');
110
145
  }
@@ -150,12 +185,9 @@
150
185
  $special-report-color: oPrivateFoundationGet(
151
186
  'o3-color-palette-claret-70'
152
187
  );
153
- $special-report-background: oPrivateFoundationGet(
154
- 'o3-color-palette-claret-70'
155
- );
156
188
  color: oPrivateColorsMix(
157
189
  $special-report-color,
158
- $special-report-background,
190
+ transparent,
159
191
  $percentage: 78
160
192
  );
161
193
  }
package/src/scss/themes/_small.scss CHANGED
@@ -123,7 +123,10 @@
123
123
 
124
124
  .o-teaser__heading,
125
125
  .o-teaser__heading a {
126
- @include oPrivateTypographyDisplay($scale: 2, $weight: 'medium');
126
+ font-family: oPrivateFoundationGet('o3-type-headline-sm-font-family');
127
+ font-size: oPrivateFoundationGet('o3-type-headline-sm-font-size');
128
+ font-weight: oPrivateFoundationGet('o3-type-headline-sm-font-weight');
129
+ line-height: oPrivateFoundationGet('o3-type-headline-sm-line-height');
127
130
  color: oPrivateFoundationGet('o3-color-palette-black');
128
131
  }
129
132
 
package/src/scss/themes/_standard.scss CHANGED
@@ -11,7 +11,11 @@
11
11
  .o-teaser__standfirst a:visited,
12
12
  .o-teaser__tag:hover,
13
13
  .o-teaser__tag:focus {
14
- color: oPrivateColorsMix($inverse-color, $inverse-background, $percentage: 60);
14
+ color: oPrivateColorsMix(
15
+ $inverse-color,
16
+ $inverse-background,
17
+ $percentage: 60
18
+ );
15
19
  }
16
20
 
17
21
  .o-teaser__meta,
@@ -21,8 +25,13 @@
21
25
  }
22
26
 
23
27
  .o-teaser__standfirst,
28
+ .o-teaser__timestamp-date,
24
29
  .o-teaser__timestamp {
25
- color: oPrivateColorsMix($inverse-color, $inverse-background, $percentage: 60);
30
+ color: oPrivateColorsMix(
31
+ $inverse-color,
32
+ $inverse-background,
33
+ $percentage: 60
34
+ );
26
35
  }
27
36
 
28
37
  &.o-teaser--hero .o-teaser__meta:after {
@@ -55,10 +64,17 @@
55
64
  /// Opinion background theme - colours background blue and adjust text
56
65
  @mixin _oTeaserOpinionBackground {
57
66
  $theme-opinion-background: oPrivateFoundationGet('o3-color-palette-sky');
58
- $theme-opinion-color: oPrivateColorsGetTextColor($theme-opinion-background, 100);
67
+ $theme-opinion-color: oPrivateColorsGetTextColor(
68
+ $theme-opinion-background,
69
+ 100
70
+ );
59
71
  .o-teaser__standfirst,
60
72
  .o-teaser__timestamp {
61
- color: oPrivateColorsMix($theme-opinion-color, $theme-opinion-background, $percentage: 60);
73
+ color: oPrivateColorsMix(
74
+ $theme-opinion-color,
75
+ $theme-opinion-background,
76
+ $percentage: 60
77
+ );
62
78
  }
63
79
 
64
80
  &.o-teaser--large {
@@ -83,7 +99,10 @@
83
99
  /// Highlight theme - colours background claret and adjust text colours
84
100
  @mixin _oTeaserHighlight {
85
101
  $theme-highlight-background: oPrivateFoundationGet('o3-color-palette-claret');
86
- $theme-highlight-color: oPrivateColorsGetTextColor($theme-highlight-background, 100);
102
+ $theme-highlight-color: oPrivateColorsGetTextColor(
103
+ $theme-highlight-background,
104
+ 100
105
+ );
87
106
  .o-teaser__heading a:hover,
88
107
  .o-teaser__heading a:focus,
89
108
  .o-teaser__heading a:visited,
@@ -92,17 +111,29 @@
92
111
  .o-teaser__standfirst a:visited,
93
112
  .o-teaser__tag:hover,
94
113
  .o-teaser__tag:focus {
95
- color: oPrivateColorsMix($theme-highlight-color, $theme-highlight-background, $percentage: 73);
114
+ color: oPrivateColorsMix(
115
+ $theme-highlight-color,
116
+ $theme-highlight-background,
117
+ $percentage: 73
118
+ );
96
119
  }
97
120
 
98
121
  .o-teaser__standfirst,
99
122
  .o-teaser__timestamp,
100
123
  .o-teaser__timestamp-prefix:before {
101
- color: oPrivateColorsMix($theme-highlight-color, $theme-highlight-background, $percentage: 80);
124
+ color: oPrivateColorsMix(
125
+ $theme-highlight-color,
126
+ $theme-highlight-background,
127
+ $percentage: 80
128
+ );
102
129
  }
103
130
 
104
131
  .o-teaser__timestamp-prefix:before {
105
- background-color: oPrivateColorsMix(oPrivateFoundationGet('o3-color-palette-white'), $theme-highlight-background, 80);
132
+ background-color: oPrivateColorsMix(
133
+ oPrivateFoundationGet('o3-color-palette-white'),
134
+ $theme-highlight-background,
135
+ 80
136
+ );
106
137
  }
107
138
 
108
139
  &.o-teaser--hero {
package/src/scss/themes/_top-stories.scss CHANGED
@@ -6,15 +6,15 @@
6
6
  }
7
7
 
8
8
  .o-teaser__heading {
9
- font-family: oPrivateFoundationGet('o3-type-headline-md-font-family');
10
- font-size: oPrivateFoundationGet('o3-type-headline-md-font-size');
11
- font-weight: oPrivateFoundationGet('o3-type-headline-md-font-weight');
12
- line-height: oPrivateFoundationGet('o3-type-headline-md-line-height');
9
+ font-family: oPrivateFoundationGet('o3-type-headline-lg-font-family');
10
+ font-size: oPrivateFoundationGet('o3-type-headline-lg-font-size');
11
+ font-weight: oPrivateFoundationGet('o3-type-headline-lg-font-weight');
12
+ line-height: oPrivateFoundationGet('o3-type-headline-lg-line-height');
13
13
  @include oPrivateGridRespondTo('L') {
14
- font-family: oPrivateFoundationGet('o3-type-headline-lg-font-family');
15
- font-size: oPrivateFoundationGet('o3-font-size-7');
16
- font-weight: oPrivateFoundationGet('o3-type-headline-lg-font-weight');
17
- line-height: oPrivateFoundationGet('o3-font-lineheight-7');
14
+ font-family: oPrivateFoundationGet('o3-type-headline-md-font-family');
15
+ font-size: oPrivateFoundationGet('o3-type-headline-md-font-size');
16
+ font-weight: oPrivateFoundationGet('o3-type-headline-md-font-weight');
17
+ line-height: oPrivateFoundationGet('o3-type-headline-md-line-height');
18
18
  }
19
19
  }
20
20