From 572c874f5cd1e997de70c7771075ca1444f95549 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 26 Nov 2018 02:29:08 +0300
Subject: [PATCH] theme separation

---
 src/components/font_control/font_control.vue  |   1 -
 .../style_switcher/style_switcher.js          |  29 +-
 static/styles.json                            | 848 +-----------------
 static/themes/redmond-xx-se.json              | 285 ++++++
 static/themes/redmond-xx.json                 | 274 ++++++
 static/themes/redmond-xxi.json                | 285 ++++++
 6 files changed, 873 insertions(+), 849 deletions(-)
 create mode 100644 static/themes/redmond-xx-se.json
 create mode 100644 static/themes/redmond-xx.json
 create mode 100644 static/themes/redmond-xxi.json

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index e97a2640..85f19eea 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -76,7 +76,6 @@ export default {
     },
     preset: {
       get () {
-        console.log(this.family)
         if (this.family === 'serif' ||
             this.family === 'sans-serif' ||
             this.family === 'monospace' ||
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index bbd28bdc..d833341f 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -106,7 +106,31 @@ export default {
     window.fetch('/static/styles.json')
       .then((data) => data.json())
       .then((themes) => {
-        self.availableStyles = themes
+        return Promise.all(Object.entries(themes).map(([k, v]) => {
+          if (typeof v === 'object') {
+            return Promise.resolve([k, v])
+          } else if (typeof v === 'string') {
+            return window.fetch(v)
+              .then((data) => data.json())
+              .then((theme) => {
+                return [k, theme]
+              })
+              .catch((e) => {
+                console.error(e)
+                return []
+              })
+          }
+        }))
+      })
+      .then((promises) => {
+        return promises
+          .filter(([k, v]) => v)
+          .reduce((acc, [k, v]) => {
+            acc[k] = v
+            return acc
+          }, {})
+      }).then((themesComplete) => {
+        self.availableStyles = themesComplete
       })
   },
   mounted () {
@@ -184,7 +208,6 @@ export default {
     },
     previewTheme () {
       if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
-      console.log(this.preview.theme)
       return this.preview.theme
     },
     // This needs optimization maybe
@@ -515,8 +538,6 @@ export default {
       handler () {
         try {
           this.previewFonts = generateFonts({ fonts: this.fontsLocal })
-          console.log('BENIS')
-          console.log(this.previewFonts)
           this.fontsInvalid = false
         } catch (e) {
           this.fontsInvalid = true
diff --git a/static/styles.json b/static/styles.json
index a53eeaa1..9204c717 100644
--- a/static/styles.json
+++ b/static/styles.json
@@ -6,848 +6,8 @@
   "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
   "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],
   "mammal": [ "Mammal", "#272c37", "#444b5d", "#f8f8f8", "#9bacc8", "#7f3142", "#2bd850", "#2b90d9", "#ca8f04" ],
-  "redmond-xx": {
-    "_pleroma_theme_version": 2,
-    "name": "Redmond XX",
-    "theme": {
-      "shadows": {
-        "panel": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "button": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "buttonHover": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "buttonPressed": [
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "input": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--input",
-            "alpha": "1",
-            "inset": true
-          }
-        ]
-      },
-      "opacity": {
-        "input": "1"
-      },
-      "colors": {
-        "bg": "#c0c0c0",
-        "text": "#000000",
-        "link": "#0000ff",
-        "fg": "#c0c0c0",
-        "panel": "#000080",
-        "input": "#ffffff",
-        "topBar": "#000080",
-        "topBarLink": "#ffffff",
-        "btn": "#c0c0c0",
-        "faint": "#3f3f3f",
-        "faintLink": "#404080",
-        "border": "#808080",
-        "cRed": "#FF0000",
-        "cBlue": "#008080",
-        "cGreen": "#00FF00",
-        "cOrange": "#808000"
-      },
-      "radii": {
-        "btn": "0",
-        "input": "0",
-        "checkbox": "0",
-        "panel": "0",
-        "avatar": "0",
-        "avatarAlt": "0",
-        "tooltip": "0",
-        "attachment": "0"
-      }
-    }
-  },
-  "redmond-xx-se": {
-    "_pleroma_theme_version": 2,
-    "name": "Redmond XX SE",
-    "theme": {
-      "shadows": {
-        "panel": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "button": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "buttonHover": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "buttonPressed": [
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "input": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--input",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "panelHeader": [
-          {
-            "x": "-2200",
-            "y": 0,
-            "blur": "200",
-            "spread": "-2000",
-            "inset": true,
-            "color": "#1084d0",
-            "alpha": 1
-          }
-        ]
-      },
-      "opacity": {
-        "input": "1"
-      },
-      "colors": {
-        "bg": "#c0c0c0",
-        "text": "#000000",
-        "link": "#0000ff",
-        "fg": "#c0c0c0",
-        "panel": "#000080",
-        "input": "#ffffff",
-        "topBar": "#000080",
-        "topBarLink": "#ffffff",
-        "btn": "#c0c0c0",
-        "faint": "#3f3f3f",
-        "faintLink": "#404080",
-        "border": "#808080",
-        "cRed": "#FF0000",
-        "cBlue": "#008080",
-        "cGreen": "#00FF00",
-        "cOrange": "#808000"
-      },
-      "radii": {
-        "btn": "0",
-        "input": "0",
-        "checkbox": "0",
-        "panel": "0",
-        "avatar": "0",
-        "avatarAlt": "0",
-        "tooltip": "0",
-        "attachment": "0"
-      }
-    }
-  },
-  "redmond-xxi": {
-    "_pleroma_theme_version": 2,
-    "name": "Redmond XXI",
-    "theme": {
-      "shadows": {
-        "panel": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "button": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "buttonHover": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "buttonPressed": [
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--bg",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "input": [
-          {
-            "x": "-1",
-            "y": "-1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#FFFFFF",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "1",
-            "y": "1",
-            "blur": "0",
-            "spread": 0,
-            "color": "#848484",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "-2",
-            "y": "-2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#dfdfdf",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "2",
-            "y": "2",
-            "blur": "0",
-            "spread": 0,
-            "color": "#000000",
-            "alpha": "1",
-            "inset": true
-          },
-          {
-            "x": "0",
-            "y": "0",
-            "blur": "0",
-            "spread": "3",
-            "color": "--input",
-            "alpha": "1",
-            "inset": true
-          }
-        ],
-        "panelHeader": [
-          {
-            "x": "-2200",
-            "y": 0,
-            "blur": "200",
-            "spread": "-2000",
-            "inset": true,
-            "color": "#a5cef7",
-            "alpha": 1
-          }
-        ]
-      },
-      "opacity": {
-        "input": "1"
-      },
-      "colors": {
-        "bg": "#d6d6ce",
-        "text": "#000000",
-        "link": "#0000ff",
-        "fg": "#d6d6ce",
-        "panel": "#042967",
-        "input": "#ffffff",
-        "topBar": "#042967",
-        "topBarLink": "#ffffff",
-        "btn": "#d6d6ce",
-        "faint": "#3f3f3f",
-        "faintLink": "#404080",
-        "border": "#808080",
-        "cRed": "#FF0000",
-        "cBlue": "#008080",
-        "cGreen": "#00FF00",
-        "cOrange": "#808000"
-      },
-      "radii": {
-        "btn": "0",
-        "input": "0",
-        "checkbox": "0",
-        "panel": "0",
-        "avatar": "0",
-        "avatarAlt": "0",
-        "tooltip": "0",
-        "attachment": "0"
-      }
-    }
-  }
+
+  "redmond-xx": "./static/themes/redmond-xx.json",
+  "redmond-xx-se": "./static/themes/redmond-xx-se.json",
+  "redmond-xxi": "./static/themes/redmond-xxi.json"
 }
diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json
new file mode 100644
index 00000000..e4cdbdee
--- /dev/null
+++ b/static/themes/redmond-xx-se.json
@@ -0,0 +1,285 @@
+{
+  "_pleroma_theme_version": 2,
+  "name": "Redmond XX SE",
+  "theme": {
+    "shadows": {
+      "panel": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "button": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "buttonHover": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "buttonPressed": [
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "input": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--input",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "panelHeader": [
+        {
+          "x": "-2200",
+          "y": 0,
+          "blur": "200",
+          "spread": "-2000",
+          "inset": true,
+          "color": "#1084d0",
+          "alpha": 1
+        }
+      ]
+    },
+    "opacity": {
+      "input": "1"
+    },
+    "colors": {
+      "bg": "#c0c0c0",
+      "text": "#000000",
+      "link": "#0000ff",
+      "fg": "#c0c0c0",
+      "panel": "#000080",
+      "input": "#ffffff",
+      "topBar": "#000080",
+      "topBarLink": "#ffffff",
+      "btn": "#c0c0c0",
+      "faint": "#3f3f3f",
+      "faintLink": "#404080",
+      "border": "#808080",
+      "cRed": "#FF0000",
+      "cBlue": "#008080",
+      "cGreen": "#00FF00",
+      "cOrange": "#808000"
+    },
+    "radii": {
+      "btn": "0",
+      "input": "0",
+      "checkbox": "0",
+      "panel": "0",
+      "avatar": "0",
+      "avatarAlt": "0",
+      "tooltip": "0",
+      "attachment": "0"
+    }
+  }
+}
diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json
new file mode 100644
index 00000000..96dff499
--- /dev/null
+++ b/static/themes/redmond-xx.json
@@ -0,0 +1,274 @@
+{
+  "_pleroma_theme_version": 2,
+  "name": "Redmond XX",
+  "theme": {
+    "shadows": {
+      "panel": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "button": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "buttonHover": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "buttonPressed": [
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "input": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--input",
+          "alpha": "1",
+          "inset": true
+        }
+      ]
+    },
+    "opacity": {
+      "input": "1"
+    },
+    "colors": {
+      "bg": "#c0c0c0",
+      "text": "#000000",
+      "link": "#0000ff",
+      "fg": "#c0c0c0",
+      "panel": "#000080",
+      "input": "#ffffff",
+      "topBar": "#000080",
+      "topBarLink": "#ffffff",
+      "btn": "#c0c0c0",
+      "faint": "#3f3f3f",
+      "faintLink": "#404080",
+      "border": "#808080",
+      "cRed": "#FF0000",
+      "cBlue": "#008080",
+      "cGreen": "#00FF00",
+      "cOrange": "#808000"
+    },
+    "radii": {
+      "btn": "0",
+      "input": "0",
+      "checkbox": "0",
+      "panel": "0",
+      "avatar": "0",
+      "avatarAlt": "0",
+      "tooltip": "0",
+      "attachment": "0"
+    }
+  }
+}
diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json
new file mode 100644
index 00000000..1469cc6b
--- /dev/null
+++ b/static/themes/redmond-xxi.json
@@ -0,0 +1,285 @@
+{
+  "_pleroma_theme_version": 2,
+  "name": "Redmond XXI",
+  "theme": {
+    "shadows": {
+      "panel": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "button": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "buttonHover": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "buttonPressed": [
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--bg",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "input": [
+        {
+          "x": "-1",
+          "y": "-1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "color": "#848484",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "-2",
+          "y": "-2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#dfdfdf",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "2",
+          "y": "2",
+          "blur": "0",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "0",
+          "spread": "3",
+          "color": "--input",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "panelHeader": [
+        {
+          "x": "-2200",
+          "y": 0,
+          "blur": "200",
+          "spread": "-2000",
+          "inset": true,
+          "color": "#a5cef7",
+          "alpha": 1
+        }
+      ]
+    },
+    "opacity": {
+      "input": "1"
+    },
+    "colors": {
+      "bg": "#d6d6ce",
+      "text": "#000000",
+      "link": "#0000ff",
+      "fg": "#d6d6ce",
+      "panel": "#042967",
+      "input": "#ffffff",
+      "topBar": "#042967",
+      "topBarLink": "#ffffff",
+      "btn": "#d6d6ce",
+      "faint": "#3f3f3f",
+      "faintLink": "#404080",
+      "border": "#808080",
+      "cRed": "#FF0000",
+      "cBlue": "#008080",
+      "cGreen": "#00FF00",
+      "cOrange": "#808000"
+    },
+    "radii": {
+      "btn": "0",
+      "input": "0",
+      "checkbox": "0",
+      "panel": "0",
+      "avatar": "0",
+      "avatarAlt": "0",
+      "tooltip": "0",
+      "attachment": "0"
+    }
+  }
+}