diff --git a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss index 7dae497d6..90e84159a 100644 --- a/addons/rose/addon/styles/rose/components/nav/_sidebar.scss +++ b/addons/rose/addon/styles/rose/components/nav/_sidebar.scss @@ -13,7 +13,7 @@ line-height: $lineHeight; padding: 0 sizing.rems(m); margin-bottom: $threePX; - border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); + border-bottom: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); } .rose-nav-link { diff --git a/addons/rose/addon/styles/rose/components/nav/_tabs.scss b/addons/rose/addon/styles/rose/components/nav/_tabs.scss index 2e2ca44f3..4d71816d1 100644 --- a/addons/rose/addon/styles/rose/components/nav/_tabs.scss +++ b/addons/rose/addon/styles/rose/components/nav/_tabs.scss @@ -5,7 +5,7 @@ display: flex; flex-wrap: wrap; margin-bottom: sizing.rems(m); - box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-gray-subtler-2); + box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border); .rose-nav-link { --color: var(--ui-gray-starker-1); diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss index d4fbf61bb..cb000c5df 100644 --- a/addons/rose/addon/styles/rose/variables/color/_css.scss +++ b/addons/rose/addon/styles/rose/variables/color/_css.scss @@ -83,8 +83,8 @@ @media (prefers-color-scheme: dark) { :root { // poles - --subtle: #{darken(color(ui-gray, 900), 2%)}; - --stark: var(--white); + --subtle: #{darken(color(ui-gray, 900), 3%)}; + --stark: #{color(ui-gray, 100)}; --stark-components: 255, 255, 255; // theme colors @@ -107,18 +107,18 @@ --failure-subtler-2: #{color(red, 900)}; --failure-subtler-1: #{color(red, 800)}; - --failure: #{lighten(color(red, 400), 2.5%)}; - --failure-starker-1: #{color(red, 300)}; + --failure: #{color(red, 300)}; + --failure-starker-1: #{color(red, 200)}; --success-subtler-2: #{color(green, 900)}; --success-subtler-1: #{color(green, 800)}; - --success: #{color(green)}; - --success-starker-1: #{color(green, 200)}; + --success: #{color(green, 700)}; + --success-starker-1: #{color(green, 400)}; - --action-subtler-2: #{color(blue, 900)}; - --action-subtler-1h: #{color(blue, 800)}; + --action-subtler-2: #{darken(color(blue, 900), 10%)}; + --action-subtler-1h: #{darken(color(blue, 900), 5%)}; --action-subtler-1: #{color(blue, 800)}; - --action: #{color(blue, 300)}; + --action: #{color(blue, 400)}; --action-starker-1: #{color(blue, 200)}; --ui-border-subtler-1: #{color(ui-gray, 800)};