Alternative approach to font-sizing (qmk#726)

* Alternative approach to font-sizing

This approach uses CSS Custom Properties.

I recently discovered you can use this dynamically by injecting them as
styles in the parent div overriding any defaults.

 - use a newer css technology to avoid adding a style per key
 - see https://developer.mozilla.org/en-US/docs/Web/CSS/--*

Apply styles to all keymaps

* change default keySize to 0.85 (#12)

Thank you!

Co-authored-by: James Young <[email protected]>

src/components/BaseKey.vue

@@ -109,6 +109,9 @@ export default {
       if (this.inSwap) {
         classes.push('swapme');
       }
+      if (this.meta && this.meta.name.length >= 2) {
+        classes.push('smaller');
+      }
       const { KEY_WIDTH, KEY_HEIGHT } = this.config;
       if (!isUndefined(this.meta) && !this.printable) {
         if (this.colorwayOverride && this.colorwayOverride[this.meta.code]) {
@@ -150,13 +153,7 @@ export default {
       if (this.x > 0) {
         styles.push(`left: ${this.x}px;`);
       }
-      if (this.meta && this.meta.name.length >= 2) {
-        let keySize = 0.61;
-        if (this.config.SCALE < 1) {
-          keySize *= (1 + this.config.SCALE) / 2;
-        }
-        styles.push(`font-size: ${keySize}rem;`);
-      }
+
       return styles.join('');
     }
   },
@@ -262,11 +259,12 @@ export default {
   transform: scale(0.8);
 }
 .key.smaller {
-  font-size: 0.61rem;
+  font-size: var(--default-smaller-key-font-size);
 }
 .key {
   border-radius: 6px;
   font-family: 'Montserrat', sans-serif;
+  font-size: var(--default-key-font-size);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: 120%;

src/components/BaseKeymap.vue

@@ -1,6 +1,22 @@
 <script>
 export default {
   name: 'base-keymap',
+  computed: {
+    styles() {
+      let keySize = 0.85;
+      let smolKeySize = 0.61;
+      if (this.config.SCALE < 1) {
+        keySize *= (1 + this.config.SCALE) / 2;
+        smolKeySize *= (1 + this.config.SCALE) / 2;
+      }
+      return {
+        '--default-smaller-key-font-size': `${smolKeySize}rem`,
+        '--default-key-font-size': `${keySize}rem`,
+        width: `${this.width}px`,
+        height: `${this.height}px`
+      };
+    }
+  },
   methods: {
     calcKeyKeymapDims(w, h) {
       return {

src/components/PrintKeymap.vue

@@ -36,14 +36,7 @@ export default {
       'colorway',
       'defaults'
     ]),
-    ...mapState('app', ['layout', 'layouts', 'previewRequested']),
-    styles() {
-      let styles = [];
-      styles.push(`width: ${this.width}px;`);
-      styles.push(`height: ${this.height}px;`);
-      styles.push(`font-size: ${this.fontsize * this.config.SCALE}em;`);
-      return styles.join('');
-    }
+    ...mapState('app', ['layout', 'layouts', 'previewRequested'])
   },
   methods: {
     ...mapMutations('keymap', ['resizeConfig']),

src/components/VisualKeymap.vue

@@ -61,13 +61,6 @@ export default {
       'defaults'
     ]),
     ...mapState('app', ['layout', 'layouts', 'previewRequested']),
-    styles() {
-      let styles = [];
-      styles.push(`width: ${this.width}px;`);
-      styles.push(`height: ${this.height}px;`);
-      styles.push(`font-size: ${this.fontsize * 0.4}rem;`);
-      return styles.join('');
-    },
     currentLayer() {
       const layout = this.layouts[this.layout];
       const keymap = this.getLayer(this.layer);

src/components/VisualTesterKeymap.vue

@@ -121,13 +121,6 @@ export default {
       'activeLayoutMeta',
       'codeToPosition'
     ]),
-    styles() {
-      const styles = [];
-      styles.push(`width: ${this.width}px;`);
-      styles.push(`height: ${this.height}px;`);
-      styles.push(`font-size: ${this.fontsize * this.config.SCALE}em;`);
-      return styles.join('');
-    },
     layout: {
       get() {
         return this.$store.state.tester.layout;