feat: add CSS reset style (#3545)

Co-authored-by: karimim <[email protected]>

.changeset/breezy-cups-add.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+styles: Added reset styles

packages/styles/src/basics.scss

@@ -2,6 +2,7 @@
 
 @use './lic/bootstrap-license';
 
+@use './elements';
 @use 'components/base';
 @use 'components/elevation';
 @use 'components/type';

packages/styles/src/elements/_index.scss

@@ -0,0 +1 @@
+@use 'reset';

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;
+}

packages/styles/src/index.scss

@@ -2,6 +2,7 @@
 
 @use './lic/bootstrap-license';
 
+@use './elements';
 @use './components';
 
 // Portal specific styles

packages/styles/src/intranet.scss

@@ -2,5 +2,6 @@
 
 @use './lic/bootstrap-license';
 
+@use './elements';
 @use 'components';
 @use 'components/intranet-header';

packages/styles/src/post-external.scss

@@ -1,2 +1,3 @@
 @use './post-tokens-external';
+@use './elements';
 @use './components';

packages/styles/src/post-internal.scss

@@ -1,2 +1,3 @@
 @use './post-tokens-internal';
+@use './elements';
 @use './components';