Fix font variants count color contrast and l10n. (#58117)

WordPress · Jan 24, 2024 · b3fdade · b3fdade · github-actions · Jan 24, 2024
1 parent 7f3b8c5
commit b3fdade
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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
@@ -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;