@moreonion/foundist 3.5.0 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
@@ -26,27 +26,27 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@moreonion/foundation-base": "3.5.0",
+    "@moreonion/foundation-base": "3.5.1",
     "foundation-sites": "6.9.0",
-    "jquery": "^3.7.0",
-    "sass-embedded": "^1.89.0",
+    "jquery": "^4.0.0",
+    "sass-embedded": "^1.99.0",
     "select2": "^4.1.0-rc.0"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.5.0",
     "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",
     "husky": "^9.1.0",
-    "lint-staged": "^16.1.0",
+    "lint-staged": "^16.4.0",
     "postcss": "^8.5.0",
-    "prettier": "^3.6.0",
-    "stylelint": "^16.21.0",
+    "prettier": "^3.8.0",
+    "stylelint": "^17.9.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-recommended-scss": "^15.0.0",
-    "stylelint-scss": "^6.12.0",
+    "stylelint-config-recommended-scss": "^17.0.0",
+    "stylelint-scss": "^7.0.0",
     "vite": "^7.0.0",
     "vite-plugin-nunjucks": "^0.2.0"
   },
@@ -59,5 +59,5 @@
       "eslint"
     ]
   },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.14.0"
 }

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/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;