Fix quote left border color in dark mode. (#23692)

WordPress · Jul 6, 2020 · f47037a · f47037a
1 parent ef84636
commit f47037a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/packages/primitives/src/block-quotation/index.native.js b/packages/primitives/src/block-quotation/index.native.js
@@ -6,12 +6,19 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { Children, cloneElement } from '@wordpress/element';
+import { withPreferredColorScheme } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-export const BlockQuotation = ( props ) => {
+export const BlockQuotation = withPreferredColorScheme( ( props ) => {
+ const { getStylesFromColorScheme } = props;
+
+ const blockQuoteStyle = getStylesFromColorScheme(
+ styles.wpBlockQuoteLight,
+ styles.wpBlockQuoteDark
+ );
  const newChildren = Children.map( props.children, ( child ) => {
  if ( child && child.props.identifier === 'citation' ) {
  return cloneElement( child, {
@@ -23,5 +30,5 @@ export const BlockQuotation = ( props ) => {
  }
  return child;
  } );
- return <View style={ styles.wpBlockQuote }>{ newChildren }</View>;
-};
+ return <View style={ blockQuoteStyle }>{ newChildren }</View>;
+} );
diff --git a/packages/primitives/src/block-quotation/style.native.scss b/packages/primitives/src/block-quotation/style.native.scss
@@ -1,11 +1,20 @@
-.wpBlockQuote {
+%wpBlockQuote-shared {
  border-left-width: 4px;
- border-left-color: $black;
  border-left-style: solid;
  padding-left: 8px;
  margin-left: 0;
 }
 
+.wpBlockQuoteLight {
+ @extend %wpBlockQuote-shared;
+ border-left-color: $black;
+}
+
+.wpBlockQuoteDark {
+ @extend %wpBlockQuote-shared;
+ border-left-color: $white;
+}
+
 .wpBlockQuoteCitation {
  margin-top: 16px;
  font-size: 14px;