@swisspost/design-system-styles 6.0.0 → 6.1.0

package/components/alert.scss

@@ -23,8 +23,6 @@
 }
 
 .alert {
-  $effective-line-height: (alert.$alert-line-height * alert.$alert-font-size);
-
   @extend %notification;
 
   min-height: 2 * alert.$alert-padding-y + alert.$alert-icon-size;

package/components/button.scss

@@ -36,7 +36,6 @@
   color: var(--post-contrast-color);
   font-family: inherit;
   font-weight: button.$btn-font-weight;
-  line-height: inherit;
   text-decoration: none !important; // For <a> tags, !important for hover
   white-space: nowrap; // Long content should never break in buttons
 }

package/components/datepicker.scss

@@ -1,6 +1,7 @@
 @forward './../variables/options';
 
 @use './../variables/color';
+@use './../variables/type';
 @use './../variables/components/datepicker';
 @use './../variables/components/forms';
 @use './../variables/commons';
@@ -73,7 +74,7 @@ span.ngb-dp-navigation-chevron {
   color: rgba(var(--post-contrast-color-rgb), 0.6) !important;
   font-size: 1rem;
   font-style: normal !important;
-  line-height: 1.47 !important;
+  line-height: type.$line-height-copy !important;
   width: 40px !important;
   height: auto !important;
   font-weight: normal;

package/components/floating-label.scss

@@ -21,7 +21,7 @@
     padding-inline: forms.$form-floating-padding-x;
     padding-block: calc(
       #{forms.$input-border-width} + #{forms.$form-floating-label-height * 0.5} - #{forms.$form-floating-label-font-size *
-        type.$line-height-base * 0.5}
+        type.$line-height-copy * 0.5}
     );
     height: forms.$form-floating-label-height;
     border: 0;
@@ -99,10 +99,6 @@
       padding-bottom: 0;
       height: auto;
 
-      option {
-        height: 1em * forms.$form-floating-line-height;
-      }
-
       ~ label {
         padding-top: forms.$input-padding-y-lg * forms.$form-floating-label-scale;
         padding-bottom: 0;

package/components/intranet-header/_scaffolding.scss

@@ -47,7 +47,6 @@
   h2 {
     overflow: hidden;
     font-size: 1.6rem; // Same as PostWeb
-    line-height: 1.2;
     text-overflow: ellipsis;
   }
 }

package/components/intranet-header/_top-navigation.scss

@@ -13,8 +13,9 @@
 .top-navigation {
   button.nav-link {
     @include button-mixins.reset-button();
+    display: flex;
+    align-items: center;
     padding: nav.$nav-link-padding-y navbar.$navbar-nav-link-padding-x;
-    line-height: var(--post-body-line-height);
 
     @include media-breakpoint-down(md) {
       padding: 1rem 3rem 1rem 0;

package/components/progress.scss

@@ -22,7 +22,6 @@
 
     > span {
       background-color: ButtonFace;
-      line-height: 1;
     }
   }
 }

package/components/sizing.scss

@@ -16,7 +16,7 @@
         in (
           margin: m,
           padding: p,
-          line-height: lh,
+          /* Deprecated */ line-height: lh,
           height: h,
           max-height: mh,
           width: w,

package/components/type.scss

@@ -10,65 +10,37 @@
 @use './../variables/color';
 @use './../variables/commons';
 @use './../variables/type';
+@use './../variables/heading';
 @use './../variables/spacing';
 @use './../variables/components/paragraph';
 @use './../layouts/portal/type' as portal;
 @use './../placeholders/text';
 @use './../mixins/type' as type-mx;
 
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  font-weight: type.$font-weight-bold;
-}
-
-h6,
-.h6,
-.font-curve-tiny {
-  @include type-mx.font-curve('tiny');
-}
-
-.font-curve-small {
-  @include type-mx.font-curve('small');
-}
-
-.font-curve-regular {
-  @include type-mx.font-curve('regular');
-}
-
-h5,
-.h5,
-.font-curve-bigger-regular {
-  @include type-mx.font-curve('bigger-regular');
+// Deprecated
+@each $key, $curve in type.$font-curves {
+  .font-curve-#{$key} {
+    @include type-mx.font-curve($key);
+  }
 }
 
-h3,
-.h3,
-h4,
-.h4,
-.font-curve-medium {
-  @include type-mx.font-curve('medium');
+// Generate heading sizes using the sizes map and the font-curve mixin
+@each $heading in ('h1', 'h2', 'h3', 'h4', 'h5', 'h6') {
+  #{$heading},
+  .#{$heading} {
+    @include type-mx.font-curve('heading-sizes-#{$heading}', heading.$heading-sizes);
+  }
 }
 
-h2,
-.h2,
-.font-curve-large {
-  @include type-mx.font-curve('large');
-}
+@each $key, $font-size in type.$font-size-map {
+  .font-size-#{$key} {
+    font-size: $font-size;
 
-h1,
-.h1,
-.font-curve-big {
-  @include type-mx.font-curve('big');
+    // Font sizes bigger than 24px can have a reduced line height
+    @if ($key >= 24) {
+      line-height: type.$line-height-heading;
+    }
+  }
 }
 
 .blockquote {

package/functions/_sizing.scss

@@ -32,6 +32,7 @@
 
 // Hardcoded numbers come directly from design (new CI/CD)
 // line-height always depends on font-size
+// Deprecated
 @function line-height-calc($val) {
   @if $val < px-to-rem(17) {
     @return 1.5;