fix: tweak colors

.eslintrc.js

@@ -1,18 +1,18 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   'extends': [
     'plugin:vue/essential',
-    '@vue/standard'
+    '@vue/standard',
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'comma-dangle': ['error', 'only-multiline']
+    'comma-dangle': ['error', 'only-multiline'],
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: 'babel-eslint',
   },
 }

src/data/charts/BubbleChartData.js

@@ -1,13 +1,13 @@
 import store from 'vuex-store'
-import utils from 'services/utils'
+import { hex2rgb } from '../../services/color-functions'
 
 let palette = store.getters.palette
 
 export default {
   datasets: [
     {
       label: 'USA',
-      backgroundColor: utils.hex2rgb(palette.danger, 0.9).css,
+      backgroundColor: hex2rgb(palette.danger, 0.9).css,
       borderColor: palette.transparent,
       data: [
         {
@@ -54,7 +54,7 @@ export default {
     },
     {
       label: 'Russia',
-      backgroundColor: utils.hex2rgb(palette.primary, 0.9).css,
+      backgroundColor: hex2rgb(palette.primary, 0.9).css,
       borderColor: palette.transparent,
       data: [
         {
@@ -101,7 +101,7 @@ export default {
     },
     {
       label: 'Canada',
-      backgroundColor: utils.hex2rgb(palette.warning, 0.9).css,
+      backgroundColor: hex2rgb(palette.warning, 0.9).css,
       borderColor: palette.transparent,
       data: [
         {
@@ -143,7 +143,7 @@ export default {
     },
     {
       label: 'Belarus',
-      backgroundColor: utils.hex2rgb(palette.info, 0.9).css,
+      backgroundColor: hex2rgb(palette.info, 0.9).css,
       borderColor: palette.transparent,
       data: [
         {
@@ -190,7 +190,7 @@ export default {
     },
     {
       label: 'Ukraine',
-      backgroundColor: utils.hex2rgb(palette.success, 0.9).css,
+      backgroundColor: hex2rgb(palette.success, 0.9).css,
       borderColor: palette.transparent,
       data: [
         {

src/data/charts/LineChartData.js

@@ -1,5 +1,5 @@
-import utils from 'services/utils'
 import store from 'vuex-store'
+import { hex2rgb } from '../../services/color-functions'
 
 let palette = store.getters.palette
 
@@ -31,13 +31,13 @@ export const getLineChartData = () => {
     datasets: [
       {
         label: yLabels[0],
-        backgroundColor: utils.hex2rgb(palette.primary, 0.6).css,
+        backgroundColor: hex2rgb(palette.primary, 0.6).css,
         borderColor: palette.transparent,
         data: generateArray(size),
       },
       {
         label: yLabels[1],
-        backgroundColor: utils.hex2rgb(palette.info, 0.6).css,
+        backgroundColor: hex2rgb(palette.info, 0.6).css,
         borderColor: palette.transparent,
         data: generateArray(size),
       },

src/services/color-functions.js

@@ -0,0 +1,51 @@
+export const hex2rgb = (hex, opacity) => {
+  hex = (hex + '').trim()
+
+  let rgb = null
+  let match = hex.match(/^#?(([0-9a-zA-Z]{3}){1,3})$/)
+
+  if (!match) {
+    return null
+  }
+
+  rgb = {}
+
+  hex = match[1]
+
+  if (hex.length === 6) {
+    rgb.r = parseInt(hex.substring(0, 2), 16)
+    rgb.g = parseInt(hex.substring(2, 4), 16)
+    rgb.b = parseInt(hex.substring(4, 6), 16)
+  } else if (hex.length === 3) {
+    rgb.r = parseInt(hex.substring(0, 1) + hex.substring(0, 1), 16)
+    rgb.g = parseInt(hex.substring(1, 2) + hex.substring(1, 2), 16)
+    rgb.b = parseInt(hex.substring(2, 3) + hex.substring(2, 3), 16)
+  }
+
+  rgb.css = 'rgb' + (opacity ? 'a' : '') + '('
+  rgb.css += rgb.r + ',' + rgb.g + ',' + rgb.b
+  rgb.css += (opacity ? ',' + opacity : '') + ')'
+
+  return rgb
+}
+
+export const getBoxShadowColor = (color) => {
+  return hex2rgb(color, 0.4).css
+}
+
+export const getHoverColor = (color) => {
+  return hex2rgb(color, 0.2).css
+}
+
+export const getFocusColor = (color) => {
+  return hex2rgb(color, 0.3).css
+}
+
+export const getGradientColor = (color) => {
+  return [hex2rgb(color, 0.6).css, hex2rgb(color, 0.95).css]
+}
+
+export const getGradientBackground = (color) => {
+  return 'linear-gradient(to right,' + getGradientColor(color)[0] +
+    ',' + getGradientColor(color)[1] + ')'
+}

src/services/colors.js

@@ -8,37 +8,6 @@ const themes = {
   dark: '#34495e'
 }
 
-function hex2rgb (hex, opacity) {
-  hex = (hex + '').trim()
-
-  let rgb = null
-  let match = hex.match(/^#?(([0-9a-zA-Z]{3}){1,3})$/)
-
-  if (!match) {
-    return null
-  }
-
-  rgb = {}
-
-  hex = match[1]
-
-  if (hex.length === 6) {
-    rgb.r = parseInt(hex.substring(0, 2), 16)
-    rgb.g = parseInt(hex.substring(2, 4), 16)
-    rgb.b = parseInt(hex.substring(4, 6), 16)
-  } else if (hex.length === 3) {
-    rgb.r = parseInt(hex.substring(0, 1) + hex.substring(0, 1), 16)
-    rgb.g = parseInt(hex.substring(1, 2) + hex.substring(1, 2), 16)
-    rgb.b = parseInt(hex.substring(2, 3) + hex.substring(2, 3), 16)
-  }
-
-  rgb.css = 'rgb' + (opacity ? 'a' : '') + '('
-  rgb.css += rgb.r + ',' + rgb.g + ',' + rgb.b
-  rgb.css += (opacity ? ',' + opacity : '') + ')'
-
-  return rgb
-}
-
 export const ColorPlugin = {
   install (Vue, options) {
     if (options && options.theme) {
@@ -52,24 +21,3 @@ export const ColorPlugin = {
     new Vue({ data: { themes: Vue.prototype.$themes } })
   }
 }
-
-export const getBoxShadowColor = (theme) => {
-  return hex2rgb(themes[theme], 0.4).css
-}
-
-export const getHoverColor = (theme) => {
-  return hex2rgb(themes[theme], 0.2).css
-}
-
-export const getFocusColor = (theme) => {
-  return hex2rgb(themes[theme], 0.3).css
-}
-
-export const getGradientColor = (theme) => {
-  return [ hex2rgb(themes[theme], 0.6).css, hex2rgb(themes[theme], 0.95).css ]
-}
-
-export const getGradientBackground = (theme) => {
-  return 'linear-gradient(to right,' + getGradientColor(theme)[0] +
-  ',' + getGradientColor(theme)[1] + ')'
-}

src/services/utils.js

@@ -30,15 +30,16 @@ export default {
     return rgb
   },
 
-  normalizeValue (value, minValue = 0, maxValue = 100) {
-    if (value <= minValue) {
-      return minValue
-    }
+}
 
-    if (value >= maxValue) {
-      return maxValue
-    }
+export const normalizeValue = (value, minValue = 0, maxValue = 100) => {
+  if (value <= minValue) {
+    return minValue
+  }
 
-    return value
+  if (value >= maxValue) {
+    return maxValue
   }
+
+  return value
 }

src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.demo.vue

@@ -88,8 +88,8 @@
 </template>
 
 <script>
-
 import VaButtonToggle from './VaButtonToggle'
+
 export default {
   components: {
     VaButtonToggle

src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.vue

@@ -20,7 +20,9 @@
 </template>
 
 <script>
-import { getGradientColor } from '../../../services/colors'
+import {
+  getGradientBackground,
+} from '../../../services/color-functions'
 
 export default {
   name: 'va-button-toggle',
@@ -70,8 +72,7 @@ export default {
         }
       } else {
         return {
-          backgroundColor: 'linear-gradient(to right,' + getGradientColor(this.color)[0] +
-            ',' + getGradientColor(this.color)[1] + ')',
+          backgroundColor: getGradientBackground(this.$themes[this.color]),
           filter: 'brightness(85%)'
         }
       }