feat: use typography use case tokens in o-message

Financial-Times · Jan 16, 2025 · f0b2fb5 · f0b2fb5
1 parent 3caf962
commit f0b2fb5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/components/o-message/main.scss b/components/o-message/main.scss
@@ -51,7 +51,10 @@
 	$inner: index($layouts, 'inner');
 
 	.o-message {
-		@include oPrivateTypographySans($scale: 0);
+		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');
 
 		.o-message__container {
 			@include oPrivateGridContainer($bleed: true);
@@ -80,12 +83,19 @@
 		}
 
 		.o-message__content-highlight {
-			@include oPrivateTypographySans($weight: 'semibold');
+			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');
 		}
 
 		.o-message__content-main a,
 		.o-message__content-additional a {
 			@include oPrivateTypographyLink();
+			font-family: oPrivateFoundationGet('o3-typography-use-case-body-link-font-family');
+			font-size: oPrivateFoundationGet('o3-typography-use-case-body-link-font-size');
+			font-weight: oPrivateFoundationGet('o3-typography-use-case-body-link-font-weight');
+			line-height: oPrivateFoundationGet('o3-typography-use-case-body-link-line-height');
 			border-width: 1px;
 			text-decoration-thickness: 1px;
 		}
@@ -105,6 +115,10 @@
 
 		.o-message__actions__secondary {
 			@include oPrivateTypographyLink();
+			font-family: oPrivateFoundationGet('o3-typography-use-case-body-link-font-family');
+			font-size: oPrivateFoundationGet('o3-typography-use-case-body-link-font-size');
+			font-weight: oPrivateFoundationGet('o3-typography-use-case-body-link-font-weight');
+			line-height: oPrivateFoundationGet('o3-typography-use-case-body-link-line-height');
 			white-space: nowrap;
 		}
 	}

diff --git a/components/o-message/src/scss/_mixins.scss b/components/o-message/src/scss/_mixins.scss
@@ -111,6 +111,10 @@
 				'context': $background-color,
 			)
 		);
+		font-family: oPrivateFoundationGet('o3-typography-use-case-body-link-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-body-link-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-body-link-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-body-link-line-height');
 	}
 
 	// action button
@@ -139,6 +143,10 @@
 				'context': $background-color,
 			)
 		);
+		font-family: oPrivateFoundationGet('o3-typography-use-case-body-link-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-body-link-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-body-link-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-body-link-line-height');
 	}
 
 	// state icon, only for alert messages