chore(documentation, styles): text utilities

.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.

packages/documentation/.storybook/styles/components/typo.scss

@@ -33,10 +33,6 @@ body {
       font-family: tokens.get('body-font-family');
     }
 
-    .font-sans-serif {
-      font-family: var(--bs-font-sans-serif) !important;
-    }
-
     .font-monospace {
       font-family: var(--bs-font-monospace) !important;
     }

packages/documentation/src/stories/utilities/text/text.docs.mdx

@@ -26,10 +26,6 @@ import './text.styles.scss';
 
 <Source code={SampleFontFamily} language="scss" />
 
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.fontFamilies} cssPrefix="font" scssPrefix="font-family" />
-
 ### Font Size
 
 <Canvas of={TextStories.FontSize} sourceState="shown" />
@@ -45,7 +41,7 @@ import './text.styles.scss';
 ### Font Weight
 
 <div className="banner banner-warning my-24">
-  The `.bold`, `.regular`, and `.light` classes are deprecated in favor of the `.fw-*` classes.
+  The `.bold` and `.regular` classes are deprecated in favor of the `.fw-*` classes.
 </div>
 
 <Canvas of={TextStories.FontWeight} sourceState="shown" />
@@ -80,8 +76,6 @@ import './text.styles.scss';
 
 #### Possible Values
 
-##### Relative
-
 For good accessibility, the line height is set to <code>1.5</code> for body text and <code>1.2</code> for headings.
 To make the line height equal to the font size, you can use the `.lh-1` class.
 There are no Sass variables for these row heights.
@@ -92,21 +86,6 @@ There are no Sass variables for these row heights.
 
 Define how text-blocks are displayed.
 
-### Color
-
-Colorize text with `.text-*` utility classes.
-To colorize links, use the `.link-*` classes instead as they also provide styling for the `:hover` and `:focus` states.
-
-<Canvas of={TextStories.TextColor} sourceState="shown" />
-
-#### Set the Color in SCSS
-
-<Source code={SampleColor} language="scss" />
-
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.colors} cssPrefix="text" />
-
 ### Reset Color
 
 Reset a text color with `.text-reset`, so that an element inherits the color from its parent.
@@ -146,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" />

packages/documentation/src/stories/utilities/text/text.module.scss

@@ -2,10 +2,9 @@
 @use '@swisspost/design-system-styles/core' as post;
 
 :export {
-  fontFamilies: [('sans-serif', 'monospace')];
+  fontFamilies: [('sans-serif')];
   fontSizes: [map.keys(post.$font-sizes)];
-  fontWeights: [('light', 'normal', 'bold')];
+  fontWeights: [('normal', 'bold')];
   fontStyles: [('normal', 'italic')];
   relativeLineHeights: [('1', 'base', 'sm', 'lg')];
-  colors: [map.keys(post.$theme-colors)];
 }

packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts

@@ -0,0 +1,114 @@
+import type { StoryObj } from '@storybook/web-components';
+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;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+  decorators: null,
+};
+
+type Story = StoryObj;
+
+function getTextUtility(type: string) {
+  switch (type) {
+    case 'Family':
+      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> `)}
+      `;
+    case 'Style':
+      return html`
+        ${SCSS_VARIABLES.fontStyles.map(
+          (val: string) => html` <p class="fst-${val}">Font style ${val}</p> `,
+        )}
+      `;
+    case 'Weight':
+      return html`
+        ${SCSS_VARIABLES.fontStyles.map(
+          (val: string) => html` <p class="fw-${val}">Font weight ${val}</p> `,
+        )}
+      `;
+    case 'Line height':
+      return html`
+        ${SCSS_VARIABLES.relativeLineHeights.map(
+          (val: string) =>
+            html` <p class="text-example-bordered lh-${val}">Line height ${val}</p> `,
+        )}
+      `;
+    case 'Text align':
+      return html`
+        ${['start', 'end', 'center'].map(
+          val => html`
+            <div class="text-${val}">
+              <p>Text align ${val}</p>
+            </div>
+          `,
+        )}
+      `;
+    case 'Text decoration':
+      return html`
+        ${['none', 'underline', 'line-through'].map(
+          val => html` <p class="text-decoration-${val}">Text decoration ${val}</p> `,
+        )}
+      `;
+    case 'Text transform':
+      return html`
+        ${['lowercase', 'uppercase', 'capitalize'].map(
+          val => html` <p class="text-${val}">Text transform ${val}</p> `,
+        )}
+      `;
+    case 'White space':
+      return html`
+        ${['wrap', 'nowrap'].map(
+          val =>
+            html`
+              <p class="text-example-bordered w-100 text-${val}">
+                White space ${val} White space ${val} White space ${val} White space ${val}
+              </p>
+            `,
+        )}
+      `;
+    case 'Word wrap break':
+      return html`
+        ${['break'].map(
+          val =>
+            html`
+              <p class="text-example-bordered w-78 text-${val}">Averylongwordthatwillbreak</p>
+            `,
+        )}
+      `;
+  }
+}
+
+export const Text: Story = {
+  render: () => {
+    return schemes(
+      () => html` <div class="text-example">
+        ${[
+          'Family',
+          'Sizes',
+          'Style',
+          'Weight',
+          'Line height',
+          'Text align',
+          'Text decoration',
+          'Text transform',
+          'White space',
+          'Word wrap break',
+        ].map(
+          val => html`
+            <h1>${val}</h1>
+            <div class="text-example-child gap-8 d-flex flex-column">${getTextUtility(val)}</div>
+          `,
+        )}
+      </div>`,
+    );
+  },
+};

