Feature - UX - Semibold / italic font for UI (onivim#1182)

* Add additional font styles to UiFont * Font tweaks * Formatting
aubinlrx · Jan 25, 2020 · b5c1ae3 · b5c1ae3
1 parent ab85575
commit b5c1ae3
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 9 deletions.
diff --git a/assets/fonts/dune b/assets/fonts/dune
@@ -1,4 +1,4 @@
 (install
     (section bin)
     (package Oni2)
-    (files Inconsolata-Bold.ttf Inconsolata-Regular.ttf Inter-UI-Regular.ttf Inter-UI-SemiBold.ttf FiraCode-Regular.ttf FontAwesome5FreeRegular.otf FontAwesome5FreeSolid.otf selawk.ttf selawkb.ttf selawkl.ttf selawksb.ttf selawksl.ttf seti.ttf))
+    (files Inconsolata-Bold.ttf Inconsolata-Regular.ttf Inter-UI-Medium.ttf Inter-UI-MediumItalic.ttf Inter-UI-Regular.ttf Inter-UI-Italic.ttf Inter-UI-SemiBoldItalic.ttf Inter-UI-SemiBold.ttf Inter-UI-Bold.ttf FiraCode-Regular.ttf FontAwesome5FreeRegular.otf FontAwesome5FreeSolid.otf selawk.ttf selawkb.ttf selawkl.ttf selawksb.ttf selawksl.ttf seti.ttf))
diff --git a/src/Core/UiFont.re b/src/Core/UiFont.re
@@ -1,6 +1,37 @@
 type t = {
   fontFile: string,
+  fontFileItalic: string,
+  fontFileBold: string,
+  fontFileSemiBold: string,
+  fontFileSemiBoldItalic: string,
   fontSize: int,
 };
 
-let create = (~fontFile, ~fontSize, ()) => {fontFile, fontSize};
+let create =
+    (
+      ~fontFile,
+      ~fontFileBold,
+      ~fontFileItalic,
+      ~fontFileSemiBold,
+      ~fontFileSemiBoldItalic,
+      ~fontSize,
+      (),
+    ) => {
+  fontFile,
+  fontFileBold,
+  fontFileItalic,
+  fontFileSemiBold,
+  fontFileSemiBoldItalic,
+  fontSize,
+};
+
+let default =
+  create(
+    ~fontFile="Inter-UI-Regular.ttf",
+    ~fontFileBold="Inter-UI-Bold.ttf",
+    ~fontFileItalic="Inter-UI-Italic.ttf",
+    ~fontFileSemiBold="Inter-UI-Medium.ttf",
+    ~fontFileSemiBoldItalic="Inter-UI-MediumItalic.ttf",
+    ~fontSize=12,
+    (),
+  );
diff --git a/src/Model/State.re b/src/Model/State.re
@@ -84,7 +84,7 @@ let create: unit => t =
     extensions: Extensions.empty,
     languageFeatures: LanguageFeatures.empty,
     lifecycle: Lifecycle.create(),
-    uiFont: UiFont.create(~fontFile="selawk.ttf", ~fontSize=12, ()),
+    uiFont: UiFont.default,
     sideBar: SideBar.initial,
     theme: Theme.default,
     tokenTheme: TokenTheme.empty,

diff --git a/src/UI/FileTreeView.re b/src/UI/FileTreeView.re
@@ -34,7 +34,7 @@ module Styles = {
   ];
 
   let text = (~isActive, ~theme: Theme.t, ~font: UiFont.t) => [
-    fontSize(font.fontSize),
+    fontSize(11),
     fontFamily(font.fontFile),
     color(isActive ? theme.oniNormalModeBackground : theme.sideBarForeground),
     marginLeft(10),

diff --git a/src/UI/PaneTab.re b/src/UI/PaneTab.re
@@ -38,7 +38,7 @@ let make = (~uiFont, ~theme, ~title, ~onClick, ~active, ()) => {
   let textStyle =
     Style.[
       textOverflow(`Ellipsis),
-      fontFamily(uiFont.fontFile),
+      fontFamily(active ? uiFont.fontFileSemiBold : uiFont.fontFile),
       fontSize(uiFont.fontSize),
       color(theme.tabActiveForeground),
       backgroundColor(theme.editorBackground),

diff --git a/src/UI/QuickmenuView.re b/src/UI/QuickmenuView.re
@@ -33,7 +33,7 @@ module Styles = {
   let menuItem = [fontSize(14), cursor(Revery.MouseCursors.pointer)];
 
   let label = (~font: UiFont.t, ~theme: Theme.t, ~highlighted, ~isFocused) => [
-    fontFamily(font.fontFile),
+    fontFamily(highlighted ? font.fontFileSemiBold : font.fontFile),
     textOverflow(`Ellipsis),
     fontSize(12),
     backgroundColor(

diff --git a/src/UI/SideBarView.re b/src/UI/SideBarView.re
@@ -16,7 +16,7 @@ module Styles = {
 
   let title = (~fg, ~bg, ~font: Core.UiFont.t) => [
     fontSize(font.fontSize),
-    fontFamily(font.fontFile),
+    fontFamily(font.fontFileSemiBold),
     backgroundColor(bg),
     color(fg),
   ];

diff --git a/src/UI/StatusBar.re b/src/UI/StatusBar.re
@@ -204,6 +204,14 @@ module Styles = {
     Style.color(color),
     backgroundColor(background),
   ];
+
+  let textBold = (~color, ~background, font: UiFont.t) => [
+    fontFamily(font.fontFileSemiBold),
+    fontSize(11),
+    textWrap(TextWrapping.NoWrap),
+    Style.color(color),
+    backgroundColor(background),
+  ];
 };
 
 let positionToString =
@@ -323,7 +331,7 @@ let modeIndicator = (~font, ~theme, ~mode, ()) => {
 
   <item backgroundColor=background>
     <Text
-      style={Styles.text(~color=foreground, ~background, font)}
+      style={Styles.textBold(~color=foreground, ~background, font)}
       text={Vim.Mode.show(mode)}
     />
   </item>;

diff --git a/src/UI/Tab.re b/src/UI/Tab.re
@@ -62,11 +62,13 @@ let make =
       ...horizontalBorderStyles(tabPosition, numberOfTabs),
     ];
 
+  let isBold = active && showHighlight;
+
   let textStyle =
     Style.[
       width(proportion(0.80) - 10),
       textOverflow(`Ellipsis),
-      fontFamily(uiFont.fontFile),
+      fontFamily(isBold ? uiFont.fontFileItalic : uiFont.fontFile),
       fontSize(uiFont.fontSize),
       color(theme.tabActiveForeground),
       backgroundColor(theme.editorBackground),