diff --git a/.changeset/sixty-yaks-behave.md b/.changeset/sixty-yaks-behave.md
new file mode 100644
index 000000000..c91d286e2
--- /dev/null
+++ b/.changeset/sixty-yaks-behave.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+fix styling of data table without toolbar
diff --git a/.changeset/unlucky-coins-hear.md b/.changeset/unlucky-coins-hear.md
new file mode 100644
index 000000000..2b58fbfa4
--- /dev/null
+++ b/.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 `` component for text content
+that is inside your card.
+
+For `p` tags you can simply use `My text`
+
+If you have headlines in your card you can change which tag the
+component will render like this:
+
+```
+My headline
+```
diff --git a/packages/component-library/src/components/layout/mt-card/mt-card.vue b/packages/component-library/src/components/layout/mt-card/mt-card.vue
index 8f25d1451..dc1f3a9ac 100644
--- a/packages/component-library/src/components/layout/mt-card/mt-card.vue
+++ b/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,31 +196,11 @@ 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;
@@ -228,7 +208,7 @@ const cardClasses = computed(() => ({
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);
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
index 31db85abb..0bedd259d 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
@@ -2017,6 +2017,7 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding
.mt-card__toolbar {
flex-direction: column;
gap: 0;
+ padding: 0;
}
.mt-data-table__search {
@@ -2062,6 +2063,11 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding
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