feat(styles): remove deprecated line height variables

.changeset/sharp-crews-watch.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': minor
+---
+
+Removed deprecated line-height variables.

packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx

@@ -6,6 +6,7 @@ import './migrationv4-5.component';
 import './migrationv5-6.component';
 import './migrationv6-7.component';
 import './migrationv7-8.component';
+import './migrationv8-9.component';
 
 <Meta of={MigrationGuideStories} />
 
@@ -25,4 +26,6 @@ import './migrationv7-8.component';
 
   <migration-version-7-8></migration-version-7-8>
 
+  <migration-version-8-9></migration-version-8-9>
+
 </migration-global-state>

packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts

@@ -0,0 +1,72 @@
+import { html, LitElement, nothing } from 'lit';
+import { _templateAutoIcon } from '@/stories/getting-started/migration-guide/util/template.util';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('migration-version-8-9')
+export class MigrationV89Component extends LitElement {
+  @property({ type: Number }) currentVersion?: number;
+  @property({ type: String }) environment?: string;
+  @property({ type: Boolean }) angular?: boolean;
+
+  createRenderRoot() {
+    /**
+     * Render template without shadow DOM.
+     */
+    return this;
+  }
+
+  render() {
+    if (!this.currentVersion || this.currentVersion > 8) return nothing;
+
+    return html`
+      <h2 id="migration-from-v8-to-v9" class="docs-autolink">
+        Migration from v8 to v9
+        <a
+          aria-hidden="true"
+          tabindex="-1"
+          href="http://localhost:9000/?path=/docs/c23b1d0b-76b3-4e38-aa76-b10c29bb873f--docs#migration-from-v8-to-v9"
+        >
+          <post-icon name="2037"></post-icon>
+        </a>
+      </h2>
+      <section>
+        <ol class="bubble-tea">
+          <li>
+            <h3>Component Migration 🤓</h3>
+
+            <section>
+              <h4>Styles</h4>
+
+              <ul>
+                <li class="mb-3">
+                  <p>
+                    Removed deprecated line-height variables
+                    <span class="tag tag-sm tag-danger">breaking</span>
+                  </p>
+                  <ul>
+                    <li><code>$line-heights</code></li>
+                    <li><code>$line-height-tiny</code></li>
+                    <li><code>$line-height-small</code></li>
+                    <li><code>$line-height-regular</code></li>
+                    <li><code>$line-height-bigger-regular</code></li>
+                    <li><code>$line-height-medium</code></li>
+                    <li><code>$line-height-large</code></li>
+                    <li><code>$line-height-small-big</code></li>
+                    <li><code>$line-height-big</code></li>
+                    <li><code>$line-height-bigger-big</code></li>
+                    <li><code>$line-height-small-huge</code></li>
+                    <li><code>$line-height-huge</code></li>
+                  </ul>
+                </li>
+              </ul>
+            </section>
+          </li>
+        </ol>
+      </section>
+    `;
+  }
+
+  private _templateAutoIconAngular() {
+    return html` ${this.angular ? _templateAutoIcon() : nothing} `;
+  }
+}

packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts

@@ -27,6 +27,9 @@ export class SetupComponent extends LitElement {
               id="docs_Default_ExampleSelect"
               class="form-select form-select-lg"
             >
+              <option value="8" ?selected="${this.currentVersion === 8}">
+                @swisspost/design-system-styles 8.x.x
+              </option>
               <option value="7" ?selected="${this.currentVersion === 7}">
                 @swisspost/design-system-styles 7.x.x
               </option>

packages/documentation/src/stories/utilities/text/text-line-height.sample.scss

@@ -1,5 +1,5 @@
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
-  line-height: post.$line-height-tiny;
+  line-height: post.$line-height-sm;
 }

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

@@ -80,10 +80,6 @@ import SampleColor from './text-color.sample.scss?raw';
 
 ### Line Heights
 
-<div className="alert alert-warning my-4">
-  Fixed-size line heights are deprecated in favor of relative line height utility classes.
-</div>
-
 <Canvas of={TextStories.LineHeight} sourceState="shown" />
 
 #### Set Line Height in SCSS

packages/styles/src/variables/_type.scss

@@ -53,19 +53,6 @@ $line-height-sm: 1;
 $line-height-copy: 1.5;
 $line-height-heading: 1.2;
 
-// Deprecated
-$line-height-tiny: $line-height-copy;
-$line-height-small: $line-height-copy;
-$line-height-regular: $line-height-copy;
-$line-height-bigger-regular: $line-height-copy;
-$line-height-medium: $line-height-copy;
-$line-height-large: $line-height-heading;
-$line-height-small-big: $line-height-heading;
-$line-height-big: $line-height-heading;
-$line-height-bigger-big: $line-height-heading;
-$line-height-small-huge: $line-height-heading;
-$line-height-huge: $line-height-heading;
-
 $font-weight-light: 300 !default; // Design System -> Frutiger Neue Light
 $font-weight-normal: 400 !default; // Design System -> Frutiger Neue Roman
 $font-weight-bold: 700 !default; // Design System -> Frutiger Neue Bold
@@ -99,20 +86,6 @@ $font-size-map: (
   56: $font-size-56,
 );
 
-$line-heights: (
-  'tiny': $line-height-tiny,
-  'small': $line-height-small,
-  'regular': $line-height-regular,
-  'bigger-regular': $line-height-bigger-regular,
-  'medium': $line-height-medium,
-  'large': $line-height-large,
-  'small-big': $line-height-small-big,
-  'big': $line-height-big,
-  'bigger-big': $line-height-bigger-big,
-  'small-huge': $line-height-small-huge,
-  'huge': $line-height-huge,
-);
-
 // Deprecated
 $font-curve-tiny: (
   'xs': $font-size-tiny,