fix: fix sass build errors, correct use case usage

Financial-Times · Jan 21, 2025 · facabe1 · facabe1
1 parent 3b8cd03
commit facabe1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 25 deletions.
diff --git a/components/o-teaser/main.scss b/components/o-teaser/main.scss
@@ -4,7 +4,6 @@
 
 @import 'src/scss/variables';
 @import 'src/scss/mixins';
-@import 'src/scss/deprecated';
 
 @import 'src/scss/elements/default';
 @import 'src/scss/elements/images';

diff --git a/components/o-teaser/src/scss/elements/_default.scss b/components/o-teaser/src/scss/elements/_default.scss
@@ -43,21 +43,18 @@
 
 /// Meta area and colouring styles
 @mixin _oTeaserMeta {
-	font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
-	font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
-	font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
-	line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
+	font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
+	font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
+	font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
+	line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
 	color: oPrivateFoundationGet('o3-color-palette-claret');
 	margin-bottom: oPrivateSpacingByName('s3');
 }
 
 /// Tag styling.
 /// Element should be a link, otherwise use _oTeaserMeta
 @mixin _oTeaserTag {
-	font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
-	font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
-	font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
-	line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
+	font-weight: oPrivateFoundationGet('o3-font-weight-regular');
 	color: inherit;
 	text-decoration: none;
 	border: 0;
@@ -74,11 +71,7 @@
 }
 
 @mixin _oTeaserTagPrefix {
-	font-family: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-family');
-	font-size: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-size');
-	font-weight: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-weight');
-	line-height: oPrivateFoundationGet('o3-typography-use-case-body-highlight-line-height');
-	margin-right: 0.25em;
+	font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
 }
 
 @mixin _oTeaserTagSuffix {
@@ -91,10 +84,10 @@
 
 /// Styles for standfirst element
 @mixin _oTeaserStandfirst {
-	font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
-	font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
-	font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
-	line-height: 20px;
+	font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
+	font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
+	font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
+	line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
 
 	@include _oTeaserLink();
 	color: $_o-teaser-muted;

diff --git a/components/o-teaser/src/scss/themes/_small.scss b/components/o-teaser/src/scss/themes/_small.scss
@@ -69,10 +69,10 @@
 		margin-bottom: oPrivateSpacingByName('s2');
 	}
 	.o-teaser__tag-prefix {
-		font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
-		font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
+		font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
 		font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
-		line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
 		color: oPrivateFoundationGet('o3-color-palette-claret-60');
 		margin-right: oPrivateSpacingByName('s1');
 	}

diff --git a/components/o-topper/src/scss/_elements.scss b/components/o-topper/src/scss/_elements.scss
@@ -8,10 +8,10 @@
 }
 
 @mixin _oTopperSummary {
-	font-family: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-family');
-	font-size: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-size');
-	font-weight: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-weight');
-	line-height: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-line-height');
+	font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
+	font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
+	font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
+	line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
 	> ul {
 		padding: 0 oPrivateSpacingByIncrement(5);
 	}