@shopware/cms-base-layer 1.5.0 → 2.0.0

package/{components → app/components}/SwContactForm.vue

@@ -178,7 +178,7 @@ const invokeSubmit = async () => {
             id="salutation"
             v-model="state.salutationId"
             name="salutation"
-            class="border-gray-300 focus:border-indigo-500 appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="border-outline-outline-variant focus:border-brand-primary appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
           >
             <option disabled selected value="">
               {{ translations.form.salutationPlaceholder }}
@@ -200,20 +200,20 @@ const invokeSubmit = async () => {
             name="first-name"
             type="text"
             autocomplete="given-name"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.firstName.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.firstNamePlaceholder"
             @blur="$v.firstName.$touch()"
           />
           <span
-            v-if="$v.firstName.$error"
+            v-if="$v.firstName.$error && $v.firstName.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.firstName.$errors[0]?.$message ?? '' }}
+            {{ $v.firstName.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-4">
@@ -224,20 +224,20 @@ const invokeSubmit = async () => {
             name="last-name"
             type="text"
             autocomplete="family-name"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.lastName.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.lastNamePlaceholder"
             @blur="$v.lastName.$touch()"
           />
           <span
-            v-if="$v.lastName.$error"
+            v-if="$v.lastName.$error && $v.lastName.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.lastName.$errors[0]?.$message ?? '' }}
+            {{ $v.lastName.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-6">
@@ -251,17 +251,17 @@ const invokeSubmit = async () => {
             :class="[
               $v.email.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :placeholder="translations.form.emailPlaceholder"
             @blur="$v.email.$touch()"
           />
           <span
-            v-if="$v.email.$error"
+            v-if="$v.email.$error && $v.email.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.email.$errors[0]?.$message ?? '' }}
+            {{ $v.email.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-6">
@@ -272,20 +272,20 @@ const invokeSubmit = async () => {
             name="phone"
             type="text"
             autocomplete="phone"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.phone.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.phonePlaceholder"
             @blur="$v.phone.$touch()"
           />
           <span
-            v-if="$v.phone.$error"
+            v-if="$v.phone.$error && $v.phone.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.phone.$errors[0]?.$message ?? '' }}
+            {{ $v.phone.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-12">
@@ -296,20 +296,20 @@ const invokeSubmit = async () => {
             name="subject"
             type="text"
             autocomplete="subject"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.subject.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.subjectPlaceholder"
             @blur="$v.subject.$touch()"
           />
           <span
-            v-if="$v.subject.$error"
+            v-if="$v.subject.$error && $v.subject.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.subject.$errors[0]?.$message ?? '' }}
+            {{ $v.subject.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-12">
@@ -320,21 +320,21 @@ const invokeSubmit = async () => {
             name="comment"
             type="text"
             autocomplete="comment"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.comment.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.commentPlaceholder"
             rows="5"
             @blur="$v.comment.$touch()"
           />
           <span
-            v-if="$v.comment.$error"
+            v-if="$v.comment.$error && $v.comment.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.comment.$errors[0]?.$message || '' }}
+            {{ $v.comment.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-12">
@@ -345,7 +345,7 @@ const invokeSubmit = async () => {
               v-model="state.checkbox"
               name="privacy"
               type="checkbox"
-              class="mt-1 focus:ring-indigo-500 h-4 w-4 border text-indigo-600 rounded"
+              class="mt-1 focus:ring-brand-primary h-4 w-4 border text-brand-primary rounded"
               :class="[
                 $v.checkbox.$error ? 'border-red-600' : 'border-gray-300',
               ]"
@@ -363,7 +363,7 @@ const invokeSubmit = async () => {
       </div>
       <div class="flex justify-end mt-10">
         <button
-          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-75"
+          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-primary-hover focus:outline-none focus:ring-2 focus:ring-brand-primary disabled:opacity-75"
           type="submit"
         >
           {{ translations.form.submit }}

package/app/components/SwFilterChips.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Schemas } from "#shopware";
+
+type FilterState = {
+  manufacturer: Set<string>;
+  properties: Set<string>;
+  "min-price": number | undefined;
+  "max-price": number | undefined;
+  rating: number | undefined;
+  "shipping-free": boolean | undefined;
+};
+
+type Filter = {
+  id: string;
+  code: string;
+  options?: Array<
+    | Schemas["PropertyGroupOption"]
+    | { id: string; translated?: { name?: string } }
+  >;
+  entities?: Array<
+    | Schemas["ProductManufacturer"]
+    | { id: string; translated?: { name?: string } }
+  >;
+};
+
+const props = defineProps<{
+  filters: FilterState;
+  availableFilters: Filter[];
+}>();
+
+const emit = defineEmits<{
+  remove: [{ code: string; value: string | number }];
+}>();
+
+const getTranslatedName = (
+  item: { translated?: { name?: string }; name?: string } | undefined,
+): string | null => {
+  if (!item) return null;
+  if ("translated" in item) {
+    return item.translated?.name || ("name" in item ? item.name : null) || null;
+  }
+  return null;
+};
+
+const activeChips = computed(() => {
+  const chips: Array<{ label: string; code: string; value: string | number }> =
+    [];
+
+  // Add property filters
+  const properties = Array.from(props.filters.properties);
+  for (const propertyId of properties) {
+    // Check all filters, not just the one with code "properties"
+    // because properties can be in multiple filter groups
+    for (const filter of props.availableFilters) {
+      if ("options" in filter && filter.options) {
+        const option = filter.options.find((o) => o.id === propertyId);
+        const name = getTranslatedName(option);
+        if (name) {
+          chips.push({
+            label: name,
+            code: "properties",
+            value: propertyId,
+          });
+          break;
+        }
+      }
+    }
+  }
+
+  // Add manufacturer filters
+  const manufacturers = Array.from(props.filters.manufacturer);
+  for (const manufacturerId of manufacturers) {
+    const filter = props.availableFilters.find(
+      (f) => f.code === "manufacturer",
+    );
+    if (filter && "entities" in filter && filter.entities) {
+      const entity = filter.entities.find((e) => e.id === manufacturerId);
+      const name = getTranslatedName(entity);
+      if (name) {
+        chips.push({
+          label: name,
+          code: "manufacturer",
+          value: manufacturerId,
+        });
+      }
+    }
+  }
+
+  // Add price filters
+  if (props.filters["min-price"] || props.filters["max-price"]) {
+    const min = props.filters["min-price"] || 0;
+    const max = props.filters["max-price"] || "∞";
+    chips.push({
+      label: `Price: ${min} - ${max}`,
+      code: "price",
+      value: "price-range",
+    });
+  }
+
+  // Add rating filter
+  if (props.filters.rating) {
+    chips.push({
+      label: `Rating: ${props.filters.rating}★`,
+      code: "rating",
+      value: props.filters.rating,
+    });
+  }
+
+  // Add shipping free filter
+  if (props.filters["shipping-free"]) {
+    chips.push({
+      label: "Free Shipping",
+      code: "shipping-free",
+      value: "true",
+    });
+  }
+
+  return chips;
+});
+
+const handleRemoveChip = (chip: { code: string; value: string | number }) => {
+  emit("remove", chip);
+};
+</script>
+
+<template>
+  <div
+    v-if="activeChips.length > 0"
+    class="self-stretch inline-flex justify-start items-center gap-4 flex-wrap content-center mb-6"
+  >
+    <button
+      v-for="(chip, index) in activeChips"
+      :key="`${chip.code}-${chip.value}-${index}`"
+      @click="handleRemoveChip(chip)"
+      class="px-4 py-1.5 bg-brand-tertiary rounded-full inline-flex justify-center items-center gap-1 hover:bg-brand-tertiary-hover transition-colors"
+    >
+      <span class="text-brand-on-tertiary text-base font-normal leading-normal">
+        {{ chip.label }}
+      </span>
+      <span class="i-carbon-close w-5 h-5 text-brand-on-tertiary"></span>
+    </button>
+  </div>
+</template>

package/app/components/SwListingProductPrice.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useCmsTranslations, useProductPrice } from "@shopware/composables";
+import { defu } from "defu";
+import { toRefs } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+}>();
+
+type Translations = {
+  listing: {
+    variantsFrom: string;
+    previously: string;
+    from: string;
+    to: string;
+  };
+};
+
+let translations: Translations = {
+  listing: {
+    variantsFrom: "variants from",
+    previously: "previously",
+    from: "from",
+    to: "to",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { product } = toRefs(props);
+
+const {
+  price,
+  unitPrice,
+  displayFromVariants,
+  displayFrom,
+  isListPrice,
+  regulationPrice,
+} = useProductPrice(product);
+</script>
+
+<template>
+  <div :id="product.id" class="inline-flex justify-start items-center gap-2">
+    <!-- Sale price display -->
+    <div v-if="isListPrice" class="flex items-center gap-2">
+      <div class="text-base font-bold leading-normal">
+        <SwSharedPrice :value="unitPrice">
+          <template #beforePrice>
+            <span v-if="displayFrom || displayFromVariants" class="text-sm">{{
+              translations.listing.from
+            }}</span>
+          </template>
+        </SwSharedPrice>
+      </div>
+      <div class="text-surface-on-surface-variant text-sm font-normal leading-tight line-through">
+        <SwSharedPrice :value="price?.listPrice?.price" />
+      </div>
+    </div>
+
+    <!-- Regular price display -->
+    <div v-else class="text-surface-on-surface text-base font-bold leading-normal">
+      <SwSharedPrice :value="unitPrice">
+        <template #beforePrice>
+          <span v-if="displayFrom || displayFromVariants" class="text-sm">{{
+            translations.listing.from
+          }}</span>
+        </template>
+      </SwSharedPrice>
+    </div>
+
+    <!-- Variants from price -->
+    <div v-if="displayFromVariants" class="text-surface-on-surface text-base font-bold leading-normal">
+      <SwSharedPrice :value="displayFromVariants">
+        <template #beforePrice>
+          <span v-if="displayFromVariants" class="text-sm">{{
+            translations.listing.variantsFrom
+          }}</span>
+        </template>
+      </SwSharedPrice>
+    </div>
+
+    <!-- Regulation price -->
+    <div v-if="regulationPrice" class="flex gap-2 text-surface-on-surface-variant text-sm">
+      {{ translations.listing.previously }}
+      <SwSharedPrice :value="regulationPrice" />
+    </div>
+  </div>
+</template>

package/{components → app/components}/SwNewsletterForm.vue

@@ -78,8 +78,18 @@ const { getConfigValue } = useCmsElementConfig(props.content);
 const { newsletterSubscribe, newsletterUnsubscribe } = useNewsletter();
 
 const getFormTitle = computed(() => getConfigValue("title"));
-const state = reactive({
-  option: subscriptionOptions[0]?.value ?? "",
+
+type NewsletterFormState = {
+  option: "subscribe" | "unsubscribe";
+  salutationId: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  checkbox: boolean;
+};
+
+const state = reactive<NewsletterFormState>({
+  option: subscriptionOptions[0]?.value ?? "subscribe",
   salutationId: "",
   firstName: "",
   lastName: "",
@@ -87,7 +97,7 @@ const state = reactive({
   checkbox: false,
 });
 
-type Rules = {
+type RequiredRules = {
   email: {
     required: ValidationRuleWithoutParams;
     email: ValidationRuleWithoutParams;
@@ -96,6 +106,9 @@ type Rules = {
     required: ValidationRuleWithoutParams;
     isTrue: (value: boolean) => boolean;
   };
+};
+
+type OptionalRules = {
   firstName: {
     required: ValidationRuleWithoutParams;
     minLength: number;
@@ -105,8 +118,9 @@ type Rules = {
     minLength: number;
   };
 };
-const rules = computed(() => {
-  let temp: Partial<Rules> = {
+
+const rules = computed((): RequiredRules & Partial<OptionalRules> => {
+  const temp: RequiredRules & Partial<OptionalRules> = {
     email: {
       required,
       email,
@@ -117,16 +131,13 @@ const rules = computed(() => {
     },
   };
   if (state.option === "subscribe") {
-    temp = {
-      ...temp,
-      firstName: {
-        required,
-        minLength: 3,
-      },
-      lastName: {
-        required,
-        minLength: 3,
-      },
+    temp.firstName = {
+      required,
+      minLength: 3,
+    };
+    temp.lastName = {
+      required,
+      minLength: 3,
     };
   }
   return temp;
@@ -184,7 +195,7 @@ const invokeSubmit = async () => {
             id="option"
             v-model="state.option"
             name="option"
-            class="appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border border-outline-outline-variant placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:border-brand-primary focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
           >
             <option
               v-for="subscription in subscriptionOptions"
@@ -204,19 +215,19 @@ const invokeSubmit = async () => {
             type="email"
             autocomplete="email"
             :class="[
-              $v.email?.$error
+              $v.email.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :placeholder="translations.form.emailPlaceholder"
-            @blur="$v.email?.$touch()"
+            @blur="$v.email.$touch()"
           />
           <span
-            v-if="$v.email?.$error"
+            v-if="$v.email.$error && $v.email.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.email?.$errors[0]?.$message || '' }}
+            {{ $v.email.$errors[0].$message }}
           </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
@@ -225,7 +236,7 @@ const invokeSubmit = async () => {
             id="salutation"
             v-model="state.salutationId"
             name="salutation"
-            class=" border-gray-300 focus:border-indigo-500appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class=" border-outline-outline-variant focus:border-brand-primaryappearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
           >
             <option disabled selected value="">
               {{ translations.form.salutationPlaceholder }}
@@ -247,20 +258,20 @@ const invokeSubmit = async () => {
             name="first-name"
             type="text"
             autocomplete="given-name"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.firstName?.$error
-                ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+          ? 'border-red-600 focus:border-red-600'
+          : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.firstNamePlaceholder"
             @blur="$v.firstName?.$touch()"
           />
           <span
-            v-if="$v.firstName?.$error"
+            v-if="$v.firstName?.$error && $v.firstName?.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.firstName?.$errors[0]?.$message || '' }}
+            {{ $v.firstName?.$errors[0].$message }}
           </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
@@ -271,20 +282,20 @@ const invokeSubmit = async () => {
             name="last-name"
             type="text"
             autocomplete="family-name"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
+            class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.lastName?.$error
                 ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.lastNamePlaceholder"
             @blur="$v.lastName?.$touch()"
           />
           <span
-            v-if="$v.lastName?.$error"
+            v-if="$v.lastName?.$error && $v.lastName?.$errors[0]?.$message"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.lastName?.$errors[0]?.$message || '' }}
+            {{ $v.lastName?.$errors[0].$message }}
           </span>
         </div>
         <div class="col-span-12">
@@ -295,7 +306,7 @@ const invokeSubmit = async () => {
               v-model="state.checkbox"
               name="privacy"
               type="checkbox"
-              class="mt-1 focus:ring-indigo-500 h-4 w-4 border text-indigo-600 rounded"
+              class="mt-1 focus:ring-brand-primary h-4 w-4 border text-brand-primary rounded"
               :class="[
                 $v.checkbox?.$error ? 'border-red-600' : 'border-gray-300',
               ]"
@@ -313,7 +324,7 @@ const invokeSubmit = async () => {
       </div>
       <div class="flex justify-end mt-10">
         <button
-          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-75"
+          class="group relative flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-primary hover:bg-brand-primary-hover focus:outline-none focus:ring-2 focus:ring-brand-primary disabled:opacity-75"
           type="submit"
         >
           {{ translations.form.submit }}

package/{components → app/components}/SwPagination.vue

@@ -36,8 +36,7 @@ defineEmits<(e: "changePage", page: number) => void>();
       @click="$emit('changePage', current - 1)"
     >
       <span class="sr-only">{{ translations.listing.previous }}</span>
-      <!-- Heroicon name: solid/chevron-left -->
-      <div class="w-5 h-5 i-carbon-chevron-left" />
+      <SwChevronIcon direction="left" :size="20" />
     </button>
     <button
       v-if="current > 2"
@@ -62,7 +61,7 @@ defineEmits<(e: "changePage", page: number) => void>();
     </button>
     <button
       aria-current="page"
-      class="bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
+      class="bg-surface-surface-primary border-brand-primary text-brand-primary relative inline-flex items-center px-4 py-2 border text-sm font-medium"
       :class="[
         current - 1 >= 1 ? '' : 'rounded-l-md border border-secondary-300',
         total == current ? 'rounded-r-md border border-secondary-300' : '',
@@ -99,8 +98,7 @@ defineEmits<(e: "changePage", page: number) => void>();
       @click="$emit('changePage', current + 1)"
     >
       <span class="sr-only">{{ translations.listing.next }}</span>
-      <!-- Heroicon name: solid/chevron-right -->
-      <div class="w-5 h-5 i-carbon-chevron-right" />
+      <SwChevronIcon direction="right" :size="20" />
     </button>
   </nav>
 </template>