From 7255d25f6834a208c0ed44636356cc260f6ab6ba Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 27 Sep 2023 17:38:23 +0200
Subject: 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
---
 src/styles/abstracts/_placeholders.scss          |  1 +
 src/styles/abstracts/placeholders/_headings.scss | 54 ++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/styles/abstracts/placeholders/_headings.scss

(limited to 'src/styles/abstracts')

diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index 7729e84..76fdbd6 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -1,5 +1,6 @@
 @forward "./placeholders/animations";
 @forward "./placeholders/buttons";
 @forward "./placeholders/clearfix";
+@forward "./placeholders/headings";
 @forward "./placeholders/layout";
 @forward "./placeholders/list";
diff --git a/src/styles/abstracts/placeholders/_headings.scss b/src/styles/abstracts/placeholders/_headings.scss
new file mode 100644
index 0000000..a836c74
--- /dev/null
+++ b/src/styles/abstracts/placeholders/_headings.scss
@@ -0,0 +1,54 @@
+@use "../functions" as fun;
+
+%heading {
+  margin: 0;
+  color: var(--color-primary-dark);
+  font-family: var(--font-family-secondary);
+  font-weight: 500;
+  letter-spacing: 0.01ex;
+}
+
+%h1 {
+  @extend %heading;
+
+  font-size: var(--font-size-3xl);
+}
+
+%h2 {
+  @extend %heading;
+
+  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 {
+  @extend %heading;
+
+  font-size: var(--font-size-xl);
+}
+
+%h4 {
+  @extend %heading;
+
+  font-size: var(--font-size-lg);
+}
+
+%h5 {
+  @extend %heading;
+
+  font-size: var(--font-size-md);
+  font-weight: 600;
+}
+
+%h6 {
+  @extend %heading;
+
+  font-size: var(--font-size-md);
+}
-- 
cgit v1.2.3