Standardise opacity as 0.04

WordPress · Nov 17, 2022 · e8ec5e6 · e8ec5e6
1 parent 5ff8bd6
commit e8ec5e6
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 16 deletions.
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
@@ -29,4 +29,5 @@ $alert-green: #4ab866;
 
 :root {
 	--wp-block-synced-color: #7a00df;
+	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
 }
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -19,16 +19,13 @@
 	}
 
 	&:hover:not(.is-dragging-blocks)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
 	}
 
 	&.is-reusable:hover:not(.is-dragging-blocks)::before,
 	&.wp-block-template-part:hover:not(.is-dragging-blocks)::before {
-		filter: brightness(0.95);
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-block-synced-color), var(--wp-block-synced-color));
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
 	}
 

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -75,16 +75,10 @@
 		border-bottom-right-radius: $radius-block-ui;
 	}
 	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
-		// Lighten a CSS variable without introducing a new SASS variable
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
 	&.is-synced-branch:not(.is-selected) {
-		// Lighten a CSS variable without introducing a new SASS variable
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-block-synced-color), var(--wp-block-synced-color));
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 	}
 	&.is-branch-selected.is-first-selected td:first-child {
 		border-top-left-radius: $radius-block-ui;

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -53,9 +53,7 @@
 		opacity: 0;
 		padding: 0;
 		transition: all ease 0.2s;
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-block-synced-color), var(--wp-block-synced-color));
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 		border-radius: 2px;
 		@include reduce-motion(transition);
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,4 +29,5 @@ $alert-green: #4ab866; @@
     :root {
     	--wp-block-synced-color: #7a00df;
+    	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
     }