diff --git a/.changeset/sixty-items-promise.md b/.changeset/sixty-items-promise.md new file mode 100644 index 0000000000..d6de1b72b9 --- /dev/null +++ b/.changeset/sixty-items-promise.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': minor +--- + +Added paragraph style. diff --git a/.changeset/strange-bottles-impress.md b/.changeset/strange-bottles-impress.md new file mode 100644 index 0000000000..79f561cfb8 --- /dev/null +++ b/.changeset/strange-bottles-impress.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added paragraph element. diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx new file mode 100644 index 0000000000..d9be9afb9c --- /dev/null +++ b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx @@ -0,0 +1,17 @@ +import { Canvas, Controls, Meta } from '@storybook/blocks'; +import * as ParagraphStories from './paragraph.stories'; +import StylesPackageImport from '@/shared/styles-package-import.mdx'; + + + +
+ This is a paragraph. It is a block of text that is separated from other blocks of text by a + blank line. It is usually indented at the beginning of the first line. The first word of a + paragraph is often indented more than the rest of the paragraph. +
++ This is a paragraph. It is a block of text that is separated from other blocks of text by a + blank line. It is usually indented at the beginning of the first line. The first word of a + paragraph is often indented more than the rest of the paragraph. +
+ `, +}; diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss index d2c8cd0147..e4233fb679 100644 --- a/packages/styles/src/elements/_index.scss +++ b/packages/styles/src/elements/_index.scss @@ -1,4 +1,5 @@ @use 'reset'; @use 'body'; +@use 'paragraph'; @use 'heading'; @use 'fieldset-legend'; diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss new file mode 100644 index 0000000000..12e638dd65 --- /dev/null +++ b/packages/styles/src/elements/paragraph.scss @@ -0,0 +1,17 @@ +@use 'sass:map'; +@use '../functions/tokens'; +@use '../tokens/elements'; + +tokens.$default-map: elements.$post-paragraph; + +p { + margin-block: tokens.get('paragraph-margin-block-start'); + + &:first-child { + margin-block-start: 0; + } + + &:last-child { + margin-block-end: 0; + } +}