@norwegian/core-components 7.17.2 → 8.0.1

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@norwegian/core-components",
-  "version": "7.17.2",
+  "version": "8.0.1",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
-    "@angular/common": ">=16.0.0 < 22.0.0",
-    "@angular/core": ">=16.0.0 < 22.0.0"
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0"
   },
-  "dependencies": {
-    "tslib": "^2.5.0"
+  "engines": {
+    "npm": ">=8.0.0 <12.0.0",
+    "node": ">=16.0.0 <22.0.0"
   },
   "module": "fesm2022/norwegian-core-components.mjs",
   "typings": "index.d.ts",
@@ -16,10 +21,11 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/norwegian-core-components.mjs",
-      "esm": "./esm2022/norwegian-core-components.mjs",
       "default": "./fesm2022/norwegian-core-components.mjs"
     }
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }

package/styles/1__settings/_colors.scss

@@ -53,16 +53,16 @@ $base-colors: (
         60: #2EB004,
         80: #238E00,
         base: #2EB004),
-    grey-color: (100: #1C1C1C,
-        90: #3C3C3C,
-        80: #5B5B5B,
-        70: #6F6F6F,
-        60: #909090,
-        50: #C3C3C3,
-        40: #E9E7E4,
-        30: #EAEAEA,
+    grey-color: (10: #F8F8F8,
         20: #F1F1F1,
-        10: #F8F8F8,
+        30: #EAEAEA,
+        40: #E9E7E4,
+        50: #C3C3C3,
+        60: #909090,
+        70: #6F6F6F,
+        80: #5B5B5B,
+        90: #3C3C3C,
+        100: #1C1C1C,
         base: #C3C3C3),
     orange-color: (10: #FFF6EC,
         20: #FFE8CC,

package/styles/1__settings/_mixins.scss

@@ -1,52 +1,72 @@
-@import '../3__base/animations';
+@use '../3__base/animations' as *;
+@use './vars' as *;
+@use './type' as *;
+@use 'sass:list';
+@use "sass:map";
+@use 'sass:meta';
 
 // Font family and weights
-@mixin font($font-family: base, $weight: null) {
-  $family: map-get($fonts, $font-family);
-
-  @if $weight {
-    @if map-has-key($family, $weight) {
-      $f-weight: map-get($family, $weight);
+@function resolve-font-family($font-family, $weight: null) {
+  $family: map.get($fonts, $font-family);
 
-      @if (length($f-weight) > 1) {
-        font-family: nth($f-weight, 2), map-get($family, fallback);
-        font-weight: nth($f-weight, 1);
-      }
+  @if $weight and map.has-key($family, $weight) {
+    $f-weight: map.get($family, $weight);
 
-      @else {
-        font-family: map-get($family, font), map-get($family, fallback);
-        font-weight: $f-weight;
-      }
+    @if meta.type-of($f-weight)=='list' and list.length($f-weight)>1 {
+      @return list.nth($f-weight, 2), map.get($family, fallback);
     }
+  }
 
-    @else {
-      font-family: map-get($family, font), map-get($family, fallback);
+  @return map.get($family, font), map.get($family, fallback);
+}
+
+@function resolve-font-weight($font-family, $weight: null) {
+  $family: map.get($fonts, $font-family);
+
+  @if ($weight and map.has-key($family, $weight)) {
+    $f-weight: map.get($family, $weight);
+
+    @if (meta.type-of($f-weight)=='list' and list.length($f-weight) > 1) {
+      @return list.nth($f-weight, 1);
     }
+
+    @return $f-weight;
   }
 
-  @else {
-    font-family: map-get($family, font), map-get($family, fallback);
+  @return null;
+}
+
+@mixin font($font-family: base, $weight: null) {
+  $resolved-font-family: resolve-font-family($font-family, $weight);
+  $resolved-font-weight: resolve-font-weight($font-family, $weight);
+
+  & {
+    font-family: $resolved-font-family;
+
+    @if ($resolved-font-weight !=null) {
+      font-weight: $resolved-font-weight;
+    }
   }
 }
 
 @mixin font-size($size, $skip-line-height: false, $size-variant: 'base') {
-  $fs-map: map-get($font-size, $size);
+  $fs-map: map.get($font-size, $size);
 
   @each $bp, $pair in $fs-map {
-    @if $bp ==$size-variant {
+    @if ($bp ==$size-variant) {
       @include make-font-size($pair, $skip-line-height); // desktop default
     }
 
-    @else if $bp ==mobile {
+    @else if ($bp ==mobile) {
 
       // apply on small screens (below md)
-      @media (max-width: calc(map-get($breakpoints, md) - 1px)) {
+      @media (max-width: calc(map.get($breakpoints, md) - 1px)) {
         @include make-font-size($pair, $skip-line-height);
       }
     }
 
-    @else if map-has-key($breakpoints, $bp) {
-      @media (min-width: map-get($breakpoints, $bp)) {
+    @else if (map.has-key($breakpoints, $bp)) {
+      @media (min-width: map.get($breakpoints, $bp)) {
         @include make-font-size($pair, $skip-line-height);
       }
     }
@@ -54,19 +74,26 @@
 }
 
 @mixin make-font-size($fs-font-size, $skip-line-height: false) {
-  @if (type-of($fs-font-size)=="list") {
-    font-size: nth($fs-font-size, 1);
+  $resolved-font-size: null;
+  $resolved-line-height: null;
+
+  @if (meta.type-of($fs-font-size)=='list') {
+    $resolved-font-size: list.nth($fs-font-size, 1);
 
-    @if ($skip-line-height !=true and length($fs-font-size) > 1) {
-      line-height: nth($fs-font-size, 2);
+    @if ($skip-line-height !=true and list.length($fs-font-size) > 1) {
+      $resolved-line-height: list.nth($fs-font-size, 2);
     }
   }
 
   @else {
-    font-size: $fs-font-size;
+    $resolved-font-size: $fs-font-size;
+  }
+
+  & {
+    font-size: $resolved-font-size;
 
-    @if ($skip-line-height !=true) {
-      line-height: nth($fs-font-size, 1);
+    @if ($resolved-line-height !=null) {
+      line-height: $resolved-line-height;
     }
   }
 }
@@ -92,14 +119,14 @@
 
 // Media queries
 @mixin min-width($name) {
-  @if not map-has-key($breakpoints, $name) {
+  @if not map.has-key($breakpoints, $name) {
     @media (min-width: $name) {
       @content;
     }
   }
 
   @else {
-    @media (min-width: map-get($breakpoints, $name)) {
+    @media (min-width: map.get($breakpoints, $name)) {
       @content;
     }
   }
@@ -107,14 +134,14 @@
 
 // Some very rare occations we might need this one.. USE WITH CARE!!!
 @mixin between($min, $max) {
-  @if not map-has-key($breakpoints, $min) {
+  @if not map.has-key($breakpoints, $min) {
     @media (min-width: $min) and (max-width: $max) {
       @content;
     }
   }
 
   @else {
-    @media (min-width: map-get($breakpoints, $min)) and (max-width: (map-get($breakpoints, $max) - 1)) {
+    @media (min-width: map.get($breakpoints, $min)) and (max-width: (map.get($breakpoints, $max) - 1)) {
       @content;
     }
   }
@@ -244,10 +271,10 @@
   );
 
 @for $i from -$width through $width {
-  $shadow: append($shadow, #{$width}px #{$i}px $color, comma);
-  $shadow: append($shadow, #{-$width}px #{$i}px $color, comma);
-  $shadow: append($shadow, #{$i}px #{$width}px $color, comma);
-  $shadow: append($shadow, #{$i}px #{-$width}px $color, comma);
+  $shadow: list.append($shadow, #{$width}px #{$i}px $color, comma);
+  $shadow: list.append($shadow, #{-$width}px #{$i}px $color, comma);
+  $shadow: list.append($shadow, #{$i}px #{$width}px $color, comma);
+  $shadow: list.append($shadow, #{$i}px #{-$width}px $color, comma);
 }
 
 text-shadow: $shadow;

package/styles/1__settings/_type.scss

@@ -14,10 +14,22 @@ $font-size: (
     xsmall: (base: (14px, 20px)), // compact
     small: (base: (16px, 24px)), // default
     xregular: (base: (18px, 24px)), // subheading | h6
-    regular: (base: (24px, 32px), mobile: (20px, 28px)), // subtitle | h5
-    medium: (base: (24px, 32px), mobile: (20px, 28px)), // size_d | h4
-    large: (base: (32px, 40px), mobile: (24px, 32px)), // size_c | h3
-    xlarge: (base: (40px, 48px), mobile: (32px, 40px)), // size_b | h2
-    xxlarge: (base: (48px, 56px), mobile: (40px, 48px)), // size_a | h1
-    xxxlarge: (base: (56px, 64px), mobile: (48px, 56px)) // display | 1-4 words
+    regular: ( // subtitle | h5
+        base: (24px, 32px),
+        mobile: (20px, 28px)),
+    medium: ( // size_d | h4
+        base: (24px, 32px),
+        mobile: (20px, 28px)),
+    large: ( // size_c | h3
+        base: (32px, 40px),
+        mobile: (24px, 32px)),
+    xlarge: ( // size_b | h2
+        base: (40px, 48px),
+        mobile: (32px, 40px)),
+    xxlarge: ( // size_a | h1
+        base: (48px, 56px),
+        mobile: (40px, 48px)),
+    xxxlarge: ( // display | 1-4 words
+        base: (56px, 64px),
+        mobile: (48px, 56px))
 );

package/styles/1__settings/_vars.scss

@@ -1,8 +1,11 @@
 // Breakpoints
 $breakpoints: (
-    xs: 380px, // Small and up
-    md: 640px, // Medium and up
-    lg: 1000px, // Large and up
+    xs: 380px,
+    // Small and up
+    md: 640px,
+    // Medium and up
+    lg: 1000px,
+    // Large and up
     xl: 1280px // Extra large and up
 );
 
@@ -58,4 +61,4 @@ $header-height: 70px;
 $level-1: 10;
 $level-2: 20;
 $level-3: 30;
-$level-4: 40;
+$level-4: 40;

package/styles/2__generic/_fonts.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 $import-fonts: (
     NorwegianDisplayPro-Regular: ('NorwegianDisplayPro',
         'NorwegianDisplayPro-Regular',
@@ -28,11 +30,11 @@ $import-fonts: (
 @each $key,
 $value in $import-fonts {
     @font-face {
-        font-family: '#{nth($value, 1)}';
-        font-style: nth($value, 4);
-        font-weight: nth($value, 3);
+        font-family: '#{list.nth($value, 1)}';
+        font-style: list.nth($value, 4);
+        font-weight: list.nth($value, 3);
         font-display: fallback;
-        src: url('../../assets/fonts/#{nth($value, 2)}.woff2') format('woff2'),
-        url('../../assets/fonts/#{nth($value, 2)}.woff') format('woff');
+        src: url('/assets/fonts/#{list.nth($value, 2)}.woff2') format('woff2'),
+        url('/assets/fonts/#{list.nth($value, 2)}.woff') format('woff');
     }
 }

package/styles/3__base/_animations.scss

@@ -52,87 +52,87 @@
 }
 
 @keyframes pop-in-from-top {
-  0% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);
-      opacity: 0
-  }
-
-  6.67% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)
-  }
-
-  13.33% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)
-  }
-
-  20% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)
-  }
-
-  26.67% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)
-  }
-
-  33.33% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);
-      opacity: 1
-  }
-
-  40% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)
-  }
-
-  46.67% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)
-  }
-
-  53.33% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)
-  }
-
-  60% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)
-  }
-
-  66.67% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)
-  }
-
-  73.33% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)
-  }
-
-  80% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)
-  }
-
-  86.67% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)
-  }
-
-  93.33% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);
-      -webkit-transform: translate3d(0,0,0)
-  }
-
-  100% {
-      -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);
-      transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);
-      -webkit-transform: translate3d(0,0,0)
-  }
-}
+    0% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -100, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -100, 1, 1);
+        opacity: 0
+    }
+
+    6.67% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.227, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.227, 1, 1)
+    }
+
+    13.33% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.76, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.76, 1, 1)
+    }
+
+    20% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.08, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 7.08, 1, 1)
+    }
+
+    26.67% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.838, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 3.838, 1, 1)
+    }
+
+    33.33% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, .902, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, .902, 1, 1);
+        opacity: 1
+    }
+
+    40% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.237, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.237, 1, 1)
+    }
+
+    46.67% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.312, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.312, 1, 1)
+    }
+
+    53.33% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.141, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.141, 1, 1)
+    }
+
+    60% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.021, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.021, 1, 1)
+    }
+
+    66.67% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, .015, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, .015, 1, 1)
+    }
+
+    73.33% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, .013, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, .013, 1, 1)
+    }
+
+    80% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, .005, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, .005, 1, 1)
+    }
+
+    86.67% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1)
+    }
+
+    93.33% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.001, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.001, 1, 1);
+        -webkit-transform: translate3d(0, 0, 0)
+    }
+
+    100% {
+        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.001, 1, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -.001, 1, 1);
+        -webkit-transform: translate3d(0, 0, 0)
+    }
+}

