@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/widgets/StyleSetting.vue

@@ -1,169 +1,308 @@
 <template>
 	<div :class="$style.comp">
 
-    <div v-for="(_, index) in viewTypes"
-         v-show="_.value === viewType">
-      <div class="flex flex-col gap-8">
+    <div class="flex flex-col divide-y divide-border-50">
 
-        <div>
+      <div class="flex flex-col gap-4 p-6">
+
+        <strong @dblclick="log(item)">Style</strong>
 
-          <div class="flex flex-row gap-4 items-center cursor-pointer">
-            <strong class="flex-1 text-text-400">All</strong>
+        <div>
+          <div class="flex flex-row">
+            <div class="flex-1">
+              <small class="text-text-400">Font Family</small>
+            </div>
+            <div class="flex flex-row gap-1 self-center">
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['fontFamily'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontFamily'] = 0">base</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['fontFamily'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontFamily'] = 1">md</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['fontFamily'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontFamily'] = 2">lg</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['fontFamily'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontFamily'] = 3">xl</button>
+            </div>
           </div>
+          <Dropdown v-model="media['*']['font-family'][selectorIndex('fontFamily')]" class="mt-1">
+            <option value="">Default</option>
+            <option v-for="opt in components.fontFamily"
+                    :value="`${opt[1]}`">
+              {{ opt[0] }}
+            </option>
+          </Dropdown>
+        </div>
 
-          <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
-
-          <div class="flex flex-col gap-4">
-
-            <div>
-              <label :class="$style.label">Font Family</label>
-              <Dropdown v-model="mediaOf(_.value, '*')['font-family']" class="mt-1">
-                <option value="">Default</option>
-                <option v-for="opt in components.fontFamily"
-                        :value="`${opt[1]}`">
-                  {{ opt[0] }}
-                </option>
-              </Dropdown>
-            </div>
-
-            <div>
-              <label :class="$style.label">Font Size</label>
-              <Dropdown v-model="mediaOf(_.value, 'html, .html')['font-size']" class="mt-1">
-                <option value="">Default</option>
-                <option v-for="opt in components.fontSize"
-                        :value="`${opt[1]}`">
-                  {{ opt[0] }}
-                </option>
-              </Dropdown>
-            </div>
-
-            <div>
-              <label :class="$style.label">Primary Color</label>
-              <div class="mt-1 grid grid-cols-8 gap-4">
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-100']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-200']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-300']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-400']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-500']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-600']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-700']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--primary-800']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-              </div>
-            </div>
-
-            <div>
-              <label :class="$style.label">Secondary Color</label>
-              <div class="mt-1 grid grid-cols-8 gap-4">
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-100']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-200']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-300']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-400']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-500']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-600']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-700']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--secondary-800']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-              </div>
-            </div>
-
-            <div>
-              <label :class="$style.label">Text Color</label>
-              <div class="mt-1 grid grid-cols-8 gap-4">
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-100']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-200']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-300']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-400']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-500']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-600']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-700']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-                <ColorPicker v-model="mediaOf(_.value, 'html, .html')['--text-800']"
-                             mode="hex" :custom-color="true" value-type="rgb" />
-              </div>
+        <div>
+          <div class="flex flex-row">
+            <div class="flex-1">
+              <small class="text-text-400">Font Size</small>
             </div>
