Extensible, evenly spaced waybar styling (#156)

* Add override to only require one network interface online

* refactor: extensible, evenly spaced waybar style.css

- Use @define-color directive to define colour variables for each theme
(@foreground for text, @background for background-color)
- apply the colour variables in the main theme config, making it more
extensible
- make waybar elements more evenly spaced with consistent margin and
padding values
- add migration to apply the above changes to existing users

* Update style.css

better pixel spacing

---------

Co-authored-by: Ryan Hughes <1630358+ryanrhughes@users.noreply.github.com>
Co-authored-by: David Heinemeier Hansson <david@hey.com>

config/waybar/style.css

@@ -1,4 +1,7 @@
 * {
+  background-color: @background;
+  color: @foreground;
+
   border: none;
   border-radius: 0;
   min-height: 0;
@@ -6,14 +9,18 @@
   font-size: 12px;
 }
 
-#workspaces {
-  margin-left: 7px;
+.modules-left {
+  margin-left: 8px;
+}
+
+.modules-right {
+  margin-right: 8px;
 }
 
 #workspaces button {
   all: initial;
-  padding: 2px 6px;
-  margin-right: 3px;
+  padding: 0 6px;
+  margin: 0 1.5px;
 }
 
 #custom-dropbox,
@@ -26,7 +33,7 @@
 #clock,
 #custom-power-menu {
   min-width: 12px;
-  margin-right: 13px;
+  margin: 0 10px;
 }
 
 #custom-expand-icon {