diff options
author | Rasmus Andersson <rasmus@notion.se> | 2019-01-06 22:56:06 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2019-01-06 22:56:06 +0300 |
commit | 897201a74d12b12d4d2d5cff8d2f310d9f5b2a44 (patch) | |
tree | b60b199a31539308e2b338ed35bb2f6c9a4cbc12 /docs | |
parent | 3f554a92ac41979a75059492331b09440a9ab74e (diff) | |
download | inter-897201a74d12b12d4d2d5cff8d2f310d9f5b2a44.tar.xz |
website: expose light weights in samples and dynmetrics
Diffstat (limited to 'docs')
-rw-r--r-- | docs/_includes/ctxedit.html | 8 | ||||
-rw-r--r-- | docs/dynmetrics/index.html | 18 | ||||
-rw-r--r-- | docs/res/base.css | 30 | ||||
-rw-r--r-- | docs/res/ctxedit.js | 7 |
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' } |