Set --form-color as style variable and use it

JhumanJ · Nov 5, 2024 · 8debbef · 8debbef
1 parent bda37cf
commit 8debbef
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 10 deletions.
diff --git a/client/components/forms/ToggleSwitchInput.vue b/client/components/forms/ToggleSwitchInput.vue
@@ -9,10 +9,9 @@
         :id="id ? id : name"
         v-model="compVal"
         :disabled="disabled ? true : null"
-        :style="{ '--toggle-color': color }"
         :ui="{
-          active: 'bg-[var(--toggle-color)]',
-          ring: 'focus:ring-[var(--toggle-color)]/50'
+          active: 'bg-[var(--form-color)]',
+          ring: 'focus:ring-[var(--form-color)]/50'
         }"
       />
 

diff --git a/client/components/forms/components/CheckboxIcon.vue b/client/components/forms/components/CheckboxIcon.vue
@@ -5,9 +5,9 @@
       name="i-material-symbols-check-box"
       class="block"
       :class="[
-        theme.FlatSelectInput.icon
+        theme.FlatSelectInput.icon,
+        'bg-[var(--form-color)]'
       ]"
-      :color="color"
     />
     <Icon
       v-show="!isChecked"
@@ -17,7 +17,6 @@
         theme.FlatSelectInput.icon,
         theme.FlatSelectInput.unselectedIcon,
       ]"
-      :color="undefined"
     />
   </div>
 </template>

diff --git a/client/components/forms/components/RadioButtonIcon.vue b/client/components/forms/components/RadioButtonIcon.vue
@@ -4,9 +4,9 @@
       v-show="isChecked"
       name="ic:round-radio-button-checked"
       :class="[
-        theme.FlatSelectInput.icon
+        theme.FlatSelectInput.icon,
+        'bg-[var(--form-color)]'
       ]"
-      :color="color"
     />
     <Icon
       v-show="!isChecked"
@@ -15,7 +15,6 @@
         theme.FlatSelectInput.icon,
         theme.FlatSelectInput.unselectedIcon,
       ]"
-      :color="undefined"
     />
   </div>
 </template>

diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
@@ -310,7 +310,8 @@ export default {
     },
     computedStyle() {
       return {
-        ...this.minHeight ? {minHeight: this.minHeight + 'px'} : {}
+        ...this.minHeight ? {minHeight: this.minHeight + 'px'} : {},
+        '--form-color': this.form.color
       }
     }
   },