@moreonion/foundist 2.0.7 → 2.1.2

package/src/scss/components/_card.scss

@@ -2,6 +2,8 @@
 // - - - - - - - - - - - - - - -
 // Custom overrides for the card component
 
+@use "sass:math";
+
 .card {
   position: relative;
 }
@@ -20,7 +22,7 @@
 
 // Meld card-sections into each other.
 .card-section + .card-section {
-  padding-top: max(0, $global-padding - get-side($card-padding, bottom));
+  padding-top: math.max(0, $global-padding - get-side($card-padding, bottom));
 }
 
 // Move footer to the bottom of the card.

package/src/scss/components/_cookiebar.scss

@@ -17,7 +17,7 @@
 
   // Some space between buttons.
   .button + .button {
-    margin-#{$global-left}: $global-margin / 2;
+    margin-#{$global-left}: $global-margin * 0.5;
   }
 
   // Show button(s) next to text.

package/src/scss/components/_letter.scss

@@ -2,10 +2,12 @@
 // - - - - - - - - - - - - - - -
 // Adds a letter-like background to an element
 
+@use "sass:color";
+
 $letter-background: $card-background !default;
 $letter-padding: (2 * $global-padding) (1.25 * $global-padding) !default;
 $letter-margin: 0 0 $global-margin 0 !default;
-$letter-shadow-color: scale-color(
+$letter-shadow-color: color.scale(
   get-background-color($letter-background),
   $lightness: -60%,
   $alpha: -60%

package/src/scss/components/_menu.scss

@@ -35,8 +35,8 @@
   &:not(.simple) .button {
     margin-left: get-side($menu-items-padding, left);
     margin-right: get-side($menu-items-padding, right);
-    margin-top: $form-spacing / 2;
-    margin-bottom: $form-spacing / 2;
+    margin-top: $form-spacing * 0.5;
+    margin-bottom: $form-spacing * 0.5;
     width: 100%;
   }
 
@@ -66,10 +66,10 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
   @include breakpoint(small down) {
     > li > a {
       padding: {
-        top: get-side($dropdownmenu-padding, top) / 2;
-        right: get-side($dropdownmenu-padding, right) / 2;
-        bottom: get-side($dropdownmenu-padding, bottom) / 2;
-        left: get-side($dropdownmenu-padding, left) / 2;
+        top: get-side($dropdownmenu-padding, top) * 0.5;
+        right: get-side($dropdownmenu-padding, right) * 0.5;
+        bottom: get-side($dropdownmenu-padding, bottom) * 0.5;
+        left: get-side($dropdownmenu-padding, left) * 0.5;
       }
     }
   }
@@ -89,14 +89,14 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
     a {
       font-weight: $global-weight-normal;
       text-decoration: none;
-      padding-top: rem-calc($base-line-height / 4);
-      padding-bottom: rem-calc($base-line-height / 4);
+      padding-top: rem-calc($base-line-height * 0.25);
+      padding-bottom: rem-calc($base-line-height * 0.25);
       width: 100%;
 
       @include breakpoint(small down) {
         padding: {
-          right: get-side($dropdownmenu-padding, right) / 2;
-          left: get-side($dropdownmenu-padding, left) / 2;
+          right: get-side($dropdownmenu-padding, right) * 0.5;
+          left: get-side($dropdownmenu-padding, left) * 0.5;
         }
       }
 
@@ -154,7 +154,7 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
 
         &:after {
           background-size: $dropdownmenu-arrow-size * 0.75;
-          #{$global-right}: get-side($dropdownmenu-padding, $global-right) / 2;
+          #{$global-right}: get-side($dropdownmenu-padding, $global-right) * 0.5;
         }
       }
     }
@@ -165,7 +165,7 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
         #{$global-right}: get-side($dropdownmenu-padding, $global-right);
 
         @include breakpoint(small down) {
-          #{$global-right}: get-side($dropdownmenu-padding, $global-right) / 2;
+          #{$global-right}: get-side($dropdownmenu-padding, $global-right) * 0.5;
         }
       }
     }
