refactor CSS colours

web/sass/_variables.sass

@@ -1 +1,29 @@
 $body-width: min(500px, calc(100vw - 2rem))
+
+$accent: #643A71
+$fg: #000
+$card-bg: #eee
+$card-fg: #000
+$good-bg: #0f04
+$good-fg: #040
+$bad-bg: #400f
+$bad-fg: #400
+$input-bg: #fff
+$input-fg: #000
+$scroll-thumb: #8888
+$scroll-thumb-active: #666
+$scroll-hint: #0006
+$results-bg: #fff
+$results-border: #aaa
+$results-placeholder: #666
+$track-unlocked: #aaa
+$track-locked: #eee
+$track-played: #5a5
+$control-bg: #eee
+$control-fg: #444
+$control-disabled-fg: #666
+$control-active-fg: #000
+$primary-input-bg: #282
+$primary-input-fg: #fff
+$secondary-input-bg: #ccc
+$secondary-input-fg: #000

web/sass/card.sass

@@ -15,8 +15,8 @@
     padding: 1rem
     gap: 0.5rem 1rem
     align-items: center
-    background: #eee
-    color: #000
+    background: $card-bg
+    color: $card-fg
     margin: 0 2.5%
     position: relative
     transition: background 50ms linear
@@ -54,7 +54,7 @@
         left: 0
         bottom: 0
         right: 0
-        border: 0px solid black
+        border: 0px solid $input-fg
         border-radius: 1rem
         transition: border-width 50ms linear
         pointer-events: none
@@ -103,18 +103,18 @@
         text-decoration: underline
 
 .card--active
-    background: #fff
+    background: $input-bg
 
     &:after
         border-width: 4px
 
 .card--good
-    background: #0f04
-    color: #040
+    background: $good-bg
+    color: $good-fg
 
 .card--bad
-    background: #f004
-    color: #400
+    background: $bad-bg
+    color: $bad-fg
 
 .card__progress
     position: absolute
@@ -123,7 +123,7 @@
     left: 0
     border-radius: 1rem
     pointer-events: none
-    background: #0002
+    background: $bad-bg
 
 .card__icon
     grid-area: thumb

web/sass/forms.sass

@@ -17,10 +17,10 @@
 .input
     font: inherit
     font-size: 1.2rem
-    border: 4px solid #000
+    border: 4px solid $input-fg
     border-radius: 2rem
     padding: 0.5rem 1rem
-    background: #fff
+    background: $input-bg
     width: 100%
 
 .search__results
@@ -33,11 +33,11 @@
 .search__results__result, .search__results__placeholder
     font: inherit
     text-align: left
-    background: #fff
+    background: $results-bg
     width: 100%
     box-sizing: border-box
     padding: 0.2rem 0.4rem
-    border: 1px solid #aaa
+    border: 1px solid $results-border
 
     &:not(:last-child)
         border-bottom-width: 0
@@ -46,7 +46,7 @@
     cursor: pointer
 
 .search__results__placeholder
-    color: #666
+    color: $results-placeholder
     font-style: italic
 
 .submit
@@ -55,9 +55,9 @@
     border-radius: 2rem
     padding: 0.5rem 1rem
     cursor: pointer
-    background: #282
-    color: #fff
+    background: $primary-input-bg
+    color: $primary-input-fg
 
 .submit--secondary
-    background: #ccc
-    color: #000
+    background: $secondary-input-bg
+    color: $secondary-input-fg

web/sass/nav.sass

@@ -3,7 +3,7 @@
     align-items: center
     gap: 1rem
     padding: 0.5rem 1rem
-    border-bottom: 1px solid black
+    border-bottom: 1px solid $fg
     box-sizing: border-box
     width: $body-width
 
@@ -13,11 +13,11 @@
 .nav__title
     font-size: 1.5rem
     font-weight: 900
-    color: black
+    color: $fg
     text-decoration: none
     cursor: pointer
 
 .nav__icon
     font-size: 1.5rem
     cursor: pointer
-    color: #000
+    color: $fg

web/sass/player.sass

@@ -9,13 +9,13 @@
     height: 2rem
 
 .play_bar__seg--unlocked
-    background: #aaa
+    background: $track-unlocked
 
 .play_bar__seg--locked
-    background: #eee
+    background: $track-locked
 
 .play_bar__seg__fill
-    background: #5a5
+    background: $track-played
     height: 2rem
 
 .controls
@@ -30,8 +30,8 @@
     background: inherit
     font: inherit
     font-size: 2.5rem
-    background: #eee
-    color: #444
+    background: $control-bg
+    color: $control-fg
     width: 2em
     height: 2em
     border-radius: 1em
@@ -44,10 +44,10 @@
     font-size: 3rem
 
 .control--disabled
-    color: #666
+    color: $control-disabled-fg
 
 .control--enabled
     cursor: pointer
 
     &:hover
-        color: #000
+        color: $control-active-fg

web/sass/scrollable.sass

@@ -14,12 +14,12 @@
 
     &::-webkit-scrollbar-thumb
         width: 18px
-        background: #8888
+        background: $scroll-thumb
         border: 6px solid white
         border-radius: 9px
         background-clip: padding-box
         &:hover
-            background: #666
+            background: $scroll-thumb-active
 
     &:before, &:after
         content: ""
@@ -31,11 +31,11 @@
 
     &:before
         top: 0
-        box-shadow: 0 0 20px 10px #0006
+        box-shadow: 0 0 20px 10px $scroll-hint
 
     &:after
         bottom: 0
-        box-shadow: 0 0 20px 10px #0006
+        box-shadow: 0 0 20px 10px $scroll-hint
 
 .scrollable--scroll-up:before
     opacity: 1