Ensure all web components leverage the body font variable (#16013)

* ensure all web components leverage the body font design token * Change files
microsoft · Nov 20, 2020 · b3be4d7 · b3be4d7
1 parent 3aa57f1
commit b3be4d7
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 0 deletions.
diff --git a/...ponents-2020-11-19-15-28-31-users-chhol-ensure-all-components-leverage-body-font-var.json b/...ponents-2020-11-19-15-28-31-users-chhol-ensure-all-components-leverage-body-font-var.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "ensure all web components leverage the body font design token",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-11-19T23:28:31.598Z"
+}
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -26,6 +26,7 @@ export const MenuItemStyles = css`
         color: ${neutralForegroundRestBehavior.var};
         fill: ${neutralForegroundRestBehavior.var};
         cursor: pointer;
+        font-family: var(--body-font);
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
         border-radius: calc(var(--corner-radius) * 1px);

diff --git a/packages/web-components/src/slider-label/slider-label.styles.ts b/packages/web-components/src/slider-label/slider-label.styles.ts
@@ -5,6 +5,7 @@ import { heightNumber, neutralOutlineRestBehavior } from '../styles';
 
 export const SliderLabelStyles = css`
   ${display('block')} :host {
+    font-family: var(--body-font);
   }
   .root {
     position: absolute;

diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts
@@ -43,6 +43,7 @@ export const TextFieldStyles = css`
         border: none;
         padding: 0 calc(var(--design-unit) * 2px + 1px);
         color: ${neutralForegroundRestBehavior.var};
+        font-family: inherit;
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
     }