vanilla-framework 4.26.1 → 4.28.0

package/scss/_layouts_full-width.scss

@@ -22,7 +22,7 @@
       background: $colors--theme--background-alt;
 
       // height of top navigation, as padding applied to .p-navigation__link + line-heigh of the anchor text inside
-      $navigation-top-height: $spv--large * 2 + map-get($line-heights, default-text);
+      $navigation-top-height: $spv--large * 2 + map-get($settings-text-default, line-height);
 
       height: calc(100% - $navigation-top-height); // height of document reduced by height of top nav
       min-height: calc(100vh - $navigation-top-height);

package/scss/_patterns_badge.scss

@@ -13,7 +13,7 @@
     // the minimum content width should be the total desired width (the line-height)
     // minus the space already taken up by the left and right padding
     // Makes the shortest badge a perfect circle and keeps it related to line-height (of %x-small-text) and padding (below)
-    min-width: map-get($line-heights, x-small) - (2 * $spv--x-small);
+    min-width: map-get($settings-text-x-small, line-height) - (2 * $spv--x-small);
     overflow: hidden;
     padding: 0 $spv--x-small;
     text-align: center;

package/scss/_patterns_chip.scss

@@ -25,7 +25,7 @@
     padding: calc($spv--x-small - $input-border-thickness) $sph--small; // account for border thickness using calc
     position: relative;
     user-select: none;
-    vertical-align: calc($input-border-thickness - map-get($nudges, p));
+    vertical-align: calc($input-border-thickness - map-get($settings-text-p, nudge));
     white-space: nowrap;
 
     [class*='p-icon--'],

package/scss/_patterns_grid-8.scss

@@ -82,7 +82,7 @@
 
   // on medium/tablet screens, small and large grid class names span full width (to match block level element behaviour)
   %grid-8-span-on-tablet {
-    @media (min-width: $threshold-4-6-col) {
+    @media (min-width: $threshold-4-small-4-med-col) {
       grid-column: auto / span $grid-8-columns-medium;
     }
   }
@@ -100,7 +100,7 @@
   }
 
   // col-medium-X classes define grid for medium screens
