chore: OPTIC-1151: Extract font family to a constant (#6424)

Co-authored-by: bmartel <[email protected]>
HumanSignal · Oct 3, 2024 · d3a0eb6 · d3a0eb6
1 parent fac0eaf
commit d3a0eb6
Show file tree

Hide file tree

Showing 18 changed files with 37 additions and 26 deletions.
diff --git a/label_studio/core/static/css/main.css b/label_studio/core/static/css/main.css
@@ -3,7 +3,8 @@ html {
 }
 
 body {
-  font-family: 'Figtree', sans-serif !important; 
+  --font-sans: 'Figtree', sans-serif !important;
+  --font-mono: Monaco, monospace;
 
   --sand_900: #12110D;
   --sand_800: #262522;

diff --git a/web/apps/labelstudio/src/app/App.scss b/web/apps/labelstudio/src/app/App.scss
@@ -8,7 +8,6 @@ body {
   --menu-sidebar-width: 240px;
 
   margin: 0;
-  font-family: Figtree, sans-serif;
 }
 
 .app-wrapper {

diff --git a/web/apps/labelstudio/src/components/Button/Button.scss b/web/apps/labelstudio/src/components/Button/Button.scss
@@ -29,7 +29,7 @@
   box-sizing: border-box;
   color: var(--button-color) !important;
   font-size: var(--button-font-size);
-  font-family: var(--font-family);
+  font-family: var(--font-sans);
   font-weight: var(--font-weight-500);
   line-height: var(--font-line-height-medium);
   width: var(--button-width);

diff --git a/web/apps/labelstudio/src/components/Error/Error.scss b/web/apps/labelstudio/src/components/Error/Error.scss
@@ -34,7 +34,7 @@
     margin: 15px 0;
   }
 
-  &__stracktrace {
+  &__stacktrace {
     margin: 16px 0;
     padding: 16px;
     overflow: auto;
@@ -43,7 +43,7 @@
     white-space: pre;
     border-radius: 5px;
     background-color: var(--sand_100);
-    font-family: Monaco, monospace;
+    font-family: var(--font-mono);
   }
 
   &__version {

diff --git a/web/apps/labelstudio/src/components/Form/Elements/Select/Select.scss b/web/apps/labelstudio/src/components/Form/Elements/Select/Select.scss
@@ -1,6 +1,5 @@
 .select-ls {
   position: relative;
-  font-family: Figtree, sans-serif;
 
   &__list {
     top: 0;
@@ -35,6 +34,5 @@
 select:disabled {
   background: var(--sand_200);
   color: var(--sand_500);
-  font-family: Figtree, sans-serif;
   opacity: 1;
 }
diff --git a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss
@@ -269,7 +269,7 @@ $scroll-width: 5px;
   textarea,
   :global(.react-codemirror2) {
     flex: 1;
-    font-family: monospace;
+    font-family: var(--font-mono);
 
     :global(.CodeMirror) {
       height: 100%;

diff --git a/web/apps/labelstudio/src/pages/CreateProject/Config/codemirror.css b/web/apps/labelstudio/src/pages/CreateProject/Config/codemirror.css
@@ -1,6 +1,7 @@
 .CodeMirror-hints {
   z-index: 3000;
 }
+
 .CodeMirror-hint-tag {
   white-space: normal;
   line-height: 1.4em;
@@ -9,19 +10,22 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .CodeMirror-hint-name {
-  font-family: monospace;
   font-weight: 500;
   color: darkgoldenrod;
+  font-family: var(--font-mono);
 }
+
 .CodeMirror-hint-active .CodeMirror-hint-name {
   color: blanchedalmond;
 }
+
 .CodeMirror-hint-type {
   font-style: italic;
   color: #aaa;
 }
+
 .CodeMirror-hint-active .CodeMirror-hint-type {
   color: #ddd;
 }
-.CodeMirror-hint-description {}
diff --git a/web/apps/labelstudio/src/pages/DataManager/DataManager.scss b/web/apps/labelstudio/src/pages/DataManager/DataManager.scss
@@ -4,4 +4,8 @@
   #label-studio-dm [class*="Annotations_annotation_selected"] {
     background: var(--grape_0);
   }
-}
+}
+
+.datamanager * {
+  font-family: var(--font-sans) !important;
+}
diff --git a/web/apps/labelstudio/src/themes/default/typography.scss b/web/apps/labelstudio/src/themes/default/typography.scss
@@ -16,7 +16,8 @@
 }
 
 body {
-  --font-family: 'Figtree', sans-serif !important;
+  --font-sans: 'Figtree', sans-serif !important;
+  --font-mono: monaco, monospace !important;
   --font-weight-400: 400;
   --font-weight-500: 500;
   --font-weight-600: 600;
@@ -25,4 +26,6 @@ body {
   --font-size-400: 16px;
   --font-line-height-small: 18px;
   --font-line-height-medium: 20px;
+
+  font-family: var(--font-sans) !important;
 }
diff --git a/web/libs/datamanager/public/index.html b/web/libs/datamanager/public/index.html
@@ -32,7 +32,7 @@
 
     <style>
       body {
-        font-family: Roboto !important;
+        font-family: var(--font-sans);
         font-weight: normal;
         font-size: 14px;
         margin: 0;

diff --git a/web/libs/editor/src/assets/styles/global.scss b/web/libs/editor/src/assets/styles/global.scss
@@ -85,7 +85,7 @@
 }
 
 .react-dropdown-tree-select .node > .toggle {
-  font-family: monospace;
+  font-family: var(--font-mono);
   font-style: normal;
   color: initial;
   cursor: pointer;

diff --git a/web/libs/editor/src/components/Settings/Settings.scss b/web/libs/editor/src/components/Settings/Settings.scss
@@ -1,10 +1,10 @@
 %settings-title {
-  font-family: Figtree, sans-serif;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: 0.15px;
   text-align: left;
+  font-family: var(--font-sans);
 }
 
 

diff --git a/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.scss b/web/libs/editor/src/components/SidePanels/DetailsPanel/DetailsPanel.scss
@@ -91,8 +91,8 @@
     grid-column-gap: 4px;
     text-wrap: nowrap;
     padding: 4px;
-    font-family: Roboto, Arial, sans-serif;
     font-weight: 500;
     font-size: 15px;
+    font-family: var(--font-sans);
   }
 }
diff --git a/web/libs/editor/src/components/Taxonomy/Taxonomy.module.scss b/web/libs/editor/src/components/Taxonomy/Taxonomy.module.scss
@@ -152,7 +152,6 @@
 }
 
 .taxonomy__grouping {
-  font-family: monospace;
   font-size: 16px;
   display: inline-block;
   width: 24px;
@@ -162,6 +161,7 @@
   user-select: none;
   flex-shrink: 0;
   pointer-events: all;
+  font-family: var(--font-mono);
 
   svg {
     transition: transform 0.1s; // visible rotation of arrow

diff --git a/web/libs/editor/src/mixins/HighlightMixin.js b/web/libs/editor/src/mixins/HighlightMixin.js
@@ -370,7 +370,7 @@ const createSpanStylesheet = (document, identifier, color) => {
       padding: 2px 2px;
       font-size: 9.5px;
       font-weight: bold;
-      font-family: Monaco;
+      font-family: var(--font-mono);
       vertical-align: super;
       content: attr(data-label);
       line-height: 0;

diff --git a/web/libs/editor/src/tags/object/RichText/model.js b/web/libs/editor/src/tags/object/RichText/model.js
@@ -117,7 +117,7 @@ const Model = types
         padding: 2px 2px;
         font-size: 9.5px;
         font-weight: bold;
-        font-family: Monaco;
+        font-family: var(--font-mono);
         vertical-align: super;
         content: attr(data-label);
         line-height: 0;

diff --git a/web/libs/editor/src/utils/__tests__/canvas.test.js b/web/libs/editor/src/utils/__tests__/canvas.test.js
@@ -5,23 +5,23 @@ const svgs = {
   simple: [
     "'data:image/svg+xml,",
     '%3Csvg xmlns="http://www.w3.org/2000/svg" height="16" width="2"%3E',
-    '%3Ctext x="0" y="11" style="font-size: 9.5px; font-weight: bold; font-family: Monaco"%3E',
+    '%3Ctext x="0" y="11" style="font-size: 9.5px; font-weight: bold; font-family: var(--font-mono);"%3E',
     "Test Label",
     "%3C/text%3E%3C/svg%3E'",
   ].join(""),
   complex: [
     "'data:image/svg+xml,",
     '%3Csvg xmlns="http://www.w3.org/2000/svg" height="16" width="2"%3E',
-    '%3Ctext x="0" y="11" style="font-size: 9.5px; font-weight: bold; font-family: Monaco"%3E',
+    '%3Ctext x="0" y="11" style="font-size: 9.5px; font-weight: bold; font-family: var(--font-mono);"%3E',
     "A&lt;/text%3E B",
     "%3C/text%3E%3C/svg%3E'",
   ].join(""),
   score: [
     "'data:image/svg+xml,",
     '%3Csvg xmlns="http://www.w3.org/2000/svg" height="16" width="28"%3E',
     '%3Crect x="0" y="0" rx="2" ry="2" width="24" height="14" style="fill:%237ca91f;opacity:0.5" /%3E',
-    '%3Ctext x="3" y="10" style="font-size: 8px; font-family: Monaco"%3E0.60%3C/text%3E',
-    '%3Ctext x="26" y="11" style="font-size: 9.5px; font-weight: bold; font-family: Monaco"%3E',
+    '%3Ctext x="3" y="10" style="font-size: 8px; font-family: var(--font-mono);"%3E0.60%3C/text%3E',
+    '%3Ctext x="26" y="11" style="font-size: 9.5px; font-weight: bold; font-family: var(--font-mono);"%3E',
     "Test Label",
     "%3C/text%3E%3C/svg%3E'",
   ].join(""),

diff --git a/web/libs/editor/src/utils/canvas.js b/web/libs/editor/src/utils/canvas.js
@@ -402,7 +402,7 @@ const labelToSVG = (() => {
     const svg = document.createElement("svg");
     const svgText = document.createElement("text");
 
-    svgText.style = "font-size: 9.5px; font-weight: bold; color: red; fill: red; font-family: Monaco";
+    svgText.style = "font-size: 9.5px; font-weight: bold; color: red; fill: red; font-family: var(--font-mono);";
     svgText.innerHTML = text;
 
     svg.appendChild(svgText);
@@ -429,13 +429,15 @@ const labelToSVG = (() => {
       const fillColor = Colors.getScaleGradient(score);
 
       items.push(`<rect x="0" y="0" rx="2" ry="2" width="24" height="14" style="fill:${fillColor};opacity:0.5" />`);
-      items.push(`<text x="3" y="10" style="font-size: 8px; font-family: Monaco">${score.toFixed(2)}</text>`);
+      items.push(
+        `<text x="3" y="10" style="font-size: 8px; font-family: var(--font-mono);">${score.toFixed(2)}</text>`,
+      );
       width = width + 26;
     }
 
     if (label) {
       items.push(
-        `<text x="${width}" y="11" style="font-size: 9.5px; font-weight: bold; font-family: Monaco">${label}</text>`,
+        `<text x="${width}" y="11" style="font-size: 9.5px; font-weight: bold; font-family: var(--font-mono);">${label}</text>`,
       );
       width = width + calculateTextWidth(label) + 2;
     }