revert: replace css vars with scss vars

Automattic · Dec 20, 2024 · 2e1b044 · 2e1b044
1 parent e4f67b7
commit 2e1b044
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 25 deletions.
diff --git a/src/components/src/modal/style.scss b/src/components/src/modal/style.scss
@@ -2,16 +2,16 @@
  * Modal
  */
 
-@use "../../../shared/scss/colors";
+@use "../../../shared/scss/colors" as colors;
 
 .newspack-modal {
 	// Color
-	--wp-admin-theme-color: var(--newspack-ui-color-primary);
-	--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
-	--wp-admin-theme-color-darker-10: var(--newspack-ui-color-primary);
-	--wp-admin-theme-color-darker-10--rgb: var(--newspack-ui-color-primary-rgb);
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: rgb(#{colors.$primary-600--rgb});
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: rgb(#{colors.$primary-700--rgb});
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: rgb(#{colors.$primary-800--rgb});
 
 	@media screen and ( min-width: 744px ) {
 		max-width: 680px;

diff --git a/src/components/src/style.scss b/src/components/src/style.scss
@@ -1,13 +1,14 @@
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "../../shared/scss/colors" as colors;
 
 :root {
-	// Colors
-	--newspack-ui-color-primary: #2240d5;
-	--newspack-ui-color-primary-rgb: 34, 64, 213;
-
 	// WP Admin
-	--wp-admin-theme-color: var(--newspack-ui-color-primary);
-	--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: rgb(#{colors.$primary-600--rgb});
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: rgb(#{colors.$primary-700--rgb});
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: rgb(#{colors.$primary-800--rgb});
 }
 
 // Buttons Card

diff --git a/src/components/src/web-preview/style.scss b/src/components/src/web-preview/style.scss
@@ -7,12 +7,12 @@
 
 .newspack-web-preview {
 	// Color
-	--wp-admin-theme-color: var(--newspack-ui-color-primary);
-	--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
-	--wp-admin-theme-color-darker-10: var(--newspack-ui-color-primary);
-	--wp-admin-theme-color-darker-10--rgb: var(--newspack-ui-color-primary-rgb);
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: rgb(#{colors.$primary-600--rgb});
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: rgb(#{colors.$primary-700--rgb});
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: rgb(#{colors.$primary-800--rgb});
 
 	background: rgba(black, 0.7);
 	box-sizing: border-box;

diff --git a/src/components/src/with-wizard-screen/style.scss b/src/components/src/with-wizard-screen/style.scss
@@ -7,12 +7,12 @@
 
 .newspack-wizard {
 	// Color
-	--wp-admin-theme-color: var(--newspack-ui-color-primary);
-	--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
-	--wp-admin-theme-color-darker-10: var(--newspack-ui-color-primary);
-	--wp-admin-theme-color-darker-10--rgb: var(--newspack-ui-color-primary-rgb);
-	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
-	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};
+	--wp-admin-theme-color: #{colors.$primary-600};
+	--wp-admin-theme-color--rgb: rgb(#{colors.$primary-600--rgb});
+	--wp-admin-theme-color-darker-10: #{colors.$primary-700};
+	--wp-admin-theme-color-darker-10--rgb: rgb(#{colors.$primary-700--rgb});
+	--wp-admin-theme-color-darker-20: #{colors.$primary-800};
+	--wp-admin-theme-color-darker-20--rgb: rgb(#{colors.$primary-800--rgb});
 
 	color: wp-colors.$gray-900;