ags

home/ags/style/extra.scss

@@ -0,0 +1,67 @@
+@import './mixins/button.scss';
+
+* {
+    font-size: $font-size;
+    font-family: $font-name;
+}
+
+separator {
+    &.horizontal {
+        min-height: $border-width;
+    }
+
+    &.vertical {
+        min-width: $border-width;
+    }
+}
+
+window.popup {
+    >* {
+        border: none;
+        box-shadow: none;
+    }
+
+    menu {
+        border-radius: $popover-radius;
+        background-color: $bg;
+        padding: $popover-padding;
+        border: $border-width solid $popover-border-color;
+
+        separator {
+            background-color: $border-color;
+        }
+
+        menuitem {
+            @include button;
+            padding: $spacing * .5;
+            margin: ($spacing * .5) 0;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+tooltip {
+    * {
+        all: unset;
+    }
+
+    background-color: transparent;
+    border: none;
+
+    >*>* {
+        background-color: $bg;
+        border-radius: $radius;
+        border: $border-width solid $popover-border-color;
+        color: $fg;
+        padding: 8px;
+        margin: 4px;
+        box-shadow: 0 0 3px 0 $shadow-color;
+    }
+}

home/ags/style/mixins/a11y-button.scss

@@ -0,0 +1,48 @@
+@import './button';
+
+@mixin accs-button($flat: false, $reactive: true) {
+    @include unset;
+    color: $fg;
+
+    >* {
+        border-radius: $radius;
+        transition: $transition;
+
+        @if $flat {
+            background-color: transparent;
+            box-shadow: none;
+        }
+
+        @else {
+            background-color: $widget-bg;
+            box-shadow: inset 0 0 0 $border-width $border-color;
+        }
+    }
+
+
+    @if $reactive {
+
+        &:focus>*,
+        &.focused>* {
+            @include button-focus;
+        }
+
+        &:hover>* {
+            @include button-hover;
+        }
+
+        &:active,
+        &.active,
+        &.on,
+        &:checked {
+            >* {
+                @include button-active;
+            }
+
+            &:hover>* {
+                box-shadow: inset 0 0 0 $border-width $border-color,
+                    inset 0 0 0 99px $hover-bg;
+            }
+        }
+    }
+}

home/ags/style/mixins/button.scss

@@ -0,0 +1,70 @@
+@mixin button-focus() {
+    box-shadow: inset 0 0 0 $border-width $primary-bg;
+    background-color: $hover-bg;
+    color: $hover-fg;
+}
+
+@mixin button-hover() {
+    box-shadow: inset 0 0 0 $border-width $border-color;
+    background-color: $hover-bg;
+    color: $hover-fg;
+}
+
+@mixin button-active() {
+    box-shadow: inset 0 0 0 $border-width $border-color;
+    background-image: $active-gradient;
+    background-color: $primary-bg;
+    color: $primary-fg;
+}
+
+@mixin button-disabled() {
+    box-shadow: none;
+    background-color: transparent;
+    color: transparentize($fg, 0.7);
+}
+
+@mixin button($flat: false, $reactive: true, $radius: $radius, $focusable: true) {
+    all: unset;
+    transition: $transition;
+    border-radius: $radius;
+    color: $fg;
+
+    @if $flat {
+        background-color: transparent;
+        background-image: none;
+        box-shadow: none;
+    }
+
+    @else {
+        background-color: $widget-bg;
+        box-shadow: inset 0 0 0 $border-width $border-color;
+    }
+
+    @if $reactive {
+        @if $focusable {
+            &:focus {
+                @include button-focus;
+            }
+        }
+
+        &:hover {
+            @include button-hover;
+        }
+
+        &:active,
+        &.on,
+        &.active,
+        &:checked {
+            @include button-active;
+
+            &:hover {
+                box-shadow: inset 0 0 0 $border-width $border-color,
+                    inset 0 0 0 99px $hover-bg;
+            }
+        }
+    }
+
+    &:disabled {
+        @include button-disabled;
+    }
+}

home/ags/style/mixins/floating-widget.scss

@@ -0,0 +1,12 @@
+@mixin floating-widget {
+    @if $shadows {
+        box-shadow: 0 0 5px 0 $shadow-color;
+    }
+
+    margin: max($spacing, 8px);
+    border: $border-width solid $popover-border-color;
+    background-color: $bg;
+    color: $fg;
+    border-radius: $popover-radius;
+    padding: $popover-padding;
+}

home/ags/style/mixins/hidden.scss

@@ -0,0 +1,15 @@
+@mixin hidden {
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    box-shadow: none;
+    -gtk-icon-transform: scale(0);
+
+    * {
+        background-color: transparent;
+        background-image: none;
+        border-color: transparent;
+        box-shadow: none;
+        -gtk-icon-transform: scale(0);
+    }
+}

home/ags/style/mixins/media.scss

@@ -0,0 +1,42 @@
+@mixin media() {
+    @include widget;
+    padding: $padding;
+
+    .cover {
+        @if $shadows {
+            box-shadow: 2px 2px 2px 0 $shadow-color;
+        }
+
+        background-size: cover;
+        background-position: center;
+        border-radius: $radius*0.8;
+        margin-right: $spacing;
+    }
+
+    button {
+        @include button($flat: true);
+        padding: $padding * .5;
+
+        &.play-pause {
+            margin: 0 ($spacing * .5);
+        }
+
+        image {
+            font-size: 1.2em;
+        }
+    }
+
+    .artist {
+        color: transparentize($fg, .2);
+        font-size: .9em;
+    }
+
+    scale {
+        @include slider($width: .5em, $slider: false, $gradient: linear-gradient($fg, $fg));
+        margin-bottom: $padding * .5;
+
+        trough {
+            border: none;
+        }
+    }
+}

home/ags/style/mixins/scrollable.scss

@@ -0,0 +1,42 @@
+@mixin scrollable($top: false, $bottom: false) {
+
+    @if $top and $shadows {
+        undershoot.top {
+            background: linear-gradient(to bottom, $shadow-color, transparent, transparent, transparent, transparent, transparent);
+        }
+    }
+
+    @if $bottom and $shadows {
+        undershoot.bottom {
+            background: linear-gradient(to top, $shadow-color, transparent, transparent, transparent, transparent, transparent);
+        }
+    }
+
+    scrollbar,
+    scrollbar * {
+        all: unset;
+    }
+
+    scrollbar.vertical {
+        transition: $transition;
+        background-color: transparentize($bg, 0.7);
+
+        &:hover {
+            background-color: transparentize($bg, 0.3);
+
+            slider {
+                background-color: transparentize($fg, 0.3);
+                min-width: .6em;
+            }
+        }
+    }
+
+
+    scrollbar.vertical slider {
+        background-color: transparentize($fg, 0.5);
+        border-radius: $radius;
+        min-width: .4em;
+        min-height: 2em;
+        transition: $transition;
+    }
+}

home/ags/style/mixins/slider.scss

@@ -0,0 +1,74 @@
+@import './unset';
+
+@mixin slider($width: 0.7em, $slider-width: .5em, $gradient: $active-gradient, $slider: true, $focusable: true, $radius: $radius) {
+    @include unset($rec: true);
+
+    trough {
+        transition: $transition;
+        border-radius: $radius;
+        border: $border;
+        background-color: $widget-bg;
+        min-height: $width;
+        min-width: $width;
+
+        highlight,
+        progress {
+            border-radius: max($radius - $border-width, 0);
+            background-image: $gradient;
+            min-height: $width;
+            min-width: $width;
+        }
+    }
+
+    slider {
+        box-shadow: none;
+        background-color: transparent;
+        border: $border-width solid transparent;
+        transition: $transition;
+        border-radius: $radius;
+        min-height: $width;
+        min-width: $width;
+        margin: -$slider-width;
+    }
+
+    &:hover {
+        trough {
+            background-color: $hover-bg;
+        }
+
+        slider {
+            @if $slider {
+                background-color: $fg;
+                border-color: $border-color;
+
+                @if $shadows {
+                    box-shadow: 0 0 3px 0 $shadow-color;
+                }
+            }
+        }
+    }
+
+    &:disabled {
+
+        highlight,
+        progress {
+            background-color: transparentize($fg, 0.4);
+            background-image: none;
+        }
+    }
+
+    @if $focusable {
+        trough:focus {
+            background-color: $hover-bg;
+            box-shadow: inset 0 0 0 $border-width $primary-bg;
+
+            slider {
+                @if $slider {
+                    background-color: $fg;
+                    box-shadow: inset 0 0 0 $border-width $primary-bg;
+                }
+            }
+        }
+
+    }
+}

home/ags/style/mixins/spacing.scss

@@ -0,0 +1,53 @@
+@mixin spacing($multiplier: 1, $spacing: $spacing, $rec: false) {
+    &.horizontal>* {
+        margin: 0 calc($spacing * $multiplier / 2);
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &.vertical>* {
+        margin: calc($spacing * $multiplier / 2) 0;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    @if $rec {
+        box {
+            &.horizontal>* {
+                margin: 0 $spacing * $multiplier / 2;
+
+                &:first-child {
+                    margin-left: 0;
+                }
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+
+            &.vertical>* {
+                margin: $spacing * $multiplier / 2 0;
+
+                &:first-child {
+                    margin-top: 0;
+                }
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}

home/ags/style/mixins/switch.scss

@@ -0,0 +1,16 @@
+@import './button';
+
+@mixin switch {
+    @include button;
+
+    slider {
+        background-color: $primary-fg;
+        border-radius: $radius;
+        min-width: 24px;
+        min-height: 24px;
+    }
+
+    image {
+        color: transparent;
+    }
+}

home/ags/style/mixins/unset.scss

@@ -0,0 +1,9 @@
+@mixin unset($rec: false) {
+    all: unset;
+
+    @if $rec {
+        * {
+            all: unset
+        }
+    }
+}

home/ags/style/mixins/widget.scss

@@ -0,0 +1,7 @@
+@mixin widget {
+    transition: $transition;
+    border-radius: $radius;
+    color: $fg;
+    background-color: $widget-bg;
+    border: $border;
+}

home/ags/style/style.ts

@@ -0,0 +1,110 @@
+/* eslint-disable max-len */
+import { type Opt } from "lib/option"
+import options from "options"
+import { bash, dependencies } from "lib/utils"
+
+const deps = [
+    "font",
+    "theme",
+    "bar.flatButtons",
+    "bar.position",
+    "bar.battery.charging",
+    "bar.battery.blocks",
+]
+
+const {
+    dark,
+    light,
+    blur,
+    scheme,
+    padding,
+    spacing,
+    radius,
+    shadows,
+    widget,
+    border,
+} = options.theme
+
+const popoverPaddingMultiplier = 1.6
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const t = (dark: Opt<any> | string, light: Opt<any> | string) => scheme.value === "dark"
+    ? `${dark}` : `${light}`
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const $ = (name: string, value: string | Opt<any>) => `$${name}: ${value};`
+
+const variables = () => [
+    $("bg", blur.value ? `transparentize(${t(dark.bg, light.bg)}, ${blur.value / 100})` : t(dark.bg, light.bg)),
+    $("fg", t(dark.fg, light.fg)),
+
+    $("primary-bg", t(dark.primary.bg, light.primary.bg)),
+    $("primary-fg", t(dark.primary.fg, light.primary.fg)),
+
+    $("error-bg", t(dark.error.bg, light.error.bg)),
+    $("error-fg", t(dark.error.fg, light.error.fg)),
+
+    $("scheme", scheme),
+    $("padding", `${padding}pt`),
+    $("spacing", `${spacing}pt`),
+    $("radius", `${radius}px`),
+    $("transition", `${options.transition}ms`),
+
+    $("shadows", `${shadows}`),
+
+    $("widget-bg", `transparentize(${t(dark.widget, light.widget)}, ${widget.opacity.value / 100})`),
+
+    $("hover-bg", `transparentize(${t(dark.widget, light.widget)}, ${(widget.opacity.value * .9) / 100})`),
+    $("hover-fg", `lighten(${t(dark.fg, light.fg)}, 8%)`),
+
+    $("border-width", `${border.width}px`),
+    $("border-color", `transparentize(${t(dark.border, light.border)}, ${border.opacity.value / 100})`),
+    $("border", "$border-width solid $border-color"),
+
+    $("active-gradient", `linear-gradient(to right, ${t(dark.primary.bg, light.primary.bg)}, darken(${t(dark.primary.bg, light.primary.bg)}, 4%))`),
+    $("shadow-color", t("rgba(0,0,0,.6)", "rgba(0,0,0,.4)")),
+    $("text-shadow", t("2pt 2pt 2pt $shadow-color", "none")),
+    $("box-shadow", t("2pt 2pt 2pt 0 $shadow-color, inset 0 0 0 $border-width $border-color", "none")),
+
+    $("popover-border-color", `transparentize(${t(dark.border, light.border)}, ${Math.max(((border.opacity.value - 1) / 100), 0)})`),
+    $("popover-padding", `$padding * ${popoverPaddingMultiplier}`),
+    $("popover-radius", radius.value === 0 ? "0" : "$radius + $popover-padding"),
+
+    $("font-size", `${options.font.size}pt`),
+    $("font-name", options.font.name),
+
+    // etc
+    $("charging-bg", options.bar.battery.charging),
+    $("bar-battery-blocks", options.bar.battery.blocks),
+    $("bar-position", options.bar.position),
+    $("hyprland-gaps-multiplier", options.hyprland.gaps),
+]
+
+async function resetCss() {
+    if (!dependencies("sass", "fd"))
+        return
+
+    try {
+        const vars = `${TMP}/variables.scss`
+        const scss = `${TMP}/main.scss`
+        const css = `${TMP}/main.css`
+
+        const fd = await bash(`fd ".scss" ${App.configDir}`)
+        const files = fd.split(/\s+/)
+        const imports = [vars, ...files].map(f => `@import '${f}';`)
+
+        await Utils.writeFile(variables().join("\n"), vars)
+        await Utils.writeFile(imports.join("\n"), scss)
+        await bash`sass ${scss} ${css}`
+
+        App.applyCss(css, true)
+    } catch (error) {
+        error instanceof Error
+            ? logError(error)
+            : console.error(error)
+    }
+}
+
+Utils.monitorFile(`${App.configDir}/style`, resetCss)
+options.handler(deps, resetCss)
+await resetCss()

home/ags/style/widgets/bar.scss

@@ -0,0 +1,265 @@
+@use 'sass:color';
+
+$bar-spacing: $spacing * .3;
+$button-radius: $radius;
+
+@mixin panel-button($flat: true, $reactive: true) {
+    @include accs-button($flat, $reactive);
+
+    >* {
+        border-radius: $button-radius;
+        margin: $bar-spacing;
+    }
+
+    label,
+    image {
+        font-weight: bold;
+    }
+
+    >* {
+        padding: $padding * 0.4 $padding * 0.8;
+    }
+}
+
+.bar {
+    transition: $transition;
+    background-color: $bg;
+
+    .panel-button {
+        @include panel-button;
+
+        &:not(.flat) {
+
+            @include accs-button($flat: false);
+        }
+    }
+
+    .launcher {
+        .colored {
+            color: transparentize($primary-bg, 0.2);
+        }
+
+        &:hover .colored {
+            color: $primary-bg;
+        }
+
+        &:active .colored,
+        &.active .colored {
+            color: $primary-fg;
+        }
+    }
+
+    .workspaces {
+        label {
+            font-size: 0;
+            min-width: 5pt;
+            min-height: 5pt;
+            border-radius: $radius*.6;
+            box-shadow: inset 0 0 0 $border-width $border-color;
+            margin: 0 $padding * .5;
+            transition: $transition* .5;
+            background-color: transparentize($fg, .8);
+
+            &.occupied {
+                background-color: transparentize($fg, .2);
+                min-width: 7pt;
+                min-height: 7pt;
+            }
+
+            &.active {
+                // background-color: $primary-bg;
+                background-image: $active-gradient;
+                min-width: 20pt;
+                min-height: 12pt;
+            }
+        }
+
+        &.active,
+        &:active {
+            label {
+                background-color: transparentize($primary-fg, .3);
+
+                &.occupied {
+                    background-color: transparentize($primary-fg, .15);
+                }
+
+                &.active {
+                    background-color: $primary-fg;
+                }
+            }
+        }
+    }
+
+    .media label {
+        margin: 0 ($spacing * .5)
+    }
+
+    .taskbar .indicator.active {
+        background-color: $primary-bg;
+        border-radius: $radius;
+        min-height: 4pt;
+        min-width: 6pt;
+        margin: 2pt;
+    }
+
+    .powermenu.colored,
+    .recorder {
+        image {
+            color: transparentize($error-bg, 0.3);
+        }
+
+        &:hover image {
+            color: transparentize($error-bg, 0.15);
+        }
+
+        &:active image {
+            color: $primary-fg;
+        }
+    }
+
+    .quicksettings>box>box {
+        @include spacing($spacing: if($bar-spacing==0, $padding / 2, $bar-spacing));
+    }
+
+    .quicksettings:not(.active):not(:active) {
+        .bluetooth {
+            color: $primary-bg;
+
+            label {
+                font-size: $font-size * .7;
+                color: $fg;
+                text-shadow: $text-shadow;
+            }
+        }
+    }
+
+    .battery-bar {
+        >* {
+            padding: 0;
+        }
+
+        &.bar-hidden>box {
+            padding: 0 $spacing * .5;
+
+            image {
+                margin: 0;
+            }
+        }
+
+        levelbar * {
+            all: unset;
+            transition: $transition;
+        }
+
+        .whole {
+            @if $shadows {
+                image {
+                    -gtk-icon-shadow: $text-shadow;
+                }
+
+                label {
+                    text-shadow: $text-shadow;
+                }
+            }
+        }
+
+        .regular image {
+            margin-left: $spacing * .5;
+        }
+
+        trough {
+            @include widget;
+            min-height: 12pt;
+            min-width: 12pt;
+        }
+
+        .regular trough {
+            margin-right: $spacing * .5;
+        }
+
+        block {
+            margin: 0;
+
+            &:last-child {
+                border-radius: 0 $button-radius $button-radius 0;
+            }
+
+            &:first-child {
+                border-radius: $button-radius 0 0 $button-radius;
+            }
+        }
+
+        .vertical {
+            block {
+                &:last-child {
+                    border-radius: 0 0 $button-radius $button-radius;
+                }
+
+                &:first-child {
+                    border-radius: $button-radius $button-radius 0 0;
+                }
+            }
+
+        }
+
+        @for $i from 1 through $bar-battery-blocks {
+            block:nth-child(#{$i}).filled {
+                background-color: color.mix($bg, $primary-bg, $i*3)
+            }
+
+            &.low block:nth-child(#{$i}).filled {
+                background-color: color.mix($bg, $error-bg, $i*3)
+            }
+
+            &.charging block:nth-child(#{$i}).filled {
+                background-color: color.mix($bg, $charging-bg, $i*3)
+            }
+
+            &:active .regular block:nth-child(#{$i}).filled {
+                background-color: color.mix($bg, $primary-fg, $i*3)
+            }
+        }
+
+        &.low image {
+            color: $error-bg
+        }
+
+        &.charging image {
+            color: $charging-bg
+        }
+
+        &:active image {
+            color: $primary-fg
+        }
+    }
+}
+
+.bar.transparent {
+    background-color: transparent;
+
+    .panel-button {
+        &:hover>* {
+            box-shadow: 1px 1px 3px 0 $shadow-color, inset 0 0 0 $border-width $border-color;
+            background-color: $bg;
+        }
+
+        &:not(:hover):not(.active) {
+
+            label,
+            image {
+                text-shadow: $text-shadow;
+                -gtk-icon-shadow: $text-shadow;
+            }
+        }
+    }
+
+    .workspaces label {
+        box-shadow: inset 0 0 0 $border-width $border-color,
+            1px 1px 3px 0 $shadow-color;
+    }
+
+    .battery-bar trough {
+        box-shadow: 1px 1px 3px 0 $shadow-color;
+
+    }
+}

home/ags/style/widgets/datemenu.scss

@@ -0,0 +1,110 @@
+@import "./notifications.scss";
+
+@mixin calendar {
+    @include widget;
+    padding: $padding*2 $padding*2 0;
+
+    calendar {
+        all: unset;
+
+        &.button {
+            @include button($flat: true);
+        }
+
+        &:selected {
+            box-shadow: inset 0 -8px 0 0 transparentize($primary-bg, 0.5),
+                inset 0 0 0 1px $primary-bg;
+            border-radius: $radius*0.6;
+        }
+
+        &.header {
+            background-color: transparent;
+            border: none;
+            color: transparentize($fg, 0.5);
+        }
+
+        &.highlight {
+            background-color: transparent;
+            color: transparentize($primary-bg, 0.5);
+        }
+
+        &:indeterminate {
+            color: transparentize($fg, 0.9);
+        }
+
+        font-size: 1.1em;
+        padding: .2em;
+    }
+}
+
+window#datemenu .datemenu {
+    @include floating-widget;
+
+    .notifications {
+        .header {
+            margin-bottom: $spacing;
+            margin-right: $spacing;
+
+            >label {
+                margin-left: $radius * .5;
+            }
+
+            button {
+                @include button;
+                padding: $padding*.7 $padding;
+            }
+        }
+
+        .notification-scrollable {
+            @include scrollable($top: true, $bottom: true);
+        }
+
+        .notification-list {
+            margin-right: $spacing;
+        }
+
+        .notification {
+            @include notification;
+            @include widget;
+            padding: $padding;
+            margin-bottom: $spacing;
+        }
+
+        .placeholder {
+            image {
+                font-size: 7em;
+            }
+
+            label {
+                font-size: 1.2em;
+            }
+        }
+    }
+
+
+    separator {
+        background-color: $popover-border-color;
+        border-radius: $radius;
+        margin-right: $spacing;
+    }
+
+    .datemenu {
+        @include spacing;
+    }
+
+    .clock-box {
+        padding: $padding;
+
+        .clock {
+            font-size: 5em;
+        }
+
+        .uptime {
+            color: transparentize($fg, 0.2);
+        }
+    }
+
+    .calendar {
+        @include calendar;
+    }
+}

home/ags/style/widgets/greeter.scss

@@ -0,0 +1,64 @@
+@import "../mixins/floating-widget.scss";
+@import "../mixins/widget.scss";
+@import "../mixins/spacing.scss";
+@import "../mixins/unset.scss";
+@import "../mixins/a11y-button.scss";
+@import "./bar.scss";
+
+window#greeter {
+    background-color: lighten($bg, 6%);
+    color: $fg;
+
+    .bar {
+        background-color: transparent;
+
+        .date {
+            @include unset($rec: true);
+            @include panel-button($flat: true, $reactive: false);
+        }
+    }
+
+    .auth {
+        @include floating_widget;
+        border-radius: $radius;
+        min-width: 400px;
+        padding: 0;
+
+        .wallpaper {
+            min-height: 220px;
+            background-size: cover;
+            border-top-left-radius: $radius;
+            border-top-right-radius: $radius;
+        }
+
+        .wallpaper-contrast {
+            min-height: 100px;
+        }
+
+        .avatar {
+            border-radius: 99px;
+            min-width: 140px;
+            min-height: 140px;
+            background-size: cover;
+            box-shadow: 3px 3px 6px 0 $shadow-color;
+            margin-bottom: $spacing;
+        }
+
+
+        .password {
+            entry {
+                @include button;
+                padding: $padding*.7 $padding;
+                margin-left: $spacing*.5;
+            }
+
+            margin: 0 $padding*4;
+            margin-top: $spacing;
+        }
+
+        .response-box {
+            color: $error-bg;
+            margin: $spacing 0;
+        }
+    }
+}

home/ags/style/widgets/launcher.scss

@@ -0,0 +1,143 @@
+@use "sass:math";
+@use "sass:color";
+
+window#launcher .launcher {
+    @include floating_widget;
+
+    .quicklaunch {
+        @include spacing;
+
+        button {
+            @include button($flat: true);
+            padding: $padding;
+        }
+    }
+
+    entry {
+        @include button;
+        padding: $padding;
+        margin: $spacing;
+
+        selection {
+            color: color.mix($fg, $bg, 50%);
+            background-color: transparent;
+        }
+
+        label,
+        image {
+            color: $fg;
+        }
+    }
+
+    image.spinner {
+        color: $primary-bg;
+        margin-right: $spacing;
+    }
+
+    separator {
+        margin: 4pt 0;
+        background-color: $popover-border-color;
+    }
+
+    button.app-item {
+        @include button($flat: true, $reactive: false);
+
+        >box {
+            @include spacing(0.5);
+        }
+
+        transition: $transition;
+        padding: $padding;
+
+        label {
+            transition: $transition;
+
+            &.title {
+                color: $fg;
+            }
+
+            &.description {
+                color: transparentize($fg, 0.3);
+            }
+        }
+
+        image {
+            transition: $transition;
+        }
+
+        &:hover,
+        &:focus {
+            .title {
+                color: $primary-bg;
+            }
+
+            .description {
+                color: transparentize($primary-bg, .4);
+            }
+
+            image {
+                -gtk-icon-shadow: 2px 2px $primary-bg;
+            }
+        }
+
+        &:active {
+            background-color: transparentize($primary-bg, 0.5);
+            border-radius: $radius;
+            box-shadow: inset 0 0 0 $border-width $border-color;
+
+            .title {
+                color: $fg;
+            }
+        }
+    }
+
+    button.help,
+    button.nix-item {
+        @include button($flat: true, $reactive: false);
+        padding: 0 ($padding * .5);
+
+        label {
+            transition: $transition;
+            color: $fg;
+        }
+
+        .name {
+            font-size: 1.2em;
+            font-weight: bold;
+        }
+
+        .description {
+            color: transparentize($fg, .3)
+        }
+
+        &:hover,
+        &:focus {
+            label {
+                text-shadow: $text-shadow;
+            }
+
+            .name,
+            .version {
+                color: $primary-bg;
+            }
+
+            .description {
+                color: transparentize($primary-bg, .3)
+            }
+        }
+    }
+
+    button.sh-item {
+        @include button($flat: true, $reactive: false);
+        padding: 0 ($padding * .5);
+
+        transition: $transition;
+        color: $fg;
+
+        &:hover,
+        &:focus {
+            color: $primary-bg;
+            text-shadow: $text-shadow;
+        }
+    }
+}

home/ags/style/widgets/notifications.scss

@@ -0,0 +1,79 @@
+@mixin notification() {
+    &.critical {
+        box-shadow: inset 0 0 .5em 0 $error-bg;
+    }
+
+    &:hover button.close-button {
+        @include button-hover;
+        background-color: transparentize($error-bg, .5);
+    }
+
+    .content {
+        .title {
+            margin-right: $spacing;
+            color: $fg;
+            font-size: 1.1em;
+        }
+
+        .time {
+            color: transparentize($fg, .2);
+        }
+
+        .description {
+            font-size: .9em;
+            color: transparentize($fg, .2);
+        }
+
+        .icon {
+            border-radius: $radius*0.8;
+            margin-right: $spacing;
+
+            &.img {
+                border: $border;
+            }
+        }
+    }
+
+    box.actions {
+        @include spacing(0.5);
+        margin-top: $spacing;
+
+        button {
+            @include button;
+            border-radius: $radius*0.8;
+            font-size: 1.2em;
+            padding: $padding * 0.7;
+        }
+    }
+
+    button.close-button {
+        @include button($flat: true);
+        margin-left: $spacing / 2;
+        border-radius: $radius*0.8;
+        min-width: 1.2em;
+        min-height: 1.2em;
+
+        &:hover {
+            background-color: transparentize($error-bg, .2);
+        }
+
+        &:active {
+            background-image: none;
+            background-color: $error-bg;
+        }
+    }
+}
+
+window.notifications {
+    @include unset;
+
+    .notification {
+        @include notification;
+        @include floating-widget;
+        border-radius: $radius;
+
+        .description {
+            min-width: 350px;
+        }
+    }
+}

home/ags/style/widgets/osd.scss

@@ -0,0 +1,26 @@
+window.indicator {
+    .progress {
+        @include floating-widget;
+        padding: $padding * .5;
+        border-radius: if($radius >0, calc($radius + $padding*.5), 0);
+        @debug $radius;
+
+        .fill {
+            border-radius: $radius;
+            background-color: $primary-bg;
+            color: $primary-fg;
+
+            image {
+                -gtk-icon-transform: scale(0.7);
+            }
+        }
+    }
+
+    .microphone {
+        @include floating-widget;
+        margin: $spacing * 2;
+        padding: $popover-padding * 2;
+        font-size: 58px;
+        color: transparentize($fg, .1)
+    }
+}

home/ags/style/widgets/overview.scss

@@ -0,0 +1,34 @@
+window#overview .overview {
+    @include floating-widget;
+    @include spacing;
+
+    .workspace {
+        &.active>widget {
+            border-color: $primary-bg
+        }
+
+        >widget {
+            @include widget;
+            border-radius: if($radius ==0, 0, $radius + $padding);
+
+            &:hover {
+                background-color: $hover-bg;
+            }
+
+            &:drop(active) {
+                border-color: $primary-bg;
+            }
+        }
+    }
+
+    .client {
+        @include button;
+        border-radius: $radius;
+        margin: $padding;
+
+        &.hidden {
+            @include hidden;
+            transition: 0;
+        }
+    }
+}

home/ags/style/widgets/powermenu.scss

@@ -0,0 +1,110 @@
+window#powermenu,
+window#verification {
+    // the fraction has to be more than hyprland ignorealpha
+    background-color: rgba(0, 0, 0, .4);
+}
+
+window#verification .verification {
+    @include floating-widget;
+    padding: $popover-padding * 1.5;
+    min-width: 300px;
+    min-height: 100px;
+
+    .text-box {
+        margin-bottom: $spacing;
+
+        .title {
+            font-size: 1.6em;
+        }
+
+        .desc {
+            color: transparentize($fg, 0.1);
+            font-size: 1.1em;
+        }
+    }
+
+    .buttons {
+        @include spacing;
+        margin-top: $padding;
+
+        button {
+            @include button;
+            font-size: 1.5em;
+            padding: $padding;
+        }
+    }
+}
+
+window#powermenu .powermenu {
+    @include floating-widget;
+
+    &.line {
+        padding: $popover-padding * 1.5;
+
+        button {
+            padding: $popover-padding;
+        }
+
+        label {
+            margin-bottom: $spacing * -.5;
+        }
+    }
+
+    &.box {
+        padding: $popover-padding * 2;
+
+        button {
+            padding: $popover-padding * 1.5;
+        }
+
+        label {
+            margin-bottom: $spacing * -1;
+        }
+    }
+
+    button {
+        @include unset;
+
+        image {
+            @include button;
+            border-radius: $radius + ($popover-padding * 1.4);
+            min-width: 1.7em;
+            min-height: 1.7em;
+            font-size: 4em;
+        }
+
+        label,
+        image {
+            color: transparentize($fg, 0.1);
+        }
+
+        label {
+            margin-top: $spacing * .3;
+        }
+
+        &:hover {
+            image {
+                @include button-hover;
+            }
+
+            label {
+                color: $fg;
+            }
+        }
+
+        &:focus image {
+            @include button-focus;
+        }
+
+        &:active image {
+            @include button-active;
+        }
+
+        &:focus,
+        &:active {
+            label {
+                color: $primary-bg;
+            }
+        }
+    }
+}

home/ags/style/widgets/quicksettings.scss

@@ -0,0 +1,177 @@
+window#quicksettings .quicksettings {
+    @include floating-widget;
+    @include spacing;
+
+    padding: $popover-padding * 1.4;
+
+    .avatar {
+        @include widget;
+        border-radius: $radius * 3;
+    }
+
+    .header {
+        @include spacing(.5);
+        color: transparentize($fg, .15);
+
+        button {
+            @include button;
+            padding: $padding;
+
+            image {
+                font-size: 1.4em;
+            }
+        }
+    }
+
+    .sliders-box {
+        @include widget;
+        padding: $padding;
+
+        button {
+            @include button($flat: true);
+            padding: $padding * .5;
+        }
+
+        .volume button.arrow:last-child {
+            margin-left: $spacing * .4;
+        }
+
+        .volume,
+        .brightness {
+            padding: $padding * .5;
+        }
+
+        scale {
+            @include slider;
+            margin: 0 ($spacing * .5);
+
+            &.muted highlight {
+                background-image: none;
+                background-color: transparentize($fg, $amount: .2);
+            }
+        }
+    }
+
+    .row {
+        @include spacing;
+    }
+
+    .menu {
+        @include unset;
+        @include widget;
+        padding: $padding;
+        margin-top: $spacing;
+
+        .icon {
+            margin: 0 ($spacing * .5);
+            margin-left: $spacing * .2;
+        }
+
+        .title {
+            font-weight: bold;
+        }
+
+        separator {
+            margin: ($radius * .5);
+            background-color: $border-color;
+        }
+
+        button {
+            @include button($flat: true);
+            padding: ($padding * .5);
+
+            image:first-child {
+                margin-right: $spacing * .5;
+            }
+        }
+
+        .bluetooth-devices {
+            @include spacing(.5);
+        }
+
+        switch {
+            @include switch;
+        }
+    }
+
+    .sliders-box .menu {
+        margin: ($spacing * .5) 0;
+
+        &.app-mixer {
+            .mixer-item {
+                padding: $padding * .5;
+                padding-left: 0;
+                padding-right: $padding * 2;
+
+                scale {
+                    @include slider($width: .5em);
+                }
+
+                image {
+                    font-size: 1.2em;
+                    margin: 0 $padding;
+                }
+            }
+        }
+    }
+
+    .toggle-button {
+        @include button;
+        font-weight: bold;
+
+        image {
+            font-size: 1.3em;
+        }
+
+        label {
+            margin-left: $spacing * .3;
+        }
+
+        button {
+            @include button($flat: true);
+
+            &:first-child {
+                padding: $padding * 1.2;
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+
+            &:last-child {
+                padding: $padding * .5;
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+
+        &.active {
+            background-color: $primary-bg;
+
+            label,
+            image {
+                color: $primary-fg;
+            }
+        }
+    }
+
+    .simple-toggle {
+        @include button;
+        font-weight: bold;
+        padding: $padding * 1.2;
+
+        label {
+            margin-left: $spacing * .3;
+        }
+
+        image {
+            font-size: 1.3em;
+        }
+    }
+
+    .media {
+        @include spacing;
+
+        .player {
+            @include media;
+        }
+    }
+}

home/ags/style/widgets/screencorner.scss

@@ -0,0 +1,52 @@
+$_shadow-size: $padding;
+$_radius: $radius * $hyprland-gaps-multiplier;
+$_margin: 99px;
+
+window.screen-corner:not(.hidden) {
+    transition: $transition;
+
+    box.shadow {
+        margin-right: $_margin * -1;
+        margin-left: $_margin * -1;
+
+        @if $shadows {
+            box-shadow: inset 0 0 $_shadow-size 0 $shadow-color;
+        }
+
+        @if $bar-position =="top" {
+            margin-bottom: $_margin * -1;
+        }
+
+        @if $bar-position =="bottom" {
+            margin-top: $_margin * -1;
+        }
+    }
+
+    box.border {
+        @if $bar-position =="top" {
+            border-top: $border-width solid $bg;
+        }
+
+        @if $bar-position =="bottom" {
+            border-bottom: $border-width solid $bg;
+        }
+
+        margin-right: $_margin;
+        margin-left: $_margin;
+    }
+
+    box.corner {
+        box-shadow: 0 0 0 $border-width $border-color;
+    }
+
+    &.corners {
+        box.border {
+            border-radius: if($radius>0, $radius * $hyprland-gaps-multiplier, 0);
+            box-shadow: 0 0 0 $_radius $bg;
+        }
+
+        box.corner {
+            border-radius: if($radius>0, $radius * $hyprland-gaps-multiplier, 0);
+        }
+    }
+}

home/ags/style/widgets/settingsdialog.scss

@@ -0,0 +1,144 @@
+window.settings-dialog {
+    background-color: $bg;
+    color: $fg;
+
+    .header {
+        .pager {
+            @include spacing(.5);
+        }
+
+        padding: $padding;
+
+        button {
+            @include button;
+            font-weight: bold;
+            padding: $padding*.5 $padding;
+
+            box {
+                @include spacing($spacing: .3em);
+            }
+        }
+
+        button.close {
+            padding: $padding * .5;
+        }
+
+        button.reset {
+            @include button($flat: true);
+            padding: $padding*.5;
+        }
+    }
+
+    .page {
+        @include scrollable($top: true);
+
+        .page-content {
+            padding: $padding*2;
+            padding-top: 0;
+        }
+    }
+
+    .group {
+        .group-title {
+            color: $primary-bg;
+            margin-bottom: $spacing*.5;
+        }
+
+        .group-reset {
+            @include button($flat: true);
+            margin: $spacing * .5;
+            padding: $padding * .5;
+
+            &:disabled {
+                color: transparent;
+            }
+        }
+
+        &:not(:first-child) {
+            margin-top: $spacing;
+        }
+    }
+
+    .row {
+        background-color: $widget-bg;
+        padding: $padding;
+        border: $border;
+        border-top: none;
+
+        &:first-child {
+            border-radius: $radius $radius 0 0;
+            border: $border;
+        }
+
+        &:last-child {
+            border-radius: 0 0 $radius $radius;
+        }
+
+        &:first-child:last-child {
+            border-radius: $radius;
+            border: $border;
+        }
+
+        button.reset {
+            margin-left: $spacing;
+        }
+
+        label.id,
+        label.note {
+            color: transparentize($fg, .4)
+        }
+
+        entry,
+        button {
+            @include button;
+            padding: $padding;
+        }
+
+        switch {
+            @include switch;
+        }
+
+        spinbutton {
+            @include unset;
+
+            entry {
+                border-radius: $radius 0 0 $radius;
+            }
+
+            button {
+                border-radius: 0;
+            }
+
+            button:last-child {
+                border-radius: 0 $radius $radius 0;
+            }
+        }
+
+        .enum-setter {
+            label {
+                background-color: $widget-bg;
+                border: $border;
+                padding: 0 $padding;
+                border-radius: $radius 0 0 $radius;
+            }
+
+            button {
+                border-radius: 0;
+            }
+
+            button:last-child {
+                border-radius: 0 $radius $radius 0;
+            }
+        }
+
+        &.wallpaper {
+            button {
+                margin-top: $spacing * .5;
+            }
+
+            .preview {
+                border-radius: $radius;
+            }
+        }
+    }
+}