@fluentui/web-components 2.4.0 → 2.5.2

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