website: expose light weights in samples and dynmetrics

2 files changed, 25 insertions, 12 deletions

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' }