From ec90e93e82855b33ee43a3396ef2e60b2673da1d Mon Sep 17 00:00:00 2001
From: Rasmus Andersson <rasmus@figma.com>
Date: Thu, 7 Feb 2019 18:18:10 -0800
Subject: [PATCH] website: dynamic metrics

---
 docs/dynmetrics/index.css  |  2 +-
 docs/dynmetrics/index.html | 64 +++++++++++++++++++++++++-------------
 docs/index.html            |  2 +-
 docs/res/base.js           |  2 +-
 4 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/docs/dynmetrics/index.css b/docs/dynmetrics/index.css
index cd9fb98cf..776b04b75 100644
--- a/docs/dynmetrics/index.css
+++ b/docs/dynmetrics/index.css
@@ -165,7 +165,7 @@ div.controls > h3 {
 div.controls > textarea {
   border: none;
   padding:16px;
-  height: 220px;
+  height: 240px;
   font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace;
   outline: none;
   resize: vertical;
diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html
index d6cbbc49a..2cfe09d7c 100644
--- a/docs/dynmetrics/index.html
+++ b/docs/dynmetrics/index.html
@@ -44,9 +44,9 @@ endfor
       line height = <num data-binding="var-l">1.4</num> × <const>z</const>
     </formula-->
     <formula title="Values for Inter">
-      <g><const title="Constant a">a</const> = <num data-binding="var-a">-0.038</num></g> &nbsp;&nbsp;
-      <g><const title="Constant b">b</const> = <num data-binding="var-b">0.161</num></g> &nbsp;&nbsp;
-      <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.12</num></g> &nbsp;&nbsp;
+      <g><const title="Constant a">a</const> = <num data-binding="var-a">-0.0223</num></g> &nbsp;&nbsp;
+      <g><const title="Constant b">b</const> = <num data-binding="var-b">0.185</num></g> &nbsp;&nbsp;
+      <g><const title="Constant c">c</const> = <num data-binding="var-c">-0.1745</num></g> &nbsp;&nbsp;
       <g><const>z</const> = font size</g>
     </formula>
   </p>
@@ -240,25 +240,45 @@ setIdealValues({
   // 40:  -0.034,
   // 80:  -0.034,
 
-  // 2019-02-06
-  6:    0.04,
+  // // 2019-02-06
+  // 6:    0.04,
+  // 7:    0.032,
+  // 8:    0.024,
+  // 9:    0.017,
+  // 10:   0.01,
+  // 11:   0.005,
+  // 12:   0,
+  // 13:  -0.004,
+  // 14:  -0.008,
+  // 15:  -0.011,
+  // 16:  -0.014,
+  // 17:  -0.017,
+  // 18:  -0.019,
+  // 20:  -0.023,
+  // 24:  -0.029,
+  // 30:  -0.034,
+  // 40:  -0.037,
+  // 80:  -0.038,
+
+  // 2019-02-07
+  6:    0.043,
   7:    0.032,
   8:    0.024,
-  9:    0.017,
+  9:    0.016,
   10:   0.01,
   11:   0.005,
   12:   0,
-  13:  -0.004,
-  14:  -0.008,
-  15:  -0.011,
-  16:  -0.014,
-  17:  -0.017,
-  18:  -0.019,
-  20:  -0.023,
-  24:  -0.029,
-  30:  -0.034,
-  40:  -0.037,
-  80:  -0.038,
+  13:  -0.0025,
+  14:  -0.006,
+  15:  -0.009,
+  16:  -0.011,
+  17:  -0.013,
+  18:  -0.014,
+  20:  -0.017,
+  24:  -0.019,
+  30:  -0.021,
+  40:  -0.022,
+  80:  -0.022,
 })
 
 
@@ -271,7 +291,8 @@ setIdealValues({
 // var a = -0.018, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20
 // var a = -0.017, b = 0.202, c = -0.175; // 2018-09-28
 // var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02
-var a = -0.038, b = 0.161, c = -0.12 // 2019-02-06
+// var a = -0.038, b = 0.161, c = -0.12 // 2019-02-06
+var a = -0.0223, b = 0.185, c = -0.1745 // 2019-02-07
 
 
 var l = 1.4
@@ -506,9 +527,10 @@ function updateIdealMatches() {
 function updateGraphPlot() {
   graph.clear()
   graph.plotLine(idealValuesList, '#0d3')
-  graph.plotf(function(x) {
-    return _InterDynamicTracking(x, weightClass)
-  })
+  graph.plotf(
+    x => _InterDynamicTracking(x, weightClass),
+    'rgba(0, 0, 0, 0.5)'
+  )
   if (focusedSample) {
     var graphedFontSize = Math.min(24, focusedSample.fontSize) // clamp to [-inf,24]
     graph.plotPoints([
diff --git a/docs/index.html b/docs/index.html
index 4a9ee17bc..08a30dbbc 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -73,7 +73,7 @@ html { font-family: 'Inter', sans-serif; }
   <h2 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h2>
   <p class="dynmet-calc">
     Size
-    <input id="dynmet-font-size" type="number" value="16"
+    <input id="dynmet-font-size" type="number" value="16" min="4" max="99"
     ><span title='Display points — "px" in CSS, "pt" on iOS, "sp" on Android, and "pt" (1/72 of an inch) in print'>dp</span>
     <span class="arrow">=</span>
     <span title='letter-spacing in CSS; also called "tracking" in some software.'>spacing
diff --git a/docs/res/base.js b/docs/res/base.js
index 05e98a7ff..20cf6734d 100644
--- a/docs/res/base.js
+++ b/docs/res/base.js
@@ -81,7 +81,7 @@ var HUDNotification = {
 // the compensating tracking in EM.
 //
 function InterDynamicTracking(fontSize) {
-  var a = -0.038, b = 0.161, c = -0.12;
+  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)
 }