[feature] use css variables for select component

- Search field
- Notifications filter bar/account post bar
- Status prepend part ('x' boosted)
- body background color

app/javascript/flavours/glitch/styles/_mixins.scss

@@ -53,13 +53,13 @@
 
 @mixin search-input() {
   width: 100%;
-  border: 1px solid var(--color-accent-lines);
+  border: 1px solid var(--color-search-lines);
   border-radius: var(--drawer-border-radius);
   box-sizing: border-box;
-  color: var(--color-accent-fg);
+  color: var(--color-search-fg);
   font-family: inherit;
   font-size: inherit;
-  background: var(--color-accent-bg);
+  background: var(--color-search-bg);
 }
 
 @mixin search-popout() {

app/javascript/flavours/glitch/styles/basics.scss

@@ -8,11 +8,11 @@
 
 body {
   font-family: $font-sans-serif, sans-serif;
-  background: darken($ui-base-color, 7%);
+  background: var(--color-bg);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;
-  color: $primary-text-color;
+  color: var(--color-fg);
   text-rendering: optimizelegibility;
   font-feature-settings: 'kern';
   text-size-adjust: none;

app/javascript/flavours/glitch/styles/components/accounts.scss

@@ -361,9 +361,9 @@
   display: flex;
   gap: 8px;
   padding: 6px;
-  border: 1px solid var(--color-accent-lines);
+  border: 1px solid var(--color-notifications-lines);
   cursor: default;
-  background: var(--color-accent-bg);
+  background: var(--color-notifications-bg);
 
   a,
   button {
@@ -375,24 +375,25 @@
     min-width: 32px;
     border: 0;
     border-radius: var(--button-border-radius);
-    color: $ui-primary-color;
+    color: var(--color-notifications-fg);
     line-height: 20px;
     text-decoration: none;
     background: transparent;
+    transition: all 0.3s;
 
     &:focus-visible,
     &:hover {
-      background: darken($ui-base-color, 10%);
+      background: var(--color-notifications-bg--hover);
     }
   }
 
   a.active,
   button.active {
-    background: lighten($ui-base-color, 4%);
+    background: var(--color-notifications-bg--active);
 
     &:focus-visible,
     &:hover {
-      background: lighten($ui-base-color, 10%);
+      background: var(--color-notifications-bg--hover);
     }
   }
 
@@ -406,7 +407,7 @@
       right: calc(100% + 3px);
       width: 2px;
       height: 24px;
-      background: lighten($ui-base-color, 10%);
+      background: var(--color-notifications-lines);
       content: '';
     }
   }

app/javascript/flavours/glitch/styles/components/search.scss

@@ -20,12 +20,17 @@
   line-height: 20px;
 
   &::placeholder {
-    color: lighten($darker-text-color, 4%);
+    color: var(--color-search-placeholder);
     font-weight: 500;
   }
 
   &:focus {
-    background: darken($ui-base-color, 4%);
+    color: var(--color-search-fg--focus);
+    background: var(--color-search-bg--focus);
+  }
+
+  &:focus::placeholder {
+    color: var(--color-search-placeholder--focus);
   }
 }
 

app/javascript/flavours/glitch/styles/gts.scss

@@ -4,16 +4,6 @@
 :root {
   --drawer-border-radius: 8px;
   --button-border-radius: 6px;
-
-  /* Base */
-  --color-bg: #261f3c;
-  --color-fg: #d6d2e0;
-  --color-lines: #3d4455;
-
-  /* Accent */
-  --color-accent-bg: #1f232b;
-  --color-accent-fg: #ffffff;
-  --color-accent-lines: rgba(172, 172, 249, 0.3);
 }
 
 /* Icons debug */

app/javascript/flavours/glitch/styles/gts/colors.scss

@@ -3,13 +3,17 @@
     color-scheme: dark;
 
     /* Base */
-    --color-fg: #d6d2e0;
+    --color-fg: #fff;
+    --color-bg: #191b22;
+    --color-lines: #3d4455;
 
     /* Accent */
     --color-accent: #8c8dff;
     --color-accent-hover: #a3a3ff;
     --color-accent-focus: var(--color-accent-hover);
+    --color-accent-bg: #1f232b;
     --color-accent-fg: #9baec8;
+    --color-accent-lines: rgba(172, 172, 249, 0.3);
     --color-accent-muted-fg: #666f7a;
 
     /* Secondary */
@@ -18,6 +22,26 @@
     --color-content-fg: var(--color-fg);
     --color-content-secondary-bg: var(--color-secondary-bg);
 
+    /* UI */
+    --color-ui-base: ;
+    --color-ui-bg: ;
+
+    /* Notifications */
+    --color-notifications-bg: var(--color-accent-bg);
+    --color-notifications-bg--active: #313543;
+    --color-notifications-bg--hover: var(--color-lines);
+    --color-notifications-fg: var(--color-accent-fg);
+    --color-notifications-lines: var(--color-accent-lines);
+
+    /* Search */
+    --color-search-bg: var(--color-accent-bg);
+    --color-search-bg--focus: #1f232b;
+    --color-search-fg: var(--color-fg);
+    --color-search-fg--focus: var(--color-fg);
+    --color-search-lines: var(--color-accent-lines);
+    --color-search-placeholder: #9baec8;
+    --color-search-placeholder--focus: #5e6a7a;
+
     /* Status */
     --color-status-fg: ;
     --color-status-bg: #282c37;

app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss

@@ -32,7 +32,7 @@
     text-decoration-color: var(--color-accent-muted-fg);
 
     &:hover {
-        color: var(--color-accent-hover);
+        color: inherit;
         text-decoration-thickness: 2px;
     }