🎨 (Account) Add contrast color to all styled component

src/components/ChartBalance.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="chart-balance">
-    <p>{{ $tc('account.total', statOrdered.length, { count: statOrdered.length }) }}</p>
+    <p>
+      {{
+        $tc('account.total', statOrdered.length, { count: statOrdered.length })
+      }}
+    </p>
     <table class="table is-hoverable is-striped" v-if="stats.length">
       <tbody>
         <tr v-for="(stat, k) in statOrdered" :key="k">
@@ -10,14 +14,22 @@
             v-if="stat.balance.amount !== 0"
             class="numeric"
             :class="getColor(stat.balance.amount)"
-          >{{ stat.balance.amount | money(currency) }}</td>
-          <td v-else class="conclude" :class="getColor(stat.balance.amount)"></td>
+          >
+            {{ stat.balance.amount | money(currency) }}
+          </td>
+          <td
+            v-else
+            class="conclude"
+            :class="getColor(stat.balance.amount)"
+          ></td>
         </tr>
       </tbody>
       <tfoot>
-        <tr class="is-selected">
-          <th scope="row" class="total">total</th>
-          <th class="numeric" colspan="2">{{ totalCost | money(currency) }}</th>
+        <tr :style="colorStyle">
+          <th :style="colorStyle" scope="row" class="total">total</th>
+          <th :style="colorStyle" class="numeric" colspan="2">
+            {{ totalCost | money(currency) }}
+          </th>
         </tr>
       </tfoot>
     </table>
@@ -29,6 +41,8 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import ICurrency from '@/models/ICurrency'
 import IStat from '@/models/IStat'
+import IAccount from '../models/IAccount'
+import { findContrastColor } from '@/utils'
 
 @Component({
   components: {
@@ -36,6 +50,8 @@ import IStat from '@/models/IStat'
   }
 })
 export default class ChartBalance extends Vue {
+  @Prop({ type: Object, required: true })
+  public account!: IAccount
   @Prop({ type: Array, default: () => [] })
   public stats!: IStat[]
   @Prop({ type: Object, required: true })
@@ -45,6 +61,16 @@ export default class ChartBalance extends Vue {
     return amount === 0 ? 'zero' : amount > 0 ? 'positive' : 'negative'
   }
 
+  public get colorStyle() {
+    if (!this.account) {
+      return {}
+    }
+    return {
+      backgroundColor: this.account.color,
+      color: findContrastColor(this.account.color)
+    }
+  }
+
   public get statOrdered(): IStat[] {
     return [...this.stats].sort((a: IStat, b: IStat) =>
       a.balance.amount < b.balance.amount ? 1 : -1

src/components/ColorPicker.vue

@@ -9,7 +9,11 @@
           :class="{ white: color.label }"
           :style="colorBackground(color)"
         >
-          <awe-icon v-if="color.value === localColor" icon="check" />
+          <awe-icon
+            :style="colorStyle"
+            v-if="color.value === localColor"
+            icon="check"
+          />
         </div>
       </div>
     </div>
@@ -20,6 +24,7 @@
 import { Component, Vue, Model, Watch } from 'vue-property-decorator'
 import IColor from '@/models/IColor'
 import colors from '@/data/colors'
+import { findContrastColor } from '../utils'
 
 @Component
 export default class ColorPicker extends Vue {
@@ -64,6 +69,12 @@ export default class ColorPicker extends Vue {
     }
   }
 
+  public get colorStyle() {
+    return {
+      color: findContrastColor(this.localColor)
+    }
+  }
+
   @Watch('localColor')
   public onColorChange(color: string | null, oldColor: string | null) {
     this.$emit('input', color)