Add style support for Dark Mode and use BEM scss syntax

WordPress · Dec 6, 2023 · e97417d · e97417d
1 parent cde0418
commit e97417d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 35 deletions.
diff --git a/packages/block-editor/src/components/offline-status/index.native.js b/packages/block-editor/src/components/offline-status/index.native.js
@@ -6,22 +6,36 @@ import { Text, View } from 'react-native';
 /**
  * WordPress dependencies
  */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { Icon } from '@wordpress/components';
 import { offline as offlineIcon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import styles from './style.scss';
+import styles from './style';
 
 const OfflineStatus = () => {
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles.container,
+		styles[ 'container--dark' ]
+	);
+
+	const textStyle = usePreferredColorSchemeStyle(
+		styles.text,
+		styles[ 'text--dark' ]
+	);
+
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles.icon,
+		styles[ 'icon--dark' ]
+	);
+
 	return (
-		<View style={ styles.offlineStatusContainer }>
-			<Icon icon={ offlineIcon } />
-			<Text style={ styles.offlineText }>
-				{ __( 'Working Offline' ) }
-			</Text>
+		<View style={ containerStyle }>
+			<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
+			<Text style={ textStyle }>{ __( 'Working Offline' ) }</Text>
 		</View>
 	);
 };

diff --git a/packages/block-editor/src/components/offline-status/style.native.scss b/packages/block-editor/src/components/offline-status/style.native.scss
@@ -1,11 +1,27 @@
-.offlineStatusContainer {
+.container {
 	background-color: $light-ultra-dim;
 	padding: $grid-unit;
 	justify-content: center;
 	flex-direction: row;
 }
 
-.offlineText {
+.container--dark {
+	background-color: $dark-ultra-dim;
+}
+
+.text {
 	padding-left: 3;
 	padding-top: 2;
 }
+
+.text--dark {
+	color: $white;
+}
+
+.icon {
+	fill: $light-secondary;
+}
+
+.icon--dark {
+	fill: $dark-tertiary;
+}
diff --git a/packages/icons/src/library/offline.js b/packages/icons/src/library/offline.js
@@ -4,37 +4,16 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const offline = (
-	<SVG
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 30"
-		fill="none"
-		x="0px"
-		y="0px"
-	>
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 30" x="0px" y="0px">
 		{ /*
 			"no internet" by Heztasia is licensed under CCBY3.0
 			https://creativecommons.org/licenses/by/3.0/ 
 		*/ }
-		<Path
-			d="M3.70711 2.29289C3.31658 1.90237 2.68342 1.90237 2.29289 2.29289C1.90237 2.68342 1.90237 3.31658 2.29289 3.70711L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L16.3932 14.979C16.6241 14.5947 16.5739 14.0887 16.2426 13.7574C15.493 13.0078 14.5945 12.498 13.6422 12.228L11.4341 10.0199C13.6657 9.86266 15.9507 10.6371 17.6568 12.3432C18.0473 12.7337 18.6805 12.7337 19.071 12.3432C19.4615 11.9526 19.4615 11.3195 19.071 10.9289C16.5252 8.38313 12.9482 7.49693 9.68454 8.27032L8.12303 6.70881C12.2309 5.1593 16.9772 6.15029 20.2685 9.68179C20.645 10.0858 21.2778 10.1081 21.6818 9.73155C22.0858 9.35501 22.1081 8.72223 21.7316 8.31821C17.6462 3.93471 11.6103 2.88854 6.59392 5.17971L3.70711 2.29289Z"
-			fill="black"
-		/>
-		<Path
-			d="M2.26846 8.31821C1.89191 8.72223 1.91419 9.35501 2.31821 9.73155C2.72224 10.1081 3.35501 10.0858 3.73155 9.68179C4.14843 9.23449 4.58864 8.82795 5.04795 8.46216L3.62582 7.04003C3.15391 7.4288 2.70029 7.85486 2.26846 8.31821Z"
-			fill="black"
-		/>
-		<Path
-			d="M6.33974 9.75395C5.84311 10.0957 5.37048 10.4873 4.92888 10.9289C4.53836 11.3195 4.53836 11.9526 4.92888 12.3432C5.3194 12.7337 5.95257 12.7337 6.34309 12.3432C6.78793 11.8983 7.27212 11.5168 7.78445 11.1987L6.33974 9.75395Z"
-			fill="black"
-		/>
-		<Path
-			d="M9.25084 12.6651C8.71292 12.9424 8.20817 13.3065 7.75731 13.7574C7.36678 14.1479 7.36678 14.7811 7.75731 15.1716C8.14783 15.5621 8.781 15.5621 9.17152 15.1716C9.63738 14.7057 10.1896 14.3788 10.7766 14.1908L9.25084 12.6651Z"
-			fill="black"
-		/>
-		<Path
-			d="M12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20Z"
-			fill="black"
-		/>
+		<Path d="M3.70711 2.29289C3.31658 1.90237 2.68342 1.90237 2.29289 2.29289C1.90237 2.68342 1.90237 3.31658 2.29289 3.70711L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L16.3932 14.979C16.6241 14.5947 16.5739 14.0887 16.2426 13.7574C15.493 13.0078 14.5945 12.498 13.6422 12.228L11.4341 10.0199C13.6657 9.86266 15.9507 10.6371 17.6568 12.3432C18.0473 12.7337 18.6805 12.7337 19.071 12.3432C19.4615 11.9526 19.4615 11.3195 19.071 10.9289C16.5252 8.38313 12.9482 7.49693 9.68454 8.27032L8.12303 6.70881C12.2309 5.1593 16.9772 6.15029 20.2685 9.68179C20.645 10.0858 21.2778 10.1081 21.6818 9.73155C22.0858 9.35501 22.1081 8.72223 21.7316 8.31821C17.6462 3.93471 11.6103 2.88854 6.59392 5.17971L3.70711 2.29289Z" />
+		<Path d="M2.26846 8.31821C1.89191 8.72223 1.91419 9.35501 2.31821 9.73155C2.72224 10.1081 3.35501 10.0858 3.73155 9.68179C4.14843 9.23449 4.58864 8.82795 5.04795 8.46216L3.62582 7.04003C3.15391 7.4288 2.70029 7.85486 2.26846 8.31821Z" />
+		<Path d="M6.33974 9.75395C5.84311 10.0957 5.37048 10.4873 4.92888 10.9289C4.53836 11.3195 4.53836 11.9526 4.92888 12.3432C5.3194 12.7337 5.95257 12.7337 6.34309 12.3432C6.78793 11.8983 7.27212 11.5168 7.78445 11.1987L6.33974 9.75395Z" />
+		<Path d="M9.25084 12.6651C8.71292 12.9424 8.20817 13.3065 7.75731 13.7574C7.36678 14.1479 7.36678 14.7811 7.75731 15.1716C8.14783 15.5621 8.781 15.5621 9.17152 15.1716C9.63738 14.7057 10.1896 14.3788 10.7766 14.1908L9.25084 12.6651Z" />
+		<Path d="M12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20Z" />
 	</SVG>
 );