palette editor done

src/components/color_input/color_input.vue

@@ -15,7 +15,7 @@
       :model-value="present"
       :disabled="disabled"
       class="opt"
-      @update:modelValue="update(typeof modelValue === 'undefined' ? fallback : undefined)"
+      @update:modelValue="updateValue(typeof modelValue === 'undefined' ? fallback : undefined)"
     />
     <div
       class="input color-input-field"

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -56,21 +56,45 @@ export default {
     const license = ref('')
     const website = ref('')
 
-    // ### Initialization stuff
+    // ### Palette stuff
-    const palette = {
+    const palettes = reactive({
-      // These are here just to establish order,
+      light: {
-      // themes should override those
+        bg: '#f2f6f9',
-      bg: '#121a24',
+        fg: '#d6dfed',
-      fg: '#182230',
+        text: '#304055',
-      text: '#b9b9ba',
+        underlay: '#5d6086',
-      link: '#d8a070',
+        accent: '#f55b1b',
-      accent: '#d8a070',
+        cBlue: '#0095ff',
-      cRed: '#FF0000',
+        cRed: '#d31014',
-      cBlue: '#0095ff',
+        cGreen: '#0fa00f',
-      cGreen: '#0fa00f',
+        cOrange: '#ffa500',
-      cOrange: '#ffa500'
+        border: '#d8e6f9'
-    }
+      },
+      dark: {
+        bg: '#121a24',
+        fg: '#182230',
+        text: '#b9b9ba',
+        link: '#d8a070',
+        accent: '#d8a070',
+        cRed: '#FF0000',
+        cBlue: '#0095ff',
+        cGreen: '#0fa00f',
+        cOrange: '#ffa500'
+      }
+    })
 
+    const editedPalette = ref('dark')
+    const palette = computed({
+      get () {
+        return palettes[editedPalette.value]
+      },
+      set (newPalette) {
+        console.log(newPalette)
+        palettes[editedPalette.value] = newPalette
+      }
+    })
+
+    // ### I18n stuff
     // The paths in i18n are getting ridicously long, this effectively shortens them
     const getI18nPath = (componentName) => `settings.style.themes3.editor.components.${componentName}`
     const getFriendlyNamePath = (componentName) => getI18nPath(componentName) + '.friendlyName'
@@ -85,6 +109,7 @@ export default {
         : `${getI18nPath(componentName)}.states.${state}`
     }
 
+    // ### Initialization stuff
     // Getting existing components
     const componentsContext = require.context('src', true, /\.style.js(on)?$/)
     const componentKeysAll = componentsContext.keys()
@@ -356,7 +381,7 @@ export default {
       previewRules.push(...init({
         inputRuleset: editorFriendlyToOriginal.value,
         initialStaticVars: {
-          ...palette
+          ...palette.value
         },
         ultimateBackgroundColor: '#000000',
         rootComponentName: selectedComponentName.value,
@@ -377,6 +402,16 @@ export default {
       updatePreview
     )
 
+    watch(
+      palettes,
+      updatePreview
+    )
+
+    watch(
+      editedPalette,
+      updatePreview
+    )
+
     watch(
       selectedComponentName,
       updateSelectedComponent
@@ -417,6 +452,8 @@ export default {
       author,
       license,
       website,
+      palette,
+      editedPalette,
       componentKeys,
       componentsMap,
       selectedComponent,

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

@@ -9,16 +9,13 @@
       margin-right: 0.5em;
       flex: 1 1 0;
       line-height: 2;
+      min-height: 2em;
     }
 
     &.suboption {
       margin-left: 1em;
     }
 
-    .opt {
-      margin: 0.5em;
-    }
-
     .color-input {
       flex: 0 0 0;
     }
@@ -90,6 +87,21 @@
     }
   }
 
+  .palette-editor {
+    > label:not(.Select) {
+      font-weight: bold;
+      justify-self: right;
+    }
+
+    .colors {
+      display: grid;
+      justify-content: space-around;
+      grid-template-columns: repeat(4, min-content);
+      grid-template-rows: repeat(auto-fit, min-content);
+      grid-gap: 0.5em;
+    }
+  }
+
   .component-editor {
     display: grid;
     grid-template-columns: 6fr 3fr 4fr;

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

@@ -51,6 +51,80 @@
         </li>
       </ul>
     </div>
+    <div class="setting-item palette-editor">
+      <div class="label">
+        <label for="palette-selector">
+          {{ $t('settings.style.themes3.editor.palette.label') }}
+          {{ ' ' }}
+        </label>
+        <Select
+          v-model="editedPalette"
+          id="palette-selector"
+        >
+          <option key="dark" value="dark">
+            {{ $t('settings.style.themes3.editor.palette.dark') }}
+          </option>
+          <option key="light" value="light">
+            {{ $t('settings.style.themes3.editor.palette.light') }}
+          </option>
+        </Select>
+      </div>
+      <div class="colors">
+        <ColorInput
+          v-model="palette.bg"
+          :label="$t('settings.style.themes3.editor.palette.bg')"
+        />
+        <ColorInput
+          v-model="palette.fg"
+          :label="$t('settings.style.themes3.editor.palette.fg')"
+        />
+        <ColorInput
+          v-model="palette.text"
+          :label="$t('settings.style.themes3.editor.palette.text')"
+        />
+        <ColorInput
+          v-model="palette.link"
+          :label="$t('settings.style.themes3.editor.palette.link')"
+          :fallback="palette.accent"
+        />
+        <ColorInput
+          v-model="palette.accent"
+          :label="$t('settings.style.themes3.editor.palette.accent')"
+          :fallback="palette.link"
+        />
+        <ColorInput
+          v-model="palette.cRed"
+          :label="$t('settings.style.themes3.editor.palette.cRed')"
+        />
+        <ColorInput
+          v-model="palette.cBlue"
+          :label="$t('settings.style.themes3.editor.palette.cBlue')"
+        />
+        <ColorInput
+          v-model="palette.cGreen"
+          :label="$t('settings.style.themes3.editor.palette.cGreen')"
+        />
+        <ColorInput
+          v-model="palette.cOrange"
+          :label="$t('settings.style.themes3.editor.palette.cOrange')"
+        />
+        <ColorInput
+          v-model="palette.extra1"
+          fallback="#000000"
+          :label="$t('settings.style.themes3.editor.palette.extra1')"
+        />
+        <ColorInput
+          v-model="palette.extra2"
+          fallback="#000000"
+          :label="$t('settings.style.themes3.editor.palette.extra2')"
+        />
+        <ColorInput
+          v-model="palette.extra3"
+          fallback="#000000"
+          :label="$t('settings.style.themes3.editor.palette.extra3')"
+        />
+      </div>
+    </div>
     <div class="setting-item component-editor">
       <div class="component-selector">
         <label for="component-selector">

src/i18n/en.json

@@ -778,6 +778,23 @@
             "preserve": "Keep color",
             "no-auto": "Disabled"
           },
+          "palette": {
+            "label": "Edited palette",
+            "dark": "Dark mode",
+            "light": "Light mode",
+            "bg": "Panel background",
+            "fg": "Buttons etc.",
+            "text": "Text",
+            "link": "Links",
+            "accent": "Accent color",
+            "cRed": "Red color",
+            "cBlue": "Blue color",
+            "cGreen": "Green color",
+            "cOrange": "Orange color",
+            "extra1": "Extra 1",
+            "extra2": "Extra 2",
+            "extra3": "Extra 3"
+          },
           "components": {
             "normal": {
               "state": "Normal",