✨ Clean up fonts scss files

frontend/resources/styles/common/base.scss

@@ -4,6 +4,18 @@
 //
 // Copyright (c) KALEIDOS INC
 
+// TODO: Legacy sass vars. We should use DS tokens.
+$fs12: 0.75rem;
+$fs18: 1.125rem;
+$fs24: 1.5rem;
+$fs34: 2.125rem;
+$fs44: 2.75rem;
+$fw300: 300;
+$fw500: 500;
+$fw700: 700;
+$lh-115: 1.15;
+$lh-133: 1.33;
+
 :root {
   --font-family: "worksans", sans-serif;
 }

frontend/resources/styles/common/dependencies/fonts.scss

@@ -4,64 +4,18 @@
 //
 // Copyright (c) KALEIDOS INC
 
-// Font sizes
+@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
-$fs8: 0.5rem;
+  $filepath: "/fonts/" + $file;
-$fs9: 0.5625rem;
-$fs10: 0.625rem;
-$fs11: 0.6875rem;
-$fs12: 0.75rem;
-$fs13: 0.8125rem;
-$fs14: 0.875rem;
-$fs15: 0.9375rem;
-$fs16: 1rem;
-$fs17: 1.0625rem;
-$fs18: 1.125rem;
-$fs19: 1.1875rem;
-$fs20: 1.25rem;
-$fs21: 1.315rem;
-$fs22: 1.375rem;
-$fs23: 1.4375rem;
-$fs24: 1.5rem;
-$fs26: 1.625rem;
-$fs30: 1.875rem;
-$fs32: 2rem;
-$fs34: 2.125rem;
-$fs36: 2.25rem;
-$fs38: 2.375rem;
-$fs40: 2.5rem;
-$fs42: 2.675rem;
-$fs44: 2.75rem;
-$fs80: 5rem;
 
-// Font weight
+  @font-face {
-// Taken from https://fonts.google.com/specimen/Work+Sans
+    font-family: "#{$style-name}";
-$fw100: 100; // Thin
+    src:
-$fw200: 200; // Extra Light
+      url($filepath + ".woff2") format("woff2"),
-$fw300: 300; // Light
+      url($filepath + ".ttf") format("truetype");
-$fw400: 400; // Regular (CSS value: 'normal')
+    font-weight: unquote($weight);
-$fw500: 500; // Medium
+    font-style: unquote($style);
-$fw600: 600; // Semi Bold
+  }
-$fw700: 700; // Bold (CSS value: 'bold')
+}
-$fw800: 800; // Extra Bold
-$fw900: 900; // Black
-
-// Line height
-// Value are predefined as unitless (ratio to font size in %), because that is the best approach for browsers according to https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values
-$lh-normal: normal; // line-height depends of font-family, font-size, your browser, maybe your OS http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
-$lh-088: 0.88;
-$lh-100: 1;
-$lh-115: 1.15; // original $title-lh-sm
-$lh-125: 1.25; // original $title-lh
-$lh-128: 1.28;
-$lh-133: 1.33; // original $base-lh-sm
-$lh-143: 1.43; // original $base-lh
-$lh-145: 1.45;
-$lh-150: 1.5;
-$lh-188: 1.88;
-$lh-192: 1.92;
-$lh-200: 2;
-$lh-236: 2.36;
-$lh-500: 5;
 
 // Work Sans
 @include font-face("worksans", "WorkSans-Thin", "100");
@@ -105,3 +59,6 @@ $lh-500: 5;
 @include font-face("vazirmatn", "Vazirmatn-Bold", bold);
 @include font-face("vazirmatn", "Vazirmatn-ExtraBold", "800");
 @include font-face("vazirmatn", "Vazirmatn-Black", "900");
+
+// Space mono
+@include font-face("robotomono", "RobotoMono-Regular", normal);

frontend/resources/styles/common/dependencies/highlightjs-theme.scss

@@ -2,6 +2,9 @@
 Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
 */
 
