✨ Adds option to change font from UI

src/assets/locales/en.json

@@ -101,6 +101,7 @@
     "export-button": "Export Custom Variables",
     "reset-button": "Reset Styles for",
     "show-all-button": "Show All Variables",
+    "change-fonts-button": "Change Fonts",
     "save-button": "Save",
     "cancel-button": "Cancel",
     "saved-toast": "{theme} Updated Successfully",

src/components/Settings/CustomThemeMaker.vue

@@ -27,22 +27,25 @@
         </v-swatches>
         <input v-else
           :id="`color-input-${colorName}`"
-          :value="customColors[colorName]"
+          v-model="customColors[colorName]"
-          class="misc-input"
+          :class="`misc-input ${isTextual(colorName, customColors[colorName]) ? 'long-input' : ''}`"
           @input="setVariable(colorName, customColors[colorName])"
         />
       </div> <!-- End of color list -->
     </div>
     <!-- More options: Export, Reset, Show all -->
+    <p @click="showFontVariables" class="action-text-btn show-all-vars-btn">
+        {{ $t('theme-maker.change-fonts-button') }}
+    </p>
+    <p @click="findAllVariableNames" class="action-text-btn show-all-vars-btn">
+       {{ $t('theme-maker.show-all-button') }}
+    </p>
     <p @click="exportToClipboard" class="action-text-btn">
       {{ $t('theme-maker.export-button') }}
     </p>
     <p @click="resetAndSave" class="action-text-btn">
        {{ $t('theme-maker.reset-button') }} '{{ themeToEdit }}'
     </p>
-    <p @click="findAllVariableNames" class="action-text-btn show-all-vars-btn">
-       {{ $t('theme-maker.show-all-button') }}
-    </p>
     <!-- Save and cancel buttons -->
     <div class="action-buttons">
       <Button :click="saveChanges">
@@ -138,6 +141,13 @@ export default {
       });
       return data;
     },
+    /* Adds font variables to list */
+    showFontVariables() {
+      const currentVariables = this.customColors;
+      const fonts = ['font-headings', 'font-body', 'font-monospace'];
+      const fontVariables = this.makeInitialData(fonts);
+      this.customColors = { ...currentVariables, ...fontVariables };
+    },
     /* Find all available CSS variables for the current applied theme */
     findAllVariableNames() {
       const availableVariables = Array.from(document.styleSheets)
@@ -146,7 +156,7 @@ export default {
           ((acc, sheet) => ([
             ...acc,
             ...Array.from(sheet.cssRules).reduce(
-              (def, rule) => (rule.selectorText === ':root'
+              (def, rule) => (rule.selectorText === ':root' || rule.selectorText === 'html'
                 ? [...def, ...Array.from(rule.style).filter(name => name.startsWith('--'))] : def),
               [],
             ),
@@ -159,13 +169,25 @@ export default {
     /* Returns a complmenting text color for the palete input foreground */
     /* White if the color is dark, otherwise black */
     getForegroundColor(colorHex) {
+      /* Converts a 3-digit hex code to a 6-digit hex code (e.g. #f01 --> #ff0011) */
+      const threeToSix = (hex) => {
+        let digit = hex;
+        digit = digit.split('').map((item) => (item === '#' ? item : item + item)).join('');
+        return digit;
+      };
+      /* Converts hex code to RGB (e.g. #ff0011 --> rgb(255,0,0) ) */
       const hexToRgb = (hex) => {
-        const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        let hexCode = hex.slice(0, 7);
+        if (hex.startsWith('#') && hex.length === 4) hexCode = threeToSix(hexCode);
+        const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexCode);
         if (!colorParts || colorParts.length < 3) return 'black';
         const parse = (index) => parseInt(colorParts[index], 16);
         return colorParts ? { r: parse(1), g: parse(2), b: parse(3) } : null;
       };
+      /* Given an RGB value, return the lightness ratio */
       const getLightness = (rgb) => (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+      if (!colorHex.startsWith('#')) return 'white'; // Not a hex, do nothing
+      // Convert hex to RGB obj, get lightness, and return opposing color
       return getLightness(hexToRgb(colorHex.trim())) < 100 ? 'white' : 'black';
     },
     /* The contents of the style attribute, to set background and text color of swatch */
@@ -179,6 +201,7 @@ export default {
       // If value is a dimension, then it aint a color
       if ((/rem|px|%/.exec(variableValue))) return false;
       const nonColorVariables = [ // Known non-color variables
+        '--font-headings', '--font-body', '--font-monospace',
         '--curve-factor', '--curve-factor-navbar', '--curve-factor-small',
         '--dimming-factor', '--scroll-bar-width', '--header-height', '--footer-height',
         '--item-group-padding', '--item-shadow', '--item-hover-shadow:', '--item-icon-transform',
@@ -189,6 +212,10 @@ export default {
       if (nonColorVariables.includes(`--${variableName}`)) return false;
       return true; // It must be a color, we'll use the color picker
     },
+    /* Determine if a given key is that of a known font variable, or has a long value */
+    isTextual(varName, varValue) {
+      return varName.startsWith('font-') || (varValue && varValue.length > 12);
+    },
   },
 };
 </script>
@@ -202,7 +229,7 @@ div.theme-configurator-wrapper {
   right: 1rem;
   width: 16rem;
   min-height: 12rem;
-  max-height: 28rem;
+  max-height: 32rem;
   padding: 0.5rem;
   z-index: 5;
   overflow-y: visible;
@@ -218,7 +245,7 @@ div.theme-configurator-wrapper {
   }
 
   div.color-row-container {
-    max-height: 16rem;
+    max-height: 20rem;
     overflow-y: visible;
     @extend .scroll-bar;
     div.color-row {
@@ -250,6 +277,15 @@ div.theme-configurator-wrapper {
       box-shadow: inset 0 0 4px 4px #00000080;
       outline: none;
     }
+    &.long-input {
+      cursor: text;
+      font-style: italic;
+      font-weight: 200;
+      padding: 0.5rem 0.2rem;
+      font-size: 0.75rem;
+      width: 9rem;
+      &:hover { box-shadow: none; }
+    }
   }
 }