@fluentui/web-components 2.3.0 → 2.5.0

package/dist/esm/design-tokens.js

@@ -17,6 +17,7 @@ import { neutralLayer4 as neutralLayer4Algorithm } from './color/recipes/neutral
 import { accentBase, middleGrey } from './color/utilities/color-constants';
 import { StandardLuminance } from './color/utilities/base-layer-luminance';
 import { directionByIsDark } from './color/utilities/direction-by-is-dark';
+import { StandardFontWeight } from './utilities/type-ramp';
 const { create } = DesignToken;
 function createNonCss(name) {
     return DesignToken.create({ name, cssCustomPropertyName: null });
@@ -46,43 +47,79 @@ export const strokeWidth = create('stroke-width').withDefault(1);
 export const focusStrokeWidth = create('focus-stroke-width').withDefault(2);
 // Typography values
 /** @public */
-export const bodyFont = create('body-font').withDefault('Segoe UI, sans-serif');
+export const bodyFont = create('body-font').withDefault('"Segoe UI Variable", "Segoe UI", sans-serif');
+/** @public */
+export const fontWeight = create('font-weight').withDefault(StandardFontWeight.Normal);
+function fontVariations(sizeToken) {
+    return (element) => {
+        const size = sizeToken.getValueFor(element);
+        const weight = fontWeight.getValueFor(element);
+        if (size.endsWith('px')) {
+            const px = Number.parseFloat(size.replace('px', ''));
+            if (px <= 12) {
+                return `"wght" ${weight}, "opsz" 8`;
+            }
+            else if (px > 24) {
+                return `"wght" ${weight}, "opsz" 36`;
+            }
+        }
+        return `"wght" ${weight}, "opsz" 10.5`;
+    };
+}
 /** @public */
 export const typeRampBaseFontSize = create('type-ramp-base-font-size').withDefault('14px');
 /** @public */
 export const typeRampBaseLineHeight = create('type-ramp-base-line-height').withDefault('20px');
 /** @public */
+export const typeRampBaseFontVariations = create('type-ramp-base-font-variations').withDefault(fontVariations(typeRampBaseFontSize));
+/** @public */
 export const typeRampMinus1FontSize = create('type-ramp-minus-1-font-size').withDefault('12px');
 /** @public */
 export const typeRampMinus1LineHeight = create('type-ramp-minus-1-line-height').withDefault('16px');
 /** @public */
+export const typeRampMinus1FontVariations = create('type-ramp-minus-1-font-variations').withDefault(fontVariations(typeRampMinus1FontSize));
+/** @public */
 export const typeRampMinus2FontSize = create('type-ramp-minus-2-font-size').withDefault('10px');
 /** @public */
 export const typeRampMinus2LineHeight = create('type-ramp-minus-2-line-height').withDefault('14px');
 /** @public */
+export const typeRampMinus2FontVariations = create('type-ramp-minus-2-font-variations').withDefault(fontVariations(typeRampMinus2FontSize));
+/** @public */
 export const typeRampPlus1FontSize = create('type-ramp-plus-1-font-size').withDefault('16px');
 /** @public */
 export const typeRampPlus1LineHeight = create('type-ramp-plus-1-line-height').withDefault('22px');
 /** @public */
+export const typeRampPlus1FontVariations = create('type-ramp-plus-1-font-variations').withDefault(fontVariations(typeRampPlus1FontSize));
+/** @public */
 export const typeRampPlus2FontSize = create('type-ramp-plus-2-font-size').withDefault('20px');
 /** @public */
 export const typeRampPlus2LineHeight = create('type-ramp-plus-2-line-height').withDefault('26px');
 /** @public */
+export const typeRampPlus2FontVariations = create('type-ramp-plus-2-font-variations').withDefault(fontVariations(typeRampPlus2FontSize));
+/** @public */
 export const typeRampPlus3FontSize = create('type-ramp-plus-3-font-size').withDefault('24px');
 /** @public */
 export const typeRampPlus3LineHeight = create('type-ramp-plus-3-line-height').withDefault('32px');
 /** @public */
+export const typeRampPlus3FontVariations = create('type-ramp-plus-3-font-variations').withDefault(fontVariations(typeRampPlus3FontSize));
+/** @public */
 export const typeRampPlus4FontSize = create('type-ramp-plus-4-font-size').withDefault('28px');
 /** @public */
 export const typeRampPlus4LineHeight = create('type-ramp-plus-4-line-height').withDefault('36px');
 /** @public */
+export const typeRampPlus4FontVariations = create('type-ramp-plus-4-font-variations').withDefault(fontVariations(typeRampPlus4FontSize));
+/** @public */
 export const typeRampPlus5FontSize = create('type-ramp-plus-5-font-size').withDefault('32px');
 /** @public */
 export const typeRampPlus5LineHeight = create('type-ramp-plus-5-line-height').withDefault('40px');
 /** @public */
+export const typeRampPlus5FontVariations = create('type-ramp-plus-5-font-variations').withDefault(fontVariations(typeRampPlus5FontSize));
+/** @public */
 export const typeRampPlus6FontSize = create('type-ramp-plus-6-font-size').withDefault('40px');
 /** @public */
 export const typeRampPlus6LineHeight = create('type-ramp-plus-6-line-height').withDefault('52px');
+/** @public */
+export const typeRampPlus6FontVariations = create('type-ramp-plus-6-font-variations').withDefault(fontVariations(typeRampPlus6FontSize));
 // Color recipe values
 /** @public */
 export const baseLayerLuminance = create('base-layer-luminance').withDefault(StandardLuminance.LightMode);

package/dist/esm/listbox-option/listbox-option.styles.js

@@ -2,11 +2,12 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles/size';
-import { accentFillRest, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthFocus, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillRest, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthFocus, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const optionStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       position: relative;
-      font-family: ${bodyFont};
+      ${typeRampBase}
       background: ${neutralFillStealthRest};
       border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${focusStrokeWidth} * 1px) solid transparent;
@@ -14,9 +15,7 @@ export const optionStyles = (context, definition) => css `
       color: ${neutralForegroundRest};
       cursor: pointer;
       fill: currentcolor;
-      font-size: ${typeRampBaseFontSize};
       height: calc(${heightNumber} * 1px);
-      line-height: ${typeRampBaseLineHeight};
       outline: none;
       overflow: hidden;
       align-items: center;

package/dist/esm/menu-item/menu-item.styles.js

@@ -2,12 +2,13 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
-import { bodyFont, controlCornerRadius, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { controlCornerRadius, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const menuItemStyles = (context, definition) => css `
     ${display('grid')} :host {
       contain: layout;
       overflow: visible;
-      font-family: ${bodyFont};
+      ${typeRampBase}
       outline: none;
       box-sizing: border-box;
       height: calc(${heightNumber} * 1px);
@@ -20,8 +21,6 @@ export const menuItemStyles = (context, definition) => css `
       color: ${neutralForegroundRest};
       fill: currentcolor;
       cursor: pointer;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
       border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${strokeWidth} * 1px) solid transparent;
     }

package/dist/esm/radio/radio.styles.js

@@ -2,7 +2,8 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const radioStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       --input-size: calc((${heightNumber} / 2) + ${designUnit});
@@ -36,14 +37,12 @@ export const radioStyles = (context, definition) => css `
     }
 
     .label {
-      font-family: ${bodyFont};
+      ${typeRampBase}
       color: ${neutralForegroundRest};
       ${
 /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''} padding-inline-start: calc(${designUnit} * 2px + 2px);
       margin-inline-end: calc(${designUnit} * 2px + 2px);
       cursor: pointer;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
     }
 
     .control,

package/dist/esm/search/search.styles.js

@@ -2,7 +2,8 @@ import { css } from '@microsoft/fast-element';
 import { Button, DesignToken, display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { bodyFont, controlCornerRadius, density, designUnit, neutralFillInputRecipe, neutralFillStealthRecipe, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
+import { controlCornerRadius, density, designUnit, neutralFillInputRecipe, neutralFillStealthRecipe, neutralForegroundRest } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 const clearButtonHover = DesignToken.create("clear-button-hover").withDefault((target) => {
     const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
     const inputRecipe = neutralFillInputRecipe.getValueFor(target);
@@ -51,10 +52,8 @@ export const searchStyles = (context, definition) => css `
       border: none;
       border-radius: calc(${controlCornerRadius} * 1px);
       min-width: calc(${heightNumber} * 1px);
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      ${typeRampBase}
       outline: none;
-      font-family: ${bodyFont};
       padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);
     }
     .clear-button:hover {

package/dist/esm/select/select.styles.js

@@ -4,7 +4,8 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevationShadowFlyout } from '../styles/elevation';
 import { heightNumber } from '../styles/size';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, layerCornerRadius, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, layerCornerRadius, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, strokeWidth, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const selectFilledStyles = (context, definition) => css `
   :host {
     background: ${neutralFillSecondaryRest};
@@ -95,10 +96,8 @@ export const selectStyles = (context, definition) => css `
       box-sizing: border-box;
       cursor: pointer;
       display: flex;
-      font-size: ${typeRampBaseFontSize};
-      font-family: inherit;
+      ${typeRampBase}
       min-height: 100%;
-      line-height: ${typeRampBaseLineHeight};
       padding: 0 calc(${designUnit} * 2.25px);
       width: 100%;
     }

package/dist/esm/slider-label/slider-label.styles.js

@@ -1,10 +1,11 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { bodyFont, designUnit, disabledOpacity, neutralStrokeStrongRest, strokeWidth } from '../design-tokens';
+import { designUnit, disabledOpacity, neutralStrokeStrongRest, strokeWidth } from '../design-tokens';
+import { typeRampMinus1 } from '../styles/patterns/type-ramp';
 export const sliderLabelStyles = (context, definition) => css `
     ${display('block')} :host {
-      font-family: ${bodyFont};
+      ${typeRampMinus1}
     }
     .root {
       position: absolute;

package/dist/esm/styles/patterns/button.styles.js

@@ -2,7 +2,8 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber } from '../size';
-import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, accentStrokeControlActive, accentStrokeControlHover, accentStrokeControlRest, bodyFont, controlCornerRadius, density, designUnit, focusStrokeInner, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, accentStrokeControlActive, accentStrokeControlHover, accentStrokeControlRest, controlCornerRadius, density, designUnit, focusStrokeInner, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
+import { typeRampBase } from '../../styles/patterns/type-ramp';
 /**
  * @internal
  */
@@ -10,10 +11,8 @@ export const baseButtonStyles = (context, definition, interactivitySelector = ''
     ${display('inline-flex')} :host {
       position: relative;
       box-sizing: border-box;
-      font-family: ${bodyFont};
       outline: none;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      ${typeRampBase}
       height: calc(${heightNumber} * 1px);
       min-width: calc(${heightNumber} * 1px);
       color: ${neutralForegroundRest};

package/dist/esm/styles/patterns/index.js

@@ -1,2 +1,3 @@
 export * from './button.styles';
 export * from './input.styles';
+export * from './type-ramp';

package/dist/esm/styles/patterns/input.styles.js

@@ -1,7 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { DesignToken, disabledCursor, focusVisible, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { accentFillRest, bodyFont, controlCornerRadius, disabledOpacity, focusStrokeWidth, neutralFillInputFocus, neutralFillInputHover, neutralFillInputRecipe, neutralFillInputRest, neutralFillSecondaryHover, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralForegroundHintRecipe, neutralForegroundRest, neutralStrokeInputHover, neutralStrokeInputRest, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../../design-tokens';
+import { accentFillRest, controlCornerRadius, disabledOpacity, focusStrokeWidth, neutralFillInputFocus, neutralFillInputHover, neutralFillInputRecipe, neutralFillInputRest, neutralFillSecondaryHover, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralForegroundHintRecipe, neutralForegroundRest, neutralStrokeInputHover, neutralStrokeInputRest, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
+import { typeRampBase } from '../patterns/type-ramp';
 import { heightNumber } from '../size';
 const placeholderRest = DesignToken.create('input-placeholder-rest').withDefault((target) => {
     const baseRecipe = neutralFillInputRecipe.getValueFor(target);
@@ -28,9 +29,7 @@ const filledPlaceholderHover = DesignToken.create('input-filled-placeholder-hove
  */
 export const inputStyles = (context, definition, rootSelector) => css `
   :host {
-    font-family: ${bodyFont};
-    font-size: ${typeRampBaseFontSize};
-    line-height: ${typeRampBaseLineHeight};
+    ${typeRampBase}
     color: ${neutralForegroundRest};
     fill: currentcolor;
     outline: none;
@@ -67,8 +66,7 @@ export const inputStyles = (context, definition, rootSelector) => css `
     display: block;
     color: ${neutralForegroundRest};
     cursor: pointer;
-    font-size: ${typeRampBaseFontSize};
-    line-height: ${typeRampBaseLineHeight};
+    ${typeRampBase}
     margin-bottom: 4px;
   }
 

package/dist/esm/styles/patterns/type-ramp.js

@@ -0,0 +1,74 @@
+import { cssPartial } from '@microsoft/fast-element';
+import { bodyFont, typeRampBaseFontSize, typeRampBaseFontVariations, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1FontVariations, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2FontVariations, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1FontVariations, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2FontVariations, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3FontVariations, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4FontVariations, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5FontVariations, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6FontVariations, typeRampPlus6LineHeight, } from '../../design-tokens';
+/** @public */
+export const typeRampBase = cssPartial `
+  font-family: ${bodyFont};
+  font-size: ${typeRampBaseFontSize};
+  line-height: ${typeRampBaseLineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampBaseFontVariations};
+`;
+/** @public */
+export const typeRampMinus1 = cssPartial `
+  font-family: ${bodyFont};
+  font-size: ${typeRampMinus1FontSize};
+  line-height: ${typeRampMinus1LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampMinus1FontVariations};
+`;
+/** @public */
+export const typeRampMinus2 = cssPartial `
+  font-family: ${bodyFont};
+  font-size: ${typeRampMinus2FontSize};
+  line-height: ${typeRampMinus2LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampMinus2FontVariations};
+`;
+/** @public */
+export const typeRampPlus1 = cssPartial `
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus1FontSize};
+  line-height: ${typeRampPlus1LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus1FontVariations};
+`;
+/** @public */
+export const typeRampPlus2 = cssPartial `
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus2FontSize};
+  line-height: ${typeRampPlus2LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus2FontVariations};
+`;
+/** @public */
+export const typeRampPlus3 = cssPartial `
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus3FontSize};
+  line-height: ${typeRampPlus3LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus3FontVariations};
+`;
+/** @public */
+export const typeRampPlus4 = cssPartial `
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus4FontSize};
+  line-height: ${typeRampPlus4LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus4FontVariations};
+`;
+/** @public */
+export const typeRampPlus5 = cssPartial `
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus5FontSize};
+  line-height: ${typeRampPlus5LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus5FontVariations};
+`;
+/** @public */
+export const typeRampPlus6 = cssPartial `
+  font-family: ${bodyFont};
+  font-size: ${typeRampPlus6FontSize};
+  line-height: ${typeRampPlus6LineHeight};
+  font-weight: initial;
+  font-variation-settings: ${typeRampPlus6FontVariations};
+`;

package/dist/esm/switch/switch.styles.js

@@ -2,7 +2,8 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const switchStyles = (context, definition) => css `
     :host([hidden]) {
       display: none;
@@ -86,8 +87,7 @@ export const switchStyles = (context, definition) => css `
     .status-message {
       color: ${neutralForegroundRest};
       cursor: pointer;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      ${typeRampBase}
     }
 
     .label__hidden {
@@ -97,8 +97,7 @@ export const switchStyles = (context, definition) => css `
 
     .label {
       color: ${neutralForegroundRest};
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      ${typeRampBase}
       margin-inline-end: calc(${designUnit} * 2px + 2px);
       cursor: pointer;
     }

package/dist/esm/tabs/tab/tab.styles.js

@@ -2,14 +2,12 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber } from '../../styles';
-import { bodyFont, controlCornerRadius, density, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../../design-tokens';
+import { controlCornerRadius, density, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, strokeWidth, } from '../../design-tokens';
+import { typeRampBase } from '../../styles/patterns/type-ramp';
 export const tabStyles = (context, definition) => css `
       ${display('inline-flex')} :host {
         box-sizing: border-box;
-        font-family: ${bodyFont};
-        font-size: ${typeRampBaseFontSize};
-        font-weight: 400;
-        line-height: ${typeRampBaseLineHeight};
+        ${typeRampBase}
         height: calc((${heightNumber} + (${designUnit} * 2)) * 1px);
         padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
         color: ${neutralForegroundRest};

package/dist/esm/tabs/tab-panel/tab-panel.styles.js

@@ -1,13 +1,11 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, density, designUnit, typeRampBaseFontSize, typeRampBaseLineHeight } from '../../design-tokens';
+import { density, designUnit } from '../../design-tokens';
+import { typeRampBase } from '../../styles/patterns/type-ramp';
 export const tabPanelStyles = (context, definition) => css `
   ${display('block')} :host {
     box-sizing: border-box;
-    font-family: ${bodyFont};
-    font-size: ${typeRampBaseFontSize};
-    font-weight: 400;
-    line-height: ${typeRampBaseLineHeight};
+    ${typeRampBase}
     padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
   }
 `;

package/dist/esm/tabs/tabs.styles.js

@@ -1,14 +1,13 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { accentFillRest, bodyFont, controlCornerRadius, focusStrokeWidth, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillRest, controlCornerRadius, focusStrokeWidth, neutralForegroundRest, } from '../design-tokens';
 import { heightNumber } from '../styles';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const tabsStyles = (context, definition) => css `
       ${display('grid')} :host {
         box-sizing: border-box;
-        font-family: ${bodyFont};
-        font-size: ${typeRampBaseFontSize};
-        line-height: ${typeRampBaseLineHeight};
+        ${typeRampBase}
         color: ${neutralForegroundRest};
         grid-template-columns: auto 1fr auto;
         grid-template-rows: auto 1fr;

package/dist/esm/tooltip/tooltip.styles.js

@@ -1,7 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { elevationShadowTooltip } from '../styles/index';
-import { bodyFont, controlCornerRadius, fillColor, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { controlCornerRadius, fillColor, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const tooltipStyles = (context, definition) => css `
     :host {
       position: relative;
@@ -21,9 +22,7 @@ export const tooltipStyles = (context, definition) => css `
       padding: 4px 12px;
       height: fit-content;
       width: fit-content;
-      font-family: ${bodyFont};
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      ${typeRampBase}
       white-space: nowrap;
       box-shadow: ${elevationShadowTooltip};
     }

package/dist/esm/tree-item/tree-item.styles.js

@@ -2,7 +2,8 @@ import { css, cssPartial } from '@microsoft/fast-element';
 import { DesignToken, disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
-import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 const ltr = css `
   .expand-collapse-button svg {
     transform: rotate(0deg);
@@ -99,9 +100,7 @@ export const treeItemStyles = (context, definition) => css `
       width: 100%;
       height: calc(${heightNumber} * 1px);
       margin-inline-start: calc(${designUnit} * 2px + 8px);
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
-      font-weight: 400;
+      ${typeRampBase}
     }
 
     .items {

package/dist/esm/utilities/type-ramp.js

@@ -0,0 +1,12 @@
+/** @public */
+export const StandardFontWeight = {
+    Thin: 100,
+    ExtraLight: 200,
+    Light: 300,
+    Normal: 400,
+    Medium: 500,
+    SemiBold: 600,
+    Bold: 700,
+    ExtraBold: 800,
+    Black: 900,
+};