@fluentui/web-components 3.0.0-beta.8 → 3.0.0-beta.80

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

@@ -1,24 +1,24 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+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;
+import { dangerState, extraLargeState, extraSmallState, ghostState, importantState, informativeState, largeState, outlineState, severeState, smallState, subtleState, successState, tintState, tinyState, warningState, } from '../states/index.js';
 export const badgeBaseStyles = css.partial `
   ${display('inline-flex')} :host {
     position: relative;
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
-    font-family: var(${fontFamilyBase});
-    font-weight: var(${fontWeightSemibold});
-    font-size: var(${fontSizeBase200});
-    line-height: var(${lineHeightBase200});
+    font-family: ${fontFamilyBase};
+    font-weight: ${fontWeightSemibold};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
     min-width: 20px;
     height: 20px;
-    padding-inline: calc(var(${spacingHorizontalXS}) + var(${textPadding}));
-    border-radius: var(${borderRadiusCircular});
-    border-color: var(${colorTransparentStroke});
-    background-color: var(${colorBrandBackground});
-    color: var(${colorNeutralForegroundOnBrand});
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
+    border-radius: ${borderRadiusCircular};
+    border-color: ${colorTransparentStroke};
+    background-color: ${colorBrandBackground};
+    color: ${colorNeutralForegroundOnBrand};
     contain: content;
   }
 
@@ -26,7 +26,7 @@ export const badgeBaseStyles = css.partial `
     font-size: 12px;
   }
 
