From b4aca729ddae0526b66822698db7066cb09e1682 Mon Sep 17 00:00:00 2001
From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
Date: Sun, 12 Jan 2025 18:00:54 +1100
Subject: bar

---
 scss/_font.scss         |  21 +++++++++
 scss/_lib.scss          |  29 ++++++++++++
 scss/bar.scss           | 103 +++++++++++++++++++++++++++++++++++++++++
 scss/scheme/_mocha.scss |  26 +++++++++++
 scss/widgets.scss       | 120 ++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 299 insertions(+)
 create mode 100644 scss/_font.scss
 create mode 100644 scss/_lib.scss
 create mode 100644 scss/bar.scss
 create mode 100644 scss/scheme/_mocha.scss
 create mode 100644 scss/widgets.scss

(limited to 'scss')

diff --git a/scss/_font.scss b/scss/_font.scss
new file mode 100644
index 0000000..405a850
--- /dev/null
+++ b/scss/_font.scss
@@ -0,0 +1,21 @@
+@mixin title {
+    font-family: "Gabarito", "Poppins", "Readex Pro", "Lexend", sans-serif;
+}
+
+@mixin main {
+    font-family: "Rubik", "Geist", "AR One Sans", "Reddit Sans", "Inter", "Roboto", "Ubuntu", "Noto Sans", sans-serif;
+}
+
+@mixin icon {
+    font-family: "Material Symbols Rounded", "MaterialSymbolsRounded", "Material Symbols Outlined",
+        "Material Symbols Sharp";
+}
+
+@mixin mono {
+    font-family: "JetBrains Mono NF", "JetBrains Mono Nerd Font", "JetBrains Mono NL", "SpaceMono NF",
+        "SpaceMono Nerd Font", monospace;
+}
+
+@mixin reading {
+    font-family: "Readex Pro", "Lexend", "Noto Sans", sans-serif;
+}
diff --git a/scss/_lib.scss b/scss/_lib.scss
new file mode 100644
index 0000000..19a2867
--- /dev/null
+++ b/scss/_lib.scss
@@ -0,0 +1,29 @@
+$scale: 0.068rem;
+@function s($value: 1) {
+    @return $value * $scale;
+}
+
+@mixin rounded($all, $tl: $all, $tr: $all, $br: $all, $bl: $all) {
+    border-radius: s($tl) s($tr) s($br) s($bl);
+    -gtk-outline-radius: s($tl) s($tr) s($br) s($bl);
+}
+
+@mixin border($colour, $width: 1, $style: solid) {
+    border: s($width) $style $colour;
+}
+
+@mixin spacing($val: 5, $vertical: false) {
+    $dir: if($vertical, bottom, right);
+
+    & > * {
+        margin-#{$dir}: s($val);
+
+        &:last-child {
+            margin-#{$dir}: 0;
+        }
+    }
+}
+
+@mixin element-decel {
+    transition: 200ms cubic-bezier(0, 0.55, 0.45, 1);
+}
diff --git a/scss/bar.scss b/scss/bar.scss
new file mode 100644
index 0000000..618944a
--- /dev/null
+++ b/scss/bar.scss
@@ -0,0 +1,103 @@
+@use "sass:color";
+@use "lib";
+@use "scheme";
+@use "font";
+
+.bar {
+    @include lib.rounded(10, $tl: 0, $tr: 0);
+    @include lib.border(color.change(scheme.$rosewater, $alpha: 0.7), 2);
+    @include lib.spacing(10);
+    @include font.mono;
+
+    border-top: none;
+    background-color: scheme.$base;
+    padding: lib.s(8) lib.s(20);
+    font-size: lib.s(14);
+
+    & > * {
+        @include lib.spacing(10);
+    }
+
+    .module {
+        @include lib.rounded(5);
+        @include lib.spacing;
+
+        padding: lib.s(3) lib.s(8);
+        background-color: scheme.$surface0;
+    }
+
+    label.icon {
+        @include font.icon;
+
+        font-size: lib.s(18);
+    }
+
+    .os-icon {
+        @include lib.border(scheme.$yellow);
+
+        color: scheme.$yellow;
+        font-size: lib.s(14);
+        padding-right: lib.s(12);
+    }
+
+    .active-window {
+        color: scheme.$pink;
+    }
+
+    .media-playing {
+        @include lib.spacing(8);
+
+        color: scheme.$lavender;
+
+        icon {
+            font-size: lib.s(16);
+        }
+    }
+
+    .workspaces {
+        @include lib.border(scheme.$maroon);
+
+        padding: lib.s(3) lib.s(18);
+
+        & > * {
+            @include lib.rounded(2);
+            @include lib.element-decel;
+
+            min-width: lib.s(20);
+            min-height: lib.s(4);
+            background-color: scheme.$surface1;
+
+            &.occupied {
+                background-color: scheme.$sky;
+            }
+
+            &.focused {
+                min-width: lib.s(30);
+                background-color: scheme.$mauve;
+            }
+        }
+    }
+
+    .tray {
+        @include lib.spacing(10);
+
+        font-size: lib.s(15);
+    }
+
+    .notifications {
+        color: scheme.$mauve;
+    }
+
+    .date-time {
+        color: scheme.$peach;
+    }
+
+    .power {
+        @include lib.border(scheme.$red);
+        @include font.icon;
+
+        color: scheme.$red;
+        font-weight: bold;
+        font-size: lib.s(16);
+    }
+}
diff --git a/scss/scheme/_mocha.scss b/scss/scheme/_mocha.scss
new file mode 100644
index 0000000..728949d
--- /dev/null
+++ b/scss/scheme/_mocha.scss
@@ -0,0 +1,26 @@
+$rosewater: #f5e0dc;
+$flamingo: #f2cdcd;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext0: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$mantle: #181825;
+$crust: #11111b;
diff --git a/scss/widgets.scss b/scss/widgets.scss
new file mode 100644
index 0000000..0e11f46
--- /dev/null
+++ b/scss/widgets.scss
@@ -0,0 +1,120 @@
+@use "sass:color";
+@use "scheme";
+@use "lib";
+@use "font";
+
+@keyframes appear {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@mixin -appear($duration: 100ms) {
+    animation-name: appear;
+    animation-duration: $duration;
+    animation-timing-function: ease-out;
+    animation-iteration-count: 1;
+}
+
+menu {
+    @include -appear;
+    @include lib.rounded(5);
+    @include lib.border(color.change(scheme.$blue, $alpha: 0.7), 2);
+    @include font.main;
+
+    padding: lib.s(10);
+    background-color: scheme.$surface0;
+    color: scheme.$text;
+
+    & > menuitem {
+        @include lib.rounded(8);
+
+        padding: lib.s(8) lib.s(16);
+        background: transparent;
+        transition: 0.2s ease background-color;
+
+        &:hover,
+        &:focus {
+            background-color: scheme.$surface1;
+        }
+
+        &:active {
+            background-color: scheme.$surface2;
+        }
+
+        &:disabled {
+            color: scheme.$subtext0;
+        }
+
+        & > arrow {
+            @include lib.rounded(1000);
+
+            min-width: lib.s(5);
+            min-height: lib.s(5);
+            background-color: scheme.$blue;
+
+            &.right {
+                margin-left: lib.s(12);
+            }
+
+            &.left {
+                margin-right: lib.s(12);
+            }
+        }
+    }
+
+    & > separator {
+        @include lib.rounded(1);
+
+        background-color: scheme.$blue;
+        min-width: lib.s(0.5);
+        min-height: lib.s(0.5);
+        margin: lib.s(8) 0;
+    }
+}
+
+tooltip,
+.tooltip {
+    @include lib.rounded(5);
+    @include lib.border(color.change(scheme.$teal, $alpha: 0.7));
+    @include font.reading;
+
+    background-color: scheme.$surface0;
+    color: scheme.$text;
+    padding: lib.s(4) lib.s(8);
+}
+
+tooltip {
+    @include -appear(200ms);
+}
+
+scrollbar {
+    trough {
+        @include lib.rounded(1000);
+
+        min-width: lib.s(12);
+        background-color: transparent;
+    }
+
+    slider {
+        @include lib.rounded(1000);
+        @include lib.element-decel;
+
+        min-width: lib.s(6);
+        min-height: lib.s(30);
+        background-color: color.change(scheme.$overlay0, $alpha: 0.3);
+
+        &:hover,
+        &:focus {
+            background-color: color.change(scheme.$overlay0, $alpha: 0.4);
+        }
+
+        &:active {
+            background-color: color.change(scheme.$overlay1, $alpha: 0.5);
+        }
+    }
+}
-- 
cgit v1.2.3-freya