1 files changed, 21 insertions, 24 deletions

diff --git a/styles/_window.scss b/styles/_window.scss
index a365c2e..5ce6e71 100644
--- a/styles/_window.scss
+++ b/styles/_window.scss
@@ -5,6 +5,7 @@
   transition-property: opacity, visibility, transform, width, height, top, left;
   transition-duration: .3s;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  color: var(--color-text);
 
   &.moving {
     transition: none
@@ -12,7 +13,7 @@
 
   &--popup {
     padding: 1em;
-    background: white;
+    background: var(--color-popup-bg);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -43,7 +44,7 @@
 
   &__title {
     position: absolute;
-    background-color: rgb(151, 215, 200, .9);
+    background-color: var(--color-glass);
     top: 0;
     left: 0;
     right: 0;
@@ -51,8 +52,8 @@
     text-align: center;
     padding: .5em;
     width: 100%;
-    border-bottom: 1px solid #bbb;
-    border-top: 1px solid rgba(255,255,255,.7);
+    border-bottom: 1px solid var(--color-window-border-bottom);
+    border-top: 1px solid var(--color-window-border-top);
     border-top-left-radius: .5em;
     border-top-right-radius: .5em;
   }
@@ -77,12 +78,12 @@
       padding: .5em;
       transition: .3s background, .3s color;
       border-radius: .5em;
-      color: #666;
+      color: var(--color-window-buttons);
       font-size: 0.8em;
 
       &:hover {
-        background-color: rgba(0,0,0,.1);
-        color: #222;
+        background-color: var(--color-selected);
+        color: var(--color-window-buttons-alt);
       }
     }
   }
@@ -90,7 +91,7 @@
   &__content {
     position: absolute;
     overflow: hidden;
-    background-color: #fff;
+    background-color: var(--color-window-content);
     top: 2em;
     right: 0;
     bottom: 0;
@@ -108,7 +109,7 @@
     display: block;
     margin: -1em -1em 1em;
     height: 2em;
-    background: #eee;
+    background: var(--color-window-menu);
 
     & > div {
       // cursor: pointer;
@@ -117,7 +118,7 @@
       transition: .3s background;
 
       &:hover {
-        background-color: #ddd;
+        background-color: var(--color-window-menu-alt);
       }
     }
   }
@@ -134,38 +135,34 @@
   }
 
   &__button {
-    color: #333;
+    color: var(--color-text);
     margin: 1em 1em 0;
     font-size: 1em;
     padding: .5em 1em;
-    background-color: rgb(151, 215, 200, .3);
+    background-color: var(--color-button);
     border-left: 0;
     border-right: 0;
-    border-top: 1px solid rgb(151, 215, 200, .1);
-    border-bottom: 1px solid rgb(151, 215, 200, .5);
+    border-top: 1px solid var(--color-button-border);
+    border-bottom: 1px solid var(--color-button-border);
     border-radius: .5em;
     // cursor: pointer;
     transition: .3s background-color;
 
     &:hover {
-      background-color: rgb(151, 215, 200, .5);
+      background-color:  var(--color-button-alt);
     }
   }
 
   &--error {
-    background: #ffefef;
-
-    & > .window__title {
-      background: rgba(255, 131, 131, 0.9);
-    }
+    background: var(--color-popup-error-bg);
 
     .window__button {
-      background: rgba(255, 131, 131, 0.3);
-      border-top: 1px solid rgba(255, 131, 131, 0.1);
-      border-bottom: 1px solid rgba(255, 131, 131, 0.5);
+      background-color: var(--color-popup-error-button);
+      border-top: 1px solid var(--color-popup-error-border);
+      border-bottom: 1px solid  var(--color-popup-error-border);
 
       &:hover {
-        background: rgba(255, 131, 131, 0.5)
+        background-color: var(--color-popup-error-button-alt);
       }
     }
   }