mod overwrites

assets/js/Stepper.vue

@@ -125,7 +125,6 @@
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
-            <!--
             <slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-8 sm:py-16 px-3 sm:px-6">
                 <heading>Bitte geben Sie Ihre Daten ein</heading>
                 <div class="grid grid-cols-2 gap-4">
@@ -137,7 +136,7 @@
                     <v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
                     <v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
                     <v-checkbox class="col-span-2" v-model="value.datenschutz" id="datenschutz" name="datenschutz"
-                                                                                    label='Ich habe die <a href="/datenschutzerklaerung" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
+                        label='Ich habe die <a href="/datenschutzerklaerung" class="text-primary" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
                 </div>
                 <pagination v-model="innerStep" class="mt-6" :nextable="
                     value.object_address.length > 0 &&
@@ -193,7 +192,6 @@
                     </div>
                 </div>
             </slide>
-                                                            -->
         </carousel>
     </form>
 </template>

assets/js/components/RadioGrid.vue

@@ -11,7 +11,7 @@
                 @click="$emit('update:modelValue', item.key)"
             />
             <span
-                class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primarycustom peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end"
+                class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primary peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end"
             >
                 <img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`" class="w-16 h-16 flex-none" />
                 <span class="mt-4 font-semibold text-gray-700 text-sm" v-text="item.label"></span>

assets/js/components/VBtn.vue

@@ -1,7 +1,7 @@
 <template>
     <button
         :type="type"
-        class="bg-primarycustom px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300"
+        class="bg-primary px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300"
         @click.prevent="$emit('click', $event)"
     >
         <slot></slot>

assets/js/components/VCheckbox.vue

@@ -3,7 +3,7 @@
         <label :for="id" class="block relative flex items-center">
             <input :id="id" type="checkbox" :name="name" :checked="inner === true" class="peer absolute invisible" @change="inner = !inner" />
             <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
-            <span class="peer-checked:bg-primarycustom left-[6px] w-3 h-3 absolute rounded-sm block"></span>
+            <span class="peer-checked:bg-primary left-[6px] w-3 h-3 absolute rounded-sm block"></span>
             <span class="pl-8" v-html="label"></span>
         </label>
     </div>

assets/js/components/VText.vue

@@ -1,6 +1,12 @@
 <template>
     <label class="w-full border border-solid focus-within:border-primary rounded-lg relative flex">
-        <input :name="name" :id="id" placeholder=" " v-model="inner" class="bg-white rounded-lg border-0 focus:shadow-none focus:outline-none text-gray-600 text-left placeholder-white peer py-3 px-3 w-full h-auto" />
+        <input
+            :id="id"
+            v-model="inner"
+            :name="name"
+            placeholder=" "
+            class="bg-white rounded-lg border-0 focus:shadow-none focus:outline-none text-gray-600 text-left placeholder-white peer py-3 px-3 w-full h-auto"
+        />
         <span
             class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:bottom-auto peer-focus:text-sm"
             >{{ label }} <span class="text-red-800 ml-1">*</span></span
@@ -14,7 +20,7 @@ export default {
         value: {},
         label: {},
         id: {},
-        name: {}
+        name: {},
     },
 
     computed: {
@@ -24,8 +30,8 @@ export default {
             },
             set(v) {
                 this.$emit('input', v);
-            }
-        }
-    }
+            },
+        },
+    },
 };
 </script>

tailwind.config.js

@@ -1,16 +1,14 @@
 module.exports = {
-    content: [
-        './assets/js/**/*.vue',
-    ],
+    content: ['./assets/js/**/*.vue'],
     theme: {
         extend: {
             colors: {
                 primary: {
-                    DEFAULT: 'hsl(25.3, 71.3%, 56.3%)'
-                }
-            }
+                    DEFAULT: 'var(--iw-slider-primary-color)',
+                },
+            },
         },
     },
     plugins: [],
     important: true,
-}
+};

templates/overwrite.htm

@@ -1,16 +1,5 @@
 <style type="text/css">
-.slider-custom {
-    --slider-connect-bg: #ef4444;
-    --slider-tooltip-bg: #ef4444;
-    --slider-handle-ring-color: #ef444430;
-}
-.bg-primarycustom {
-    background-color: #ff0000 !important;
-}
-.peer:checked ~ .peer-checked\:border-b-primarycustom {
-    border-bottom-color: #ff0000 !important;
-}
-.text-primary {
-    color: #ff0000 !important;
+:root {
+    --iw-slider-primary-color: #ff0000;
 }
 </style>