chore: foundations typography heading h1 h6 (#3534)

Co-authored-by: karimim <[email protected]> Co-authored-by: Philipp Gfeller <[email protected]> Co-authored-by: Alizé Debray <[email protected]>
swisspost · Sep 30, 2024 · 5c4bbcd · 5c4bbcd
1 parent d6033c5
commit 5c4bbcd
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 144 deletions.
diff --git a/.changeset/eleven-keys-work.md b/.changeset/eleven-keys-work.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Updated the style of headings (h1-h6).
diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
@@ -1,2 +1,3 @@
 @use 'reset';
 @use 'body';
+@use 'heading';
diff --git a/packages/styles/src/elements/heading.scss b/packages/styles/src/elements/heading.scss
@@ -0,0 +1,62 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-heading;
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  line-height: tokens.get('post-heading', 'line-height');
+  font-weight: tokens.get('post-heading', 'font-weight');
+}
+
+h1,
+.h1 {
+  font-size: tokens.get('post-h1', 'font-size');
+  margin-block-start: tokens.get('post-h1', 'margin-block-start');
+  margin-block-end: tokens.get('post-h1', 'margin-block-end');
+}
+
+h2,
+.h2 {
+  font-size: tokens.get('post-h2', 'font-size');
+  margin-block-start: tokens.get('post-h2', 'margin-block-start');
+  margin-block-end: tokens.get('post-h2', 'margin-block-end');
+}
+
+h3,
+.h3 {
+  font-size: tokens.get('post-h3', 'font-size');
+  margin-block-start: tokens.get('post-h3', 'margin-block-start');
+  margin-block-end: tokens.get('post-h3', 'margin-block-end');
+}
+
+h4,
+.h4 {
+  font-size: tokens.get('post-h4', 'font-size');
+  margin-block-start: tokens.get('post-h4', 'margin-block-start');
+  margin-block-end: tokens.get('post-h4', 'margin-block-end');
+}
+
+h5,
+.h5 {
+  font-size: tokens.get('post-h5', 'font-size');
+  margin-block-start: tokens.get('post-h5', 'margin-block-start');
+  margin-block-end: tokens.get('post-h5', 'margin-block-end');
+}
+
+h6,
+.h6 {
+  font-size: tokens.get('post-h6', 'font-size');
+  margin-block-start: tokens.get('post-h6', 'margin-block-start');
+  margin-block-end: tokens.get('post-h6', 'margin-block-end');
+}
diff --git a/packages/styles/src/layouts/portal/_type.scss b/packages/styles/src/layouts/portal/_type.scss
diff --git a/packages/styles/src/layouts/portal/index.scss b/packages/styles/src/layouts/portal/index.scss
@@ -1,5 +1,2 @@
 @use './grid';
 @use './subnavigation';
-@use './type';
-
-@include type.styles;
diff --git a/packages/styles/src/variables/_heading.scss b/packages/styles/src/variables/_heading.scss
diff --git a/packages/styles/src/variables/_index.scss b/packages/styles/src/variables/_index.scss
@@ -8,7 +8,6 @@
 @forward 'commons';
 @forward 'elevation';
 @forward 'grid';
-@forward 'heading';
 @forward 'icons';
 @forward 'options';
 @forward 'spacing';