♻️ refactor: correctly organize resources in the resources directory

resources.gresource.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<gresources>
+    <!-- Sass -->
+    <gresource prefix="/io/github/retrozinndev/colorshell/styles">
+        <file alias="main">styles/style.scss</file>
+        <file alias="apps-window">style/_apps-window.scss</file>
+        <file alias="bar">styles/_bar.scss</file>
+        <file alias="center-window">styles/_center-window.scss</file>
+        <file alias="control-center">styles/_control-center.scss</file>
+        <file alias="float-notifications">styles/_float-notifications.scss</file>
+        <file alias="logout-menu">styles/_logout-menu.scss</file>
+        <file alias="mixins">styles/_mixins.scss</file>
+        <file alias="osd">styles/_osd.scss</file>
+        <file alias="runner">styles/_runner.scss</file>
+    </gresource>
+
+    <!-- Icons -->
+    <gresource prefix="/io/github/retrozinndev/colorshell/icons/hicolor/scalable/actions">
+        <file alias="applications-other-symbolic">icons/applications-other-symbolic.svg</file>
+        <file alias="arrow-circular-top-right-symbolic">icons/arrow-circular-top-right-symbolic.svg</file>
+        <file alias="circle-filled-symbolic">icons/circle-filled-symbolic.svg</file>
+        <file alias="hourglass-symbolic">icons/hourglass-symbolic.svg</file>
+        <file alias="loop-arrow-symbolic">icons/loop-arrow-symbolic.svg</file>
+        <file alias="minus-circle-filled-symbolic">icons/minus-circle-filled-symbolic.svg</file>
+        <file alias="shield-danger-symbolic">icons/shield-danger-symbolic.svg</file>
+        <file alias="shield-safe-symbolic">icons/shield-safe-symbolic.svg</file>
+        <file alias="user-trash-symbolic">icons/user-trash-symbolic.svg</file>
+    </gresource>
+</gresources>

resources/styles/main.scss

