Replace custom colors with base-styles

See #5
WordPress · Feb 4, 2023 · aa3dac8 · aa3dac8
1 parent 7e9ca8a
commit aa3dac8
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/settings/src/components/account-status.scss b/settings/src/components/account-status.scss
@@ -6,7 +6,7 @@
 
 		.components-card__header {
 			justify-content: flex-start;
-			color: #1e1e1e;
+			color: $gray-900;
 			font-size: 1.2em;
 		}
 
@@ -18,7 +18,6 @@
 				"status description open"
 			;
 			grid-column-gap: 10px;
-			color: #5d5d5d;
 			padding: 18px 14px;
 
 			.wporg-2fa__status-icon {
@@ -31,13 +30,14 @@
 				align-self: end;
 				margin: 0;
 				font-size: 1.1em;
+				color: $gray-900;
 			}
 
 			p {
 				grid-area: description;
 				align-self: start;
 				margin: 0;
-				color: #656971;
+				color: $gray-700;
 			}
 
 			.wporg-2fa__status-card-open {
@@ -50,16 +50,16 @@
 	.wporg-2fa__status-icon {
 		&.is-enabled,
 		&.is-ok {
-			fill: var(--color-success);
+			fill: $alert-green;
 		}
 
 		&.is-pending {
-			fill: var(--color-warning);
+			fill: $alert-yellow;
 		}
 
 		&.is-disabled,
 		&.is-error {
-			fill: var(--color-error);
+			fill: $alert-red;
 		}
 	}
 }
diff --git a/settings/src/components/backup-codes.scss b/settings/src/components/backup-codes.scss
@@ -1,6 +1,6 @@
 .wporg-2fa__backup-codes {
 	.wporg-2fa__backup-codes-list {
-		background-color: #e1e1e1;
+		background-color: $gray-300;
 		margin: 1em 0;
 		padding: 15px 20px;
 
@@ -15,9 +15,8 @@
 			     -- presumably so that users don't mistakenly think it's part of the code --
 			     but darker than the background
 		    */
-			color: #8a8787; /* use color var*/
+			color: $gray-700;
 		}
-
 	}
 
 	.components-notice {

diff --git a/settings/src/components/email-address.scss b/settings/src/components/email-address.scss
@@ -9,6 +9,6 @@
 	}
 
 	.email-error {
-		color: var(--color-error);
+		color: $alert-red;
 	}
 }
diff --git a/settings/src/components/global-notice.scss b/settings/src/components/global-notice.scss
@@ -19,6 +19,6 @@
 		/* todo for some reason this is getting overridden without !important by the core styles, even though the selector is more specific,
 		    and it's inline while the core styles are in a file */
 
-		fill: var(--color-success);
+		fill: $alert-green;
 	}
 }
diff --git a/settings/src/components/setup-progress-bar.scss b/settings/src/components/setup-progress-bar.scss
@@ -2,8 +2,8 @@
 #bbpress-forums .wporg-2fa__progress-bar,
 #bbpress-forums.bbpress-wrapper .wporg-2fa__progress-bar {
 	--color-enabled: #0475c4;
-	--color-disabled: #c2c3c6;
-	--color-disabled-text: #707070; // Darker than `color-disabled` to meet a11y contrast standards.
+	--color-disabled: #{$gray-400};
+	--color-disabled-text: #{$gray-700}; // Darker than `color-disabled` to meet a11y contrast standards.
 
 	position: relative;
 	margin: 0 -24px; /* Separators need to stretch to edges of container. */
@@ -32,7 +32,7 @@
 			svg {
 				background-color: var(--color-enabled);
 				border-color: var(--color-enabled);
-				fill: white;
+				fill: $white;
 			}
 		}
 

diff --git a/settings/src/components/totp.scss b/settings/src/components/totp.scss
@@ -14,6 +14,6 @@
 }
 
 .wporg-2fa__enabled-status {
-	color: var(--color-success);
+	color: $alert-green;
 	text-transform: uppercase;
 }
diff --git a/settings/src/style.scss b/settings/src/style.scss
@@ -1,8 +1,4 @@
-.wp-block-wporg-two-factor-settings {
-	--color-success: #008a20;
-	--color-warning: #dfb104;
-	--color-error: #d63738;
-}
+@import '~@wordpress/base-styles/colors';
 
 .wp-block-wporg-two-factor-settings h3 {
 	font-size: 14px;

diff --git a/settings/src/utilities.js b/settings/src/utilities.js
@@ -22,7 +22,7 @@ export function getUserRecord( userId ) {
  * `record.save()`. When that happens, the `record` object isn't automatically updated, and needs to be manually
  * refreshed to get the latest data.
  *
- * todo open gutenberg issue to add something like this to the hook itself.
+ * todo Replace this with native method if one is added in https://github.com/WordPress/gutenberg/issues/47746.
  *
  * @param record An record object that was generated by `useEntityRecord()`.
  */