refactor(components): rewrite Heading component

* remove `alignment` and `withMargin` props (consumer should handle
that)
* move styles to Sass placeholders to avoid repeats with headings
coming from WordPress
* refactor some other components that depend on Heading to avoid ESlint
errors

1 files changed, 9 insertions, 28 deletions

diff --git a/src/styles/pages/partials/_article-headings.scss b/src/styles/pages/partials/_article-headings.scss
index dfeceb7..7a273e4 100644
--- a/src/styles/pages/partials/_article-headings.scss
+++ b/src/styles/pages/partials/_article-headings.scss
@@ -1,42 +1,28 @@
-@use "../../abstracts/functions" as fun;
+@use "../../abstracts/placeholders";
 
 @mixin styles {
   h1 {
-    font-size: var(--font-size-3xl);
-    font-weight: 500;
+    @extend %h1;
   }
 
   h2 {
-    padding-bottom: fun.convert-px(3);
-    background: linear-gradient(
-        to top,
-        var(--color-primary-dark) 0.3rem,
-        transparent 0.3rem
-      )
-      0 0 / 3rem 100% no-repeat;
-    font-size: var(--font-size-2xl);
-    font-weight: 500;
-    text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
+    @extend %h2;
   }
 
   h3 {
-    font-size: var(--font-size-xl);
-    font-weight: 500;
+    @extend %h3;
   }
 
   h4 {
-    font-size: var(--font-size-lg);
-    font-weight: 500;
+    @extend %h4;
   }
 
   h5 {
-    font-size: var(--font-size-md);
-    font-weight: 600;
+    @extend %h5;
   }
 
   h6 {
-    font-size: var(--font-size-md);
-    font-weight: 500;
+    @extend %h6;
   }
 
   h1,
@@ -45,13 +31,8 @@
   h4,
   h5,
   h6 {
-    color: var(--color-primary-dark);
-    font-family: var(--font-family-secondary);
-    letter-spacing: 0.01ex;
-    margin: 0 0 var(--spacing-sm);
-
-    & + & {
-      margin-top: var(--spacing-md);
+    &:not(:first-child) {
+      margin-block: var(--spacing-sm);
     }
   }
 }