website: some UI updates to the lab

22 files changed, 305 insertions, 98 deletions

diff --git a/docs/_scripts/optimize-resources.sh b/docs/_scripts/optimize-resources.sh
index 2ff2e4e27..030ab49e9 100755
--- a/docs/_scripts/optimize-resources.sh
+++ b/docs/_scripts/optimize-resources.sh
@@ -32,6 +32,11 @@ for f in *.svg; do
   svgo --multipass -q "$f" &
 done
 
+# crunch /docs/res/icons/*.svg
+for f in icons/*.svg; do
+  svgo --multipass -q "$f" &
+done
+
 # crunch /docs/res/*.png
 for f in *.png; do
   TMPNAME=.$f.tmp
diff --git a/docs/lab/index.html b/docs/lab/index.html
index 53efe19ff..4e13cc194 100644
--- a/docs/lab/index.html
+++ b/docs/lab/index.html
@@ -717,7 +717,6 @@ samples.set('Repertoire', {
       for (const g of glyphs) {
         // let [name, isEmpty, uc, ucName, color] = g
         let name = g[0], isEmpty = g[1], uc = g[2], ucName = g[3], color = g[4]
-        console.log('g', g)
 
         let style = ''
         if (color && color != '<derived>') {
@@ -755,7 +754,7 @@ samples.set('Repertoire', {
 })
 
 
-let combs = `ta es ar te ne an as ra la sa al si or ci na er at re ac gh ca ma is za ic ja va zi ce ze se in pa et ri en ti to me ec ol ni os on iz az st ke ka lo el de ro ve pe oz ie gi le ge fo uz us ur ag ah ad ko ez ig eg ak ga da tu ia so ul am it oc av su jo ru em li uc un io ao he yc gu iu ha og eh ho cn im ny sk aa sc ot ej ku lu nu go ju zo ok be ai ik nc je zn no od ek vy hu do co ed ky vi sl ut pr po aj ow ee mo iv ba mu ib uk ov ep om ym du bo zu cu di ev cj oi vo fa oe hh bh op ck bu ab fe rs ir rz ly il yo mi gj id ys ji ug um ob ns dz qe sn hr ap uh ea rc nt yu ae oj zj ud js fu pu cl vs gg cc hi oh zy ue zd ou ua ry zm of ub oð gl oy au ki kl hl ks yl bi ih ls lg hd zs zl gz tr ið sm ui oo að eb ty ct pi ij yz af uv lk ay rg ya vu ln dl ts ip sv up ht yr sr hm sy uy eo ei nh wa ss gd yv uj nz cs oa wg rt we zb ii if lc uu pl gr by ye sp þa fi zk ef kc yt wl sh zg wo sw hs lt yn dy ax kz zr ps mz jh ng pc cr bc yð eu hy uf lz eq jg zz ox gn ms dh oß cm th lm hq rn yj kr xa yi yk uo zt sj xe yb jc wu vc dr br tc tl my zv gs mc pt gm rl xi hc bl lb ds dn sg bt yp tn cd rd vz vr gb aß nk zc iq aq dc bs rk sb ex yh sd vn vd cv yd zw cb ml sz lp lv sf pn lr ws þo þy ix mr qu mt xo ld ll lw dm cy cp wz rb hb hn bz ch mh hj lh hz uß rm dg gw kt jz aw eð uð oq iþ rh hf mg iw kn fc iy cg vt hw wh hx gc ux cw aæ zf lj nd gt hg py tz kh nr nv vl fh tk oþ gk hk nm xh yf jl pz cf xu þu aþ nb pg yþ dk td jn fl ew gf bn þe gx nn np lf fy zp uq yg dt oæ tt zh jt kv tm ðo fs nj þi cz jd mk mn nl rr rv wi ða fn gy jr kg rp tj tp xy ði ßo æo`
+let combs = `ta es ar te ne an as ra la sa al si or ci na er at re ac gh ca ma is za ic ja va zi ce ze se in pa et ri en ti to me ec ol ni os on iz az st ke ka lo el de ro ve pe oz ie gi le ge fo uz us ur ag ah ad ko ez ig eg ak ga da tu ia so ul am it oc av su jo ru rt rf em li uc un io ao he yc gu iu ha og eh ho cn im ny sk aa sc ot ej ku lu nu go ju zo ok be ai ik nc je zn no od ek vy hu do co ed ky vi sl ut pr po aj ow ee mo iv ba mu ib uk ov ep om ym du bo zu cu di ev cj oi vo fa oe hh bh op ck bu ab fe rs ir rz ly il yo mi gj id ys ji ug um ob ns dz qe sn hr ap uh ea rc nt yu ae oj zj ud js fu pu cl vs gg cc hi oh zy ue zd ou ua ry zm of ub oð gl oy au ki kl hl ks yl bi ih ls lg hd zs zl gz tr ið sm ui oo að eb ty ct pi ij yz af uv lk ay rg ya vu ln dl ts ip sv up ht yr sr hm sy uy eo ei nh wa ss gd yv uj nz cs oa wg rt we zb ii if lc uu pl gr by ye sp þa fi zk ef kc yt wl sh zg wo sw hs lt yn dy ax kz zr ps mz jh ng pc cr bc yð eu hy uf lz eq jg zz ox gn ms dh oß cm th lm hq rn yj kr xa yi yk uo zt sj xe yb jc wu vc dr br tc tl my zv gs mc pt gm rl xi hc bl lb ds dn sg bt yp tn cd rd vz vr gb aß nk zc iq aq dc bs rk sb ex yh sd vn vd cv yd zw cb ml sz lp lv sf pn lr ws þo þy ix mr qu mt xo ld ll lw dm cy cp wz rb hb hn bz ch mh hj lh hz uß rm dg gw kt jz aw eð uð oq iþ rh hf mg iw kn fc iy cg vt hw wh hx gc ux cw aæ zf lj nd gt hg py tz kh nr nv vl fh tk oþ gk hk nm xh yf jl pz cf xu þu aþ nb pg yþ dk td jn fl ew gf bn þe gx nn np lf fy zp uq yg dt oæ tt zh jt kv tm ðo fs nj þi cz jd mk mn nl rr rv wi ða fn gy jr kg rp tj tp xy ði ßo æo`
 
 let uniqueChars = new Set(combs.replace(/\s+/g, '').split(''))
 combs = combs.split(/\s+/)
@@ -770,7 +769,6 @@ function getEnglishWords() {
       if (_enWords) {
         return
       }
-      // const words = text.split('\n')
       let combIndex = new Map() // comb => Set{ combWordsHTML }
       console.log(`computing ${words.length} english words and ${words.length * combs.length} combinations...`)
       for (const comb of combs) {
@@ -1411,6 +1409,7 @@ document.head.appendChild(fontCSS)
       <label class="label-and-value">
         <span>Size:</span>
         <input type="number" value="22" step="1" min="4" max="1024" name="size">
+        <note><span class="unit">dp</span></note>
       </label>
 
       <label class="label-and-value">
@@ -1429,41 +1428,27 @@ document.head.appendChild(fontCSS)
       </div>
 
       <label class="label-and-value">
-      <span>Anti-alias:</span>
-      <select name="antialias">
-        <option value="greyscale" selected>Greyscale</option>
-        <option value="subpixel">Subpixel</option>
-        <option value="default">Browser default</option>
-      </select>
+        <span>Letter spacing:</span>
+        <input type="number" value="" placeholder="" step="0.1" name="letterSpacing">
+        <note><span class="unit">%</span><div
+          class="img-button reset-letter-spacing"
+          tabindex="0"
+          style="background-image:url(../res/icons/reset-black.svg)"></div>
+        </note>
       </label>
 
       <label class="label-and-value">
-      <span>Compare:</span>
-      <select name="compare">
-        <option value="-" selected>Nothing</option>
-        <option value="roboto">Roboto</option>
-        <option value="system">System font</option>
-        <option value="rasterization">Rasterization</option>
-      </select>
-      </label>
-
-      <label class="rasterizePhrase">
-      Rasterize phrase:<br>
-      <input type="text" value="Account expiration" name="rasterizePhrase">
-      </label>
-
-      <label class="label-and-value">
-        <span>letter-spacing:</span>
-        <input type="number" value="0" step="0.1" name="letterSpacing">
-      </label>
-
-      <label class="label-and-value">
-        <span>line-height:</span>
+        <span>Line height:</span>
         <input type="number" value="" placeholder="" step="1" min="0" max="1000" name="lineHeight">
+        <note><span class="unit">dp</span><div
+          class="img-button reset-line-height"
+          tabindex="0"
+          style="background-image:url(../res/icons/reset-black.svg)"></div>
+        </note>
       </label>
 
       <label class="label-and-value">
-      <span>text-transform:</span>
+      <span>Transform:</span>
       <select name="text-transform">
         <option value="none" selected>none</option>
         <option value="capitalize">capitalize</option>
@@ -1473,7 +1458,7 @@ document.head.appendChild(fontCSS)
       </select></label>
 
       <label class="label-and-value">
-      <span>text-decoration:</span>
+      <span>Decoration:</span>
       <select name="text-decoration">
         <option value="none" selected>none</option>
         <option value="underline">underline</option>
@@ -1525,8 +1510,32 @@ document.head.appendChild(fontCSS)
         <option value="oldstyle-nums stacked-fractions">oldstyle-nums stacked-fractions</option>
       </select></label-->
 
+      <h3>Display</h3>
+
+      <label class="label-and-value">
+      <span>Anti-alias:</span>
+      <select name="antialias">
+        <option value="greyscale" selected>Greyscale</option>
+        <option value="subpixel">Subpixel</option>
+        <option value="default">Browser default</option>
+      </select>
+      </label>
+
+      <label class="label-and-value">
+      <span>Compare:</span>
+      <select name="compare">
+        <option value="-" selected>Nothing</option>
+        <option value="roboto">Roboto</option>
+        <option value="system">System font</option>
+      </select>
+      </label>
+
+      <label title="White text on black background"><input type="checkbox" name="display-invert-colors"> Inverted colors</label>
+
+
+      <h3>Features</h3>
+
       <div class="checkbox-group">
-      <span>Features:</span>
       <label title="Discretionary ligatures, e.g. !? -> interrobang"><input type="checkbox" class="featopt" name="feat:dlig"> dlig &nbsp;(Discretionary ligatures)</label>
       <label title="Convert all numbers to numerators"><input type="checkbox" class="featopt" name="feat:numr"> numr &nbsp;(Numerators)</label>
       <label title="Convert all numbers to denominators"><input type="checkbox" class="featopt" name="feat:dnom"> dnom &nbsp;(Denominators)</label>
@@ -1586,14 +1595,18 @@ document.head.appendChild(fontCSS)
         <sample contenteditable spellcheck="false" class="primary inter"></sample>
         <sample contenteditable spellcheck="false" class="secondary"></sample>
       </samples>
-
-      <canvas id="displayCanvas" width="960" height="400"></canvas>
-      <canvas id="renderCanvas" width="120" height="50"></canvas>
     </div>
 
     <div id="measure" class="inter">Åj</div>
+  </body>
+  <script type="text/javascript">(function(){
+
+function InterDynamicTracking(fontSize) {
+  var a = -0.0223, b = 0.185, c = -0.1745;
+  // tracking = a + b * e ^ (c * fontSize)
+  return a + b * Math.pow(Math.E, c * fontSize)
+}
 
-    <script type="text/javascript">
 
 // provide hinted=1 to use TTF hinted fonts.
 // not exposed in UI as it only works when serving the site locally
@@ -1617,6 +1630,7 @@ class BoundVar {
     this.lastValue = this.getValue()
     this.parentVars = parentVars
     this.defaultValue = this.lastValue
+    this._changeCallbacks = []
   }
 
   refreshValue(ev) {
@@ -1632,6 +1646,21 @@ class BoundVar {
          : this.e.value
   }
 
+  onChange(callback) {
+    this._changeCallbacks.push(callback)
+  }
+
+  removeChangeListener(callback) {
+    let i = 0
+    for (; i < this._changeCallbacks.length; i++) {
+      if (this._changeCallbacks[i] === callback) {
+        this._changeCallbacks.splice(i, 1)
+        return true
+      }
+    }
+    return false
+  }
+
   setValue(value) {
     if (this.isCheckbox && typeof value != 'boolean') {
       value = parseInt(value)
@@ -1650,14 +1679,22 @@ class BoundVar {
     if (this.isCheckbox) {
       this.e.checked = !!value
     } else if (this.isNumber && typeof value == 'number') {
-      if (this.e.valueAsNumber != value) {
-        this.e.valueAsNumber = value
+      if (isNaN(value)) {
+        this.e.value = null
+      } else {
+        if (this.e.valueAsNumber != value) {
+          this.e.valueAsNumber = value
+        }
       }
     } else if (this.e.value != value) {
       this.e.value = value
     }
 
     this.lastValue = value
+
+    for (let f of this._changeCallbacks) {
+      f(value, this)
+    }
   }
 }
 
@@ -1824,25 +1861,23 @@ class Vars {
 function main() {
   const vars = new Vars(document.location.search)
 
-  let interUISample = document.querySelector('sample.inter');
-  let secondarySample = document.querySelector('sample.secondary');
-  secondarySample.innerText = interUISample.innerText;
+  const $  = (q, el) => (el || document).querySelector(q)
+  const $$ = (q, el) => [].slice.call((el || document).querySelectorAll(q))
 
-  const renderCanvas = document.querySelector('#renderCanvas')
-  const displayCanvas = document.querySelector('#displayCanvas')
+  let interUISample = $('sample.inter');
+  let secondarySample = $('sample.secondary');
+  secondarySample.innerText = interUISample.innerText;
 
-  const measureDiv = document.querySelector('#measure')
+  const measureDiv = $('#measure')
 
-  const secondaryFontElements =
-    Array.prototype.slice.call(document.querySelectorAll('.secondaryFont'))
-  const primaryFontElements =
-    Array.prototype.slice.call(document.querySelectorAll('.primaryFont'))
+  const secondaryFontElements = $$('.secondaryFont')
+  const primaryFontElements = $$('.primaryFont')
 
-  const repertoireControl = document.querySelector('.repertoireControl')
-  const samplesElement = document.querySelector('samples')
+  const repertoireControl = $('.repertoireControl')
+  const samplesElement = $('samples')
 
   // filter paste to match style
-  ;[].slice.call(document.querySelectorAll('[contenteditable]')).forEach(el => {
+  $$('[contenteditable]').forEach(el => {
     el.addEventListener('paste', ev => {
       ev.preventDefault()
       let text = ev.clipboardData.getData("text/plain")
@@ -1852,6 +1887,13 @@ function main() {
 
   let sizeVar = null
 
+  // prevent clicks on img-button from changing focus
+  $$('.img-button').forEach(el => {
+    el.addEventListener('pointerdown', ev => {
+      ev.preventDefault()
+    }, {passive:false, capture:true})
+  })
+
   function forEachGlyphlist(fn) {
     let elements = samplesElement.querySelectorAll('.glyphlist')
     if (elements) {
@@ -1872,7 +1914,8 @@ function main() {
   }
 
 
-  const lineHeightInput = document.querySelector('[name="lineHeight"]')
+  const lineHeightInput = $('[name="lineHeight"]')
+
   let measurePending = false
   const measure = () => {
     const r = measureDiv.getBoundingClientRect()
@@ -1951,7 +1994,7 @@ function main() {
   }
 
   // sample text
-  const samplesSelect = document.querySelector('select[name="sample"]')
+  const samplesSelect = $('select[name="sample"]')
   for (let [k,v] of samples) {
     const opt = document.createElement('option')
     opt.innerText = k
@@ -1975,12 +2018,12 @@ function main() {
     }
   })
 
-  const boxes = document.querySelector('boxes')
+  const boxes = $('boxes')
   sizeVar = vars.bind('size', (e, v) => {
     boxes.style.display = (v > 20) ? 'none' : null
     setCSSProp('font-size', v + 'px')
     setGlyphlistClass('hideNames', v < 36)
-    // setCSSProp('line-height', Math.ceil(v * 1.5) + 'px')
+    return v
   })
 
   let usingVarFont = false
@@ -2102,20 +2145,6 @@ function main() {
     secondarySampleClassNameAddition = className || null
   }
 
-  const rasterizePhraseInput = document.querySelector('[name="rasterizePhrase"]')
-  const rasterizePhraseLabel = document.querySelector('label.rasterizePhrase')
-
-  const enableRasterization = () => {
-    displayCanvas.style.display = null
-    rasterizePhraseInput.disabled = false
-    rasterizePhraseLabel.style.display = null
-  }
-  const disableRasterization = () => {
-    displayCanvas.style.display = 'none'
-    rasterizePhraseInput.disabled = true
-    rasterizePhraseLabel.style.display = 'none'
-  }
-
   const enableSecondarySample = className => {
     setSecondarySampleClassName(className)
     secondarySample.style.display = null
@@ -2128,20 +2157,50 @@ function main() {
   }
 
   vars.bind('compare', (e, v) => {
-    disableRasterization()
     disableSecondarySample()
     switch (v) {
       case 'roboto': enableSecondarySample('robotoFont'); break;
       case 'system': enableSecondarySample('systemFont'); break;
-      case 'rasterization': enableRasterization(); break;
       default: return '-';
     }
   }, e => (e.value && e.value != '-') ? e.value : null)
 
-  vars.bind('letterSpacing', (e, v) => {
-    setCSSProp('letter-spacing', v + 'px')
+  function updateImplicitLetterSpacing(el, size) {
+    let t = InterDynamicTracking(size)
+    let v = parseFloat((t * 100).toFixed(1))
+    el.placeholder = v
+    return v
+  }
+
+  let letterSpacingVar = vars.bind('letterSpacing', (e, v) => {
+    if (!v) {
+      v = updateImplicitLetterSpacing(e, sizeVar.getValue())
+    }
+    setCSSProp('letter-spacing', (v / 100) + 'em')
+  }, (e, prevValue, ev) => {
+    if (ev && !ev.inputType && !prevValue) {
+      // step increment/decrement
+      let delta = e.valueAsNumber == 0 ? -1 : e.valueAsNumber
+      return parseFloat(e.placeholder) + delta
+    }
+    return e.value || ""
+  })
+
+  // update implicit letter spacing when size changes
+  sizeVar.onChange(size => {
+    let t = letterSpacingVar.lastValue
+    if (!t || isNaN(t)) {
+      updateImplicitLetterSpacing(letterSpacingVar.e, size)
+    }
   })
 
+  $('.reset-letter-spacing').addEventListener('click', ev => {
+    vars.setValue('letterSpacing', '')
+    ev.stopPropagation()
+    ev.preventDefault()
+  }, {passive:false,capture:true})
+
+  
   vars.bind('lineHeight', lineHeightInput, (e, v) => {
     setCSSProp('line-height', v ? v + 'px' : null)
   }, (e, prevValue, ev) => {
@@ -2153,7 +2212,17 @@ function main() {
     if (e.valueAsNumber < 0) {
       return Math.abs(e.valueAsNumber)
     }
-    return e.value || null
+    return e.value || ""
+  })
+
+  $('.reset-line-height').addEventListener('click', ev => {
+    vars.setValue('lineHeight', '')
+    ev.stopPropagation()
+    ev.preventDefault()
+  }, {passive:false,capture:true})
+
+  vars.bind('display-invert-colors', (e, on) => {
+    document.body.classList[on ? 'add' : 'remove']('inverted-colors')
   })
 
   let spaaSelect = vars.bind('antialias', (e, v) => {
@@ -2207,7 +2276,7 @@ function main() {
   // })
 
 
-  for (let e of Array.from(document.querySelectorAll('input.featopt'))) {
+  for (let e of $$('input.featopt')) {
     let p = e.name.replace(/^feat\:/, '').split('=')
     let name = p[0]
     let valueOn = parseInt(p[1] || '1')
@@ -2245,7 +2314,7 @@ function main() {
           sampleText.substr(m.index + m[0].length)
         )
         let directive = m[1].toLowerCase()
-        console.log('dir', m[1], '=>', m[2])
+        // console.log('dir', m[1], '=>', m[2])
         if (directive == 'enablefeatures') {
           // #!enableFeatures:tnum,dlig
           for (let feat of m[2].toLowerCase().split(/\s*,\s*/)) {
@@ -2270,14 +2339,34 @@ function main() {
     }
   })
 
