From 74808e000e33f98d95ec867486be049264bb7433 Mon Sep 17 00:00:00 2001
From: Muhammad Bashir <bashirkarimi5@gmail.com>
Date: Mon, 16 Sep 2024 15:49:52 +0200
Subject: [PATCH] feat: add CSS reset style (#3545)

Co-authored-by: karimim <muhammad.karimi@post.ch>
---
 .changeset/breezy-cups-add.md            |   5 +
 packages/styles/src/basics.scss          |   1 +
 packages/styles/src/elements/_index.scss |   1 +
 packages/styles/src/elements/reset.scss  | 121 +++++++++++++++++++++++
 packages/styles/src/index.scss           |   1 +
 packages/styles/src/intranet.scss        |   1 +
 packages/styles/src/post-external.scss   |   1 +
 packages/styles/src/post-internal.scss   |   1 +
 8 files changed, 132 insertions(+)
 create mode 100644 .changeset/breezy-cups-add.md
 create mode 100644 packages/styles/src/elements/_index.scss
 create mode 100644 packages/styles/src/elements/reset.scss

diff --git a/.changeset/breezy-cups-add.md b/.changeset/breezy-cups-add.md
new file mode 100644
index 0000000000..26f0487907
--- /dev/null
+++ b/.changeset/breezy-cups-add.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+styles: Added reset styles
diff --git a/packages/styles/src/basics.scss b/packages/styles/src/basics.scss
index faccea9195..7ff01c46bf 100644
--- a/packages/styles/src/basics.scss
+++ b/packages/styles/src/basics.scss
@@ -2,6 +2,7 @@
 
 @use './lic/bootstrap-license';
 
+@use './elements';
 @use 'components/base';
 @use 'components/elevation';
 @use 'components/type';
diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
new file mode 100644
index 0000000000..ee04d5b902
--- /dev/null
+++ b/packages/styles/src/elements/_index.scss
@@ -0,0 +1 @@
+@use 'reset';
diff --git a/packages/styles/src/elements/reset.scss b/packages/styles/src/elements/reset.scss
new file mode 100644
index 0000000000..acf69882d4
--- /dev/null
+++ b/packages/styles/src/elements/reset.scss
@@ -0,0 +1,121 @@
+/* === Source: Josh Comeau, https://www.joshwcomeau.com/css/custom-css-reset/ (adapted) === */
+
+/*
+  Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/*
+  Remove default margin
+*/
+* {
+  margin: 0;
+}
+
+/*
+  Typographic tweaks!
+  - Add accessible line-height
+  - Improve text rendering
+*/
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+/*
+  Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/*
+  Remove built-in form typography styles
+*/
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+/*
+  Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+/* === Source: https://github.com/necolas/normalize.css/blob/master/normalize.css === */
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+  Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+*/
+abbr[title] {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
diff --git a/packages/styles/src/index.scss b/packages/styles/src/index.scss
index bba9a0b76f..7744cbf858 100644
--- a/packages/styles/src/index.scss
+++ b/packages/styles/src/index.scss
@@ -2,6 +2,7 @@
 
 @use './lic/bootstrap-license';
 
+@use './elements';
 @use './components';
 
 // Portal specific styles
diff --git a/packages/styles/src/intranet.scss b/packages/styles/src/intranet.scss
index 89d55a61b9..65d9fbb6ae 100644
--- a/packages/styles/src/intranet.scss
+++ b/packages/styles/src/intranet.scss
@@ -2,5 +2,6 @@
 
 @use './lic/bootstrap-license';
 
+@use './elements';
 @use 'components';
 @use 'components/intranet-header';
diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss
index f989a86310..cc042736d1 100644
--- a/packages/styles/src/post-external.scss
+++ b/packages/styles/src/post-external.scss
@@ -1,2 +1,3 @@
 @use './post-tokens-external';
+@use './elements';
 @use './components';
diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss
index e00158f349..41a9ca2447 100644
--- a/packages/styles/src/post-internal.scss
+++ b/packages/styles/src/post-internal.scss
@@ -1,2 +1,3 @@
 @use './post-tokens-internal';
+@use './elements';
 @use './components';