diff --git a/.changeset/long-walls-greet.md b/.changeset/long-walls-greet.md new file mode 100644 index 0000000000..bda329b9b6 --- /dev/null +++ b/.changeset/long-walls-greet.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': patch +'@swisspost/design-system-styles': patch +--- + +Moved the Bootstrap `.text-start`, `.text-center` and `.text-end` helper classes to design system styles. diff --git a/.changeset/orange-bears-relate.md b/.changeset/orange-bears-relate.md new file mode 100644 index 0000000000..e8a954aa4f --- /dev/null +++ b/.changeset/orange-bears-relate.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': patch +'@swisspost/design-system-styles': patch +--- + +Implemented `.fs-small`, `.fs-regular` and `.fs-large` helper classes and documented them. diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx index 8ec3a7c4f0..ecb25d7de1 100644 --- a/packages/documentation/src/stories/utilities/text/text.docs.mdx +++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx @@ -35,6 +35,16 @@ The font style classes available are `.fst-normal` and `.fst-italic`. +### Font Size + +
Font weight ${val}
`, )} `; + case 'Text Size': + return html` + ${['small', 'regular', 'large'].map( + val => html`This text has a ${val} font size.
`, + )} + `; case 'Line height': return html` ${['1', 'sm', 'lg'].map( diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts index 5e436b5909..395b8fbeb9 100644 --- a/packages/documentation/src/stories/utilities/text/text.stories.ts +++ b/packages/documentation/src/stories/utilities/text/text.stories.ts @@ -35,6 +35,14 @@ export const FontStyle: Story = { `, }; +export const TextSize: Story = { + render: () => html` +This text has a small font size.
+This text has a regular font size.
+This text has a large font size.
+ `, +}; + export const LineHeight: Story = { render: () => html` diff --git a/packages/styles/src/helpers/_index.scss b/packages/styles/src/helpers/_index.scss index 20643b5d40..a0e532db6d 100644 --- a/packages/styles/src/helpers/_index.scss +++ b/packages/styles/src/helpers/_index.scss @@ -1,3 +1,5 @@ @use 'clearfix'; @use 'visually-hidden'; @use 'focus-ring'; +@use 'text-align'; +@use 'text-size'; diff --git a/packages/styles/src/helpers/text-align.scss b/packages/styles/src/helpers/text-align.scss new file mode 100644 index 0000000000..466cc8d6da --- /dev/null +++ b/packages/styles/src/helpers/text-align.scss @@ -0,0 +1,11 @@ +.text-start { + text-align: left !important; +} + +.text-center { + text-align: center !important; +} + +.text-end { + text-align: right !important; +} diff --git a/packages/styles/src/helpers/text-size.scss b/packages/styles/src/helpers/text-size.scss new file mode 100644 index 0000000000..3427c15b79 --- /dev/null +++ b/packages/styles/src/helpers/text-size.scss @@ -0,0 +1,17 @@ +@use './../tokens/utilities' as utilities; +@use './../functions/tokens' as tokens; + +tokens.$default-map: utilities.$post-typo; + +.small, +.fs-small { + font-size: tokens.get('utility-font-size-sm'); +} + +.fs-regular { + font-size: tokens.get('utility-font-size-md'); +} + +.fs-large { + font-size: tokens.get('utility-font-size-lg'); +}