@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/esm/spinner/spinner.js

@@ -1,16 +1,15 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
-import { ProgressRing } from '../progress-ring/progress-ring.js';
+import { BaseSpinner } from './spinner.base.js';
 /**
- * The base class used for constructing a fluent-spinner custom element
+ * A Spinner Custom HTML Element.
+ * Based on BaseSpinner and includes style and layout specific attributes
+ *
+ * @tag fluent-spinner
+ *
  * @public
  */
-export class Spinner extends ProgressRing {
+export class Spinner extends BaseSpinner {
 }
 __decorate([
     attr

package/dist/esm/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/spinner/spinner.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE;;;GAGG;AACH,MAAM,OAAO,OAAQ,SAAQ,YAAY;CAqBxC;AAXC;IADC,IAAI;qCACqB;AAU1B;IADC,IAAI;2CACiC"}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/spinner/spinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;;;;;;GAOG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;CAmBvC;AAVQ;IADN,IAAI;qCACqB;AASnB;IADN,IAAI;2CACiC"}

package/dist/esm/spinner/spinner.options.d.ts

@@ -0,0 +1,32 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * SpinnerAppearance constants
+ * @public
+ */
+export declare const SpinnerAppearance: {
+    readonly primary: "primary";
+    readonly inverted: "inverted";
+};
+/**
+ * A Spinner's appearance can be either primary or inverted
+ * @public
+ */
+export type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
+/**
+ * SpinnerSize constants
+ * @public
+ */
+export declare const SpinnerSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+    readonly huge: "huge";
+};
+/**
+ * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge
+ * @public
+ */
+export type SpinnerSize = ValuesOf<typeof SpinnerSize>;

package/dist/esm/spinner/spinner.styles.js

@@ -1,97 +1,158 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
-import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2 } from '../theme/design-tokens.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2, curveEasyEase, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, } from '../theme/design-tokens.js';
 export const styles = css `
-  ${display('flex')}
+  ${display('inline-flex')}
 
   :host {
-    display: flex;
-    align-items: center;
-    height: 32px;
-    width: 32px;
-    contain: content;
+    --duration: 1.5s;
+    --indicatorSize: ${strokeWidthThicker};
+    --size: 32px;
+    height: var(--size);
+    width: var(--size);
+    contain: strict;
+    content-visibility: auto;
   }
+
   :host([size='tiny']) {
-    height: 20px;
-    width: 20px;
+    --indicatorSize: ${strokeWidthThick};
+    --size: 20px;
   }
   :host([size='extra-small']) {
-    height: 24px;
-    width: 24px;
+    --indicatorSize: ${strokeWidthThick};
+    --size: 24px;
   }
   :host([size='small']) {
-    height: 28px;
-    width: 28px;
+    --indicatorSize: ${strokeWidthThick};
+    --size: 28px;
   }
   :host([size='large']) {
-    height: 36px;
-    width: 36px;
+    --indicatorSize: ${strokeWidthThicker};
+    --size: 36px;
   }
   :host([size='extra-large']) {
-    height: 40px;
-    width: 40px;
+    --indicatorSize: ${strokeWidthThicker};
+    --size: 40px;
   }
   :host([size='huge']) {
-    height: 44px;
-    width: 44px;
+    --indicatorSize: ${strokeWidthThickest};
+    --size: 44px;
+  }
+
+  .progress,
+  .background,
+  .spinner,
+  .start,
+  .end,
+  .indicator {
+    position: absolute;
+    inset: 0;
+  }
+
+  .progress,
+  .spinner,
+  .indicator {
+    animation: none var(--duration) infinite ${curveEasyEase};
   }
+
   .progress {
-    height: 100%;
-    width: 100%;
+    animation-timing-function: linear;
+    animation-name: spin-linear;
   }
 
   .background {
-    fill: none;
-    stroke: ${colorBrandStroke2};
-    stroke-width: 1.5px;
+    border: var(--indicatorSize) solid ${colorBrandStroke2};
+    border-radius: 50%;
   }
 
   :host([appearance='inverted']) .background {
-    stroke: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .spinner {
+    animation-name: spin-swing;
   }
 
-  .determinate {
-    stroke: ${colorBrandStroke1};
-    fill: none;
-    stroke-width: 1.5px;
-    stroke-linecap: round;
-    transform-origin: 50% 50%;
-    transform: rotate(-90deg);
-    transition: all 0.2s ease-in-out;
+  .start {
+    overflow: hidden;
+    right: 50%;
   }
 
-  :host([appearance='inverted']) .determinite {
-    stroke: ${colorNeutralStrokeOnBrand2};
+  .end {
+    overflow: hidden;
+    left: 50%;
   }
 
-  .indeterminate-indicator-1 {
-    stroke: ${colorBrandStroke1};
-    fill: none;
-    stroke-width: 1.5px;
-    stroke-linecap: round;
-    transform-origin: 50% 50%;
-    transform: rotate(-90deg);
-    transition: all 0.2s ease-in-out;
-    animation: spin-infinite 3s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
+  .indicator {
+    color: ${colorBrandStroke1};
+    box-sizing: border-box;
+    border-radius: 50%;
+    border: var(--indicatorSize) solid transparent;
+    border-block-start-color: currentcolor;
+    border-right-color: currentcolor;
   }
 
-  :host([appearance='inverted']) .indeterminate-indicator-1 {
-    stroke: ${colorNeutralStrokeOnBrand2};
+  :host([appearance='inverted']) .indicator {
+    color: ${colorNeutralStrokeOnBrand2};
+  }
+
+  .start .indicator {
+    rotate: 135deg; /* Starts 9 o'clock */
+    inset: 0 -100% 0 0;
+    animation-name: spin-start;
+  }
+
+  .end .indicator {
+    rotate: 135deg; /* Ends at 3 o'clock */
+    inset: 0 0 0 -100%;
+    animation-name: spin-end;
+  }
+
+  @keyframes spin-linear {
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
-  @keyframes spin-infinite {
+  @keyframes spin-swing {
     0% {
-      stroke-dasharray: 0.01px 43.97px;
+      transform: rotate(-135deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(225deg);
+    }
+  }
+
+  @keyframes spin-start {
+    0%,
+    100% {
       transform: rotate(0deg);
     }
     50% {
-      stroke-dasharray: 21.99px 21.99px;
-      transform: rotate(450deg);
+      transform: rotate(-80deg);
     }
+  }
+
+  @keyframes spin-end {
+    0%,
     100% {
-      stroke-dasharray: 0.01px 43.97px;
-      transform: rotate(1080deg);
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(70deg);
     }
   }
-`;
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    .background {
+      display: none;
+    }
+    .indicator {
+      border-color: Canvas;
+      border-block-start-color: Highlight;
+      border-right-color: Highlight;
+    }
+  `));
 //# sourceMappingURL=spinner.styles.js.map

package/dist/esm/spinner/spinner.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAE7G,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwCL,iBAAiB;;;;;;;;;cASjB,iBAAiB;;;;;;;;;;cAUjB,0BAA0B;;;;cAI1B,iBAAiB;;;;;;;;;;;cAWjB,0BAA0B;;;;;;;;;;;;;;;;;CAiBvC,CAAC"}
+{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;uBAIH,kBAAkB;;;;;;;;;uBASlB,gBAAgB;;;;uBAIhB,gBAAgB;;;;uBAIhB,gBAAgB;;;;uBAIhB,kBAAkB;;;;uBAIlB,kBAAkB;;;;uBAIlB,mBAAmB;;;;;;;;;;;;;;;;;+CAiBK,aAAa;;;;;;;;;yCASnB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;aAuB7C,iBAAiB;;;;;;;;;aASjB,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;GASjC,CAAC,CACH,CAAC"}

package/dist/esm/spinner/spinner.template.d.ts

@@ -0,0 +1,2 @@
+import type { Spinner } from './spinner.js';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Spinner, any>;

package/dist/esm/spinner/spinner.template.js

@@ -1,48 +1,17 @@
-import { html, when } from '@microsoft/fast-element';
-import { staticallyCompose } from '../utils/index.js';
-const progressSegments = 44;
-export function progressRingTemplate(options = {}) {
-    return html `
-    <template
-      role="progressbar"
-      aria-valuenow="${x => x.value}"
-      aria-valuemin="${x => x.min}"
-      aria-valuemax="${x => x.max}"
-    >
-      ${when(x => typeof x.value === 'number', html `
-          <svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate">
-            <circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle>
-            <circle
-              class="determinate"
-              part="determinate"
-              style="stroke-dasharray: ${x => (progressSegments * x.percentComplete) / 100}px ${progressSegments}px"
-              cx="8px"
-              cy="8px"
-              r="7px"
-            ></circle>
-          </svg>
-        `, html ` <slot name="indeterminate"> ${staticallyCompose(options.indeterminateIndicator)} </slot> `)}
-    </template>
-  `;
-}
-export const template = progressRingTemplate({
-    indeterminateIndicator: `
-    <svg class="progress" part="progress" viewBox="0 0 16 16">
-        <circle
-            class="background"
-            part="background"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-        <circle
-            class="indeterminate-indicator-1"
-            part="indeterminate-indicator-1"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-    </svg>
-  `,
-});
+import { html } from '@microsoft/fast-element';
+export const template = html `
+  <slot name="indicator">
+    <div class="background"></div>
+    <div class="progress">
+      <div class="spinner">
+        <div class="start">
+          <div class="indicator"></div>
+        </div>
+        <div class="end">
+          <div class="indicator"></div>
+        </div>
+      </div>
+    </div>
+  </slot>
+`;
 //# sourceMappingURL=spinner.template.js.map

package/dist/esm/spinner/spinner.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.template.js","sourceRoot":"","sources":["../../../src/spinner/spinner.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,gBAAgB,GAAW,EAAE,CAAC;AAEpC,MAAM,UAAU,oBAAoB,CAAoB,UAA+B,EAAE;IACvF,OAAO,IAAI,CAAG;;;uBAGO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;uBACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;uBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;;QAEzB,IAAI,CACJ,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,EAChC,IAAI,CAAG;;;;;;yCAM0B,CAAC,CAAC,EAAE,CAAC,CAAC,gBAAgB,GAAG,CAAC,CAAC,eAAe,CAAC,GAAG,GAAG,MAAM,gBAAgB;;;;;;SAMvG,EACD,IAAI,CAAG,gCAAgC,iBAAiB,CAAC,OAAO,CAAC,sBAAsB,CAAC,WAAW,CACpG;;GAEJ,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAiC,oBAAoB,CAAC;IACzE,sBAAsB,EAAE;;;;;;;;;;;;;;;;;GAiBvB;CACF,CAAC,CAAC"}
+{"version":3,"file":"spinner.template.js","sourceRoot":"","sources":["../../../src/spinner/spinner.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;;;;;;;;;;;;;CAcpC,CAAC"}

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

@@ -1,7 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../../utils/index.js';
 import { borderRadiusCircular, colorBrandBackground, colorBrandBackground2, colorBrandForeground1, colorBrandForeground2, colorBrandStroke2, colorNeutralBackground1, colorNeutralBackground4, colorNeutralBackground5, colorNeutralForeground1, colorNeutralForeground1Static, colorNeutralForeground3, colorNeutralForegroundInverted, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralStroke2, colorNeutralStrokeAccessible, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground3, colorPaletteGreenBackground1, colorPaletteGreenBackground3, colorPaletteGreenBorder2, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteRedBackground1, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedForeground1, colorPaletteRedForeground3, colorPaletteYellowBackground1, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowForeground2, colorTransparentStroke, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontWeightSemibold, lineHeightBase100, lineHeightBase200, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../../theme/design-tokens.js';
-const textPadding = spacingHorizontalXXS;
 export const badgeBaseStyles = css.partial `
   ${display('inline-flex')} :host {
     position: relative;
@@ -14,7 +13,7 @@ export const badgeBaseStyles = css.partial `
     line-height: ${lineHeightBase200};
     min-width: 20px;
     height: 20px;
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
     border-radius: ${borderRadiusCircular};
     border-color: ${colorTransparentStroke};
     background-color: ${colorBrandBackground};
@@ -71,7 +70,7 @@ export const badgeSizeStyles = css.partial `
     height: 16px;
     font-size: ${fontSizeBase100};
     line-height: ${lineHeightBase100};
-    padding-inline: calc(${spacingHorizontalXXS} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalXXS} + ${spacingHorizontalXXS});
   }
   :host([size='small']) ::slotted(svg) {
     font-size: 12px;
@@ -81,7 +80,7 @@ export const badgeSizeStyles = css.partial `
     height: 24px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalXS} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
   }
   :host([size='large']) ::slotted(svg) {
     font-size: 16px;
@@ -91,7 +90,7 @@ export const badgeSizeStyles = css.partial `
     height: 32px;
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
-    padding-inline: calc(${spacingHorizontalSNudge} + ${textPadding});
+    padding-inline: calc(${spacingHorizontalSNudge} + ${spacingHorizontalXXS});
   }
   :host([size='extra-large']) ::slotted(svg) {
     font-size: 20px;

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

@@ -1 +1 @@
-{"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"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"}

package/dist/esm/styles/partials/index.d.ts

@@ -0,0 +1,2 @@
+export * from './badge.partials.js';
+export { typographyBody1Styles, typographyBody1StrongStyles, typographyBody1StrongerStyles, typographyBody2Styles, typographyCaption1StrongStyles, typographyCaption1StrongerStyles, typographyCaption1Styles, typographyCaption2StrongStyles, typographyCaption2Styles, typographyDisplayStyles, typographyLargeTitleStyles, typographySubtitle1Styles, typographySubtitle2StrongerStyles, typographySubtitle2Styles, typographyTitle1Styles, typographyTitle2Styles, typographyTitle3Styles, } from './typography.partials.js';

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

@@ -1,2 +1,3 @@
 export * from './badge.partials.js';
+export { typographyBody1Styles, typographyBody1StrongStyles, typographyBody1StrongerStyles, typographyBody2Styles, typographyCaption1StrongStyles, typographyCaption1StrongerStyles, typographyCaption1Styles, typographyCaption2StrongStyles, typographyCaption2Styles, typographyDisplayStyles, typographyLargeTitleStyles, typographySubtitle1Styles, typographySubtitle2StrongerStyles, typographySubtitle2Styles, typographyTitle1Styles, typographyTitle2Styles, typographyTitle3Styles, } from './typography.partials.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/styles/partials/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/styles/partials/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/styles/partials/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,OAAO,EACL,qBAAqB,EACrB,2BAA2B,EAC3B,6BAA6B,EAC7B,qBAAqB,EACrB,8BAA8B,EAC9B,gCAAgC,EAChC,wBAAwB,EACxB,8BAA8B,EAC9B,wBAAwB,EACxB,uBAAuB,EACvB,0BAA0B,EAC1B,yBAAyB,EACzB,iCAAiC,EACjC,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,0BAA0B,CAAC"}

package/dist/esm/styles/partials/typography.partials.d.ts

@@ -0,0 +1,18 @@
+import { CSSDirective } from '@microsoft/fast-element';
+export declare const typographyBody1Styles: CSSDirective;
+export declare const typographyBody1StrongStyles: CSSDirective;
+export declare const typographyBody1StrongerStyles: CSSDirective;
+export declare const typographyBody2Styles: CSSDirective;
+export declare const typographyCaption1Styles: CSSDirective;
+export declare const typographyCaption1StrongStyles: CSSDirective;
+export declare const typographyCaption1StrongerStyles: CSSDirective;
+export declare const typographyCaption2Styles: CSSDirective;
+export declare const typographyCaption2StrongStyles: CSSDirective;
+export declare const typographySubtitle1Styles: CSSDirective;
+export declare const typographySubtitle2Styles: CSSDirective;
+export declare const typographySubtitle2StrongerStyles: CSSDirective;
+export declare const typographyTitle1Styles: CSSDirective;
+export declare const typographyTitle2Styles: CSSDirective;
+export declare const typographyTitle3Styles: CSSDirective;
+export declare const typographyLargeTitleStyles: CSSDirective;
+export declare const typographyDisplayStyles: CSSDirective;

package/dist/esm/styles/partials/typography.partials.js

@@ -0,0 +1,105 @@
+import { css } from '@microsoft/fast-element';
+import { fontFamilyBase, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, } from '../../theme/design-tokens.js';
+export const typographyBody1Styles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase300};
+  line-height: ${lineHeightBase300};
+  font-weight: ${fontWeightRegular};
+`;
+export const typographyBody1StrongStyles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase300};
+  line-height: ${lineHeightBase300};
+  font-weight: ${fontWeightSemibold};
+`;
+export const typographyBody1StrongerStyles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase300};
+  line-height: ${lineHeightBase300};
+  font-weight: ${fontWeightBold};
+`;
+export const typographyBody2Styles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase400};
+  line-height: ${lineHeightBase400};
+  font-weight: ${fontWeightRegular};
+`;
+export const typographyCaption1Styles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase200};
+  line-height: ${lineHeightBase200};
+  font-weight: ${fontWeightRegular};
+`;
+export const typographyCaption1StrongStyles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase200};
+  line-height: ${lineHeightBase200};
+  font-weight: ${fontWeightSemibold};
+`;
+export const typographyCaption1StrongerStyles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase200};
+  line-height: ${lineHeightBase200};
+  font-weight: ${fontWeightBold};
+`;
+export const typographyCaption2Styles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase100};
+  line-height: ${lineHeightBase100};
+  font-weight: ${fontWeightRegular};
+`;
+export const typographyCaption2StrongStyles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase100};
+  line-height: ${lineHeightBase100};
+  font-weight: ${fontWeightSemibold};
+`;
+export const typographySubtitle1Styles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase500};
+  line-height: ${lineHeightBase500};
+  font-weight: ${fontWeightSemibold};
+`;
+export const typographySubtitle2Styles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase400};
+  line-height: ${lineHeightBase400};
+  font-weight: ${fontWeightSemibold};
+`;
+export const typographySubtitle2StrongerStyles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase400};
+  line-height: ${lineHeightBase400};
+  font-weight: ${fontWeightBold};
+`;
+export const typographyTitle1Styles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero800};
+  line-height: ${lineHeightHero800};
+  font-weight: ${fontWeightSemibold};
+`;
+export const typographyTitle2Styles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero700};
+  line-height: ${lineHeightHero700};
+  font-weight: ${fontWeightSemibold};
+`;
+export const typographyTitle3Styles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase600};
+  line-height: ${lineHeightBase600};
+  font-weight: ${fontWeightSemibold};
+`;
+export const typographyLargeTitleStyles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero900};
+  line-height: ${lineHeightHero900};
+  font-weight: ${fontWeightSemibold};
+`;
+export const typographyDisplayStyles = css.partial `
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero1000};
+  line-height: ${lineHeightHero1000};
+  font-weight: ${fontWeightSemibold};
+`;
+//# sourceMappingURL=typography.partials.js.map

package/dist/esm/styles/partials/typography.partials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/typography.partials.ts"],"names":[],"mappings":"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"}