eww osd and battery warning

.config/eww/battery.yuck

@@ -0,0 +1,28 @@
+(defwindow batteryLow
+  :monitor 0
+  :geometry (geometry
+    :y "5%"
+    :width "10%"
+    :height "8%"
+    :anchor "top center")
+  :stacking "overlay"
+  :exclusive "false"
+  :focusable "false"
+  (button
+    :onclick "eww close batteryLow"
+    "Battery Low"))
+
+
+(defwindow batteryCritical
+  :monitor 0
+  :geometry (geometry
+    :y "5%"
+    :width "10%"
+    :height "8%"
+    :anchor "top center")
+  :stacking "overlay"
+  :exclusive "false"
+  :focusable "false"
+  (button
+    :onclick "eww close batteryCritical"
+    "Battery Critical"))

.config/eww/brightness.yuck

@@ -0,0 +1,23 @@
+(defwindow brightnessUp
+  :monitor 0
+  :geometry (geometry
+    :y "5%"
+    :width "10%"
+    :height "8%"
+    :anchor "bottom center")
+  :stacking "overlay"
+  :exclusive "false"
+  :focusable "false"
+  "brightness up")
+
+(defwindow brightnessDown
+  :monitor 0
+  :geometry (geometry
+    :y "5%"
+    :width "10%"
+    :height "8%"
+    :anchor "bottom center")
+  :stacking "overlay"
+  :exclusive "false"
+  :focusable "false"
+  "brightness down")

.config/eww/colors.scss

@@ -0,0 +1,105 @@
+/*
+* Css Colors
+* Generated with Matugen
+*/
+
+$background: #151218;
+
+$error: #ffb4ab;
+
+$error_container: #93000a;
+
+$inverse_on_surface: #322f35;
+
+$inverse_primary: #6a538c;
+
+$inverse_surface: #e7e0e8;
+
+$on_background: #e7e0e8;
+
+$on_error: #690005;
+
+$on_error_container: #ffdad6;
+
+$on_primary: #3b255b;
+
+$on_primary_container: #eddcff;
+
+$on_primary_fixed: #250e44;
+
+$on_primary_fixed_variant: #523c73;
+
+$on_secondary: #352d40;
+
+$on_secondary_container: #ebddf7;
+
+$on_secondary_fixed: #1f182a;
+
+$on_secondary_fixed_variant: #4c4357;
+
+$on_surface: #e7e0e8;
+
+$on_surface_variant: #cbc4cf;
+
+$on_tertiary: #4b252e;
+
+$on_tertiary_container: #ffd9df;
+
+$on_tertiary_fixed: #321019;
+
+$on_tertiary_fixed_variant: #643b44;
+
+$outline: #958e99;
+
+$outline_variant: #4a454e;
+
+$primary: #d6bbfb;
+
+$primary_container: #523c73;
+
+$primary_fixed: #eddcff;
+
+$primary_fixed_dim: #d6bbfb;
+
+$scrim: #000000;
+
+$secondary: #cec2db;
+
+$secondary_container: #4c4357;
+
+$secondary_fixed: #ebddf7;
+
+$secondary_fixed_dim: #cec2db;
+
+$shadow: #000000;
+
+$source_color: #6f22cd;
+
+$surface: #151218;
+
+$surface_bright: #3b383e;
+
+$surface_container: #211e24;
+
+$surface_container_high: #2c292f;
+
+$surface_container_highest: #37333a;
+
+$surface_container_low: #1d1a20;
+
+$surface_container_lowest: #100d12;
+
+$surface_dim: #151218;
+
+$surface_tint: #d6bbfb;
+
+$surface_variant: #4a454e;
+
+$tertiary: #f1b7c2;
+
+$tertiary_container: #643b44;
+
+$tertiary_fixed: #ffd9df;
+
+$tertiary_fixed_dim: #f1b7c2;
+

.config/eww/eww.scss

@@ -0,0 +1,120 @@
+@import 'colors.scss';
+
+.batteryLow {
+  border: 0.3em solid $primary;
+  border-radius: 2.5em;
+  color: $primary;
+  padding: 0;
+
+  label {
+    border-radius: 2.3em;
+    background-color: $background;
+  }
+
+  &:hover {
+    border-color: $tertiary;
+    color: $tertiary;
+  }
+}
+
+.batteryCritical {
+  border: 0.3em solid $primary;
+  border-radius: 2.5em;
+  color: $primary;
+  padding: 0;
+
+  label {
+    border-radius: 2.3em;
+    background-color: $background;
+  }
+
+  &:hover {
+    border-color: $tertiary;
+    color: $tertiary;
+  }
+}
+
+.volumeUp {
+  border: 0.3em solid $primary;
+  border-radius: 2.5em;
+  color: $primary;
+  padding: 0;
+
+  label {
+    border-radius: 2.3em;
+    background-color: $background;
+  }
+
+  &:hover {
+    border-color: $tertiary;
+    color: $tertiary;
+  }
+}
+
+.volumeDown {
+  border: 0.3em solid $primary;
+  border-radius: 2.5em;
+  color: $primary;
+  padding: 0;
+
+  label {
+    border-radius: 2.3em;
+    background-color: $background;
+  }
+
+  &:hover {
+    border-color: $tertiary;
+    color: $tertiary;
+  }
+}
+
+.volumeToggle {
+  border: 0.3em solid $primary;
+  border-radius: 2.5em;
+  color: $primary;
+  padding: 0;
+
+  label {
+    border-radius: 2.3em;
+    background-color: $background;
+  }
+
+  &:hover {
+    border-color: $tertiary;
+    color: $tertiary;
+  }
+}
+
+.brightnessUp {
+  border: 0.3em solid $primary;
+  border-radius: 2.5em;
+  color: $primary;
+  padding: 0;
+
+  label {
+    border-radius: 2.3em;
+    background-color: $background;
+  }
+
+  &:hover {
+    border-color: $tertiary;
+    color: $tertiary;
+  }
+}
+
+.brightnessDown {
+  border: 0.3em solid $primary;
+  border-radius: 2.5em;
+  color: $primary;
+  padding: 0;
+
+  label {
+    border-radius: 2.3em;
+    background-color: $background;
+  }
+
+  &:hover {
+    border-color: $tertiary;
+    color: $tertiary;
+  }
+}

.config/eww/eww.yuck

@@ -0,0 +1,3 @@
+(include "battery.yuck")
+(include "volume.yuck")
+(include "brightness.yuck")

.config/eww/volume.yuck

@@ -0,0 +1,36 @@
+(defwindow volumeUp
+  :monitor 0
+  :geometry (geometry
+    :y "5%"
+    :width "10%"
+    :height "8%"
+    :anchor "bottom center")
+  :stacking "overlay"
+  :exclusive "false"
+  :focusable "false"
+  "volume up")
+
+(defwindow volumeDown
+  :monitor 0
+  :geometry (geometry
+    :y "5%"
+    :width "10%"
+    :height "8%"
+    :anchor "bottom center")
+  :stacking "overlay"
+  :exclusive "false"
+  :focusable "false"
+  "volume down")
+
+(defvar ismuted "")
+(defwindow volumeToggle
+  :monitor 0
+  :geometry (geometry
+    :y "5%"
+    :width "10%"
+    :height "8%"
+    :anchor "bottom center")
+  :stacking "overlay"
+  :exclusive "false"
+  :focusable "false"
+  "volume ${ismuted}muted")