Initial commit

ags/styles/_variables.scss

@@ -0,0 +1,2 @@
+$font-family: "SFProText Nerd Font", "SFProDisplay Nerd Font", sans-serif;
+$font-family-monospace: "JetBrains Mono", monospace;

ags/styles/classes.scss

@@ -0,0 +1,6 @@
+@use '_variables' as *;
+@use 'mixins';
+
+.material-icon {
+    @include mixins.material-icon;
+}

ags/styles/colors.scss

@@ -0,0 +1,26 @@
+// SCSS Variables
+// Generated by 'wal'
+$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_188.jpg";
+
+// Special
+$background: #fcf1ed;
+$foreground: #0E0408;
+$cursor: #0E0408;
+
+// Colors
+$color0: #fcf1ed;
+$color1: #DB6B5B;
+$color2: #FA936C;
+$color3: #FFC17D;
+$color4: #7B6587;
+$color5: #9A758D;
+$color6: #C57D82;
+$color7: #0E0408;
+$color8: #8d6254;
+$color9: #DB6B5B;
+$color10: #FA936C;
+$color11: #FFC17D;
+$color12: #7B6587;
+$color13: #9A758D;
+$color14: #C57D82;
+$color15: #0E0408;

ags/styles/components/_bar.scss

@@ -0,0 +1,32 @@
+@use '../colors' as *;
+
+window.bar {
+    font-weight: bold;
+
+    >box {
+        border-radius: 10px;
+    }
+
+    >.inner {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        background: $color5;
+        padding: 0.25rem 1rem;
+        margin: 0;
+
+        * { color: $color0; }
+    }
+
+    .tray .item {
+        padding: 0;
+        margin: 0;
+        background: $color5;
+
+        image {
+            padding: 0;
+            margin: 0;
+        }
+    }
+
+    calendar>header { border: none; }
+}

ags/styles/components/_battery_info.scss

@@ -0,0 +1,56 @@
+@use '../colors' as *;
+
+window.battery_info {
+    font-weight: bold;
+
+    >box {
+        border: 1px solid $color0;
+        border-radius: 10px;
+        margin: 8px;
+    }
+    
+    >.inner {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        background: $color5;
+        padding: 0.75rem 3rem;
+        margin: 0;
+
+        label.percentage {
+            font-size: 300%;
+        }
+
+        * { 
+            transition: all 0.2s ease-in-out;
+            color: $color0;
+        }
+    }
+
+    button {
+        padding: 0.75rem 1rem;
+    }
+}
+
+window.battery_info button {
+    transition: all 0.2s ease-in-out;
+    background: $color5;
+    border: 2px solid $color0;
+    margin: 5px;
+
+    &:hover {
+        background: $color0;
+
+        * {
+            color: $color5;
+        }
+    }
+
+    &.active {
+        background: $color0;
+        border: 0.5px solid $color5;
+
+        * {
+            color: $color5;
+        }
+    }
+}

ags/styles/components/_index.scss

@@ -0,0 +1,4 @@
+@forward '_bar';
+@forward '_launcher';
+@forward '_battery_info';
+@forward '_quick_settings';

ags/styles/components/_launcher.scss

@@ -0,0 +1,60 @@
+@use '../colors' as *;
+
+.launcher {
+    entry {
+        background: $color5;
+        color: $color0;
+        padding: 8px 12px;
+        border: none;
+
+        margin-bottom: 6px;
+        
+        &:focus {
+            outline: 2px solid $color0;
+        }
+    }
+
+    .application {
+        padding: 10px;
+        background: $color5;
+        border-radius: 8px;
+        transition: background 0.2s ease;
+
+        &:hover {
+            background: $color0;
+        
+            box>.name, box>.description {
+                color: $color5;
+            }
+        }
+
+        image {
+            margin-right: 12px;
+        }
+
+        box {
+            .name {
+                color: $color0;
+                font-size: 14px;
+                font-weight: 600;
+            }
+
+            .description {
+                color: $color0;
+                font-size: 12px;
+            }
+        }
+    }
+
+    .not-found {
+        background: $color5;
+        color: $color0;
+        font-size: 14px;
+        padding: 10px;
+        border-radius: 8px;
+
+        image {
+            margin-bottom: 8px;
+        }
+    }
+}

ags/styles/components/_quick_settings.scss

@@ -0,0 +1,70 @@
+@use '../colors' as *;
+
+window.quick_settings {
+    font-weight: bold;
+
+    >box {
+        border: 1px solid $color0;
+        border-radius: 10px;
+        margin: 8px;
+    }
+    
+    >.inner {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        background: $color5;
+        padding: 0.75rem 3rem;
+        margin: 0;
+
+        * { 
+            transition: all 0.2s ease-in-out;
+            color: $color0;
+        }
+    }
+
+    button {
+        padding: 0.75rem 1rem;
+    }
+}
+
+window.qs_bluetooth {
+    >.inner {
+        background: $color5;
+        padding: 0.75rem 3rem;
+        border-radius: 10px;
+    
+        * { color: $color0; }
+    }
+
+    .device {
+        padding: 1rem 3rem;
+    }
+
+    button {
+        padding: 0.75rem 0.5rem;
+    }
+}
+
+window.quick_settings button, window.qs_bluetooth button {
+    transition: all 0.2s ease-in-out;
+    background: $color5;
+    border: 2px solid $color0;
+    margin: 5px;
+
+    &:hover {
+        background: $color0;
+
+        * {
+            color: $color5;
+        }
+    }
+
+    &.active {
+        background: $color0;
+        border: 0.5px solid $color5;
+
+        * {
+            color: $color5;
+        }
+    }
+}

ags/styles/mixins.scss

@@ -0,0 +1,8 @@
+@mixin full-rounding {
+    border-radius: 100%;
+}
+
+@mixin material-icon {
+    font-family: "Material Symbols Rounded", "MaterialSymbolsRounded", "Material Symbols Outlined",
+        "Material Symbols Sharp";
+}

ags/styles/style.scss

@@ -0,0 +1,29 @@
+@use 'variables' as *;
+@use 'colors' as *;
+@use 'mixins';
+@use 'classes';
+@use 'components';
+
+* {
+    font-family: $font-family;
+}
+
+separator {
+    background: $color0;
+}
+
+popover>contents, calendar {
+    background: $color5;
+}
+
+button, button:hover {
+    background: transparent;
+}
+
+popover modelbutton {
+    &:hover, &:focus { background: $color6; }
+}
+
+image {
+    padding: 0 0.25rem;
+}