From 353a38915d6be5828a3e384f2860199b835fbfa2 Mon Sep 17 00:00:00 2001
From: Lucas Bigot <fr.lucas.bigot@gmail.com>
Date: Wed, 3 Apr 2024 08:28:57 -0400
Subject: [PATCH] Update default headings (#172)

* Move font-size css var into dedicated heading file + Add default mixins

* Rename responsive-type for a more generic name
---
 assets/styles/components/_heading.scss        | 72 +++++++++++++++----
 assets/styles/settings/_config.variables.scss | 13 ----
 assets/styles/tools/_functions.scss           |  6 +-
 3 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/assets/styles/components/_heading.scss b/assets/styles/components/_heading.scss
index 11ec7bb..354f752 100644
--- a/assets/styles/components/_heading.scss
+++ b/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;
     }
 }
diff --git a/assets/styles/settings/_config.variables.scss b/assets/styles/settings/_config.variables.scss
index ef4d153..c2e384a 100644
--- a/assets/styles/settings/_config.variables.scss
+++ b/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)};
diff --git a/assets/styles/tools/_functions.scss b/assets/styles/tools/_functions.scss
index eb4e2c6..d61518e 100644
--- a/assets/styles/tools/_functions.scss
+++ b/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);
 }