Feature/customise widget

src/components/mixins/ChartSpecMixin.ts

@@ -62,18 +62,18 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
             fontWeight: 'bold',
           },
         },
-        color: this.theme.color.base.content.secondary,
+        color: this.chartTheme.color.base.content.secondary,
         offset: AXIS_OFFSET,
         ...AXIS_LABEL_CSS,
       },
       axisPointer: {
         lineStyle: {
-          color: this.theme.color.status.success,
+          color: this.chartTheme.color.status.success,
         },
         label: {
           show: true,
-          backgroundColor: this.theme.color.status.success,
-          color: this.theme.color.base.onAccent,
+          backgroundColor: this.chartTheme.color.status.success,
+          color: this.chartTheme.color.base.onAccent,
           fontSize: 11,
           fontWeight: 400,
           lineHeigth: 1.5,
@@ -99,24 +99,24 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       },
       axisLine: {
         lineStyle: {
-          color: this.theme.color.base.content.secondary,
+          color: this.chartTheme.color.base.content.secondary,
         },
       },
       axisPointer: {
         lineStyle: {
-          color: this.theme.color.status.success,
+          color: this.chartTheme.color.status.success,
         },
         label: {
           ...AXIS_LABEL_CSS,
-          backgroundColor: this.theme.color.status.success,
+          backgroundColor: this.chartTheme.color.status.success,
           fontWeight: 400,
           padding: [LABEL_PADDING, LABEL_PADDING],
-          color: this.theme.color.base.onAccent,
+          color: this.chartTheme.color.base.onAccent,
         },
       },
       splitLine: {
         lineStyle: {
-          color: this.theme.color.base.content.tertiary,
+          color: this.chartTheme.color.base.content.tertiary,
           opacity: 0.2,
         },
       },
@@ -127,11 +127,11 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
     return merge({
       show: true,
       trigger: 'axis',
-      backgroundColor: this.theme.color.utility.body,
-      borderColor: this.theme.color.base.border.secondary,
-      extraCssText: `box-shadow: ${this.theme.shadow.dialog}; border-radius: ${this.theme.border.radius.mini}`,
+      backgroundColor: this.chartTheme.color.utility.body,
+      borderColor: this.chartTheme.color.base.border.secondary,
+      extraCssText: `box-shadow: ${this.chartTheme.shadow.dialog}; border-radius: ${this.chartTheme.border.radius.mini}`,
       textStyle: {
-        color: this.theme.color.base.content.secondary,
+        color: this.chartTheme.color.base.content.secondary,
         fontSize: 11,
         fontFamily: 'Sora',
         fontWeight: 400,
@@ -146,7 +146,7 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       },
       showSymbol: false,
       itemStyle: {
-        color: this.theme.color.theme.accent,
+        color: this.chartTheme.color.theme.accent,
       },
     })(options);
   }
@@ -159,7 +159,7 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       },
       showSymbol: false,
       itemStyle: {
-        color: this.theme.color.theme.accent,
+        color: this.chartTheme.color.theme.accent,
       },
     })(options);
   }
@@ -172,7 +172,7 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       },
       showSymbol: false,
       itemStyle: {
-        color: this.theme.color.theme.accent,
+        color: this.chartTheme.color.theme.accent,
       },
     })(options);
   }
@@ -182,10 +182,10 @@ export default class ChartSpecMixin extends Mixins(ThemePaletteMixin, Translatio
       type: 'candlestick',
       barMaxWidth: 10,
       itemStyle: {
-        color: this.theme.color.status.success,
-        borderColor: this.theme.color.status.success,
-        color0: this.theme.color.theme.accentHover,
-        borderColor0: this.theme.color.theme.accentHover,
+        color: this.chartTheme.color.status.success,
+        borderColor: this.chartTheme.color.status.success,
+        color0: this.chartTheme.color.theme.accentHover,
+        borderColor0: this.chartTheme.color.theme.accentHover,
         borderWidth: 2,
       },
     })(options);

src/components/mixins/ThemePaletteMixin.ts

@@ -1,16 +1,36 @@
+import Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
 import { Component, Vue } from 'vue-property-decorator';
 
-import { getter } from '@/store/decorators';
+import type { Color, ColorDirection, ColorType, DirectionType } from '@/consts/color';
+import { state, getter } from '@/store/decorators';
 import { getCssVariableValue as css } from '@/utils';
 
