website: expose light weights in samples and dynmetrics

4 files changed, 44 insertions, 19 deletions

diff --git a/docs/_includes/ctxedit.html b/docs/_includes/ctxedit.html
index a157a9f65..fb2da692b 100644
--- a/docs/_includes/ctxedit.html
+++ b/docs/_includes/ctxedit.html
@@ -20,7 +20,13 @@ endfor
   <div class="wrapper">
     <div class="control popup">
       <select data-binding="style">
-        <option value="regular" default>Regular</option>
+        <option value="thin">Thin</option>
+        <option value="thin-italic">Thin Italic</option>
+        <option value="extra-light">Extra Light</option>
+        <option value="extra-light-italic">Extra Light Italic</option>
+        <option value="light">Light</option>
+        <option value="light-italic">Light Italic</option>
+        <option value="regular" default selected>Regular</option>
         <option value="italic">Italic</option>
         <option value="medium">Medium</option>
         <option value="medium-italic">Medium Italic</option>
diff --git a/docs/dynmetrics/index.html b/docs/dynmetrics/index.html
index 06d579dca..2ab774eda 100644
--- a/docs/dynmetrics/index.html
+++ b/docs/dynmetrics/index.html
@@ -85,17 +85,23 @@ endfor
     <div class="control">
       <img title="Style" class="icon" src="../samples/icons/style.svg">
       <select data-binding="style">
-        <option value="regular" default>Regular</option>
+        <option value="thin">Thin</option>
+        <option value="thin-italic">Thin Italic</option>
+        <option value="extra-light">Extra Light</option>
+        <option value="extra-light-italic">Extra Light Italic</option>
+        <option value="light">Light</option>
+        <option value="light-italic">Light Italic</option>
+        <option value="regular" default selected>Regular</option>
         <option value="italic">Italic</option>
-        <option value="medium" default>Medium</option>
+        <option value="medium">Medium</option>
         <option value="medium-italic">Medium Italic</option>
-        <option value="semi-bold" default>Semi Bold</option>
+        <option value="semi-bold">Semi Bold</option>
         <option value="semi-bold-italic">Semi Bold Italic</option>
-        <option value="bold" default>Bold</option>
+        <option value="bold">Bold</option>
         <option value="bold-italic">Bold Italic</option>
-        <option value="extra-bold" default>Extra Bold</option>
+        <option value="extra-bold">Extra Bold</option>
         <option value="extra-bold-italic">Extra Bold Italic</option>
-        <option value="black" default>Black</option>
+        <option value="black">Black</option>
         <option value="black-italic">Black Italic</option>
       </select>
     </div>
