refactor(component-library): automatically replace rem spacing with t…

…okens
shopware · Feb 5, 2025 · e2c9626 · e2c9626
1 parent a87c41d
commit e2c9626
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 42 deletions.
diff --git a/...s/component-library/src/components/feedback-indicator/mt-skeleton-bar/mt-skeleton-bar.vue b/...s/component-library/src/components/feedback-indicator/mt-skeleton-bar/mt-skeleton-bar.vue
@@ -6,14 +6,14 @@
 
 <style scoped>
 .mt-skeleton-bar {
-  height: 2rem;
+  height: var(--scale-size-32);
   width: 100%;
   background-color: var(--color-background-primary-disabled);
   overflow: hidden;
   border-radius: var(--border-radius-xs);
 
   &:not(:last-child) {
-    margin-bottom: 2rem;
+    margin-bottom: var(--scale-size-32);
   }
 }
 

diff --git a/packages/component-library/src/components/feedback-indicator/mt-toast/mt-toast.vue b/packages/component-library/src/components/feedback-indicator/mt-toast/mt-toast.vue
@@ -159,7 +159,7 @@ function onMouseLeave() {
     flex: 1;
     display: flex;
     justify-content: flex-end;
-    padding-right: 1rem;
+    padding-right: var(--scale-size-16);
 
     .mt-toast-notification {
       display: flex;

diff --git a/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue b/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
@@ -469,7 +469,7 @@ $mt-field-transition:
   .mt-field__label .is--required::after {
     content: "*";
     color: var(--color-icon-brand-default);
-    margin-left: 0.25rem;
+    margin-left: var(--scale-size-4);
   }
 
   &.is--inherited {

diff --git a/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue b/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue
@@ -66,7 +66,7 @@ const classes = computed(() => [
 <style scoped>
 .mt-field-label {
   display: flex;
-  column-gap: 0.25rem;
+  column-gap: var(--scale-size-4);
   align-items: center;
   color: var(--color-text-primary-default);
   font-family: var(--font-family-body);
@@ -89,7 +89,7 @@ const classes = computed(() => [
 }
 
 .mt-field-label__inheritance-switch {
-  margin-right: 0.25rem;
+  margin-right: var(--scale-size-4);
 
   &:focus-visible {
     outline-offset: 0.25rem;

diff --git a/packages/component-library/src/components/form/mt-button/mt-button.vue b/packages/component-library/src/components/form/mt-button/mt-button.vue
@@ -109,7 +109,7 @@ const isInsideTooltip = useIsInsideTooltip();
   display: grid;
   grid-auto-flow: column;
   align-items: center;
-  column-gap: 0.5rem;
+  column-gap: var(--scale-size-8);
 }
 
 .mt-button__content--hidden {
@@ -318,19 +318,19 @@ const isInsideTooltip = useIsInsideTooltip();
 }
 
 .mt-button--default {
-  padding-inline: 1rem;
+  padding-inline: var(--scale-size-16);
   font-size: var(--font-size-xs);
   min-height: 2.5rem;
 }
 
 .mt-button--default.mt-button-square {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--scale-size-40);
+  height: var(--scale-size-40);
 }
 
 .mt-button--large {
-  padding-left: 1.75rem;
-  padding-right: 1.75rem;
+  padding-left: var(--scale-size-28);
+  padding-right: var(--scale-size-28);
   min-height: 3rem;
   font-size: var(--font-size-2xs);
 }

diff --git a/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue b/packages/component-library/src/components/form/mt-datepicker/mt-datepicker.vue
@@ -308,7 +308,7 @@ export default defineComponent({
 
 .dp__input {
   height: var(--scale-size-48);
-  padding-left: 1rem !important;
+  padding-left: var(--scale-size-16) !important;
   border-radius: var(--border-radius-xs);
   font: inherit;
   color: var(--color-text-secondary-default);
@@ -363,7 +363,7 @@ export default defineComponent({
 }
 
 .dp__instance_calendar {
-  padding: 0.5rem !important;
+  padding: var(--scale-size-8) !important;
 }
 
 .dp__menu_inner {

diff --git a/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue b/packages/component-library/src/components/form/mt-number-field/mt-number-field.vue
@@ -392,7 +392,7 @@ export default defineComponent({
 
   & button {
     outline-color: var(--color-border-brand-selected);
-    padding-inline: 0.25rem;
+    padding-inline: var(--scale-size-4);
     border-radius: var(--border-radius-button);
     transition: all 0.15s ease-out;
     width: 100%;

diff --git a/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue b/packages/component-library/src/components/form/mt-password-field/mt-password-field.vue
@@ -145,15 +145,15 @@ export default defineComponent({
 }
 
 .mt-field--password--untoggable .mt-field__input input {
-  padding-right: 0.5rem;
+  padding-right: var(--scale-size-8);
 }
 
 .mt-field__toggle-password-visibility {
   position: absolute;
-  right: 0.5rem;
+  right: var(--scale-size-8);
   top: 50%;
   transform: translate(0, -50%);
-  padding: 0.5rem;
+  padding: var(--scale-size-8);
   border-radius: var(--border-radius-button);
   outline-color: var(--color-border-brand-selected);
   transition: all 0.15s ease-out;

diff --git a/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.vue b/packages/component-library/src/components/form/mt-text-editor/mt-text-editor.vue
@@ -436,8 +436,8 @@ label {
   /* List styles */
   ul,
   ol {
-    padding: 0 1rem;
-    margin: 1.25rem 1rem 1.25rem 0.4rem;
+    padding: 0 var(--scale-size-16);
+    margin: var(--scale-size-20) var(--scale-size-16) var(--scale-size-20) 0.4rem;
 
     li p {
       margin-top: 0.25em;
@@ -613,7 +613,7 @@ label {
   }
 
   .tableWrapper {
-    margin: 1.5rem 0;
+    margin: var(--scale-size-24) 0;
     overflow-x: auto;
   }
 

diff --git a/packages/component-library/src/components/icons-media/mt-avatar/mt-avatar.vue b/packages/component-library/src/components/icons-media/mt-avatar/mt-avatar.vue
@@ -130,8 +130,8 @@ const color = computed(() => {
 <style scoped>
 .mt-avatar {
   display: inline-block;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--scale-size-40);
+  height: var(--scale-size-40);
   border-radius: var(--border-radius-round);
   background-size: cover;
   text-align: center;

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
@@ -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,7 +196,7 @@ 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);
@@ -271,7 +271,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 +308,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 +320,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 +331,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%;

diff --git a/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue b/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue
@@ -62,25 +62,25 @@ defineEmits(["button-click"]);
 
 .mt-empty-state__icon {
   display: inline-block;
-  padding: 0.75rem;
+  padding: var(--scale-size-12);
   border-radius: var(--border-radius-xs);
   background-color: var(--color-interaction-secondary-dark);
 }
 
 .mt-empty-state__headline {
-  margin-top: 1.5rem;
+  margin-top: var(--scale-size-24);
   margin-bottom: 0;
 }
 
 .mt-empty-state__description {
-  margin-top: 0.5rem;
+  margin-top: var(--scale-size-8);
 }
 
 .mt-empty-state__link {
-  margin-top: 0.5rem;
+  margin-top: var(--scale-size-8);
 }
 
 .mt-empty-state__button {
-  margin-top: 1.5rem;
+  margin-top: var(--scale-size-24);
 }
 </style>
diff --git a/packages/component-library/src/components/overlay/mt-popover/mt-popover.vue b/packages/component-library/src/components/overlay/mt-popover/mt-popover.vue
@@ -218,7 +218,7 @@ export default defineComponent({
 }
 
 .mt-popover__content {
-  padding: 1rem;
+  padding: var(--scale-size-16);
   padding-top: var(--scale-size-4);
   padding-bottom: var(--scale-size-4);
   background-color: var(--color-elevation-surface-overlay);

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
@@ -2172,7 +2172,7 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding
   // custom table styling
   th,
   td {
-    padding: 0.25rem;
+    padding: var(--scale-size-4);
     text-align: left;
     border: 1px solid #ccc;
   }
@@ -2542,7 +2542,7 @@ $tableCellPadding: $tableCellPaddingTop $tableCellPaddingRight $tableCellPadding
   &__footer-inset {
     display: flex;
     width: calc(100% + var(--mt-card-footer-padding) * 2);
-    padding: 1rem var(--mt-card-footer-padding);
+    padding: var(--scale-size-16) var(--mt-card-footer-padding);
   }
 
   &__footer-right {

diff --git a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
@@ -175,8 +175,8 @@ const lastVisibleItemNumber = computed(() => {
 .mt-pagination__button {
   border-right: 1px solid var(--color-border-primary-default);
   color: var(--color-icon-primary-default);
-  height: 2rem;
-  width: 2.5rem;
+  height: var(--scale-size-32);
+  width: var(--scale-size-40);
   display: grid;
   place-items: center;
   transition: all 0.15s ease-out;