Remove/tweak dark light variables (#23229)

* Retire the lighter variables. * Change the dark colors to be dynamic. * Revert the HSL. * Fix focus for inserter.
WordPress · Jun 18, 2020 · ef0704b · ef0704b
1 parent e1a6a78
commit ef0704b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 11 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -441,13 +441,9 @@
 @mixin admin-scheme($color-primary) {
 	--wp-admin-theme-color: #{$color-primary};
 
-	// Ideally, we should limit these computed variables,
-	// because we can"t compute colors based on CSS variables.
-	// This requires refactoring some existing styles.
-	--wp-admin-theme-color-darker-20: #{darken($color-primary, 20%)};
-	--wp-admin-theme-color-darker-10: #{darken($color-primary, 10%)};
-	--wp-admin-theme-color-lighter-10: #{lighten($color-primary, 10%)};
-	--wp-admin-theme-color-lighter-40: #{lighten($color-primary, 40%)};
+	// Darker shades.
+	--wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)};
+	--wp-admin-theme-color-darker-20: #{darken($color-primary, 10%)};
 }
 
 @mixin wordpress-admin-schemes() {

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -70,9 +70,9 @@
 		&[aria-disabled="true"],
 		&[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled.
 		&[aria-disabled="true"]:active:enabled {
-			color: var(--wp-admin-theme-color-lighter-40);
-			background: var(--wp-admin-theme-color-lighter-10);
-			border-color: var(--wp-admin-theme-color-lighter-10);
+			color: rgba($white, 0.4);
+			background: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
 			opacity: 1;
 
 			&:focus:enabled {

diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -38,7 +38,7 @@
 		}
 
 		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
 			outline: 1px solid transparent;
 		}