From c435fa1680968900c6c52068f5a365a0c1871e81 Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Wed, 23 Aug 2023 12:18:20 +0000
Subject: [PATCH] set --default-font-family to apply to all elements in DOM

---
 .storybook/preview-body.html                   |  4 ++--
 index.html                                     |  2 +-
 .../components/base-person-card-section.scss   |  1 -
 .../src/components/mgt-agenda/mgt-agenda.scss  |  4 ----
 .../components/mgt-contact/mgt-contact.scss    |  1 -
 .../mgt-file-list/mgt-file-list.scss           |  1 -
 .../src/components/mgt-file/mgt-file.scss      |  1 -
 .../mgt-person-card/mgt-person-card.scss       |  1 -
 .../src/components/mgt-person/mgt-person.scss  |  1 -
 .../src/components/mgt-picker/mgt-picker.scss  |  4 +---
 .../mgt-tasks-base/mgt-tasks-base.scss         |  8 +-------
 .../src/components/mgt-tasks/mgt-tasks.scss    |  1 -
 .../mgt-taxonomy-picker.scss                   |  2 --
 .../mgt-teams-channel-picker.scss              |  3 ---
 .../mgt-search-results/mgt-search-results.scss |  3 ---
 .../mgt-arrow-options/mgt-arrow-options.scss   |  1 -
 .../src/styles/shared-styles.scss              | 18 +++++++++++++++---
 stories/samples/general.stories.js             |  6 +++++-
 18 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
index 8e6875c9bf..37a2869239 100644
--- a/.storybook/preview-body.html
+++ b/.storybook/preview-body.html
@@ -4,8 +4,8 @@
   #root {
     height: 100%;
     width: 100%;
-    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
-      'Helvetica Neue', sans-serif;
+    font-family: var(--default-font-family, 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
+      'Helvetica Neue', sans-serif);
     padding: 0!important;
   }
 