@@ -0,0 +1,314 @@
+@use "sass:color";
+
+@use "./style/wal";
+@use "./style/mixins";
+@use "./style/functions";
+@use "./style/colors";
+
+@use "./style/bar";
+@use "./style/osd";
+@use "./style/control-center";
+@use "./style/center-window";
+@use "./style/float-notifications";
+@use "./style/logout-menu";
+@use "./style/apps-window";
+@use "./style/runner";
+
+
+* {
+  @include mixins.reset-props;
+}
+
+entry {
+  background: colors.$bg-primary;
+  padding: 10px 9px;
+  border-radius: 12px;
+
+  &:focus {
+    box-shadow: inset 0 0 0 2px colors.$bg-secondary;
+  }
+
+  & image.left {
+    margin-right: 6px;
+  }
+}
+
+.custom-dialog-container {
+  background: colors.$bg-translucent;
+  padding: 18px;
+  border-radius: 24px;
+
+  & .title {
+    font-size: 21px;
+    font-weight: 700;
+    margin-bottom: 10px;
+  }
+
+  & .text {
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  & .options {
+    & button {
+      @include mixins.button-reactive-primary;
+      background: colors.$bg-primary;
+      border-radius: 12px;
+      padding: 9px 6px;
+
+      & label {
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      margin: {
+        left: 4px;
+        right: 4px;
+      };
+    }
+  }
+
+  &.entry-popup-box entry {
+    margin-bottom: 10px;
+
+    &.password {
+      font-size: 14px;
+      font-family: "Adwaita Mono", "Cantarell Mono", "Noto Sans Mono", monospace;
+      font-weight: 400;
+    }
+  }
+}
+
+.notification {
+  background: colors.$bg-translucent-secondary;
+  border-radius: 16px;
+
+  & > .top {
+    padding: 8px;
+    padding-bottom: 0;
+
+    & .app-icon {
+      margin-right: 6px;
+    }
+
+    & .app-name {
+      font-size: 12px;
+    }
+
+
+    & label.time {
+      font-size: 11px;
+      font-weight: 500;
+      color: colors.$fg-disabled;
+      margin-right: 6px;
+    }
+
+    & button.close {
+      padding: 2px;
+      border-radius: 8px;
+
+      &:hover {
+        background: colors.$bg-secondary;
+      }
+    }
+
+    & icon.close {
+      font-size: 16px;
+    }
+  }
+
+  & .content {
+    padding: 6px;
+    padding-top: 0;
+
+    & .image {
+      $size: 78px;
+      min-width: $size;
+      min-height: $size;
+      background-size: cover;
+      background-position: center;
+      margin: 6px;
+      border-radius: 8px;
+    }
+
+    & .summary {
+      font-size: 17.3px;
+      font-weight: 700;
+      margin-bottom: 4px;
+    }
+
+    & .body {
+      font-size: 14.5px;
+      font-weight: 400;
+    }
+  }
+
+  & .actions {
+    padding: 6px;
+
+    & button.action {
+      border-radius: 4px;
+      background: colors.$bg-secondary;
+      padding: 6px;
+
+      & label {
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      &:hover {
+        background: colors.$bg-tertiary;
+      }
+
+      &:first-child {
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+      }
+      &:last-child {
+        border-top-right-radius: 12px;
+        border-bottom-right-radius: 12px;
+      }
+    }
+  }
+}
+
+tooltip > box {
+  padding: 7px 8px;
+  margin: 12px;
+  margin-top: 0;
+  border-radius: 12px;
+  background: rgba(colors.$bg-primary, .98);
+  box-shadow: 0 5px 6px 1px colors.$bg-translucent-primary;
+
+  & label {
+    font-size: 13.1px;
+    font-weight: 500;
+    color: colors.$fg-primary;
+  }
+}
+
+popover.menu contents {
+  background: wal.$background;
+  border-radius: 14px;
+  padding: 4px;
+
+  & viewport > stack > * > * > * {
+    & > separator {
+      min-height: .5px;
+      margin: 3px 2px;
+      background: rgba(colors.$fg-disabled, .1);
+    }
+
+    & > *:not(separator) > * {
+      padding: 6px;
+      border-radius: 10px;
+      font-size: 12px;
+      font-weight: 600;
+                                 
+      &:hover, &:focus {
+        background: wal.$color1;
+      }
+    }
+  }
+}
+
+.button-row {
+  & > button {
+    $active-radius: 8px;
+    $corner-radius: calc($active-radius + 2px);
+
+    background: colors.$bg-secondary;
+    margin: 0 1px;
+    padding: 4px 6px;
+    border-radius: 2px;
+    transition: 120ms linear;
+
+    &:hover {
+      background: colors.$bg-tertiary;
+    }
+
+    &:active {
+      border-radius: $active-radius;
+    }
+
+    &:first-child {
+      margin-left: 0;
+
+      &:not(:active) {
+        border-top-left-radius: $corner-radius;
+        border-bottom-left-radius: $corner-radius;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+
+      &:not(:active) {
+        border-top-right-radius: $corner-radius;
+        border-bottom-right-radius: $corner-radius;
+      }
+    }
+  }
+}
+
+selection {
+  background: colors.$bg-tertiary;
+}
+
+trough {
+  background: color.adjust($color: colors.$bg-primary, $lightness: -5%);
+  border-radius: 8px;
+  margin: 2px 0;
+}
+
+trough highlight {
+  background: wal.$color1;
+  min-height: .9em;
+}
+
+trough slider {
+  border-radius: 50%;
+  margin: -4px 0;
+  background: wal.$foreground;
+  min-width: 1.2em;
+  min-height: 1.2em;
+}
+
+scrollbar trough {
+  @include mixins.reset-props;
+
+  background: colors.$bg-translucent;
+  border-radius: 8px;
+
+  & slider {
+    @include mixins.reset-props;
+
+    min-width: .45em;
+    background: colors.$bg-tertiary;
+    border-radius: 12px;
+
+    &:hover, &:active, &:focus {
+      margin: 2px;
+    }
+  }
+
+  &:hover, &:active, &:focus {
+    padding: 2px;
+  }
+}
+
+scale {
+  & marks mark {
+    & indicator {
+      color: colors.$fg-disabled;
+      min-width: 1px;
+      min-height: 6px;
+    }
+
+    & label {
+      font-size: 11px;
+      font-weight: 400;
+      color: colors.$fg-disabled;
+    }
+  }
+}

tsconfig.json

@@ -9,7 +9,7 @@
     "moduleResolution": "bundler",
     "skipLibCheck": true,
     "types": [
-        "../@girs"
+        "./@girs"
     ],
     "strict": true,
     "jsx": "react-jsx",