style(ui): switch Inter for IBM Plex

webui/package.json

@@ -33,6 +33,7 @@
     "vite-plugin-static-copy": "^0.13.0"
   },
   "dependencies": {
+    "@ibm/plex": "^6.1.1",
     "@recogito/annotorious": "^2.7.1",
     "boxicons": "^2.1.4",
     "date-fns": "^2.29.3",

webui/public/assets/fonts/inter.css

@@ -1,220 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-Thin.woff2?v=3.15") format("woff2"),
-       url("Inter-Thin.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-ThinItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-ThinItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-ExtraLight.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraLight.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-ExtraLightItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraLightItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-Light.woff2?v=3.15") format("woff2"),
-       url("Inter-Light.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-LightItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-LightItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-Regular.woff2?v=3.15") format("woff2"),
-       url("Inter-Regular.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 400;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-Italic.woff2?v=3.15") format("woff2"),
-       url("Inter-Italic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-Medium.woff2?v=3.15") format("woff2"),
-       url("Inter-Medium.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-MediumItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-MediumItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-SemiBold.woff2?v=3.15") format("woff2"),
-       url("Inter-SemiBold.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-SemiBoldItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-SemiBoldItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-Bold.woff2?v=3.15") format("woff2"),
-       url("Inter-Bold.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-BoldItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-BoldItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-ExtraBold.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraBold.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-ExtraBoldItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff?v=3.15") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 900;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-Black.woff2?v=3.15") format("woff2"),
-       url("Inter-Black.woff?v=3.15") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 900;
-  font-display: swap;
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-BlackItalic.woff2?v=3.15") format("woff2"),
-       url("Inter-BlackItalic.woff?v=3.15") format("woff");
-}
-
-/* -------------------------------------------------------
-Variable font.
-Usage:
-
-  html { font-family: 'Inter', sans-serif; }
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
-*/
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
-}
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  font-feature-settings: "ss02" on, "case" on;
-  src: url("Inter-italic.var.woff2?v=3.15") format("woff2");
-}
-
-
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
-  * { font-variation-settings: "slnt" 0deg }
-  .italic { font-variation-settings: "slnt" 10deg }
-
-*/
-@font-face {
-  font-family: 'Inter var experimental';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: oblique 0deg 10deg;
-  src: url("Inter.var.woff2?v=3.15") format("woff2");
-}

webui/src/styles/fonts.scss

@@ -1,17 +1,12 @@
-@import url("/assets/fonts/inter.css");
+@import "node_modules/@ibm/plex/scss/ibm-plex.scss";
 
 html {
-  --default-font: "Inter", sans-serif;
-  --monospace-font: "Fira Code", "Consolas", "Inconsolata", "Hack", monospace;
+  --default-font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
+  --monospace-font: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Consolas",
+    "Inconsolata", "Hack", monospace;
   font-size: 15px;
 }
 
-@supports (font-variation-settings: normal) {
-  html {
-    --default-font: "Inter var", sans-serif;
-  }
-}
-
 html,
 body {
   font-family: var(--default-font);

webui/yarn.lock

@@ -335,6 +335,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ibm/plex@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "@ibm/plex@npm:6.1.1"
+  checksum: 832f1928732374d15208151d251b31b73ad196006274807a82aaf8075f83b308faa379e3d1dc0bb0952f1ad0848f8bdc1f67cd477404bab7f1f30daf202ccdaa
+  languageName: node
+  linkType: hard
+
 "@jridgewell/resolve-uri@npm:^3.0.3":
   version: 3.1.0
   resolution: "@jridgewell/resolve-uri@npm:3.1.0"
@@ -4015,6 +4022,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "upend-kestrel@workspace:."
   dependencies:
+    "@ibm/plex": ^6.1.1
     "@recogito/annotorious": ^2.7.1
     "@sveltejs/vite-plugin-svelte": ^1.0.1
     "@tsconfig/svelte": ^3.0.0