🎨 (Color) add contrast color

package-lock.json

@@ -5958,6 +5958,11 @@
         "debug": "=3.1.0"
       }
     },
+    "font-color-contrast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/font-color-contrast/-/font-color-contrast-1.0.3.tgz",
+      "integrity": "sha1-d9iP+Xxr0JXPqd/rRGJLqK1xe2w="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "bulma-pricingtable": "^0.2.0",
     "bulma-switch": "^2.0.0",
     "crypto-js": "^3.1.9-1",
+    "font-color-contrast": "^1.0.3",
     "lightness": "^1.0.0",
     "lodash-es": "^4.17.15",
     "md5": "^2.2.1",

src/components/AccountCard.vue

@@ -6,7 +6,7 @@
   >
     <router-link
       :class="{ 'is-primary': !account.color, 'is-white': account.color }"
-      :style="`color: ${findDarkValue(account.color)}`"
+      :style="`color: ${findContrastColor(account.color)}`"
       :to="{ name: 'account', params: { id: account._id } }"
       >{{ account.name }}</router-link
     >
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import { findDarkValue } from '@/utils'
+import { findContrastColor, findDarkValue } from '@/utils'
 import bus, { SYNC } from '@/utils/bus-event'
 import accountService from '@/services/AccountService'
 import IAccount from '@/models/IAccount'
@@ -45,8 +45,8 @@ export default class AccountCard extends Vue {
     )
   }
 
-  public findDarkValue(color: string): string | null {
+  public findContrastColor(color: string): string | null {
-    return findDarkValue(color)
+    return findContrastColor(color)
   }
 
   public goToAccount(id: string): void {
@@ -59,7 +59,7 @@ export default class AccountCard extends Vue {
     }
     return {
       backgroundColor: color,
-      color: this.findDarkValue(color)
+      color: this.findContrastColor(color)
     }
   }
 

src/components/AccountList.vue

@@ -17,7 +17,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
-import { findDarkValue } from '@/utils'
+import { findContrastColor } from '@/utils'
 import bus, { SYNC } from '@/utils/bus-event'
 import accountService from '@/services/AccountService'
 import IAccount from '@/models/IAccount'

src/components/TransactionCreate.vue

@@ -170,7 +170,7 @@ import transactionService from '@/services/TransactionService'
 import formatDate from '@/utils/format-date'
 import notif from '@/utils/notif'
 import { money } from '@/utils/filters'
-import { confirmation, alertMessage, findDarkValue } from '@/utils'
+import { confirmation, alertMessage, findContrastColor } from '@/utils'
 
 const today: Date = new Date()
 
@@ -302,7 +302,7 @@ export default class TransactionCreate extends Vue {
     }
     return {
       backgroundColor: this.account.color,
-      color: findDarkValue(this.account.color) || 'black'
+      color: findContrastColor(this.account.color) || 'black'
     }
   }
 

src/data/colors.ts

@@ -1,5 +1,6 @@
 import IColor from '@/models/IColor'
 import lightness from 'lightness'
+import fontColorContrast from 'font-color-contrast'
 
 const dark = -70
 const light = dark * -1
@@ -70,9 +71,15 @@ export default [
     value: '#eea1eb'
   }
 ].map(
-  (color: IColor): IColor => ({
+  (color: IColor): IColor => {
+    const darkValue = lightness(color.value, dark).toLowerCase()
+    const lightValue = lightness(color.value, light).toLowerCase()
+    return {
       ...color,
-    darkValue: lightness(color.value, dark).toLowerCase(),
+      darkValue,
-    lightValue: lightness(color.value, light).toLowerCase()
+      lightValue,
-  })
+      constrastColor:
+        fontColorContrast(color.value) === '#000000' ? darkValue : lightValue
+    }
+  }
 )

src/models/IColor.ts

@@ -3,4 +3,5 @@ export default interface IColor {
   value: string | null
   darkValue?: string | null
   lightValue?: string | null
+  constrastColor?: string | null
 }

src/shims-vue.d.ts

@@ -8,3 +8,4 @@ declare module 'lightness'
 declare module 'crypto-js/aes'
 declare module 'crypto-js/enc-utf8'
 declare module '@xkeshi/vue-qrcode'
+declare module 'font-color-contrast'

src/utils/index.ts

@@ -40,6 +40,16 @@ export const slug = (text: string): string => {
     .replace(/-+$/, '') // Trim - from end of text
 }
 