@@ -184,11 +184,11 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
       }
 
       @include breakpoint(small down) {
-        padding-#{$global-right}: get-side($dropdownmenu-padding, $global-right) / 2;
+        padding-#{$global-right}: get-side($dropdownmenu-padding, $global-right) * 0.5;
         padding-left: $dropdownmenu-arrow-padding - get-side($dropdownmenu-padding, left);
 
         &:after {
-          left: get-side($dropdownmenu-padding, left) / 2;
+          left: get-side($dropdownmenu-padding, left) * 0.5;
         }
       }
     }
@@ -207,11 +207,11 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
       }
 
       @include breakpoint(small down) {
-        padding-#{$global-right}: get-side($dropdownmenu-padding, $global-right) / 2;
+        padding-#{$global-right}: get-side($dropdownmenu-padding, $global-right) * 0.5;
         padding-right: $dropdownmenu-arrow-padding - get-side($dropdownmenu-padding, right);
 
         &:after {
-          right: get-side($dropdownmenu-padding, right) / 2;
+          right: get-side($dropdownmenu-padding, right) * 0.5;
         }
       }
     }
@@ -244,27 +244,27 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
     }
     // Add a bit more space between items.
     &:not(.vertical) {
-      margin-top: -$form-spacing / 2;
-      margin-bottom: -$form-spacing / 2;
+      margin-top: -$form-spacing * 0.5;
+      margin-bottom: -$form-spacing * 0.5;
       > li {
-        margin-top: $form-spacing / 2;
-        margin-bottom: $form-spacing / 2;
+        margin-top: $form-spacing * 0.5;
+        margin-bottom: $form-spacing * 0.5;
       }
       > li.is-dropdown-submenu-parent {
-        margin-left: $form-spacing / 2;
-        margin-right: $form-spacing / 2;
+        margin-left: $form-spacing * 0.5;
+        margin-right: $form-spacing * 0.5;
       }
     }
     &.vertical {
-      margin-left: -$form-spacing / 2;
-      margin-right: -$form-spacing / 2;
+      margin-left: -$form-spacing * 0.5;
+      margin-right: -$form-spacing * 0.5;
       > li {
-        margin-left: $form-spacing / 2;
-        margin-right: $form-spacing / 2;
+        margin-left: $form-spacing * 0.5;
+        margin-right: $form-spacing * 0.5;
       }
       > li.is-dropdown-submenu-parent {
-        margin-top: $form-spacing / 2;
-        margin-bottom: $form-spacing / 2;
+        margin-top: $form-spacing * 0.5;
+        margin-bottom: $form-spacing * 0.5;
       }
     }
   }

package/src/scss/components/_progressbar.scss

