feat(QInputChips): color refactoring

Author: rstoenescu

dev/components/form/all2.vue

@@ -61,14 +61,14 @@
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" float-label="Float Label" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" placeholder="Placeholder" float-label="With placeholder" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" placeholder="Placeholder" clearable suffix="SUF" prefix="PRE" />
-        <q-chips-input :dark="dark" class="q-my-sm" color="amber-2" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
+        <q-chips-input :dark="dark" class="q-my-sm" color="amber-2" chips-color="amber-2" chips-bg-color="dark" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" inverted stack-label="Stack Label" clearable />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" inverted stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" inverted color="secondary" stack-label="With placeholder" placeholder="Placeholder" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" color="amber-2" v-model="chips" inverted-light stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" color="amber-2" v-model="chips" inverted-light float-label="With placeholder" placeholder="Placeholder" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" color="white" v-model="chips" inverted-light stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
-        <q-chips-input :dark="dark" class="q-my-sm" inverted frame-color="dark" color="dark" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
+        <q-chips-input :dark="dark" class="q-my-sm" inverted color="dark" chips-color="black" chips-bg-color="lime" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
       </div>
       <q-toggle v-model="dark" label="Dark" class="fixed-top-left bg-grey-5 q-pa-sm" style="top: 18px; left: 18px;" />
     </div>

src/components/chips-input/QChipsInput.vue

@@ -15,7 +15,7 @@
     :hide-underline="hideUnderline"
     :before="before"
     :after="after"
-    :color="computedColor"
+    :color="color"
 
     :focused="focused"
     :length="length"
@@ -29,7 +29,7 @@
         :closable="editable"
         v-for="(label, index) in model"
         :key="`${label}#${index}`"
-        :color="computedChipColor"
+        :color="computedChipBgColor"
         :text-color="computedChipTextColor"
         @blur="__onInputBlur"
         @blur.native="__onInputBlur"
@@ -91,7 +91,8 @@ export default {
       type: Array,
       required: true
     },
-    frameColor: String,
+    chipsColor: String,
+    chipsBgColor: String,
     readonly: Boolean,
     addIcon: String
   },
@@ -115,24 +116,30 @@ export default {
     computedAddIcon () {
       return this.addIcon || this.$q.icon.chipsInput.add
     },
-    computedColor () {
-      return this.inverted || this.invertedLight ? this.frameColor || this.color : this.color
+    computedChipTextColor () {
+      if (this.chipsColor) {
+        return this.chipsColor
+      }
+      if (this.inverted || this.invertedLight) {
+        return this.color
+      }
+      return this.dark
+        ? this.color
+        : 'white'
     },
-    computedChipColor () {
+    computedChipBgColor () {
+      if (this.chipsBgColor) {
+        return this.chipsBgColor
+      }
       if (this.inverted) {
         return 'white'
       }
       if (this.invertedLight) {
-        return 'grey-7'
+        return 'grey-8'
       }
-      return this.color
-    },
-    computedChipTextColor () {
-      if (this.inverted || this.invertedLight) {
-        return this.color
-      }
-
-      return this.dark ? 'black' : 'white'
+      return this.dark
+        ? 'white'
+        : this.color
     }
   },
   methods: {