@moreonion/foundist 2.1.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moreonion/foundist",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Foundation based default theme for Impact Stack landing pages.",
   "author": "More Onion <kontakt@more-onion.at>",
   "license": "MIT",
@@ -44,15 +44,12 @@
     "@linthtml/linthtml": "^0.8.0"
   },
   "dependencies": {
-    "@moreonion/foundation-base": "2.1.0",
+    "@moreonion/foundation-base": "2.1.1",
     "http-server": "^13.0.0",
     "posthtml": "^0.16.5",
-    "posthtml-expressions": "^1.8.1",
-    "posthtml-extend": "^0.6.0",
-    "posthtml-include": "^1.7.1"
-  },
-  "resolutions": {
-    "sass": "1.37.5"
+    "posthtml-expressions": "^1.9.0",
+    "posthtml-extend": "0.6.0",
+    "posthtml-include": "^1.7.2"
   },
   "lint-staged": {
     "*.scss": [

package/src/html/includes/form-items/inline-radios.html

@@ -0,0 +1,17 @@
+<div class="form-item inline extra-spacing">
+  <label for="radios-1">What is most important to you?</label>
+  <div id="radios" class="form-radios">
+    <div class="form-item form-type-radio">
+      <input type="radio" id="radios-1" name="radios" value="1" class="form-radio">
+      <label class="option" for="radios-1">Whales</label>
+    </div>
+    <div class="form-item form-type-radio">
+      <input type="radio" id="radios-2" name="radios" value="2" class="form-radio">
+      <label class="option" for="radios-2">Pandas</label>
+    </div>
+    <div class="form-item form-type-radio">
+      <input type="radio" id="radios-3" name="radios" value="2" class="form-radio">
+      <label class="option" for="radios-3">Bees</label>
+    </div>
+  </div>
+</div>

package/src/html/includes/form-items/payment-icons.html

@@ -0,0 +1,19 @@
+<div class="form-item">
+  <div class="payment-icons">
+    <span class="secure-payment-icon"><span class="show-for-sr">Your payment is secure</span></span>
+    <span class="apple-pay-icon"><span class="show-for-sr">Apple Pay</span></span>
+    <span class="credit-card-icon"><span class="show-for-sr">Credit Card</span></span>
+    <span class="direct-debit-icon"><span class="show-for-sr">Direct Debit</span></span>
+    <span class="google-pay-icon"><span class="show-for-sr">Google Pay</span></span>
+    <span class="mastercard-icon"><span class="show-for-sr">Master Card</span></span>
+    <span class="paypal-icon"><span class="show-for-sr">PayPal</span></span>
+    <span class="paypal-pp-icon"><span class="show-for-sr">PayPal</span></span>
+    <span class="sage-pay-icon"><span class="show-for-sr">SagePay</span></span>
+    <span class="sepa-icon"><span class="show-for-sr">SEPA</span></span>
+    <span class="stripe-icon"><span class="show-for-sr">Stripe</span></span>
+    <span class="visa-icon"><span class="show-for-sr">VISA</span></span>
+    <span class="direct-debit-logo"><span class="show-for-sr">Direct Debit</span></span>
+    <span class="giftaid-logo"><span class="show-for-sr">Giftaid</span></span>
+    <span class="fr-regulator-logo"><span class="show-for-sr">Fundraising Regulator</span></span>
+  </div>
+</div>

package/src/scss/_util.scss

@@ -2,6 +2,8 @@
 // - - - - - - - - - - - -
 // Functions and mixins for general use
 
+@use "sass:color";
+
 /// Set text colors according to the background.
 ///
 /// If the background value passed to the mixin happens to not be (just) a color,
@@ -59,13 +61,13 @@
         &:focus {
           color: color-pick-contrast(
             $background,
-            ($anchor-color-hover, scale-color($this-anchor-color, $lightness: -14%))
+            ($anchor-color-hover, color.scale($this-anchor-color, $lightness: -14%))
           );
         }
         &:active {
           color: color-pick-contrast(
             $background,
-            ($anchor-color-active, scale-color($this-anchor-color, $lightness: 6%))
+            ($anchor-color-active, color.scale($this-anchor-color, $lightness: 6%))
           );
         }
       }

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/_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/_reveal.scss

@@ -2,6 +2,8 @@
 // - - - - - - - - - - - - - - -
 // Custom overrides for the reveal component.
 
+@use "sass:map";
+
 .reveal {
   @extend #form-outer;
   overflow: visible;
@@ -41,7 +43,7 @@
   // Make large close button smaller on small screens.
   .close-button.large {
     @include breakpoint(small down) {
-      font-size: map-get($closebutton-size, medium);
+      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;
@@ -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;
@@ -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: (

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

@@ -3,8 +3,10 @@
 // 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 {

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,7 @@
 // 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
@@ -22,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%
@@ -59,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;

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

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

package/src/scss/form/_settings.scss

@@ -1,6 +1,10 @@
 // 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 * 0.5) !default;
 $form-spacing: rem-calc($base-line-height * 0.25) !default;
@@ -31,14 +35,14 @@ $button-border: $button-border-width solid transparent !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,10 +65,10 @@ $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;
@@ -76,7 +80,7 @@ $input-shadow-focus: inset 0 ($input-border-width * 0.5) $input-border-width $in
 // 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;
@@ -163,9 +167,9 @@ $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;

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)) * 0.5) {
+  @include breakpoint((map.get($breakpoints, large) + map.get($breakpoints, xlarge)) * 0.5) {
     ~ section .grid-container.narrow {
       > * {
         grid-column: 3 / -3;
@@ -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/main.scss

@@ -1,3 +1,5 @@
+// stylelint-disable no-invalid-position-at-import-rule
+
 @charset 'utf-8';
 
 // --------------------------------------------------------------------------

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;