diff --git a/addons/rose/addon/styles/rose/_typography.scss b/addons/rose/addon/styles/rose/_typography.scss index abf068ab1..fffc00843 100644 --- a/addons/rose/addon/styles/rose/_typography.scss +++ b/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); +} diff --git a/addons/rose/addon/styles/rose/variables/_opacity.scss b/addons/rose/addon/styles/rose/variables/_opacity.scss index b09027ff5..28b029277 100644 --- a/addons/rose/addon/styles/rose/variables/_opacity.scss +++ b/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; } } diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss index a0644f2e4..d4fbf61bb 100644 --- a/addons/rose/addon/styles/rose/variables/color/_css.scss +++ b/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)};