fix: set custom css token --default-font-family to apply to all eleme…

…nts in DOM (#2677)

.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;
   }
 

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 {

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;

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;

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;

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 {

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;

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;

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'] {

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;
   }
 }

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,15 +68,14 @@ $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);
     }
 
     .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;
         }

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);
 

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;
   }

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;

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;
 }

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) {

packages/mgt-components/src/styles/shared-styles.scss

@@ -8,16 +8,28 @@
 @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;
 }
 
 :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;

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;