From 1a65895bfd441ea57163ee3e185785c82a81b736 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Nov 2018 21:48:16 +0300
Subject: initial font support

---
 src/components/font_control/font_control.vue | 93 ++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/components/font_control/font_control.vue

(limited to 'src/components/font_control/font_control.vue')

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
new file mode 100644
index 00000000..424f6259
--- /dev/null
+++ b/src/components/font_control/font_control.vue
@@ -0,0 +1,93 @@
+<template>
+<div class="font-control style-control">
+  <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label">
+    {{label}}
+  </label>
+  <input
+    v-if="typeof fallback !== 'undefined'"
+    class="opt exlcude-disabled"
+    type="checkbox"
+    :id="name + '-o'"
+    :checked="present"
+    @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <label :for="name + '-font-switcher'" class="select" :disabled="!present">
+    <select
+      :disabled="!present"
+      v-model="preset"
+      class="font-switcher"
+      id="name + '-font-switcher'">
+      <option v-for="option in options" :value="option">
+        {{ option }}
+      </option>
+    </select>
+    <i class="icon-down-open"/>
+  </label>
+  <input
+    v-if="preset === 'custom'"
+    class="custom-font"
+    type="text"
+    id="name"
+    v-model="family">
+</div>
+</template>
+
+<script>
+import { set } from 'vue'
+
+export default {
+  props: [
+    'name', 'label', 'value', 'fallback', 'options'
+  ],
+  data () {
+    return {
+      lValue: this.value
+    }
+  },
+  beforeUpdate () {
+    this.lValue = this.value
+  },
+  computed: {
+    present () {
+      return typeof this.lValue !== 'undefined'
+    },
+    dValue () {
+      return this.lValue || this.fallback || {}
+    },
+    family: {
+      get () {
+        return this.dValue.family
+      },
+      set (v) {
+        set(this.lValue, 'family', v)
+        this.$emit('input', this.lValue)
+      }
+    },
+    preset: {
+      get () {
+        console.log(this.family)
+        if (this.family === 'serif' ||
+            this.family === 'sans-serif' ||
+            this.family === 'monospace' ||
+            this.family === 'inherit') {
+          return this.family
+        } else {
+          return 'custom'
+        }
+      },
+      set (v) {
+        this.family = v === 'custom' ? '' : v
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.font-control {
+  input.custom-font {
+    min-width: 10em;
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From 1087741b0df00d42576c55f5869d331469bcbb6e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Nov 2018 22:39:06 +0300
Subject: font control args to allow passing an option list of fonts, for
 future use

---
 src/components/font_control/font_control.vue     | 14 +++++++++++---
 src/components/style_switcher/style_switcher.vue | 12 +++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

(limited to 'src/components/font_control/font_control.vue')

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 424f6259..004b5546 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -17,7 +17,7 @@
       v-model="preset"
       class="font-switcher"
       id="name + '-font-switcher'">
-      <option v-for="option in options" :value="option">
+      <option v-for="option in availableOptions" :value="option">
         {{ option }}
       </option>
     </select>
@@ -37,11 +37,19 @@ import { set } from 'vue'
 
 export default {
   props: [
-    'name', 'label', 'value', 'fallback', 'options'
+    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
   ],
   data () {
     return {
-      lValue: this.value
+      lValue: this.value,
+      availableOptions: [
+        this.noInherit ? '' : 'inherit',
+        'custom',
+        ...(this.options || []),
+        'serif',
+        'monospace',
+        'sans-serif'
+      ].filter(_ => _)
     }
   },
   beforeUpdate () {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index f64bda3f..a444c6a7 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -215,31 +215,29 @@
       <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
         <div class="tab-header">
           <p>{{$t('settings.style.fonts.help')}}</p>
+          <button class="btn" @click="clearFonts">{{$t('settings.style.switcher.clear_all')}}</button>
         </div>
         <FontControl
           name="ui"
           v-model="fontsLocal.interface"
           :label="$t('settings.style.fonts.components.interface')"
           :fallback="previewTheme.fonts.interface"
-          :options="['serif', 'sans-serif', 'monospace', 'custom']" />
+          no-inherit="1"/>
         <FontControl
           name="input"
           v-model="fontsLocal.input"
           :label="$t('settings.style.fonts.components.input')"
-          :fallback="previewTheme.fonts.input"
-          :options="['serif', 'sans-serif', 'monospace', 'inherit', 'custom']" />
+          :fallback="previewTheme.fonts.input"/>
         <FontControl
           name="post"
           v-model="fontsLocal.post"
           :label="$t('settings.style.fonts.components.post')"
-          :fallback="previewTheme.fonts.post"
-          :options="['serif', 'sans-serif', 'monospace', 'inherit', 'custom']" />
+          :fallback="previewTheme.fonts.post"/>
         <FontControl
           name="postCode"
           v-model="fontsLocal.postCode"
           :label="$t('settings.style.fonts.components.postCode')"
-          :fallback="previewTheme.fonts.postCode"
-          :options="['serif', 'sans-serif', 'monospace', 'inherit', 'custom']" />
+          :fallback="previewTheme.fonts.postCode"/>
       </div>
     </tab-switcher>
   </keep-alive>
-- 
cgit v1.2.3-70-g09d2


From 94b481fa9c2bd5a9e135b589dcb78aa5fe802c87 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 26 Nov 2018 00:19:28 +0300
Subject: cosmetic fixes

---
 src/App.scss                                 |  9 ++++++---
 src/components/font_control/font_control.vue | 23 ++++++++++++++++++-----
 src/i18n/en.json                             |  3 ++-
 3 files changed, 26 insertions(+), 9 deletions(-)

(limited to 'src/components/font_control/font_control.vue')

diff --git a/src/App.scss b/src/App.scss
index 45491fd2..50645ec8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -115,7 +115,7 @@ input, textarea, .select {
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
   font-size: 14px;
-  padding: 8px 7px;
+  padding: 8px .5em;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
@@ -147,10 +147,13 @@ input, textarea, .select {
     appearance: none;
     background: transparent;
     border: none;
-    margin: 0;
     color: $fallback--text;
     color: var(--text, $fallback--text);
-    padding: 4px 2em 3px 3px;
+    margin: 0;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
     width: 100%;
     z-index: 1;
     height: 29px;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 004b5546..e97a2640 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="font-control style-control">
+<div class="font-control style-control" :class="{ custom: isCustom }">
   <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label">
     {{label}}
   </label>
@@ -16,18 +16,18 @@
       :disabled="!present"
       v-model="preset"
       class="font-switcher"
-      id="name + '-font-switcher'">
+      :id="name + '-font-switcher'">
       <option v-for="option in availableOptions" :value="option">
-        {{ option }}
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
       </option>
     </select>
     <i class="icon-down-open"/>
   </label>
   <input
-    v-if="preset === 'custom'"
+    v-if="isCustom"
     class="custom-font"
     type="text"
-    id="name"
+    :id="name"
     v-model="family">
 </div>
 </template>
@@ -71,6 +71,9 @@ export default {
         this.$emit('input', this.lValue)
       }
     },
+    isCustom () {
+      return this.preset === 'custom'
+    },
     preset: {
       get () {
         console.log(this.family)
@@ -97,5 +100,15 @@ export default {
   input.custom-font {
     min-width: 10em;
   }
+  &.custom {
+    .select {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .custom-font {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
 }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6f439f65..c70c488c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -248,7 +248,8 @@
         },
         "family": "Font name",
         "size": "Size (in px)",
-        "weight": "Weight (boldness)"
+        "weight": "Weight (boldness)",
+        "custom": "Custom"
       }
     }
   },
-- 
cgit v1.2.3-70-g09d2


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: theme separation

---
 src/components/font_control/font_control.vue    |   1 -
 src/components/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

(limited to 'src/components/font_control/font_control.vue')

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"
+    }
+  }
+}
-- 
cgit v1.2.3-70-g09d2


From aeecd2b09b7c31644a2c601fc1b8d123e2b263b0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 11 Dec 2018 00:56:15 +0300
Subject: separate font control js

---
 src/components/font_control/font_control.js  | 58 ++++++++++++++++++++++++++
 src/components/font_control/font_control.vue | 61 +---------------------------
 2 files changed, 59 insertions(+), 60 deletions(-)
 create mode 100644 src/components/font_control/font_control.js

(limited to 'src/components/font_control/font_control.vue')

diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
new file mode 100644
index 00000000..8e2b0e45
--- /dev/null
+++ b/src/components/font_control/font_control.js
@@ -0,0 +1,58 @@
+import { set } from 'vue'
+
+export default {
+  props: [
+    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
+  ],
+  data () {
+    return {
+      lValue: this.value,
+      availableOptions: [
+        this.noInherit ? '' : 'inherit',
+        'custom',
+        ...(this.options || []),
+        'serif',
+        'monospace',
+        'sans-serif'
+      ].filter(_ => _)
+    }
+  },
+  beforeUpdate () {
+    this.lValue = this.value
+  },
+  computed: {
+    present () {
+      return typeof this.lValue !== 'undefined'
+    },
+    dValue () {
+      return this.lValue || this.fallback || {}
+    },
+    family: {
+      get () {
+        return this.dValue.family
+      },
+      set (v) {
+        set(this.lValue, 'family', v)
+        this.$emit('input', this.lValue)
+      }
+    },
+    isCustom () {
+      return this.preset === 'custom'
+    },
+    preset: {
+      get () {
+        if (this.family === 'serif' ||
+            this.family === 'sans-serif' ||
+            this.family === 'monospace' ||
+            this.family === 'inherit') {
+          return this.family
+        } else {
+          return 'custom'
+        }
+      },
+      set (v) {
+        this.family = v === 'custom' ? '' : v
+      }
+    }
+  }
+}
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 85f19eea..ed36b280 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -32,66 +32,7 @@
 </div>
 </template>
 
-<script>
-import { set } from 'vue'
-
-export default {
-  props: [
-    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
-  ],
-  data () {
-    return {
-      lValue: this.value,
-      availableOptions: [
-        this.noInherit ? '' : 'inherit',
-        'custom',
-        ...(this.options || []),
-        'serif',
-        'monospace',
-        'sans-serif'
-      ].filter(_ => _)
-    }
-  },
-  beforeUpdate () {
-    this.lValue = this.value
-  },
-  computed: {
-    present () {
-      return typeof this.lValue !== 'undefined'
-    },
-    dValue () {
-      return this.lValue || this.fallback || {}
-    },
-    family: {
-      get () {
-        return this.dValue.family
-      },
-      set (v) {
-        set(this.lValue, 'family', v)
-        this.$emit('input', this.lValue)
-      }
-    },
-    isCustom () {
-      return this.preset === 'custom'
-    },
-    preset: {
-      get () {
-        if (this.family === 'serif' ||
-            this.family === 'sans-serif' ||
-            this.family === 'monospace' ||
-            this.family === 'inherit') {
-          return this.family
-        } else {
-          return 'custom'
-        }
-      },
-      set (v) {
-        this.family = v === 'custom' ? '' : v
-      }
-    }
-  }
-}
-</script>
+<script src="./font_control.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
-- 
cgit v1.2.3-70-g09d2