From 69a5706fb72528af01ed6d6d737a61d8578ec2f4 Mon Sep 17 00:00:00 2001 From: Christopher Holt <=> Date: Tue, 23 Apr 2024 20:28:39 -0700 Subject: [PATCH 1/2] feat(web-components): create css partials for typography styles --- ...-6c28acc1-a99b-4101-a17a-54d88ec1a057.json | 7 + packages/web-components/src/index.ts | 20 +++ .../src/styles/partials/index.ts | 19 +++ .../styles/partials/typography.partials.ts | 144 ++++++++++++++++++ 4 files changed, 190 insertions(+) create mode 100644 change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json create mode 100644 packages/web-components/src/styles/partials/typography.partials.ts diff --git a/change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json b/change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json new file mode 100644 index 00000000000000..1941128a0e66a5 --- /dev/null +++ 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": "=", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index f7cbc87bde5f58..22f633130be87b 100644 --- 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 index c7515fc1e06b23..bd991d70d7cded 100644 --- 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 new file mode 100644 index 00000000000000..468ef22bcacb0c --- /dev/null +++ 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}; +`; From b4d66aa79d8f5729e15075e05e72aae064be1476 Mon Sep 17 00:00:00 2001 From: Chris Holt <13071055+chrisdholt@users.noreply.github.com> Date: Thu, 25 Apr 2024 13:09:12 -0700 Subject: [PATCH 2/2] Update change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json --- ...tui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json b/change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json index 1941128a0e66a5..033373fc8b5513 100644 --- a/change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json +++ b/change/@fluentui-web-components-6c28acc1-a99b-4101-a17a-54d88ec1a057.json @@ -2,6 +2,6 @@ "type": "prerelease", "comment": "create CSS partials for named typography styles", "packageName": "@fluentui/web-components", - "email": "=", + "email": "13071055+chrisdholt@users.noreply.github.com", "dependentChangeType": "patch" }