update global styles

.changeset/warm-dots-worry.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Updated global styles

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

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

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

@@ -0,0 +1,121 @@
+/* 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;
+  font-family: Inter, sans-serif;
+  font-feature-settings:
+    "cv10" on,
+    "cv05" on,
+    "cv02" on,
+    "cv07" on,
+    "cv09" on,
+    "cv04" on,
+    "cv03" on;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 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;
+  padding: 0;
+  margin: 0;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* Hide elements visually, keep them visible to screen reader technology */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+/* Remove all styles from button elements, needs to be explicitly defined */
+button:where([data-reset-style]) {
+  height: auto;
+  border-radius: 0;
+  text-align: inherit;
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  cursor: pointer;
+  border: none;
+  color: inherit;
+  font: inherit;
+}

packages/component-library/src/components/form/_internal/mt-select-base/_internal/mt-select-result-list.vue

@@ -16,7 +16,7 @@
       >
         <slot name="before-item-list" />
 
-        <ul class="mt-select-result-list__item-list">
+        <ul class="mt-select-result-list__item-list" role="list">
           <template v-for="(item, index) in options">
             <slot name="result-item" v-bind="{ item, index }" />
           </template>

packages/component-library/src/components/form/_internal/mt-select-base/_internal/mt-select-selection-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="mt-select-selection-list">
+  <ul class="mt-select-selection-list" role="list">
     <!-- eslint-disable vue/no-use-v-if-with-v-for -->
     <template v-for="(selection, index) in selections" :key="selection[valueProperty]">
       <li
@@ -278,6 +278,7 @@ export default defineComponent({
     display: inline-block;
     min-width: 200px;
     padding: 12px 16px 12px 8px;
+    height: 100%;
 
     &::placeholder {
       color: lighten($color-darkgray-200, 25%);

packages/component-library/src/components/form/mt-help-text/mt-help-text.vue

@@ -6,6 +6,7 @@
       showDelay: showDelay,
       hideDelay: hideDelay,
     }"
+    data-reset-style
     class="mt-help-text"
     role="tooltip"
     aria-label="help-text"

packages/component-library/src/components/form/mt-number-field/mt-number-field.vue

@@ -46,6 +46,7 @@
         <button
           @click="increaseNumberByStep"
           :disabled="disabled"
+          data-reset-style
           :aria-label="$tc('mt-number-field.increaseButton')"
           data-testid="mt-number-field-increase-button"
         >
@@ -55,6 +56,7 @@
         <button
           @click="decreaseNumberByStep"
           :disabled="disabled"
+          data-reset-style
           :aria-label="$t('mt-number-field.decreaseButton')"
           data-testid="mt-number-field-decrease-button"
         >
@@ -383,6 +385,7 @@ export default defineComponent({
     transition: all 0.15s ease-out;
     width: 100%;
     flex: 1;
+    text-align: center;
 
     &:is(:hover, :focus-visible) {
       background-color: var(--color-interaction-secondary-hover);

packages/component-library/src/components/form/mt-password-field/mt-password-field.vue

@@ -47,6 +47,7 @@
               ? $tc('mt-password-field.titleHidePassword')
               : $tc('mt-password-field.titleShowPassword')
           "
+          data-reset-style
           class="mt-field__toggle-password-visibility"
           @click="() => (showPassword = !showPassword)"
         >
@@ -158,10 +159,13 @@ export default defineComponent({
   right: 0.5rem;
   top: 50%;
   transform: translate(0, -50%);
-  padding: 0.5rem;
   border-radius: var(--border-radius-button);
   outline-color: var(--color-border-brand-selected);
   transition: all 0.15s ease-out;
+  width: 2.25rem;
+  height: 2.25rem;
+  display: grid;
+  place-items: center;
 
   &:is(:hover, :focus-visible) {
     background-color: var(--color-interaction-secondary-hover);

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

@@ -20,6 +20,7 @@
         <button
           v-if="inheritance !== undefined"
           class="mt-card__inheritance-toggle"
+          data-reset-style
           :aria-label="!!inheritance ? t('disableInheritance') : t('enableInheritance')"
           @click="$emit('update:inheritance', !inheritance)"
         >

packages/component-library/src/components/navigation/mt-segmented-control/mt-segmented-control.vue

@@ -17,6 +17,7 @@
         <template #trigger="{ toggleFloatingUi }">
           <button
             class="mt-segmented-control__action"
+            data-reset-style
             :class="getActionClass(action)"
             :aria-pressed="action.isPressed"
             @click="() => handleClick(action, toggleFloatingUi)"

packages/component-library/src/components/navigation/mt-tabs/mt-tabs.vue

@@ -8,6 +8,7 @@
           v-for="item in mainItems"
           :key="item.name"
           :data-priority-plus="item.name"
+          data-reset-style
           ref="items"
           class="mt-tabs__item"
           :data-text="item.label"

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

@@ -10,7 +10,7 @@
 
     <mt-popover class="mt-data-table-filter__option" title="Manufactuer">
       <template #trigger="{ toggleFloatingUi }">
-        <button @keydown.delete="$emit('removeFilter')" @click="toggleFloatingUi">
+        <button @keydown.delete="$emit('removeFilter')" @click="toggleFloatingUi" data-reset-style>
           {{ appliedOptions.map((option) => option.label).join(", ") }}
         </button>
       </template>
@@ -35,6 +35,7 @@
     <button
       class="mt-data-table-filter__remove-button"
       :aria-label="t('removeButton')"
+      data-reset-style
       @keydown.delete="$emit('removeFilter')"
       @click="$emit('removeFilter')"
     >

packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-reset-filter-button/mt-data-table-reset-filter-button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="mt-data-table-reset-filter-button">
+  <button class="mt-data-table-reset-filter-button" data-reset-style>
     {{ t("label", { n: numberOfAppliedFilters }) }}
   </button>
 </template>

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

@@ -13,6 +13,7 @@
     <div class="mt-pagination__controls">
       <button
         class="mt-pagination__button"
+        data-reset-style
         :disabled="isOnFirstPage"
         @click="$emit('change-current-page', 1)"
         data-testid="mt-pagination-first-page-button"
@@ -24,6 +25,7 @@
 
       <button
         class="mt-pagination__button"
+        data-reset-style
         :disabled="isOnFirstPage"
         @click="$emit('change-current-page', currentPage - 1)"
         data-testid="mt-pagination-previous-page-button"
@@ -47,6 +49,7 @@
 
       <button
         class="mt-pagination__button"
+        data-reset-style
         :disabled="isOnLastPage"
         @click="$emit('change-current-page', currentPage + 1)"
         data-testid="mt-pagination-next-page-button"
@@ -58,6 +61,7 @@
 
       <button
         class="mt-pagination__button"
+        data-reset-style
         :disabled="isOnLastPage"
         @click="$emit('change-current-page', totalPages)"
         data-testid="mt-pagination-last-page-button"