launcher: add round style

scss/launcher.scss

@@ -13,6 +13,15 @@
             background-color: color.change($colour, $alpha: 0.7);
         }
 
+        .result:focus {
+            color: $colour;
+
+            .sublabel {
+                color: color.mix(scheme.$subtext0, $colour, 60%);
+            }
+        }
+
+        &.lines {
             .search-bar {
                 .mode {
                     @include lib.border($colour, $width: 2);
@@ -37,6 +46,21 @@
                     color: color.mix($colour, scheme.$base, 80%);
                 }
             }
+
+            .result:focus {
+                border-bottom: lib.s(2) solid $colour;
+            }
+        }
+
+        &.round {
+            .search-bar .mode {
+                background-color: $colour;
+            }
+
+            .mode-switcher .mode.selected {
+                color: $colour;
+            }
+        }
     }
 }
 
@@ -65,14 +89,19 @@
             @include lib.rounded(5);
             @include lib.element-decel;
 
-            padding: lib.s(5);
+            padding: lib.s(5) lib.s(10);
+
+            @include lib.spacing(3);
+
+            .icon {
+                font-size: lib.s(20);
+            }
         }
     }
 
     .mode-switcher .mode {
         @include lib.element-decel;
 
-        border-top: lib.s(2) solid transparent;
         padding-top: lib.s(10);
 
         .icon {
@@ -87,7 +116,6 @@
     .result {
         @include lib.element-decel;
 
-        border-bottom: lib.s(2) solid transparent;
         padding-left: lib.s(10);
 
         .icon {
@@ -99,6 +127,8 @@
         }
 
         .sublabel {
+            @include lib.element-decel;
+
             color: scheme.$subtext0;
             font-size: lib.s(14);
         }
@@ -115,17 +145,8 @@
             background-color: scheme.$surface0;
         }
 
-        &:focus {
-            border-bottom: lib.s(2) solid scheme.$red;
-            color: scheme.$red;
-
-            .sublabel {
-                color: color.mix(scheme.$red, scheme.$base, 70%);
-            }
-        }
-
         &:active {
-            background-color: scheme.$surface1;
+            background-color: color.mix(scheme.$surface0, scheme.$surface1, 70%);
         }
     }
 
@@ -140,6 +161,8 @@
     }
 
     .swatches {
+        margin-bottom: lib.s(5);
+
         @include lib.spacing(3);
     }
 
@@ -168,8 +191,6 @@
     }
 
     .wallpaper {
-        margin: lib.s(3) 0;
-
         .thumbnail {
             background-size: cover;
             background-position: center;
@@ -211,4 +232,89 @@
             min-height: lib.s(160);
         }
     }
+
+    &.lines {
+        .mode-switcher .mode {
+            border-top: lib.s(2) solid transparent;
+        }
+
+        .result {
+            border-bottom: lib.s(2) solid transparent;
+        }
+    }
+
+    &.round {
+        .search-bar {
+            .mode {
+                @include lib.rounded(10);
+
+                color: color.change(scheme.$base, $alpha: 1);
+
+                .icon {
+                    color: color.change(scheme.$base, $alpha: 1);
+                }
+            }
+
+            .entry {
+                @include lib.rounded(10);
+
+                padding: lib.s(5) lib.s(10);
+                background-color: color.mix(scheme.$base, scheme.$surface0, 30%);
+            }
+        }
+
+        .mode-switcher {
+            padding-top: lib.s(10);
+
+            @include lib.spacing(10);
+
+            .mode {
+                @include lib.rounded(10);
+
+                padding: lib.s(5);
+                background-color: color.mix(scheme.$base, scheme.$surface0, 50%);
+
+                &:not(.selected) .icon {
+                    color: scheme.$text;
+                }
+
+                &:hover,
+                &:focus {
+                    background-color: scheme.$surface0;
+                }
+
+                &:active {
+                    background-color: color.mix(scheme.$surface0, scheme.$surface1, 70%);
+                }
+            }
+        }
+
+        .result {
+            @include lib.rounded(10);
+
+            padding-right: lib.s(10);
+            margin-bottom: lib.s(5);
+            margin-right: lib.s(5);
+
+            &:focus {
+                background-color: scheme.$surface0;
+            }
+        }
+
+        .math .preview .result {
+            @include lib.rounded(20);
+
+            background-color: scheme.$surface0;
+            padding: lib.s(5) lib.s(10);
+        }
+
+        .wallpaper-container {
+            padding-right: 0;
+
+            .wallpaper:not(.compact) {
+                padding-top: lib.s(8);
+                padding-bottom: lib.s(3);
+            }
+        }
+    }
 }

