chore: css: remove redundant font stack sass and use semantic variable (

#660)
EightfoldAI · Jul 10, 2023 · 5f014ec · 5f014ec
1 parent 509980c
commit 5f014ec
Show file tree

Hide file tree

Showing 23 changed files with 30 additions and 32 deletions.
diff --git a/src/components/Dialog/BaseDialog/base-dialog.module.scss b/src/components/Dialog/BaseDialog/base-dialog.module.scss
@@ -13,7 +13,7 @@ $dialog-body-bottom-shadow: inset 0 -11px 8px -10px
 
   align-items: center;
   display: flex;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   justify-content: center;
 
   .dialog {

diff --git a/src/components/Dialog/dialog.module.scss b/src/components/Dialog/dialog.module.scss
@@ -1,5 +1,5 @@
 .dialog {
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   transform-origin: 50% 50%;
   width: 352px;
 

diff --git a/src/components/Dropdown/dropdown.module.scss b/src/components/Dropdown/dropdown.module.scss
@@ -1,6 +1,6 @@
 .main-wrapper {
   display: inline-block;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   white-space: nowrap;
 
   .reference-wrapper {
@@ -24,7 +24,7 @@
   padding: $space-xs;
   box-shadow: $shadow-object-m;
   border-radius: $border-radius-l; // TODO: ENG-46367 Add DropdownSize type and handle mapping via trigger size, then L 24px, M 20px, S 16px border-radius determined by size of the trigger.
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   min-width: 200px;
   opacity: 0;
   white-space: normal;

diff --git a/src/components/Form/form.module.scss b/src/components/Form/form.module.scss
@@ -96,7 +96,7 @@
   &-label {
     display: inline-block;
     flex-grow: 0;
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
     overflow: hidden;
     white-space: nowrap;
     text-align: right;

diff --git a/src/components/InfoBar/infoBar.module.scss b/src/components/InfoBar/infoBar.module.scss
@@ -3,7 +3,7 @@
   border-radius: var(--info-bar-border-radius);
   color: var(--info-bar-text-color);
   display: flex;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   gap: $space-m;
   padding: $space-ml;
   width: 100%;

diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss
@@ -18,7 +18,7 @@
     border-radius: $border-radius-m;
     box-sizing: border-box;
     color: var(--input-text-color);
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
     font-size: $text-font-size-3;
     line-height: $text-line-height-1;
     min-width: 120px;
@@ -966,7 +966,7 @@
     border-radius: $border-radius-m;
     box-sizing: border-box;
     color: var(--input-text-color);
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
     font-size: $text-font-size-3;
     line-height: $text-line-height-4;
     min-height: calc($text-line-height-4 + $space-xxxs + $space-xs * 2);

diff --git a/src/components/Label/label.module.scss b/src/components/Label/label.module.scss
@@ -15,7 +15,7 @@
 
   .text-style {
     color: var(--text-primary-color);
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
 
     &.large {
       font-size: $text-font-size-5;

diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex: auto;
   flex-direction: column;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   height: 100%;
 
   /* fix firefox can't set height smaller than content on flex item */

diff --git a/src/components/Link/link.module.scss b/src/components/Link/link.module.scss
@@ -1,6 +1,6 @@
 .link-style {
   cursor: pointer;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   font-weight: $text-font-weight-semibold;
   font-size: $text-font-size-2;
   width: fit-content;

diff --git a/src/components/List/list.module.scss b/src/components/List/list.module.scss
@@ -1,6 +1,6 @@
 .list-container {
   display: flex;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   list-style: none;
   margin: 0;
   padding: 0;

diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
@@ -1,7 +1,7 @@
 .modal {
   display: flex;
   flex-direction: column;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   max-height: 70vh;
   overflow: hidden;
   transform-origin: 50% 0;

diff --git a/src/components/Navbar/navbar.module.scss b/src/components/Navbar/navbar.module.scss
@@ -7,7 +7,7 @@
   color: var(--navbar-text-color);
   display: flex;
   flex-direction: row;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   height: 60px;
   justify-content: space-between;
   padding: 0 $space-ml;

diff --git a/src/components/Pagination/pagination.module.scss b/src/components/Pagination/pagination.module.scss
@@ -5,7 +5,7 @@
 
   align-items: center;
   display: flex;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   padding: $space-xxs 0;
 
   span,

diff --git a/src/components/Panel/panel.module.scss b/src/components/Panel/panel.module.scss
@@ -10,7 +10,7 @@
   .panel {
     display: flex;
     flex-direction: column;
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
     position: absolute;
     padding: 0 $space-xl;
     background: var(--background-color);

diff --git a/src/components/PersistentBar/persistentBar.module.scss b/src/components/PersistentBar/persistentBar.module.scss
@@ -15,7 +15,7 @@
   }
 
   .content {
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
     font-style: normal;
     font-weight: $text-font-weight-light;
     font-size: $text-font-size-2;

diff --git a/src/components/Select/select.module.scss b/src/components/Select/select.module.scss
@@ -8,7 +8,7 @@ $multi-select-count-offset: 54px;
 }
 
 .select-wrapper {
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   position: relative;
   width: 100%;
 

diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
@@ -56,7 +56,7 @@ $small-min-label-offset-with-steps: 0;
 
 // Default size is medium
 .slider-container {
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   height: $medium-slider-height + $medium-label-height;
   position: relative;
 
@@ -112,7 +112,7 @@ $small-min-label-offset-with-steps: 0;
       color: var(--slider-value-text-color);
       cursor: pointer;
       display: inline-block;
-      font-family: $octuple-font-family;
+      font-family: var(--font-stack-full);
       font-size: $text-font-size-2;
       padding: 0 $space-xxxs;
       position: absolute;
@@ -276,7 +276,7 @@ $small-min-label-offset-with-steps: 0;
   .slider-value {
     bottom: 0;
     color: var(--slider-value-text-color);
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
     font-size: $text-font-size-2;
     padding: 0 $space-xxxs;
     position: absolute;
@@ -285,7 +285,7 @@ $small-min-label-offset-with-steps: 0;
 
   .extremity-label {
     color: var(--slider-extremity-text-color);
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
     font-size: $text-font-size-2;
     position: absolute;
     bottom: 0;

diff --git a/src/components/Snackbar/snackbar.module.scss b/src/components/Snackbar/snackbar.module.scss
@@ -2,7 +2,7 @@
   align-items: center;
   box-shadow: $shadow-object-l;
   border: none;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   min-width: 21vw;
   max-width: min(42vw, 640px);
   animation: slideUpIn $motion-duration-extra-fast $motion-easing-easeinout 0s
@@ -20,7 +20,7 @@
 }
 
 .snackbar-container {
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   position: fixed;
   width: fit-content;
   z-index: $z-index-600;

diff --git a/src/components/Table/Styles/table.module.scss b/src/components/Table/Styles/table.module.scss
@@ -8,7 +8,7 @@
   .table {
     @include reset-component();
     position: relative;
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
     font-size: $table-font-size;
     background: var(--table-background-color);
 

diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
@@ -17,7 +17,7 @@
     background: var(--tab-background);
     cursor: pointer;
     display: flex;
-    font-family: $octuple-font-family;
+    font-family: var(--font-stack-full);
     justify-content: center;
     padding: $space-s $space-m;
     position: relative;
@@ -63,7 +63,7 @@
     }
 
     .label {
-      font-family: $octuple-font-family;
+      font-family: var(--font-stack-full);
       font-size: $text-font-size-3;
       font-weight: $text-font-weight-semibold;
       white-space: nowrap;
@@ -277,7 +277,7 @@
       border: var(--border-width) solid var(--border);
       border-radius: var(--border-radius);
       color: var(--label);
-      font-family: $octuple-font-family;
+      font-family: var(--font-stack-full);
       font-weight: $text-font-weight-semibold;
       height: var(--height);
       margin: 0 $space-s;

diff --git a/src/components/Tooltip/tooltip.module.scss b/src/components/Tooltip/tooltip.module.scss
@@ -30,7 +30,7 @@ $tooltip-arrow-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12);
   background: var(--bg);
   border-radius: var(--tooltip-border-radius);
   color: var(--text-color);
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   font-size: $text-font-size-1;
   overflow-wrap: break-word;
   padding: $space-xs;

diff --git a/src/components/Tree/Styles/tree.module.scss b/src/components/Tree/Styles/tree.module.scss
@@ -8,7 +8,7 @@ $tree-node-hightlight-color: inherit;
   @include reset-component();
   background: var(--background-color);
   border-radius: $tree-border-radius-base;
-  font-family: $octuple-font-family;
+  font-family: var(--font-stack-full);
   transition: background-color 0.3s;
 
   &-focused:not(:hover):not(&-active-focused) {

diff --git a/src/styles/themes/_definitions.scss b/src/styles/themes/_definitions.scss
@@ -80,8 +80,6 @@ $tree-node-selected-bg: var(--primary-color);
 
 // BEGIN: NON-COLOR DEFINITIONS
 
-$octuple-font-family: var(--font-stack-full);
-
 $text-font-size-1: 12px;
 $text-font-size-2: 14px;
 $text-font-size-3: 16px;