From ce23d40a41c2b886130a8cca20002c912ef477fa Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Tue, 20 Jun 2023 14:12:06 +0200
Subject: [PATCH 01/19] UI: stylelintrc.cjs: disable "font-family-name-quotes"
 to allow quoted font names

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/stylelintrc.cjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/stylelintrc.cjs b/ui/stylelintrc.cjs
index 7f1239c5..16ca8af6 100644
--- a/ui/stylelintrc.cjs
+++ b/ui/stylelintrc.cjs
@@ -10,6 +10,7 @@ module.exports = {
     "custom-property-empty-line-before": null,
     "declaration-block-no-shorthand-property-overrides": null,
     "declaration-empty-line-before": null,
+    "font-family-name-quotes": null,
     "length-zero-no-unit": null,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,

From 93d99c295e2482092b140b10dc57a5561fa2764d Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Tue, 20 Jun 2023 13:43:01 +0200
Subject: [PATCH 02/19] UI: Makefile.mk: download InterVariable.woff2

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/Makefile.mk | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui/Makefile.mk b/ui/Makefile.mk
index 89dd808a..bd1c8641 100644
--- a/ui/Makefile.mk
+++ b/ui/Makefile.mk
@@ -233,12 +233,17 @@ $(ui/cjs.targets): $>/ui/%.cjs: ui/%.js	| $>/ui/b/
 $>/ui/.build1-stamp: $(ui/cjs.targets)
 
 # == Inter Typeface ==
-$>/ui/fonts/Inter-Medium.woff2: ui/Makefile.mk		| $>/ui/fonts/
+$>/ui/fonts/InterVariable.woff2: ui/Makefile.mk		| $>/ui/fonts/
 	$(QECHO) FETCH Inter Typeface
-	$Q cd $(@D) $(call foreachpair, AND_DOWNLOAD_SHAURL, \
-		9cd56084faa8cc5ee75bf6f3d01446892df88928731ee9321e544a682aec55ef https://github.com/rsms/inter/raw/v3.10/docs/font-files/Inter-Medium.woff2 )
+	$Q $(RM) -r $>/ui/fonts/tmp-inter/ && mkdir $>/ui/fonts/tmp-inter/
+	$Q cd $>/ui/fonts/tmp-inter/ $(call foreachpair, AND_DOWNLOAD_SHAURL, \
+		41b1253ed9b5e9cb5093249c8dd71f0094cb4dfb4ef92ec69125fcb90566e4c7 https://github.com/rsms/inter/releases/download/v4.0-beta9g/Inter-4.0-beta9g.zip )
+	$Q cd $>/ui/fonts/tmp-inter/ \
+		&& unzip -q Inter-4.0-beta9g.zip \
+		&& mv web/InterVariable.woff2 ..
+	$Q $(RM) -r $>/ui/fonts/tmp-inter/
 	$Q touch $@
-$>/ui/.build1-stamp: $>/ui/fonts/Inter-Medium.woff2
+$>/ui/.build1-stamp: $>/ui/fonts/InterVariable.woff2
 
 # == AnklangIcons ==
 $>/ui/fonts/AnklangIcons.css: ui/Makefile.mk		| $>/ui/fonts/

From e1a9791a75c1f77d5aa5a9b46a2935fb524e3626 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Wed, 21 Jun 2023 19:18:58 +0200
Subject: [PATCH 03/19] UI: b/icon.js: add small comment

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/b/icon.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/b/icon.js b/ui/b/icon.js
index 540501f8..8dab614b 100644
--- a/ui/b/icon.js
+++ b/ui/b/icon.js
@@ -82,6 +82,7 @@ class BIcon extends LitComponent {
   createRenderRoot()
   {
     Util.add_style_sheet (this, STYLE_URL);
+    // icon fonts must be loaded into document and shadowRoot ancestors
     Util.add_style_sheet (this, '/fonts/AnklangIcons.css');
     Util.add_style_sheet (this, '/fonts/material-icons.css');
     Util.add_style_sheet (this, '/fonts/forkawesome-webfont.css');

From c2e9ed3909eace60c459132e837303f10710e68f Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Wed, 21 Jun 2023 15:52:29 +0200
Subject: [PATCH 04/19] UI: index.html: cleanup preloads, add @font-face for
 "InterVariable"

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/index.html | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 46af956c..fa246e53 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -27,17 +27,18 @@
   <link rel="modulepreload" href="./b/shell.js">
   <link rel="modulepreload" href="./b/piano-ctrl.js">
   <link rel="modulepreload" href="./b/envue.js">
-  <link rel="stylesheet" href="./globals.css">
-  <link rel="stylesheet" href="./vue-styles.css">
-  <link rel="preload" href="/fonts/Inter-Medium.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="stylesheet" href="/fonts/AnklangIcons.css">
-  <link rel="preload" href="/fonts/AnklangIcons.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="stylesheet" href="/fonts/material-icons.css">
-  <link rel="preload" href="/fonts/material-icons.woff2" as="font" type="font/woff2" crossorigin>
-  <link rel="stylesheet" href="/fonts/forkawesome-webfont.css">
-  <link rel="preload" href="/fonts/forkawesome-webfont.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" as="style" href="shadow.css">
+  <link rel="preload" as="style" href="fonts/AnklangIcons.css">
+  <link rel="preload" as="style" href="fonts/material-icons.css">
+  <link rel="preload" as="style" href="fonts/forkawesome-webfont.css">
   <link rel="preload" as="image" href="assets/spinner.svg">
+  <link rel="preload" as="font" href="fonts/AnklangIcons.woff2" type="font/woff2" crossorigin>
+  <link rel="preload" as="font" href="fonts/material-icons.woff2" type="font/woff2" crossorigin>
+  <link rel="preload" as="font" href="fonts/forkawesome-webfont.woff2" type="font/woff2" crossorigin>
+  <link rel="preload" as="font" href="fonts/InterVariable.woff2" type="font/woff2" crossorigin>
+  <style> @font-face { font-family: "InterVariable"; font-display: swap; src: url("fonts/InterVariable.woff2") format("woff2-variations"); } </style>
+  <link rel="stylesheet" href="globals.css">
+  <link rel="stylesheet" href="vue-styles.css">
   <script type='application/json' id='--EMBEDD-config_json'>
   </script>
   <script> { "use strict"; // Early globals

From ecf133d3495722c9b041bd729122e35d92045d6a Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Wed, 21 Jun 2023 15:54:35 +0200
Subject: [PATCH 05/19] UI: globals.scss: leave font-face defs to index.html

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/globals.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/ui/globals.scss b/ui/globals.scss
index 7689fbb6..ba3393e4 100644
--- a/ui/globals.scss
+++ b/ui/globals.scss
@@ -6,11 +6,6 @@
 // CSS cursor variables
 @import url('cursors/cursors.css');
 
-/* Fonts */
-@font-face { font-family: Inter; font-display: swap;
-	     font-style: normal; font-weight: 500;
-	     src: url("/fonts/Inter-Medium.woff2") format("woff2"); }
-
 // Globals
 html {
   font: $b-html-font;

From 322d886279e5f693ffe8d595b3c7744ebefffee3 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Tue, 20 Jun 2023 14:05:59 +0200
Subject: [PATCH 06/19] UI: dark.scss: configure b-ui-font() for
 "InterVariable" in InterDisplay style

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/dark.scss | 53 ++++++++++++++++++----------------------------------
 1 file changed, 18 insertions(+), 35 deletions(-)

diff --git a/ui/dark.scss b/ui/dark.scss
index 69a85799..f92f47bb 100644
--- a/ui/dark.scss
+++ b/ui/dark.scss
@@ -1,41 +1,24 @@
 /* This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 */
 
 /* Fonts */
-$b-font-family: 'Inter';
-$b-font-size: 16px;			/* for <html/> */
-$b-font-variant-numeric: tabular-nums;	/* slashed-zero */
-$b-font-variation-settings: "wght" 450;	/* "slnt" 0deg */
-$b-font-feature-settings:
-  "dlig" 1,     /* Discretionary ligatures, e.g. !? -> interrobang */
-  // "tnum",    /* Tabular numbers (fixed width); use font-variant-numeric: tabular-nums; */
-  "salt" 0,     /* Stylistic Alternates */
-  "ss01" 0,     /* Stylistic set 1 "Open Digits" */
-  "ss02" 0,     /* Stylistic set 2 "Disambiguation" */
-  "ss03" 0,     /* Stylistic set 3 "Lower case r curves into round neighbors" */
-  // "zero",    /* Slashed zero; use font-variant-numeric: slashed-zero; */
-  "numr" 0,     /* Numerators */
-  "dnom" 0,     /* Denominators */
-  "case" 1,     /* Case alternates */
-  "frac" 0,     /* Contextual automatic fractions */
-  "sups" 0,     /* Superscript */
-  "subs" 0,     /* Subscript */
-  "cpsp" 0,     /* Capital spacing (adds 16 UPM to each sidebearing) */
-  "cv01" 1,     /* Alternate one */
-  "cv02" 1,     /* Open four */
-  "cv03" 1,     /* Open six */
-  "cv04" 1,     /* Open nine */
-  "cv05" 1,     /* Lower case L with tail */
-  "cv06" 1,     /* Lower case r with curved tail */
-  "cv07" 0,     /* Alternate German double-s */
-  "cv08" 1,     /* Upper-case i with serif */
-  "cv09" 0,     /* Flat top three */
-  "cv10" 1,     /* Capital G with spur */
-  "cv11" 0,     /* Single-storey a */
-  "calt",       /* Contextual alternates (default) */
-  "liga",       /* Common ligatures (default, none in Inter) */
-  "kern";       /* Kerning (default) */
-$b-html-font: normal var(--font-size) var(--font-family);
-$b-piano-font: normal calc(var(--font-size)*9/16) var(--font-family);
+$b-canvas-font: normal 9px "InterVariable";	// the '9px' part is dynamically resized
+@mixin b-ui-font() {
+  font-family: "InterVariable";
+  font-size: 15.5px;
+  letter-spacing: 0.03em;
+  text-decoration: none;
+  text-transform: none;
+  font-variant-numeric: tabular-nums slashed-zero;
+  font-feature-settings: "case", "cpsp", "dlig" 0, "frac" 0, "dnom" 0, "numr" 0, "salt" 0, "subs" 0, "sups" 0,
+			 "tnum", "zero", "ss01", "ss02", "ss03" 0, "ss04" 0,
+			 "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06", "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "cv11" 0,
+			 "liga", "calt", "ccmp", "kern";
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+  font-variation-settings: "opsz" 28;
+  // Note, combining font-variation-settings with var()/slot/shadowRoot tends to lack support for live updates in Chrome and FF
+  // Also, specifying font-variation-settings in @font-face has no effect in Chrome 114
+}
 
 /* Colors */
 $b-color-scheme: dark;	/* only normal light dark */

From 9e99536b06a61006979957b8f9136fd0b8cf2fd8 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Tue, 20 Jun 2023 14:10:48 +0200
Subject: [PATCH 07/19] UI: globals.scss: make use of b-ui-font()

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/globals.scss | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/ui/globals.scss b/ui/globals.scss
index ba3393e4..a3067498 100644
--- a/ui/globals.scss
+++ b/ui/globals.scss
@@ -8,13 +8,11 @@
 
 // Globals
 html {
-  font: $b-html-font;
-  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-  letter-spacing: 0.011em;
-  font-variation-settings: var(--font-variation-settings);
-  font-feature-settings: var(--font-feature-settings);
-  font-variant-numeric: var(--font-variant-numeric);
+  @include b-ui-font();
   color-scheme: $b-color-scheme;
+  // Scrollbars
+  @include firefox-scrollbars();
+  @include chrome-scrollbars();
 }
 
 html, body {
@@ -35,12 +33,6 @@ body {
   }
 }
 
-// Scrollbars
-html {
-  @include firefox-scrollbars();
-  @include chrome-scrollbars();
-}
-
 // Button
 button, push-button {
   // button shading

From b56b7d2df0c9759a955ac49ca3cdaaa586794a88 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Wed, 21 Jun 2023 15:54:53 +0200
Subject: [PATCH 08/19] UI: shadow.scss: use b-ui-font() inside shadow DOMs

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/shadow.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/shadow.scss b/ui/shadow.scss
index 181626f7..c4459bf7 100644
--- a/ui/shadow.scss
+++ b/ui/shadow.scss
@@ -7,6 +7,7 @@
 
 // Scrollbars
 :host {
+  @include b-ui-font();
   // @include firefox-scrollbars(); // FF scrollbar-color is inherited
   @include chrome-scrollbars();
 }

From 997543b6eea7c125612e4603bef87670c6abda83 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Tue, 20 Jun 2023 14:07:26 +0200
Subject: [PATCH 09/19] UI: b/clipview.js: use b-canvas-font

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/b/clipview.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/b/clipview.js b/ui/b/clipview.js
index 15dcc1e8..5f71d640 100644
--- a/ui/b/clipview.js
+++ b/ui/b/clipview.js
@@ -14,7 +14,6 @@ JsExtract.scss`
   display: inline-grid;
   margin: 0 0 0 2px;
 }
-$b-clipview-font: normal 9px $b-theme-font-family !default;    // the '9px' part is dynamically resized
 $b-clipview-font-color: rgba(255, 255, 255, 0.7) !default;
 $b-clipview-note-color: rgba(255, 255, 255, 0.7) !default;
 $b-clipview-color-hues: 75, 177, 320, 225, 45, 111, 5, 259, 165, 290;
@@ -25,7 +24,7 @@ $b-clipview-color-hues: 75, 177, 320, 225, 45, 111, 5, 259, 165, 290;
   border: 0;
   .-canvas {
     display: inline; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
-    --clipview-font-color: #{$b-clipview-font-color}; --clipview-font: #{$b-clipview-font};
+    --clipview-font-color: #{$b-clipview-font-color}; --clipview-font: #{$b-canvas-font};
     --clipview-note-color: #{$b-clipview-note-color};
     --clipview-color-hues: $b-clipview-color-hues;
     box-shadow: inset 0px 0 1px #fff9, inset -1px 0 1px #000;

From 78e9afb75874fe932571642bfa76b33a5ac8afe3 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Tue, 20 Jun 2023 14:07:43 +0200
Subject: [PATCH 10/19] UI: b/partthumb.vue: use b-canvas-font

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/b/partthumb.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/b/partthumb.vue b/ui/b/partthumb.vue
index fc22c13a..6532efa8 100644
--- a/ui/b/partthumb.vue
+++ b/ui/b/partthumb.vue
@@ -12,14 +12,13 @@
 
 <style lang="scss">
 .b-partthumb {
-  $b-partthumb-font: normal 9px $b-theme-font-family !default;	// the '9px' part is dynamically resized
   $b-partthumb-font-color: rgba(255, 255, 255, 0.7) !default;
   $b-partthumb-note-color: rgba(255, 255, 255, 0.7) !default;
   $b-partthumb-colors: #ff7b50a7, #f68403a7, #d6960ea7, #92ad19a7, #67b518a7, #22bb27a7, #21b873a7, #24b3b3a7, #11adeba7, #799fffa7, #a094ffa7, #c287ffa7, #e473ffa7, #ff5ff5a7, #ff70b0a7 !default;
   display: inline-block; position: absolute; top: 0px; bottom: 0px;
   height: $b-trackrow-height;
   border-radius: calc($b-button-radius * 0.66);
-  --partthumb-font-color: $b-partthumb-font-color; --partthumb-font: $b-partthumb-font;
+  --partthumb-font-color: $b-partthumb-font-color; --partthumb-font: $b-canvas-font;
   --partthumb-note-color: $b-partthumb-note-color; --partthumb-colors: $b-partthumb-colors;
   background-color: #222;
   box-shadow: inset 0px 0 1px #fff9, inset -1px 0 1px #000;

From 290f583eeed90f0ab6b193ad90dafd4192b778b4 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Tue, 20 Jun 2023 14:07:55 +0200
Subject: [PATCH 11/19] UI: b/pianoroll.js: use b-canvas-font

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/b/pianoroll.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/b/pianoroll.js b/ui/b/pianoroll.js
index 72cda375..537ff8f3 100644
--- a/ui/b/pianoroll.js
+++ b/ui/b/pianoroll.js
@@ -40,7 +40,7 @@ JsExtract.scss`
   --piano-roll-black-glint:  zmod($b-piano-roll-black-base, Jz+=14.3);  // highlight on piano key
   --piano-roll-black-shine:  zmod($b-piano-roll-black-base, Jz+=33.5);  // reflection on piano key
 
-  --piano-roll-font:                  $b-piano-roll-font;
+  --piano-roll-font:                  $b-canvas-font;
   --piano-roll-num-color:             $b-piano-roll-num-color;
   --piano-roll-note-color:            $b-piano-roll-note-color;
   --piano-roll-note-focus-color:      $b-piano-roll-note-focus-color;

From 3300e93beb238943d6cf04938b120191ab6b12e8 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Tue, 20 Jun 2023 14:10:25 +0200
Subject: [PATCH 12/19] UI: elements.scss: leave font handling to theme,
 globals and shadow

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/elements.scss | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/ui/elements.scss b/ui/elements.scss
index e328b451..d8d94e33 100644
--- a/ui/elements.scss
+++ b/ui/elements.scss
@@ -11,21 +11,13 @@
   -moz-appearance: none;
 }
 
-/* Fonts */
-:root {
-  --font-size: $b-font-size;
-  --font-variation-settings: $b-font-variation-settings;
-  --font-feature-settings: $b-font-feature-settings;
-  --font-variant-numeric: $b-font-variant-numeric;
-}
-
 // Italic, bold, numbers
 input, textarea, keygen, select, button	{ font: inherit; }
 // button				{ -webkit-appearance: normal; }
 .italic, i, cite, em, var, address, dfn { font-style: italic; }
 strong, b, h1, h2, h3, h4, h5, h6, th, ::-webkit-validation-bubble-heading,
-.bold					{ letter-spacing: 0.031em; font-weight: bold; }
-.bolder, optgroup			{ letter-spacing: 0.031em; font-weight: bolder; }
+.bold					{ --font-weight: 700; }
+.bolder, optgroup			{ --font-weight: 850; }
 .tabular-nums				{ font-variant-numeric: tabular-nums; }
 .slashed-zero				{ font-variant-numeric: slashed-zero; }
 plaintext, listing, xmp, input:-webkit-autofill-strong-password, .tnum, .code, tt, pre, code, kbd, samp,

From 732ab4756d2849644ef8ad3a6bdf1f473e6b025c Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Wed, 21 Jun 2023 18:27:09 +0200
Subject: [PATCH 13/19] UI: b/menutitle.js: use drop-caps while
 InterVariable-4.0 small-caps are broken

See also: https://github.com/rsms/inter/issues/556#issuecomment-1598010623

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/b/menutitle.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/ui/b/menutitle.js b/ui/b/menutitle.js
index 71bd5f68..ed71e916 100644
--- a/ui/b/menutitle.js
+++ b/ui/b/menutitle.js
@@ -1,6 +1,7 @@
 // This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
 
 import { LitComponent, html, JsExtract, docs } from '../little.js';
+import * as Util from "../util.js";
 
 /** # B-MENUTITLE
  * An element to be used as menu title.
@@ -10,7 +11,7 @@ import { LitComponent, html, JsExtract, docs } from '../little.js';
  */
 
 // == STYLE ==
-const STYLE = await JsExtract.fetch_css (import.meta);
+const STYLE_URL = await JsExtract.css_url (import.meta);
 JsExtract.scss`
 @import 'mixins.scss';
 :host { // b-menutitle
@@ -21,19 +22,30 @@ JsExtract.scss`
   border: 1px solid transparent;
   color: $b-menu-foreground;
   font-variant: small-caps; font-weight: bolder;
+  // InterVariable-4.0beta9 has broken c2sc (small-caps), so for now use drop-caps
+  // https://github.com/rsms/inter/issues/556#issuecomment-1598010623
+  text-transform: uppercase; font-size: 80%;
+  ::first-letter {
+    font-size: 130%;
+  }
 }
 `;
 
 // == HTML ==
 const HTML = html`
 <div class="b-menutitle">
-<span class="menulabel"><slot /></span>
+  <span class="menulabel"><slot /></span>
 </div>
 `;
 
 // == SCRIPT ==
 class BMenuTitle extends LitComponent {
   render = () => HTML;
-  static styles = [ STYLE ];
+  createRenderRoot()
+  {
+    const rroot = super.createRenderRoot();
+    Util.add_style_sheet (rroot, STYLE_URL);
+    return rroot;
+  }
 }
 customElements.define ('b-menutitle', BMenuTitle);

From ee27d939ebc15be2cb679bd9cb17dec1d213dd78 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Thu, 22 Jun 2023 03:01:44 +0200
Subject: [PATCH 14/19] UI: dark.scss: define
 b-font-weight-{normal|bold|bolder} mixins

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/dark.scss | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/ui/dark.scss b/ui/dark.scss
index f92f47bb..d3d5475c 100644
--- a/ui/dark.scss
+++ b/ui/dark.scss
@@ -13,12 +13,22 @@ $b-canvas-font: normal 9px "InterVariable";	// the '9px' part is dynamically res
 			 "tnum", "zero", "ss01", "ss02", "ss03" 0, "ss04" 0,
 			 "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06", "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "cv11" 0,
 			 "liga", "calt", "ccmp", "kern";
-  font-weight: 500;
   -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-  font-variation-settings: "opsz" 28;
+  @include b-font-weight-normal();
   // Note, combining font-variation-settings with var()/slot/shadowRoot tends to lack support for live updates in Chrome and FF
   // Also, specifying font-variation-settings in @font-face has no effect in Chrome 114
+  font-variation-settings: "opsz" 28; // 14=Inter, 28=InterDisplay
 }
+@mixin b-font-weight-normal() {
+  // Inter may be too thin at regular weight (font-weight=400) for low contrast scenarios, so use 500.
+  // @media (prefers-color-scheme: light) { font-weight: 500; }
+  // However, in dark-mode fonts can appear thicker, which is why fonts like [Darkmode On](fonts.adobe.com/fonts/darkmode-on)
+  // reduce thickness in dark mode compared to light mode to ca 90%. For Inter weights, a stepping from 400 -> 500 equates
+  // roughly a thickness increases of 20%. So for dark mode, we use 450.
+  font-weight: 450;
+}
+@mixin b-font-weight-bold()   { font-weight: 700; }
+@mixin b-font-weight-bolder() { font-weight: 850; }
 
 /* Colors */
 $b-color-scheme: dark;	/* only normal light dark */

From 22b8985f656623a0c832907adfe50e07b8c86592 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Thu, 22 Jun 2023 03:07:34 +0200
Subject: [PATCH 15/19] UI: b/*.vue, b/*.js: use b-font-weight-bold() and its
 variants

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/b/aboutdialog.vue | 3 ++-
 ui/b/dialog.vue      | 3 ++-
 ui/b/fed-object.vue  | 6 +++---
 ui/b/folderview.vue  | 2 +-
 ui/b/menuitem.js     | 2 +-
 ui/b/menutitle.js    | 2 +-
 ui/b/more.js         | 2 +-
 ui/b/statusbar.vue   | 2 +-
 8 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/ui/b/aboutdialog.vue b/ui/b/aboutdialog.vue
index 75a81551..715de482 100644
--- a/ui/b/aboutdialog.vue
+++ b/ui/b/aboutdialog.vue
@@ -17,7 +17,8 @@
   }
   .b-aboutdialog .b-aboutdialog-header {
     grid-column: 1;
-    text-align: right; vertical-align: top; font-weight: bold;
+    text-align: right; vertical-align: top;
+    @include b-font-weight-bold();
     padding-right: .5em; min-width: 15em; }
   .b-aboutdialog .b-aboutdialog-field {
     grid-column: 2;
diff --git a/ui/b/dialog.vue b/ui/b/dialog.vue
index 3a720ab2..ae1d4479 100644
--- a/ui/b/dialog.vue
+++ b/ui/b/dialog.vue
@@ -59,7 +59,8 @@
     }
   }
   .-header {
-    font-size: 1.5em; font-weight: bold;
+    font-size: 1.5em;
+    @include b-font-weight-bold();
     justify-content: space-evenly;
     padding-bottom: 0.5em;
     border-bottom: 1px solid $b-modal-bordercol;
diff --git a/ui/b/fed-object.vue b/ui/b/fed-object.vue
index f83ba23f..cf69d0c5 100644
--- a/ui/b/fed-object.vue
+++ b/ui/b/fed-object.vue
@@ -20,7 +20,7 @@
 <style lang="scss">
   .b-fed-object		{
     .b-fed-object-clear	{
-      -font-size: 1.1em; -font-weight: bolder;
+      -font-size: 1.1em; // @include b-font-weight-bolder();
       color: #888; background: none; padding: 0 0 0 0.5em; margin: 0;
       outline: none; border: 1px solid rgba(0,0,0,0); border-radius: $b-button-radius;
       &:hover			{ color: #eb4; }
@@ -36,7 +36,7 @@
       margin-top: 0.5em;
       &:first-child { margin-top: 0; }
       white-space: nowrap;
-      .-label { text-overflow: ellipsis; overflow: hidden; }
+      .-label { text-overflow: ellipsis; overflow: hidden; @include b-font-weight-bold(); }
     }
     .-flabel {
       padding: 0 0.1em 0 0;
@@ -64,7 +64,7 @@
     <template v-for="group in gprops" :key="'group-' + group.name" >
 
       <h-flex class="-group" style="grid-column: 1 / span 3" >
-	<span class="-label" style="flex-grow: 0; font-weight: bold" v-if="group.name" >{{ group.name }}</span>
+	<span class="-label" style="flex-grow: 0;" v-if="group.name" >{{ group.name }}</span>
 	<hr style="flex-grow: 1; margin-left: 0.5em; min-width: 5em" v-if="group.name" />
       </h-flex>
 
diff --git a/ui/b/folderview.vue b/ui/b/folderview.vue
index 3ee008a2..140451be 100644
--- a/ui/b/folderview.vue
+++ b/ui/b/folderview.vue
@@ -45,7 +45,7 @@
       .b-icon {
 	height: 100%; align-items: center; justify-content: center; vertical-align: middle;
 	min-width: 1.5em; margin: 0;
-	font-weight: bold;
+	@include b-font-weight-bold();
 	.-icon-folder { color: #bba460; }
 	padding: 0;
       }
diff --git a/ui/b/menuitem.js b/ui/b/menuitem.js
index f2d18225..f32ff899 100644
--- a/ui/b/menuitem.js
+++ b/ui/b/menuitem.js
@@ -75,7 +75,7 @@ button:active {
   padding-left: 2.5em;
   kbd {
     font-family: inherit;
-    font-weight: 400;
+    @include b-font-weight-normal();
   }
 }
 &.-nokbd .kbdspan { display:none; }
diff --git a/ui/b/menutitle.js b/ui/b/menutitle.js
index ed71e916..4990c1f9 100644
--- a/ui/b/menutitle.js
+++ b/ui/b/menutitle.js
@@ -21,7 +21,7 @@ JsExtract.scss`
   background: transparent; cursor: pointer; user-select: none;
   border: 1px solid transparent;
   color: $b-menu-foreground;
-  font-variant: small-caps; font-weight: bolder;
+  font-variant: small-caps; @include b-font-weight-bolder();
   // InterVariable-4.0beta9 has broken c2sc (small-caps), so for now use drop-caps
   // https://github.com/rsms/inter/issues/556#issuecomment-1598010623
   text-transform: uppercase; font-size: 80%;
diff --git a/ui/b/more.js b/ui/b/more.js
index e38bd2cd..ab24feef 100644
--- a/ui/b/more.js
+++ b/ui/b/more.js
@@ -23,7 +23,7 @@ JsExtract.scss`
   padding: 0 0.2em;
   margin: 0 0.2em;
   border-radius: 3px;
-  font-weight: bold;
+  @include b-font-weight-bold();
   font-size: 120%;
   cursor: default; user-select: none;
   border: 1px solid #bbb3;
diff --git a/ui/b/statusbar.vue b/ui/b/statusbar.vue
index b88b71ee..b44fc8ce 100644
--- a/ui/b/statusbar.vue
+++ b/ui/b/statusbar.vue
@@ -47,7 +47,7 @@
 	display: inline-block; overflow-y: visible; //* avoids scrolling */
 	padding: 0; margin: 0; font-size: inherit; white-space: nowrap;
       }
-      strong { color: $b-main-foreground; font-weight: normal; padding: 0 0.5em; }
+      strong { color: $b-main-foreground; padding: 0 0.5em; @include b-font-weight-normal(); }
       kbd {
 	padding: 0 0.4em 1px;
 	@include b-kbd-hotkey(true);

From 747ed41862c635fc92c34b299261c2e70d9a9f3e Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Thu, 22 Jun 2023 03:08:51 +0200
Subject: [PATCH 16/19] UI: elements.scss: use b-font-weight-bold() and
 b-font-weight-bolder()

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/elements.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/elements.scss b/ui/elements.scss
index d8d94e33..95224d6f 100644
--- a/ui/elements.scss
+++ b/ui/elements.scss
@@ -16,8 +16,8 @@ input, textarea, keygen, select, button	{ font: inherit; }
 // button				{ -webkit-appearance: normal; }
 .italic, i, cite, em, var, address, dfn { font-style: italic; }
 strong, b, h1, h2, h3, h4, h5, h6, th, ::-webkit-validation-bubble-heading,
-.bold					{ --font-weight: 700; }
-.bolder, optgroup			{ --font-weight: 850; }
+.bold					{ @include b-font-weight-bold(); }
+.bolder, optgroup			{ @include b-font-weight-bolder(); }
 .tabular-nums				{ font-variant-numeric: tabular-nums; }
 .slashed-zero				{ font-variant-numeric: slashed-zero; }
 plaintext, listing, xmp, input:-webkit-autofill-strong-password, .tnum, .code, tt, pre, code, kbd, samp,

From 0759afa474ea9053c6cd6e46923b85f26c60a124 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Thu, 22 Jun 2023 15:04:49 +0200
Subject: [PATCH 17/19] UI: mixins.scss: move b-kbd-hotkey here

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/mixins.scss | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/mixins.scss b/ui/mixins.scss
index 7ae262bf..b8b1561a 100644
--- a/ui/mixins.scss
+++ b/ui/mixins.scss
@@ -10,7 +10,6 @@
 // Only put *!default* definitions here, so `theme.scss` takes precedence.
 
 // theme basics
-$b-theme-font-family:		$b-main-font-family;
 $b-theme-foreground: 		$b-main-foreground;
 $b-theme-background: 		$b-main-background;
 $b-main-border-light:		zmod($b-base-background, Jz+=9%) !default;	// used for modal border
@@ -33,6 +32,20 @@ $b-switch-active:		#2080f0 !default;
 $b-switch-knob:		$b-button-foreground !default;
 $b-boxshadow-color:		fade(#000000, 30%) !default;
 
+// == Hotkey ==
+@mixin b-kbd-hotkey($border: true) {
+  font-family: mono;
+  font-weight: 600;
+  font-size: calc(1em - 2px);
+  letter-spacing: 1px;
+  //* text-transform: uppercase; text-transform: lowercase; font-variant: small-caps; */
+  border-radius: 0.5em;
+  @if not $border {}
+  @else {
+    background: lgrey(30%); border: 1px outset lgrey(50%); color: lgrey(95%); // #3 #5 #e
+  }
+}
+
 // == Markdown Styling ==
 @mixin b-markdown-it-inlined($maywrap: true)	{
   // avoid all margins and padding, make elements suitable for 'inline' layouts

From f06611a1abf7d85fd530c325b84b1e9a0bd6afe6 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Thu, 22 Jun 2023 15:05:01 +0200
Subject: [PATCH 18/19] UI: theme.scss: remove outdated font stuff

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/theme.scss | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/ui/theme.scss b/ui/theme.scss
index ad572e95..641060f9 100644
--- a/ui/theme.scss
+++ b/ui/theme.scss
@@ -42,20 +42,6 @@ $b-scrollbar-bg:	#111; // track
 $b-scrollbar-dd:	#222; // inactive slider
 $b-scrollbar-fg:	#777; // hovered slider
 
-// == Hotkey ==
-@mixin b-kbd-hotkey($border: true) {
-  font-family: mono;
-  font-weight: 600;
-  font-size: calc(1em - 2px);
-  letter-spacing: 1px;
-  //* text-transform: uppercase; text-transform: lowercase; font-variant: small-caps; */
-  border-radius: 0.5em;
-  @if not $border {}
-  @else {
-    background: lgrey(30%); border: 1px outset lgrey(50%); color: lgrey(95%); // #3 #5 #e
-  }
-}
-
 // == Status Bar ==
 $b-statusbar-bg: $b-main-background;
 $b-statusbar-field-spacing: 0.5em;
@@ -71,9 +57,6 @@ $b-statusbar-icon-scaleup: 1.1;    // enlarge active
   border-right: 1px solid $groove-tint;
 }
 
-// == Font Basics ==
-$b-main-font-family: 'Inter';
-
 // == Basic Colors ==
 $b-base-foreground: 		#f0f0f0 !default;
 $b-base-background: 		#202020 !default;
@@ -105,8 +88,6 @@ $b-style-fg-filter:    brightness(66%) !default;	// adjust style-fg in inverted
 
 // == BrowserWindow Defaults ==
 $b-default-background-color:	$b-main-background;	// #rrggbb needed
-$b-default-font-size:		12px;          		// int px needed
-$b-default-monospace-font-size: 13px;			// int px needed
 
 // == Animations ==
 $b-transition-fast-slide: 0.15s !default;
@@ -267,8 +248,6 @@ $b-piano-roll-note-color:	#88cc88b0;			// color(15,65%,25%);
 $b-piano-roll-note-focus-color:	 #aaf8;
 $b-piano-roll-note-focus-border: #f0f0f0;
 $b-piano-roll-indicator:	 #bbfc;				// color for play position indicator
-$b-piano-roll-font:     	normal 9px $b-main-font-family; // the '9px' part is dynamically resized
-// font format: italic small-caps bold 12px serif
 
 // == input[type='number'] ==
 @mixin b-style-number-input() {

From 34e9761e49b478e7e2b4d88a482b0231da2da8d9 Mon Sep 17 00:00:00 2001
From: Tim Janik <timj@gnu.org>
Date: Thu, 22 Jun 2023 15:05:20 +0200
Subject: [PATCH 19/19] UI: dark.scss: add a fallback font stack

Signed-off-by: Tim Janik <timj@gnu.org>
---
 ui/dark.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/dark.scss b/ui/dark.scss
index d3d5475c..cd75000d 100644
--- a/ui/dark.scss
+++ b/ui/dark.scss
@@ -1,9 +1,12 @@
 /* This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 */
 
+/* Font fallbacks, see modernfontstacks.com */
+$b-fallback-font-stack: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+
 /* Fonts */
-$b-canvas-font: normal 9px "InterVariable";	// the '9px' part is dynamically resized
+$b-canvas-font: normal 9px "InterVariable", $b-fallback-font-stack;	// the '9px' part is dynamically resized
 @mixin b-ui-font() {
-  font-family: "InterVariable";
+  font-family: "InterVariable", $b-fallback-font-stack;
   font-size: 15.5px;
   letter-spacing: 0.03em;
   text-decoration: none;