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, 3 insertions, 57 deletions

diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index dc958c4..11b506f 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -1,61 +1,5 @@
 @use "../abstracts/functions" as fun;
 
-h1 {
-  font-size: var(--font-size-3xl);
-}
-
-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);
-  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
-}
-
-h3 {
-  font-size: var(--font-size-xl);
-}
-
-h4 {
-  font-size: var(--font-size-lg);
-}
-
-h5 {
-  font-size: var(--font-size-md);
-  font-weight: 600;
-}
-
-h6 {
-  font-size: var(--font-size-md);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: var(--color-primary-dark);
-  font-family: var(--font-family-secondary);
-  font-weight: 500;
-  letter-spacing: 0.01ex;
-  margin: 0 0 var(--spacing-sm);
-
-  * + {
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin-top: var(--spacing-md);
-    }
-  }
-}
-
 p {
   font-size: var(--font-size-md);
   margin: 0 0 var(--spacing-sm);
@@ -132,7 +76,9 @@ a {
   color: var(--color-primary);
   text-decoration-thickness: 0.15em;
   text-underline-offset: 20%;
-  transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s;
+  transition:
+    all 0.3s linear 0s,
+    text-decoration 0.18s ease-in-out 0s;
 
   &:hover {
     color: var(--color-primary-light);