Merge pull request #79 from hashicorp/chore-tweak-dark-mode

chore: 🤖 apply body colors; adjust contrast for AA rating

addons/rose/addon/styles/rose/_typography.scss

@@ -12,6 +12,8 @@ body {
   // expressed in rem units.
   font-size: typography.$base-font-size * 1px;
   line-height: typography.line-height(m);
+  color: var(--stark);
+  background-color: var(--subtle);
 }
 
 pre,
@@ -43,3 +45,7 @@ h3,
 p {
   margin-bottom: sizing.rems(m);
 }
+
+a {
+  color: var(--action);
+}

addons/rose/addon/styles/rose/variables/_opacity.scss

@@ -17,10 +17,10 @@
 // light mode.
 @media (prefers-color-scheme: dark) {
   :root {
-    --opacity-5: 0.025;
-    --opacity-4: 0.025;
-    --opacity-3: 0.05;
-    --opacity-2: 0.125;
-    --opacity-1: 0.25;
+    --opacity-5: 0.0125;
+    --opacity-4: 0.0125;
+    --opacity-3: 0.025;
+    --opacity-2: 0.025;
+    --opacity-1: 0.125;
   }
 }

addons/rose/addon/styles/rose/variables/color/_css.scss

@@ -83,7 +83,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     // poles
-    --subtle: #{color(ui-cool-gray, 800)};
+    --subtle: #{darken(color(ui-gray, 900), 2%)};
     --stark: var(--white);
     --stark-components: 255, 255, 255;
 
@@ -107,7 +107,7 @@
 
     --failure-subtler-2: #{color(red, 900)};
     --failure-subtler-1: #{color(red, 800)};
-    --failure: #{color(red, 400)};
+    --failure: #{lighten(color(red, 400), 2.5%)};
     --failure-starker-1: #{color(red, 300)};
 
     --success-subtler-2: #{color(green, 900)};
@@ -118,8 +118,8 @@
     --action-subtler-2: #{color(blue, 900)};
     --action-subtler-1h: #{color(blue, 800)};
     --action-subtler-1: #{color(blue, 800)};
-    --action: #{color(blue)};
-    --action-starker-1: #{color(blue, 300)};
+    --action: #{color(blue, 300)};
+    --action-starker-1: #{color(blue, 200)};
 
     --ui-border-subtler-1: #{color(ui-gray, 800)};
     --ui-border: #{color(ui-gray, 700)};