Add ags

11 files changed, 388 insertions, 0 deletions

diff --git a/.config/ags/style/mixins/a11y-button.scss b/.config/ags/style/mixins/a11y-button.scss
new file mode 100644
index 0000000..00b24c6
--- /dev/null
+++ b/.config/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;
+            }
+        }
+    }
+}
diff --git a/.config/ags/style/mixins/button.scss b/.config/ags/style/mixins/button.scss
new file mode 100644
index 0000000..79ec275
--- /dev/null
+++ b/.config/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;
+    }
+}
diff --git a/.config/ags/style/mixins/floating-widget.scss b/.config/ags/style/mixins/floating-widget.scss
new file mode 100644
index 0000000..613668d
--- /dev/null
+++ b/.config/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;
+}
diff --git a/.config/ags/style/mixins/hidden.scss b/.config/ags/style/mixins/hidden.scss
new file mode 100644
index 0000000..ea6a42c
--- /dev/null
+++ b/.config/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);
+    }
+}
diff --git a/.config/ags/style/mixins/media.scss b/.config/ags/style/mixins/media.scss
new file mode 100644
index 0000000..3178029
--- /dev/null
+++ b/.config/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;
+        }
+    }
+}
diff --git a/.config/ags/style/mixins/scrollable.scss b/.config/ags/style/mixins/scrollable.scss
new file mode 100644
index 0000000..b66f246
--- /dev/null
+++ b/.config/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;
+    }
+}
diff --git a/.config/ags/style/mixins/slider.scss b/.config/ags/style/mixins/slider.scss
new file mode 100644
index 0000000..b90e566
--- /dev/null
+++ b/.config/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;
+                }
+            }
+        }
+
+    }
+}
diff --git a/.config/ags/style/mixins/spacing.scss b/.config/ags/style/mixins/spacing.scss
new file mode 100644
index 0000000..4096fba
--- /dev/null
+++ b/.config/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;
+                }
+            }
+        }
+    }
+}
diff --git a/.config/ags/style/mixins/switch.scss b/.config/ags/style/mixins/switch.scss
new file mode 100644
index 0000000..2abf360
--- /dev/null
+++ b/.config/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;
+    }
+}
diff --git a/.config/ags/style/mixins/unset.scss b/.config/ags/style/mixins/unset.scss
new file mode 100644
index 0000000..eb80af5
--- /dev/null
+++ b/.config/ags/style/mixins/unset.scss
@@ -0,0 +1,9 @@
+@mixin unset($rec: false) {
+    all: unset;
+
+    @if $rec {
+        * {
+            all: unset
+        }
+    }
+}
diff --git a/.config/ags/style/mixins/widget.scss b/.config/ags/style/mixins/widget.scss
new file mode 100644
index 0000000..053f1aa
--- /dev/null
+++ b/.config/ags/style/mixins/widget.scss
@@ -0,0 +1,7 @@
+@mixin widget {
+    transition: $transition;
+    border-radius: $radius;
+    color: $fg;
+    background-color: $widget-bg;
+    border: $border;
+}