Added ags

TODO copy ags config

roles/ags/files/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;
+    }
+}

roles/ags/files/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;
+            }
+        }
+    }
+}

roles/ags/files/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;
+    }
+}

roles/ags/files/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;
+}

roles/ags/files/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);
+    }
+}

roles/ags/files/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;
+        }
+    }
+}

roles/ags/files/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;
+    }
+}

roles/ags/files/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;
+                }
+            }
+        }
+
+    }
+}

roles/ags/files/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;
+                }
+            }
+        }
+    }
+}

roles/ags/files/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;
+    }
+}

roles/ags/files/style/mixins/unset.scss

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

roles/ags/files/style/mixins/widget.scss

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

roles/ags/files/style/style.ts

@@ -0,0 +1,103 @@
+/* eslint-disable max-len */
+import { type Opt } from "lib/option"
+import options from "options"
+import { bash, dependencies, sh } 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")),
+
+    $("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`
+        await Utils.writeFile(variables().join("\n"), vars)
+
+        const fd = await sh(`fd ".scss" ${App.configDir}`)
+        const files = fd.split(/\s+/).map(f => `@import '${f}';`)
+        const scss = [`@import '${vars}';`, ...files].join("\n")
+        const css = await bash`echo "${scss}" | sass --stdin`
+
+        App.applyCss(css, true)
+    } catch (error) {
+        logError(error)
+    }
+}
+
+Utils.monitorFile(App.configDir, resetCss)
+options.handler(deps, resetCss)
+await resetCss()