chore: apply darker color theme to sidebar (#1139)

* chore: apply darker color theme to sidebar

* chore: hide global footer for now due to sidebar change

addons/rose/addon/styles/rose/components/header/_dropdown.scss

@@ -1,14 +1,14 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 
-$chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
+$chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
 
 .rose-header {
   .rose-dropdown {
     &,
     &[open] {
       .rose-dropdown-trigger {
-        color: var(--white);
+        color: #{color(ui-gray, 300)};
         background: url($chevron) no-repeat right sizing.rems(s) center;
         background-size: sizing.rems(m);
 

addons/rose/addon/styles/rose/components/layout/_global.scss

@@ -7,4 +7,8 @@
     flex: 1;
     display: flex;
   }
+
+  .rose-layout-global-footer {
+    display: none;
+  }
 }

addons/rose/addon/styles/rose/components/layout/_sidebar.scss

@@ -12,6 +12,7 @@
 
   .rose-layout-sidebar-sidebar {
     width: var(--sidebar-width);
+    background-color: #{color(ui-gray, 950)};
     border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
   }
 }

addons/rose/addon/styles/rose/components/nav/_sidebar.scss

@@ -8,7 +8,7 @@
 
   padding-top: $yPadding;
   padding-bottom: $yPadding;
-  border-bottom: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
+  border-bottom: sizing.rems(xxxxs) solid #{color(ui-gray, 700)};
 
   &:last-child {
     border-bottom: 0;
@@ -18,35 +18,39 @@
   .rose-nav-title {
     @include type.type(xs, semibold);
     display: none;
-    color: var(--ui-gray);
+    color: #{color(ui-gray, 400)};
     text-transform: uppercase;
     $lineHeight: math.div(20, 12);
     line-height: $lineHeight;
     padding: 0 sizing.rems(m);
     margin-bottom: $threePX;
-    border-bottom: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
+    border-bottom: sizing.rems(xxxxs) solid #{color(ui-gray, 700)};
   }
 
   .rose-nav-link {
     @include type.type(s);
     display: block;
-    color: var(--stark);
+    color: var(--white);
     $lineHeight: math.div(36, 14);
     line-height: $lineHeight;
     text-decoration: none;
     padding: 0 sizing.rems(m);
     border-right: $threePX solid transparent;
 
-    &.active {
-      color: var(--action);
-      border-color: currentColor;
-      background-color: var(--action-subtler-1h);
+    .rose-icon {
+      opacity: 0.65;
     }
 
     &:hover {
       //text-decoration: underline;
-      color: var(--action);
-      background-color: var(--action-subtler-1h);
+      color: var(--white);
+      background-color: #{color(ui-gray, 800)};
+    }
+
+    &.active {
+      color: var(--white);
+      border-color: #{color(ui-gray, 300)};
+      background-color: #{color(ui-gray, 800)};
     }
   }
 }