diff --git a/docs/res/base.css b/docs/res/base.css
index a2667af84..0b764f665 100644
--- a/docs/res/base.css
+++ b/docs/res/base.css
@@ -27,18 +27,24 @@ body {
 
 /* Font style classifiers used by samples and dynmetrics */
 /* Note: font-variation-settings is needed for Safari. */
-.font-style-regular           { font-variation-settings: "wght" 400, "slnt" 0   !important; font-weight:400 !important; font-style:normal !important; }
-.font-style-italic            { font-variation-settings: "wght" 400, "slnt" 100 !important; font-weight:400 !important; font-style:oblique !important; }
-.font-style-medium            { font-variation-settings: "wght" 500, "slnt" 0   !important; font-weight:500 !important; font-style:normal !important; }
-.font-style-medium-italic     { font-variation-settings: "wght" 500, "slnt" 100 !important; font-weight:500 !important; font-style:oblique !important; }
-.font-style-semi-bold         { font-variation-settings: "wght" 600, "slnt" 0   !important; font-weight:600 !important; font-style:normal !important; }
-.font-style-semi-bold-italic  { font-variation-settings: "wght" 600, "slnt" 100 !important; font-weight:600 !important; font-style:oblique !important; }
-.font-style-bold              { font-variation-settings: "wght" 700, "slnt" 0   !important; font-weight:700 !important; font-style:normal !important; }
-.font-style-bold-italic       { font-variation-settings: "wght" 700, "slnt" 100 !important; font-weight:700 !important; font-style:oblique !important; }
-.font-style-extra-bold        { font-variation-settings: "wght" 800, "slnt" 0   !important; font-weight:800 !important; font-style:normal !important; }
-.font-style-extra-bold-italic { font-variation-settings: "wght" 800, "slnt" 100 !important; font-weight:800 !important; font-style:oblique !important; }
-.font-style-black             { font-variation-settings: "wght" 900, "slnt" 0   !important; font-weight:900 !important; font-style:normal !important; }
-.font-style-black-italic      { font-variation-settings: "wght" 900, "slnt" 100 !important; font-weight:900 !important; font-style:oblique !important; }
+.font-style-thin               { font-variation-settings: "wght" 100, "slnt" 0   !important; font-weight:100 !important; font-style:normal !important; }
+.font-style-thin-italic        { font-variation-settings: "wght" 100, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; }
+.font-style-extra-light        { font-variation-settings: "wght" 200, "slnt" 0   !important; font-weight:100 !important; font-style:normal !important; }
+.font-style-extra-light-italic { font-variation-settings: "wght" 200, "slnt" 100 !important; font-weight:100 !important; font-style:oblique !important; }
+.font-style-light              { font-variation-settings: "wght" 300, "slnt" 0   !important; font-weight:300 !important; font-style:normal !important; }
+.font-style-light-italic       { font-variation-settings: "wght" 300, "slnt" 100 !important; font-weight:300 !important; font-style:oblique !important; }
+.font-style-regular            { font-variation-settings: "wght" 400, "slnt" 0   !important; font-weight:400 !important; font-style:normal !important; }
+.font-style-italic             { font-variation-settings: "wght" 400, "slnt" 100 !important; font-weight:400 !importants; font-style:oblique !important; }
+.font-style-medium             { font-variation-settings: "wght" 500, "slnt" 0   !important; font-weight:500 !important; font-style:normal !important; }
+.font-style-medium-italic      { font-variation-settings: "wght" 500, "slnt" 100 !important; font-weight:500 !important; font-style:oblique !important; }
+.font-style-semi-bold          { font-variation-settings: "wght" 600, "slnt" 0   !important; font-weight:600 !important; font-style:normal !important; }
+.font-style-semi-bold-italic   { font-variation-settings: "wght" 600, "slnt" 100 !important; font-weight:600 !important; font-style:oblique !important; }
+.font-style-bold               { font-variation-settings: "wght" 700, "slnt" 0   !important; font-weight:700 !important; font-style:normal !important; }
+.font-style-bold-italic        { font-variation-settings: "wght" 700, "slnt" 100 !important; font-weight:700 !important; font-style:oblique !important; }
+.font-style-extra-bold         { font-variation-settings: "wght" 800, "slnt" 0   !important; font-weight:800 !important; font-style:normal !important; }
+.font-style-extra-bold-italic  { font-variation-settings: "wght" 800, "slnt" 100 !important; font-weight:800 !important; font-style:oblique !important; }
+.font-style-black              { font-variation-settings: "wght" 900, "slnt" 0   !important; font-weight:900 !important; font-style:normal !important; }
+.font-style-black-italic       { font-variation-settings: "wght" 900, "slnt" 100 !important; font-weight:900 !important; font-style:oblique !important; }
 
 @supports (font-variation-settings: normal) {
   body {
diff --git a/docs/res/ctxedit.js b/docs/res/ctxedit.js
index 2f2b52574..54243ad59 100644
--- a/docs/res/ctxedit.js
+++ b/docs/res/ctxedit.js
@@ -48,14 +48,21 @@ class FontStyleProp {
   valueInStyle(s) {
     let italic = s['font-style'] == 'italic' || s['font-style'].indexOf('oblique') != -1
     let weight = parseFloat(s['font-weight'])
+    console.log("s['font-weight']:", s['font-weight'])
     if (isNaN(weight)) {
       weight = s['font-weight']
+      if (weight == 'thin') {       return italic ? 'thin-italic' :       'thin' }
+      if (weight == 'extra-light') {return italic ? 'extra-light-italic' :'extra-light' }
+      if (weight == 'light') {      return italic ? 'light-italic' :      'light' }
       if (weight == 'normal') {     return italic ? 'italic' :            'regular' }
       if (weight == 'medium') {     return italic ? 'medium-italic' :     'medium' }
       if (weight == 'semi-bold') {  return italic ? 'semi-bold-italic' :  'semi-bold' }
       if (weight == 'bold') {       return italic ? 'bold-italic' :       'bold' }
       if (weight == 'extra-bold') { return italic ? 'extra-bold-italic' : 'extra-bold' }
     } else {
+      if (weight <= 150) { return italic ? 'thin-italic' :       'thin' }
+      if (weight <= 250) { return italic ? 'extra-light-italic' :'extra-light' }
+      if (weight <= 350) { return italic ? 'light-italic' :      'light' }
       if (weight <= 450) { return italic ? 'italic' :            'regular' }
       if (weight <= 550) { return italic ? 'medium-italic' :     'medium' }
       if (weight <= 650) { return italic ? 'semi-bold-italic' :  'semi-bold' }