diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index fc81fdf23..fb92cd6fa 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/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,";
+$chevron: "data:image/svg+xml;utf-8,";
.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);
diff --git a/addons/rose/addon/styles/rose/components/layout/_global.scss b/addons/rose/addon/styles/rose/components/layout/_global.scss
index d9b9b771a..1cf1d1012 100644
--- a/addons/rose/addon/styles/rose/components/layout/_global.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_global.scss
@@ -7,4 +7,8 @@
flex: 1;
display: flex;
}
+
+ .rose-layout-global-footer {
+ display: none;
+ }
}
diff --git a/addons/rose/addon/styles/rose/components/layout/_sidebar.scss b/addons/rose/addon/styles/rose/components/layout/_sidebar.scss
index e5cc54668..fea5d6678 100644
--- a/addons/rose/addon/styles/rose/components/layout/_sidebar.scss
+++ b/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);
}
}
diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
index cfe3b87f8..08e76b9be 100644
--- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss
+++ b/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)};
}
}
}