From f4f36655c3dd07cf53e79148e803273c62de42d4 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Thu, 30 Apr 2020 09:35:28 -0700
Subject: [PATCH] Alternative approach to font-sizing (#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 <18669334+noroadsleft@users.noreply.github.com>
---
 src/components/BaseKey.vue            | 14 ++++++--------
 src/components/BaseKeymap.vue         | 16 ++++++++++++++++
 src/components/PrintKeymap.vue        |  9 +--------
 src/components/VisualKeymap.vue       |  7 -------
 src/components/VisualTesterKeymap.vue |  7 -------
 5 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/components/BaseKey.vue b/src/components/BaseKey.vue
index 06b1f1b52f08..d5c8114b4ebd 100644
--- a/src/components/BaseKey.vue
+++ b/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%;
diff --git a/src/components/BaseKeymap.vue b/src/components/BaseKeymap.vue
index 64547d83ce45..ff5fd3bf5171 100644
--- a/src/components/BaseKeymap.vue
+++ b/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 {
diff --git a/src/components/PrintKeymap.vue b/src/components/PrintKeymap.vue
index 78dd9b23accf..faa70fb8caac 100644
--- a/src/components/PrintKeymap.vue
+++ b/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']),
diff --git a/src/components/VisualKeymap.vue b/src/components/VisualKeymap.vue
index 0c217ce99d09..9d0399401837 100644
--- a/src/components/VisualKeymap.vue
+++ b/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);
diff --git a/src/components/VisualTesterKeymap.vue b/src/components/VisualTesterKeymap.vue
index 1e3730a07ed2..9ca19fa292af 100644
--- a/src/components/VisualTesterKeymap.vue
+++ b/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;