-  @media (min-width: $threshold-4-6-col) {
+  @media (min-width: $threshold-4-small-4-med-col) {
     @for $i from $grid-8-columns-medium through 1 {
       .#{$grid-8-medium-col-prefix}#{$i} {
         @include vf-grid-8-column($i);
@@ -114,7 +114,7 @@
 
   // on desktop screens small and medium grid class names span full width (to match block level element behaviour)
   %grid-8-span-on-desktop {
-    @media (min-width: $threshold-6-12-col) {
+    @media (min-width: $threshold-4-8-col) {
       grid-column: auto / span $grid-8-columns;
     }
   }
@@ -132,7 +132,7 @@
   }
 
   // col-X class names define grid on large/desktop screens
-  @media (min-width: $threshold-6-12-col) {
+  @media (min-width: $threshold-4-8-col) {
     @for $i from $grid-8-columns through 1 {
       // set col-* to span respective number of columns on desktop
       .#{$grid-8-large-col-prefix}#{$i} {
@@ -144,9 +144,9 @@
 
   // column reordering
   $offsets: (
-    (small, 0, $threshold-4-6-col, $grid-8-columns-small),
-    (medium, $threshold-4-6-col, $threshold-6-12-col, $grid-8-columns-medium),
-    (large, $threshold-6-12-col, false, $grid-8-columns)
+    (small, 0, $threshold-4-small-4-med-col, $grid-8-columns-small),
+    (medium, $threshold-4-small-4-med-col, $threshold-4-8-col, $grid-8-columns-medium),
+    (large, $threshold-4-8-col, false, $grid-8-columns)
   );
 
   @each $label, $breakpoint-min, $breakpoint-reset, $col-count in $offsets {
@@ -164,4 +164,253 @@
       }
     }
   }
+
+  // Common grid patterns
+  $col-50-medium: calc($grid-8-columns-medium / 2);
+
+  $col-25: calc($grid-8-columns / 4);
+  $col-25-medium: calc($grid-8-columns-medium / 4);
+  $col-50: calc($grid-8-columns / 2);
+  $col-75: calc(($grid-8-columns / 4) * 3);
+  $col-75-medium: calc(($grid-8-columns-medium / 4) * 3);
+
+  // 50/50 split on medium and large screens
+  .grid-row--50-50 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        @include vf-grid-8-column($col-50-medium);
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        @include vf-grid-8-column($col-50);
+      }
+    }
+  }
+
+  // 25/75 split on medium and large screens
+  .grid-row--25-75 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-25-medium);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-75-medium);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-25);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-75);
+        }
+
+        // if there is only one column we offset it to the right
+        &:only-of-type {
+          grid-column-start: calc($col-25 + 1);
+          @include vf-grid-8-column($col-75);
+        }
+      }
+    }
+  }
+
+  // 50/50 split just on medium screens
+  .grid-row--50-50-on-medium {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media ($threshold-4-small-4-med-col <= width < $threshold-4-8-col) {
+        @include vf-grid-8-column($col-50-medium);
+      }
+    }
+  }
+
+  .grid-row--25-75-on-medium {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media ($threshold-4-small-4-med-col <= width < $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-25-medium);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-75-medium);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+    }
+  }
+
+  // 50/50 split just on large screens
+  .grid-row--50-50-on-large {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media (min-width: $threshold-4-8-col) {
+        @include vf-grid-8-column($col-50);
+      }
+    }
+  }
+
+  .grid-row--25-75-on-large {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-25);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-75);
+        }
+
+        // if there is only one column we offset it to the right
+        &:only-of-type {
+          grid-column-start: calc($col-25 + 1);
+          @include vf-grid-8-column($col-75);
+        }
+      }
+    }
+  }
+
+  // 75/25 split on medium and large screens
+  .grid-row--75-25 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-75-medium);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25-medium);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25);
+        }
+      }
+    }
+  }
+
+  .grid-row--75-25-on-medium {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media ($threshold-4-small-4-med-col <= width < $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-75-medium);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25-medium);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+    }
+  }
+
+  .grid-row--75-25-on-large {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25);
+        }
+      }
+    }
+  }
+
+  .grid-row--25-25-50 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        // The first two columns are 50% each on medium
+        &:nth-of-type(-n + 2) {
+          @include vf-grid-8-column($col-50-medium);
+        }
+
+        // The third column is 100% on medium
+        &:nth-of-type(3) {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1),
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25);
+        }
+
+        &:nth-of-type(3) {
+          @include vf-grid-8-column($col-50);
+        }
+      }
+    }
+  }
+
+  .grid-row--25-25-25-25 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        @include vf-grid-8-column($col-50-medium);
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        @include vf-grid-8-column($col-25);
+      }
+    }
+  }
 }

package/scss/_patterns_grid.scss

@@ -193,7 +193,6 @@
   }
 
   // Common grid patterns
-  // TODO implement the common grid patterns for the new 4/4/8 grid (.grid-row--)
   $col-50-medium: calc($grid-columns-medium / 2);
 
   $col-25: calc($grid-columns / 4);

package/scss/_patterns_heading-icon.scss

@@ -22,14 +22,14 @@
     height: map-get($icon-sizes, heading-icon);
     margin-bottom: 0;
     margin-right: $sph--large;
-    margin-top: calc(map-get($nudges, h3) / 2); // just a quick fix, should be calculated based on line height and icon size
+    margin-top: calc(map-get($settings-text-h3, nudge) / 2); // just a quick fix, should be calculated based on line height and icon size
     width: map-get($icon-sizes, heading-icon);
   }
 
   .p-heading-icon--small {
     .p-heading-icon__img {
       height: map-get($icon-sizes, heading-icon--small);
-      margin-top: map-get($nudges, h3);
+      margin-top: map-get($settings-text-h3, nudge);
       width: map-get($icon-sizes, heading-icon--small);
     }
   }

package/scss/_patterns_image.scss