-import type Theme from '@soramitsu-ui/ui-vue2/lib/types/Theme';
+import store from '../../store';
 
 @Component
 export default class ThemePaletteMixin extends Vue {
+  @state.settings.colorType colorType!: ColorType;
   @getter.libraryTheme libraryTheme!: Theme;
 
-  get theme() {
+  get color(): ColorType {
+    return store.state.settings.colorType;
+  }
+
+  set color(value: ColorType) {
+    store.commit.settings.setColorType(value);
+  }
+
+  get direction(): DirectionType {
+    return store.state.settings.colorDirection;
+  }
+
+  set direction(value: DirectionType) {
+    store.commit.settings.setColorDirection(value);
+  }
+
+  get chartTheme() {
     const libraryTheme = this.libraryTheme;
+    const currentColor = this.getColorPalette();
 
     const palette = {
       color: {
@@ -33,8 +53,8 @@ export default class ThemePaletteMixin extends Vue {
           body: css('--s-color-utility-body'),
         },
         status: {
-          success: css('--s-color-status-success'),
-          error: css('--s-color-status-error'),
+          success: currentColor.side.buy,
+          error: currentColor.side.sell,
           warning: css('--s-color-status-warning'),
           info: css('--s-color-status-info'),
         },
@@ -51,4 +71,81 @@ export default class ThemePaletteMixin extends Vue {
 
     return !!libraryTheme && palette;
   }
+
+  isInversed = (value: boolean): boolean => {
+    const direction = this.getColorDirection();
+
+    return direction.type === 'classic' ? value : !value;
+  };
+
+  colors = (type?: ColorType, theme = Theme.LIGHT): any => {
+    const palette = {
+      classic: {
+        name: 'Classic',
+        type: 'classic',
+        side: { buy: css('--s-color-classic-up'), sell: css('--s-color-classic-down') },
+        priceChange: { up: css('--s-color-classic-price-change-up'), down: css('--s-color-classic-price-change-down') },
+        bookBars: {
+          buy: theme === Theme.LIGHT ? css('--s-color-classic-bar-light-buy') : css('--s-color-classic-bar-dark-buy'),
+          sell:
+            theme === Theme.LIGHT ? css('--s-color-classic-bar-light-sell') : css('--s-color-classic-bar-dark-sell'),
+        },
+      },
+      deficiency: {
+        name: 'Color deficiency',
+        type: 'deficiency',
+        side: { buy: css('--s-color-deficiency-up'), sell: css('--s-color-deficiency-down') },
+        priceChange: {
+          up: css('--s-color-deficiency-price-change-up'),
+          down: css('--s-color-deficiency-price-change-down'),
+        },
+        bookBars: {
+          buy:
+            theme === Theme.LIGHT
+              ? css('--s-color-deficiency-bar-light-buy')
+              : css('--s-color-deficiency-bar-dark-buy'),
+          sell:
+            theme === Theme.LIGHT
+              ? css('--s-color-deficiency-bar-light-sell')
+              : css('--s-color-deficiency-bar-dark-sell'),
+        },
+      },
+      traditional: {
+        name: 'Traditional',
+        type: 'traditional',
+        side: { buy: css('--s-color-traditional-up'), sell: css('--s-color-traditional-down') },
+        priceChange: {
+          up: css('--s-color-traditional-price-change-up'),
+          down: css('--s-color-tradtional-price-change-down'),
+        },
+        bookBars: {
+          buy:
+            theme === Theme.LIGHT
+              ? css('--s-color-traditional-bar-light-buy')
+              : css('--s-color-traditional-bar-dark-buy'),
+          sell:
+            theme === Theme.LIGHT
+              ? css('--s-color-traditional-bar-light-sell')
+              : css('--s-color-traditional-bar-dark-sell'),
+        },
+      },
+    };
+
+    if (!type) return palette;
+
+    return palette[type];
+  };
+
+  directions: Record<DirectionType, ColorDirection> = {
+    classic: { name: 'Green Up / Red down', type: 'classic' },
+    inverse: { name: 'Green down / Red up', type: 'inverse' },
+  };
+
+  getColorDirection = (type?: DirectionType): ColorDirection => {
+    return type ? this.directions[type] : this.directions[this.direction];
+  };
+
+  getColorPalette = (type?: ColorType, theme = Theme.LIGHT): Color => {
+    return type ? this.colors(type, theme) : this.colors(this.color, theme);
+  };
 }