update global styles

shopware · Oct 10, 2024 · ad5171e · ad5171e
1 parent 78e08dc
commit ad5171e
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 55 deletions.
diff --git a/.changeset/warm-dots-worry.md b/.changeset/warm-dots-worry.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Updated global styles
diff --git a/packages/component-library/src/components/assets/scss/global.scss b/packages/component-library/src/components/assets/scss/global.scss
@@ -1,73 +1,86 @@
-@import "./variables.scss";
-
-* {
+/* Box sizing rules */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
-  margin: 0;
-  padding: 0;
 }
 
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core body defaults */
 body {
-  font-family: $font-family-default;
-  font-size: $font-size-default;
-  color: $color-menu-start;
-  background: $color-gray-50;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+  line-height: 1.5;
 }
 
-@supports (font-variation-settings: normal) {
-  body {
-    font-family: $font-family-variables;
-    font-feature-settings: $font-family-default-feature-settings;
-  }
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
 }
 
-.mt-drag-select-box {
-  position: absolute;
-  background: $color-drag-select-box;
-  z-index: $z-index-drag-select-box;
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
 }
 
-.link {
-  display: inline-block;
-  color: $color-shopware-brand-500;
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
 }
 
-/* style inline external links */
-a[target="_blank"]:not(.mt-external-link, .mt-internal-link, .mt-button) {
-  display: inline-block;
-  position: relative;
-  color: $color-shopware-brand-500;
-  font-size: $font-size-small;
-  text-decoration: underline;
-  cursor: pointer;
-  word-break: break-word;
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
 
-  &::after {
-    content: "";
-    display: inline-block;
-    width: 0.715em;
-    height: 0.715em;
-    position: relative;
-    margin-left: 0.285em;
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A");
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: 0.715em 0.715em;
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A");
-    mask-repeat: no-repeat;
-    mask-size: 0.715em 0.715em;
-    background-color: $color-shopware-brand-500;
-  }
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
 }
 
-button {
-  appearance: none;
-  padding: 0;
-  border: none;
-  font: inherit;
-  color: inherit;
-  background: none;
-  cursor: pointer;
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
 }
 
 .visually-hidden {