-  :host(:not([appearance='ghost']))::after {
+  :host(:not(${ghostState}))::after {
     position: absolute;
     content: '';
     top: 0;
@@ -34,7 +34,7 @@ export const badgeBaseStyles = css.partial `
     bottom: 0;
     right: 0;
     border-style: solid;
-    border-width: var(${strokeWidthThin});
+    border-width: ${strokeWidthThin};
     border-color: inherit;
     border-radius: inherit;
   }
@@ -44,7 +44,7 @@ export const badgeBaseStyles = css.partial `
  * The badge's size styles
  */
 export const badgeSizeStyles = css.partial `
-  :host([size='tiny']) {
+  :host(${tinyState}) {
     width: 6px;
     height: 6px;
     font-size: 4px;
@@ -52,10 +52,10 @@ export const badgeSizeStyles = css.partial `
     padding-inline: 0;
     min-width: unset;
   }
-  :host([size='tiny']) ::slotted(svg) {
+  :host(${tinyState}) ::slotted(svg) {
     font-size: 6px;
   }
-  :host([size='extra-small']) {
+  :host(${extraSmallState}) {
     width: 10px;
     height: 10px;
     font-size: 6px;
@@ -63,37 +63,37 @@ export const badgeSizeStyles = css.partial `
     padding-inline: 0;
     min-width: unset;
   }
-  :host([size='extra-small']) ::slotted(svg) {
+  :host(${extraSmallState}) ::slotted(svg) {
     font-size: 10px;
   }
-  :host([size='small']) {
+  :host(${smallState}) {
     min-width: 16px;
     height: 16px;
-    font-size: var(${fontSizeBase100});
-    line-height: var(${lineHeightBase100});
-    padding-inline: calc(var(${spacingHorizontalXXS}) + var(${textPadding}));
+    font-size: ${fontSizeBase100};
+    line-height: ${lineHeightBase100};
+    padding-inline: calc(${spacingHorizontalXXS} + ${spacingHorizontalXXS});
   }
-  :host([size='small']) ::slotted(svg) {
+  :host(${smallState}) ::slotted(svg) {
     font-size: 12px;
   }
-  :host([size='large']) {
+  :host(${largeState}) {
     min-width: 24px;
     height: 24px;
-    font-size: var(${fontSizeBase200});
-    line-height: var(${lineHeightBase200});
-    padding-inline: calc(var(${spacingHorizontalXS}) + var(${textPadding}));
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
   }
-  :host([size='large']) ::slotted(svg) {
+  :host(${largeState}) ::slotted(svg) {
     font-size: 16px;
   }
-  :host([size='extra-large']) {
+  :host(${extraLargeState}) {
     min-width: 32px;
     height: 32px;
-    font-size: var(${fontSizeBase200});
-    line-height: var(${lineHeightBase200});
-    padding-inline: calc(var(${spacingHorizontalSNudge}) + var(${textPadding}));
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    padding-inline: calc(${spacingHorizontalSNudge} + ${spacingHorizontalXXS});
   }
-  :host([size='extra-large']) ::slotted(svg) {
+  :host(${extraLargeState}) ::slotted(svg) {
     font-size: 20px;
   }
 `;
@@ -104,39 +104,39 @@ export const badgeSizeStyles = css.partial `
  * @public
  */
 export const badgeFilledStyles = css.partial `
-  :host([color='danger']) {
-    background-color: var(${colorPaletteRedBackground3});
-    color: var(${colorNeutralForegroundOnBrand});
+  :host(${dangerState}) {
+    background-color: ${colorPaletteRedBackground3};
+    color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='important']) {
-    background-color: var(${colorNeutralForeground1});
-    color: var(${colorNeutralBackground1});
+  :host(${importantState}) {
+    background-color: ${colorNeutralForeground1};
+    color: ${colorNeutralBackground1};
   }
 
-  :host([color='informative']) {
-    background-color: var(${colorNeutralBackground5});
-    color: var(${colorNeutralForeground3});
+  :host(${informativeState}) {
+    background-color: ${colorNeutralBackground5};
+    color: ${colorNeutralForeground3};
   }
 
-  :host([color='severe']) {
-    background-color: var(${colorPaletteDarkOrangeBackground3});
-    color: var(${colorNeutralForegroundOnBrand});
+  :host(${severeState}) {
+    background-color: ${colorPaletteDarkOrangeBackground3};
+    color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='subtle']) {
-    background-color: var(${colorNeutralBackground1});
-    color: var(${colorNeutralForeground1});
+  :host(${subtleState}) {
+    background-color: ${colorNeutralBackground1};
+    color: ${colorNeutralForeground1};
   }
 
-  :host([color='success']) {
-    background-color: var(${colorPaletteGreenBackground3});
-    color: var(${colorNeutralForegroundOnBrand});
+  :host(${successState}) {
+    background-color: ${colorPaletteGreenBackground3};
+    color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='warning']) {
-    background-color: var(${colorPaletteYellowBackground3});
-    color: var(${colorNeutralForeground1Static});
+  :host(${warningState}) {
+    background-color: ${colorPaletteYellowBackground3};
+    color: ${colorNeutralForeground1Static};
   }
 `;
 /**
@@ -144,37 +144,37 @@ export const badgeFilledStyles = css.partial `
  * @public
  */
 export const badgeGhostStyles = css.partial `
-  :host([appearance='ghost']) {
-    color: var(${colorBrandForeground1});
+  :host(${ghostState}) {
+    color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host([appearance='ghost'][color='danger']) {
-    color: var(${colorPaletteRedForeground3});
+  :host(${ghostState}${dangerState}) {
+    color: ${colorPaletteRedForeground3};
   }
 
-  :host([appearance='ghost'][color='important']) {
-    color: var(${colorNeutralForeground1});
+  :host(${ghostState}${importantState}) {
+    color: ${colorNeutralForeground1};
   }
 
-  :host([appearance='ghost'][color='informative']) {
-    color: var(${colorNeutralForeground3});
+  :host(${ghostState}${informativeState}) {
+    color: ${colorNeutralForeground3};
   }
 
-  :host([appearance='ghost'][color='severe']) {
-    color: var(${colorPaletteDarkOrangeForeground3});
+  :host(${ghostState}${severeState}) {
+    color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host([appearance='ghost'][color='subtle']) {
-    color: var(${colorNeutralForegroundInverted});
+  :host(${ghostState}${subtleState}) {
+    color: ${colorNeutralForegroundInverted};
   }
 
-  :host([appearance='ghost'][color='success']) {
-    color: var(${colorPaletteGreenForeground3});
+  :host(${ghostState}${successState}) {
+    color: ${colorPaletteGreenForeground3};
   }
 
-  :host([appearance='ghost'][color='warning']) {
-    color: var(${colorPaletteYellowForeground2});
+  :host(${ghostState}${warningState}) {
+    color: ${colorPaletteYellowForeground2};
   }
 `;
 /**
@@ -182,40 +182,40 @@ export const badgeGhostStyles = css.partial `
  * @public
  */
 export const badgeOutlineStyles = css.partial `
-  :host([appearance='outline']) {
+  :host(${outlineState}) {
     border-color: currentColor;
-    color: var(${colorBrandForeground1});
+    color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host([appearance='outline'][color='danger']) {
-    color: var(${colorPaletteRedForeground3});
+  :host(${outlineState}${dangerState}) {
+    color: ${colorPaletteRedForeground3};
   }
 
-  :host([appearance='outline'][color='important']) {
-    color: var(${colorNeutralForeground3});
-    border-color: var(${colorNeutralStrokeAccessible});
+  :host(${outlineState}${importantState}) {
+    color: ${colorNeutralForeground3};
+    border-color: ${colorNeutralStrokeAccessible};
   }
 
-  :host([appearance='outline'][color='informative']) {
-    color: var(${colorNeutralForeground3});
-    border-color: var(${colorNeutralStroke2});
+  :host(${outlineState}${informativeState}) {
+    color: ${colorNeutralForeground3};
+    border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='outline'][color='severe']) {
-    color: var(${colorPaletteDarkOrangeForeground3});
+  :host(${outlineState}${severeState}) {
+    color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host([appearance='outline'][color='subtle']) {
-    color: var(${colorNeutralForegroundStaticInverted});
+  :host(${outlineState}${subtleState}) {
+    color: ${colorNeutralForegroundStaticInverted};
   }
 
-  :host([appearance='outline'][color='success']) {
-    color: var(${colorPaletteGreenForeground2});
+  :host(${outlineState}${successState}) {
+    color: ${colorPaletteGreenForeground2};
   }
 
-  :host([appearance='outline'][color='warning']) {
-    color: var(${colorPaletteYellowForeground2});
+  :host(${outlineState}${warningState}) {
+    color: ${colorPaletteYellowForeground2};
   }
 `;
 /**
@@ -223,52 +223,52 @@ export const badgeOutlineStyles = css.partial `
  * @public
  */
 export const badgeTintStyles = css.partial `
-  :host([appearance='tint']) {
-    background-color: var(${colorBrandBackground2});
-    color: var(${colorBrandForeground2});
-    border-color: var(${colorBrandStroke2});
+  :host(${tintState}) {
+    background-color: ${colorBrandBackground2};
+    color: ${colorBrandForeground2};
+    border-color: ${colorBrandStroke2};
   }
 
-  :host([appearance='tint'][color='danger']) {
-    background-color: var(${colorPaletteRedBackground1});
-    color: var(${colorPaletteRedForeground1});
-    border-color: var(${colorPaletteRedBorder1});
+  :host(${tintState}${dangerState}) {
+    background-color: ${colorPaletteRedBackground1};
+    color: ${colorPaletteRedForeground1};
+    border-color: ${colorPaletteRedBorder1};
   }
 
-  :host([appearance='tint'][color='important']) {
-    background-color: var(${colorNeutralForeground3});
-    color: var(${colorNeutralBackground1});
-    border-color: var(${colorTransparentStroke});
+  :host(${tintState}${importantState}) {
+    background-color: ${colorNeutralForeground3};
+    color: ${colorNeutralBackground1};
+    border-color: ${colorTransparentStroke};
   }
 
-  :host([appearance='tint'][color='informative']) {
-    background-color: var(${colorNeutralBackground4});
-    color: var(${colorNeutralForeground3});
-    border-color: var(${colorNeutralStroke2});
+  :host(${tintState}${informativeState}) {
+    background-color: ${colorNeutralBackground4};
+    color: ${colorNeutralForeground3};
+    border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='tint'][color='severe']) {
-    background-color: var(${colorPaletteDarkOrangeBackground1});
-    color: var(${colorPaletteDarkOrangeForeground1});
-    border-color: var(${colorPaletteDarkOrangeBorder1});
+  :host(${tintState}${severeState}) {
+    background-color: ${colorPaletteDarkOrangeBackground1};
+    color: ${colorPaletteDarkOrangeForeground1};
+    border-color: ${colorPaletteDarkOrangeBorder1};
   }
 
-  :host([appearance='tint'][color='subtle']) {
-    background-color: var(${colorNeutralBackground1});
-    color: var(${colorNeutralForeground3});
-    border-color: var(${colorNeutralStroke2});
+  :host(${tintState}${subtleState}) {
+    background-color: ${colorNeutralBackground1};
+    color: ${colorNeutralForeground3};
+    border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='tint'][color='success']) {
-    background-color: var(${colorPaletteGreenBackground1});
-    color: var(${colorPaletteGreenForeground1});
-    border-color: var(${colorPaletteGreenBorder2});
+  :host(${tintState}${successState}) {
+    background-color: ${colorPaletteGreenBackground1};
+    color: ${colorPaletteGreenForeground1};
+    border-color: ${colorPaletteGreenBorder2};
   }
 
-  :host([appearance='tint'][color='warning']) {
-    background-color: var(${colorPaletteYellowBackground1});
-    color: var(${colorPaletteYellowForeground2});
-    border-color: var(${colorPaletteYellowBorder1});
+  :host(${tintState}${warningState}) {
+    background-color: ${colorPaletteYellowBackground1};
+    color: ${colorPaletteYellowForeground2};
+    border-color: ${colorPaletteYellowBorder1};
   }
 `;
 //# sourceMappingURL=badge.partials.js.map

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":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,6BAA6B,EAC7B,uBAAuB,EACvB,8BAA8B,EAC9B,6BAA6B,EAC7B,oCAAoC,EACpC,mBAAmB,EACnB,4BAA4B,EAC5B,iCAAiC,EACjC,iCAAiC,EACjC,6BAA6B,EAC7B,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,EAC7B,6BAA6B,EAC7B,yBAAyB,EACzB,6BAA6B,EAC7B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,GAChB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,GAAG,oBAAoB,CAAC;AAEzC,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA;IACtC,OAAO,CAAC,aAAa,CAAC;;;;;uBAKH,cAAc;uBACd,kBAAkB;qBACpB,eAAe;uBACb,iBAAiB;;;+BAGT,mBAAmB,WAAW,WAAW;yBAC/C,oBAAoB;wBACrB,sBAAsB;4BAClB,oBAAoB;iBAC/B,6BAA6B;;;;;;;;;;;;;;;;wBAgBtB,eAAe;;;;CAItC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0BrB,eAAe;uBACb,iBAAiB;+BACT,oBAAoB,WAAW,WAAW;;;;;;;;qBAQpD,eAAe;uBACb,iBAAiB;+BACT,mBAAmB,WAAW,WAAW;;;;;;;;qBAQnD,eAAe;uBACb,iBAAiB;+BACT,uBAAuB,WAAW,WAAW;;;;;CAK3E,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAAA;;4BAEhB,0BAA0B;iBACrC,6BAA6B;;;;4BAIlB,uBAAuB;iBAClC,uBAAuB;;;;4BAIZ,uBAAuB;iBAClC,uBAAuB;;;;4BAIZ,iCAAiC;iBAC5C,6BAA6B;;;;4BAIlB,uBAAuB;iBAClC,uBAAuB;;;;4BAIZ,4BAA4B;iBACvC,6BAA6B;;;;4BAIlB,6BAA6B;iBACxC,6BAA6B;;CAE7C,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAAA;;iBAE1B,qBAAqB;;;;;iBAKrB,0BAA0B;;;;iBAI1B,uBAAuB;;;;iBAIvB,uBAAuB;;;;iBAIvB,iCAAiC;;;;iBAIjC,8BAA8B;;;;iBAI9B,4BAA4B;;;;iBAI5B,6BAA6B;;CAE7C,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAAA;;;iBAG5B,qBAAqB;;;;;iBAKrB,0BAA0B;;;;iBAI1B,uBAAuB;wBAChB,4BAA4B;;;;iBAInC,uBAAuB;wBAChB,mBAAmB;;;;iBAI1B,iCAAiC;;;;iBAIjC,oCAAoC;;;;iBAIpC,4BAA4B;;;;iBAI5B,6BAA6B;;CAE7C,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAC,OAAO,CAAA;;4BAEd,qBAAqB;iBAChC,qBAAqB;wBACd,iBAAiB;;;;4BAIb,0BAA0B;iBACrC,0BAA0B;wBACnB,sBAAsB;;;;4BAIlB,uBAAuB;iBAClC,uBAAuB;wBAChB,sBAAsB;;;;4BAIlB,uBAAuB;iBAClC,uBAAuB;wBAChB,mBAAmB;;;;4BAIf,iCAAiC;iBAC5C,iCAAiC;wBAC1B,6BAA6B;;;;4BAIzB,uBAAuB;iBAClC,uBAAuB;wBAChB,mBAAmB;;;;4BAIf,4BAA4B;iBACvC,4BAA4B;wBACrB,wBAAwB;;;;4BAIpB,6BAA6B;iBACxC,6BAA6B;wBACtB,yBAAyB;;CAEhD,CAAC"}
+{"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.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.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":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,CAAC,MAAM,qBAAqB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBAC7C,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,iBAAiB;CACjC,CAAC;AACF,MAAM,CAAC,MAAM,2BAA2B,GAAiB,GAAG,CAAC,OAAO,CAAA;iBACnD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,kBAAkB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAiB,GAAG,CAAC,OAAO,CAAA;iBACrD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,cAAc;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBAC7C,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,iBAAiB;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBAChD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,iBAAiB;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAiB,GAAG,CAAC,OAAO,CAAA;iBACtD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,kBAAkB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAiB,GAAG,CAAC,OAAO,CAAA;iBACxD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,cAAc;CAC9B,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBAChD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,iBAAiB;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAiB,GAAG,CAAC,OAAO,CAAA;iBACtD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,kBAAkB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBACjD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,kBAAkB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBACjD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,kBAAkB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAAiB,GAAG,CAAC,OAAO,CAAA;iBACzD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,cAAc;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBAC9C,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,kBAAkB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBAC9C,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,kBAAkB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBAC9C,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,kBAAkB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAiB,GAAG,CAAC,OAAO,CAAA;iBAClD,cAAc;eAChB,eAAe;iBACb,iBAAiB;iBACjB,kBAAkB;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAiB,GAAG,CAAC,OAAO,CAAA;iBAC/C,cAAc;eAChB,gBAAgB;iBACd,kBAAkB;iBAClB,kBAAkB;CAClC,CAAC"}