+  // ESC clears keyboard focus
+  document.addEventListener('keydown', ev => {
+    if (ev.keyCode == 27) {
+      document.activeElement.blur()
+    }
+  }/*, {capture:true, passive:false}*/)
+
+  // RETURN on control clears keyboard focus
+  $$('input').forEach(el => el.addEventListener('keypress', ev => {
+    if (ev.keyCode == 13) {
+      document.activeElement.blur()
+    }
+  }))
+
+  // clear keyboard focus when a select control changes
+  $$('select').forEach(el => el.addEventListener('change', ev => {
+    document.activeElement.blur()
+    window.requestAnimationFrame(() => document.activeElement.blur())
+  }))
+
 }
-    </script>
-  </body>
-  <script type="text/javascript">
-    main();
-    document.title = (
-      (new Date()).toTimeString().split(':').slice(0,2).join(':') +
-      ' — ' + (new Date()).toDateString()
-    );
-  </script>
+
+
+main();
+document.title = (
+  (new Date()).toTimeString().split(':').slice(0,2).join(':') +
+  ' — ' + (new Date()).toDateString()
+);
+
+})();</script>
 </html>
diff --git a/docs/lab/lab.css b/docs/lab/lab.css
index 887869d0a..69d775295 100644
--- a/docs/lab/lab.css
+++ b/docs/lab/lab.css
@@ -1,3 +1,19 @@
+:root {
+  --fieldHeight: 24px;
+
+  /* P3 wide gamut colors */
+  --red:    color(display-p3 0.94 0.19 0.04);
+  --yellow: color(display-p3 1 0.87 0.05);
+  --blue:   rgb(3, 102, 214);
+}
+@supports not (color: color(display-p3 1 1 1)) {
+  /* sRGB colors */
+  :root {
+    --red: #F03009;
+    --yellow: #FFE310;
+  }
+}
+
 * { margin:0; padding:0; font-synthesis: none; }
 html { }
 body {
@@ -39,6 +55,41 @@ i, cite, em, var, address, dfn {
   font-style: oblique;
 }
 
+label {
+  display: block;
+  margin: 2px 0;
+}
+
+input[type="number"] {
+  width:50px;
+  background: none;
+  /*border: 1px solid rgba(0,0,0,0.2);*/
+  border: none;
+  padding: 4px;
+  border-radius: 2px;
+  background: white;
+}
+
+select {
+  height: var(--fieldHeight);
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  border: none;
+  padding: 4px 18px 4px 4px;
+  border-radius: 2px;
+  background: white;
+  background-image: url(../res/icons/popup-black.svg);
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
+input[type="number"]:focus,
+input[type="text"]:focus,
+select:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px black;
+}
+
 .options {
   width: 275px;
   box-sizing:border-box;
@@ -59,6 +110,11 @@ i, cite, em, var, address, dfn {
   .options small {
     opacity: 0.6;
   }
+  .options h3 {
+    font-weight: 600;
+    font-size: 12px;
+    margin: 1rem 0 0.5rem 0;
+  }
   .options input[type="radio"], .options input[type="checkbox"] {
     margin-right:4px;
   }
@@ -66,6 +122,8 @@ i, cite, em, var, address, dfn {
     display: flex;
     flex-wrap: nowrap;
     justify-content: flex-start;
+    align-items: center;
+    height: var(--fieldHeight);
   }
   .options .label-and-value span {
     /*flex: 1 1 auto;*/
@@ -76,8 +134,10 @@ i, cite, em, var, address, dfn {
   }
   .options .label-and-value input {
     width: 50px;
+    max-height: var(--fieldHeight);
+    box-sizing: border-box;
   }
-  .options .label-and-value select {
+  .options select {
     min-width:50px;
     max-width:130px;
   }
@@ -127,18 +187,45 @@ i, cite, em, var, address, dfn {
     pointer-events: none;
     opacity: 0.4;
   }
+  .options .label-and-value input + note,
+  .options .label-and-value select + note {
+    display: flex;
+    align-items: center;
+    height: var(--fieldHeight);
+    line-height: var(--fieldHeight);
+    margin-left: 0.5em;
+    user-select: none; -webkit-user-select: none;
+    color: rgba(0,0,0,0.4);
+  }
+  .options .label-and-value input + note .unit,
+  .options .label-and-value select + note .unit {
+    flex: 0 0 auto;
+    display:flex;
+    width: 18px;
+  }
 
-input[type="number"] {
-  width:50px;
-  background: none;
-  border: 1px solid rgba(0,0,0,0.2);
-  padding: 4px;
-  border-radius: 2px;
-}
 
-label {
-  display: block;
-  margin: 2px 0;
+.img-button {
+  display: inline-block;
+  width: var(--fieldHeight);
+  height:var(--fieldHeight);
+  background-size: 16px 16px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  border-radius: 3px;
+  opacity: 0.8;
+  outline: none;
+}
+.img-button:hover {
+  opacity: 1;
+  background-color: rgba(0,0,0,0.1);
+}
+.img-button:hover:active {
+  opacity: 1;
+  background-color: rgba(0,0,0,0.2);
+}
+.img-button:focus {
+  box-shadow: 0 0 0 2px black;
 }
 
 .checkbox-group label {
@@ -172,6 +259,7 @@ body.italic samples {
     white-space: pre-wrap;
     outline: none;
     overflow-wrap: break-word;
+    color:black;
   }
     sample p {
       white-space: pre-wrap;
@@ -221,6 +309,13 @@ body.italic samples {
         display:none;
       }
 
+body.inverted-colors {
+  background: #020202;
+}
+body.inverted-colors sample {
+  color: white;
+}
+
 body.secondarySampleDisabled .showOnlyWithSecondarySample {
   display: none;
 }
diff --git a/docs/res/ctxedit.css b/docs/res/ctxedit.css
index e0fadddbe..fb17514ae 100644
--- a/docs/res/ctxedit.css
+++ b/docs/res/ctxedit.css
@@ -94,10 +94,10 @@
     height: var(--strip-height);
     background-image: url(popup.svg);
     background-repeat: no-repeat;
+    background-position: left center;
     width: 120px;
     color: white;
     opacity: 0.6;
-    background-position: left center;
     padding-left: 20px;
     line-height: var(--strip-height);
     text-overflow: ellipsis;
diff --git a/docs/res/icons/close-black.svg b/docs/res/icons/close-black.svg
new file mode 100755
index 000000000..a67a2e22b
--- /dev/null
+++ b/docs/res/icons/close-black.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 8.707l4.646 4.647.708-.708L8.707 8l4.647-4.646-.708-.708L8 7.293 3.354 2.646l-.708.708L7.293 8l-4.647 4.646.708.708L8 8.707z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/close.svg b/docs/res/icons/close.svg
new file mode 100755
index 000000000..f6b7b196e
--- /dev/null
+++ b/docs/res/icons/close.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 8.707l4.646 4.647.708-.708L8.707 8l4.647-4.646-.708-.708L8 7.293 3.354 2.646l-.708.708L7.293 8l-4.647 4.646.708.708L8 8.707z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/dismiss-black.svg b/docs/res/icons/dismiss-black.svg
new file mode 100755
index 000000000..d359e4123
--- /dev/null
+++ b/docs/res/icons/dismiss-black.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 8.293L3.354 3.646l-.708.708L8 9.707l5.354-5.353-.708-.708L8 8.293zM14 13H2v-1h12v1z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/dismiss.svg b/docs/res/icons/dismiss.svg
new file mode 100755
index 000000000..427522b60
--- /dev/null
+++ b/docs/res/icons/dismiss.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 8.293L3.354 3.646l-.708.708L8 9.707l5.354-5.353-.708-.708L8 8.293zM14 13H2v-1h12v1z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/font-size-black.svg b/docs/res/icons/font-size-black.svg
new file mode 100755
index 000000000..fb0b9df50
--- /dev/null
+++ b/docs/res/icons/font-size-black.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.245 12l.37-1.084h1.95L4.935 12h1.052L4.11 6.91H3.068L1.191 12h1.054zM3.56 8.147h.06l.671 1.964H2.89l.671-1.964zM8.415 12l.822-2.335h3.64L13.698 12h1.108l-3.205-8.727h-1.09L7.306 12h1.108zm2.59-7.347h.103l1.436 4.074H9.57l1.436-4.074z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/font-size.svg b/docs/res/icons/font-size.svg
new file mode 100755
index 000000000..0dd5cfd61
--- /dev/null
+++ b/docs/res/icons/font-size.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.245 12l.37-1.084h1.95L4.935 12h1.052L4.11 6.91H3.068L1.191 12h1.054zM3.56 8.147h.06l.671 1.964H2.89l.671-1.964zM8.415 12l.822-2.335h3.64L13.698 12h1.108l-3.205-8.727h-1.09L7.306 12h1.108zm2.59-7.347h.103l1.436 4.074H9.57l1.436-4.074z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/letter-spacing-black.svg b/docs/res/icons/letter-spacing-black.svg
new file mode 100755
index 000000000..267c0ac62
--- /dev/null
+++ b/docs/res/icons/letter-spacing-black.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.415 12l.822-2.335h3.64L10.698 12h1.108L8.602 3.273h-1.09L4.306 12h1.108zm2.59-7.347h.103l1.436 4.074H6.57l1.436-4.074z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 14V2h1v12H0zm15 0V2h1v12h-1z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/letter-spacing.svg b/docs/res/icons/letter-spacing.svg
new file mode 100755
index 000000000..993435895
--- /dev/null
+++ b/docs/res/icons/letter-spacing.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.415 12l.822-2.335h3.64L10.698 12h1.108L8.602 3.273h-1.09L4.306 12h1.108zm2.59-7.347h.103l1.436 4.074H6.57l1.436-4.074z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 14V2h1v12H0zm15 0V2h1v12h-1z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/line-height-black.svg b/docs/res/icons/line-height-black.svg
new file mode 100755
index 000000000..04c1e66a9
--- /dev/null
+++ b/docs/res/icons/line-height-black.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.297 12l.762-2.14h3.32L10.14 12h1.015L8.22 4h-1l-2.94 8h1.016zm1.066-3l1.324-3.734h.063L9.074 9h-2.71z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H1V1h14v1zm0 13H1v-1h14v1z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/line-height.svg b/docs/res/icons/line-height.svg
new file mode 100755
index 000000000..627f62faa
--- /dev/null
+++ b/docs/res/icons/line-height.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.297 12l.762-2.14h3.32L10.14 12h1.015L8.22 4h-1l-2.94 8h1.016zm1.066-3l1.324-3.734h.063L9.074 9h-2.71z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H1V1h14v1zm0 13H1v-1h14v1z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/popup-black.svg b/docs/res/icons/popup-black.svg
new file mode 100755
index 000000000..4046411f2
--- /dev/null
+++ b/docs/res/icons/popup-black.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 3.293l3.354 3.353-.707.708L8 4.707 5.354 7.354l-.708-.708L8 3.293zm0 8L5.354 8.646l-.708.708L8 12.707l3.354-3.353-.707-.708L8 11.293z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/popup.svg b/docs/res/icons/popup.svg
new file mode 100755
index 000000000..eba6b62fe
--- /dev/null
+++ b/docs/res/icons/popup.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 3.293l3.354 3.353-.707.708L8 4.707 5.354 7.354l-.708-.708L8 3.293zm0 8L5.354 8.646l-.708.708L8 12.707l3.354-3.353-.707-.708L8 11.293z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/reset-black.svg b/docs/res/icons/reset-black.svg
new file mode 100755
index 000000000..b89b764bc
--- /dev/null
+++ b/docs/res/icons/reset-black.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.993.893L6.95 2.817l1.272.187A6 6 0 1 1 2 9h1a5 5 0 1 0 5.928-4.914l-.005.032-.79-.116A5.078 5.078 0 0 0 8 4v-.018L6.684 3.79l2.214 2.908-.796.606-3.287-4.319L9.459.047l.534.846z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/reset.svg b/docs/res/icons/reset.svg
new file mode 100755
index 000000000..e459c7571
--- /dev/null
+++ b/docs/res/icons/reset.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.993.893L6.95 2.817l1.272.187A6 6 0 1 1 2 9h1a5 5 0 1 0 5.928-4.914l-.005.032-.79-.116A5.078 5.078 0 0 0 8 4v-.018L6.684 3.79l2.214 2.908-.796.606-3.287-4.319L9.459.047l.534.846z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/settings-black.svg b/docs/res/icons/settings-black.svg
new file mode 100755
index 000000000..81365ff40
--- /dev/null
+++ b/docs/res/icons/settings-black.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H6V3h8v1zM4 4H2V3h2v1zm10 3H6V6h8v1zM4 7H2V6h2v1zm10 3H6V9h8v1zM4 10H2V9h2v1zm10 3H6v-1h8v1zM4 13H2v-1h2v1z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/settings.svg b/docs/res/icons/settings.svg
new file mode 100755
index 000000000..31ed727a1
--- /dev/null
+++ b/docs/res/icons/settings.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H6V3h8v1zM4 4H2V3h2v1zm10 3H6V6h8v1zM4 7H2V6h2v1zm10 3H6V9h8v1zM4 10H2V9h2v1zm10 3H6v-1h8v1zM4 13H2v-1h2v1z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/style-black.svg b/docs/res/icons/style-black.svg
new file mode 100755
index 000000000..0dd668a3d
--- /dev/null
+++ b/docs/res/icons/style-black.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 13V3h1v10H0zm3 0V3h2v10H3zm4 0V3h3v10H7zm5 0V3h4v10h-4z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/docs/res/icons/style.svg b/docs/res/icons/style.svg
new file mode 100755
index 000000000..ab0589a56
--- /dev/null
+++ b/docs/res/icons/style.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 13V3h1v10H0zm3 0V3h2v10H3zm4 0V3h3v10H7zm5 0V3h4v10h-4z" fill="#fff"/></svg>
\ No newline at end of file