@fluentui/web-components 2.3.1 → 2.5.1

package/dist/esm/_docs/design-system/color-explorer/components/swatch.js

@@ -0,0 +1,157 @@
+import { __decorate } from "tslib";
+import { contrastRatio, parseColor } from '@microsoft/fast-colors';
+import { attr, css, customElement, html, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { elevation, fillColor, neutralForegroundHint } from '../../../../index-rollup';
+export var SwatchTypes;
+(function (SwatchTypes) {
+    SwatchTypes["fill"] = "fill";
+    SwatchTypes["foreground"] = "foreground";
+    SwatchTypes["outline"] = "outline";
+})(SwatchTypes || (SwatchTypes = {}));
+const template = html `
+  <template class="${x => x.type}">
+    <div class="icon" style="${x => x.iconStyle}" title="${x => x.contrastMessage}"></div>
+    <code class="recipe-name"> ${x => x.recipeName} </code>
+    <code class="hex-code"> ${x => x.colorValue} </code>
+  </template>
+`;
+const styles = css `
+  :host {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto;
+    align-items: center;
+    width: 100%;
+    padding: 4px 0;
+    box-sizing: border-box;
+    color: ${neutralForegroundHint};
+    font-size: 12px;
+    grid-column-gap: 16px;
+    justify-items: start;
+  }
+  :host(.foreground) .icon {
+    border: 1px solid black;
+  }
+  :host(.foreground) .icon::before {
+    font-size: 13px;
+    content: 'A';
+    font-weight: 400;
+  }
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 2px;
+    box-sizing: border-box;
+    --elevation: 4;
+    ${elevation}
+  }
+  .recipe-name {
+    grid-column: 2;
+    grid-row: 1;
+  }
+  .hex-code {
+    grid-column: 3;
+    grid-row: 1;
+  }
+`;
+let AppSwatch = class AppSwatch extends FoundationElement {
+    foregroundRecipeChanged() {
+        this.updateObservables();
+    }
+    fillRecipeChanged() {
+        this.updateObservables();
+    }
+    outlineRecipeChanged() {
+        this.updateObservables();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateObservables();
+    }
+    updateObservables() {
+        this.updateIconStyle();
+        this.updateContrastMessage();
+        this.updateColorValue();
+    }
+    tokenCSS(token) {
+        return token && typeof token.createCSS === 'function' ? token.createCSS() : '';
+    }
+    evaluateToken(token) {
+        return (token === null || token === void 0 ? void 0 : token.getValueFor(this).toColorString()) || '';
+    }
+    updateIconStyle() {
+        const background = `background-color: ${this.tokenCSS(this.fillRecipe)}`;
+        this.iconStyle =
+            this.type === SwatchTypes.outline
+                ? `border: 4px solid ${this.tokenCSS(this.outlineRecipe)}; ${background}`
+                : this.type === SwatchTypes.foreground
+                    ? `color: ${this.tokenCSS(this.foregroundRecipe)}; ${background}`
+                    : background;
+    }
+    formatContrast(a, b) {
+        return a && b
+            ? contrastRatio(parseColor(this.evaluateToken(a)), parseColor(this.evaluateToken(b))).toFixed(2)
+            : '';
+    }
+    formatBackgroundContrast(a, b) {
+        return `BG contrast: ${this.formatContrast(a, b)} : 1`;
+    }
+    formatForegroundContrast(a, b) {
+        return `Text contrast: ${this.formatContrast(a, b)} : 1`;
+    }
+    updateContrastMessage() {
+        const backgroundContrastMessage = this.formatBackgroundContrast(this.type === SwatchTypes.foreground
+            ? this.foregroundRecipe
+            : this.type === SwatchTypes.outline
+                ? this.outlineRecipe
+                : this.fillRecipe, this.type === SwatchTypes.foreground || this.type === SwatchTypes.outline ? this.fillRecipe : fillColor);
+        this.contrastMessage =
+            this.type === SwatchTypes.fill
+                ? backgroundContrastMessage.concat('\n', this.formatForegroundContrast(this.fillRecipe, this.foregroundRecipe))
+                : backgroundContrastMessage;
+    }
+    updateColorValue() {
+        const recipe = this.type === SwatchTypes.outline
+            ? this.outlineRecipe
+            : this.type === SwatchTypes.foreground
+                ? this.foregroundRecipe
+                : this.fillRecipe;
+        this.colorValue = this.evaluateToken(recipe).toUpperCase();
+    }
+};
+__decorate([
+    attr
+], AppSwatch.prototype, "type", void 0);
+__decorate([
+    attr({ attribute: 'recipe-name' })
+], AppSwatch.prototype, "recipeName", void 0);
+__decorate([
+    observable
+], AppSwatch.prototype, "foregroundRecipe", void 0);
+__decorate([
+    observable
+], AppSwatch.prototype, "fillRecipe", void 0);
+__decorate([
+    observable
+], AppSwatch.prototype, "outlineRecipe", void 0);
+__decorate([
+    observable
+], AppSwatch.prototype, "iconStyle", void 0);
+__decorate([
+    observable
+], AppSwatch.prototype, "contrastMessage", void 0);
+__decorate([
+    observable
+], AppSwatch.prototype, "colorValue", void 0);
+AppSwatch = __decorate([
+    customElement({
+        name: 'app-swatch',
+        template,
+        styles,
+    })
+], AppSwatch);
+export { AppSwatch };

package/dist/esm/_docs/design-system/color-explorer/custom-elements.js

@@ -0,0 +1,3 @@
+import { layerBackground } from './components/layer-background';
+export { layerBackground };
+export const appComponents = [layerBackground()];

package/dist/esm/_docs/design-system/color-explorer/index.js

@@ -0,0 +1,14 @@
+import { allComponents as fluentComponents, provideFluentDesignSystem } from '../../../index-rollup';
+import { fastToolingColorPicker } from './components/color-picker';
+import { App } from './app';
+import { appComponents } from './custom-elements';
+export function init() {
+    provideFluentDesignSystem()
+        .register(fluentComponents)
+        .withPrefix('fast-tooling')
+        .register(fastToolingColorPicker())
+        .withPrefix('app')
+        .register(appComponents);
+}
+App;
+export { App } from './app';

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

@@ -1,7 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { DesignToken, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { bodyFont, controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, layerCornerRadius, neutralFillLayerAltRest, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillStealthRecipe, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../../design-tokens';
+import { controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, layerCornerRadius, neutralFillLayerAltRest, neutralFillLayerRecipe, neutralFillLayerRest, neutralFillStealthRecipe, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../../design-tokens';
+import { typeRampBase } from '../../styles/patterns/type-ramp';
 import { heightNumber } from '../../styles/size';
 const neutralFillStealthRestOnNeutralFillLayerRest = DesignToken.create('neutral-fill-stealth-rest-on-neutral-fill-layer-rest').withDefault((target) => {
     const baseRecipe = neutralFillLayerRecipe.getValueFor(target);
@@ -21,10 +22,8 @@ const neutralFillStealthActiveOnNeutralFillLayerRest = DesignToken.create('neutr
 export const accordionItemStyles = (context, definition) => css `
     ${display('flex')} :host {
       box-sizing: border-box;
-      font-family: ${bodyFont};
+      ${typeRampBase};
       flex-direction: column;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
       background: ${neutralFillLayerRest};
       color: ${neutralForegroundRest};
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
@@ -56,7 +55,7 @@ export const accordionItemStyles = (context, definition) => css `
       text-align: left;
       color: inherit;
       cursor: pointer;
-      font-family: inherit;
+      font: inherit;
     }
 
     .button::before {

package/dist/esm/accordion/accordion.styles.js

@@ -1,13 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, designUnit, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { designUnit, neutralForegroundRest } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const accordionStyles = (context, definition) => css `
     ${display('flex')} :host {
       box-sizing: border-box;
       flex-direction: column;
-      font-family: ${bodyFont};
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      ${typeRampBase}
       color: ${neutralForegroundRest};
       gap: calc(${designUnit} * 1px);
     }

package/dist/esm/badge/badge.styles.js

@@ -1,12 +1,11 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { accentFillRest, bodyFont, controlCornerRadius, designUnit, foregroundOnAccentRest, neutralFillSecondaryRest, neutralForegroundRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight, } from '../design-tokens';
+import { accentFillRest, controlCornerRadius, designUnit, foregroundOnAccentRest, neutralFillSecondaryRest, neutralForegroundRest, strokeWidth, typeRampMinus1LineHeight, } from '../design-tokens';
+import { typeRampMinus1 } from '../styles/patterns/type-ramp';
 export const badgeStyles = (context, definition) => css `
     ${display('inline-block')} :host {
       box-sizing: border-box;
-      font-family: ${bodyFont};
-      font-size: ${typeRampMinus1FontSize};
-      line-height: ${typeRampMinus1LineHeight};
+      ${typeRampMinus1};
     }
 
     .control {

package/dist/esm/breadcrumb/breadcrumb.styles.js

@@ -1,12 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const breadcrumbStyles = (context, definition) => css `
   ${display('inline-block')} :host {
     box-sizing: border-box;
-    font-family: ${bodyFont};
-    font-size: ${typeRampBaseFontSize};
-    line-height: ${typeRampBaseLineHeight};
+    ${typeRampBase};
   }
 
   .list {

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

@@ -1,7 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { bodyFont, controlCornerRadius, focusStrokeOuter, focusStrokeWidth, neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { controlCornerRadius, focusStrokeOuter, focusStrokeWidth, neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, strokeWidth, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 import { heightNumber } from '../styles/index';
 export const breadcrumbItemStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
@@ -9,9 +10,7 @@ export const breadcrumbItemStyles = (context, definition) => css `
       color: ${neutralForegroundRest};
       fill: currentcolor;
       box-sizing: border-box;
-      font-family: ${bodyFont};
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      ${typeRampBase};
       min-width: calc(${heightNumber} * 1px);
       border-radius: calc(${controlCornerRadius} * 1px);
       outline: none;

package/dist/esm/calendar/calendar.styles.js

@@ -1,8 +1,9 @@
 import { css } from "@microsoft/fast-element";
 import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { accentFillRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, fillColor, foregroundOnAccentRest, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillRest, baseHeightMultiplier, controlCornerRadius, density, designUnit, fillColor, foregroundOnAccentRest, neutralForegroundHint, neutralForegroundRest, strokeWidth, } from '../design-tokens';
 import { DirectionalStyleSheetBehavior } from '../styles';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 /**
  * LTR styles for calendar
  * @internal
@@ -29,9 +30,7 @@ export const calendarStyles = (context, definition) => css `
 ${display("inline-block")} :host {
   --calendar-cell-size: calc((${baseHeightMultiplier} + 2 + ${density}) * ${designUnit} * 1px);
   --calendar-gap: 2px;
-  font-family: ${bodyFont};
-  font-size: ${typeRampBaseFontSize};
-  line-height: ${typeRampBaseLineHeight};
+  ${typeRampBase}
   color: ${neutralForegroundRest};
 }
 

package/dist/esm/checkbox/checkbox.styles.js

@@ -2,7 +2,8 @@ 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';
-import { accentFillActive, accentFillHover, accentFillRest, bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, controlCornerRadius, 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 checkboxStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       align-items: center;
@@ -32,14 +33,12 @@ export const checkboxStyles = (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};
     }
 
     slot[name='checked-indicator'],

package/dist/esm/combobox/combobox.styles.js

@@ -2,7 +2,8 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
 import { selectFilledStyles, selectStyles } from '../select/select.styles';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
+import { strokeWidth } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const comboboxStyles = (context, definition) => css `
     ${selectStyles(context, definition)}
 
@@ -25,8 +26,7 @@ export const comboboxStyles = (context, definition) => css `
         background: transparent;
         border: none;
         color: inherit;
-        font-size: ${typeRampBaseFontSize};
-        line-height: ${typeRampBaseLineHeight};
+        ${typeRampBase}
         height: calc(100% - ${strokeWidth} * 1px));
         margin: auto 0;
         width: 100%;

package/dist/esm/data-grid/data-grid-cell.styles.js

@@ -1,16 +1,14 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { bodyFont, controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, } from '../design-tokens';
+import { typeRampBase } from '../styles/patterns/type-ramp';
 export const dataGridCellStyles = (context, definition) => css `
     :host {
       padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
       color: ${neutralForegroundRest};
       box-sizing: border-box;
-      font-family: ${bodyFont};
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
-      font-weight: 400;
+      ${typeRampBase}
       border: transparent calc(${focusStrokeWidth} * 1px) solid;
       overflow: hidden;
       outline: none;

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