Increase contrast of background and various elements

flutter · Sep 25, 2024 · 1aa8849 · 1aa8849
1 parent 8b745a0
commit 1aa8849
Showing 5 changed files with 8 additions and 17 deletions.
diff --git a/src/_sass/base/_root.scss b/src/_sass/base/_root.scss
@@ -86,6 +86,6 @@ body {
     }
   }
 
-  background-color: var(--site-surface-container-low);
+  background-color: var(--site-surface-container);
   color: var(--site-on-surface);
 }
diff --git a/src/_sass/components/_breadcrumbs.scss b/src/_sass/components/_breadcrumbs.scss
@@ -3,7 +3,7 @@
   margin-bottom: 1rem;
 
   > ol {
-    background-color: var(--site-surface-container);
+    background-color: var(--site-surface-container-high);
     border-radius: 0.375rem;
     padding: 0.375rem;
 

diff --git a/src/_sass/components/_code.scss b/src/_sass/components/_code.scss
@@ -7,7 +7,7 @@
   margin-left: 0.05rem;
   margin-right: 0.05rem;
   background-color: var(--site-surface-container-low);
-  background-color: color-mix(in srgb, var(--site-surface-container-low) 80%, transparent);
+  background-color: color-mix(in srgb, var(--site-surface-container) 80%, transparent);
 
   border: 1px solid var(--site-outline-variant);
   border-radius: 0.25rem;
@@ -159,7 +159,7 @@ pre {
   border: 1px solid var(--site-outline-variant);
 
   .code-block-header {
-    background-color: var(--site-surface-container-low);
+    background-color: var(--site-surface-container-highest);
     border-bottom: 1px solid var(--site-outline-variant);
     font-size: 0.9125rem;
     font-weight: 500;
@@ -168,7 +168,7 @@ pre {
 
   .code-block-body {
     position: relative;
-    background-color: var(--site-surface-container-low);
+    background-color: var(--site-surface-container);
 
     &:hover, &:focus-within {
       .code-block-language {

diff --git a/src/_sass/components/_sidenav.scss b/src/_sass/components/_sidenav.scss
@@ -80,7 +80,7 @@
       }
 
       &:hover {
-        background-color: var(--site-surface-container-highest);
+        background-image: linear-gradient(rgb(var(--site-interaction-base-values) / 8%) 0 0);
       }
 
       &:not(.collapsed) {
@@ -94,21 +94,12 @@
       }
 
       &.active {
-        background-color: var(--site-surface-container);
+        background-color: var(--site-surface-container-highest);
         color: var(--site-on-surface);
 
-        &:hover {
-          background-color: var(--site-surface-container-highest);
-          color: var(--site-on-surface);
-        }
-
         &:not(.collapsible) {
           background-color: var(--site-secondary-container);
           color: var(--site-on-secondary-container);
-
-          &:hover {
-            background-image: linear-gradient(rgb(var(--site-interaction-base-values) / 5%) 0 0);
-          }
         }
       }
     }

diff --git a/src/_sass/components/_tabs.scss b/src/_sass/components/_tabs.scss
@@ -15,7 +15,7 @@ ul.nav-tabs {
 
   padding: 0.5rem;
   border-radius: 0.375rem;
-  background-color: var(--site-surface-container);
+  background-color: var(--site-surface-container-high);
   gap: 0.5rem;
 
   a {