4 files changed, 145 insertions, 0 deletions
diff --git a/pkgs/astal/src/style/style.scss b/pkgs/astal/src/style/style.scss
new file mode 100644
index 0000000..77c8b36
--- /dev/null
+++ b/pkgs/astal/src/style/style.scss
@@ -0,0 +1,56 @@
+@use "sass:color";
+@use "sass:math";
+
+@import "./theme";
+
+* {
+    all: unset;
+}
+
+window {
+    color: $text;
+    font-family: $font-name;
+}
+
+button {
+    color: $text;
+    background: $surface-bg;
+
+    &:hover {
+        color: $hover;
+        background: $hover-bg;
+    }
+
+    &.primary {
+        color: $primary;
+        background: $primary-bg;
+    }
+}
+
+menu {
+    background: $bg;
+    padding: $inner-gap 0;
+    border-radius: $outer-radius;
+
+    menuitem {
+        color: $text;
+        margin: $inner-gap $outer-gap;
+        padding: $inner-gap;
+        border-radius: $inner-radius;
+
+        &:hover,
+        &:selected {
+            background: $surface-bg;
+        }
+
+        &:disabled {
+            color: $subtext;
+        }
+    }
+
+    separator {
+        background-color: $surface-bg;
+        min-height: 1px;
+        margin: $inner-gap 0;
+    }
+}
diff --git a/pkgs/astal/src/style/theme.scss b/pkgs/astal/src/style/theme.scss
new file mode 100644
index 0000000..2af74f5
--- /dev/null
+++ b/pkgs/astal/src/style/theme.scss
@@ -0,0 +1,32 @@
+
+$text: #cdd6f4;
+$subtext: #a6adc8;
+
+$bg: #1e1e2e;
+$surface-bg: #313244;
+
+$hover: $text;
+$hover-bg: #6c7086;
+
+$primary: $bg;
+$primary-bg: #89b4fa;
+
+$success: #a6e3a1;
+$success-bg: $bg;
+
+$warning: #f9e2af;
+$warning-bg: $bg;
+
+$error: #f38ba8;
+$error-bg: $bg;
+
+$border: 2px;
+
+$inner-radius: 4px;
+$outer-radius: 8px;
+
+$inner-gap: 3px;
+$outer-gap: 10px;
+
+$font-name: "JetBrains Mono", "monospace";
+$font-size: 14px;
diff --git a/pkgs/astal/src/style/widget/bar.scss b/pkgs/astal/src/style/widget/bar.scss
new file mode 100644
index 0000000..01e73ce
--- /dev/null
+++ b/pkgs/astal/src/style/widget/bar.scss
@@ -0,0 +1,48 @@
+
+.bar {
+  background: $bg;
+
+  .workspaces {
+    margin: $inner-gap $outer-gap;
+
+    .workspace {
+      margin: $inner-gap;
+      border-radius: $inner-radius;
+      min-width: $font-size + $outer-gap;
+      min-height: $font-size + $outer-gap;
+      font-weight: bold;
+    }
+  }
+
+  .right {
+    margin: $inner-gap $outer-gap;
+
+    .wifi,
+    .audio,
+    .battery,
+    .tray {
+      margin: $inner-gap $outer-gap;
+      margin-right: 0px;
+      background: $surface-bg;
+      border-radius: $inner-radius;
+      padding: 0px $outer-gap;
+
+      icon {
+        margin-right: $inner-gap;
+      }
+
+    }
+
+    .tray {
+      padding-right: 0;
+
+      icon {
+        margin-right: $outer-gap;
+      }
+
+      .menubtn:hover {
+        background: transparent;
+      }
+    }
+  }
+}
diff --git a/pkgs/astal/src/style/widget/corners.scss b/pkgs/astal/src/style/widget/corners.scss
new file mode 100644
index 0000000..53cdb9b
--- /dev/null
+++ b/pkgs/astal/src/style/widget/corners.scss
@@ -0,0 +1,9 @@
+
+.corners {
+  $radius: $outer-radius + $outer-gap;
+
+  box {
+    box-shadow: 0 0 0 $radius $bg;
+    border-radius: $radius $radius 0 0;
+  }
+}