lookin' good

src/components/component_preview/component_preview.vue

@@ -111,6 +111,8 @@ export default {
     "x-num   x-slide .      "
     "options options options";
   grid-gap: 0.5em;
+  max-width: 25em;
+  max-height: 25em;
 
   .header {
     grid-area: header;

src/components/input.style.js

@@ -18,9 +18,9 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--inputDefaultBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
-        '--inputDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+        '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
-        '--inputDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
+        '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }
     },
     {
@@ -41,25 +41,25 @@ export default {
           spread: 0,
           color: '#000000',
           alpha: 1
-        }, '--inputDefaultBevel']
+        }, '--defaultInputBevel']
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: ['--inputDefaultHoverGlow', '--inputDefaultBevel']
+        shadow: ['--defaultInputHoverGlow', '--defaultInputBevel']
       }
     },
     {
       state: ['focused'],
       directives: {
-        shadow: ['--inputDefaultFocusGlow', '--inputDefaultBevel']
+        shadow: ['--defaultInputFocusGlow', '--defaultInputBevel']
       }
     },
     {
       state: ['focused', 'hover'],
       directives: {
-        shadow: ['--inputDefaultFocusGlow', '--inputDefaultHoverGlow', '--inputDefaultBevel']
+        shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel']
       }
     },
     {

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -119,6 +119,12 @@
     }
   }
 
+  .palettes-editor {
+    .list-edit-area {
+      align-self: baseline;
+    }
+  }
+
   .variables-editor {
     .variable-selector {
       display: grid;
@@ -132,6 +138,10 @@
       display: grid;
       grid-template-rows: subgrid;
     }
+
+    .shadow-control {
+      grid-row: 2 / span 2;
+    }
   }
 
   .component-editor {

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -4,6 +4,7 @@
 <template>
   <div class="StyleTab">
     <div class="setting-item heading">
+      <!-- TODO: This needs to go -->
       <h2>{{ $t('settings.style.themes3.editor.title') }}</h2>
       <button
         class="btn button-default"
@@ -350,7 +351,9 @@
             <Select
               v-model="selectedVirtualDirective.valType"
             >
-              <option value='shadow'>shadow</option>
+              <option value='shadow'>
+              {{ $t('settings.style.themes3.variables.type_label') }}
+                shadow</option>
               <option value='shadow'>color</option>
               <option value='shadow'>generic</option>
             </Select>

src/components/shadow_control/shadow_control.scss

@@ -9,12 +9,11 @@
   width: 100%;
 
   &.-compact {
-    grid-template-columns: 1fr;
+    grid-template-columns: 10em 1fr;
-    grid-template-rows: 10em auto auto;
+    grid-template-rows: auto auto;
     grid-template-areas:
-      "selector"
+      "selector preview"
-      "preview"
+      "tweak tweak";
-      "tweak";
 
     &.-no-preview {
       grid-template-columns: 1fr;
@@ -116,6 +115,7 @@
     min-width: 10em;
     margin-left: 0.125em;
     align-self: start;
+    justify-self: center;
   }
 }
 

src/i18n/en.json

@@ -757,7 +757,7 @@
       "themes3": {
         "define": "Override",
         "palette": {
-          "label": "Palette",
+          "label": "Palettes",
           "import": "Import",
           "export": "Export",
           "bg": "Panel background",