From 9ce1ca907965b0cf7c99a3bac919d7aee341ea2e Mon Sep 17 00:00:00 2001
From: Benjamin Sattler <bsattler.inbox@gmail.com>
Date: Thu, 21 May 2020 12:03:55 +0200
Subject: [PATCH] move css in separate files

---
 .eslintrc.json                   |   2 +-
 lib/OsWindow/OsWindow.js         | 516 +------------------------------
 package.json                     |   2 +-
 style/OsWindow/OsWindow.css      |  43 +++
 style/OsWindow/index.css         |   6 +
 style/OsWindow/theme/default.css | 116 +++++++
 style/OsWindow/theme/mac.css     | 116 +++++++
 style/OsWindow/theme/win-xp.css  | 198 ++++++++++++
 style/OsWindow/variables.css     |  41 +++
 yarn.lock                        | 174 +++++------
 10 files changed, 606 insertions(+), 608 deletions(-)
 create mode 100644 style/OsWindow/OsWindow.css
 create mode 100644 style/OsWindow/index.css
 create mode 100644 style/OsWindow/theme/default.css
 create mode 100644 style/OsWindow/theme/mac.css
 create mode 100644 style/OsWindow/theme/win-xp.css
 create mode 100644 style/OsWindow/variables.css

diff --git a/.eslintrc.json b/.eslintrc.json
index eca5a25..b62f370 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -19,7 +19,7 @@
         "quixote": true
     },
     "parserOptions": {
-        "ecmaVersion": 2018,
+        "ecmaVersion": 2020,
         "sourceType": "module"
     },
     "rules": {
diff --git a/lib/OsWindow/OsWindow.js b/lib/OsWindow/OsWindow.js
index a27eb31..4263cef 100644
--- a/lib/OsWindow/OsWindow.js
+++ b/lib/OsWindow/OsWindow.js
@@ -1,521 +1,11 @@
 /* eslint-disable no-param-reassign */
 
 const templateElement = document.createElement('template');
+const path = document.createElement('a');
+path.href = import.meta.url;
 templateElement.innerHTML = `
 <style>
-    /* {{{ ***** generic styles ******/
-    :host {
-        display: inline-block;
-        transition: width .3s, height .3s;
-    }
-
-    * {
-        transition: color .1s, background .3s;
-    }
-
-    .window-wrapper {
-        --mac-window-title-button-diameter: .8rem;
-        --mac-window-border-radius: 8px;
-        --mac-window-title-bar-height: 2.5rem;
-        --mac-window-title-bar-button-close-color: #ef534a;
-        --mac-window-title-bar-button-maximize-color: #97d272;
-        --mac-window-title-bar-button-minimize-color: #edc04a;
-        --mac-window-theme-dark-background-color: #343a46;
-        --mac-window-theme-dark-font-color: #ffffff;
-        --mac-window-theme-light-background-color: #eef1f5;
-        --mac-window-theme-light-font-color: #87827d;
-        --mac-window-font: sans-serif;
-
-        --win-xp-window-title-button-diameter: 1.7rem;
-        --win-xp-window-border-radius: 8px;
-        --win-xp-window-title-bar-height: 2.5rem;
-        --win-xp-window-theme-dark-border-color: rgba(239,238,241,1);
-        --win-xp-window-theme-dark-font-color: black;
-        --win-xp-window-theme-dark-title-bar-text-shadow-color: #999999;
-        --win-xp-window-theme-dark-title-bar-button-close-text-shadow-color: #724846;
-        --win-xp-window-theme-dark-title-bar-button-close-font-color: #ffffff;
-        --win-xp-window-theme-dark-title-bar-button-close-background-color: #ef534a;
-        --win-xp-window-theme-dark-title-bar-button-close-hover-color: #f66030;
-        --win-xp-window-theme-dark-title-bar-button-font-color: #4f4a59;
-        --win-xp-window-theme-dark-title-bar-button-background-color: #d4d2e0;
-        --win-xp-window-theme-dark-title-bar-border-color: #000000;
-        --win-xp-window-theme-dark-title-bar-button-hover-color: #e4e2f0;
-        --win-xp-window-theme-dark-title-bar-background-color: linear-gradient(180deg, rgba(134,133,139,1) 0%, rgba(239,238,241,1) 2%, rgba(166,165,186,1) 20%, rgba(252,253,255,1) 94%, rgba(132,132,141,1) 100%);
-        --win-xp-window-theme-light-border-color: rgba(48,118,222,1);
-        --win-xp-window-theme-light-font-color: #ffffff;
-        --win-xp-window-theme-light-title-bar-text-shadow-color: #333333;
-        --win-xp-window-theme-light-title-bar-button-close-font-color: #ffffff;
-        --win-xp-window-theme-light-title-bar-button-close-background-color: #ef534a;
-        --win-xp-window-theme-light-title-bar-button-close-hover-color: #f66030;
-        --win-xp-window-theme-light-title-bar-button-font-color: #ffffff;
-        --win-xp-window-theme-light-title-bar-button-background-color: #2c6af6;
-        --win-xp-window-theme-light-title-bar-border-color: #ffffff;
-        --win-xp-window-theme-light-title-bar-button-hover-color: #3c7af6;
-        --win-xp-window-theme-light-title-bar-background-color: linear-gradient(180deg, rgba(48,118,222,1) 0%, rgba(48,147,255,1) 2%, rgba(2,82,227,1) 20%, rgba(5,106,255,1) 94%, rgba(15,70,192,1) 100%);
-        --win-xp-window-font: sans-serif;
-
-        filter: drop-shadow( 0 2px 2px rgba(0, 0, 0, .3));
-        position: relative;
-        width: 100%;
-        min-width: 100px;
-        max-width: 100%;
-        overflow: hidden;
-        max-height: 100%;
-    }
-
-    .window-title-buttons {
-        position: relative;
-    }
-
-    .window-content-slot-wrapper {
-        overflow: hidden;
-    }
-
-    :host(:not([window-state="maximized"])) .window-wrapper .window-content-slot-wrapper,
-    :host([window-state="maximized"]) .window-wrapper .window-content-slot-wrapper {
-        height: auto;
-    }
-
-    :host([window-state="minimized"]) .window-wrapper .window-content-slot-wrapper {
-        height: 0;
-        padding-bottom: 0;
-    }
-
-    .aria-label {
-        display:none;
-    }
-    /* }}} */
-
-    /* {{{ ****** default theme styles ******/
-    .window-wrapper {
-        border-radius: var(--mac-window-border-radius);
-    }
-
-    .window-title-bar {
-        height: var(--window-title-bar-height);
-        line-height: var(--mac-window-title-bar-height);
-        display: flex;
-    }
-
-    .window-title-buttons {
-        margin-left: 1rem;
-        white-space: nowrap;
-    }
-
-    .window-title-button {
-        border-width: 0;
-        border-radius: calc(var(--mac-window-title-button-diameter) / 2);
-        height: var(--mac-window-title-button-diameter);
-        width: var(--mac-window-title-button-diameter);
-        margin: 0 calc(var(--mac-window-title-button-diameter) / 5);
-        font-weight: 600;
-        fill: transparent;
-        padding: 0 0 0 0;
-        color: transparent;
-        transition: color .15s;
-    }
-
-    .window-title-button::after {
-        line-height: 1;
-        display: inline;
-        vertical-align: 10%;
-    }
-
-    :host([hover]) .window-title-button:hover,
-    :host([hover]) .window-title-button:focus {
-        color: rgba(0, 0, 0, .3);
-    }
-
-    .window-title-button__close {
-        background: var(--mac-window-title-bar-button-close-color);
-    }
-
-    .window-title-button__close::after {
-        content: "⨉";
-    }
-
-    .window-title-button__minimize {
-        background: var(--mac-window-title-bar-button-minimize-color);
-    }
-
-    .window-title-button__minimize::after {
-        content: "–";
-    }
-
-    .window-title-button__maximize {
-        background: var(--mac-window-title-bar-button-maximize-color);
-    }
-
-    .window-title-button__maximize::after {
-        content: "+";
-    }
-
-    .window-title-text {
-        line-height: 2.95;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        text-align: center;
-        font-family: var(--mac-window-font);
-        padding: 0 3rem;
-        width: 100%;
-        margin: 0 auto;
-
-    }
-
-    .window-content-slot-wrapper {
-        padding: 0 1rem .5rem 1rem;
-        font-family: var(--mac-window-font);
-        box-sizing: border-box;
-    }
-
-    :host([theme="dark"]) .window-content-slot-wrapper {
-        color: var(--mac-window-theme-dark-font-color);
-        background: var(--mac-window-theme-dark-background-color);
-    }
-
-    .window-content-slot-wrapper,
-    :host([theme="light"]) .window-content-slot-wrapper {
-        color: var(--mac-window-theme-light-font-color);
-        background: var(--mac-window-theme-light-background-color);
-    }
-
-    :host([theme="dark"]) .window-title-text {
-        color: var(--mac-window-theme-dark-font-color);
-        background: var(--mac-window-theme-dark-background-color);
-    }
-
-    .window-title-text,
-    :host([theme="light"]) .window-title-text {
-        color: var(--mac-window-theme-light-font-color);
-        background: var(--mac-window-theme-light-background-color);
-    }
-
-    .window-title-bar,
-    :host([theme="light"]) .window-title-bar {
-        color: var(--mac-window-theme-light-font-color);
-        background: var(--mac-window-theme-light-background-color);
-    }
-
-    :host([theme="dark"]) .window-title-bar {
-        color: var(--mac-window-theme-dark-font-color);
-        background: var(--mac-window-theme-dark-background-color);
-    }
-    /* }}} */
-
-    /* {{{ ****** mac theme styles ******/
-    :host([os-theme="mac"]) .window-wrapper {
-        border-radius: var(--mac-window-border-radius);
-    }
-
-    :host([os-theme="mac"]) .window-title-bar {
-        height: var(--window-title-bar-height);
-        line-height: var(--mac-window-title-bar-height);
-        display: flex;
-    }
-
-    :host([os-theme="mac"]) .window-title-buttons {
-        margin-left: 1rem;
-        white-space: nowrap;
-    }
-
-    :host([os-theme="mac"]) .window-title-button {
-        border-width: 0;
-        border-radius: calc(var(--mac-window-title-button-diameter) / 2);
-        height: var(--mac-window-title-button-diameter);
-        width: var(--mac-window-title-button-diameter);
-        margin: 0 calc(var(--mac-window-title-button-diameter) / 5);
-        font-weight: 600;
-        fill: transparent;
-        padding: 0 0 0 0;
-        color: transparent;
-        transition: color .15s;
-    }
-
-    :host([os-theme="mac"]) .window-title-button::after {
-        line-height: 1;
-        display: inline;
-        vertical-align: 10%;
-    }
-
-    :host([hover][os-theme="mac"]) .window-title-button:hover
-    :host([hover][os-theme="mac"]) .window-title-button:focus {
-        color: rgba(0, 0, 0, .3);
-    }
-
-    :host([os-theme="mac"]) .window-title-button__close {
-        background: var(--mac-window-title-bar-button-close-color);
-    }
-
-    :host([os-theme="mac"]) .window-title-button__close::after {
-        content: "⨉";
-    }
-
-    :host([os-theme="mac"]) .window-title-button__minimize {
-        background: var(--mac-window-title-bar-button-minimize-color);
-    }
-
-    :host([os-theme="mac"]) .window-title-button__minimize::after {
-        content: "–";
-    }
-
-    :host([os-theme="mac"]) .window-title-button__maximize {
-        background: var(--mac-window-title-bar-button-maximize-color);
-    }
-
-    :host([os-theme="mac"]) .window-title-button__maximize::after {
-        content: "+";
-    }
-
-    :host([os-theme="mac"]) .window-title-text {
-        line-height: 2.95;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        text-align: center;
-        font-family: var(--mac-window-font);
-        padding: 0 3rem;
-        width: 100%;
-        margin: 0 auto;
-    }
-
-    :host([os-theme="mac"]) .window-content-slot-wrapper {
-        padding: 0 1rem .5rem 1rem;
-        font-family: var(--mac-window-font);
-        box-sizing: border-box;
-    }
-
-    :host([os-theme="mac"]) .window-content-slot-wrapper,
-    :host([theme="light"][os-theme="mac"]) .window-content-slot-wrapper {
-        color: var(--mac-window-theme-light-font-color);
-        background: var(--mac-window-theme-light-background-color);
-    }
-
-    :host([theme="dark"][os-theme="mac"]) .window-content-slot-wrapper {
-        color: var(--mac-window-theme-dark-font-color);
-        background: var(--mac-window-theme-dark-background-color);
-    }
-
-    :host([os-theme="mac"]) .window-title-text,
-    :host([theme="light"][os-theme="mac"]) .window-title-text {
-        color: var(--mac-window-theme-light-font-color);
-        background: var(--mac-window-theme-light-background-color);
-    }
-
-    :host([theme="dark"][os-theme="mac"]) .window-title-text {
-        color: var(--mac-window-theme-dark-font-color);
-        background: var(--mac-window-theme-dark-background-color);
-    }
-
-    :host([os-theme="mac"]) .window-title-bar,
-    :host([theme="light"][os-theme="mac"]) .window-title-bar {
-        color: var(--mac-window-theme-light-font-color);
-        background: var(--mac-window-theme-light-background-color);
-    }
-
-    :host([theme="dark"][os-theme="mac"]) .window-title-bar {
-        color: var(--mac-window-theme-dark-font-color);
-        background: var(--mac-window-theme-dark-background-color);
-    }
-    /* }}} */
-
-    /* {{{ ***** win-xp theme styles ******/
-    :host([os-theme="win-xp"]) .window-wrapper {
-        border-radius: var(--win-xp-window-border-radius);
-    }
-
-    :host([os-theme="win-xp"]) .window-title-bar {
-        height: 2.5rem;
-        line-height: var(--win-xp-window-title-bar-height);
-        display: flex;
-        flex-direction: row-reverse;
-    }
-
-    :host([os-theme="win-xp"]) .window-title-buttons {
-        margin-right: 7px;
-        margin-top: 7px;
-        white-space: nowrap;
-        display: flex;
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button {
-        border-width: 1px;
-        border-style: solid;
-        border-radius: calc(var(--win-xp-window-title-button-diameter) / 8);
-        height: var(--win-xp-window-title-button-diameter);
-        width: var(--win-xp-window-title-button-diameter);
-        margin: 0 2px;
-        font-weight: 600;
-        fill: transparent;
-        padding: 0 0 0 0;
-        font-size: 1.45rem;
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button__close {
-        order: 3;
-        background: var(--win-xp-window-title-bar-button-close-color);
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button__close::after {
-        content: "⨉";
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button__maximize {
-        order: 2;
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button__maximize::after {
-        -webkit-clip-path: polygon(0% 0%, 0% 100%, 8% 99%, 8% 17%, 92% 17%, 92% 92%, 0 92%, 0 100%, 100% 100%, 100% 0%);
-        clip-path: polygon(0% 0%, 0% 100%, 8% 99%, 8% 17%, 92% 17%, 92% 92%, 0 92%, 0 100%, 100% 100%, 100% 0%);
-        content: "";
-        height: 18px;
-        width: 18px;
-        display: inline-block;
-        line-height: 0.55;
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button__minimize {
-        order: 1;
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button__minimize::after {
-        content: "_";
-        position: relative;
-        left: -3px;
-        top: -5px;
-    }
-
-    :host([os-theme="win-xp"]) .window-title-text {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        text-align: left;
-        font-family: var(--win-xp-window-font);
-        padding-left: 1rem;
-        width: 100%;
-        margin: 0 auto;
-        background: transparent;
-    }
-
-    :host([os-theme="win-xp"]) .window-content-slot-wrapper {
-        font-family: var(--win-xp-window-font);
-        box-sizing: border-box;
-        border-width: 0 5px 5px 5px;
-        border-style: solid;
-        border-top: 0;
-        padding-top: .5rem;
-        overflow: hidden;
-        color: black;
-        background: #ebe8d7;
-    }
-
-    :host([window-state="minimized"][os-theme="win-xp"]) .window-content-slot-wrapper {
-      padding-top: 0;
-    }
-
-    :host([os-theme="win-xp"]) .window-content-slot-wrapper,
-    :host([theme="light"][os-theme="win-xp"]) .window-content-slot-wrapper {
-        border-color: var(--win-xp-window-theme-light-border-color);
-    }
-
-    :host([os-theme="win-xp"][theme="dark"]) .window-content-slot-wrapper {
-        border-color: var(--win-xp-window-theme-dark-border-color);
-    }
-
-    :host([os-theme="win-xp"]) .window-wrapper,
-    :host([os-theme="win-xp"][theme="light"]) .window-wrapper {
-        color: var(--win-xp-window-theme-light-font-color);
-    }
-
-    :host([os-theme="win-xp"]) .window-title-text,
-    :host([theme="light"][os-theme="win-xp"]) .window-title-text {
-        color: var(--win-xp-window-theme-light-font-color);
-        text-shadow: 1px 1px 2px var(--win-xp-window-theme-light-title-bar-text-shadow-color);
-    }
-
-    :host([theme="dark"][os-theme="win-xp"]) .window-title-text {
-        color: var(--win-xp-window-theme-dark-font-color);
-        text-shadow: 1px 1px 2px var(--win-xp-window-theme-dark-title-bar-text-shadow-color);
-    }
-
-    :host([os-theme="win-xp"]) .window-title-bar,
-    :host([theme="light"][os-theme="win-xp"]) .window-title-bar {
-        color: var(--win-xp-window-theme-light-font-color);
-        background: var(--win-xp-window-theme-light-title-bar-background-color);
-    }
-
-    :host([theme="dark"][os-theme="win-xp"]) .window-title-bar {
-        color: var(--win-xp-window-theme-dark-font-color);
-        background: var(--win-xp-window-theme-dark-title-bar-background-color);
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button,
-    :host([theme="light"][os-theme="win-xp"]) .window-title-button {
-        background: var(--win-xp-window-theme-light-title-bar-button-background-color);
-        border-color: var(--win-xp-window-theme-light-title-bar-border-color);
-        color: var(--win-xp-window-theme-light-title-bar-button-font-color);
-    }
-
-    :host([theme="dark"][os-theme="win-xp"]) .window-title-button {
-        background: var(--win-xp-window-theme-dark-title-bar-button-background-color);
-        border-color: var(--win-xp-window-theme-dark-title-bar-border-color);
-        color: var(--win-xp-window-theme-dark-title-bar-button-font-color);
-        text-shadow: -1px 1px 1px #ffffff;
-    }
-
-    :host([hover][os-theme="win-xp"]) .window-title-button:hover,
-    :host([hover][os-theme="win-xp"]) .window-title-button:focus,
-    :host([hover][theme="light"][os-theme="win-xp"]) .window-title-button:hover,
-    :host([hover][theme="light"][os-theme="win-xp"]) .window-title-button:focus {
-        background: var(--win-xp-window-theme-light-title-bar-button-hover-color);
-        color: var(--win-xp-window-theme-light-title-bar-button-font-color);
-    }
-
-    :host([hover][theme="dark"][os-theme="win-xp"]) .window-title-button:hover,
-    :host([hover][theme="dark"][os-theme="win-xp"]) .window-title-button:focus {
-        background: var(--win-xp-window-theme-dark-title-bar-button-hover-color);
-        color: var(--win-xp-window-theme-dark-title-bar-button-font-color);
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button__maximize::after,
-    :host([theme="light"][os-theme="win-xp"]) .window-title-button__maximize::after {
-        background: var(--win-xp-window-theme-light-title-bar-button-font-color);
-    }
-
-    :host([theme="dark"][os-theme="win-xp"]) .window-title-button__maximize::after {
-        background: var(--win-xp-window-theme-dark-title-bar-button-font-color);
-    }
-
-    :host([os-theme="win-xp"]) .window-title-button__close,
-    :host([theme="light"][os-theme="win-xp"]) .window-title-button__close {
-        background: var(--win-xp-window-theme-light-title-bar-button-close-background-color);
-        color: var(--win-xp-window-theme-light-title-bar-button-close-font-color);
-    }
-
-    :host([theme="dark"][os-theme="win-xp"]) .window-title-button__close {
-        background: var(--win-xp-window-theme-dark-title-bar-button-close-background-color);
-        color: var(--win-xp-window-theme-dark-title-bar-button-close-font-color);
-        text-shadow: -1px -1px 1px var(--win-xp-window-theme-dark-title-bar-button-close-text-shadow-color);
-    }
-
-    :host([theme="dark"][os-theme="win-xp"]) .window-title-button__close::after {
-        position: relative;
-        top: -1px;
-        color: var(--win-xp-window-theme-dark-title-bar-button-close-font-color);
-    }
-
-    :host([hover][os-theme="win-xp"]) .window-title-button__close:hover,
-    :host([hover][os-theme="win-xp"]) .window-title-button__close:focus,
-    :host([hover][theme="light"][os-theme="win-xp"]) .window-title-button__close:hover,
-    :host([hover][theme="light"][os-theme="win-xp"]) .window-title-button__close:focus {
-        background: var(--win-xp-window-theme-light-title-bar-button-close-hover-color);
-    }
-
-    :host([hover][theme="dark"][os-theme="win-xp"]) .window-title-button__close:hover,
-    :host([hover][theme="dark"][os-theme="win-xp"]) .window-title-button__close:focus {
-        background: var(--win-xp-window-theme-dark-title-bar-button-close-hover-color);
-    }
-    /* }}} */
+  @import '${path.pathname}/../../../style/OsWindow/index.css';
 </style>
 <div
   class="window-wrapper"
diff --git a/package.json b/package.json
index 2785c54..6c870eb 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
   "devDependencies": {
     "chai": "^4.2.0",
     "connect": "^3.7.0",
-    "eslint": "^6.8.0",
+    "eslint": "https://github.com/eslint/eslint.git#es2020-new-syntax",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-plugin-import": "^2.20.2",
     "husky": "^4.2.3",
diff --git a/style/OsWindow/OsWindow.css b/style/OsWindow/OsWindow.css
new file mode 100644
index 0000000..4cf1e02
--- /dev/null
+++ b/style/OsWindow/OsWindow.css
@@ -0,0 +1,43 @@
+/* {{{ ***** generic styles ******/
+:host {
+  display: inline-block;
+  transition: width .3s, height .3s;
+}
+
+* {
+  transition: color .1s, background .3s;
+}
+
+.window-wrapper {
+  filter: drop-shadow( 0 2px 2px rgba(0, 0, 0, .3));
+  position: relative;
+  width: 100%;
+  min-width: 100px;
+  max-width: 100%;
+  overflow: hidden;
+  max-height: 100%;
+}
+
+.window-title-buttons {
+  position: relative;
+}
+
+.window-content-slot-wrapper {
+  overflow: hidden;
+}
+
+:host(:not([window-state="maximized"])) .window-wrapper .window-content-slot-wrapper,
+:host([window-state="maximized"]) .window-wrapper .window-content-slot-wrapper {
+  height: auto;
+}
+
+:host([window-state="minimized"]) .window-wrapper .window-content-slot-wrapper {
+  height: 0;
+  padding-bottom: 0;
+}
+
+.aria-label {
+  display:none;
+}
+/* }}} */
+
diff --git a/style/OsWindow/index.css b/style/OsWindow/index.css
new file mode 100644
index 0000000..c520c34
--- /dev/null
+++ b/style/OsWindow/index.css
@@ -0,0 +1,6 @@
+@import './OsWindow.css';
+@import './variables.css';
+
+@import './theme/default.css';
+@import './theme/mac.css';
+@import './theme/win-xp.css';
diff --git a/style/OsWindow/theme/default.css b/style/OsWindow/theme/default.css
new file mode 100644
index 0000000..82ab540
--- /dev/null
+++ b/style/OsWindow/theme/default.css
@@ -0,0 +1,116 @@
+/* {{{ ****** default theme styles ******/
+.window-wrapper {
+  border-radius: var(--mac-window-border-radius);
+}
+
+.window-title-bar {
+  height: var(--window-title-bar-height);
+  line-height: var(--mac-window-title-bar-height);
+  display: flex;
+}
+
+.window-title-buttons {
+  margin-left: 1rem;
+  white-space: nowrap;
+}
+
+.window-title-button {
+  border-width: 0;
+  border-radius: calc(var(--mac-window-title-button-diameter) / 2);
+  height: var(--mac-window-title-button-diameter);
+  width: var(--mac-window-title-button-diameter);
+  margin: 0 calc(var(--mac-window-title-button-diameter) / 5);
+  font-weight: 600;
+  fill: transparent;
+  padding: 0 0 0 0;
+  color: transparent;
+  transition: color .15s;
+}
+
+.window-title-button::after {
+  line-height: 1;
+  display: inline;
+  vertical-align: 10%;
+}
+
+:host([hover]) .window-title-button:hover,
+:host([hover]) .window-title-button:focus {
+  color: rgba(0, 0, 0, .3);
+}
+
+.window-title-button__close {
+  background: var(--mac-window-title-bar-button-close-color);
+}
+
+.window-title-button__close::after {
+  content: "⨉";
+}
+
+.window-title-button__minimize {
+  background: var(--mac-window-title-bar-button-minimize-color);
+}
+
+.window-title-button__minimize::after {
+  content: "–";
+}
+
+.window-title-button__maximize {
+  background: var(--mac-window-title-bar-button-maximize-color);
+}
+
+.window-title-button__maximize::after {
+  content: "+";
+}
+
+.window-title-text {
+  line-height: 2.95;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  font-family: var(--mac-window-font);
+  padding: 0 3rem;
+  width: 100%;
+  margin: 0 auto;
+
+}
+
+.window-content-slot-wrapper {
+  padding: 0 1rem .5rem 1rem;
+  font-family: var(--mac-window-font);
+  box-sizing: border-box;
+}
+
+:host([theme="dark"]) .window-content-slot-wrapper {
+  color: var(--mac-window-theme-dark-font-color);
+  background: var(--mac-window-theme-dark-background-color);
+}
+
+.window-content-slot-wrapper,
+:host([theme="light"]) .window-content-slot-wrapper {
+  color: var(--mac-window-theme-light-font-color);
+  background: var(--mac-window-theme-light-background-color);
+}
+
+:host([theme="dark"]) .window-title-text {
+  color: var(--mac-window-theme-dark-font-color);
+  background: var(--mac-window-theme-dark-background-color);
+}
+
+.window-title-text,
+:host([theme="light"]) .window-title-text {
+  color: var(--mac-window-theme-light-font-color);
+  background: var(--mac-window-theme-light-background-color);
+}
+
+.window-title-bar,
+:host([theme="light"]) .window-title-bar {
+  color: var(--mac-window-theme-light-font-color);
+  background: var(--mac-window-theme-light-background-color);
+}
+
+:host([theme="dark"]) .window-title-bar {
+  color: var(--mac-window-theme-dark-font-color);
+  background: var(--mac-window-theme-dark-background-color);
+}
+/* }}} */
diff --git a/style/OsWindow/theme/mac.css b/style/OsWindow/theme/mac.css
new file mode 100644
index 0000000..66703c3
--- /dev/null
+++ b/style/OsWindow/theme/mac.css
@@ -0,0 +1,116 @@
+/* {{{ ****** mac theme styles ******/
+:host([os-theme="mac"]) .window-wrapper {
+  border-radius: var(--mac-window-border-radius);
+}
+
+:host([os-theme="mac"]) .window-title-bar {
+  height: var(--window-title-bar-height);
+  line-height: var(--mac-window-title-bar-height);
+  display: flex;
+}
+
+:host([os-theme="mac"]) .window-title-buttons {
+  margin-left: 1rem;
+  white-space: nowrap;
+}
+
+:host([os-theme="mac"]) .window-title-button {
+  border-width: 0;
+  border-radius: calc(var(--mac-window-title-button-diameter) / 2);
+  height: var(--mac-window-title-button-diameter);
+  width: var(--mac-window-title-button-diameter);
+  margin: 0 calc(var(--mac-window-title-button-diameter) / 5);
+  font-weight: 600;
+  fill: transparent;
+  padding: 0 0 0 0;
+  color: transparent;
+  transition: color .15s;
+}
+
+:host([os-theme="mac"]) .window-title-button::after {
+  line-height: 1;
+  display: inline;
+  vertical-align: 10%;
+}
+
+:host([hover][os-theme="mac"]) .window-title-button:hover
+:host([hover][os-theme="mac"]) .window-title-button:focus {
+  color: rgba(0, 0, 0, .3);
+}
+
+:host([os-theme="mac"]) .window-title-button__close {
+  background: var(--mac-window-title-bar-button-close-color);
+}
+
+:host([os-theme="mac"]) .window-title-button__close::after {
+  content: "⨉";
+}
+
+:host([os-theme="mac"]) .window-title-button__minimize {
+  background: var(--mac-window-title-bar-button-minimize-color);
+}
+
+:host([os-theme="mac"]) .window-title-button__minimize::after {
+  content: "–";
+}
+
+:host([os-theme="mac"]) .window-title-button__maximize {
+  background: var(--mac-window-title-bar-button-maximize-color);
+}
+
+:host([os-theme="mac"]) .window-title-button__maximize::after {
+  content: "+";
+}
+
+:host([os-theme="mac"]) .window-title-text {
+  line-height: 2.95;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: center;
+  font-family: var(--mac-window-font);
+  padding: 0 3rem;
+  width: 100%;
+  margin: 0 auto;
+}
+
+:host([os-theme="mac"]) .window-content-slot-wrapper {
+  padding: 0 1rem .5rem 1rem;
+  font-family: var(--mac-window-font);
+  box-sizing: border-box;
+}
+
+:host([os-theme="mac"]) .window-content-slot-wrapper,
+:host([theme="light"][os-theme="mac"]) .window-content-slot-wrapper {
+  color: var(--mac-window-theme-light-font-color);
+  background: var(--mac-window-theme-light-background-color);
+}
+
+:host([theme="dark"][os-theme="mac"]) .window-content-slot-wrapper {
+  color: var(--mac-window-theme-dark-font-color);
+  background: var(--mac-window-theme-dark-background-color);
+}
+
+:host([os-theme="mac"]) .window-title-text,
+:host([theme="light"][os-theme="mac"]) .window-title-text {
+  color: var(--mac-window-theme-light-font-color);
+  background: var(--mac-window-theme-light-background-color);
+}
+
+:host([theme="dark"][os-theme="mac"]) .window-title-text {
+  color: var(--mac-window-theme-dark-font-color);
+  background: var(--mac-window-theme-dark-background-color);
+}
+
+:host([os-theme="mac"]) .window-title-bar,
+:host([theme="light"][os-theme="mac"]) .window-title-bar {
+  color: var(--mac-window-theme-light-font-color);
+  background: var(--mac-window-theme-light-background-color);
+}
+
+:host([theme="dark"][os-theme="mac"]) .window-title-bar {
+  color: var(--mac-window-theme-dark-font-color);
+  background: var(--mac-window-theme-dark-background-color);
+}
+/* }}} */
+
diff --git a/style/OsWindow/theme/win-xp.css b/style/OsWindow/theme/win-xp.css
new file mode 100644
index 0000000..2a23376
--- /dev/null
+++ b/style/OsWindow/theme/win-xp.css
@@ -0,0 +1,198 @@
+/* {{{ ***** win-xp theme styles ******/
+:host([os-theme="win-xp"]) .window-wrapper {
+  border-radius: var(--win-xp-window-border-radius);
+}
+
+:host([os-theme="win-xp"]) .window-title-bar {
+  height: 2.5rem;
+  line-height: var(--win-xp-window-title-bar-height);
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+:host([os-theme="win-xp"]) .window-title-buttons {
+  margin-right: 7px;
+  margin-top: 7px;
+  white-space: nowrap;
+  display: flex;
+}
+
+:host([os-theme="win-xp"]) .window-title-button {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: calc(var(--win-xp-window-title-button-diameter) / 8);
+  height: var(--win-xp-window-title-button-diameter);
+  width: var(--win-xp-window-title-button-diameter);
+  margin: 0 2px;
+  font-weight: 600;
+  fill: transparent;
+  padding: 0 0 0 0;
+  font-size: 1.45rem;
+}
+
+:host([os-theme="win-xp"]) .window-title-button__close {
+  order: 3;
+  background: var(--win-xp-window-title-bar-button-close-color);
+}
+
+:host([os-theme="win-xp"]) .window-title-button__close::after {
+  content: "⨉";
+}
+
+:host([os-theme="win-xp"]) .window-title-button__maximize {
+  order: 2;
+}
+
+:host([os-theme="win-xp"]) .window-title-button__maximize::after {
+  -webkit-clip-path: polygon(0% 0%, 0% 100%, 8% 99%, 8% 17%, 92% 17%, 92% 92%, 0 92%, 0 100%, 100% 100%, 100% 0%);
+  clip-path: polygon(0% 0%, 0% 100%, 8% 99%, 8% 17%, 92% 17%, 92% 92%, 0 92%, 0 100%, 100% 100%, 100% 0%);
+  content: "";
+  height: 18px;
+  width: 18px;
+  display: inline-block;
+  line-height: 0.55;
+}
+
+:host([os-theme="win-xp"]) .window-title-button__minimize {
+  order: 1;
+}
+
+:host([os-theme="win-xp"]) .window-title-button__minimize::after {
+  content: "_";
+  position: relative;
+  left: -3px;
+  top: -5px;
+}
+
+:host([os-theme="win-xp"]) .window-title-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: left;
+  font-family: var(--win-xp-window-font);
+  padding-left: 1rem;
+  width: 100%;
+  margin: 0 auto;
+  background: transparent;
+}
+
+:host([os-theme="win-xp"]) .window-content-slot-wrapper {
+  font-family: var(--win-xp-window-font);
+  box-sizing: border-box;
+  border-width: 0 5px 5px 5px;
+  border-style: solid;
+  border-top: 0;
+  padding-top: .5rem;
+  overflow: hidden;
+  color: black;
+  background: #ebe8d7;
+}
+
+:host([window-state="minimized"][os-theme="win-xp"]) .window-content-slot-wrapper {
+  padding-top: 0;
+}
+
+:host([os-theme="win-xp"]) .window-content-slot-wrapper,
+:host([theme="light"][os-theme="win-xp"]) .window-content-slot-wrapper {
+  border-color: var(--win-xp-window-theme-light-border-color);
+}
+
+:host([os-theme="win-xp"][theme="dark"]) .window-content-slot-wrapper {
+  border-color: var(--win-xp-window-theme-dark-border-color);
+}
+
+:host([os-theme="win-xp"]) .window-wrapper,
+:host([os-theme="win-xp"][theme="light"]) .window-wrapper {
+  color: var(--win-xp-window-theme-light-font-color);
+}
+
+:host([os-theme="win-xp"]) .window-title-text,
+:host([theme="light"][os-theme="win-xp"]) .window-title-text {
+  color: var(--win-xp-window-theme-light-font-color);
+  text-shadow: 1px 1px 2px var(--win-xp-window-theme-light-title-bar-text-shadow-color);
+}
+
+:host([theme="dark"][os-theme="win-xp"]) .window-title-text {
+  color: var(--win-xp-window-theme-dark-font-color);
+  text-shadow: 1px 1px 2px var(--win-xp-window-theme-dark-title-bar-text-shadow-color);
+}
+
+:host([os-theme="win-xp"]) .window-title-bar,
+:host([theme="light"][os-theme="win-xp"]) .window-title-bar {
+  color: var(--win-xp-window-theme-light-font-color);
+  background: var(--win-xp-window-theme-light-title-bar-background-color);
+}
+
+:host([theme="dark"][os-theme="win-xp"]) .window-title-bar {
+  color: var(--win-xp-window-theme-dark-font-color);
+  background: var(--win-xp-window-theme-dark-title-bar-background-color);
+}
+
+:host([os-theme="win-xp"]) .window-title-button,
+:host([theme="light"][os-theme="win-xp"]) .window-title-button {
+  background: var(--win-xp-window-theme-light-title-bar-button-background-color);
+  border-color: var(--win-xp-window-theme-light-title-bar-border-color);
+  color: var(--win-xp-window-theme-light-title-bar-button-font-color);
+}
+
+:host([theme="dark"][os-theme="win-xp"]) .window-title-button {
+  background: var(--win-xp-window-theme-dark-title-bar-button-background-color);
+  border-color: var(--win-xp-window-theme-dark-title-bar-border-color);
+  color: var(--win-xp-window-theme-dark-title-bar-button-font-color);
+  text-shadow: -1px 1px 1px #ffffff;
+}
+
+:host([hover][os-theme="win-xp"]) .window-title-button:hover,
+:host([hover][os-theme="win-xp"]) .window-title-button:focus,
+:host([hover][theme="light"][os-theme="win-xp"]) .window-title-button:hover,
+:host([hover][theme="light"][os-theme="win-xp"]) .window-title-button:focus {
+  background: var(--win-xp-window-theme-light-title-bar-button-hover-color);
+  color: var(--win-xp-window-theme-light-title-bar-button-font-color);
+}
+
+:host([hover][theme="dark"][os-theme="win-xp"]) .window-title-button:hover,
+:host([hover][theme="dark"][os-theme="win-xp"]) .window-title-button:focus {
+  background: var(--win-xp-window-theme-dark-title-bar-button-hover-color);
+  color: var(--win-xp-window-theme-dark-title-bar-button-font-color);
+}
+
+:host([os-theme="win-xp"]) .window-title-button__maximize::after,
+:host([theme="light"][os-theme="win-xp"]) .window-title-button__maximize::after {
+  background: var(--win-xp-window-theme-light-title-bar-button-font-color);
+}
+
+:host([theme="dark"][os-theme="win-xp"]) .window-title-button__maximize::after {
+  background: var(--win-xp-window-theme-dark-title-bar-button-font-color);
+}
+
+:host([os-theme="win-xp"]) .window-title-button__close,
+:host([theme="light"][os-theme="win-xp"]) .window-title-button__close {
+  background: var(--win-xp-window-theme-light-title-bar-button-close-background-color);
+  color: var(--win-xp-window-theme-light-title-bar-button-close-font-color);
+}
+
+:host([theme="dark"][os-theme="win-xp"]) .window-title-button__close {
+  background: var(--win-xp-window-theme-dark-title-bar-button-close-background-color);
+  color: var(--win-xp-window-theme-dark-title-bar-button-close-font-color);
+  text-shadow: -1px -1px 1px var(--win-xp-window-theme-dark-title-bar-button-close-text-shadow-color);
+}
+
+:host([theme="dark"][os-theme="win-xp"]) .window-title-button__close::after {
+  position: relative;
+  top: -1px;
+  color: var(--win-xp-window-theme-dark-title-bar-button-close-font-color);
+}
+
+:host([hover][os-theme="win-xp"]) .window-title-button__close:hover,
+:host([hover][os-theme="win-xp"]) .window-title-button__close:focus,
+:host([hover][theme="light"][os-theme="win-xp"]) .window-title-button__close:hover,
+:host([hover][theme="light"][os-theme="win-xp"]) .window-title-button__close:focus {
+  background: var(--win-xp-window-theme-light-title-bar-button-close-hover-color);
+}
+
+:host([hover][theme="dark"][os-theme="win-xp"]) .window-title-button__close:hover,
+:host([hover][theme="dark"][os-theme="win-xp"]) .window-title-button__close:focus {
+  background: var(--win-xp-window-theme-dark-title-bar-button-close-hover-color);
+}
+/* }}} */
+
diff --git a/style/OsWindow/variables.css b/style/OsWindow/variables.css
new file mode 100644
index 0000000..759c7b9
--- /dev/null
+++ b/style/OsWindow/variables.css
@@ -0,0 +1,41 @@
+.window-wrapper {
+  --mac-window-title-button-diameter: .8rem;
+  --mac-window-border-radius: 8px;
+  --mac-window-title-bar-height: 2.5rem;
+  --mac-window-title-bar-button-close-color: #ef534a;
+  --mac-window-title-bar-button-maximize-color: #97d272;
+  --mac-window-title-bar-button-minimize-color: #edc04a;
+  --mac-window-theme-dark-background-color: #343a46;
+  --mac-window-theme-dark-font-color: #ffffff;
+  --mac-window-theme-light-background-color: #eef1f5;
+  --mac-window-theme-light-font-color: #87827d;
+  --mac-window-font: sans-serif;
+
+  --win-xp-window-title-button-diameter: 1.7rem;
+  --win-xp-window-border-radius: 8px;
+  --win-xp-window-title-bar-height: 2.5rem;
+  --win-xp-window-theme-dark-border-color: rgba(239,238,241,1);
+  --win-xp-window-theme-dark-font-color: black;
+  --win-xp-window-theme-dark-title-bar-text-shadow-color: #999999;
+  --win-xp-window-theme-dark-title-bar-button-close-text-shadow-color: #724846;
+  --win-xp-window-theme-dark-title-bar-button-close-font-color: #ffffff;
+  --win-xp-window-theme-dark-title-bar-button-close-background-color: #ef534a;
+  --win-xp-window-theme-dark-title-bar-button-close-hover-color: #f66030;
+  --win-xp-window-theme-dark-title-bar-button-font-color: #4f4a59;
+  --win-xp-window-theme-dark-title-bar-button-background-color: #d4d2e0;
+  --win-xp-window-theme-dark-title-bar-border-color: #000000;
+  --win-xp-window-theme-dark-title-bar-button-hover-color: #e4e2f0;
+  --win-xp-window-theme-dark-title-bar-background-color: linear-gradient(180deg, rgba(134,133,139,1) 0%, rgba(239,238,241,1) 2%, rgba(166,165,186,1) 20%, rgba(252,253,255,1) 94%, rgba(132,132,141,1) 100%);
+  --win-xp-window-theme-light-border-color: rgba(48,118,222,1);
+  --win-xp-window-theme-light-font-color: #ffffff;
+  --win-xp-window-theme-light-title-bar-text-shadow-color: #333333;
+  --win-xp-window-theme-light-title-bar-button-close-font-color: #ffffff;
+  --win-xp-window-theme-light-title-bar-button-close-background-color: #ef534a;
+  --win-xp-window-theme-light-title-bar-button-close-hover-color: #f66030;
+  --win-xp-window-theme-light-title-bar-button-font-color: #ffffff;
+  --win-xp-window-theme-light-title-bar-button-background-color: #2c6af6;
+  --win-xp-window-theme-light-title-bar-border-color: #ffffff;
+  --win-xp-window-theme-light-title-bar-button-hover-color: #3c7af6;
+  --win-xp-window-theme-light-title-bar-background-color: linear-gradient(180deg, rgba(48,118,222,1) 0%, rgba(48,147,255,1) 2%, rgba(2,82,227,1) 20%, rgba(5,106,255,1) 94%, rgba(15,70,192,1) 100%);
+  --win-xp-window-font: sans-serif;
+}
diff --git a/yarn.lock b/yarn.lock
index 5f36e5d..8869689 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -100,10 +100,9 @@ acorn-jsx@^5.2.0:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
   integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
 
-acorn@^7.1.1:
+"acorn@github:mysticatea/acorn#next":
   version "7.1.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
-  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
+  resolved "https://codeload.github.com/mysticatea/acorn/tar.gz/f1d3e230de120715cdcf8a186327049aeb7af51e"
 
 agent-base@^4.3.0:
   version "4.3.0"
@@ -403,7 +402,7 @@ chalk@^1.0.0, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -599,18 +598,7 @@ cross-spawn@^5.0.1:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^6.0.5:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-cross-spawn@^7.0.0:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.2.tgz#d0d7dcfa74e89115c7619f4f721a94e1fdb716d6"
   integrity sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==
@@ -689,7 +677,7 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deep-is@~0.1.3:
+deep-is@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
@@ -896,18 +884,17 @@ eslint-plugin-import@^2.20.2:
     read-pkg-up "^2.0.0"
     resolve "^1.12.0"
 
-eslint-scope@^5.0.0:
+"eslint-scope@github:eslint/eslint-scope#export-star-ns":
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
-  integrity sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==
+  resolved "https://codeload.github.com/eslint/eslint-scope/tar.gz/4ba57809d25f9a63ed7b51cb049e459b34dd6771"
   dependencies:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-utils@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
-  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+eslint-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.0.0.tgz#7be1cc70f27a72a76cd14aa698bcabed6890e1cd"
+  integrity sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
@@ -916,22 +903,25 @@ eslint-visitor-keys@^1.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint@^6.8.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
-  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
+"eslint-visitor-keys@github:eslint/eslint-visitor-keys":
+  version "1.1.0"
+  resolved "https://codeload.github.com/eslint/eslint-visitor-keys/tar.gz/21f28bf11be5329d740a8bf6bdbcd0ef13bbf1a2"
+
+"eslint@https://github.com/eslint/eslint.git#es2020-new-syntax":
+  version "7.0.0-alpha.3"
+  resolved "https://github.com/eslint/eslint.git#bd58eabd557ee38d03cd4fb65c0db1644d0dc843"
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"
-    chalk "^2.1.0"
-    cross-spawn "^6.0.5"
+    chalk "^3.0.0"
+    cross-spawn "^7.0.1"
     debug "^4.0.1"
     doctrine "^3.0.0"
-    eslint-scope "^5.0.0"
-    eslint-utils "^1.4.3"
-    eslint-visitor-keys "^1.1.0"
-    espree "^6.1.2"
-    esquery "^1.0.1"
+    eslint-scope "github:eslint/eslint-scope#export-star-ns"
+    eslint-utils "^2.0.0"
+    eslint-visitor-keys "github:eslint/eslint-visitor-keys"
+    espree "github:eslint/espree#upgrade-acorn"
+    esquery "^1.2.0"
     esutils "^2.0.2"
     file-entry-cache "^5.0.1"
     functional-red-black-tree "^1.0.1"
@@ -944,41 +934,39 @@ eslint@^6.8.0:
     is-glob "^4.0.0"
     js-yaml "^3.13.1"
     json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.3.0"
+    levn "^0.4.1"
     lodash "^4.17.14"
     minimatch "^3.0.4"
-    mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    optionator "^0.8.3"
+    optionator "^0.9.1"
     progress "^2.0.0"
-    regexpp "^2.0.1"
-    semver "^6.1.2"
-    strip-ansi "^5.2.0"
+    regexpp "^3.0.0"
+    semver "^7.1.1"
+    strip-ansi "^6.0.0"
     strip-json-comments "^3.0.1"
     table "^5.2.3"
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-espree@^6.1.2:
+"espree@github:eslint/espree#upgrade-acorn":
   version "6.2.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
-  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
+  resolved "https://codeload.github.com/eslint/espree/tar.gz/0b37994cbe0ef7e01d4312eb69a6b01c830ad431"
   dependencies:
-    acorn "^7.1.1"
+    acorn "github:mysticatea/acorn#next"
     acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.1.0"
+    eslint-visitor-keys "github:eslint/eslint-visitor-keys"
 
 esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.2.0.tgz#a010a519c0288f2530b3404124bfb5f02e9797fe"
-  integrity sha512-weltsSqdeWIX9G2qQZz7KlTRJdkkOCTPgLYJUz1Hacf48R4YOwGPHO3+ORfWedqJKbq5WQmsgK90n+pFLIKt/Q==
+esquery@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
+  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
   dependencies:
-    estraverse "^5.0.0"
+    estraverse "^5.1.0"
 
 esrecurse@^4.1.0:
   version "4.2.1"
@@ -992,10 +980,10 @@ estraverse@^4.1.0, estraverse@^4.1.1:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
-estraverse@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.0.0.tgz#ac81750b482c11cca26e4b07e83ed8f75fbcdc22"
-  integrity sha512-j3acdrMzqrxmJTNj5dbr1YbjacrYgAxVMeF0gK16E3j494mOe7xygM/ZLIguEQ0ETwAg2hlJCtHRGav+y0Ny5A==
+estraverse@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.1.0.tgz#374309d39fd935ae500e7b92e8a6b4c720e59642"
+  integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
 
 esutils@^2.0.2:
   version "2.0.3"
@@ -1066,7 +1054,7 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
-fast-levenshtein@~2.0.6:
+fast-levenshtein@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
@@ -1807,13 +1795,13 @@ latest-version@^5.0.0:
   dependencies:
     package-json "^6.3.0"
 
-levn@^0.3.0, levn@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
   dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
 
 lines-and-columns@^1.1.6:
   version "1.1.6"
@@ -2155,11 +2143,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
 node-environment-flags@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/node-environment-flags/-/node-environment-flags-1.0.6.tgz#a30ac13621f6f7d674260a54dede048c3982c088"
@@ -2353,17 +2336,17 @@ opencollective-postinstall@^2.0.2:
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
   integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
 
-optionator@^0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
-  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
   dependencies:
-    deep-is "~0.1.3"
-    fast-levenshtein "~2.0.6"
-    levn "~0.3.0"
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-    word-wrap "~1.2.3"
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
 
 os-tmpdir@~1.0.2:
   version "1.0.2"
@@ -2534,7 +2517,7 @@ path-is-inside@^1.0.1, path-is-inside@^1.0.2:
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
   integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
 
-path-key@^2.0.0, path-key@^2.0.1:
+path-key@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
@@ -2659,10 +2642,10 @@ pngjs@^5.0.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
   integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
 
-prelude-ls@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
-  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
 prepend-http@^2.0.0:
   version "2.0.0"
@@ -2795,10 +2778,10 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
   integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
 
-regexpp@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
-  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
+regexpp@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
 
 registry-auth-token@^4.0.0:
   version "4.1.1"
@@ -2926,7 +2909,7 @@ semver-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338"
   integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.5.0, semver@^5.7.0:
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.7.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -2936,6 +2919,11 @@ semver@^6.1.2, semver@^6.2.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.1.1:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -3306,12 +3294,12 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
-type-check@~0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
-  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
   dependencies:
-    prelude-ls "~1.1.2"
+    prelude-ls "^1.2.1"
 
 type-detect@^4.0.0, type-detect@^4.0.5:
   version "4.0.8"
@@ -3453,7 +3441,7 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
-word-wrap@~1.2.3:
+word-wrap@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==