feat: add paragraph style

.changeset/sixty-items-promise.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added paragraph style

.changeset/strange-bottles-impress.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added paragraph element

packages/documentation/src/stories/components/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';
+
+<Meta of={ParagraphStories} />
+
+<div className="docs-title">
+  # Paragraph
+
+  <nav>
+    <link-design of={JSON.stringify(ParagraphStories)}></link-design>
+  </nav>
+</div>
+
+Default paragraph without size variants.
+
+<Canvas of={ParagraphStories.Default} sourceState="shown" />

packages/documentation/src/stories/components/elements/paragraph/paragraph.stories.ts

@@ -0,0 +1,34 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '7ecd87f1-de96-4e39-a057-ba1798eb69593',
+  title: 'Elements/Paragraph',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=26-49',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => html`
+    <p>
+      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.
+    </p>
+    <p>
+      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.
+    </p>
+  `,
+};

packages/styles/src/elements/_index.scss

@@ -1,2 +1,3 @@
 @use 'reset';
 @use 'body';
+@use 'paragraph';

packages/styles/src/elements/paragraph.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-paragraph;
+
+p {
+  margin-block-start: tokens.get('post-paragraph', 'margin-block-start');
+}