feat(web-components): create css partials for typography styles (#31164)

Co-authored-by: Christopher Holt <=>
microsoft · May 6, 2024 · b29ad17 · b29ad17
1 parent 82f4714
commit b29ad17
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 0 deletions.
diff --git a/change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json b/change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "create CSS partials for named typography styles",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
@@ -31,6 +31,26 @@ export * from './toggle-button/index.js';
 export * from './fluent-design-system.js';
 export * from './theme/index.js';
 
+export {
+  typographyBody1Styles,
+  typographyBody1StrongStyles,
+  typographyBody1StrongerStyles,
+  typographyBody2Styles,
+  typographyCaption1StrongStyles,
+  typographyCaption1StrongerStyles,
+  typographyCaption1Styles,
+  typographyCaption2StrongStyles,
+  typographyCaption2Styles,
+  typographyDisplayStyles,
+  typographyLargeTitleStyles,
+  typographySubtitle1Styles,
+  typographySubtitle2StrongerStyles,
+  typographySubtitle2Styles,
+  typographyTitle1Styles,
+  typographyTitle2Styles,
+  typographyTitle3Styles,
+} from './styles/partials/typography.partials.js';
+
 export * from './utils/direction.js';
 export * from './utils/display.js';
 export * from './utils/behaviors/match-media-stylesheet-behavior.js';
diff --git a/packages/web-components/src/styles/partials/index.ts b/packages/web-components/src/styles/partials/index.ts
@@ -1 +1,20 @@
 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';
diff --git a/packages/web-components/src/styles/partials/typography.partials.ts b/packages/web-components/src/styles/partials/typography.partials.ts
@@ -0,0 +1,144 @@
+import { css, CSSDirective } 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: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase300};
+  line-height: ${lineHeightBase300};
+  font-weight: ${fontWeightRegular};
+`;
+export const typographyBody1StrongStyles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase300};
+  line-height: ${lineHeightBase300};
+  font-weight: ${fontWeightSemibold};
+`;
+
+export const typographyBody1StrongerStyles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase300};
+  line-height: ${lineHeightBase300};
+  font-weight: ${fontWeightBold};
+`;
+
+export const typographyBody2Styles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase400};
+  line-height: ${lineHeightBase400};
+  font-weight: ${fontWeightRegular};
+`;
+
+export const typographyCaption1Styles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase200};
+  line-height: ${lineHeightBase200};
+  font-weight: ${fontWeightRegular};
+`;
+
+export const typographyCaption1StrongStyles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase200};
+  line-height: ${lineHeightBase200};
+  font-weight: ${fontWeightSemibold};
+`;
+
+export const typographyCaption1StrongerStyles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase200};
+  line-height: ${lineHeightBase200};
+  font-weight: ${fontWeightBold};
+`;
+export const typographyCaption2Styles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase100};
+  line-height: ${lineHeightBase100};
+  font-weight: ${fontWeightRegular};
+`;
+
+export const typographyCaption2StrongStyles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase100};
+  line-height: ${lineHeightBase100};
+  font-weight: ${fontWeightSemibold};
+`;
+
+export const typographySubtitle1Styles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase500};
+  line-height: ${lineHeightBase500};
+  font-weight: ${fontWeightSemibold};
+`;
+
+export const typographySubtitle2Styles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase400};
+  line-height: ${lineHeightBase400};
+  font-weight: ${fontWeightSemibold};
+`;
+
+export const typographySubtitle2StrongerStyles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase400};
+  line-height: ${lineHeightBase400};
+  font-weight: ${fontWeightBold};
+`;
+
+export const typographyTitle1Styles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero800};
+  line-height: ${lineHeightHero800};
+  font-weight: ${fontWeightSemibold};
+`;
+
+export const typographyTitle2Styles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero700};
+  line-height: ${lineHeightHero700};
+  font-weight: ${fontWeightSemibold};
+`;
+
+export const typographyTitle3Styles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeBase600};
+  line-height: ${lineHeightBase600};
+  font-weight: ${fontWeightSemibold};
+`;
+
+export const typographyLargeTitleStyles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero900};
+  line-height: ${lineHeightHero900};
+  font-weight: ${fontWeightSemibold};
+`;
+
+export const typographyDisplayStyles: CSSDirective = css.partial`
+  font-family: ${fontFamilyBase};
+  font-size: ${fontSizeHero1000};
+  line-height: ${lineHeightHero1000};
+  font-weight: ${fontWeightSemibold};
+`;