diff --git a/index.html b/index.html
index acb4a8839c..74a1b5f0a1 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
       body {
         background-color: var(--fill-color);
         color: var(--neutral-foreground-rest);
-        font-family: var(--body-font);
+        font-family: var(--default-font-family, var(--body-font));
         padding: 24px 12px;
       }
       .right-align {
diff --git a/packages/mgt-components/src/components/base-person-card-section.scss b/packages/mgt-components/src/components/base-person-card-section.scss
index 15c060fd95..b5b3bd8d78 100644
--- a/packages/mgt-components/src/components/base-person-card-section.scss
+++ b/packages/mgt-components/src/components/base-person-card-section.scss
@@ -19,7 +19,6 @@ $font-color: var(--font-color, #323130);
   }
 
   .no-data {
-    font-family: var(--default-font-family, 'Segoe UI');
     font-style: normal;
     font-weight: 600;
     font-size: 14px;
diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss
index a6db792700..827dbe101b 100644
--- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss
+++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.scss
@@ -27,7 +27,6 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
 
   .header {
     margin: $agenda-header-margin;
-    font-family: $font-family;
     font-size: $agenda-header-font-size;
     font-style: normal;
     font-weight: 400;
@@ -69,7 +68,6 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
       }
 
       &-time-container {
-        font-family: $font-family;
         font-style: normal;
         font-weight: 600;
         font-size: 12px;
@@ -107,7 +105,6 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
       }
 
       &-subject {
-        font-family: $font-family;
         font-style: normal;
         font-weight: 400;
         font-size: $agenda-event-subject-font-size;
@@ -125,7 +122,6 @@ $agenda-event-location-font-size: var(--agenda-event-location-font-size, 12px);
         .event {
           &-location {
             padding-inline-start: 3px;
-            font-family: $font-family;
             font-style: normal;
             font-weight: 400;
             font-size: $agenda-event-location-font-size;
diff --git a/packages/mgt-components/src/components/mgt-contact/mgt-contact.scss b/packages/mgt-components/src/components/mgt-contact/mgt-contact.scss
index 0fe1b102cc..922f2a86c1 100644
--- a/packages/mgt-components/src/components/mgt-contact/mgt-contact.scss
+++ b/packages/mgt-components/src/components/mgt-contact/mgt-contact.scss
@@ -54,7 +54,6 @@
 
           .part__link {
             color: $contact-link-color;
-            font-family: $font-family;
             font-size: 14px;
             cursor: pointer;
             text-overflow: ellipsis;
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss
index 988e732fa3..6ac9169acd 100644
--- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss
+++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss
@@ -27,7 +27,6 @@ $show-more-button-border-bottom-left-radius: var(
 $progress-ring-size: var(--progress-ring-size, 24px);
 
 :host {
-  font-family: $font-family;
   font-size: $font-size;
 
   .title {
diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.scss b/packages/mgt-components/src/components/mgt-file/mgt-file.scss
index 3dbb11b2d9..a1783b489a 100644
--- a/packages/mgt-components/src/components/mgt-file/mgt-file.scss
+++ b/packages/mgt-components/src/components/mgt-file/mgt-file.scss
@@ -28,7 +28,6 @@ $line3-font-weight: var(--file-line3-font-weight, $font-weight);
 $line3-text-transform: var(--file-line3-text-transform, initial);
 
 :host {
-  font-family: $font-family;
   font-size: $font-size;
   font-weight: $font-weight;
   border: $file-border;
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss
index b1ba3c2b3b..b7915ac789 100644
--- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss
+++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss
@@ -37,7 +37,6 @@ $person-card-base-icons-left-spacing: var(
 :host {
   box-shadow: $person-card-box-shadow;
   width: var(--mgt-flyout-set-width, 375px);
-  font-family: $font-family;
   overflow: hidden;
   user-select: none;
   border-radius: 8px;
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.scss b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
index 6e9a20e018..62f4f824a8 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.scss
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
@@ -40,7 +40,6 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px);
 
 :host {
   font-size: var(--default-font-size);
-  font-family: var(--default-font-family);
 
   .flyout {
     [slot='anchor'] {
diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss
index 2aa13f9094..a8ad4c6ff8 100644
--- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss
+++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss
@@ -11,10 +11,8 @@
 
 :host {
   --max-height: var(--picker-max-height, 380px);
-  
-  font-family: $font-family;
 
- .picker {
+  .picker {
     background-color: $picker-background-color;
   }
 }
diff --git a/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss b/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss
index 72235547d7..434aaa5546 100644
--- a/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss
+++ b/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss
@@ -20,7 +20,6 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
 $task-icon-color: var(--task-icon-color, $ms-color-gray120);
 
 :host {
-  font-family: $font-family;
   display: flex;
   flex-direction: column;
   color: $color;
@@ -57,7 +56,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
     }
 
     select {
-      font-family: var(--default-font-family, 'Segoe UI');
       font-size: var(--tasks-plan-title-font-size, 1.1em);
       padding: var(--tasks-plan-title-padding, 5px);
       border: none;
@@ -70,7 +68,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
     }
 
     .plan-title {
-      font-family: var(--default-font-family, 'Segoe UI');
       font-size: var(--tasks-plan-title-font-size, 1.1em);
       padding: var(--tasks-plan-title-padding, 5px);
     }
@@ -78,7 +75,7 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
     .add-bar {
       display: flex;
 
-      .add-bar-item{
+      .add-bar-item {
         flex: 1 1 auto;
       }
     }
@@ -470,7 +467,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
 
             input {
               flex: 1;
-              font-family: var(--default-font-family, 'Segoe UI');
               margin: var(--task-new-input-margin, 0 24px 0 16px);
               padding: var(--task-new-input-padding, 6px);
               font-size: var(--task-new-input-font-size, 14px);
@@ -527,7 +523,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
 
             select,
             input {
-              font-family: $font-family;
               font-size: 12px;
               font-weight: 600;
               border: var(--task-new-select-border, none);
@@ -563,7 +558,6 @@ $task-icon-color: var(--task-icon-color, $ms-color-gray120);
           height: var(--tasks-new-button-height, 32px);
           border-radius: 4px;
           border: var(--tasks-new-button-border, solid 1px #e5e5e5);
-          font-family: var(--default-font-family, 'Segoe UI');
           font-size: 14px;
           line-height: 20px;
         }
diff --git a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.scss b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.scss
index 730a335d0b..2a5a267159 100644
--- a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.scss
+++ b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.scss
@@ -52,7 +52,6 @@ $task-new-dropdown-border-radius: var(--task-new-dropdown-border-radius, calc(va
   padding: $tasks-padding;
   border: $tasks-border;
   border-radius: $tasks-border-radius;
-  font-family: $font-family;
 
   --skeleton-fill: var(--neutral-foreground-active);
 
diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
index bfbd89dfdb..4a82d0d514 100644
--- a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
+++ b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss
@@ -12,8 +12,6 @@
 :host {
   --max-height: var(--taxonomy-picker-max-height, 380px);
 
-  font-family: $font-family;
-
   .picker {
     background-color: $taxonomy-picker-background-color;
   }
diff --git a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss
index 0c60345ce0..d616badf6b 100644
--- a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss
+++ b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.scss
@@ -10,8 +10,6 @@
 @import './mgt-teams-channel-picker.theme';
 
 :host {
-  font-family: $font-family;
-
   .container {
     display: flex;
     flex-direction: column;
@@ -48,7 +46,6 @@
 
   .search-error-text,
   .loading-text {
-    font-family: $font-family;
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
diff --git a/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss b/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss
index fcc3923941..aded26d900 100644
--- a/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss
+++ b/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss
@@ -11,14 +11,12 @@ $answer-border-radius: var(--answer-border-radius, 4px);
 $answer-box-shadow: var(--answer-box-shadow, 0 3.2px 7.2px rgb(0 0 0 / 13.2%), 0 0.6px 1.8px rgb(0 0 0 / 10.8%));
 $answer-border: var(--answer-border, none);
 $answer-padding: var(--answer-padding, 10px);
-$font-family: var(--default-font-family);
 
 .search-results {
   scroll-margin: 100px;
 }
 
 .search-result-grid {
-  font-family: $font-family;
   font-size: 14px;
   margin: 16px 4px;
   display: grid;
@@ -27,7 +25,6 @@ $font-family: var(--default-font-family);
 }
 
 .search-result {
-  font-family: var(--default-font-family);
   font-size: 14px;
   margin: 16px 4px;
 }
diff --git a/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss b/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss
index ff98ae0de3..ef0e34e8b3 100644
--- a/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss
+++ b/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss
@@ -16,7 +16,6 @@ $arrow-options-btn-font-color: var(--arrow-options-button-font-color, var(--acce
 
 :host {
   position: relative;
-  font-family: $font-family;
 
   .header {
     &::part(control) {
diff --git a/packages/mgt-components/src/styles/shared-styles.scss b/packages/mgt-components/src/styles/shared-styles.scss
index 7e586f26b4..17372bedd5 100644
--- a/packages/mgt-components/src/styles/shared-styles.scss
+++ b/packages/mgt-components/src/styles/shared-styles.scss
@@ -8,6 +8,18 @@
 @import './shared-sass-variables';
 
 $focus-ring-style: var(--focus-ring-style, auto);
+$font-family: var(
+  --default-font-family,
+  'Segoe UI',
+  'Segoe UI Web (West European)',
+  'Segoe UI',
+  -apple-system,
+  'BlinkMacSystemFont',
+  'Roboto',
+  'Helvetica Neue',
+  sans-serif
+);
+$font-size: var(--default-font-size, 14px);
 
 :host([hidden]) {
   display: none;
@@ -15,9 +27,9 @@ $focus-ring-style: var(--focus-ring-style, auto);
 
 :host {
   display: block;
+  font-family: $font-family;
+  font-size: $font-size;
 
-  --default-font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, 'BlinkMacSystemFont', 'Roboto', 'Helvetica Neue', sans-serif;
-  --default-font-size: 14px;
   --theme-primary-color: #0078d7;
   --theme-dark-color: #005a9e;
 }
@@ -29,7 +41,7 @@ $focus-ring-style: var(--focus-ring-style, auto);
   // ensure default is set for other browsers
   /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   outline-color: var(--focus-ring-color, -webkit-focus-ring-color);
-  
+
   // set the style of the focus ring
   // this needs to be something other than auto in Firefox to use the custom color
   outline-style: $focus-ring-style;
diff --git a/stories/samples/general.stories.js b/stories/samples/general.stories.js
index 86c011bd3c..625dca20d5 100644
--- a/stories/samples/general.stories.js
+++ b/stories/samples/general.stories.js
@@ -198,7 +198,11 @@ if(body) applyTheme('dark', body);
 body {
   background-color: var(--fill-color);
   color: var(--neutral-foreground-rest);
-  font-family: var(--body-font);
+  font-family: var(--default-font-family, var(--body-font));
+  /* Uncomment to change the default font family */
+  /* --default-font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
+  /* Uncomment to change the fluent element font variable */
+  /* --body-font: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
 }
 .custom-focus {
   --focus-ring-color: red;