Merge branch 'master' into feature/wysiwyg

assets/styles/components/_heading.scss

@@ -2,30 +2,78 @@
 // Components / Headings
 // ==========================================================================
 
+// Font sizes
+// ==========================================================================
+:root {
+    // Default
+    --font-size-h1: #{responsive-value(38px, 90px, $from-xl)};
+    --font-size-h2: #{responsive-value(34px, 72px, $from-xl)};
+    --font-size-h3: #{responsive-value(28px, 54px, $from-xl)};
+    --font-size-h4: #{responsive-value(24px, 40px, $from-xl)};
+    --font-size-h5: #{responsive-value(20px, 30px, $from-xl)};
+    --font-size-h6: #{responsive-value(18px, 23px, $from-xl)};
+}
+
+// Mixins
+// ==========================================================================
+
+@mixin heading {
+    font-family: ff('sans');
+    font-weight: $font-weight-medium;
+}
+
+@mixin heading-h1 {
+    font-size: var(--font-size-h1);
+    line-height: 1.1;
+}
+
+@mixin heading-h2 {
+    font-size: var(--font-size-h2);
+    line-height: 1.1;
+}
+
+@mixin heading-h3 {
+    font-size: var(--font-size-h3);
+    line-height: 1.1;
+}
+
+@mixin heading-h4 {
+    font-size: var(--font-size-h4);
+    line-height: 1.2;
+}
+
+@mixin heading-h5 {
+    font-size: var(--font-size-h5);
+    line-height: 1.2;
+}
+
+@mixin heading-h6 {
+    font-size: var(--font-size-h6);
+    line-height: 1.4;
+}
+
+// Styles
+// ==========================================================================
+
 .c-heading {
-    margin-bottom: rem(30px);
+    @include heading;
 
     &.-h1 {
-        font-size: var(--font-size-h1);
+        @include heading-h1;
     }
-
     &.-h2 {
-        font-size: var(--font-size-h2);
+        @include heading-h2;
     }
-
     &.-h3 {
-        font-size: var(--font-size-h3);
+        @include heading-h3;
     }
-
     &.-h4 {
-        font-size: var(--font-size-h4);
+        @include heading-h4;
     }
-
     &.-h5 {
-        font-size: var(--font-size-h5);
+        @include heading-h5;
     }
-
     &.-h6 {
-        font-size: var(--font-size-h6);
+        @include heading-h6;
     }
 }

assets/styles/components/_text.scss

@@ -0,0 +1,53 @@
+// ==========================================================================
+// Components / Texts
+// ==========================================================================
+
+// Font sizes
+// ==========================================================================
+:root {
+    --font-size-body-regular:   #{responsive-value(15px, 17px, $from-lg)};
+    --font-size-body-medium:    #{responsive-value(18px, 23px, $from-lg)};
+    --font-size-body-small:     #{responsive-value(13px, 16px, $from-lg)};
+}
+
+// Mixins
+// ==========================================================================
+@mixin text {
+    font-family: ff('sans');
+}
+
+@mixin body-regular {
+    font-size: var(--font-size-body-regular);
+    font-weight: $font-weight-normal;
+    line-height: 1.2;
+}
+
+@mixin body-medium {
+    font-size: var(--font-size-body-medium);
+    font-weight: $font-weight-normal;
+    line-height: 1.2;
+}
+
+@mixin body-small {
+    font-size: var(--font-size-body-small);
+    font-weight: $font-weight-normal;
+    line-height: 1.2;
+}
+
+// Styles
+// ==========================================================================
+.c-text {
+    @include text;
+
+    &.-body-regular {
+        @include body-regular;
+    }
+
+    &.-body-medium {
+        @include body-medium;
+    }
+
+    &.-body-small {
+        @include body-small;
+    }
+}

assets/styles/main.scss

@@ -54,6 +54,7 @@
 // ==========================================================================
 
 @import "components/heading";
+@import "components/text";
 @import "components/button";
 @import "components/form";
 @import "components/wysiwyg";

assets/styles/settings/_config.variables.scss

@@ -12,19 +12,6 @@
     // Container
     --container-width:  calc(100% - 2 * var(--grid-margin));
 
-    // Font sizes
-    --font-size-h1:     #{responsive-type(36px, 72px, 1400px)};
-    --font-size-h2:     #{rem(28px)};
-    --font-size-h3:     #{rem(24px)};
-    --font-size-h4:     #{rem(20px)};
-    --font-size-h5:     #{rem(18px)};
-    --font-size-h6:     #{rem(16px)};
-
-    // // Colors
-    // @each $color, $value in $colors {
-    //     --color-#{"" + $color}: #{$value};
-    // }
-
     @media (min-width: $from-sm) {
         --grid-columns:     #{$base-column-nb};
         --grid-gutter:      #{rem(16px)};

assets/styles/tools/_functions.scss

@@ -196,11 +196,11 @@ $context: 'frontend' !default;
 //
 // ```scss
 // .c-heading.-h1 {
-//     font-size: responsive-type(30px, 60px, 1800);
+//     font-size: responsive-value(30px, 60px, 1800);
 // }
 //
 // .c-heading.-h2 {
-//     font-size: responsive-type(20px, 40px, $from-xl);
+//     font-size: responsive-value(20px, 40px, $from-xl);
 // }
 // ```
 //
@@ -208,7 +208,7 @@ $context: 'frontend' !default;
 // @param  {number} $max-size   - Maximum font size in pixels.
 // @param  {number} $breakpoint - Maximum breakpoint.
 // @return {function<number, function<number>, number>}
-@function responsive-type($min-size, $max-size, $breakpoint) {
+@function responsive-value($min-size, $max-size, $breakpoint) {
     $delta: math.div($max-size, $breakpoint);
     @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
 }