@@ -12,7 +12,7 @@
 
 // Smaller styles on teasers
 .teasers .card .progress-wrapper {
-  margin-bottom: $global-margin / 2;
+  margin-bottom: $global-margin * 0.5;
 
   .progress {
     position: relative;

package/src/scss/components/_reveal.scss

@@ -2,6 +2,8 @@
 // - - - - - - - - - - - - - - -
 // Custom overrides for the reveal component.
 
+@use "sass:map";
+
 .reveal {
   @extend #form-outer;
   overflow: visible;
@@ -41,9 +43,9 @@
   // Make large close button smaller on small screens.
   .close-button.large {
     @include breakpoint(small down) {
-      font-size: map-get($closebutton-size, medium);
-      top: $global-margin / 8;
-      #{$global-right}: $global-margin / 8;
+      font-size: map.get($closebutton-size, medium);
+      top: $global-margin * 0.125;
+      #{$global-right}: $global-margin * 0.125;
     }
   }
 }

package/src/scss/components/_settings.scss

@@ -1,6 +1,8 @@
 // Component settings
 // - - - - - - - - - - - - - - -
 
+@use "sass:color";
+
 // Card
 $card-border: none;
 $card-padding: rem-calc($base-line-height * 0.75) 6% !default;
@@ -11,9 +13,9 @@ $progress-height: rem-calc(1.25 * $base-line-height) !default;
 $progress-background: $white !default;
 $progress-border-width: rem-calc(4) !default;
 $progress-border-color: $progress-background !default;
-$progress-margin-bottom: rem-calc($base-line-height / 2) !default;
+$progress-margin-bottom: rem-calc($base-line-height * 0.5) !default;
 $progress-meter-background: get-color(secondary) !default;
-$progress-radius: rem-calc($base-line-height / 4) !default;
+$progress-radius: rem-calc($base-line-height * 0.25) !default;
 $progress-thermometer-height: rem-calc(7.5 * $base-line-height) !default;
 $progress-thermometer-bulb-size: rem-calc(1.75 * $base-line-height) !default;
 
@@ -23,7 +25,7 @@ $recent-supporter-color: color-pick-contrast(
   ($dark-gray, $light-gray)
 ) !default;
 $recent-supporter-border-color: if(
-  lightness(get-background-color($body-background)) < 50,
+  color.lightness(get-background-color($body-background)) < 50,
   $dark-gray,
   $light-gray
 ) !default;
@@ -37,7 +39,7 @@ $callout-background: $card-background !default;
 $callout-background-fade: 0% !default;
 $callout-border: none !default;
 $callout-sizes: (
-  small: rem-calc($base-line-height / 2),
+  small: rem-calc($base-line-height * 0.5),
   default: rem-calc($base-line-height),
   large: rem-calc($base-line-height * 1.5),
 ) !default;
@@ -52,7 +54,7 @@ $closebutton-size: (
   large: rem-calc($base-line-height * 1.75),
 ) !default;
 $closebutton-offset-horizontal: (
-  small: rem-calc(-$base-line-height / 2),
+  small: rem-calc(-$base-line-height * 0.5),
   medium: rem-calc(-$base-line-height * 0.75),
   large: rem-calc(-$base-line-height),
 ) !default;
@@ -61,7 +63,7 @@ $closebutton-color: color-pick-contrast(
   $closebutton-background-color,
   ($light-gray, $dark-gray)
 ) !default;
-$closebutton-background-color-hover: scale-color(
+$closebutton-background-color-hover: color.scale(
   $closebutton-background-color,
   $lightness: 6%
 ) !default;
@@ -103,7 +105,7 @@ $dropdown-menu-parent-border-color: $input-border-color !default;
 $dropdown-menu-parent-border-color-active: if(
   $dropdown-menu-parent-border-color == $input-border-color,
   $input-border-color-focus,
-  scale-color($dropdown-menu-parent-border-color, $lightness: -10%)
+  color.scale($dropdown-menu-parent-border-color, $lightness: -10%)
 ) !default;
 $dropdown-menu-parent-border-width: $input-border-width !default;
 $dropdownmenu-border: (
@@ -111,12 +113,12 @@ $dropdownmenu-border: (
 ) !default;
 // stylelint-disable
 $dropdownmenu-padding: (
-    ($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) / 2 -
+    ($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) * 0.5 -
       get-side($dropdown-menu-parent-border-width, top)
   )
   get-side($input-padding, right)
   (
-    ($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) / 2 -
+    ($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) * 0.5 -
       get-side($dropdown-menu-parent-border-width, bottom)
   )
   get-side($input-padding, left) !default;
@@ -140,7 +142,7 @@ $accordion-item-background: transparent !default;
 $accordion-item-color: $body-font-color !default;
 $accordion-item-color-hover: $accordion-item-color !default;
 $accordion-item-padding: rem-calc($base-line-height) - $accordion-content-border-width !default;
-$accordion-margin: rem-calc($base-line-height / 2) !default;
+$accordion-margin: rem-calc($base-line-height * 0.5) !default;
 $accordion-plusminus: false !default;
 $accordion-radius: rem-calc(5) !default;
 $accordion-separator: true !default;

package/src/scss/components/_share-button.scss

@@ -9,7 +9,7 @@ $share-button-max-width: 28rem !default;
   margin-bottom: 0.75 * $global-margin;
 
   // More horizontal padding.
-  @include breakpoint(25rem * $global-font-size / 100) {
+  @include breakpoint(25rem * $global-font-size * 0.01) {
     padding-left: 2em;
     padding-right: 2em;
   }

package/src/scss/components/_sticky-button.scss

@@ -3,15 +3,17 @@
 // Button that sticks to the edge of the screen.
 // Used in combination with the `StickyButton` plugin.
 
+@use "sass:color";
+
 $sticky-cta-background: $form-background !default;
-$sticky-cta-boxshadow: 0 0 rem-calc(3) scale-color($black, $alpha: -75%) !default;
+$sticky-cta-boxshadow: 0 0 rem-calc(3) color.scale($black, $alpha: -75%) !default;
 $sticky-button-max-width: 28rem !default;
 
 .sticky-cta {
   @include sticky-button;
   background: $sticky-cta-background;
   box-shadow: $sticky-cta-boxshadow;
-  padding: $global-padding / 2;
+  padding: $global-padding * 0.5;
   padding-left: get-side($form-padding, left);
   padding-right: get-side($form-padding, right);
 

package/src/scss/form/_braintree_apple_pay.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @supports (-webkit-appearance: -apple-pay-button) {
   .button.apple-pay {
     -webkit-appearance: -apple-pay-button;

package/src/scss/form/_donation-amount-button.scss

@@ -12,6 +12,9 @@
 // button, as well as `.form-radios` and `.form-type-textfield` to distinguish
 // between radio buttons and the "other…" text field.
 
+@use "sass:color";
+@use "sass:math";
+
 // Base colors
 $donation-amount-background-color: transparent !default;
 $donation-amount-background-color-checked: $primary-color !default;
@@ -20,7 +23,7 @@ $donation-amount-text-color-checked: color-pick-contrast(
 ) !default;
 
 // Colors derived from base colors by default
-$donation-amount-border-color: scale-color(
+$donation-amount-border-color: color.scale(
   $donation-amount-background-color-checked,
   $lightness: 50%,
   $saturation: -50%
@@ -35,9 +38,9 @@ $donation-amount-border-radius: 0 !default;
 $donation-amount-border-width: rem-calc(3) !default;
 $donation-amount-text-offset: $button-text-offset !default;
 // The padding is calculated like the $button-padding
-$donation-amount-button-padding: rem-calc(1.25 * $base-line-height / 2) -
+$donation-amount-button-padding: rem-calc(1.25 * $base-line-height * 0.5) -
   $donation-amount-border-width + $donation-amount-text-offset 0
-  rem-calc(1.25 * $base-line-height / 2) - $donation-amount-border-width -
+  rem-calc(1.25 * $base-line-height * 0.5) - $donation-amount-border-width -
   $donation-amount-text-offset !default;
 
 // Layout
@@ -57,10 +60,7 @@ $donation-amount-max-buttons-per-row: 3 !default;
   input[type="radio"]:not([value="select_or_other"]) {
     + label {
       @include button-base;
-      @include button-hollow;
       @include button-expand;
-      // button-style() and button-hollow-style() not used because we would
-      // override them now anyways
 
       border-radius: $donation-amount-border-radius;
       text-align: center;
@@ -123,7 +123,7 @@ $donation-amount-max-buttons-per-row: 3 !default;
   // Flex children (form items)
   > .form-item {
     // Up to x buttons in 1 row.
-    flex: 1 0 calc(#{100% / $donation-amount-max-buttons-per-row} - #{$form-spacing * 2});
+    flex: 1 0 calc(#{math.div(100%, $donation-amount-max-buttons-per-row)} - #{$form-spacing * 2});
     // Gutter of 2 * $form-spacing (flex margins do not collapse).
     margin: {
       left: $form-spacing;

package/src/scss/form/_e2t.scss

@@ -26,6 +26,8 @@ form .email-to-target-target {
       top: $form-spacing * 3;
       bottom: $form-spacing * 3;
     }
+    // Allow long lines to break while preserving new lines.
+    white-space: pre-wrap;
   }
   // Fixes margins when multiple targets can be selected.
   .form-type-checkbox + .form-type-textfield {

package/src/scss/form/_fields.scss

@@ -3,7 +3,7 @@
 
 // Help texts margins
 .help-text {
-  margin-top: -$form-spacing / 2;
+  margin-top: -$form-spacing * 0.5;
   margin-bottom: $form-spacing * 1.5;
 
   .form-error.is-visible + & {
@@ -49,3 +49,18 @@ input[type="radio"] + label {
 input.button.primary {
   margin-top: $form-spacing * 2;
 }
+
+// Display radios, checkboxes etc. next to each other.
+.form-item.inline {
+  &,
+  .form-radios,
+  .form-checkboxes {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: $global-margin;
+  }
+
+  > label {
+    flex-basis: 100%;
+  }
+}

package/src/scss/form/_paymethod-select-button.scss

@@ -22,10 +22,7 @@ $paymethod-select-border-width: $input-border-width !default;
     + label {
       // Button styles
       @include button-base;
-      @include button-hollow;
       @include button-expand;
-      // button-style() and button-hollow-style() not used because we would
-      // override them now anyways
 
       border-radius: $paymethod-select-border-radius;
       text-align: left;
@@ -62,7 +59,7 @@ $paymethod-select-border-width: $input-border-width !default;
 
       // These buttons are a bit tighter together
       .form-item & {
-        margin-top: $form-spacing / 2;
+        margin-top: $form-spacing * 0.5;
       }
     }
 

package/src/scss/form/_settings.scss

@@ -1,9 +1,13 @@
 // Form settings
 // - - - - - - - - - - - - - - -
 
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+
 // General
-$form-padding: rem-calc($base-line-height) 6% rem-calc($base-line-height / 2) !default;
-$form-spacing: rem-calc($base-line-height / 4) !default;
+$form-padding: rem-calc($base-line-height) 6% rem-calc($base-line-height * 0.5) !default;
+$form-spacing: rem-calc($base-line-height * 0.25) !default;
 $input-background: $white !default;
 
 // Buttons
@@ -28,17 +32,17 @@ $button-text-offset: 0 !default;
 $button-border-width: rem-calc(2) !default;
 $button-hollow-border-width: $button-border-width !default;
 $button-border: $button-border-width solid transparent !default;
-$button-padding: rem-calc(1.25 * $base-line-height / 2) - $button-border-width + $button-text-offset
-  1em rem-calc(1.25 * $base-line-height / 2) - $button-border-width - $button-text-offset !default;
+$button-padding: rem-calc($base-line-height * 0.625) - $button-border-width + $button-text-offset
+  1em rem-calc($base-line-height * 0.625) - $button-border-width - $button-text-offset !default;
 $button-radius: 0.25rem !default;
-$button-background: map-get($button-palette, primary) !default;
+$button-background: map.get($button-palette, primary) !default;
 $button-background-hover-lightness: 10% !default;
-$button-background-hover: scale-color(
+$button-background-hover: color.scale(
   $button-background,
   $lightness: $button-background-hover-lightness
 ) !default;
-$button-primary-shadow-color: scale-color(
-  map-get($button-palette, primary),
+$button-primary-shadow-color: color.scale(
+  map.get($button-palette, primary),
   $lightness: -15%,
   $saturation: 20%
 ) !default;
@@ -61,29 +65,29 @@ $form-label-line-height: if(
 $input-border-width: rem-calc(2) !default;
 $input-border-color: if(
   $input-background == $form-background,
-  scale-color($form-background, $lightness: -10%),
-  scale-color(get-background-color($form-background), $lightness: -5%)
+  color.scale($form-background, $lightness: -10%),
+  color.scale(get-background-color($form-background), $lightness: -5%)
 ) !default;
-$input-border-color-focus: scale-color($input-border-color, $lightness: -10%) !default;
+$input-border-color-focus: color.scale($input-border-color, $lightness: -10%) !default;
 $input-border: $input-border-width solid $input-border-color !default;
 $input-border-focus: $input-border-width solid $input-border-color-focus !default;
 $input-prefix-border: none !default;
 
 // Shadows
 $input-shadow: none !default;
-$input-shadow-focus: inset 0 ($input-border-width / 2) $input-border-width $input-border-color !default;
+$input-shadow-focus: inset 0 ($input-border-width * 0.5) $input-border-width $input-border-color !default;
 
 // Inputs
 $input-background-focus: $input-background !default;
 $input-font-size: 1rem !default;
-$input-line-height: max(
+$input-line-height: math.max(
   grid-lineheight($input-font-size),
   unitless-calc($base-line-height)
 ) !default;
 $input-height: rem-calc(2 * $base-line-height) !default;
 // prettier-ignore
 $input-padding: (
-  rem-calc(($input-height - $input-line-height * $input-font-size) / 2) - $input-border-width
+  rem-calc(($input-height - $input-line-height * $input-font-size) * 0.5) - $input-border-width
 ) 1rem !default;
 $input-placeholder-color: $medium-gray !default;
 $input-prefix-color: $form-label-color !default;
@@ -92,7 +96,7 @@ $input-prefix-padding: 1em !default;
 // Selects
 $select-height: $input-height !default;
 $select-triangle-color: $dark-gray !default;
-$select-triangle-size: rem-calc($base-line-height / 2) !default;
+$select-triangle-size: rem-calc($base-line-height * 0.5) !default;
 $select-font-family: $form-label-font-family !default;
 $select-font-size: $form-label-font-size !default;
 $select-font-weight: $form-label-font-weight !default;
@@ -163,12 +167,15 @@ $form-steps-font-color-alt: $body-font-color !default;
 $form-steps-background-color: $medium-gray !default;
 $form-steps-next-background-color: $light-gray !default;
 // the previous step should be $dark-gray
-// keeping it as a scale-color() relation, because of it should still be derived
+// keeping it as a color.scale() relation, because of it should still be derived
 // from the background color
-$form-steps-previous-background-color: scale-color(
+$form-steps-previous-background-color: color.scale(
   $form-steps-background-color,
   $lightness: -46.5%
 ) !default;
 
 // AJAX loading throbber
 $loader-color: get-color(primary) !default;
+
+// Payment icons
+$payment-icon-color: $form-label-color !default;

package/src/scss/layout/_cover.scss

@@ -4,6 +4,8 @@
 // * cover-1col: The main content is displayed in a single column.
 // * cover-2col: The main content is split into visual sections over 1-2 columns.
 
+@use "sass:map";
+
 $cover-background: $fallback-background !default;
 $cover-content-box-shadow: none !default;
 /// A value to subtract from the screen height to place the bottom edge of #top.
@@ -59,7 +61,7 @@ $cover-2col-offset: $global-margin * 5;
   }
 
   // Make .narrow smaller a little earlier, halfway between large and xlarge.
-  @include breakpoint((map-get($breakpoints, large) + map-get($breakpoints, xlarge)) / 2) {
+  @include breakpoint((map.get($breakpoints, large) + map.get($breakpoints, xlarge)) * 0.5) {
     ~ section .grid-container.narrow {
       > * {
         grid-column: 3 / -3;
@@ -85,7 +87,7 @@ $cover-2col-offset: $global-margin * 5;
   @include breakpoint(large) {
     // Adjust vertical paddings and margins.
     #top {
-      padding-bottom: $global-padding / 2;
+      padding-bottom: $global-padding * 0.5;
     }
     #content {
       padding-top: $global-padding * 1.5;
@@ -200,7 +202,7 @@ $cover-2col-offset: $global-margin * 5;
 
     // Reduce padding for top section.
     #top .inner-wrapper {
-      padding-bottom: $global-padding / 2;
+      padding-bottom: $global-padding * 0.5;
 
       #page-title {
         padding-top: 0;
@@ -230,7 +232,11 @@ $cover-2col-offset: $global-margin * 5;
     #background ~ #main > .grid-container {
       // Make the first grid row almost as large as the screen
       // (we don’t know how large the #header is, whether there are messages,…).
+      // ATM stylelint does not recognise pure CSS functions:
+      // https://github.com/stylelint-scss/stylelint-scss/issues/486
+      // stylelint-disable scss/no-global-function-names
       grid-template-rows: min(calc(100vh - #{$cover-2col-offset}), 125vw) 1fr;
+      // stylelint-enable scss/no-global-function-names
       // Show the top section at the bottom of this row.
       #top {
         margin-top: auto;

package/src/scss/layout/_settings.scss

@@ -18,7 +18,7 @@ $fallback-background: $medium-gray !default;
 // Borders
 $form-border: if(
   $form-background == $body-background,
-  rem-calc($base-line-height / 2) solid $light-gray,
+  rem-calc($base-line-height * 0.5) solid $light-gray,
   none
 ) !default;
 $header-border: if(

package/src/scss/main.scss

@@ -1,3 +1,5 @@
+// stylelint-disable no-invalid-position-at-import-rule
+
 @charset 'utf-8';
 
 // --------------------------------------------------------------------------
@@ -86,6 +88,7 @@
 @include mo-progress-thermometer;
 @include mo-share-button;
 @include mo-drupal-ajax-loading;
+@include mo-payment-icons;
 @include mo-cookiebar;
 
 @import "form/forms";

package/src/scss/typography/_elements.scss

@@ -46,6 +46,6 @@ h6,
 // Quotes
 
 blockquote p {
-  margin-bottom: $global-margin / 2;
+  margin-bottom: $global-margin * 0.5;
   padding: 0;
 }

package/src/scss/typography/_settings.scss

@@ -2,6 +2,9 @@
 // - - - - - - - - - - - - - - -
 // Expects $base-font-size and $global-font-size have already been set
 
+@use "sass:color";
+@use "sass:meta";
+
 // Fonts
 // see https://fontsarena.com/blog/operating-systems-default-sans-serif-fonts/
 $body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen,
@@ -13,9 +16,13 @@ $global-weight-bold: bold !default;
 $body-font-color: $black !default;
 $body-font-color-alt: $white !default;
 $title-color: get-color(primary) !default;
-$header-color-even: if(variable-exists("header-color"), $header-color, $body-font-color) !default;
+$header-color-even: if(
+  meta.variable-exists("header-color"),
+  $header-color,
+  $body-font-color
+) !default;
 $header-color-odd: if(
-  variable-exists("header-color"),
+  meta.variable-exists("header-color"),
   $header-color,
   get-color(secondary)
 ) !default;
@@ -70,8 +77,8 @@ $header-styles: (
 ) !default;
 
 // Links
-$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;
-$anchor-color-active: scale-color($anchor-color, $lightness: 6%) !default;
+$anchor-color-hover: color.scale($anchor-color, $lightness: -14%) !default;
+$anchor-color-active: color.scale($anchor-color, $lightness: 6%) !default;
 $anchor-text-decoration: underline !default;
 $anchor-text-decoration-hover: underline !default;