+            <div class="flex flex-row gap-1 self-center">
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['fontSize'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontSize'] = 0">base</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['fontSize'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontSize'] = 1">md</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['fontSize'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontSize'] = 2">lg</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['fontSize'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontSize'] = 3">xl</button>
+            </div>
+          </div>
+          <Dropdown v-model="media['html, .html']['font-size'][selectorIndex('fontSize')]" class="mt-1">
+            <option value="">Default</option>
+            <option v-for="opt in components.fontSize"
+                    :value="`${opt[1]}`">
+              {{ opt[0] }}
+            </option>
+          </Dropdown>
+        </div>
 
+        <div>
+          <div class="flex flex-row">
+            <div class="flex-1">
+              <small class="text-text-400">Primary Color</small>
+            </div>
+            <div class="flex flex-row gap-1 self-center">
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['primary'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['primary'] = 0">base</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['primary'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['primary'] = 1">md</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['primary'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['primary'] = 2">lg</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['primary'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['primary'] = 3">xl</button>
+            </div>
           </div>
+          <div class="grid grid-cols-8 gap-2 mt-2">
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--primary-800'][selectorIndex('primary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">+300</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--primary-700'][selectorIndex('primary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">+200</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--primary-600'][selectorIndex('primary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">+100</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--primary-500'][selectorIndex('primary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">normal</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--primary-400'][selectorIndex('primary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">-100</small>
+            </div>
 
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--primary-300'][selectorIndex('primary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">-200</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--primary-200'][selectorIndex('primary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">-300</small>
+            </div>
 
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--primary-100'][selectorIndex('primary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">-400</small>
+            </div>
+          </div>
         </div>
 
         <div>
+          <div class="flex flex-row">
+            <div class="flex-1">
+              <small class="text-text-400">Secondary Color</small>
+            </div>
+            <div class="flex flex-row gap-1 self-center">
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['secondary'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['secondary'] = 0">base</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['secondary'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['secondary'] = 1">md</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['secondary'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['secondary'] = 2">lg</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['secondary'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['secondary'] = 3">xl</button>
+            </div>
+          </div>
+          <div class="grid grid-cols-8 gap-2 mt-2">
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--secondary-800'][selectorIndex('secondary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">800</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--secondary-700'][selectorIndex('secondary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">700</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--secondary-600'][selectorIndex('secondary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">600</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--secondary-500'][selectorIndex('secondary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">500</small>
+            </div>
 
-          <div class="flex flex-row gap-4 items-center cursor-pointer">
-            <strong class="flex-1 text-text-400">Headings</strong>
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--secondary-400'][selectorIndex('secondary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">400</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--secondary-300'][selectorIndex('secondary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">300</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--secondary-200'][selectorIndex('secondary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">200</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--secondary-100'][selectorIndex('secondary')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">100</small>
+            </div>
           </div>
+        </div>
 
-          <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+        <div>
+          <div class="flex flex-row">
+            <div class="flex-1">
+              <small class="text-text-400">Text Color</small>
+            </div>
+            <div class="flex flex-row gap-1 self-center">
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['text'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['text'] = 0">base</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['text'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['text'] = 1">md</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['text'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['text'] = 2">lg</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['text'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['text'] = 3">xl</button>
+            </div>
+          </div>
+          <div class="grid grid-cols-8 gap-2 mt-2">
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--text-800'][selectorIndex('text')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">800</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--text-700'][selectorIndex('text')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">700</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--text-600'][selectorIndex('text')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">600</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--text-500'][selectorIndex('text')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">500</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--text-400'][selectorIndex('text')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">400</small>
+            </div>
 
-          <div class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--text-300'][selectorIndex('text')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">300</small>
+            </div>
 
-            <div>
-              <label :class="$style.label">Font Family</label>
-              <Dropdown v-model="mediaOf(_.value, 'h1, h2, h3, h4, h5')['font-family']" class="mt-1">
-                <option value="">Default</option>
-                <option v-for="opt in components.fontFamily"
-                        :value="`${opt[1]}`">
-                  {{ opt[0] }}
-                </option>
-              </Dropdown>
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--text-200'][selectorIndex('text')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">200</small>
             </div>
 
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--text-100'][selectorIndex('text')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">100</small>
+            </div>
           </div>
         </div>
 
-      </div>
-    </div>
+        <div>
+          <div class="flex flex-row">
+            <div class="flex-1">
+              <small class="text-text-400">Background Color</small>
+            </div>
+            <div class="flex flex-row gap-1 self-center">
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['base'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['base'] = 0">base</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['base'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['base'] = 1">md</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['base'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['base'] = 2">lg</button>
+              <button type="button" class="text-xs px-1" :class="selectorIndexes['base'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['base'] = 3">xl</button>
+            </div>
+          </div>
+          <div class="grid grid-cols-8 gap-2 mt-2">
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--base-300'][selectorIndex('base')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">300</small>
+            </div>
 
-    <div>
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--base-400'][selectorIndex('base')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">400</small>
+            </div>
+
+            <div class="flex flex-col items-center gap-2">
+              <ColorPicker v-model="media['html, .html']['--base-500'][selectorIndex('base')]"
+                           mode="hex" :custom-color="true" value-type="rgb" />
+              <small class="text-text-400 text-xs">500</small>
+            </div>
+          </div>
+        </div>
 
-      <div class="flex flex-row gap-4 items-center cursor-pointer">
-        <strong class="flex-1 text-text-400">Splash</strong>
       </div>
 
-      <div class="mt-1 flex flex-col items-center gap-2">
-        <Image ref="splashImg"
-               :src="item.props.splash"
-               :editable="true"
-               @change="setSplash"
-               class="aspect-square bg-text-50 rounded-lg w-[100px]" />
-
-        <div class="flex flex-row gap-8">
-          <button type="button" class="text-primary"
-                  @click="$refs.splashImg.edit()">
-            Upload
-          </button>
-          <button type="button" class="text-primary"
-                  @click="removeSplash">
-            Remove
-          </button>
+      <div class="p-6">
+
+        <small class="text-text-400">Splash</small>
+
+        <div class="mt-1 flex flex-col items-center gap-2">
+          <Image ref="splashImg"
+                 :src="item.props.splash"
+                 :editable="true"
+                 @change="setSplash"
+                 class="aspect-square bg-text-50 rounded-lg w-[100px]" />
+
+          <div class="flex flex-row gap-8">
+            <button type="button" class="text-primary"
+                    @click="$refs.splashImg.edit()">
+              Upload
+            </button>
+            <button type="button" class="text-primary"
+                    @click="removeSplash">
+              Remove
+            </button>
+          </div>
         </div>
+
       </div>
 
-    </div>
+      <div class="p-6 text-center">
+        <br />
+        <button type="button" class="text-text-300 hover:text-primary" @click="resetMedia">Reset</button>
+      </div>
 
-    <div class="p-6 text-center">
-      <button type="button" class="text-primary" @click="resetMedia">Reset to Default Style</button>
     </div>
 
 	</div>
@@ -172,6 +311,60 @@
 <script>
 
 import ColorPicker from "../components/ColorPicker.vue";
+import tinycolor from "tinycolor2";
+
+const defaultMedia = {
+  ":root": {
+    "--spacing-1": [],
+    "--spacing-2": [],
+    "--spacing-3": [],
+    "--spacing-4": [],
+    "--spacing-5": [],
+    "--spacing-6": [],
+    "--spacing-7": [],
+    "--spacing-8": [],
+    "--spacing-9": [],
+    "--spacing-10": [],
+    "--spacing-11": [],
+    "--spacing-12": []
+  },
+  "*": {
+    "font-family": [ "Poppins, sans-serif" ]
+  },
+  "html, .html": {
+    "font-size": [ '16px', '15px' ],
+    "--base-300": [ "rgb(235, 235, 235)" ],
+    "--base-400": [ "rgb(245, 245, 245)" ],
+    "--base-500": [ "rgb(255, 255, 255)" ],
+    "--primary-100": [],
+    "--primary-200": [],
+    "--primary-300": [],
+    "--primary-400": [],
+    "--primary-500": [ "rgb(0, 0, 0)" ],
+    "--primary-600": [ "rgb(15, 15, 15)" ],
+    "--primary-700": [],
+    "--primary-800": [],
+    "--primary-900": [],
+    "--secondary-100": [],
+    "--secondary-200": [],
+    "--secondary-300": [],
+    "--secondary-400": [],
+    "--secondary-500": [],
+    "--secondary-600": [],
+    "--secondary-700": [],
+    "--secondary-800": [],
+    "--secondary-900": [],
+    "--text-100": [],
+    "--text-200": [],
+    "--text-300": [],
+    "--text-400": [],
+    "--text-500": [ "rgb(33, 33, 33)" ],
+    "--text-600": [],
+    "--text-700": [],
+    "--text-800": [],
+    "--text-900": []
+  },
+}
 
 export default{
   components: {ColorPicker},
@@ -189,6 +382,8 @@ export default{
 
 		viewType: String,
 
+		viewIndex: Number,
+
 		viewTypes: Array,
 
 	},
@@ -226,14 +421,28 @@ export default{
       return this.media[key][propertyKey]
     },
 
-    resetMedia(){
+    generateShade(key, value){
+      this.mediaOf('', 'html, .html')[`${key}`] = value
+      this.mediaOf('', 'html, .html')[`${key}-500`] = value
+
+      const lightenLevels = [[50, 52], [100, 37], [200, 26], [300, 12], [400, 6]];
+      const darkenLevels = [[600, 6], [700, 12], [800, 18], [900, 24]];
+
+      for(let [ idx, lvl ] of lightenLevels){
+        this.mediaOf(this.viewType, 'html, .html')[`${key}-${idx}`] =
+            tinycolor(`rgb(${value})`).lighten(lvl).toRgbString().substring(4).slice(0, -1)
+      }
 
-      this.item.props.media = {}
-      for(let i in this.viewTypes){
-        const key = this.viewTypes[i].value
-        this.item.props.media[key] = { '*': {}, 'html, .html': {}, 'h1, h2, h3, h4, h5':{} }
+      for(let [ idx, lvl ] of darkenLevels){
+        this.mediaOf(this.viewType, 'html, .html')[`${key}-${idx}`] =
+            tinycolor(`rgb(${value})`).darken(lvl).toRgbString().substring(4).slice(0, -1)
       }
+    },
 
+    resetMedia(){
+      this.confirm('Reset styles?', () => {
+        this.media = defaultMedia
+      })
     },
 
     setSplash(base64, file){
@@ -254,6 +463,12 @@ export default{
 
     removeSplash(){
       this.item.props.splash = null
+    },
+
+    selectorIndex(selector){
+      if(!this.selectorIndexes[selector])
+        this.selectorIndexes[selector] = 0
+      return this.selectorIndexes[selector]
     }
 
 	},
@@ -264,19 +479,10 @@ export default{
   computed: {
 
     media(){
-      if(!this.item.props.media){
-        this.resetMedia()
-      }
-
+      if(!this.item.props.media)
+        this.item.props.media = JSON.parse(JSON.stringify(defaultMedia))
       return this.item.props.media
-    },
-
-    fontFamily(){
-      if(!Array.isArray(this.item.props['font-family']))
-        this.item.props['font-family'] = []
-
-      return this.item.props['font-family']
-    },
+    }
 
 	},
 
@@ -293,10 +499,14 @@ export default{
           ['Montserrat', 'Montserrat, sans-serif'],
           ['Noto Sans', '"Noto Sans", sans-serif'],
           ['Oswald', 'Oswald, sans-serif'],
+          ['Oxygen', 'Oxygen, sans-serif'],
           ['Poppins', 'Poppins, sans-serif'],
+          ['Quantico', 'Quantico, sans-serif'],
           ['Raleway', 'Raleway, sans-serif'],
+          ['Reddit Sans', '"Reddit Sans", sans-serif'],
           ['Roboto', '"Roboto", sans-serif'],
           ['Roboto Slab', '"Roboto Slab", serif'],
+          ['Volkhov', 'Volkhov, serif'],
           ['Work Sans', '"Work Sans", serif'],
         ],
 
@@ -309,9 +519,14 @@ export default{
           [ '16px', '16px' ],
           [ '17px', '17px' ],
           [ '18px', '18px' ],
+          [ '19px', '19px' ],
+          [ '20px', '20px' ],
+          [ '21px', '21px' ],
         ]
       },
 
+      selectorIndexes: {}
+
 		}
 	},