From 07ed40ce03879975f104c1f9f25118183408a273 Mon Sep 17 00:00:00 2001
From: Zed <zhihe.li@hashicorp.com>
Date: Tue, 26 Apr 2022 11:28:02 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Adjusted=20dark=20mode=20?=
 =?UTF-8?q?gray=20scale=20and=20fixed=20radio=20card=20colors=20(#1065)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adjusted dark mode gray scale to be a bit darker and
made the active selected radio card lighter in dark mode

✅ Closes: ICU-4021
---
 .../styles/rose/components/form/_radio-card.scss     | 12 +++++++++---
 .../rose/addon/styles/rose/variables/color/_css.scss |  6 +++---
 .../addon/styles/rose/variables/color/_sass.scss     |  1 +
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
index 7d7dff35d..26a8bc77d 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
@@ -75,8 +75,6 @@ $radio-svg: (
   }
   .rose-form-radio-label {
     @include type.type(s, bold);
-    display: flex;
-    color: var(--black);
     width: ($size-m) * 23;
     height: 100%;
     display: block;
@@ -88,7 +86,6 @@ $radio-svg: (
     border-radius: $size-xxs;
     padding: $size-s $size-m ($size-xl + $size-m);
     box-sizing: border-box;
-    background-color: var(--white);
     .rose-form-helper-text {
       @include type.type(xs, normal);
       padding-top: $size-xs;
@@ -140,6 +137,15 @@ $radio-svg: (
           }
           .radio-card-overlay {
             background-color: var(--action-subtler-1h);
+            .ember-application.rose-theme-light & {
+              background-color: var(--action-subtler-1h);
+            }
+            @media (prefers-color-scheme: dark) {
+              background-color: var(--action-subtler-1);
+            }
+            .ember-application.rose-theme-dark & {
+              background-color: var(--action-subtler-1);
+            }
           }
           border: $size-xxxxs solid var(--info-subtler-1);
         }
diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss
index 3e554cc07..43787312d 100644
--- a/addons/rose/addon/styles/rose/variables/color/_css.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_css.scss
@@ -123,9 +123,9 @@
   --ui-border-subtler-1: #{color(ui-gray, 800)};
   --ui-border: #{color(ui-gray, 700)};
 
-  --ui-gray-subtler-6: #{color(ui-gray, 900)};
-  --ui-gray-subtler-5: #{color(ui-gray, 800)};
-  --ui-gray-subtler-4: #{color(ui-gray, 700)};
+  --ui-gray-subtler-6: #{color(ui-gray, 950)};
+  --ui-gray-subtler-5: #{color(ui-gray, 900)};
+  --ui-gray-subtler-4: #{color(ui-gray, 800)};
   --ui-gray-subtler-3: #{color(ui-gray, 600)};
   --ui-gray-subtler-2: #{color(ui-gray, 500)};
   --ui-gray-subtler-1: #{color(ui-gray, 400)};
diff --git a/addons/rose/addon/styles/rose/variables/color/_sass.scss b/addons/rose/addon/styles/rose/variables/color/_sass.scss
index 7be70fcfc..7b77d47d8 100644
--- a/addons/rose/addon/styles/rose/variables/color/_sass.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_sass.scss
@@ -41,6 +41,7 @@ $color-values: (
     700: #525761,
     800: #373a42,
     900: #1f2124,
+    950: #15171C
   ),
   ui-cool-gray: (
     010: #fdfdfe,