+// TODO: Legacy sass vars. We should use DS tokens.
+$fw700: 700;
+
 .hljs {
   display: block;
   overflow-x: auto;

frontend/resources/styles/common/dependencies/mixin.scss

@@ -1,40 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
-  $filepath: "/fonts/" + $file;
-  @font-face {
-    font-family: "#{$style-name}";
-    src:
-      url($filepath + ".woff2") format("woff2"),
-      url($filepath + ".ttf") format("truetype");
-    font-weight: unquote($weight);
-    font-style: unquote($style);
-  }
-}
-
-@mixin tooltipShow {
-  &:hover {
-    .icon-tooltip {
-      display: block;
-      left: 2rem;
-      animation: tooltipAppear 0.2s linear;
-    }
-  }
-  &.active {
-    .icon-tooltip {
-      display: block;
-      left: 2rem;
-      animation: tooltipAppear 0.2s linear;
-    }
-  }
-}
-
-@mixin text-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}

frontend/resources/styles/common/dependencies/reset.scss

@@ -1,3 +1,7 @@
+// TODO: Legacy sass vars. We should not be using Sass vars here in this
+//       file at all.
+$lh-143: 1.43;
+
 /*
 http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
@@ -97,6 +101,9 @@ video {
   border: 0;
   font: inherit;
   font-size: 100%;
+  // TODO: Changing line-height to 1 (as it should be) makes the visual tests
+  //       fail with a max pixel diff ratio of 0.005.
+  //       We should tackle this later.
   line-height: $lh-143;
   margin: 0;
   padding: 0;
@@ -118,7 +125,7 @@ section {
   display: block;
 }
 body {
-  line-height: $lh-100;
+  line-height: 1;
 }
 
 ol,

frontend/resources/styles/common/framework.scss

@@ -12,6 +12,8 @@ $size-4: 1rem;
 $br7: 7px;
 $br25: 25px;
 $br50: 50px;
+$fs14: 0.875rem;
+$lh-normal: normal; // line-height depends of font-family, font-size, your browser, maybe your OS http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
 
 input[type="button"][disabled] {
   background-color: var(--color-canvas); // TODO: see if we can remove this whole selector

frontend/resources/styles/common/refactor/fonts.scss

@@ -5,7 +5,6 @@
 // Copyright (c) KALEIDOS INC
 
 @use "sass:math";
-@import "common/dependencies/mixin";
 
 // Typography scale
 $fs-base: 16;

frontend/resources/styles/main-default.scss

@@ -15,7 +15,6 @@
 //#################################################
 
 @import "common/refactor/color-defs.scss";
-@import "common/dependencies/mixin";
 @import "common/dependencies/fonts";
 @import "common/dependencies/reset";
 @import "common/dependencies/animations";

frontend/resources/styles/main/partials/workspace.scss

@@ -4,9 +4,12 @@
 //
 // Copyright (c) KALEIDOS INC
 
-// TODO: legacy sass vars. To be removed in favor of DS tokens
+@import "refactor/common-refactor.scss";
+
+// TODO: legacy sass vars. To be removed in favor of DS tokens.
 $br3: 3px;
 $br4: 4px;
+$lh-150: 1.5;
 
 $width-left-toolbar: 48px;
 
@@ -119,7 +122,7 @@ $height-palette-max: 80px;
 
     span {
       color: var(--df-primary);
-      font-size: $fs12;
+      font-size: $fs-12;
       padding-right: 5px;
     }
   }
@@ -128,7 +131,7 @@ $height-palette-max: 80px;
     background-color: var(--db-secondary-40);
     border-radius: $br3;
     color: var(--df-primary);
-    font-size: $fs12;
+    font-size: $fs-12;
     padding: 3px 8px;
     transition: none;
     text-align: center;
@@ -236,7 +239,7 @@ $height-palette-max: 80px;
 }
 
 .workspace-frame-label {
-  font-size: $fs12;
+  font-size: $fs-12;
 }
 
 .multiuser-cursor {
@@ -252,7 +255,7 @@ $height-palette-max: 80px;
   display: flex;
   align-items: center;
   height: 20px;
-  font-size: $fs12;
+  font-size: $fs-12;
   line-height: $lh-150;
 }
 

frontend/src/app/main/ui/workspace.scss

@@ -6,14 +6,6 @@
 
 @import "refactor/common-refactor.scss";
 
-// Work Sans
-@include font-face("worksans", "WorkSans-Regular", normal);
-@include font-face("worksans", "WorkSans-Medium", "500");
-@include font-face("worksans", "WorkSans-Bold", bold);
-
-// Space mono
-@include font-face("robotomono", "RobotoMono-Regular", normal);
-
 :global(:root) {
   --s-4: 0.25rem;
   --layer-indentation-size: calc(var(--s-4) * 6);