@moreonion/foundist 2.0.6 → 2.1.1

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,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)) / 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';
 
 // --------------------------------------------------------------------------

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;