kdsjdjks

frontend/app/assets/css/colors.scss

@@ -0,0 +1,73 @@
+@use "sass:map";
+
+$themes: (
+    dark: (
+        background: #141414,
+        background-line: #202324,
+        background-fore: #10141f,
+        hover: #21262d,
+        selected: #4a4a4b,
+        border-color: #819796,
+        border: #202324,
+        text: #ebede9,
+        container-shadow: #151d28,
+        sticky-header-bg: #20202077
+    ),
+    light: (
+        background: #ffffff,
+        background-line: #f0f0f0,
+        background-fore: #ffffff,
+        border-color: #e0e0e0,
+        border: #f0f0f0,
+        hover: #e9e9e9,
+        selected: #d4d4d4,
+        text: #1e1e1e,
+        container-shadow: #5f6774,
+        sticky-header-bg: #fff
+    )
+);
+
+$accents: (
+  katlum: (
+    link: #a4dddb,
+  ),
+  solus: (
+    link: #e6a556,
+  ),
+  silang: (
+    link: #c65197,
+  )
+);
+
+@mixin theme-vars($theme-map) {
+  @each $name, $value in $theme-map {
+    --color-#{$name}: #{$value};
+  }
+}
+
+@mixin accent-vars($accent-map) {
+  @each $name, $value in $accent-map {
+    --color-#{$name}: #{$value};
+  }
+}
+
+:root {
+  @include theme-vars(map.get($themes, dark));
+  @include accent-vars(map.get($accents, katlum));
+}
+
+[data-theme="light"] {
+  @include theme-vars(map.get($themes, light));
+}
+
+[data-accent="katlum"] {
+  @include accent-vars(map.get($accents, katlum));
+}
+
+[data-accent="solus"] {
+  @include accent-vars(map.get($accents, solus));
+}
+
+[data-accent="silang"] {
+  @include accent-vars(map.get($accents, silang));
+}

frontend/app/assets/css/main.scss

@@ -37,4 +37,18 @@ a {
 
 .error-link {
   color: var(--error-link);
+}
+
+
+.window-wrapper {
+  display: flex;
+  align-items: center;
+  border: solid 1px var(--color-border);
+  
+  /* opacity: 0; */
+
+  user-select: none;
+  -webkit-box-shadow: 0px 0px 10px -2px var(--shadow-color);
+  -moz-box-shadow: 0px 0px 10px -2px var(--shadow-color);
+  box-shadow: 0px 0px 10px -2px var(--shadow-color);
 }