feat: toggle borders option

app.tsx

@@ -28,6 +28,13 @@ const applyTransparency = (name: string, hex: string) => {
 
 const applyVibrancy = (hex: string) => (style.vibrant.get() ? `color.scale(${hex}, $saturation: 40%)` : hex);
 
+const getVars = () => {
+    const vars = { light: Palette.get_default().mode === "light", borders: style.borders.get() };
+    return Object.entries(vars)
+        .map(([k, v]) => `$${k}: ${v}`)
+        .join(";");
+};
+
 const styleLoader = new (class {
     #running = false;
     #dirty = false;
@@ -47,10 +54,7 @@ const styleLoader = new (class {
         const schemeColours = Object.entries(Palette.get_default().colours)
             .map(([name, hex]) => `$${name}: ${applyVibrancy(applyTransparency(name, hex))};`)
             .join("\n");
-        await writeFileAsync(
+        await writeFileAsync(`${SRC}/scss/scheme/_index.scss`, `@use "sass:color";\n${getVars()};\n${schemeColours}`);
-            `${SRC}/scss/scheme/_index.scss`,
-            `@use "sass:color";\n$light: ${Palette.get_default().mode === "light"};\n${schemeColours}`
-        );
         App.apply_css(await execAsync(`sass ${SRC}/style.scss`), true);
     }
 })();
@@ -66,7 +70,6 @@ App.start({
         await initConfig();
 
         loadStyleAsync().catch(console.error);
-        style.transparency.subscribe(() => loadStyleAsync().catch(console.error));
         Palette.get_default().connect("notify::colours", () => loadStyleAsync().catch(console.error));
         Palette.get_default().connect("notify::mode", () => loadStyleAsync().catch(console.error));
 

scss/_lib.scss

@@ -12,8 +12,10 @@ $scale: 0.068rem;
     -gtk-outline-radius: s($tl) s($tr) s($br) s($bl);
 }
 
-@mixin border($colour, $alpha: 1, $width: 1, $style: solid) {
+@mixin border($colour, $alpha: 1, $width: 1, $style: solid, $force: false) {
+    @if $force or scheme.$borders {
         border: s($width) $style color.change($colour, $alpha: $alpha);
+    }
 }
 
 @mixin shadow($colour: black, $alpha: 0.64, $x: 0, $y: 0, $blur: 3, $spread: 0) {

scss/bar.scss

@@ -15,6 +15,7 @@
     @include font.mono;
 
     font-size: lib.s(14);
+    padding-right: lib.s(3);
 
     label.icon {
         font-size: lib.s(18);
@@ -190,10 +191,24 @@
 
         .os-icon {
             @include lib.border(scheme.$yellow);
+
+            @if not scheme.$borders {
+                @include lib.shadow;
+
+                background-color: scheme.$yellow;
+                color: scheme.$base;
+            }
         }
 
         .power {
             @include lib.border(scheme.$red);
+
+            @if not scheme.$borders {
+                @include lib.shadow;
+
+                background-color: scheme.$red;
+                color: scheme.$base;
+            }
         }
 
         &.horizontal {

scss/common.scss

@@ -14,10 +14,8 @@ label.icon {
 
 .notification {
     .inner {
-        @include lib.rounded(8);
         @include font.main;
 
-        background-color: scheme.$base;
         color: scheme.$text;
         padding: lib.s(10) lib.s(12);
 

scss/launcher.scss

@@ -5,6 +5,8 @@
 
 @mixin launcher($mode, $colour) {
     &.#{$mode} {
+        @include lib.border($colour, 0.7, 2);
+
         label.icon {
             color: $colour;
         }
@@ -24,7 +26,7 @@
         &.lines {
             .search-bar {
                 .mode {
-                    @include lib.border($colour, $width: 2);
+                    @include lib.border($colour, $width: 2, $force: true);
                 }
 
                 .entry {
@@ -66,6 +68,7 @@
 
 .launcher {
     @include lib.rounded(10);
+    @include lib.element-decel;
     @include lib.shadow;
     @include font.mono;
 
@@ -176,7 +179,7 @@
             min-height: lib.s(32);
 
             &.left {
-                @include lib.border(scheme.$overlay0, 0.3);
+                @include lib.border(scheme.$overlay0, 0.3, $force: true);
 
                 border-right: none;
                 border-top-right-radius: 0;

scss/notifpopups.scss

@@ -16,7 +16,7 @@
 .notifpopups {
     min-width: lib.s(425);
     padding-left: lib.s(10); // So notifications can overshoot for init animation
-    padding-right: lib.s(10);
+    padding-right: lib.s(5);
     padding-top: lib.s(5);
 
     .notification {
@@ -25,9 +25,11 @@
         }
 
         .inner {
-            @include lib.rounded(8);
+            @include lib.rounded(10);
             @include lib.shadow;
 
+            background-color: scheme.$base;
+
             &.low {
                 @include popup(scheme.$overlay0);
             }
@@ -39,6 +41,10 @@
             &.critical {
                 @include lib.border(scheme.$error, 0.5);
                 @include popup(scheme.$error);
+
+                @if not scheme.$borders {
+                    background-color: color.mix(scheme.$base, scheme.$error, 95%);
+                }
             }
         }
     }

scss/session.scss

@@ -8,7 +8,7 @@
 
     .inner {
         @include lib.rounded(8);
-        @include lib.border(scheme.$overlay0, 0.1);
+        @include lib.border(scheme.$flamingo, 0.5, 2);
         @include lib.shadow;
         @include font.mono;
 

scss/sidebar.scss

@@ -240,6 +240,10 @@
 
             &.low {
                 @include notification(if(scheme.$light, scheme.$surface1, scheme.$overlay0));
+
+                @if not scheme.$borders {
+                    background-color: color.change(scheme.$surface0, $alpha: 0.4);
+                }
             }
 
             &.normal {
@@ -250,6 +254,10 @@
             &.critical {
                 @include lib.border(scheme.$error, 0.8);
                 @include notification(scheme.$error);
+
+                @if not scheme.$borders {
+                    background-color: color.change(color.mix(scheme.$surface1, scheme.$error, 80%), $alpha: 0.4);
+                }
             }
         }
 

scss/widgets.scss

@@ -40,11 +40,10 @@ menu {
     font-size: lib.s(14);
 
     & > menuitem {
+        @include lib.element-decel;
         @include lib.rounded(8);
 
         padding: lib.s(5) lib.s(8);
-        background: transparent;
-        transition: 0.2s ease background-color;
 
         &:hover,
         &:focus {
@@ -84,19 +83,25 @@ menu {
 
 tooltip,
 .tooltip {
-    @include lib.rounded(5);
+    @include lib.rounded(10);
     @include lib.border(scheme.$primary, 0.7);
     @include font.mono;
 
     background-color: scheme.$surface0;
     color: scheme.$text;
-    padding: lib.s(4) lib.s(8);
+    padding: lib.s(5) lib.s(10);
 }
 
 tooltip {
     @include -appear(200ms);
 }
 
+.tooltip {
+    @include lib.shadow;
+
+    margin: lib.s(3);
+}
+
 scrollbar {
     slider {
         @include lib.rounded(1000);
@@ -125,7 +130,7 @@ popover {
     @include font.mono;
 
     padding: lib.s(8);
-    background-color: scheme.$base;
+    background-color: color.mix(scheme.$base, scheme.$yellow, 90%);
     color: scheme.$text;
     font-size: lib.s(14);
 }

src/config/defaults.ts

@@ -3,6 +3,7 @@ import { Astal } from "astal/gtk3";
 export default {
     style: {
         transparency: "normal", // One of "off", "normal", "high"
+        borders: true,
         vibrant: false, // Extra saturation
     },
     // Modules

src/config/types.ts

@@ -6,6 +6,7 @@ const OBJ_ARR = (shape: object) => ARR(JSON.stringify(shape));
 
 export default {
     "style.transparency": ["off", "normal", "high"],
+    "style.borders": BOOL,
     "style.vibrant": BOOL,
     // Bar
     "bar.vertical": BOOL,