add changeset

swisspost · Jan 23, 2025 · 40db161 · 40db161
1 parent 6e0f7c2
commit 40db161
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 35 deletions.
diff --git a/.changeset/clever-cups-swim.md b/.changeset/clever-cups-swim.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed the `.lh-base` utility class.
diff --git a/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts b/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts
@@ -26,13 +26,13 @@ function getTextUtility(type: string) {
       `;
     case 'Weight':
       return html`
-        ${['normal', 'bold'].map(
+        ${['normal', 'bold', 'black'].map(
           (val: string) => html`<p class="fw-${val}">Font weight ${val}</p>`,
         )}
       `;
     case 'Line height':
       return html`
-        ${['1', 'base', 'sm', 'lg'].map(
+        ${['1', 'sm', 'lg'].map(
           (val: string) => html`<p class="text-example-bordered lh-${val}">Line height ${val}</p>`,
         )}
       `;

diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -21,17 +21,17 @@ export const FontFamily: Story = {
 export const FontWeight: Story = {
   render: () =>
     html`
-      <p class="fw-normal">This is normal text.</p>
-      <p class="fw-bold">This is bold text.</p>
-      <p class="fw-black">This is black text.</p>
+      <p class="fw-normal">This is a normal text.</p>
+      <p class="fw-bold">This is a bold text.</p>
+      <p class="fw-black">This is a black text.</p>
     `,
 };
 
 export const FontStyle: Story = {
   render: () =>
     html`
-      <p class="fst-normal">This is normal text.</p>
-      <p class="fst-italic">This is italic text.</p>
+      <p class="fst-normal">This is a normal text.</p>
+      <p class="fst-italic">This is an italic text.</p>
     `,
 };
 
@@ -48,7 +48,7 @@ export const TextColorReset: Story = {
   decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
   render: () => html`
     <p class="my-colored-text">
-      This is colored text with a
+      This is a colored text with a
       <a href="#" class="text-reset">link</a>
       of the same color.
     </p>

diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
@@ -1,6 +1,7 @@
 @use './functions' as *;
 
 @use '../variables/sizing' as *;
+@use '../variables/type';
 
 @use '../functions/tokens' as tokens;
 @use '../tokens/utilities';
@@ -33,14 +34,6 @@ $position-values: (
   100: 100%,
 );
 
-$font-family-sans-serif: tokens.get('body-font-family', elements.$post-body);
-$font-weight-normal: tokens.get('utility-font-weight-regular') !default;
-$font-weight-bold: tokens.get('utility-font-weight-bold') !default;
-$font-weight-black: tokens.get('utility-font-weight-black') !default;
-
-$line-height-sm: tokens.get('utility-line-height-sm') !default;
-$line-height-lg: tokens.get('utility-line-height-lg') !default;
-
 $utilities: (
   'grid-gutter': (
     responsive: true,
@@ -459,7 +452,7 @@ $utilities: (
     property: font-family,
     class: font,
     values: (
-      'sans-serif': $font-family-sans-serif,
+      'sans-serif': type.$font-family-sans-serif,
     ),
   ),
   'font-style': (
@@ -471,18 +464,18 @@ $utilities: (
     property: font-weight,
     class: fw,
     values: (
-      black: 900,
-      bold: 700,
-      normal: 400,
+      black: type.$font-weight-black,
+      bold: type.$font-weight-bold,
+      normal: type.$font-weight-normal,
     ),
   ),
   'line-height': (
     property: line-height,
     class: lh,
     values: (
-      1: 1,
-      sm: $line-height-sm,
-      lg: $line-height-lg,
+      1: type.$line-height-1,
+      sm: type.$line-height-sm,
+      lg: type.$line-height-lg,
     ),
   ),
   'text-align': (
@@ -520,7 +513,6 @@ $utilities: (
     ),
     rtl: false,
   ),
-  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
 );
 
 /* IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`. */
diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
@@ -10,7 +10,7 @@
 @use './../tokens/utilities';
 @use './../tokens/elements' as element-tokens;
 
-tokens.$default-map: utilities.$post-spacing;
+tokens.$default-map: utilities.$post-typo;
 
 // Fonts
 //
@@ -54,13 +54,12 @@ $font-size-40: sizing.px-to-rem(40px);
 $font-size-48: sizing.px-to-rem(48px);
 $font-size-56: sizing.px-to-rem(56px);
 
-$line-height-sm: 1;
 $line-height-copy: 1.5;
 $line-height-heading: 1.2;
 
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
-$font-weight-black: 900 !default;
+$font-weight-normal: tokens.get('utility-font-weight-regular') !default;
+$font-weight-bold: tokens.get('utility-font-weight-bold') !default;
+$font-weight-black: tokens.get('utility-font-weight-black') !default;
 
 // Deprecated
 $font-sizes: (
@@ -163,8 +162,9 @@ $font-curves: (
 $font-size-base: $font-size-regular !default;
 $font-weight-base: $font-weight-normal !default;
 $line-height-base: $line-height-copy;
-$line-height-sm: $line-height-heading;
-$line-height-lg: $line-height-copy;
+$line-height-1: tokens.get('utility-line-height-1');
+$line-height-sm: tokens.get('utility-line-height-sm');
+$line-height-lg: tokens.get('utility-line-height-lg');
 
 $headings-margin-bottom: (spacing.$spacer * 0.5) !default;
 $headings-font-family: inherit !default;
@@ -185,10 +185,10 @@ $text-muted: color.$gray-60;
 
 $blockquote-font-weight: $font-weight-bold !default;
 $blockquote-border-left: commons.$border-thick solid color.$black !default;
-$blockquote-border-left-width-md: tokens.get('utility-gap-4') !default;
-$blockquote-padding-left: tokens.get('utility-gap-12') !default;
-$blockquote-margin-top: tokens.get('utility-gap-24') !default;
-$blockquote-margin-y: tokens.get('utility-gap-16') !default;
+$blockquote-border-left-width-md: tokens.get('utility-gap-4', utilities.$post-spacing) !default;
+$blockquote-padding-left: tokens.get('utility-gap-12', utilities.$post-spacing) !default;
+$blockquote-margin-top: tokens.get('utility-gap-24', utilities.$post-spacing) !default;
+$blockquote-margin-y: tokens.get('utility-gap-16', utilities.$post-spacing) !default;
 $blockquote-footer-font-size: math.div(1em * sizing.strip-unit($small-font-size), 100) !default;
 $blockquote-cite-font-weight: $font-weight-normal !default;