Merge branch 'InterDisplay', based on InterVariable-4.0 font

* InterDisplay: UI: dark.scss: add a fallback font stack UI: theme.scss: remove outdated font stuff UI: mixins.scss: move b-kbd-hotkey here UI: elements.scss: use b-font-weight-bold() and b-font-weight-bolder() UI: b/*.vue, b/*.js: use b-font-weight-bold() and its variants UI: dark.scss: define b-font-weight-{normal|bold|bolder} mixins UI: b/menutitle.js: use drop-caps while InterVariable-4.0 small-caps are broken See also: rsms/inter#556 (comment) UI: elements.scss: leave font handling to theme, globals and shadow UI: b/pianoroll.js: use b-canvas-font UI: b/partthumb.vue: use b-canvas-font UI: b/clipview.js: use b-canvas-font UI: shadow.scss: use b-ui-font() inside shadow DOMs UI: globals.scss: make use of b-ui-font() UI: dark.scss: configure b-ui-font() for "InterVariable" in InterDisplay style UI: globals.scss: leave font-face defs to index.html UI: index.html: cleanup preloads, add @font-face for "InterVariable" UI: b/icon.js: add small comment UI: Makefile.mk: download InterVariable.woff2 UI: stylelintrc.cjs: disable "font-family-name-quotes" to allow quoted font names Signed-off-by: Tim Janik <[email protected]>
tim-janik · Jun 22, 2023 · 89c9d01 · 89c9d01
2 parents 234bf99 + 34e9761
commit 89c9d01
Show file tree

Hide file tree

Showing 21 changed files with 103 additions and 115 deletions.
diff --git 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/

diff --git 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/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;

diff --git 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
@@ -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
@@ -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/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');

diff --git 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
@@ -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
@@ -20,20 +21,31 @@ 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%;
+  ::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);
diff --git 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/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;

diff --git 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;

diff --git 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);

diff --git a/ui/dark.scss b/ui/dark.scss
@@ -1,41 +1,37 @@
 /* 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-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", $b-fallback-font-stack;	// the '9px' part is dynamically resized
+@mixin b-ui-font() {
+  font-family: "InterVariable", $b-fallback-font-stack;
+  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";
+  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+  @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 */

diff --git 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					{ @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,

diff --git a/ui/globals.scss b/ui/globals.scss
@@ -6,20 +6,13 @@
 // 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;
-  -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 {
@@ -40,12 +33,6 @@ body {
   }
 }
 
-// Scrollbars
-html {
-  @include firefox-scrollbars();
-  @include chrome-scrollbars();
-}
-
 // Button
 button, push-button {
   // button shading

diff --git 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

diff --git 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