From 360f5773221d840604e2fa0adf54533317b8cebe Mon Sep 17 00:00:00 2001
From: leagrdv <lea.gardavaud@post.ch>
Date: Tue, 24 Dec 2024 17:22:31 +0100
Subject: [PATCH] small changes + changeset

---
 .changeset/three-geese-run.md                  |  6 ++++++
 .../src/stories/utilities/text/text.docs.mdx   |  2 +-
 .../utilities/text/text.snapshot.stories.ts    | 18 ++++++++++--------
 3 files changed, 17 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/three-geese-run.md

diff --git a/.changeset/three-geese-run.md b/.changeset/three-geese-run.md
new file mode 100644
index 0000000000..09030b2478
--- /dev/null
+++ b/.changeset/three-geese-run.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Internalized bootstrap text utilities into the design system.
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index caf409caf2..a6dd6a97f2 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -125,6 +125,6 @@ Transform text with the following text capitalization classes: `.text-lowercase`
 
 ### Decorations
 
-Decorate text with the following text decoration classes.: `.text-decoration-line-through` and `.text-decoration-none`.
+Decorate text with the following text decoration classes: `text-decoration-underline`, `.text-decoration-line-through` and `.text-decoration-none`.
 
 <Canvas of={TextStories.TextDecoration} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts b/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts
index 0a13ba33c5..aca514d64d 100644
--- a/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { schemes } from '@/shared/snapshots/schemes';
 import meta from './text.stories';
 import './text.styles.scss';
+import { SCSS_VARIABLES } from './text.blocks';
 
 const { id, ...metaWithoutId } = meta;
 
@@ -20,24 +21,25 @@ function getTextUtility(type: string) {
       return html` ${['sans-serif'].map(val => html` <p class="font-${val}">Font ${val}</p> `)} `;
     case 'Sizes':
       return html`
-        ${['1', '2', '3', '4', '5', '6'].map(
-          val => html` <p class="fs-${val}">Font size ${val}</p> `,
-        )}
+        ${[1, 2, 3, 4, 5, 6].map(val => html` <p class="fs-${val}">Font size ${val}</p> `)}
       `;
     case 'Style':
       return html`
-        ${['italic', 'normal'].map(val => html` <p class="fst-${val}">Font style ${val}</p> `)}
+        ${SCSS_VARIABLES.fontStyles.map(
+          (val: string) => html` <p class="fst-${val}">Font style ${val}</p> `,
+        )}
       `;
     case 'Weight':
       return html`
-        ${['lighter', 'light', 'normal', 'medium', 'semibold', 'bold', 'bolder'].map(
-          val => html` <p class="fw-${val}">Font weight ${val}</p> `,
+        ${SCSS_VARIABLES.fontStyles.map(
+          (val: string) => html` <p class="fw-${val}">Font weight ${val}</p> `,
         )}
       `;
     case 'Line height':
       return html`
-        ${['1', 'sm', 'base', 'lg'].map(
-          val => html` <p class="text-example-bordered lh-${val}">Line height ${val}</p> `,
+        ${SCSS_VARIABLES.relativeLineHeights.map(
+          (val: string) =>
+            html` <p class="text-example-bordered lh-${val}">Line height ${val}</p> `,
         )}
       `;
     case 'Text align':