src/config/defaults.ts

@@ -8,7 +8,7 @@ export default {
     // Modules
     bar: {
         vertical: true,
-        style: "gaps",
+        style: "gaps", // One of "gaps", "panel", "embedded"
         modules: {
             osIcon: {
                 enabled: true,
@@ -49,6 +49,7 @@ export default {
         },
     },
     launcher: {
+        style: "lines", // One of "lines", "round"
         actionPrefix: ">", // Prefix for launcher actions
         apps: {
             maxResults: 30, // Actual max results, -1 for infinite

src/config/types.ts

@@ -25,6 +25,7 @@ export default {
     "bar.modules.dateTime.detailedFormat": STR,
     "bar.modules.power.enabled": BOOL,
     // Launcher
+    "launcher.style": ["lines", "round"],
     "launcher.actionPrefix": STR,
     "launcher.apps.maxResults": NUM,
     "launcher.files.maxResults": NUM,

src/modules/launcher/actions.tsx

@@ -304,7 +304,7 @@ const Scheme = ({ scheme, name, colours }: { scheme?: string; name: string; colo
 const Wallpaper = ({ path, thumbnail }: IWallpaper) => (
     <Gtk.FlowBoxChild visible canFocus={false}>
         <button
-            className="result"
+            className="result wallpaper-container"
             cursor="pointer"
             onClicked={() => {
                 execAsync(`caelestia wallpaper -f ${path}`).catch(console.error);
@@ -326,7 +326,7 @@ const Wallpaper = ({ path, thumbnail }: IWallpaper) => (
 const Category = ({ path, wallpapers }: ICategory) => (
     <Gtk.FlowBoxChild visible canFocus={false}>
         <button
-            className="result"
+            className="result wallpaper-container"
             cursor="pointer"
             onClicked={() => {
                 execAsync(`caelestia wallpaper -d ${path}`).catch(console.error);

src/modules/launcher/index.tsx

@@ -24,7 +24,10 @@ const isAction = (text: string, action: string = "") => text.startsWith(config.a
 
 const SearchBar = ({ mode, entry }: { mode: Variable<Mode>; entry: Widget.Entry }) => (
     <box className="search-bar">
-        <label className="mode" label={bind(mode)} />
+        <box className="mode">
+            <label className="icon" label={bind(mode).as(getModeIcon)} />
+            <label label={bind(mode).as(getPrettyMode)} />
+        </box>
         {entry}
     </box>
 );
@@ -61,6 +64,7 @@ export default class Launcher extends PopupWindow {
         const mode = Variable<Mode>("apps");
         const content = Modes();
         const actions = new Actions(mode, entry);
+        const className = Variable.derive([mode, config.style], (m, s) => `launcher ${m} ${s}`);
 
         super({
             name: "launcher",
@@ -86,7 +90,8 @@ export default class Launcher extends PopupWindow {
                     vertical
                     halign={Gtk.Align.CENTER}
                     valign={Gtk.Align.CENTER}
-                    className={bind(mode).as(m => `launcher ${m}`)}
+                    className={bind(className)}
+                    onDestroy={() => className.drop()}
                 >
                     <SearchBar mode={mode} entry={entry} />
                     <stack

src/modules/launcher/modes.tsx

@@ -186,7 +186,7 @@ class Math extends Widget.Box implements LauncherContent {
                             />
                         </box>
                     </box>
-                    <box className="separator" />
+                    <box visible={bind(config.style).as(s => s === "lines")} className="separator" />
                 </box>
             </revealer>
         );