deprecate large prop of card component

.changeset/thick-teachers-sleep.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Update css reset

packages/component-library/src/components/assets/scss/all.scss

@@ -1,8 +1,9 @@
 @import "fonts/inter.font";
 @import "variables";
 @import "typography";
-@import "global.scss";
+@import "global.css";
 @import "directives/tooltip";
 @import "directives/dragdrop";
+@import "utilities.css";
 @import "@shopware-ag/meteor-tokens/administration/light.css";
 @import "@shopware-ag/meteor-tokens/administration/dark.css";

packages/component-library/src/components/assets/scss/global.scss → packages/component-library/src/components/assets/scss/global.css

@@ -1,44 +1,128 @@
-@import "./variables.scss";
-
-* {
+/* Box sizing rules */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
+}
+
+/* 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: 0;
-  padding: 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;
-}
-
-@supports (font-variation-settings: normal) {
-  body {
-    font-family: $font-family-variables;
-    font-feature-settings: $font-family-default-feature-settings;
-  }
+  min-height: 100vh;
+  line-height: 1.5;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-primary-default);
 }
 
-.mt-drag-select-box {
-  position: absolute;
-  background: $color-drag-select-box;
-  z-index: $z-index-drag-select-box;
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
 }
 
-.link {
-  display: inline-block;
-  color: $color-shopware-brand-500;
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* Set typograhpy styles for headlines */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-headings);
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Reset button styles completely */
+button {
+  appearance: none;
+  padding: 0;
+  border: none;
+  font: inherit;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+}
+
+input {
+  all: unset;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
 }
 
 /* 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;
+  color: var(--color-text-brand-default);
+  font-size: var(--font-size-xs);
   text-decoration: underline;
   cursor: pointer;
   word-break: break-word;
@@ -56,27 +140,6 @@ a[target="_blank"]:not(.mt-external-link, .mt-internal-link, .mt-button) {
     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;
+    background-color: var(--color-icon-brand-default);
   }
 }
-
-button {
-  appearance: none;
-  padding: 0;
-  border: none;
-  font: inherit;
-  color: inherit;
-  background: none;
-  cursor: pointer;
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}

packages/component-library/src/components/assets/scss/utilities.css

@@ -0,0 +1,10 @@
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

packages/component-library/src/components/layout/mt-card/mt-card.vue

@@ -143,6 +143,7 @@ export default defineComponent({
 
     /**
      * Render the card in a large size
+     * @depracated v4.0.0 - will be removed without replacement
      */
     large: {
       type: Boolean,
@@ -312,6 +313,7 @@ export default defineComponent({
   }
 }
 
+/* @depracated v4.0.0 - will be removed without replacement */
 .mt-card--large {
   max-width: 83.125rem;