Added new utility classes + minor typography changes

- Added new flexbox, display, vertical spacing, borders, radius, shadow and bg color utility classes;
- Added option to set custom breakpoint values;
- Added new shadow custom properties;
- Simplified way of handling vertical spacing in typography.

Co-Authored-By: Sebastiano Guerriero <sebastiano-guerriero@users.noreply.github.com>

Author: claudia-romano

gulpfile.js

@@ -58,6 +58,7 @@ gulp.task('browserSync', gulp.series(function (done) {
     server: {
       baseDir: 'main'
     },
+    notify: false
   })
   done();
 }));

main/assets/css/base/_breakpoints.scss

@@ -4,7 +4,7 @@ $breakpoints: (
   md: 64rem, // ~1024px
   lg: 80rem, // ~1280px
   xl: 90rem  // ~1440px
-);
+) !default;
 
 @mixin breakpoint($breakpoint, $logic: false) {
   @if( $logic ) {

main/assets/css/base/_forms.scss

@@ -36,30 +36,17 @@
 }
 
 // error message
-.form__msg-error {
-  background-color: var(--color-error, hsl(349, 75%, 51%));
-  color: var(--color-white, hsl(0, 0%, 100%));
+.form__msg-error, .form-error-msg { // .form__msg-error is fallback for older framework versions
+  color: var(--color-error, hsl(349, 75%, 51%));
   font-size: var(--text-sm, 0.833em);
-  @include fontSmooth;
-  padding: var(--space-xs);
-  margin-top: var(--space-sm);
-  border-radius: var(--radius-md, 0.25em);
+  margin-top: var(--space-xxs);
 
   // hide element
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: var(--space-sm);
-    top: 0;
-    transform: translateY(-100%);
-    @include triangle(up, 8px, var(--color-error));
-  }
 }
 
-.form__msg-error--is-visible {
+.form__msg-error--is-visible, .form-error-msg--is-visible {
   position: relative;
   clip: auto;
 }

main/assets/css/base/_shared-styles.scss

@@ -5,9 +5,11 @@
   --radius-lg: calc(var(--radius, 0.25em)*2);
 
   // box shadow
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1); // lower depth;
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1); // low depth;
-  --shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15); // medium depth
-  --shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1); // high depth
+  --shadow-md: 0 1px 8px rgba(0, 0, 0, .085), 0 8px 24px rgba(0, 0, 0, .1); // medium depth
+  --shadow-lg: 0 1px 8px rgba(0, 0, 0, .085), 0 16px 48px rgba(0, 0, 0, .085), 0 24px 60px rgba(0, 0, 0, .085); // high depth
+  --shadow-xl: 0 1px 8px rgba(0, 0, 0, .085), 0 16px 64px rgba(0, 0, 0, .15), 0 24px 100px rgba(0, 0, 0, .15); // higher depth
 
   // timing functions
   // credits: https://github.com/ai/easings.net

main/assets/css/base/_typography.scss

@@ -1,7 +1,7 @@
 :root {
   // line-height
-  --body-line-height: 1.4;
   --heading-line-height: 1.2;
+  --body-line-height: 1.4;
 }
 
 body {
@@ -63,24 +63,21 @@ u, .text-underline {
 }
 
 .text-component {
-  --component-body-line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
-  --component-heading-line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
-
   h1, h2, h3, h4 {
-    line-height: var(--component-heading-line-height, 1.2);
-    margin-bottom: calc(var(--space-xxxs) * var(--text-vspace-multiplier, 1));
+    line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
+    margin-bottom: calc(var(--space-unit) * 0.25 * var(--text-vspace-multiplier, 1));
   }
 
   h2, h3, h4 {
-    margin-top: calc(var(--space-sm) * var(--text-vspace-multiplier, 1));
+    margin-top: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1));
   }
 
   p, blockquote, ul li, ol li {
-    line-height: var(--component-body-line-height);
+    line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
   }
 
   ul, ol, p, blockquote, .text-component__block {
-    margin-bottom: calc(var(--space-sm) * var(--text-vspace-multiplier, 1));
+    margin-bottom: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1));
   }
 
   ul, ol {
@@ -102,16 +99,16 @@ u, .text-underline {
 
   figcaption {
     text-align: center;
-    margin-top: var(--space-xs);
+    margin-top: calc(var(--space-unit) * 0.5);
   }
 
   em {
     font-style: italic;
   }
 
   hr {
-    margin-top: calc(var(--space-lg) * var(--text-vspace-multiplier, 1));
-    margin-bottom: calc(var(--space-lg) * var(--text-vspace-multiplier, 1));
+    margin-top: calc(var(--space-unit) * 2 * var(--text-vspace-multiplier, 1));
+    margin-bottom: calc(var(--space-unit) * 2 * var(--text-vspace-multiplier, 1));
     margin-left: auto;
     margin-right: auto;
   }
@@ -143,34 +140,34 @@ u, .text-underline {
 
   .text-component__block--left {
     float: left;
-    margin-right: calc(var(--space-sm) * var(--text-vspace-multiplier, 1));
+    margin-right: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1));
   }
 
   .text-component__block--right {
     float: right;
-    margin-left: calc(var(--space-sm) * var(--text-vspace-multiplier, 1));
+    margin-left: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1));
   }
 }
 
 // outset content
 @include breakpoint(xl) {
   .text-component__block--outset {
-    width: calc(100% + 2 * var(--space-xxl));
+    width: calc(100% + 10.5 * var(--space-unit));
 
     img {
       width: 100%;
     }
   }
 
   .text-component__block--outset:not(.text-component__block--right) {
-    margin-left: calc(-1 * var(--space-xxl));
+    margin-left: calc(-5.25 * var(--space-unit));
   }
 
   .text-component__block--left, .text-component__block--right {
     width: 50%;
   }
 
   .text-component__block--right.text-component__block--outset {
-    margin-right: calc(-1 * var(--space-xxl));
+    margin-right: calc(-5.25 * var(--space-unit));
   }
 }