+export const findContrastColor = (value: string): string | null => {
+  if (!value) {
+    return null
+  }
+  const find: IColor | undefined = colors.find(
+    (color: IColor) => color.value === value
+  )
+  return (find && find.constrastColor) || null
+}
+
 export const findDarkValue = (value: string): string | null => {
   if (!value) {
     return null

src/views/accounts/AccountItem.vue

@@ -4,7 +4,11 @@
     <div class="account-item-container">
       <h2 class="title is-2">
         {{ account.name }}
-        <router-link v-if="isAdmin" class="tag" :to="{ name: 'account-setting', params: { id } }">
+        <router-link
+          v-if="isAdmin"
+          class="tag"
+          :to="{ name: 'account-setting', params: { id } }"
+        >
           <awe-icon icon="cog" />
         </router-link>
       </h2>
@@ -13,19 +17,23 @@
           <account-share :account="account" />
         </div>
       </div>
-      <article class="message is-warning" v-if="transactionWithoutExchange.length">
+      <article
+        class="message is-warning"
+        v-if="transactionWithoutExchange.length"
+      >
         <div class="message-header">
           <p>Attention</p>
         </div>
         <div class="message-body">
-          Certaines dépenses ne sont pas comptées car en attente
+          Certaines dépenses ne sont pas comptées car en attente de récupérer
-          de récupérer les taux pratiqués à leur date respectives.
+          les taux pratiqués à leur date respectives.
           <ul>
             <li v-for="(transaction, k) in transactionWithoutExchange" :key="k">
               -
               <router-link
                 :to="{ name: 'transaction', params: { id: transaction._id } }"
-              >{{ transaction.name }}</router-link>
+                >{{ transaction.name }}</router-link
+              >
             </li>
           </ul>
           <online-view @online="retrieveExchange">
@@ -33,7 +41,9 @@
               @click="retrieveExchange"
               class="button is-success is-large is-rounded"
               :class="{ 'is-loading': retrievingExchange }"
-            >Récupérer les devises</button>
+            >
+              Récupérer les devises
+            </button>
           </online-view>
         </div>
       </article>
@@ -49,31 +59,52 @@
               <awe-icon icon="tag" />
             </a>
           </li>
-          <li :class="{ 'is-active': activeTab === 'balance' }" v-if="isMultiUser">
+          <li
+            :class="{ 'is-active': activeTab === 'balance' }"
+            v-if="isMultiUser"
+          >
             <a href="#" @click.prevent="toggleTab('balance')">
               <awe-icon icon="balance-scale" />
             </a>
           </li>
-          <li :class="{ 'is-active': activeTab === 'refund' }" v-if="isMultiUser">
+          <li
+            :class="{ 'is-active': activeTab === 'refund' }"
+            v-if="isMultiUser"
+          >
             <a href="#" @click.prevent="toggleTab('refund')">
               <awe-icon icon="exchange-alt" />
             </a>
           </li>
         </ul>
       </div>
-      <transition-group :name="transitionName" tag="div" mode="out-in" v-if="transactions.length">
+      <transition-group
+        :name="transitionName"
+        tag="div"
+        mode="out-in"
+        v-if="transactions.length"
+      >
         <div
           key="transaction"
           class="transaction-panel tab-content columns is-centered"
           v-if="activeTab === 'transaction'"
         >
           <div class="column">
-            <account-transaction-list :account="account" :transactions="transactions" />
+            <account-transaction-list
+              :account="account"
+              :transactions="transactions"
+            />
           </div>
         </div>
-        <div key="tag" class="tag-panel tab-content columns is-centered" v-if="activeTab === 'tag'">
+        <div
+          key="tag"
+          class="tag-panel tab-content columns is-centered"
+          v-if="activeTab === 'tag'"
+        >
           <div class="column">
-            <tag-list :transactions="transactionWithoutRefund" :account="account" />
+            <tag-list
+              :transactions="transactionWithoutRefund"
+              :account="account"
+            />
           </div>
         </div>
         <div
@@ -82,7 +113,10 @@
           v-if="activeTab === 'balance'"
         >
           <div class="column">
-            <chart-balance :stats="userStats" :currency="account.mainCurrency" />
+            <chart-balance
+              :stats="userStats"
+              :currency="account.mainCurrency"
+            />
           </div>
         </div>
         <div
@@ -91,13 +125,19 @@
           v-if="activeTab === 'refund'"
         >
           <div class="column">
-            <div v-if="userRefunds.length" class="columns is-centered is-multiline">
+            <div
+              v-if="userRefunds.length"
+              class="columns is-centered is-multiline"
+            >
               <div
                 class="column is-one-fifth"
                 v-for="(refund, k) in userRefunds"
                 :key="`${refund.from.alias}-${refund.to.alias}`"
               >
-                <refund-transaction :refund="userRefunds[k]" :account="account" />
+                <refund-transaction
+                  :refund="userRefunds[k]"
+                  :account="account"
+                />
               </div>
             </div>
             <div v-else class="equilibrium">Le compte est à l'équilibre !</div>
@@ -136,7 +176,7 @@ import IRefund from '@/models/IRefund'
 import IStat from '@/models/IStat'
 import ITransaction from '@/models/ITransaction'
 import IUser from '@/models/IUser'
-import { primary, main, findDarkValue } from '@/utils'
+import { primary, main, findContrastColor, findDarkValue } from '@/utils'
 
 @Component({
   components: {
@@ -398,7 +438,7 @@ export default class AccountItem extends BaseAccount {
     }
     return {
       backgroundColor: this.account.color,
-      color: findDarkValue(this.account.color) || 'black'
+      color: findContrastColor(this.account.color) || 'black'
     }
   }