improve legibility in dark theme

make focused inputs more prominent

Author: 0xdefoliate

src/components/Button/Button.sass

@@ -28,8 +28,8 @@
 
     padding: 10px 8px
 
-    @include colour.background($light: bg, $dark: grey-300)
-    @include colour.foreground($light: ButtonText, $dark: grey-900)
+    @include colour.background($light: bg, $dark: grey-200)
+    @include colour.foreground($light: ButtonText, $dark: grey-800)
 
     @include state.disabled
         @include colour.background(grey-100)
@@ -59,27 +59,26 @@
     @include shadow(1px, 2px, $blur: 2px, $alpha: 0.1)
 
     @include state.hover
-        filter: contrast(0.95)
+        filter: brightness(0.95)
         @include shadow(1px, 2px, $blur: 8px, $alpha: 0.15)
 
     @include state.active
-        filter: contrast(0.65)
+        filter: brightness(0.8)
 
     @include state.focus-visible
         @include _button-border(colour.get(primary))
 
 
 @include extension($source: Button, $new: primary)
 
-    @include colour.background(primary)
+    @include colour.background($light: primary, $dark: primary-darker)
     @include colour.foreground(white)
     @include colour.border(primary)
 
-    transition-property: background-color
-
     @include state.active
-        filter: none
-        @include colour.background($light: primary-darker, $dark: rgb(0, 156, 255))
+        filter: brightness(0.75)
+        //@include colour.background($light: primary-darker, $dark: rgb(0, 77, 186))
+        //@include colour.border(rgb(0, 102, 255))
 
     @include state.focus-visible
         @include shadow(0, 0, $important: true)

src/components/Dropdown/components/Dropdown/Dropdown.sass

@@ -71,6 +71,8 @@
 
     box-sizing: border-box
 
+    border-bottom-width: 2px
+
     & > .text
         max-width: calc(100% - 16px)
         overflow: hidden

src/components/Slider/Slider.sass

@@ -30,6 +30,8 @@
 
     border-radius: 4px
 
+    border-bottom-width: 2px
+
     @include _slider-thumb
         width: 12px
         height: 28px

src/components/TextBox/TextBox.sass

@@ -26,3 +26,5 @@
     padding: 6px 4px
 
     outline: none
+
+    border-bottom-width: 2px

src/index.sass

@@ -45,7 +45,7 @@
 
         outline: none
 
-        @include colour.background($light: bg, $dark: grey-200)
+        @include colour.background($light: bg, $dark: grey-100)
         @include border()
 
         @include colour.foreground(fg)