@moreonion/foundist 3.5.0 → 3.6.0

package/README.md

@@ -22,8 +22,8 @@ the desired result)!
 
 The setup should give you a quite modern JS/SCSS-environment:
 - Vite (with SCSS, browserlist, PostCSS)
-- Linting (`stylelint`, `eslint`)
-- Prettifying (`prettify`)
+- Linting (`stylelint`, `oxlint`)
+- Prettifying (`prettify`, `oxfmt`)
 - Pre-commit hooks for `.scss` and `.js` files
 
 The entrypoints are at:
@@ -80,5 +80,5 @@ There is a basic settings file provided.
 You might want to install the following VS Code plugins (or re-enable the build in formatters):
 
 - Prettier - Code formatter `esbenp.prettier-vscode` <https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode>
-- ESLint `dbaeumer.vscode-eslint` <https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint>
 - stylelint `shinnn.stylelint` <https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint>
+- OXC `oxc.oxc-vscode` <https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
@@ -18,36 +18,33 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint:css": "stylelint src/scss && prettier --check 'src/scss/**/*.scss'",
-    "lint:js": "eslint src",
+    "lint:js": "oxlint src/js && oxfmt --check src/js",
     "lint": "yarn run lint:css && yarn run lint:js",
     "fix:css": "stylelint --fix src/scss && prettier --write 'src/scss/**/*.scss'",
-    "fix:js": "eslint --fix src",
+    "fix:js": "oxfmt src/js && oxlint --fix src/js",
     "fix": "yarn run fix:css && yarn run fix:js",
     "prepare": "husky"
   },
   "dependencies": {
-    "@moreonion/foundation-base": "3.5.0",
+    "@moreonion/foundation-base": "3.6.0",
     "foundation-sites": "6.9.0",
-    "jquery": "^3.7.0",
-    "sass-embedded": "^1.89.0",
-    "select2": "^4.1.0-rc.0"
+    "jquery": "^4.0.0",
+    "sass-embedded": "^1.100.0",
+    "select2": "^4.1.0"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
-    "eslint": "8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-n": "^16.6.0",
-    "eslint-plugin-promise": "^6.6.0",
+    "autoprefixer": "^10.5.0",
     "husky": "^9.1.0",
-    "lint-staged": "^16.1.0",
+    "lint-staged": "^17.0.0",
+    "oxfmt": "^0.57.0",
+    "oxlint": "^1.72.0",
     "postcss": "^8.5.0",
-    "prettier": "^3.6.0",
-    "stylelint": "^16.21.0",
+    "prettier": "^3.9.0",
+    "stylelint": "^17.14.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-recommended-scss": "^15.0.0",
-    "stylelint-scss": "^6.12.0",
-    "vite": "^7.0.0",
+    "stylelint-config-recommended-scss": "^17.0.0",
+    "stylelint-scss": "^7.2.0",
+    "vite": "^8.0.0",
     "vite-plugin-nunjucks": "^0.2.0"
   },
   "lint-staged": {
@@ -56,8 +53,9 @@
       "prettier --check"
     ],
     "*.js": [
-      "eslint"
+      "oxlint",
+      "oxfmt"
     ]
   },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.16.0"
 }

package/src/html/includes/form-items/webform-steps.html

@@ -1,16 +1,16 @@
 <div class="form-steps-wrapper">
-    <div class="form-steps webform-progressbar" data-form-steps-total="3" data-form-steps-current="2">
-        <div class="step webform-progressbar-page previous first clickable" data-form-step-number="1">
+    <nav class="form-steps" data-form-steps-total="3" data-form-steps-current="2">
+        <button class="step previous first clickable" data-form-step-number="1">
             <span class="step-number">1</span>
             <span class="step-label">Data</span>
-        </div>
-        <div class="step webform-progressbar-page current" data-form-step-number="2">
+        </button>
+        <button class="step current" data-form-step-number="2">
             <span class="step-number">2</span>
             <span class="step-label">Message</span>
