From b3fdade90958c28a39b0ee02fd7bd3432de3c63f Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 24 Jan 2024 14:05:00 +0100
Subject: [PATCH] Fix font variants count color contrast and l10n. (#58117)

---
 .../src/components/global-styles/font-family-item.js  | 11 +++++++----
 .../edit-site/src/components/global-styles/style.scss |  4 ++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-family-item.js b/packages/edit-site/src/components/global-styles/font-family-item.js
index a0044e156c9fbd..fc5418d5c7eb17 100644
--- a/packages/edit-site/src/components/global-styles/font-family-item.js
+++ b/packages/edit-site/src/components/global-styles/font-family-item.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _n } from '@wordpress/i18n';
+import { _n, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalHStack as HStack,
 	__experimentalItem as Item,
@@ -32,9 +32,12 @@ function FontFamilyItem( { font } ) {
 		<Item onClick={ handleClick }>
 			<HStack justify="space-between">
 				<FlexItem style={ previewStyle }>{ font.name }</FlexItem>
-				<FlexItem style={ { color: '#9e9e9e' } }>
-					{ variantsCount }{ ' ' }
-					{ _n( 'variant', 'variants', variantsCount ) }
+				<FlexItem className="edit-site-global-styles-screen-typography__font-variants-count">
+					{ sprintf(
+						/* translators: %d: Number of font variants. */
+						_n( '%d variant', '%d variants', variantsCount ),
+						variantsCount
+					) }
 				</FlexItem>
 			</HStack>
 		</Item>
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index a899495cc332b7..bae69826403915 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -42,6 +42,10 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-global-styles-screen-typography__font-variants-count {
+	color: $gray-700;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;