feat(css): improve colors used for buttons

userstyles-world · Jul 24, 2021 · eeefef3 · eeefef3
1 parent 4d76e2c
commit eeefef3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 33 deletions.
diff --git a/scss/ui/_base.scss b/scss/ui/_base.scss
@@ -28,18 +28,18 @@ hr { border: none; border-top: 1px solid var(--bg-3)  }
     transition: $x, $y, $z;
     border: 1px solid var(--bg-3);
     background-color: var(--bg-2);
-    color: var(--fg-3);
+    color: var(--fg-2);
     outline: none;
 
     ::-moz-focus-inner { outline: none }
 
     &:hover {
-        color: var(--fg-2);
+        color: var(--fg-1);
         border-color: var(--bg-4);
     }
 
     &:not(.active):focus {
-        color: var(--fg-2);
+        color: var(--fg-1);
         border-color: var(--bg-5);
         box-shadow: 0 0 0 0.25rem var(--bg-2);
     }
@@ -59,11 +59,11 @@ hr { border: none; border-top: 1px solid var(--bg-3)  }
     &.primary {
         color: var(--fg-1);
         border-color: var(--ac-3);
-        background-color: var(--ac-5);
+        background-color: var(--ac-4);
 
         &:hover {
+            color: var(--inverse);
             border-color: var(--ac-2);
-            background-color: var(--ac-3);
         }
 
         &:not(.active):focus {
@@ -74,30 +74,28 @@ hr { border: none; border-top: 1px solid var(--bg-3)  }
     }
 
     &.stylus {
-        color: var(--inverse);
+        color: var(--fg-1);
         border-color: var(--st-3);
-        background-color: var(--st-5);
+        background-color: var(--st-4);
 
-        &::after { color: var(--inverse) }
+        &::after { color: inherit }
 
         &:hover {
+            color: var(--inverse);
             border-color: var(--st-2);
-            background-color: var(--st-3);
         }
 
         &:not(.active):focus {
             color: var(--inverse);
             border-color: var(--st-2);
             box-shadow: 0 0 0 0.25rem var(--st-5);
         }
+    }
 
-
-        [data-color-scheme="light"] & {
-            border-color: var(--st-5);
-            &:not(.active):focus {
-                border-color: var(--st-5);
-                box-shadow: 0 0 0 0.25rem var(--st-2);
-            }
+    // Override light mode colors.
+    [data-color-scheme="light"] & {
+        &.primary, &.stylus {
+            color: var(--inverse) !important;
         }
     }
 }

diff --git a/scss/ui/_vars.scss b/scss/ui/_vars.scss
@@ -8,7 +8,7 @@ $st-dark:  #27fffb;
 $bg-light: #eeeeee;
 $fg-light: #101010;
 $ac-light: #0b459b;
-$st-light: #66edd9;
+$st-light: darken(#66edd9, 60%);
 
 $mode: (
     "dark": (
@@ -24,14 +24,14 @@ $mode: (
         "fg-5": darken($fg-dark, 48%),
         "ac-1": darken($ac-dark,  0%),
         "ac-2": darken($ac-dark, 16%),
-        "ac-3": darken($ac-dark, 24%),
-        "ac-4": darken($ac-dark, 32%),
-        "ac-5": darken($ac-dark, 40%),
+        "ac-3": darken($ac-dark, 28%),
+        "ac-4": darken($ac-dark, 40%),
+        "ac-5": darken($ac-dark, 44%),
         "st-1": darken($st-dark,  0%),
-        "st-2": darken($st-dark, 20%),
-        "st-3": darken($st-dark, 28%),
-        "st-4": darken($st-dark, 32%),
-        "st-5": darken($st-dark, 40%),
+        "st-2": darken($st-dark, 18%),
+        "st-3": darken($st-dark, 30%),
+        "st-4": darken($st-dark, 42%),
+        "st-5": darken($st-dark, 46%),
         "bg-t": transparentize($bg-dark, 0.3),
         "sh-m": "0 4px 12px -2px #0006, 0 6px 4px -4px #0002",
     ),
@@ -47,15 +47,15 @@ $mode: (
         "fg-4": lighten($fg-light, 24%),
         "fg-5": lighten($fg-light, 32%),
         "ac-1": lighten($ac-light,  0%),
-        "ac-2": lighten($ac-light, 16%),
-        "ac-3": lighten($ac-light, 24%),
-        "ac-4": lighten($ac-light, 32%),
-        "ac-5": lighten($ac-light, 40%),
-        "st-1": darken($st-light,  0%),
-        "st-2": darken($st-light, 20%),
-        "st-3": darken($st-light, 28%),
-        "st-4": darken($st-light, 32%),
-        "st-5": darken($st-light, 40%),
+        "ac-2": lighten($ac-light,  8%),
+        "ac-3": lighten($ac-light, 16%),
+        "ac-4": lighten($ac-light, 24%),
+        "ac-5": lighten($ac-light, 48%),
+        "st-1": lighten($st-light,  0%),
+        "st-2": lighten($st-light,  8%),
+        "st-3": lighten($st-light, 16%),
+        "st-4": lighten($st-light, 24%),
+        "st-5": transparentize(lighten($st-light, 24%), 0.5),
         "bg-t": transparentize($bg-light, 0.2),
         "sh-m": "0 4px 16px -4px #0004, 0 4px 4px -4px #0001",
     ),