fix: fallback to roboto if Loor does not have glyphs

oxen-io · Aug 16, 2023 · 0794d87 · 0794d87
1 parent e4a4945
commit 0794d87
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 50 deletions.
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
@@ -14,7 +14,7 @@ body {
   height: 100%;
   width: 100%;
   margin: 0;
-  font-family: $session-font-default;
+  font-family: var(--font-default);
   letter-spacing: 0.3px;
 }
 

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
@@ -43,13 +43,6 @@ textarea {
   background: var(--text-selection-color);
 }
 
-.shadowed {
-  opacity: $session-shadow-opacity;
-}
-.overlayed {
-  opacity: $session-overlay-opacity;
-  pointer-events: none;
-}
 .overlay {
   display: flex !important;
   z-index: 1;
@@ -197,7 +190,7 @@ label {
   box-sizing: border-box;
   max-height: 70vh;
   max-width: calc(min(70vw, 800px));
-  font-family: $session-font-default;
+  font-family: var(--font-default);
   background-color: var(--modal-background-content-color);
   color: var(--modal-text-color);
   border: 1px solid var(--border-color);
@@ -256,7 +249,7 @@ label {
 
   &__body {
     padding: 0px var(--margins-lg) var(--margins-lg) var(--margins-lg);
-    font-family: $session-font-default;
+    font-family: var(--font-default);
     line-height: $session-font-md;
     font-size: $session-font-md;
     overflow-y: auto;

diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
@@ -2,101 +2,96 @@
 // /////////////////// Fonts ////////////////////
 // //////////////////////////////////////////////
 
-$session-font-default: 'Roboto';
-$session-font-accent: 'Loor';
-$session-font-mono: 'SpaceMono';
-
 @font-face {
-  font-family: $session-font-mono;
+  font-family: SpaceMono;
   src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
 }
 
-// Roboto is an open replacement for $session-font-default
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-Thin.ttf') format('truetype');
   font-weight: 100;
 }
+
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
   font-style: italic;
   font-weight: 100;
 }
+
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-Light.ttf') format('truetype');
   font-weight: 300;
 }
 
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
   font-style: italic;
   font-weight: 300;
 }
+
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-Regular.ttf') format('truetype');
   font-weight: 400;
 }
+
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-Italic.ttf') format('truetype');
   font-style: italic;
   font-weight: 400;
 }
+
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-Medium.ttf') format('truetype');
   font-weight: 500;
 }
 
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
   font-style: italic;
   font-weight: 500;
 }
+
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-Bold.ttf') format('truetype');
   font-weight: 700;
 }
+
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
   font-weight: 700;
   font-style: italic;
 }
+
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-Black.ttf') format('truetype');
   font-weight: 900;
 }
 
 @font-face {
-  font-family: $session-font-default;
+  font-family: Roboto;
   src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
   font-weight: 900;
   font-style: italic;
 }
 
 // Accented font
 @font-face {
-  font-family: $session-font-accent;
+  font-family: Loor; // Loor does not support some Cyrillic ghyphs so where we use it, we add a fallback to Roboto
   src: url('../fonts/Loor.ttf') format('truetype');
   line-height: 1.4rem;
 }
 
-// //////////////////////////////////////////////
-// ////////////////// Colors ////////////////////
-// //////////////////////////////////////////////
-
-// Opacity and Shadow
-$session-shadow-opacity: 0.15;
-$session-overlay-opacity: 0.3;
-
 // //////////////////////////////////////////////
 // /////////////////// Text /////////////////////
 // //////////////////////////////////////////////
@@ -106,13 +101,7 @@ $session-font-xs: 11px;
 $session-font-sm: 13px;
 $session-font-md: 15px;
 
-$session-font-h2: 24px;
-
 // Mixins
-@mixin fontAccentBold {
-  font-weight: bold;
-  font-family: $session-font-accent;
-}
 
 @mixin text-highlight($color) {
   background-color: $color;

diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss
@@ -8,7 +8,7 @@
   &-content {
     &-accent {
       &-text {
-        font-family: $session-font-accent;
+        font-family: var(--font-font-accent), var(--font-default);
         text-align: center;
         .title {
           font-size: 90px;
@@ -91,7 +91,7 @@
   &-input-with-label-container {
     height: 46.5px;
     width: 280px;
-    font-family: $session-font-default;
+    font-family: var(--font-default);
     color: var(--text-primary-color);
 
     padding: 2px 0 2px 0;
@@ -126,7 +126,7 @@
       background: transparent;
       color: var(--input-text-color);
 
-      font-family: $session-font-default;
+      font-family: var(--font-default);
       font-size: 12px;
       line-height: 14px;
       position: absolute;
@@ -214,7 +214,7 @@
       overflow-wrap: break-word;
       padding: 0px 5px 20px 5px;
       display: inline-block;
-      font-family: $session-font-mono;
+      font-family: var(--font-font-mono), var(--font-default);
       user-select: all;
       overflow: hidden;
       resize: none;

diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss
@@ -99,7 +99,8 @@
 }
 
 @mixin session-h-title {
-  @include fontAccentBold();
+  font-weight: bold;
+  font-family: var(--font-font-accent), var(--font-default);
 }
 
 h1 {

diff --git a/ts/components/leftpane/LeftPaneSettingSection.tsx b/ts/components/leftpane/LeftPaneSettingSection.tsx
@@ -16,7 +16,7 @@ import { SessionSettingCategory } from '../settings/SessionSettings';
 import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 
 const StyledSettingsSectionTitle = styled.strong`
-  font-family: var(--font-font-accent);
+  font-family: var(--font-font-accent), var(--font-default);
   font-size: var(--font-size-md);
 `;
 

diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
@@ -21,7 +21,7 @@ import { ToastUtils } from '../../../session/utils';
 import { createClosedGroup } from '../../../session/conversations/createClosedGroup';
 
 const StyledMemberListNoContacts = styled.div`
-  font-family: var(--font-font-mono);
+  font-family: var(--font-font-mono), var(--font-default);
   background: var(--background-secondary-color);
   text-align: center;
   padding: 20px;