@swisspost/design-system-styles 6.0.0 → 6.1.0

package/mixins/_button.scss

@@ -14,7 +14,6 @@
   background: none;
   color: inherit;
   font: inherit;
-  line-height: normal;
   user-select: none;
   appearance: button; // for input
 }

package/mixins/_forms.scss

@@ -32,6 +32,7 @@
     font-size: form-feedback.$form-feedback-font-size;
   }
 
+  // Deprecated
   .#{$state}-tooltip {
     display: none;
     position: absolute;
@@ -43,7 +44,7 @@
     border-radius: tooltips.$tooltip-border-radius;
     color: color-contrast($color);
     font-size: tooltips.$tooltip-font-size;
-    line-height: type.$line-height-base;
+    line-height: type.$line-height-copy;
 
     /* Keeping borders gray while maintaining a green background on tooltips */
     @if ($state == 'valid') {

package/mixins/_type.scss

@@ -8,35 +8,24 @@
 @use './../functions/utilities';
 @use './../themes/bootstrap/core' as *;
 
-@mixin font-curve($curve-size: 'regular') {
-  $curve: map.get(type.$font-curves, $curve-size);
+@mixin font-curve($curve-size: 'regular', $curve-map: type.$font-curves) {
+  $curve: map.get($curve-map, $curve-size);
 
   @if ($curve) {
     $font-cache: 0;
-    $line-height-cache: 0;
 
     @each $key, $value in $curve {
-      // Get line height corresponding to font size
-      $i: list.index(map.values(type.$font-sizes), $value);
-      $lh: list.nth(map.values(type.$line-heights), $i);
-
       @if ($key == 'xs') {
         font-size: $value;
-        line-height: $lh;
       } @else {
         @if ($font-cache != $value) {
           @include media-breakpoint-up($key) {
             font-size: $value;
-
-            @if ($line-height-cache != $lh) {
-              line-height: $lh;
-            }
           }
         }
       }
 
       $font-cache: $value;
-      $line-height-cache: $lh;
     }
   } @else {
     @error 'Font curve #{$curve-size} is not defined.';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -20,22 +20,22 @@
     "@angular-devkit/core": "<=15.0.4",
     "@angular-devkit/schematics": "<=15.0.4",
     "@angular/core": "<=15.0.4",
-    "@popperjs/core": "2.11.6",
+    "@popperjs/core": "2.11.7",
     "bootstrap": "5.2.3",
     "cheerio": "1.0.0-rc.12",
-    "prettier": "2.8.4",
+    "prettier": "2.8.7",
     "typescript": "4.9.5"
   },
   "devDependencies": {
     "@angular/compiler": "<=15.0.4",
-    "@percy/cli": "1.20.3",
+    "@percy/cli": "1.21.0",
     "@percy/cypress": "3.1.2",
-    "@types/node": "18.15.1",
+    "@types/node": "18.15.10",
     "autoprefixer": "10.4.14",
     "copyfiles": "2.4.1",
-    "cypress": "12.7.0",
+    "cypress": "12.8.1",
     "cypress-storybook": "0.5.1",
-    "glob": "9.2.1",
+    "glob": "9.3.2",
     "gulp": "4.0.2",
     "gulp-postcss": "9.0.1",
     "gulp-sass": "5.1.0",
@@ -43,13 +43,13 @@
     "npm-run-all": "4.1.5",
     "postcss": "8.4.21",
     "postcss-scss": "4.0.6",
-    "rimraf": "4.4.0",
-    "sass": "1.59.2",
-    "stylelint": "15.2.0",
+    "rimraf": "4.4.1",
+    "sass": "1.60.0",
+    "stylelint": "15.3.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-prettier": "2.0.0",
-    "stylelint-scss": "4.4.0"
+    "stylelint-scss": "4.6.0"
   },
   "sass": {
     "includePaths": [
@@ -69,7 +69,6 @@
     "build": "npm-run-all --parallel styles:build schematics:build",
     "styles:build": "gulp build",
     "test": "jest --onlyChanged",
-    "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js",
     "clean": "rimraf out-tsc dist/*",
     "format": "prettier src/**/*.scss --write",
     "lint": "stylelint src/**/*.scss",

package/placeholders/badge.scss

@@ -13,7 +13,6 @@
   height: badge.$badge-height;
   font-size: badge.$badge-font-size;
   font-weight: $badge-font-weight;
-  line-height: 1;
   color: $badge-color;
   text-align: center;
   white-space: nowrap;
@@ -31,7 +30,6 @@
     background-color: badge.$badge-nested-bg-color;
     border-color: badge.$badge-nested-border-color;
     font-size: badge.$badge-nested-font-size;
-    line-height: 1;
   }
 
   > .btn-close {

package/schematics/migrations/ngbootstrap/buttons/index.js

@@ -63,6 +63,13 @@ class NgbButtonGroupDeprecationUpdate {
                     .forEach(attr => {
                     $input.attr(attr.key, attr.value);
                 });
+                // if the label uses an ngFor directive, move it to a ng-container wrapper
+                const ngFor = $label.attr('*ngFor');
+                if (ngFor) {
+                    const $container = $(`<ng-container *ngFor="${ngFor}"></ng-container>`);
+                    $label.wrap($container);
+                    $label.removeAttr('*ngFor');
+                }
                 // move the input before its label
                 $label.before($input);
             });

package/schematics/migrations/ngbootstrap/buttons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../schematics/migrations/ngbootstrap/buttons/index.ts"],"names":[],"mappings":";;AAEA,mCAAoC;AACpC,wDAAwF;AACxF,gEAA8E;AAE9E;IACE,OAAO,IAAA,mCAAmB,EACxB,IAAI,+BAA+B,CACpC,CAAC;AACJ,CAAC;AAJD,4BAIC;AAED,MAAM,+BAA+B;IAArC;QACE,aAAQ,GAAG,YAAY,CAAC;IAqE1B,CAAC;IAnEC,MAAM,CAAC,aAA+B,EAAE,CAAa;QACnD,aAAa;aACV,IAAI,CAAC,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE;;YACxB,MAAM,YAAY,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC;YAEpC,MAAM,OAAO,GAAG,YAAY;iBACzB,QAAQ,CAAC,OAAO,CAAC;iBACjB,MAAM,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;gBACpB,OAAO,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,WAAW,CAAC;YAChE,CAAC,CAAC,CAAC;YAEL,wEAAwE;YACxE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;gBACnB,OAAO;aACR;YAED,uEAAuE;YACvE,IAAI,oBAAsD,CAAC;YAC3D,IAAI,OAAO,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,WAAW,EAAE;gBAC7D,YAAY,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;gBAEzC,wDAAwD;gBACxD,oBAAoB,GAAG,iCAAqB;qBACzC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;qBAC5D,MAAM,CAAC,CAAC,IAAI,EAA0C,EAAE,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,CAAC;gBAE/F,wDAAwD;gBACxD,MAAM,CAAC,OAAO,CAAC,MAAA,YAAY,CAAC,IAAI,EAAE,mCAAI,EAAE,CAAC;qBACtC,OAAO,CAAC,CAAC,CAAE,GAAG,EAAE,KAAK,CAAE,EAAE,EAAE;oBAC1B,IAAI,iCAAqB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;wBACzC,oBAAoB,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;qBAC3C;gBACH,CAAC,CAAC,CAAC;gBAEL,yEAAyE;gBACzE,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBAClC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACpC,CAAC,CAAC,CAAC;aACJ;YAED,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;gBACzB,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;gBACxB,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;gBAEhD,4BAA4B;gBAC5B,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;gBACpC,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;gBAE/B,0CAA0C;gBAC1C,IAAI,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAChC,IAAI,CAAC,OAAO,EAAE;oBACZ,OAAO,GAAG,IAAA,mBAAU,GAAE,CAAC;oBACvB,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;iBAC5B;gBACD,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;gBAE5B,kCAAkC;gBAClC,oBAAoB;qBACjB,OAAO,CAAC,IAAI,CAAC,EAAE;oBACd,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC,CAAC,CAAC;gBAEL,kCAAkC;gBAClC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACxB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;CACF"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../schematics/migrations/ngbootstrap/buttons/index.ts"],"names":[],"mappings":"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"}

package/variables/_heading.scss

@@ -0,0 +1,52 @@
+@use './type';
+
+// Intended for use with min-width, mobile first, bottom up approach
+$heading-sizes-h1: (
+  xs: type.$font-size-28,
+  sm: type.$font-size-32,
+  md: type.$font-size-40,
+  xxl: type.$font-size-48,
+);
+
+$heading-sizes-h2: (
+  xs: type.$font-size-24,
+  sm: type.$font-size-28,
+  md: type.$font-size-32,
+  xxl: type.$font-size-40,
+);
+
+$heading-sizes-h3: (
+  xs: type.$font-size-18,
+  sm: type.$font-size-20,
+  md: type.$font-size-24,
+  xxl: type.$font-size-28,
+);
+
+$heading-sizes-h4: (
+  xs: type.$font-size-16,
+  sm: type.$font-size-18,
+  md: type.$font-size-20,
+  xxl: type.$font-size-24,
+);
+
+$heading-sizes-h5: (
+  xs: type.$font-size-14,
+  sm: type.$font-size-16,
+  md: type.$font-size-18,
+  xxl: type.$font-size-20,
+);
+
+$heading-sizes-h6: (
+  xs: type.$font-size-14,
+  md: type.$font-size-16,
+  xxl: type.$font-size-18,
+);
+
+$heading-sizes: (
+  'heading-sizes-h1': $heading-sizes-h1,
+  'heading-sizes-h2': $heading-sizes-h2,
+  'heading-sizes-h3': $heading-sizes-h3,
+  'heading-sizes-h4': $heading-sizes-h4,
+  'heading-sizes-h5': $heading-sizes-h5,
+  'heading-sizes-h6': $heading-sizes-h6,
+);

package/variables/_index.scss

@@ -12,3 +12,4 @@
 @forward 'spacing';
 @forward 'type';
 @forward 'components';
+@forward 'heading';

package/variables/_type.scss

@@ -15,6 +15,7 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mon
   monospace !default;
 $font-family-base: $font-family-sans-serif !default;
 
+// Deprecated
 $font-size-tiny: sizing.px-to-rem(13px);
 $font-size-small: sizing.px-to-rem(15px);
 $font-size-regular: sizing.px-to-rem(16px);
@@ -27,22 +28,39 @@ $font-size-bigger-big: sizing.px-to-rem(40px);
 $font-size-small-huge: sizing.px-to-rem(48px);
 $font-size-huge: sizing.px-to-rem(56px);
 
-$line-height-tiny: 1.4;
-$line-height-small: 1.4;
-$line-height-regular: 1.4;
-$line-height-bigger-regular: 1.4;
-$line-height-medium: 1.4;
-$line-height-large: 1.1;
-$line-height-small-big: 1.1;
-$line-height-big: 1.1;
-$line-height-bigger-big: 1.1;
-$line-height-small-huge: 1.1;
-$line-height-huge: 1.1;
+// New
+$font-size-14: sizing.px-to-rem(14px);
+$font-size-16: sizing.px-to-rem(16px);
+$font-size-18: sizing.px-to-rem(18px);
+$font-size-20: sizing.px-to-rem(20px);
+$font-size-24: sizing.px-to-rem(24px);
+$font-size-28: sizing.px-to-rem(28px);
+$font-size-32: sizing.px-to-rem(32px);
+$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-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 Roman
+$font-weight-bold: 700 !default; // Design System -> Frutiger Neue Bold
 
+// Deprecated
 $font-sizes: (
   'tiny': $font-size-tiny,
   'small': $font-size-small,
@@ -57,6 +75,19 @@ $font-sizes: (
   'huge': $font-size-huge,
 );
 
+$font-size-map: (
+  14: $font-size-14,
+  16: $font-size-16,
+  18: $font-size-18,
+  20: $font-size-20,
+  24: $font-size-24,
+  28: $font-size-28,
+  32: $font-size-32,
+  40: $font-size-40,
+  48: $font-size-48,
+  56: $font-size-56,
+);
+
 $line-heights: (
   'tiny': $line-height-tiny,
   'small': $line-height-small,
@@ -71,6 +102,7 @@ $line-heights: (
   'huge': $line-height-huge,
 );
 
+// Deprecated
 $font-curve-tiny: (
   'xs': $font-size-tiny,
   'sm': $font-size-tiny,
@@ -135,6 +167,7 @@ $font-curve-big: (
   'xxl': $font-size-small-huge,
 );
 
+// Deprecated
 $font-curves: (
   'tiny': $font-curve-tiny,
   'small': $font-curve-small,
@@ -147,19 +180,23 @@ $font-curves: (
 
 $font-size-base: $font-size-regular !default;
 $font-weight-base: $font-weight-normal !default;
-$line-height-base: $line-height-regular !default;
+$line-height-base: $line-height-copy;
+$line-height-sm: $line-height-heading;
+$line-height-lg: $line-height-copy;
 
 $headings-margin-bottom: (spacing.$spacer * 0.5) !default;
 $headings-font-family: inherit !default;
-$headings-font-weight: 300 !default;
-$headings-line-height: 1.2 !default;
+$headings-font-weight: 700 !default;
+$headings-line-height: $line-height-heading;
 $headings-color: inherit !default;
 
+// Deprecated because unused
 $display1-size: 6rem !default;
 $display2-size: 5.5rem !default;
 $display3-size: 4.5rem !default;
 $display4-size: 3.5rem !default;
 
+// Deprecated because unused
 $display1-weight: 300 !default;
 $display2-weight: 300 !default;
 $display3-weight: 300 !default;

package/variables/components/_accordion.scss

@@ -24,7 +24,7 @@ $accordion-button-active-bg: transparent !default;
 $accordion-button-active-color: color.$black !default;
 $accordion-button-hover-color: color.$black !default;
 $accordion-button-font-weight: type.$font-weight-bold !default;
-$accordion-button-line-height: spacing.$size-large !default;
+$accordion-button-line-height: type.$line-height-copy !default;
 
 $accordion-icon-width: spacing.$size-large !default;
 $accordion-icon-transform: rotate(180deg) !default;

package/variables/components/_alert.scss

@@ -33,7 +33,7 @@ $alert-list: (
   'info' color.$info 2106
 ); // Design System only
 
-$alert-line-height: type.$line-height-base; // Design System only
+$alert-line-height: type.$line-height-copy; // Design System only
 $alert-text-space-between: spacing.$size-micro;
 
 $alert-icon-size: spacing.$size-small-huge; // Design System only

package/variables/components/_button.scss

@@ -16,19 +16,19 @@ $input-btn-border-width-rem: sizing.px-to-rem($input-btn-border-width);
 
 $input-btn-padding-y: spacing.$size-regular - $input-btn-border-width-rem !default;
 $input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !default;
-$input-btn-line-height: type.$line-height-base !default;
+$input-btn-line-height: type.$line-height-copy !default;
 
 $input-btn-padding-y-sm: spacing.$size-mini - $input-btn-border-width-rem !default;
 $input-btn-padding-x-sm: spacing.$size-regular - $input-btn-border-width-rem !default;
-$input-btn-line-height-sm: type.$line-height-small !default;
+$input-btn-line-height-sm: type.$line-height-copy !default;
 
 $input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !default;
 $input-btn-padding-x-rg: spacing.$size-regular - $input-btn-border-width-rem !default;
-$input-btn-line-height-rg: type.$line-height-regular !default;
+$input-btn-line-height-rg: type.$line-height-copy !default;
 
 $input-btn-padding-y-lg: spacing.$size-small-large - $input-btn-border-width-rem !default;
 $input-btn-padding-x-lg: spacing.$size-large - $input-btn-border-width-rem !default;
-$input-btn-line-height-lg: type.$line-height-large !default;
+$input-btn-line-height-lg: type.$line-height-copy !default;
 
 $input-btn-focus-width: 0.125rem !default; // 2px
 $input-btn-focus-color: rgba(color.$gray-80, 0.25) !default;

package/variables/components/_form-check.scss

@@ -45,7 +45,7 @@ $form-check-label-cursor: pointer !default;
 $form-check-label-color: forms.$form-label-color !default;
 $form-check-label-padding-top: (
     $form-check-input-width + sizing.px-to-rem($form-check-input-border-width) -
-      type.$line-height-base
+      type.$line-height-copy
   ) * 0.5 !default;
 $form-check-label-padding-x: spacing.$size-mini !default;
 $form-check-label-padding-start: $form-check-label-padding-top 0 0 $form-check-label-padding-x !default;

package/variables/components/_form-switch.scss

@@ -32,7 +32,7 @@ $form-switch-linear-gradient: linear-gradient(
 );
 $form-switch-linear-gradient-size: (2 * $form-switch-width - $form-switch-height)
   $form-switch-height;
-$form-switch-label-padding-top: ($form-switch-height - type.$line-height-base) * 0.5 !default;
+$form-switch-label-padding-top: ($form-switch-height - type.$line-height-copy) * 0.5 !default;
 $form-switch-label-padding-x: spacing.$size-regular !default;
 $form-switch-label-padding-start: $form-switch-label-padding-top 0 0 $form-switch-label-padding-x !default;
 $form-switch-label-padding-end: $form-switch-label-padding-top $form-switch-label-padding-x 0 0 !default;

package/variables/components/_forms.scss

@@ -17,19 +17,19 @@ $form-label-color: rgba(var(--post-contrast-color-rgb), 0.8) !default;
 
 $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
-$input-line-height: type.$line-height-regular !default;
+$input-line-height: type.$line-height-copy !default;
 
 $input-padding-y-sm: button.$input-btn-padding-y-sm !default;
 $input-padding-x-sm: button.$input-btn-padding-x-sm !default;
-$input-line-height-sm: type.$line-height-regular !default;
+$input-line-height-sm: type.$line-height-copy !default;
 
 $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
-$input-line-height-rg: type.$line-height-regular !default;
+$input-line-height-rg: type.$line-height-copy !default;
 
 $input-padding-y-lg: spacing.$size-small-large !default;
 $input-padding-x-lg: button.$input-btn-padding-x-lg !default;
-$input-line-height-lg: type.$line-height-regular !default;
+$input-line-height-lg: type.$line-height-copy !default;
 
 $input-bg: color.$white !default;
 $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
@@ -108,7 +108,7 @@ $form-file-button-hover-bg: $input-bg;
 $form-floating-height: $input-height-lg;
 $form-floating-padding-x: $input-padding-x-lg;
 $form-floating-padding-y: $input-padding-y-lg;
-$form-floating-line-height: type.$line-height-base;
+$form-floating-line-height: type.$line-height-copy;
 $form-floating-input-padding-t: spacing.$size-large;
 $form-floating-input-padding-b: 0;
 $form-floating-label-opacity: 1;

package/variables/components/_modals.scss

@@ -23,7 +23,7 @@ $modal-footer-margin-between: 0.5rem !default;
 $modal-dialog-margin: spacing.$size-small-regular !default;
 $modal-dialog-margin-y-sm-up: spacing.$size-big !default;
 
-$modal-title-line-height: type.$line-height-base !default;
+$modal-title-line-height: type.$line-height-copy !default;
 
 $modal-content-color: null !default;
 $modal-content-bg: color.$white !default;

package/variables/components/_nav.scss

@@ -51,5 +51,5 @@ $nav-divider-margin-y: (spacing.$spacer * 0.5) !default;
 
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height: (
-  type.$font-size-base * type.$line-height-base + $nav-link-padding-y * 2
+  type.$font-size-base * type.$line-height-copy + $nav-link-padding-y * 2
 ) !default;

package/variables/components/_navbar.scss

@@ -12,7 +12,7 @@ $navbar-padding-x: spacing.$spacer !default;
 $navbar-nav-link-padding-x: spacing.$size-small-huge !default;
 
 $navbar-brand-font-size: type.$font-size-bigger-regular !default;
-$navbar-brand-height: $navbar-brand-font-size * type.$line-height-base !default;
+$navbar-brand-height: $navbar-brand-font-size * type.$line-height-copy !default;
 $navbar-brand-padding-y: (nav.$nav-link-height - $navbar-brand-height) * 0.5 !default;
 
 $navbar-toggler-padding-y: 0.25rem !default;