Fix data table without header

.changeset/sixty-yaks-behave.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+fix styling of data table without toolbar

.changeset/unlucky-coins-hear.md

@@ -0,0 +1,17 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Removed default typograhpy styling of card children
+
+To migrate you can use the `<mt-text />` component for text content
+that is inside your card.
+
+For `p` tags you can simply use `<mt-text>My text</mt-text>`
+
+If you have headlines in your card you can change which tag the
+component will render like this:
+
+```
+<mt-text as="h3" size="m">My headline</mt-text>
+```

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

@@ -177,7 +177,7 @@ const cardClasses = computed(() => ({
 
 .mt-card {
   max-width: 60rem;
-  margin: 0 auto 2.5rem;
+  margin: 0 auto var(--scale-size-40);
   position: relative;
   background: var(--color-elevation-surface-raised);
   border: 1px solid var(--color-border-primary-default);
@@ -196,39 +196,19 @@ const cardClasses = computed(() => ({
 .mt-card__content {
   display: flow-root;
   flex-basis: 100%;
-  padding: 1.5rem;
+  padding: var(--scale-size-24);
   background-clip: padding-box;
   position: relative;
   color: var(--color-text-primary-default);
 
-  & > :where(h1, h2, h3, h4, h5, h6) {
-    font-weight: normal;
-  }
-
-  & > h1 {
-    font-size: 1.5rem;
-  }
-
-  & > h2 {
-    font-size: 1.375rem;
-  }
-
-  & > h3 {
-    font-size: 1.25rem;
-  }
-
-  & > :where(h4, h5, h6) {
-    font-size: 1.125rem;
-  }
-
   & a.mt-card__quick-link {
     display: grid;
     grid-auto-flow: column;
     grid-column-gap: 0.375rem;
     align-items: center;
     text-decoration: none;
     color: var(--color-text-brand-default);
-    font-size: 0.875rem;
+    font-size: var(--font-size-xs);
 
     &:hover {
       color: var(--color-text-brand-hover);
@@ -271,7 +251,7 @@ const cardClasses = computed(() => ({
 .mt-card__titles--has-inheritance-toggle {
   display: grid;
   grid-template-columns: min-content 1fr;
-  column-gap: 0.25rem;
+  column-gap: var(--scale-size-4);
   grid-template-areas:
     "inheritance title"
     "subtitle subtitle";
@@ -308,8 +288,8 @@ const cardClasses = computed(() => ({
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
-  gap: 0.75rem;
-  padding: 1.5rem;
+  gap: var(--scale-size-12);
+  padding: var(--scale-size-24);
   border-bottom: 1px solid var(--color-border-primary-default);
 }
 
@@ -320,8 +300,8 @@ const cardClasses = computed(() => ({
 .mt-card__toolbar {
   display: flex;
   flex-basis: auto;
-  gap: 0.5rem;
-  padding: 1.25rem 1.5rem 1rem 1.5rem;
+  gap: var(--scale-size-8);
+  padding: var(--scale-size-20) var(--scale-size-24) var(--scale-size-16) var(--scale-size-24);
 
   &:empty {
     display: none;
@@ -331,8 +311,8 @@ const cardClasses = computed(() => ({
 .mt-card__avatar {
   overflow: hidden;
   border-radius: var(--border-radius-xs);
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--scale-size-40);
+  height: var(--scale-size-40);
 
   & img {
     width: 100%;
@@ -364,7 +344,7 @@ const cardClasses = computed(() => ({
 }
 
 .mt-card__footer {
-  --mt-card-footer-padding: 1.5rem;
+  --mt-card-footer-padding: var(--scale-size-24);
 
   --mt-inset-block-start: var(--mt-card-footer-padding);
   --mt-inset-block-end: var(--mt-card-footer-padding);

packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue

@@ -560,8 +560,8 @@
   onMounted,
   onBeforeUnmount,
   ref,
   getCurrentInstance,
   onBeforeMount,
 } from "vue";
 import MtCard from "../../layout/mt-card/mt-card.vue";
 import MtButton from "../../form/mt-button/mt-button.vue";
@@ -2017,6 +2017,7 @@
   .mt-card__toolbar {
     flex-direction: column;
     gap: 0;
+    padding: 0;
   }
 
   .mt-data-table__search {
@@ -2062,6 +2063,11 @@
     display: flex;
     align-items: center;
     gap: var(--scale-size-8);
+    padding: var(--scale-size-20) var(--scale-size-24) var(--scale-size-16) var(--scale-size-24);
+
+    &:empty {
+      display: none;
+    }
   }
 
   // TODO: improve the name of this css selector