✨ Add variable font dance

src/Dancer.js

@@ -13,6 +13,7 @@ import swing, { reset as swingReset } from './dances/swing.js'
 import neon, { reset as neonReset } from './dances/neon.js'
 import kern, { reset as kernReset } from './dances/kern.js'
 import fontSize, { reset as fontSizeReset } from './dances/font-size.js'
+import variableFont, { reset as variableFontReset } from './dances/variable-font.js'
 import borderWidth, {
   reset as borderWidthReset,
 } from './dances/border-width.js'
@@ -37,6 +38,8 @@ class Dancer {
     this.registerDance('borderWidth', borderWidth, borderWidthReset)
     this.registerDance('fontSize', fontSize, fontSizeReset)
     this.registerDance('tilt', tilt, tiltReset)
+    this.registerDance('variableFont', variableFont, variableFontReset)
+
   }
 
   registerDance(type, dance, reset = () => {}) {

src/dances/variable-font.js

@@ -0,0 +1,13 @@
+const generateFontVariationSettings = (value, options) => Object.entries(options).reduce((fontVariationSettings,[key, { min, max }]) => {
+    const computedValue = ((max - min) * value + min)
+    return `${fontVariationSettings ? `${fontVariationSettings},` : ''} '${key}' ${computedValue}`
+}, null)
+
+export default (elem, value, options = {}) => {
+    elem.style.fontVariationSettings = generateFontVariationSettings(value, options)
+}
+
+export const reset = elem => {
+    elem.style.fontVariationSettings = null
+}
+