From aa99b01e5fc22ce0daf5f87cbd299b09ec0deecc Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Thu, 17 Oct 2024 23:02:57 +0200
Subject: [PATCH] fix: remove margin reset (#3667)

Resetting the margin on all elements breaks some default styles like the
native dialog placement.
---
 .changeset/shiny-ears-care.md             |  5 +++++
 packages/styles/src/elements/heading.scss | 22 ++++++++++------------
 packages/styles/src/elements/reset.scss   |  8 +-------
 3 files changed, 16 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/shiny-ears-care.md

diff --git a/.changeset/shiny-ears-care.md b/.changeset/shiny-ears-care.md
new file mode 100644
index 0000000000..4897776f3e
--- /dev/null
+++ b/.changeset/shiny-ears-care.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated margin styles according to the contribution guidelines. Content elements like headings and paragraphs no longer have a margin top if they're the first child and no margin bottom if they're the last child in a container.
diff --git a/packages/styles/src/elements/heading.scss b/packages/styles/src/elements/heading.scss
index f7861198e6..950d8a9a72 100644
--- a/packages/styles/src/elements/heading.scss
+++ b/packages/styles/src/elements/heading.scss
@@ -3,20 +3,18 @@
 
 tokens.$default-map: elements.$post-heading;
 
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
+// :is keeps specificity which is handy here
+:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
   line-height: tokens.get('heading-line-height');
   font-weight: tokens.get('heading-font-weight');
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
 }
 
 h1,
diff --git a/packages/styles/src/elements/reset.scss b/packages/styles/src/elements/reset.scss
index 7df818bed2..0e2961bc26 100644
--- a/packages/styles/src/elements/reset.scss
+++ b/packages/styles/src/elements/reset.scss
@@ -9,13 +9,6 @@
   box-sizing: border-box;
 }
 
-/*
-  Remove default margin
-*/
-* {
-  margin: 0;
-}
-
 /*
   Typographic tweaks!
   - Add accessible line-height
@@ -23,6 +16,7 @@
 */
 body {
   -webkit-font-smoothing: antialiased;
+  margin: 0;
 }
 
 /*