bubble maps

src/app/theme/sidebar/sidebar.service.ts

@@ -35,6 +35,10 @@ export class SidebarService {
         {
           title: 'Leaflet Maps',
           name: 'LeafletMaps',
+        },
+        {
+          title: 'Bubble Maps',
+          name: 'BubbleMaps',
         }
       ]
     },

src/app/theme/theme.constants.ts

@@ -5,11 +5,99 @@ export const layoutSizes = {
   resWidthHideSidebar: 500
 };
 
+export const colorScheme = {
+  primary: '#209e91',
+  info: '#2dacd1',
+  success: '#90b900',
+  warning: '#dfb81c',
+  danger: '#e85656',
+};
+
+export const bgColorPalette = {
+  blueStone: '#005562',
+  surfieGreen: '#0e8174',
+  silverTree: '#6eba8c',
+  gossip: '#b9f2a1',
+  white: '#ffffff',
+};
+
+export const layoutColors = {
+  primary: colorScheme.primary,
+  info: colorScheme.info,
+  success: colorScheme.success,
+  warning: colorScheme.warning,
+  danger: colorScheme.danger,
+
+  primaryLight: tint(colorScheme.primary, 30),
+  infoLight: tint(colorScheme.info, 30),
+  successLight: tint(colorScheme.success, 30),
+  warningLight: tint(colorScheme.warning, 30),
+  dangerLight: tint(colorScheme.danger, 30),
+
+  primaryDark: shade(colorScheme.primary, 15),
+  infoDark: shade(colorScheme.info, 15),
+  successDark: shade(colorScheme.success, 15),
+  warningDark: shade(colorScheme.warning, 15),
+  dangerDark: shade(colorScheme.danger, 15),
+
+  primaryBg: tint(colorScheme.primary, 20),
+  infoBg: tint(colorScheme.info, 20),
+  successBg: tint(colorScheme.success, 20),
+  warningBg: tint(colorScheme.warning, 20),
+  dangerBg: tint(colorScheme.danger, 20),
+
+  default: '#ffffff',
+  defaultText: '#ffffff',
+
+  bgColorPalette: {
+    blueStone: bgColorPalette.blueStone,
+    surfieGreen: bgColorPalette.surfieGreen,
+    silverTree: bgColorPalette.silverTree,
+    gossip: bgColorPalette.gossip,
+    white: bgColorPalette.white,
+
+    blueStoneDark: shade(bgColorPalette.blueStone, 15),
+    surfieGreenDark: shade(bgColorPalette.surfieGreen, 15),
+    silverTreeDark: shade(bgColorPalette.silverTree, 15),
+    gossipDark: shade(bgColorPalette.gossip, 15),
+    whiteDark: shade(bgColorPalette.white, 5),
+  }
+};
+
 export const layoutPaths = {
   images: {
     root: IMAGES_ROOT,
     profile: IMAGES_ROOT + 'app/profile/',
-    amMap: 'assets/img/theme/vendor/ammap//dist/ammap/images/',
+    amMap: 'assets/img/theme/vendor/ammap/',
     amChart: 'assets/img/theme/vendor/amcharts/dist/amcharts/images/'
   }
 };
+
+function shade(color, weight) {
+  return mix('#000000', color, weight);
+}
+
+function tint(color, weight) {
+  return mix('#ffffff', color, weight);
+}
+
+//SASS mix function
+function mix(color1, color2, weight) {
+  // convert a decimal value to hex
+  function d2h(d) {
+    return d.toString(16);
+  }
+  // convert a hex value to decimal
+  function h2d(h) {
+    return parseInt(h, 16);
+  }
+
+  var result = "#";
+  for(var i = 1; i < 7; i += 2) {
+    var color1Part = h2d(color1.substr(i, 2));
+    var color2Part = h2d(color2.substr(i, 2));
+    var resultPart = d2h(Math.floor(color2Part + (color1Part - color2Part) * (weight / 100.0)));
+    result += ('0' + resultPart).slice(-2);
+  }
+  return result;
+}