package/styles/3__base/_body.scss

@@ -1,24 +1,26 @@
+@use '../2__generic/fonts';
+@use '../1__settings/mixins' as *;
+@use '../1__settings/colors' as *;
+
 body {
-    @include font(base, normal);
-    @include font-size(small, true);
+    background-color: $background-canvas;
     color: $typography-default;
     font-style: normal;
     line-height: 1.4;
+    overflow-x: hidden;
+    text-rendering: optimizeLegibility;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-
-    overflow-x: hidden;
-    background-color: $background-canvas;
-
+    @include font(base, normal);
+    @include font-size(small, true);
 
     &.block-scrolling {
         width: 100%;
         overflow: hidden;
 
         &__top-position {
-            @extend .block-scrolling;
             position: fixed;
+            @extend .block-scrolling;
         }
     }
 }

package/styles/3__base/_fixes.scss

@@ -2,4 +2,4 @@
   display: table;
   content: "";
   clear: both;
-}
+}

package/styles/3__base/_form.scss

@@ -1,12 +1,15 @@
+@use '../1__settings/vars' as *;
+@use '../1__settings/mixins' as *;
+
 fieldset {
     border: 0;
 }
 
 
 legend {
-    @include font(base, bold);
     display: block;
     margin-bottom: $spacing--small;
+    @include font(base, bold);
 }
 
 // Label