packages/documentation/src/stories/utilities/text/text.stories.ts

@@ -34,14 +34,6 @@ export const LineHeight: Story = {
   render: () => html` <p class="lh-1">This text has a line height equal to the font size.</p> `,
 };
 
-export const TextColor: Story = {
-  decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
-  render: () => html`
-    <p class="text-success">This is colored text.</p>
-    <a href="#" class="link-warning">This is a colored link, it lightens on hover.</a>
-  `,
-};
-
 export const TextColorReset: Story = {
   decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
   render: () => html`

packages/documentation/src/stories/utilities/text/text.styles.scss

@@ -3,3 +3,7 @@
 .my-container {
   background-color: post.$info;
 }
+
+.text-example-bordered {
+  border: 1px solid post.$gray-40;
+}

packages/styles/src/themes/bootstrap/_utilities.scss

@@ -69,4 +69,15 @@ $utilities: map.remove($utilities, 'overflow');
 $utilities: map.remove($utilities, 'overflow-x');
 $utilities: map.remove($utilities, 'overflow-y');
 
+$utilities: map.remove($utilities, 'font-family');
+$utilities: map.remove($utilities, 'font-size');
+$utilities: map.remove($utilities, 'font-style');
+$utilities: map.remove($utilities, 'font-weight');
+$utilities: map.remove($utilities, 'line-height');
+$utilities: map.remove($utilities, 'text-align');
+$utilities: map.remove($utilities, 'text-decoration');
+$utilities: map.remove($utilities, 'text-transform');
+$utilities: map.remove($utilities, 'white-space');
+$utilities: map.remove($utilities, 'word-wrap');
+
 @import 'bootstrap/scss/utilities/api';

packages/styles/src/utilities/_variables.scss

@@ -27,6 +27,33 @@ $position-values: (
   50: 50%,
   100: 100%,
 );
+$font-size-base: 1rem !default;
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+
+$font-family-sans-serif: var(--post-device-font-family-default);
+
+$default-font-sizes: (
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size,
+) !default;
+
+$font-weight-normal: 400 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-bolder: bolder !default;
+
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.25 !default;
+$line-height-lg: 2 !default;
 
 $utilities: (
   'width': (
@@ -424,5 +451,78 @@ $utilities: (
     property: overflow-y,
     values: auto hidden visible scroll,
   ),
+  'font-family': (
+    property: font-family,
+    class: font,
+    values: (
+      'sans-serif': $font-family-sans-serif,
+    ),
+  ),
+  'font-size': (
+    rfs: true,
+    property: font-size,
+    class: fs,
+    values: $default-font-sizes,
+  ),
+  'font-style': (
+    property: font-style,
+    class: fst,
+    values: italic normal,
+  ),
+  'font-weight': (
+    property: font-weight,
+    class: fw,
+    values: (
+      normal: $font-weight-normal,
+      semibold: $font-weight-semibold,
+      bold: $font-weight-bold,
+      bolder: $font-weight-bolder,
+    ),
+  ),
+  'line-height': (
+    property: line-height,
+    class: lh,
+    values: (
+      1: 1,
+      sm: $line-height-sm,
+      base: $line-height-base,
+      lg: $line-height-lg,
+    ),
+  ),
+  'text-align': (
+    responsive: true,
+    property: text-align,
+    class: text,
+    values: (
+      start: left,
+      end: right,
+      center: center,
+    ),
+  ),
+  'text-decoration': (
+    property: text-decoration,
+    values: none underline line-through,
+  ),
+  'text-transform': (
+    property: text-transform,
+    class: text,
+    values: lowercase uppercase capitalize,
+  ),
+  'white-space': (
+    property: white-space,
+    class: text,
+    values: (
+      wrap: normal,
+      nowrap: nowrap,
+    ),
+  ),
+  'word-wrap': (
+    property: word-wrap word-break,
+    class: text,
+    values: (
+      break: break-word,
+    ),
+    rtl: false,
+  ),
   // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
 );