@@ -103,7 +103,7 @@ $aspect-ratios: (
 
 @mixin vf-p-image {
   .p-image-container,
-  [class^='p-image-container--'] {
+  [class*='p-image-container--'] {
     display: block;
     position: relative;
     width: 100%;

package/scss/_patterns_lists.scss

@@ -24,18 +24,18 @@ $list-step-bullet-margin: $sph--x-large;
   %numbered-step-title {
     list-style: none;
     margin-left: 0;
-    padding-left: calc(map-get($line-heights, default-text) + $list-step-bullet-margin);
+    padding-left: calc(map-get($settings-text-default, line-height) + $list-step-bullet-margin);
     position: relative;
 
     &::before {
       content: counter(p-stepped-list-counter) '.';
       display: block;
-      height: map-get($line-heights, default-text);
+      height: map-get($settings-text-default, line-height);
       left: 0;
       margin-right: $list-step-bullet-margin;
       position: absolute;
       text-align: right;
-      width: map-get($line-heights, default-text);
+      width: map-get($settings-text-default, line-height);
     }
   }
 
@@ -389,7 +389,7 @@ $list-step-bullet-margin: $sph--x-large;
 
       &::after {
         content: '\2022';
-        line-height: map-get($line-heights, default-text);
+        line-height: map-get($settings-text-default, line-height);
         position: relative;
         right: -0.25rem;
       }
@@ -445,8 +445,8 @@ $list-step-bullet-margin: $sph--x-large;
   }
 
   // Indent titles
-  $bullet-width: map-get($line-heights, default-text);
-  $bullet-width-mobile: map-get($line-heights, default-text);
+  $bullet-width: map-get($settings-text-default, line-height);
+  $bullet-width-mobile: map-get($settings-text-default, line-height);
 
   .p-stepped-list__title {
     @extend %numbered-step-title;
@@ -465,8 +465,19 @@ $list-step-bullet-margin: $sph--x-large;
 
   @for $i from 4 through 1 {
     // Bullet sizes for each heading level
-    $bullet-width: map-get($line-heights, h#{$i});
-    $bullet-width-mobile: map-get($line-heights, h#{$i}-mobile);
+    @if $i == 1 {
+      $bullet-width: map-get($settings-text-h1, line-height);
+      $bullet-width-mobile: map-get($settings-text-h1-mobile, line-height);
+    } @else if $i == 2 {
+      $bullet-width: map-get($settings-text-h2, line-height);
+      $bullet-width-mobile: map-get($settings-text-h2-mobile, line-height);
+    } @else if $i == 3 {
+      $bullet-width: map-get($settings-text-h3, line-height);
+      $bullet-width-mobile: map-get($settings-text-h3-mobile, line-height);
+    } @else if $i == 4 {
+      $bullet-width: map-get($settings-text-h4, line-height);
+      $bullet-width-mobile: map-get($settings-text-h4-mobile, line-height);
+    }
 
     .p-heading--#{$i}.p-stepped-list__title,
     h#{$i}.p-stepped-list__title {

package/scss/_patterns_matrix.scss

@@ -103,13 +103,13 @@
 
     @media (min-width: $breakpoint-heading-threshold) {
       // place image in the middle of the heading text
-      margin-top: calc(map-get($nudges, h4) + (map-get($line-heights, h4) - $matrix-img-width) / 2);
+      margin-top: calc(map-get($settings-text-h4, nudge) + (map-get($settings-text-h4, line-height) - $matrix-img-width) / 2);
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
         // place image in the middle of the heading text
-        margin-top: calc(map-get($nudges, h4-large) + (map-get($line-heights, h4) - $matrix-img-width) / 2);
+        margin-top: calc(map-get($settings-text-h4-large, nudge) + (map-get($settings-text-h4, line-height) - $matrix-img-width) / 2);
       }
     }
   }
@@ -129,12 +129,12 @@
     @extend %vf-heading-4;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-bottom: -#{map-get($nudges, h4)};
+      margin-bottom: -#{map-get($settings-text-h4, nudge)};
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-bottom: -#{map-get($nudges, h4-large)};
+        margin-bottom: -#{map-get($settings-text-h4-large, nudge)};
       }
     }
   }

package/scss/_patterns_navigation-reduced.scss

@@ -1,7 +1,7 @@
 @mixin vf-p-navigation-reduced {
   .p-navigation--reduced {
     // height of reduced navigation calculated from line height and padding
-    $reduced-nav-height: calc(map-get($line-heights, x-small) + 2 * $spv--small);
+    $reduced-nav-height: calc(map-get($settings-text-x-small, line-height) + 2 * $spv--small);
 
     background-color: $colors--theme--background-alt;
     position: relative;
@@ -26,7 +26,7 @@
     // reduced nav logo text uses default font size (on small screens)
     .p-navigation__logo-title {
       color: $colors--theme--text-muted;
-      font-size: #{map-get($font-sizes, default)}rem;
+      font-size: #{map-get($settings-text-default, font-size)}rem;
       font-weight: $font-weight-regular-text;
     }
 
@@ -47,8 +47,8 @@
       .p-navigation__link,
       .p-navigation__logo-title {
         color: $colors--theme--text-muted;
-        font-size: #{map-get($font-sizes, small)}rem;
-        line-height: map-get($line-heights, x-small);
+        font-size: #{map-get($settings-text-small, font-size)}rem;
+        line-height: map-get($settings-text-x-small, line-height);
       }
 
       .p-navigation__link {
@@ -88,7 +88,7 @@
       // use muted icon to align with text colour
       &::after {
         @include vf-icon-search-muted;
-        top: calc($spv--medium + map-get($nudges, x-small));
+        top: calc($spv--medium + map-get($settings-text-x-small, nudge));
       }
 
       // search label is always hidden in reduced navigation

package/scss/_patterns_navigation.scss

@@ -8,7 +8,7 @@ $navigation-logo-size: 1rem;
 $navigation-logo-padding: calc(1.5rem + 0.1rem); // ~25.6px to align better with logos as originally designed in SVG
 $sph-navigation-link: 0.3rem;
 $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
-$navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large); // navigation bar height based on line height and paddings
+$navigation-height: calc(map-get($settings-text-p, line-height) + 2 * $spv--large); // navigation bar height based on line height and paddings
 
 @mixin vf-p-navigation {
   // placeholders
@@ -94,7 +94,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
 
     display: block;
     font-weight: $font-weight-regular-text;
-    line-height: map-get($line-heights, default-text);
+    line-height: map-get($settings-text-default, line-height);
     margin: 0;
     overflow: hidden;
     padding-left: calc(map-get($grid-margin-widths, small) + $navigation-logo-padding); // allow navigation align with tag logo text on small screens
@@ -576,7 +576,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
       position: absolute;
       right: calc($sph--large / 2);
       text-indent: calc(100% + 10rem);
-      top: calc($spv--large + map-get($nudges, x-small));
+      top: calc($spv--large + map-get($settings-text-x-small, nudge));
       width: map-get($icon-sizes, default);
     }
   }
@@ -690,7 +690,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
     @media (min-width: $breakpoint-navigation-threshold) {
       position: absolute;
       // padding applied to .p-navigation__link + line-heigh of the anchor text inside
-      top: $spv--large * 2 + map-get($line-heights, default-text);
+      top: $spv--large * 2 + map-get($settings-text-default, line-height);
     }
 
     @media (width < $breakpoint-navigation-threshold) {
@@ -728,7 +728,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
 
       @media (min-width: $breakpoint-navigation-threshold) {
         right: calc($sph--large / 2); // position by the center of grid margin
-        top: calc($spv--large + map-get($nudges, x-small));
+        top: calc($spv--large + map-get($settings-text-x-small, nudge));
         transform: rotate(0deg);
       }
     }

package/scss/_patterns_notifications.scss

@@ -58,7 +58,7 @@ $notification-content-icon-space: 2 * $sph--large + map-get($icon-sizes, default
 // the icon is a background element, so it needs to be manually positioned to match the text next to it;
 // Step 1: push down by the same amount applied as padding top on text ($spv-nudge)
 // Step 2: to center the icon within the line-height of text, we subtract icon height from text line-height and multiply by .5; this is the amount we need to push the icon down by
-$borderless-notification-icon-vert-offset: $spv-nudge + 0.5 * (map-get($line-heights, default-text) - map-get($icon-sizes, default));
+$borderless-notification-icon-vert-offset: $spv-nudge + 0.5 * (map-get($settings-text-default, line-height) - map-get($icon-sizes, default));
 // Step 3: Add the notification padding-top (if it exists); we have two cases, so at this point we create a second var that contains the first one + the notification padding-top
 $notification-icon-vert-offset: $spv--small + $borderless-notification-icon-vert-offset;
 
@@ -133,7 +133,7 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
     .p-notification__title {
       font-size: 1rem;
       font-weight: $font-weight-bold;
-      line-height: map-get($line-heights, default-text);
+      line-height: map-get($settings-text-default, line-height);
       margin: 0;
       padding: 0;
     }

package/scss/_patterns_search-and-filter.scss

@@ -19,7 +19,7 @@
   // When the search and filter is not expanded, but is overflowing with chips, we need to
   // specify a height that matches that of a standard input element. This height is a combination
   // of an input's line-height, its vertical padding, and the (top transparent) border.
-  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $input-vertical-padding + $input-border-thickness);
+  $input-height: calc(map-get($settings-text-default, line-height) + $input-vertical-padding + $input-vertical-padding + $input-border-thickness);
 
   .p-search-and-filter {
     border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
@@ -103,7 +103,7 @@
 
       border: none;
       bottom: $focus-outline-offset;
-      line-height: map-get($line-heights, small);
+      line-height: map-get($settings-text-small, line-height);
       margin: 0;
       position: absolute;
       right: $focus-outline-offset;

package/scss/_patterns_search-box.scss

@@ -1,7 +1,7 @@
 @mixin vf-p-search-box {
   %search-box-button {
     display: block;
-    height: calc((2 * $spv-nudge + map-get($line-heights, default-text)) - (2 * $bar-thickness)); // side padding + icon width - focus outline width * 2
+    height: calc((2 * $spv-nudge + map-get($settings-text-default, line-height)) - (2 * $bar-thickness)); // side padding + icon width - focus outline width * 2
     margin: $bar-thickness 0;
     position: relative;
 
@@ -37,7 +37,7 @@
     .p-search-box__input {
       flex: 1 1 100%;
       margin-bottom: 0;
-      padding-right: calc(2 * (2 * $spv-nudge + map-get($line-heights, default-text)));
+      padding-right: calc(2 * (2 * $spv-nudge + map-get($settings-text-default, line-height)));
       position: absolute;
       right: 0;
 

package/scss/_patterns_status-label.scss

@@ -19,7 +19,7 @@
 
     display: inline-block;
     font-weight: $font-weight-bold;
-    padding: map-get($nudges, x-small) $sph--small;
+    padding: map-get($settings-text-x-small, nudge) $sph--small;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;

package/scss/_patterns_table-mobile-card.scss

@@ -56,7 +56,7 @@
           &[data-heading]::before {
             content: attr(data-heading);
             display: block;
-            margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small) - $sp-unit;
+            margin-bottom: map-get($settings-text-x-small, sp-after) - map-get($settings-text-x-small, nudge) - $sp-unit;
             overflow: hidden;
             padding-left: 0;
             padding-right: 0;

package/scss/_patterns_table-sortable.scss

@@ -15,7 +15,7 @@
     display: inline-block;
     margin-left: $sp-x-small;
     // table heading text is smaller than the icon, so we need to compensate with negative top margin
-    margin-top: calc(#{map-get($font-sizes, x-small)}rem - $default-icon-size);
+    margin-top: calc(#{map-get($settings-text-x-small, font-size)}rem - $default-icon-size);
     vertical-align: calc($vertical-offset + 0.5 * $cap-height - 0.5 * $default-icon-size);
   }
 

package/scss/_patterns_tabs.scss

@@ -45,7 +45,7 @@
       display: flex;
       gap: $sph--small;
       height: 100%;
-      line-height: map-get($line-heights, default-text);
+      line-height: map-get($settings-text-default, line-height);
       margin-bottom: 0;
       padding: $spv--medium $sph--large;
       position: relative;

package/scss/_settings.scss

@@ -7,12 +7,12 @@
 @import 'global_functions';
 
 // Settings
+@import 'settings_font';
 @import 'settings_spacing';
 @import 'settings_animations';
 @import 'settings_assets';
 @import 'settings_breakpoints';
 @import 'settings_colors';
-@import 'settings_font';
 @import 'settings_grid';
 @import 'settings_placeholders';
 @import 'settings_tables';