-        </div>
-        <div class="step webform-progressbar-page last" data-form-step-number="3">
+        </button>
+        <button class="step last" data-form-step-number="3">
             <span class="step-number">3</span>
             <span class="step-label">Another form step</span>
-        </div>
-    </div>
+        </button>
+    </nav>
 </div>

package/src/js/example.js

@@ -1,9 +1,4 @@
-import {
-  initFoundation,
-  stickyForm,
-  stickyButton,
-  cookiebar
-} from './foundist'
+import { initFoundation, stickyForm, stickyButton, cookiebar } from './foundist'
 
 // Initialize Foundation
 ;(() => {

package/src/js/foundist.js

@@ -1,19 +1,5 @@
 /* global Drupal */
 
-// Ensure $ is available: Foundation and select2 need to bind to it
-import $ from 'jquery'
-import select2 from 'select2'
-
-/* eslint-disable no-unused-vars */
-import {
-  Accordion,
-  Foundation,
-  Reveal,
-  SmoothScroll,
-  Toggler
-} from 'foundation-sites/js/foundation'
-/* eslint-enable no-unused-vars */
-
 import {
   AdaptiveSticky,
   CookieBar,
@@ -26,6 +12,18 @@ import {
   UserAgent,
   initEventBridge,
 } from '@moreonion/foundation-base'
+/* eslint-disable no-unused-vars */
+import {
+  Accordion,
+  Foundation,
+  Reveal,
+  SmoothScroll,
+  Toggler,
+} from 'foundation-sites/js/foundation'
+// Ensure $ is available: Foundation and select2 need to bind to it
+import $ from 'jquery'
+/* eslint-enable no-unused-vars */
+import select2 from 'select2'
 
 // Add the select2 to jQuery
 // Needed for SelectTwo plugin
@@ -49,11 +47,11 @@ Foundation.plugin(UserAgent, 'UserAgent')
  * Let foundation initialize the initial markup.
  * This needs to be done for dynamically loaded markup too (e.g. AJAX markup)
  */
-export function initFoundation () {
+export function initFoundation() {
   initEventBridge($)
   if (typeof Drupal !== 'undefined') {
     Drupal.behaviors.foundist_initialize = {}
-    Drupal.behaviors.foundist_initialize.attach = (context, settings) => {
+    Drupal.behaviors.foundist_initialize.attach = (context) => {
       $(context).foundation()
       // Show overlays with `data-open` initially.
       const $overlay = $('[data-reveal][data-open]')
@@ -71,10 +69,11 @@ export function initFoundation () {
 
 /**
  * Activate AdaptiveSticky on forms in the sidebar.
+ *
  * @param {object} options - Overrides to the AdaptiveSticky plugin settings.
- * @returns {AdaptiveSticky|undefined} The initialized AdaptiveSticky plugin
+ * @returns {AdaptiveSticky | undefined} The initialized AdaptiveSticky plugin
  */
-export function stickyForm (options = {}) {
+export function stickyForm(options = {}) {
   const $form = $('#sidebar #form, #sidebar .share-buttons')
   if (!$form.length) {
     return
@@ -87,22 +86,23 @@ export function stickyForm (options = {}) {
     target: '#form-outer #form, #form-outer .share-buttons ul',
     offset: $('#form-outer').css('padding-top'),
     mediaQuery: 'large',
-    ...options
+    ...options,
   })
 }
 
 /**
  * Activate StickyButton on CTA markup snippet.
+ *
  * @param {object} options - Overrides to the StickyButton plugin settings.
- * @returns {StickyButton[]|undefined} Array of initialized StickyButton plugins
+ * @returns {StickyButton[] | undefined} Array of initialized StickyButton plugins
  */
-export function stickyButton (options = {}) {
+export function stickyButton(options = {}) {
   let $cta = $('.sticky-cta')
   if (!$cta.length) {
     return
   }
   const defaults = {
-    topOverlap: 0.3
+    topOverlap: 0.3,
   }
   // Find blocking element
   const target = $cta.find('a').attr('href')
@@ -128,17 +128,18 @@ export function stickyButton (options = {}) {
   return $cta.map((i, el) => {
     return new Foundation.StickyButton($(el), {
       ...defaults,
-      ...options
+      ...options,
     })
   })
 }
 
 /**
  * Activate cookiebar on cookiebar id.
+ *
  * @param {object} options - Overrides to the Cookiebar plugin settings.
- * @returns {Cookiebar|undefined} The initialized Cookiebar plugin
+ * @returns {CookieBar | undefined} The initialized Cookiebar plugin
  */
-export function cookiebar (options = {}) {
+export function cookiebar(options = {}) {
   const $cookiebar = $('#cookiebar')
   if (!$cookiebar.length) {
     return

package/src/scss/components/_accordion.scss

@@ -12,35 +12,47 @@
   color: $accordion-item-color;
   background: $accordion-item-background;
   text-decoration: none;
-  // Space for the triangle
-  padding-left: rem-calc(get-side($accordion-item-padding, left)) + 2 * $accordion-triangle-size;
 
-  // Triangle to signal a dropdown
-  &:before {
-    width: $accordion-triangle-size;
-    height: $accordion-triangle-size;
-    background-size: $accordion-triangle-size;
-    background-repeat: no-repeat;
-    content: "";
-    display: inline-block;
-    transform: rotate(-90deg);
-    transition: transform 0.1s ease-in-out;
-    position: absolute;
-    left: rem-calc(get-side($accordion-item-padding, left));
-    // The triangle is vertically centered in the title
-    top: calc(50% - #{$accordion-triangle-size * 0.5});
-
-    @include background-triangle($accordion-triangle-color);
+  &:hover,
+  &:focus {
+    color: $accordion-item-color-hover;
   }
-  .is-active & {
+
+  @if ($accordion-has-arrow == true) {
+    // Space for the triangle
+    $padding: rem-calc(get-side($accordion-item-padding, $accordion-arrow-position));
+    padding-#{$accordion-arrow-position}: $padding + 2 * $accordion-triangle-size;
+
+    // Triangle to signal a dropdown
     &:before {
-      transform: rotate(0deg);
+      width: $accordion-triangle-size;
+      height: $accordion-triangle-size;
+      background-size: $accordion-triangle-size;
+      background-repeat: no-repeat;
+      content: "";
+      display: inline-block;
+      transform: rotate(-90deg);
+      transition: transform 0.1s ease-in-out;
+      position: absolute;
+      #{$accordion-arrow-position}: $padding;
+      // The triangle is vertically centered in the title
+      top: calc(50% - #{$accordion-triangle-size * 0.5});
+
+      @include background-triangle($accordion-triangle-color);
+    }
+    .is-active & {
+      &:before {
+        transform: rotate(0deg);
+      }
     }
   }
 
-  &:hover,
-  &:focus {
-    color: $accordion-item-color-hover;
+  @if ($accordion-plusminus == true) {
+    // Center plus/minus
+    &:before {
+      line-height: 1;
+      margin-top: -0.5em;
+    }
   }
 }
 

package/src/scss/components/_bottom-section.scss

@@ -5,14 +5,12 @@
 @use "sass:meta";
 
 $bottom-section-background-odd: if(
-  meta.variable-exists("bottom-section-background"),
-  $bottom-section-background,
-  $form-background
+  sass(meta.variable-exists("bottom-section-background")): $bottom-section-background;
+    else: $form-background
 ) !default;
 $bottom-section-background-even: if(
-  meta.variable-exists("bottom-section-background"),
-  $bottom-section-background,
-  $body-background
+  sass(meta.variable-exists("bottom-section-background")): $bottom-section-background;
+    else: $body-background
 ) !default;
 $bottom-section-background-image-overlay: rgba($black, 0.3);
 

package/src/scss/components/_headline.scss

@@ -26,9 +26,10 @@ $headline-font-size: 2 * $large-font-size !default;
 /// @type Color
 $headline-color: color-pick-contrast(
   if(
-    $headline-background and $headline-background != none,
-    get-background-color($headline-background),
-    get-background-color($fallback-background)
+    sass($headline-background and $headline-background != none): get-background-color(
+        $headline-background
+      );
+      else: get-background-color($fallback-background)
   ),
   ($title-color, $body-font-color-alt, $body-font-color),
   6

package/src/scss/components/_letter.scss

@@ -8,9 +8,8 @@ $letter-signature-image-margin: 0 0 (0.5 * $global-margin) !default;
 $letter-counter-font-family: $header-font-family !default;
 $letter-counter-font-size: $large-font-size !default;
 $letter-counter-line-height: if(
-  $letter-counter-font-size == $large-font-size,
-  $large-lineheight,
-  grid-lineheight($letter-counter-font-size)
+  sass($letter-counter-font-size == $large-font-size): $large-lineheight;
+    else: grid-lineheight($letter-counter-font-size)
 ) !default;
 $letter-counter-font-weight: $global-weight-bold !default;
 

package/src/scss/components/_mobile-menu.scss

@@ -16,22 +16,18 @@ $mobile-menu-align-content: flex-start !default;
 // Mobile menu items
 $mobile-menu-item-font-size: $large-font-size !default;
 $mobile-menu-item-line-height: if(
-  $mobile-menu-item-font-size == $large-font-size,
-  $large-lineheight,
-  grid-lineheight($mobile-menu-item-font-size)
+  sass($mobile-menu-item-font-size == $large-font-size): $large-lineheight;
+    else: grid-lineheight($mobile-menu-item-font-size)
 ) !default;
 $mobile-menu-item-font-weight: $global-weight-bold !default;
 $mobile-menu-item-color: $menu-item-color !default;
 $mobile-menu-item-color-hover: if(
-  $mobile-menu-item-color == $menu-item-color,
-  $menu-item-color-hover,
-  $mobile-menu-item-color
+  sass($mobile-menu-item-color == $menu-item-color): $menu-item-color-hover;
+    else: $mobile-menu-item-color
 ) !default;
 $mobile-menu-item-decoration-hover: $menu-item-decoration-hover !default;
 $mobile-menu-text-color: if(
-  $mobile-menu-item-color == $menu-item-color,
-  $menu-text-color,
-  $mobile-menu-text-color
+  sass($mobile-menu-item-color == $menu-item-color): $menu-text-color; else: $mobile-menu-text-color
 ) !default;
 $mobile-menu-text-font-weight: $mobile-menu-item-font-weight !default;
 

package/src/scss/components/_settings.scss

@@ -26,9 +26,9 @@ $recent-supporter-color: color-pick-contrast(
 ) !default;
 $recent-supporter-time-color: $muted-font-color !default;
 $recent-supporter-border-color: if(
-  color.channel(get-background-color($body-background), "lightness", $space: hsl) < 50,
-  $dark-gray,
-  $light-gray
+  sass(color.channel(get-background-color($body-background), "lightness", $space: hsl) < 50):
+    $dark-gray;
+    else: $light-gray
 ) !default;
 $recent-supporter-border-width: rem-calc(2) !default;
 $recent-supporter-padding: (rem-calc(0.75 * $base-line-height) - $recent-supporter-border-width)
@@ -76,9 +76,8 @@ $closebutton-border-radius: 50% !default;
 $menu-item-font-family: inherit !default;
 $menu-item-font-size: $small-font-size !default;
 $menu-item-line-height: if(
-  $menu-item-font-size == $small-font-size,
-  $small-lineheight,
-  grid-lineheight($menu-item-font-size)
+  sass($menu-item-font-size == $small-font-size): $small-lineheight;
+    else: grid-lineheight($menu-item-font-size)
 ) !default;
 $menu-item-font-weight: $global-weight-normal !default;
 $menu-item-color: inherit !default;
@@ -97,18 +96,15 @@ $dropdown-menu-item-color: color-pick-contrast(
   ($body-font-color, $body-font-color-alt)
 ) !default;
 $dropdown-menu-item-color-hover: if(
-  $dropdownmenu-background,
-  $dropdown-menu-item-color,
-  $menu-item-color-hover
+  sass($dropdownmenu-background): $dropdown-menu-item-color; else: $menu-item-color-hover
 ) !default;
 $dropdown-menu-item-color-active: $dropdown-menu-item-color !default;
 $dropdown-menu-item-height: $select-height !default;
 $dropdown-menu-parent-font-weight: $global-weight-bold !default;
 $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,
-  color.scale($dropdown-menu-parent-border-color, $lightness: -10%)
+  sass($dropdown-menu-parent-border-color == $input-border-color): $input-border-color-focus;
+    else: color.scale($dropdown-menu-parent-border-color, $lightness: -10%)
 ) !default;
 $dropdown-menu-parent-border-width: $input-border-width !default;
 $dropdownmenu-border: (
@@ -141,13 +137,14 @@ $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 * 0.5) !default;
 $accordion-plusminus: false !default;
+$accordion-has-arrow: not $accordion-plusminus !default;
+$accordion-arrow-position: left !default;
 $accordion-radius: rem-calc(5) !default;
 $accordion-separator: true !default;
 $accordion-title-font-size: 1rem !default;
 $accordion-title-line-height: if(
-  $accordion-title-font-size == 1rem,
-  unitless-calc($base-line-height),
-  grid-lineheight($accordion-title-font-size)
+  sass($accordion-title-font-size == 1rem): unitless-calc($base-line-height);
+    else: grid-lineheight($accordion-title-font-size)
 ) !default;
 $accordion-triangle-color: get-color(primary) !default;
 $accordion-triangle-size: rem-calc($base-font-size) !default;

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

@@ -10,63 +10,60 @@
 
 // Base colors
 $donation-amount-background-color: if(
-  $option-button-fill == hollow,
-  transparent,
-  $option-button-background
+  sass($option-button-fill == hollow): transparent; else: $option-button-background
 ) !default;
 $donation-amount-background-color-checked: $option-button-background-checked !default;
 
 // Button border colors
 $donation-amount-border-color: if(
-  $option-button-fill == hollow,
-  $donation-amount-background-color-checked,
-  transparent
+  sass($option-button-fill == hollow): $donation-amount-background-color-checked; else: transparent
 ) !default;
 $donation-amount-border-color-checked: if(
-  $donation-amount-background-color-checked == $option-button-background-checked,
-  $option-button-border-color-checked,
-  transparent
+  sass($donation-amount-background-color-checked == $option-button-background-checked):
+    $option-button-border-color-checked;
+    else: transparent
 ) !default;
 $donation-amount-border-color-hover: color.scale(
   $donation-amount-border-color,
   $lightness: $button-hollow-hover-lightness
 ) !default;
 $donation-amount-border-color-focus: if(
-  $donation-amount-border-color-hover == transparent,
-  color.scale(
-    $donation-amount-background-color-checked,
-    $lightness: $button-hollow-hover-lightness
-  ),
-  $donation-amount-border-color-hover
+  sass($donation-amount-border-color-hover == transparent): color.scale(
+      $donation-amount-background-color-checked,
+      $lightness: $button-hollow-hover-lightness
+    );
+    else: $donation-amount-border-color-hover
 ) !default;
 
 // Button text colors
 $donation-amount-text-color: if(
-  $donation-amount-background-color == transparent,
-  $donation-amount-border-color,
-  if(
-    $donation-amount-background-color == $option-button-background,
-    $option-button-color,
-    color-pick-contrast($donation-amount-background-color, ($button-color, $button-color-alt))
-  )
+  sass($donation-amount-background-color == transparent): $donation-amount-border-color;
+    else: if(
+      sass($donation-amount-background-color == $option-button-background): $option-button-color;
+        else: color-pick-contrast(
+          $donation-amount-background-color,
+          ($button-color, $button-color-alt)
+        )
+    )
 ) !default;
 $donation-amount-text-color-hover: if(
-  $donation-amount-background-color == transparent,
-  $donation-amount-border-color-hover,
-  $donation-amount-text-color
+  sass($donation-amount-background-color == transparent): $donation-amount-border-color-hover;
+    else: $donation-amount-text-color
 ) !default;
 $donation-amount-text-color-checked: if(
-  $donation-amount-background-color-checked == $option-button-background-checked,
-  $option-button-color-checked,
-  color-pick-contrast($donation-amount-background-color-checked, ($button-color, $button-color-alt))
+  sass($donation-amount-background-color-checked == $option-button-background-checked):
+    $option-button-color-checked;
+    else: color-pick-contrast(
+      $donation-amount-background-color-checked,
+      ($button-color, $button-color-alt)
+    )
 ) !default;
 
 // Button typography
 $donation-amount-font-size: $large-font-size !default;
 $donation-amount-text-offset: if(
-  meta.type-of($button-text-offset) == map,
-  map.get($button-text-offset, default),
-  $button-text-offset
+  sass(meta.type-of($button-text-offset) == map): map.get($button-text-offset, default);
+    else: $button-text-offset
 ) !default;
 
 // Button shape

package/src/scss/form/_settings.scss

@@ -57,17 +57,15 @@ $form-label-font-family: inherit !default;
 $form-label-font-size: $small-font-size !default;
 $form-label-font-weight: $global-weight-bold !default;
 $form-label-line-height: if(
-  $form-label-font-size == $small-font-size,
-  $small-lineheight,
-  grid-lineheight($form-label-font-size)
+  sass($form-label-font-size == $small-font-size): $small-lineheight;
+    else: grid-lineheight($form-label-font-size)
 ) !default;
 
 // Borders
 $input-border-width: rem-calc(2) !default;
 $input-border-color: if(
-  $input-background == $form-background,
-  color.scale($form-background, $lightness: -10%),
-  color.scale(get-background-color($form-background), $lightness: -5%)
+  sass($input-background == $form-background): color.scale($form-background, $lightness: -10%);
+    else: color.scale(get-background-color($form-background), $lightness: -5%)
 ) !default;
 $input-border-color-focus: color.scale($input-border-color, $lightness: -10%) !default;
 $input-border: $input-border-width solid $input-border-color !default;
@@ -117,21 +115,18 @@ $file-upload-help-color: $muted-font-color !default;
 // Help texts
 $helptext-color: $form-label-color !default;
 $helptext-font-size: if(
-  $form-label-font-size == 1rem,
-  $small-font-size,
-  0.8 * $form-label-font-size
+  sass($form-label-font-size == 1rem): $small-font-size; else: 0.8 * $form-label-font-size
 ) !default;
 $helptext-line-height: if(
-  $helptext-font-size == $small-font-size,
-  $small-lineheight,
-  grid-lineheight($helptext-font-size)
+  sass($helptext-font-size == $small-font-size): $small-lineheight;
+    else: grid-lineheight($helptext-font-size)
 ) !default;
 
 // Fieldsets
 $fieldset-border: none !default;
 $fieldset-margin: 2 * $form-spacing 0 !default;
-$fieldset-padding: if($fieldset-border != none, $form-spacing, 0) !default;
-$legend-padding: if($fieldset-border != none, 0 $form-spacing, 0) !default;
+$fieldset-padding: if(sass($fieldset-border != none): $form-spacing; else: 0) !default;
+$legend-padding: if(sass($fieldset-border != none): 0 $form-spacing; else: 0) !default;
 $legend-margin: 0 0 (2 * $form-spacing)
   (-1 * get-side($legend-padding, left) - get-side($fieldset-padding, left)) !default;
 $legend-color: $header-color-odd !default;
@@ -139,17 +134,15 @@ $legend-font-family: $form-label-font-family !default;
 $legend-font-size: $lead-font-size !default;
 $legend-font-weight: $header-font-weight !default;
 $legend-line-height: if(
-  $legend-font-size == $lead-font-size,
-  $lead-lineheight,
-  grid-lineheight($legend-font-size)
+  sass($legend-font-size == $lead-font-size): $lead-lineheight;
+    else: grid-lineheight($legend-font-size)
 ) !default;
 
 // Errors
 $input-error-font-size: $small-font-size !default;
 $input-error-line-height: if(
-  $input-error-font-size == $small-font-size,
-  $small-lineheight,
-  grid-lineheight($input-error-font-size)
+  sass($input-error-font-size == $small-font-size): $small-lineheight;
+    else: grid-lineheight($input-error-font-size)
 ) !default;
 $input-error-background: get-color(alert) !default;
 

package/src/scss/layout/_media.scss

@@ -2,6 +2,11 @@
 // - - - - - - - - - - - - - - -
 // Special styles for images, videos, iframes,…
 
+// Keep aspect ratio when setting a height.
+img {
+  width: auto;
+}
+
 // Wrapper to use full available width.
 .media-stretch {
   @extend .small-reverse-container-padding;

package/src/scss/layout/_settings.scss

@@ -17,13 +17,10 @@ $fallback-background: $medium-gray !default;
 
 // Borders
 $form-border: if(
-  $form-background == $body-background,
-  rem-calc($base-line-height * 0.5) solid $light-gray,
-  none
+  sass($form-background == $body-background): rem-calc($base-line-height * 0.5) solid $light-gray;
+    else: none
 ) !default;
 $header-border: if(
-  $header-background == $body-background,
-  rem-calc(4) solid $light-gray,
-  none
+  sass($header-background == $body-background): rem-calc(4) solid $light-gray; else: none
 ) !default;
 $footer-border: none !default;

package/src/scss/main.scss

@@ -88,6 +88,7 @@
 @include mo-close-button;
 @include mo-form-group;
 @include mo-form-steps;
+@include mo-form-step-animations;
 @include mo-m2d-message;
 @include mo-recent-supporters;
 @include mo-progress-bar;

package/src/scss/typography/_settings.scss

@@ -26,14 +26,10 @@ $body-font-color-alt: $white !default;
 $muted-font-color: $medium-gray !default;
 $title-color: get-color(primary) !default;
 $header-color-even: if(
-  meta.variable-exists("header-color"),
-  $header-color,
-  $body-font-color
+  sass(meta.variable-exists("header-color")): $header-color; else: $body-font-color
 ) !default;
 $header-color-odd: if(
-  meta.variable-exists("header-color"),
-  $header-color,
-  get-color(secondary)
+  sass(meta.variable-exists("header-color")): $header-color; else: get-color(secondary)
 ) !default;
 $header-color-alt: $body-font-color-alt !default;
 $header-small-font-color: $muted-font-color !default;
@@ -95,21 +91,19 @@ $anchor-text-decoration-hover: underline !default;
 // Quotes
 $blockquote-font-size: $lead-font-size !default;
 $blockquote-line-height: if(
-  $blockquote-font-size == $lead-font-size,
-  $lead-lineheight,
-  grid-lineheight($blockquote-font-size)
+  sass($blockquote-font-size == $lead-font-size): $lead-lineheight;
+    else: grid-lineheight($blockquote-font-size)
 ) !default;
 $blockquote-padding: none !default;
 $blockquote-border: none !default;
 $cite-color: $blockquote-color !default;
 $cite-font-size: $blockquote-font-size !default;
 $cite-line-height: if(
-  $cite-font-size == $blockquote-font-size,
-  $blockquote-line-height,
-  grid-lineheight($cite-font-size)
+  sass($cite-font-size == $blockquote-font-size): $blockquote-line-height;
+    else: grid-lineheight($cite-font-size)
 ) !default;
 $cite-font-style: normal !default;
 $cite-pseudo-content: "" !default;
 
 // Tags that usually make up text sections
-$text-tags: p, h1, h2, h3, h4, h5, h6, dl, ul, ol, blockquote !default;
+$text-tags: "p, h1, h2, h3, h4, h5, h6, dl, ul:not(.accordion), ol, blockquote" !default;