@@ -14,5 +17,4 @@ label,
 .label {
     display: block;
     margin-bottom: $spacing--xxsmall;
-
-}
+}

package/styles/3__base/_heading.scss

@@ -1,27 +1,35 @@
+@use '../1__settings/mixins' as *;
+@use '../1__settings/vars' as *;
+@use '../1__settings/colors' as *;
+
 // Headings
 .xxl-typo {
+    letter-spacing: -0.03em;
+    margin: 0 0 $spacing;
     @include font-size(xxlarge);
     @include font(heading, bold);
-    margin: 0 0 $spacing;
 }
 
 .xl-typo {
+    letter-spacing: -0.03em;
+    margin: 0 0 $spacing--medium;
     @include font-size(xlarge);
     @include font(heading, bold);
-    margin: 0 0 $spacing--medium;
 }
 
 .l-typo {
+    letter-spacing: -0.03em;
     @include font-size(large);
     @include font(heading, bold);
 }
 
 h1,
 .heading1 {
-    @include font(heading, bold);
-    @include font-size(xxlarge, false, mobile);
     margin: 0 0 $spacing;
+    letter-spacing: -0.03em;
     color: $typography-default;
+    @include font(heading, bold);
+    @include font-size(xxlarge, false, mobile);
 
     @include min-width(md) {
         @include font-size(xxlarge, false, base);
@@ -30,9 +38,10 @@ h1,
 
 h2,
 .heading2 {
+    margin: 0 0 $spacing--xsmall;
+    letter-spacing: -0.03em;
     @include font(heading, bold);
     @include font-size(xlarge, false, mobile);
-    margin: 0 0 $spacing--xsmall;
 
     @include min-width(md) {
         @include font-size(xlarge, false, base);
@@ -41,9 +50,9 @@ h2,
 
 h3,
 .heading3 {
+    margin: 0 0 $spacing--xxxsmall;
     @include font(heading, bold);
     @include font-size(large, false, mobile);
-    margin: 0 0 $spacing--xxxsmall;
 
     @include min-width(md) {
         @include font-size(large, false, base);
@@ -52,10 +61,10 @@ h3,
 
 h4,
 .heading4 {
-    @include font(heading, bold);
-    @include font-size(medium, false, mobile);
     letter-spacing: 0;
     margin: 0 0 $spacing--xxxsmall;
+    @include font(heading, bold);
+    @include font-size(medium, false, mobile);
 
     @include min-width(md) {
         @include font-size(medium, false, base);
@@ -64,10 +73,10 @@ h4,
 
 h5,
 .heading5 {
-    @include font(heading, bold);
-    @include font-size(regular, false, mobile);
     letter-spacing: 0;
     margin: 0 0 $spacing--xxxsmall;
+    @include font(heading, bold);
+    @include font-size(regular, false, mobile);
 
     @include min-width(md) {
         @include font-size(regular, false, base);
@@ -76,13 +85,13 @@ h5,
 
 h6,
 .heading6 {
+    margin: 0 0 $spacing--xxxsmall;
     @include font(heading, bold);
     @include font-size(xregular, false, base);
-    margin: 0 0 $spacing--xxxsmall;
 
     a {
-        color: $typography-default;
         border-bottom: 0;
+        color: $typography-default;
     }
 }