Merge pull request #14515 from craftcms/feature/darker-sidebar

Slightly-darker global sidebar

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- The global sidebar background color is now a shade darker than the rest of the page. ([#14515](https://github.com/craftcms/cms/pull/14515))
 - Fixed a bug where `craft\helpers\Html::parseTagAttribute()` wasn’t handling attribute values with newlines. ([#14498](https://github.com/craftcms/cms/issues/14498))
 
 ## 5.0.0-beta.5 - 2024-03-01

src/web/assets/cp/src/css/_color-palette.scss

@@ -7,6 +7,7 @@
 
   --gray-050-hsl: 212, 60%, 97%;
   --gray-100-hsl: 212, 50%, 93%;
+  --gray-150-hsl: 212, 40%, 89%;
   --gray-200-hsl: 212, 30%, 85%;
   --gray-300-hsl: 211, 13%, 65%;
   --gray-350-hsl: 211, 11%, 59%;
@@ -21,6 +22,7 @@
 
   --gray-050: hsl(var(--gray-050-hsl));
   --gray-100: hsl(var(--gray-100-hsl));
+  --gray-150: hsl(var(--gray-150-hsl));
   --gray-200: hsl(var(--gray-200-hsl));
   --gray-300: hsl(var(--gray-300-hsl));
   --gray-350: hsl(var(--gray-350-hsl));

src/web/assets/cp/src/css/_cp.scss

@@ -219,7 +219,7 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
 #trial-info {
   padding: 16px var(--xl);
   border-radius: var(--large-border-radius);
-  background-color: hsl(212, 40%, 90%);
+  background-color: var(--gray-150);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.5),
     0 0 0 1px hsl(212, 30%, 80%),

src/web/assets/cp/src/css/_global-sidebar.scss

@@ -12,7 +12,7 @@
   height: 100vh;
   padding: 0;
   -webkit-overflow-scrolling: touch;
-  background-color: transparent;
+  background-color: var(--gray-150);
   border-right: 1px solid var(--hairline-color);
   width: var(--global-sidebar-width);