fix(UI): Automatic foreground color

pangolinjs · Aug 5, 2019 · 1984f6f · 1984f6f
1 parent bf1bfa3
commit 1984f6f
Showing 10 changed files with 83 additions and 12 deletions.
diff --git a/lib/utils/get-config.js b/lib/utils/get-config.js
@@ -30,7 +30,7 @@ module.exports = (context) => {
       name: 'Pangolin',
       base: '/',
       branding: {
-        colorTheme: '#ff721f',
+        color: '#ff721f',
         favicon: 'favicon.ico'
       }
     },

diff --git a/test/project/pangolin.config.js b/test/project/pangolin.config.js
@@ -12,7 +12,7 @@
 //     name: 'Pangolin Test',
 //     base: '/base/',
 //     branding: {
-//       colorTheme: '#1e88e5',
+//       color: '#1e88e5',
 //       favicon: 'favicon.ico'
 //     }
 //   }

diff --git a/ui/src/components/CComponentHeader.vue b/ui/src/components/CComponentHeader.vue
@@ -1,6 +1,8 @@
 <template>
   <v-app-bar
     color="primary"
+    :light="light"
+    :dark="!light"
     app
     flat
     dense
@@ -29,8 +31,8 @@
       <v-tabs
         v-model="tab"
         align-with-title
-        color="secondary"
-        background-color="primary"
+        :color="color"
+        background-color="transparent"
       >
         <v-tab
           :to="{}"
@@ -67,6 +69,16 @@ export default {
     },
     render () {
       return `${pangolinBase}${this.$store.state.current.path}/render.html`
+    },
+    light () {
+      return this.$store.getters.isLightColor
+    },
+    color () {
+      if (this.$store.getters.isLightColor) {
+        return 'rgba(0, 0, 0, 0.87)'
+      }
+
+      return '#fff'
     }
   },
 

diff --git a/ui/src/components/CIndexFooter.vue b/ui/src/components/CIndexFooter.vue
@@ -8,7 +8,6 @@
       <v-list-item-content>
         <v-list-item-title>
           Powered by <a
-            class="orange--text orange--darken-3"
             href="https://pangolinjs.org"
             target="_blank"
           >Pangolin Pattern Library</a>.

diff --git a/ui/src/components/CIndexHeader.vue b/ui/src/components/CIndexHeader.vue
@@ -1,6 +1,8 @@
 <template>
   <v-app-bar
     color="primary"
+    :light="light"
+    :dark="!light"
     app
     flat
     dense
@@ -18,6 +20,12 @@ export default {
     title: 'Components'
   },
 
+  computed: {
+    light () {
+      return this.$store.getters.isLightColor
+    }
+  },
+
   methods: {
     toggleSidebar () {
       this.$store.commit('sidebar', !this.$store.state.sidebar)

diff --git a/ui/src/components/CSidebarDarkMode.vue b/ui/src/components/CSidebarDarkMode.vue
@@ -2,7 +2,7 @@
   <v-switch
     v-model="dark"
     class="sidebar-dark-mode"
-    color="primary"
+    :color="color"
     :prepend-icon="$icon.sun"
     :append-icon="$icon.moon"
   />
@@ -24,6 +24,13 @@ export default {
         localStorage.setItem(this.storageKey, JSON.stringify(value))
         this.$vuetify.theme.dark = value
       }
+    },
+    color () {
+      if (this.$vuetify.theme.dark && !this.$store.getters.isLightColor) {
+        return '#fff'
+      }
+
+      return this.$store.getters.color
     }
   },
 

diff --git a/ui/src/components/CSidebarTree.vue b/ui/src/components/CSidebarTree.vue
@@ -5,6 +5,7 @@
     :active.sync="active"
     :open.sync="open"
     :search="search"
+    :color="color"
     activatable
     open-on-click
     dense
@@ -32,6 +33,13 @@ export default {
   },
 
   computed: {
+    color () {
+      if (this.$vuetify.theme.dark && !this.$store.getters.isLightColor) {
+        return '#fff'
+      }
+
+      return this.$store.getters.color
+    },
     items () {
       return this.$store.state.components
     },

diff --git a/ui/src/functions/isLightColor.js b/ui/src/functions/isLightColor.js
@@ -0,0 +1,32 @@
+/** !
+ * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
+ * Derived from work by Brian Suda, https://24ways.org/2010/calculating-color-contrast/
+ */
+
+/**
+ * Determine if color is light or dark
+ * @param {String} hexcolor Hex color value (#000 or #000000)
+ * @returns {String} The contrasting color (black or white)
+ */
+export default function (hexcolor) {
+  // Remove leading '#'
+  let color = hexcolor.slice(1)
+
+  // If a three-character hexcode, make six-character
+  if (color.length === 3) {
+    color = color.split('').map(value => value + value).join('')
+  }
+
+  // Convert to RGB value
+  const r = parseInt(color.slice(0, 2), 16)
+  const g = parseInt(color.slice(2, 4), 16)
+  const b = parseInt(color.slice(4, 6), 16)
+
+  // Get YIQ ratio
+  const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000
+
+  console.log(yiq)
+
+  // Check contrast
+  return yiq >= 128
+}
diff --git a/ui/src/main.js b/ui/src/main.js
@@ -27,18 +27,14 @@ Promise.all(requests)
     store.commit('project', project)
     store.commit('components', components)
 
-    const primary = (project.branding && project.branding.colorTheme) || '#ff721f'
-
     const vuetify = new Vuetify({
       theme: {
         themes: {
           light: {
-            primary,
-            secondary: '#282828'
+            primary: store.getters.color
           },
           dark: {
-            primary,
-            secondary: '#fff'
+            primary: store.getters.color
           }
         }
       },

diff --git a/ui/src/store/index.js b/ui/src/store/index.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import isLightColor from '../functions/isLightColor'
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
@@ -29,6 +31,13 @@ export default new Vuex.Store({
       }
 
       return find(state.components) || {}
+    },
+    color (state) {
+      const branding = state.project.branding
+      return (branding && branding.color) || '#ff721f'
+    },
+    isLightColor (state, getters) {
+      return isLightColor(getters.color)
     }
   },