@igo2/core 1.13.0-alpha.1 → 1.13.1

package/style/index.theming.scss

@@ -1,63 +1,65 @@
 @use './node_modules/@angular/material/_index.scss' as mat;
-@mixin igo-all-theming($theme, $typography: $igo-typography) {
-  @include igo-theming($theme, $typography);
-  @include igo-common-theming($theme, $typography);
-  @include igo-geo-theming($theme, $typography);
-}
+@use './node_modules/@angular/cdk' as cdk;
 
-$igo-typography: mat.define-typography-config(
-  $display-4:     mat.define-typography-level(110px, 110px, 300),
-  $display-3:     mat.define-typography-level(54px, 54px, 400),
-  $display-2:     mat.define-typography-level(43px, 46px, 400),
-  $display-1:     mat.define-typography-level(32px, 38px, 400),
-  $headline:      mat.define-typography-level(22px, 30px, 400),
-  $title:         mat.define-typography-level(18px, 30px, 500),
-  $subheading-2:  mat.define-typography-level(14px, 26px, 400),
-  $subheading-1:  mat.define-typography-level(13px, 22px, 400),
-  $body-2:        mat.define-typography-level(12px, 22px, 500),
-  $body-1:        mat.define-typography-level(12px, 18px, 400),
-  $caption:       mat.define-typography-level(12px, 18px, 400),
-  $button:        mat.define-typography-level(13px, 13px, 500),
-  $input:         mat.define-typography-level(14px, 1.25, 400)
-);
-
-@function theme-foreground($palette) {
-    $color: mat.get-color-from-palette($palette, 500);
-    @return (
-        base:              $color,
-        divider:           rgba($color, 0.12),
-        dividers:          rgba($color, 0.12),
-        disabled:          rgba($color, 0.38),
-        disabled-button:   rgba($color, 0.26),
-        disabled-text:     rgba($color, 0.38),
-        elevation:         $color,
-        hint-text:         rgba($color, 0.38),
-        secondary-text:    rgba($color, 0.54),
-        icon:              rgba($color, 0.54),
-        icons:             rgba($color, 0.54),
-        text:              rgba($color, 0.87),
-        slider-min:        rgba($color, 0.87),
-        slider-off:        rgba($color, 0.26),
-        slider-off-active: rgba($color, 0.38)
-    );
-};
-
-button.mat-menu-item {
-  line-height: 24px !important;
-}
-a.mat-menu-item > mat-icon {
-  margin-bottom: 14px;
-}
-.mat-icon svg {
-  height: 24px;
-  width: 24px;
-}
-
-@mixin igo-theming($theme, $typography) {
-  @include mat.core($typography);
-
-  @include igo-core-theming($theme, $typography);
-}
+$igo-typography: mat.define-typography-config(
+  $display-4:     mat.define-typography-level(110px, 110px, 300),
+  $display-3:     mat.define-typography-level(54px, 54px, 400),
+  $display-2:     mat.define-typography-level(43px, 46px, 400),
+  $display-1:     mat.define-typography-level(32px, 38px, 400),
+  $headline:      mat.define-typography-level(22px, 30px, 400),
+  $title:         mat.define-typography-level(18px, 30px, 500),
+  $subheading-2:  mat.define-typography-level(14px, 26px, 400),
+  $subheading-1:  mat.define-typography-level(13px, 22px, 400),
+  $body-2:        mat.define-typography-level(12px, 22px, 500),
+  $body-1:        mat.define-typography-level(12px, 18px, 400),
+  $caption:       mat.define-typography-level(12px, 18px, 400),
+  $button:        mat.define-typography-level(13px, 13px, 500),
+  $input:         mat.define-typography-level(14px, 1.25, 400)
+);
+
+@include mat.core($igo-typography);
+
+@mixin igo-all-theming($theme, $typography: $igo-typography) {
+  @include igo-theming($theme, $typography);
+  @include igo-common-theming($theme, $typography);
+  @include igo-geo-theming($theme, $typography);
+}
+
+@function theme-foreground($palette) {
+    $color: mat.get-color-from-palette($palette, 500);
+    @return (
+        base:              $color,
+        divider:           rgba($color, 0.12),
+        dividers:          rgba($color, 0.12),
+        disabled:          rgba($color, 0.38),
+        disabled-button:   rgba($color, 0.26),
+        disabled-text:     rgba($color, 0.38),
+        elevation:         $color,
+        hint-text:         rgba($color, 0.38),
+        secondary-text:    rgba($color, 0.54),
+        icon:              rgba($color, 0.54),
+        icons:             rgba($color, 0.54),
+        text:              rgba($color, 0.87),
+        slider-min:        rgba($color, 0.87),
+        slider-off:        rgba($color, 0.26),
+        slider-off-active: rgba($color, 0.38)
+    );
+};
+
+button.mat-menu-item {
+  line-height: 24px !important;
+}
+a.mat-menu-item > mat-icon {
+  margin-bottom: 14px;
+}
+.mat-icon svg {
+  height: 24px;
+  width: 24px;
+}
+
+@mixin igo-theming($theme, $typography) {
+  @include igo-core-theming($theme, $typography);
+}
 
 /* based on angular-toastr css https://github.com/Foxandxss/angular-toastr/blob/cb508fe6801d6b288d3afc525bb40fee1b101650/dist/angular-toastr.css */
 
@@ -251,39 +253,47 @@ button.toast-close-button {
     width: 25em;
   }
 }
-
-
-@mixin igo-core-theming($theme, $typography) {
-  @include igo-message-theming($theme, $typography);
-
-  button.mat-icon-button.mat-button-base[disabled="true"] {
-      color: rgba(0,0,0,.26);
-  }
-}
 
-@mixin igo-message-theming($theme, $typography) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-
-  .toast-error {
-    background-color: mat.get-color-from-palette($warn);
-  }
-  .toast-info {
-    background-color: mat.get-color-from-palette($primary);
-  }
-  .toast-title {
-    line-height: 23px;
-    font-size: 15px;
-    font-weight: bold;
-    font-family:  Roboto, "Helvetica Neue", sans-serif;
-  }
-  .toast-message {
-    line-height: 18px;
-    font-size: mat.font-size($typography, subheading-2);
-    font-family:  Roboto, "Helvetica Neue", sans-serif;
-  }
-}
+
+@mixin igo-core-theming($theme, $typography) {
+  @include igo-message-theming($theme, $typography);
+
+  button.mat-icon-button.mat-button-base[disabled="true"] {
+      color: rgba(0,0,0,.26);
+  }
+}
+
+@mixin igo-message-theming($theme, $typography) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  .toast-error {
+    background-color: mat.get-color-from-palette($warn);
+  }
+
+  .toast-info {
+    background-color: mat.get-color-from-palette($primary);
+  }
+  
+  .toast-no-icon { 
+    background-image: none;
+    padding-left: 6%;
+  }
+
+  .toast-title {
+    line-height: 23px;
+    font-size: 15px;
+    font-weight: bold;
+    font-family:  Roboto, "Helvetica Neue", sans-serif;
+  }
+  .toast-message {
+    line-height: 18px;
+    font-size: mat.font-size($typography, subheading-2);
+    font-family:  Roboto, "Helvetica Neue", sans-serif;
+  }
+
+}
 
 .shepherd-button{background:#3288e6;border:0;border-radius:3px;color:hsla(0,0%,100%,.75);cursor:pointer;margin-right:.5rem;padding:.5rem 1.5rem;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:#196fcc;color:hsla(0,0%,100%,.75)}.shepherd-button.shepherd-button-secondary{background:#f1f2f3;color:rgba(0,0,0,.75)}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:rgba(0,0,0,.75)}.shepherd-button:disabled{cursor:not-allowed}
 .shepherd-footer{border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:flex-end;padding:0 .75rem .75rem}.shepherd-footer .shepherd-button:last-child{margin-right:0}
@@ -293,260 +303,271 @@ button.toast-close-button {
 .shepherd-text{color:rgba(0,0,0,.75);font-size:1rem;line-height:1.3em;padding:.75em}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0}
 .shepherd-content{border-radius:5px;outline:none;padding:0}
 .shepherd-element{background:#fff;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.2);max-width:400px;opacity:0;outline:none;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#e6e6e6}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}
-.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}
-
-@mixin igo-common-theming($theme, $typography) {
-  @include igo-action-theming($theme);
-  @include igo-collapsible-theming($theme);
-  @include igo-entity-theming($theme);
-  @include igo-list-theming($theme);
-  @include igo-panel-theming($theme);
-  @include igo-tool-theming($theme);
-  @include igo-tour-theming($theme);
-  @include igo-home-button-theming($theme);
-}
+.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}
 
-@mixin igo-action-theming($theme) {
-  @include igo-actionbar-theming($theme);
-}
+@mixin igo-common-theming($theme, $typography) {
+  @include igo-action-theming($theme);
+  @include igo-collapsible-theming($theme);
+  @include igo-entity-theming($theme);
+  @include igo-list-theming($theme);
+  @include igo-panel-theming($theme);
+  @include igo-tool-theming($theme);
+  @include igo-tour-theming($theme);
+  @include igo-home-button-theming($theme);
+}
 
-@mixin igo-actionbar-theming($theme) {  
-  .igo-actionbar-overlay {
-    min-width: inherit !important;
-    padding-top: 0;
-    padding-bottom: 0;
-  
-    .mat-list {
-      padding-top: 0
-    }
-  
-    .mat-list .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text {
-      padding-right: 16px;
-    }
-  
-    .mat-menu-content:not(:empty) {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-  }
-}
+@mixin igo-action-theming($theme) {
+  @include igo-actionbar-theming($theme);
+}
 
-@mixin igo-collapsible-theming($theme) {
-  mat-icon[mat-list-avatar][igocollapse] {
-    &:hover {
-      cursor: pointer;
-    }
-
-    &.igo-chevron {
-      width: auto !important;
-      transform: rotateZ(0deg);
-      transition: 300ms ease-in-out;
-
-      &.collapsed {
-        transform: rotateZ(180deg);
-        transition: 300ms ease-in-out;
-      }
-    }
-  }
-
-  div.igo-collapsed {
-    display: none !important;
-  }
-
-}
+@mixin igo-actionbar-theming($theme) {  
+  .igo-actionbar-overlay {
+    min-width: inherit !important;
+    padding-top: 0;
+    padding-bottom: 0;
+  
+    .mat-list {
+      padding-top: 0
+    }
+  
+    .mat-list .mat-list-item.mat-list-item-with-avatar .mat-list-item-content .mat-list-text {
+      padding-right: 16px;
+    }
+  
+    .mat-menu-content:not(:empty) {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}
 
-@mixin igo-entity-theming($theme) {
-  @include igo-entity-table-theming($theme);
-}
+@mixin igo-collapsible-theming($theme) {
+  mat-icon[mat-list-avatar][igocollapse] {
+    &:hover {
+      cursor: pointer;
+    }
 
-@mixin igo-entity-table-theming($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-
-  igo-entity-table table.igo-entity-table-with-selection tr.igo-entity-table-row-highlighted {
-    background-color: mat.get-color-from-palette($primary, A100);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-}
+    &.igo-chevron {
+      width: auto !important;
+      transform: rotateZ(0deg);
+      transition: 300ms ease-in-out;
 
-@mixin igo-home-button-theming($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $foreground: map-get($theme, foreground);
-
-  igo-home-button > #homeButton {
-    background-color: mat.get-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-
-    &:hover {
-      background-color: mat.get-color-from-palette($accent, lighter);
-      color: black;
-    }
-  }
-}
-
+      &.collapsed {
+        transform: rotateZ(180deg);
+        transition: 300ms ease-in-out;
+      }
+    }
+  }
 
-@mixin igo-list-theming($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-
-  igo-list [igolistitem][color="primary"].igo-list-item-selected > mat-list-item {
-    background-color: mat.get-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-
-  igo-list [igolistitem][color="accent"].igo-list-item-selected > mat-list-item {
-    background-color: mat.get-color-from-palette($accent);
-    color: mat.get-color-from-palette($accent, default-contrast);
-  }
-
-  igo-list [igolistitem].igo-list-item-disabled > mat-list-item {
-    color: rgba(0, 0, 0, 0.38);
-  }
-
-  igo-list [igolistitem][color="primary"]:not(.igo-list-item-disabled):hover > mat-list-item,
-  igo-list [igolistitem][color="primary"].igo-list-item-focused > mat-list-item {
-    background-color: mat.get-color-from-palette($primary, lighter);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-
-  igo-list [igolistitem][color="accent"]:not(.igo-list-item-disabled):hover > mat-list-item,
-  igo-list [igolistitem][color="accent"].igo-list-item-focused > mat-list-item {
-    background-color: mat.get-color-from-palette($accent, lighter);
-    color: mat.get-color-from-palette($accent, default-contrast);
-  }
-}
+  div.igo-collapsed {
+    display: none !important;
+  }
 
-@mixin igo-panel-theming($theme) {
-  $primary: map-get($theme, primary);
-
-  igo-panel > div.igo-panel-header {
-    background-color: mat.get-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-
-}
+}
 
-@mixin igo-tool-theming($theme) {
-  @include igo-toolbox-theming($theme);
-}
+@mixin igo-entity-theming($theme) {
+  @include igo-entity-table-theming($theme);
+}
 
-@mixin igo-toolbox-theming($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $foreground: map-get($theme, foreground);
-
-  igo-toolbox > igo-actionbar mat-list.mat-list-base igo-actionbar-item mat-list-item {
-    &:hover {
-      background-color: mat.get-color-from-palette($accent, lighter);
-    }
-
-    &.tool-activated,
-    &.children-tool-activated {
-      background-color: mat.get-color-from-palette($accent);
-      cursor: default;
-      button {
-        cursor: default;
-      }
-    }
-  }
-
-  igo-toolbox > igo-actionbar:not(.with-title) > mat-list {
-    & > #lowChevron,
-    & > #topChevron {
-      &:hover {
-        background-color: mat.get-color-from-palette($accent, lighter);
-        color: black;
-      }
-    }
-  }
-
-  igo-toolbox.color-primary > igo-actionbar:not(.with-title) {
-    box-shadow: unset;
-    background-color: mat.get-color-from-palette($primary);
-    #lowChevron,
-    #topChevron {
-      background-color: mat.get-color-from-palette($primary);
-      color: white;
-    }
-  }
-
-  igo-toolbox.color-grey > igo-actionbar:not(.with-title) {
-    box-shadow: unset;
-    background-color: #737475;
-    #lowChevron,
-    #topChevron {
-      background-color: #737475;
-      color: white;
-    }
-  }
-
-  igo-toolbox.color-primary,
-  igo-toolbox.color-grey {
-    & > igo-actionbar:not(.with-title) mat-list.mat-list-base {
-      .mat-list-item.mat-list-item-with-avatar {
-        color: white;
-        &:hover {
-          color: black;
-        }
-
-        &.tool-activated,
-        &.children-tool-activated {
-          background-color: white;
-          color: black;
-        }
-      }
-    }
-  }
-
-}
+@mixin igo-entity-table-theming($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
 
-@mixin igo-tour-theming($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-
-  igo-interactive-tour > button.mat-raised-button.tour-button-tool-icon {
-    box-shadow: none;
-  }
-
-  igo-interactive-tour > button.tour-button-tool-icon {
-    background-color: mat.get-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-
-    box-shadow: none;
-    border:none;
-    border-radius: 50%;
-    padding: 0;
-    min-width: 0;
-    width: 40px;
-    height: 40px;
-    flex-shrink: 0;
-    line-height: 40px;
-  }
-
-  igo-interactive-tour > button.tour-button-tool-icon span.interactive-tour-button-title {
-    display: none;
-  }
-
-  igo-interactive-tour > button.tour-button-tool {
-    background-color: mat.get-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-    border: none;
-  }
-
-  igo-interactive-tour > button.tour-button-tool-icon:hover {
-    background-color: mat.get-color-from-palette($primary, default-contrast);
-    color: mat.get-color-from-palette($primary);
-    cursor: pointer;
-  }
-}
+  igo-entity-table table.igo-entity-table-with-selection tr.igo-entity-table-row-highlighted {
+    background-color: mat.get-color-from-palette($primary, A100);
+    color: mat.get-color-from-palette($primary, default-contrast);
+  }
+}
+
+@mixin igo-home-button-theming($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $foreground: map-get($theme, foreground);
+
+  igo-home-button > #homeButton {
+    background-color: mat.get-color-from-palette($primary);
+    color: mat.get-color-from-palette($primary, default-contrast);
+
+    &:hover {
+      background-color: mat.get-color-from-palette($accent, lighter);
+      color: black;
+    }
+  }
+}
+
+
+@mixin igo-list-theming($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+
+  igo-list [igolistitem][color="primary"].igo-list-item-selected > mat-list-item {
+    background-color: mat.get-color-from-palette($primary);
+    color: mat.get-color-from-palette($primary, default-contrast);
+  }
+
+  igo-list [igolistitem][color="accent"].igo-list-item-selected > mat-list-item {
+    background-color: mat.get-color-from-palette($accent);
+    color: mat.get-color-from-palette($accent, default-contrast);
+  }
+
+  igo-list [igolistitem].igo-list-item-disabled > mat-list-item {
+    color: rgba(0, 0, 0, 0.38);
+  }
+
+  igo-list [igolistitem][color="primary"]:not(.igo-list-item-disabled):hover > mat-list-item,
+  igo-list [igolistitem][color="primary"].igo-list-item-focused > mat-list-item {
+    background-color: mat.get-color-from-palette($primary, lighter);
+    color: mat.get-color-from-palette($primary, default-contrast);
+  }
+
+  igo-list [igolistitem][color="accent"]:not(.igo-list-item-disabled):hover > mat-list-item,
+  igo-list [igolistitem][color="accent"].igo-list-item-focused > mat-list-item {
+    background-color: mat.get-color-from-palette($accent, lighter);
+    color: mat.get-color-from-palette($accent, default-contrast);
+  }
+}
+
+@mixin igo-panel-theming($theme) {
+  $primary: map-get($theme, primary);
+
+  igo-panel > div.igo-panel-header {
+    background-color: mat.get-color-from-palette($primary);
+    color: mat.get-color-from-palette($primary, default-contrast);
+  }
+
+}
+
+@mixin igo-tool-theming($theme) {
+  @include igo-toolbox-theming($theme);
+}
+
+@mixin igo-toolbox-theming($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $foreground: map-get($theme, foreground);
+
+  igo-toolbox > igo-actionbar mat-list.mat-list-base igo-actionbar-item mat-list-item {
+    &:hover {
+      background-color: mat.get-color-from-palette($accent, lighter);
+    }
+
+    &.tool-activated,
+    &.children-tool-activated {
+      background-color: mat.get-color-from-palette($accent);
+      cursor: default;
+      button {
+        cursor: default;
+      }
+    }
+  }
+
+  igo-toolbox > igo-actionbar:not(.with-title) > mat-list {
+    & > #lowChevron,
+    & > #topChevron {
+      &:hover {
+        background-color: mat.get-color-from-palette($accent, lighter);
+        color: black;
+      }
+    }
+  }
+
+  igo-toolbox.color-primary > igo-actionbar:not(.with-title) {
+    box-shadow: unset;
+    background-color: mat.get-color-from-palette($primary);
+    #lowChevron,
+    #topChevron {
+      background-color: mat.get-color-from-palette($primary);
+      color: white;
+    }
+  }
+
+  igo-toolbox.color-grey > igo-actionbar:not(.with-title) {
+    box-shadow: unset;
+    background-color: #737475;
+    #lowChevron,
+    #topChevron {
+      background-color: #737475;
+      color: white;
+    }
+  }
+
+  igo-toolbox.color-primary,
+  igo-toolbox.color-grey {
+    & > igo-actionbar:not(.with-title) mat-list.mat-list-base {
+      .mat-list-item.mat-list-item-with-avatar {
+        color: white;
+        &:hover {
+          color: black;
+        }
+
+        &.tool-activated,
+        &.children-tool-activated {
+          background-color: white;
+          color: black;
+        }
+      }
+    }
+  }
+
+}
+
+@mixin igo-tour-theming($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  igo-interactive-tour > button.mat-raised-button.tour-button-tool-icon {
+    box-shadow: none;
+  }
+
+  igo-interactive-tour > button.tour-button-tool-icon {
+    background-color: mat.get-color-from-palette($primary);
+    color: mat.get-color-from-palette($primary, default-contrast);
+
+    box-shadow: none;
+    border:none;
+    border-radius: 50%;
+    padding: 0;
+    min-width: 0;
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    line-height: 40px;
+  }
+
+  igo-interactive-tour > button.tour-button-tool-icon span.interactive-tour-button-title {
+    display: none;
+  }
+
+  igo-interactive-tour > button.tour-button-tool {
+    background-color: mat.get-color-from-palette($primary);
+    color: mat.get-color-from-palette($primary, default-contrast);
+    border: none;
+  }
+
+  igo-interactive-tour > button.tour-button-tool-icon:hover {
+    background-color: mat.get-color-from-palette($primary, default-contrast);
+    color: mat.get-color-from-palette($primary);
+    cursor: pointer;
+  }
+}
+
+:root,
+:host {
+  --ol-background-color: white;
+  --ol-accent-background-color: #F5F5F5;
+  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
+  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
+  --ol-foreground-color: #333333;
+  --ol-subtle-foreground-color: #666666;
+  --ol-brand-color: #00AAFF;
+}
 
 .ol-box {
   box-sizing: border-box;
   border-radius: 2px;
-  border: 1.5px solid rgb(179,197,219);
-  background-color: rgba(255,255,255,0.4);
+  border: 1.5px solid var(--ol-background-color);
+  background-color: var(--ol-partial-background-color);
 }
 
 .ol-mouse-position {
@@ -556,118 +577,142 @@ button.toast-close-button {
 }
 
 .ol-scale-line {
-  background: rgba(0,60,136,0.3);
+  background: var(--ol-partial-background-color);
   border-radius: 4px;
   bottom: 8px;
   left: 8px;
   padding: 2px;
   position: absolute;
 }
+
 .ol-scale-line-inner {
-  border: 1px solid #eee;
+  border: 1px solid var(--ol-subtle-foreground-color);
   border-top: none;
-  color: #eee;
+  color: var(--ol-foreground-color);
   font-size: 10px;
   text-align: center;
   margin: 1px;
   will-change: contents, width;
   transition: all 0.25s;
 }
+
 .ol-scale-bar {
   position: absolute;
   bottom: 8px;
   left: 8px;
 }
+
+.ol-scale-bar-inner {
+  display: flex;
+}
+
 .ol-scale-step-marker {
   width: 1px;
   height: 15px;
-  background-color: #000000;
+  background-color: var(--ol-foreground-color);
   float: right;
   z-index: 10;
 }
+
 .ol-scale-step-text {
   position: absolute;
   bottom: -5px;
-  font-size: 12px;
+  font-size: 10px;
   z-index: 11;
-  color: #000000;
-  text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
+  color: var(--ol-foreground-color);
+  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
 }
+
 .ol-scale-text {
   position: absolute;
-  font-size: 14px;
+  font-size: 12px;
   text-align: center;
   bottom: 25px;
-  color: #000000;
-  text-shadow: -2px 0 #FFFFFF, 0 2px #FFFFFF, 2px 0 #FFFFFF, 0 -2px #FFFFFF;
+  color: var(--ol-foreground-color);
+  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
 }
+
 .ol-scale-singlebar {
   position: relative;
   height: 10px;
   z-index: 9;
   box-sizing: border-box;
-  border: 1px solid black;
+  border: 1px solid var(--ol-foreground-color);
+}
+
+.ol-scale-singlebar-even {
+  background-color: var(--ol-subtle-foreground-color);
+}
+
+.ol-scale-singlebar-odd {
+  background-color: var(--ol-background-color);
 }
 
 .ol-unsupported {
   display: none;
 }
-.ol-viewport, .ol-unselectable {
+
+.ol-viewport,
+.ol-unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: transparent;
 }
+
 .ol-viewport canvas {
   all: unset;
 }
+
 .ol-selectable {
   -webkit-touch-callout: default;
   -webkit-user-select: text;
   -moz-user-select: text;
-  -ms-user-select: text;
   user-select: text;
 }
+
 .ol-grabbing {
   cursor: -webkit-grabbing;
   cursor: -moz-grabbing;
   cursor: grabbing;
 }
+
 .ol-grab {
   cursor: move;
   cursor: -webkit-grab;
   cursor: -moz-grab;
   cursor: grab;
 }
+
 .ol-control {
   position: absolute;
-  background-color: rgba(255,255,255,0.4);
+  background-color: var(--ol-subtle-background-color);
   border-radius: 4px;
-  padding: 2px;
-}
-.ol-control:hover {
-  background-color: rgba(255,255,255,0.6);
 }
+
 .ol-zoom {
   top: .5em;
   left: .5em;
 }
+
 .ol-rotate {
   top: .5em;
   right: .5em;
   transition: opacity .25s linear, visibility 0s linear;
 }
+
 .ol-rotate.ol-hidden {
   opacity: 0;
   visibility: hidden;
   transition: opacity .25s linear, visibility 0s linear .25s;
 }
+
 .ol-zoom-extent {
   top: 4.643em;
   left: .5em;
 }
+
 .ol-full-screen {
   right: .5em;
   top: .5em;
@@ -677,7 +722,7 @@ button.toast-close-button {
   display: block;
   margin: 1px;
   padding: 0;
-  color: white;
+  color: var(--ol-subtle-foreground-color);
   font-weight: bold;
   text-decoration: none;
   font-size: inherit;
@@ -685,42 +730,49 @@ button.toast-close-button {
   height: 1.375em;
   width: 1.375em;
   line-height: .4em;
-  background-color: rgba(0,60,136,0.5);
+  background-color: var(--ol-background-color);
   border: none;
   border-radius: 2px;
 }
+
 .ol-control button::-moz-focus-inner {
   border: none;
   padding: 0;
 }
+
 .ol-zoom-extent button {
   line-height: 1.4em;
 }
+
 .ol-compass {
   display: block;
   font-weight: normal;
-  font-size: 1.2em;
   will-change: transform;
 }
+
 .ol-touch .ol-control button {
   font-size: 1.5em;
 }
+
 .ol-touch .ol-zoom-extent {
   top: 5.5em;
 }
+
 .ol-control button:hover,
 .ol-control button:focus {
   text-decoration: none;
-  background-color: rgba(0,60,136,0.7);
+  outline: 1px solid var(--ol-subtle-foreground-color);
+  color: var(--ol-foreground-color);
 }
+
 .ol-zoom .ol-zoom-in {
   border-radius: 2px 2px 0 0;
 }
+
 .ol-zoom .ol-zoom-out {
   border-radius: 0 0 2px 2px;
 }
 
-
 .ol-attribution {
   text-align: right;
   bottom: .5em;
@@ -730,47 +782,58 @@ button.toast-close-button {
   flex-flow: row-reverse;
   align-items: center;
 }
+
 .ol-attribution a {
-  color: rgba(0,60,136,0.7);
+  color: var(--ol-subtle-foreground-color);
   text-decoration: none;
 }
+
 .ol-attribution ul {
   margin: 0;
   padding: 1px .5em;
-  color: #000;
-  text-shadow: 0 0 2px #fff;
+  color: var(--ol-foreground-color);
+  text-shadow: 0 0 2px var(--ol-background-color);
   font-size: 12px;
 }
+
 .ol-attribution li {
   display: inline;
   list-style: none;
 }
+
 .ol-attribution li:not(:last-child):after {
   content: " ";
 }
+
 .ol-attribution img {
   max-height: 2em;
   max-width: inherit;
   vertical-align: middle;
 }
+
 .ol-attribution button {
   flex-shrink: 0;
 }
+
 .ol-attribution.ol-collapsed ul {
   display: none;
 }
+
 .ol-attribution:not(.ol-collapsed) {
-  background: rgba(255,255,255,0.8);
+  background: var(--ol-partial-background-color);
 }
+
 .ol-attribution.ol-uncollapsible {
   bottom: 0;
   right: 0;
   border-radius: 4px 0 0;
 }
+
 .ol-attribution.ol-uncollapsible img {
   margin-top: -.2em;
   max-height: 1.6em;
 }
+
 .ol-attribution.ol-uncollapsible button {
   display: none;
 }
@@ -780,6 +843,7 @@ button.toast-close-button {
   left: .5em;
   height: 200px;
 }
+
 .ol-zoomslider button {
   position: relative;
   height: 10px;
@@ -793,456 +857,462 @@ button.toast-close-button {
   left: 0.5em;
   bottom: 0.5em;
 }
+
 .ol-overviewmap.ol-uncollapsible {
   bottom: 0;
   left: 0;
   border-radius: 0 4px 0 0;
 }
+
 .ol-overviewmap .ol-overviewmap-map,
 .ol-overviewmap button {
   display: block;
 }
+
 .ol-overviewmap .ol-overviewmap-map {
-  border: 1px solid #7b98bc;
+  border: 1px solid var(--ol-subtle-foreground-color);
   height: 150px;
-  margin: 2px;
   width: 150px;
 }
+
 .ol-overviewmap:not(.ol-collapsed) button {
-  bottom: 2px;
-  left: 2px;
+  bottom: 0;
+  left: 0;
   position: absolute;
 }
+
 .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
 .ol-overviewmap.ol-uncollapsible button {
   display: none;
 }
+
 .ol-overviewmap:not(.ol-collapsed) {
-  background: rgba(255,255,255,0.8);
+  background: var(--ol-subtle-background-color);
 }
+
 .ol-overviewmap-box {
-  border: 2px dotted rgba(0,60,136,0.7);
+  border: 1.5px dotted var(--ol-subtle-foreground-color);
 }
 
 .ol-overviewmap .ol-overviewmap-box:hover {
   cursor: move;
 }
-
-
-@mixin igo-geo-theming($theme, $typography) {
-  @include igo-drawingTool-theming($theme, $typography);
-  @include igo-feature-theming($theme);
-  @include igo-filter-theming($theme, $typography);
-  @include igo-layer-theming($theme);
-  @include igo-map-theming($theme, $typography);
-  @include igo-measure-theming($theme, $typography);
-  @include igo-directions-theming($theme);
-  @include igo-workspace-theming($theme, $typography);
-}
 
-@mixin igo-directions-theming($theme) {
-  @include igo-directions-results-theming($theme);
-}
 
-@mixin igo-directions-results-theming($theme) {
-  $accent: map-get($theme, accent);
-
-  igo-directions-results mat-list-item.igo-steps:hover {
-    background-color: mat.get-color-from-palette($accent, lighter);
-  }
-}
+@mixin igo-geo-theming($theme, $typography) {
+  @include igo-drawingTool-theming($theme, $typography);
+  @include igo-feature-theming($theme);
+  @include igo-filter-theming($theme, $typography);
+  @include igo-layer-theming($theme);
+  @include igo-map-theming($theme, $typography);
+  @include igo-measure-theming($theme, $typography);
+  @include igo-directions-theming($theme);
+  @include igo-workspace-theming($theme, $typography);
+}
 
-@mixin igo-drawingTool-theming($theme, $typography) {
-  @include igo-draw-theming($theme, $typography);
-}
+@mixin igo-directions-theming($theme) {
+  @include igo-directions-results-theming($theme);
+}
 
-@mixin igo-draw-theming($theme, $typography) {
-    $foreground: map-get($theme, foreground);
-  
-    .igo-map-tooltip {
-      position: relative;
-      border-radius: 4px;
-      padding: 4px 8px;
-      white-space: nowrap;
-    }
-  
-    .igo-map-tooltip-draw {
-      color: mat.get-color-from-palette($foreground, text);
-      font-weight: bold;
-      font-size: mat.font-size($typography, subheading-2);
-    }
-    
-    igo-draw-popup-component {
-      h1 {
-        font-size: mat.font-size($typography, display-1);
-        font-family:  Roboto, "Helvetica Neue", sans-serif;
-      }
-    }
- }
-
-@mixin igo-feature-theming($theme) {
-  @include igo-feature-details-theming($theme);
-}
+@mixin igo-directions-results-theming($theme) {
+  $accent: map-get($theme, accent);
 
-@mixin igo-feature-details-theming($theme) {
-  $is-dark: map-get($theme, is-dark);
-  $foreground: map-get($theme, foreground);
-  $background: map-get($theme, background);
-
-  igo-feature-details > table.igo-striped tbody tr:nth-child(odd) {
-    background-color: mat.get-color-from-palette($background, if($is-dark, app-bar, status-bar));
-    color: black;
-  }
-
-}
+  igo-directions-results mat-list-item.igo-steps:hover {
+    background-color: mat.get-color-from-palette($accent, lighter);
+  }
+}
 
-@mixin igo-filter-theming($theme, $typography) {
-  @include igo-time-filter-form-theming($theme);
-  @include igo-ogc-filter-time-slider-theming($theme);
-  @include igo-ogc-filter-selection-theming($theme);
-}
+@mixin igo-drawingTool-theming($theme, $typography) {
+  @include igo-draw-theming($theme, $typography);
+}
 
-@mixin igo-ogc-filter-selection-theming($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $dark: mat.define-palette(mat.$grey-palette, 800, 700, 900);
-
-  mat-button-toggle.mat-button-toggle-checked {
-    background-color: mat.get-color-from-palette($accent);
-    color: mat.get-color-from-palette($dark);
-  }
-
-  mat-button-toggle {
-    color: black !important;
-  }
-}
+@mixin igo-draw-theming($theme, $typography) {
+    $foreground: map-get($theme, foreground);
+  
+    .igo-map-tooltip {
+      position: relative;
+      border-radius: 4px;
+      padding: 4px 8px;
+      white-space: nowrap;
+    }
+  
+    .igo-map-tooltip-draw {
+      color: mat.get-color-from-palette($foreground, text);
+      font-weight: bold;
+      font-size: mat.font-size($typography, subheading-2);
+    }
+    
+    igo-draw-popup-component {
+      h1 {
+        font-size: mat.font-size($typography, display-1);
+        font-family:  Roboto, "Helvetica Neue", sans-serif;
+      }
+    }
+ }
 
-@mixin igo-ogc-filter-time-slider-theming($theme) {
-    $primary: map-get($theme, primary);    
-    $color: mat.define-palette(mat.$yellow-palette);
-
-    .mat-slider-thumb-label {
-        transform: rotate(45deg) !important;
-        border-radius: 50% 50% 0 !important;
-      }
-  }
-
-@mixin igo-time-filter-form-theming($theme) {
-  $primary: map-get($theme, primary);
-
-  mat-datetimepicker-calendar > div.mat-datetimepicker-calendar-header {
-    color: mat.get-color-from-palette($primary);
-  }
-
-  mat-datetimepicker-calendar > div.mat-datetimepicker-calendar-content .mat-datetimepicker-calendar-body-active {
-    background-color: mat.get-color-from-palette($primary, lighter);
-    border-radius: 100%;
-  }
-}
+@mixin igo-feature-theming($theme) {
+  @include igo-feature-details-theming($theme);
+}
 
-@mixin igo-layer-theming($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-
-  @include igo-layer-legend-theming($theme);
-
-  igo-layer-item.igo-layer-item-focused > mat-list-item {
-    background-color: mat.get-color-from-palette($accent, lighter);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-
-  .mat-menu-opacity-slider{
-    box-shadow: 0 2px 4px -1px rgba(0,0,0,.5), 0 4px 5px 0 rgba(0,0,0,.15), 0 1px 10px 0 rgba(0,0,0,.4)
-  }
-}
+@mixin igo-feature-details-theming($theme) {
+  $is-dark: map-get($theme, is-dark);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
 
-@mixin igo-layer-legend-theming($theme) {
-  $primary: map-get($theme, primary);
-
-  igo-layer-legend img:after {
-    border-top-color: mat.get-color-from-palette($primary);
-  }
-}
+  igo-feature-details > table.igo-striped tbody tr:nth-child(odd) {
+    background-color: mat.get-color-from-palette($background, if($is-dark, app-bar, status-bar));
+    color: black;
+  }
 
-@mixin igo-map-theming($theme, $typography) {
-  @include igo-map-browser-theming($theme, $typography);
-  @include igo-zoom-button-theming($theme);
-  @include igo-menu-button-theming($theme);
-}
+}
 
-@mixin igo-map-browser-theming($theme, $typography) {
-  $primary: map-get($theme, primary);
-  $is-dark: map-get($theme, is-dark);
-
-  igo-map-browser div.ol-attribution > button {
-    color: mat.get-color-from-palette($primary, if($is-dark, default-contrast, default));
-    background-color: mat.get-color-from-palette(
-      $primary,
-      if($is-dark, default, default-contrast)
-    );
-  }
-
-  igo-map-browser div.ol-attribution > ul {
-    font-size: mat.font-size($typography, body-1);
-  }
-}
+@mixin igo-filter-theming($theme, $typography) {
+  @include igo-time-filter-form-theming($theme);
+  @include igo-ogc-filter-time-slider-theming($theme);
+  @include igo-ogc-filter-selection-theming($theme);
+}
 
-@mixin igo-zoom-button-theming($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $is-dark: map-get($theme, is-dark);
-
-  igo-zoom-button > div.igo-zoom-button-container > button {
-    &.mat-primary {
-      color: mat.get-color-from-palette($primary, if($is-dark, default-contrast, default));
-      background-color: mat.get-color-from-palette($primary, if($is-dark, default, default-contrast));
-    }
-
-    &.mat-accent {
-      color: mat.get-color-from-palette($accent, if($is-dark, default-contrast, default));
-      background-color: mat.get-color-from-palette($accent, if($is-dark, default, default-contrast));
-    }
-  }
-
-}
+@mixin igo-ogc-filter-selection-theming($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $dark: mat.define-palette(mat.$grey-palette, 800, 700, 900);
 
-@mixin igo-menu-button-theming($theme) {
-  $primary: map-get($theme, primary);
-
-  igo-menu-button > #menu-button {
-    color: mat.get-color-from-palette($primary);
-  }
-
-  igo-menu-button > #menu-button.menu-button-reverse-color-close {
-    background-color: mat.get-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-
-  igo-menu-button > #menu-button.menu-button-reverse-color {
-    background-color: mat.get-color-from-palette($primary);
-    color: mat.get-color-from-palette($primary, default-contrast);
-  }
-}
-
+  mat-button-toggle.mat-button-toggle-checked {
+    background-color: mat.get-color-from-palette($accent);
+    color: mat.get-color-from-palette($dark);
+  }
 
-@mixin igo-measure-theming($theme, $typography) {
-  @include igo-measurer-theming($theme, $typography);
-}
+  mat-button-toggle {
+    color: black !important;
+  }
+}
 
-@mixin igo-measurer-theming($theme, $typography) {
-  $foreground: map-get($theme, foreground);
-
-  .igo-map-tooltip {
-    position: relative;
-    border-radius: 4px;
-    padding: 4px 8px;
-    white-space: nowrap;
-  }
-
-  .igo-map-tooltip-measure {
-    background-color: rgba(255, 204, 51, 0.7);
-    border: 1px solid rgb(255, 205, 51);
-    color: black;
-    font-weight: bold;
-    font-size: mat.font-size($typography, subheading-2);
-  }
-  .igo-map-tooltip-hidden {
-    display: none;
-  }
-  .igo-map-tooltip-measure-by-display{
-    display: none;
-  }
-}
+@mixin igo-ogc-filter-time-slider-theming($theme) {
+    $primary: map-get($theme, primary);    
+    $color: mat.define-palette(mat.$yellow-palette);
 
-@mixin igo-workspace-theming($theme, $typography) {
-  @include igo-confirmation-popup-theming($theme, $typography);
-}
+    .mat-slider-thumb-label {
+        transform: rotate(45deg) !important;
+        border-radius: 50% 50% 0 !important;
+      }
+  }
 
-@mixin igo-confirmation-popup-theming($theme, $typography) {
-    $foreground: map-get($theme, foreground);
-
-    igo-confirmation-popup-component {
-      h1 {
-        font-size: mat.font-size($typography, display-1);
-        font-family:  Roboto, "Helvetica Neue", sans-serif;
-      }
-    }
- }
-
-.blue-theme {
-    $primary: mat.define-palette(mat.$blue-palette, 700, 400, 900);
-    $accent: mat.define-palette(mat.$blue-palette, 200);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $temp-theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    $foreground: theme-foreground(mat.define-palette(mat.$grey-palette, 900));
-    $theme: map-merge($temp-theme, (foreground: $foreground));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+@mixin igo-time-filter-form-theming($theme) {
+  $primary: map-get($theme, primary);
 
-.bluedq-theme {
-    $dq-palette: (
-        50 : #e3eaec,
-        100 : #b9cad0,
-        200 : #8ba7b1,
-        300 : #5c8391,
-        400 : #39697a,
-        500 : #164e62,
-        600 : #13475a,
-        700 : #103d50,
-        800 : #0c3546,
-        900 : #062534,
-        A100 : #6dc6ff,
-        A200 : #3ab2ff,
-        A400 : #079eff,
-        A700 : #0090ec,
-        contrast: (
-            50 : #000000,
-            100 : #000000,
-            200 : #000000,
-            300 : #ffffff,
-            400 : #ffffff,
-            500 : #ffffff,
-            600 : #ffffff,
-            700 : #ffffff,
-            800 : #ffffff,
-            900 : #ffffff,
-            A100 : #000000,
-            A200 : #000000,
-            A400 : #ffffff,
-            A700 : #ffffff,
-        )
-    );
-
-    $primary: mat.define-palette($dq-palette, 500);
-    $accent: mat.define-palette($dq-palette, 200);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $temp-theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    $foreground: theme-foreground(mat.define-palette(mat.$grey-palette, 900));
-    $theme: map-merge($temp-theme, (foreground: $foreground));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+  mat-datetimepicker-calendar > div.mat-datetimepicker-calendar-header {
+    color: mat.get-color-from-palette($primary);
+  }
 
-.bluegrey-theme {
-    $primary: mat.define-palette(mat.$blue-grey-palette);
-    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-    $warn: mat.define-palette(mat.$deep-orange-palette);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+  mat-datetimepicker-calendar > div.mat-datetimepicker-calendar-content .mat-datetimepicker-calendar-body-active {
+    background-color: mat.get-color-from-palette($primary, lighter);
+    border-radius: 100%;
+  }
+}
 
-.deeppurple-theme {
-    $primary: mat.define-palette(mat.$deep-purple-palette);
-    $accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+@mixin igo-layer-theming($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
 
-.indigo-theme {
-    $primary: mat.define-palette(mat.$indigo-palette);
-    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+  @include igo-layer-legend-theming($theme);
 
-.orange-theme {
-    $primary: mat.define-palette(mat.$orange-palette, 800);
-    $accent: mat.define-palette(mat.$light-blue-palette, 600, 100, 800);
-    $warn: mat.define-palette(mat.$red-palette, 600);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+  igo-layer-item.igo-layer-item-focused > mat-list-item {
+    background-color: mat.get-color-from-palette($accent, lighter);
+    color: mat.get-color-from-palette($primary, default-contrast);
+  }
 
-.dark-theme {
-    $primary: mat.define-palette(mat.$blue-grey-palette);
-    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-    $warn: mat.define-palette(mat.$deep-orange-palette);
-
-    $theme: mat.define-dark-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+  .mat-menu-opacity-slider{
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,.5), 0 4px 5px 0 rgba(0,0,0,.15), 0 1px 10px 0 rgba(0,0,0,.4)
+  }
+}
 
-.teal-theme {
-    $primary: mat.define-palette(mat.$teal-palette, 600, 400, 900);
-    $accent: mat.define-palette(mat.$teal-palette, 400);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+@mixin igo-layer-legend-theming($theme) {
+  $primary: map-get($theme, primary);
+
+  igo-layer-legend img:after {
+    border-top-color: mat.get-color-from-palette($primary);
+  }
+}
+
+@mixin igo-map-theming($theme, $typography) {
+  @include igo-map-browser-theming($theme, $typography);
+  @include igo-zoom-button-theming($theme);
+  @include igo-menu-button-theming($theme);
+}
+
+@mixin igo-map-browser-theming($theme, $typography) {
+  $primary: map-get($theme, primary);
+  $is-dark: map-get($theme, is-dark);
+
+  igo-map-browser div.ol-attribution > button {
+    color: mat.get-color-from-palette($primary, if($is-dark, default-contrast, default));
+    background-color: mat.get-color-from-palette(
+      $primary,
+      if($is-dark, default, default-contrast)
+    );
+  }
+
+  igo-map-browser div.ol-attribution > ul {
+    font-size: mat.font-size($typography, body-1);
+  }
+}
+
+@mixin igo-zoom-button-theming($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $is-dark: map-get($theme, is-dark);
+
+  igo-zoom-button > div.igo-zoom-button-container > button {
+    &.mat-primary {
+      color: mat.get-color-from-palette($primary, if($is-dark, default-contrast, default));
+      background-color: mat.get-color-from-palette($primary, if($is-dark, default, default-contrast));
+    }
+
+    &.mat-accent {
+      color: mat.get-color-from-palette($accent, if($is-dark, default-contrast, default));
+      background-color: mat.get-color-from-palette($accent, if($is-dark, default, default-contrast));
+    }
+  }
+
+}
+
+@mixin igo-menu-button-theming($theme) {
+  $primary: map-get($theme, primary);
+
+  igo-menu-button > #menu-button {
+    color: mat.get-color-from-palette($primary);
+  }
+
+  igo-menu-button > #menu-button.menu-button-reverse-color-close {
+    background-color: mat.get-color-from-palette($primary);
+    color: mat.get-color-from-palette($primary, default-contrast);
+  }
+
+  igo-menu-button > #menu-button.menu-button-reverse-color {
+    background-color: mat.get-color-from-palette($primary);
+    color: mat.get-color-from-palette($primary, default-contrast);
+  }
+}
+
+
+@mixin igo-measure-theming($theme, $typography) {
+  @include igo-measurer-theming($theme, $typography);
+}
+
+@mixin igo-measurer-theming($theme, $typography) {
+  $foreground: map-get($theme, foreground);
+
+  .igo-map-tooltip {
+    position: relative;
+    border-radius: 4px;
+    padding: 4px 8px;
+    white-space: nowrap;
+  }
+
+  .igo-map-tooltip-measure {
+    background-color: rgba(255, 204, 51, 0.7);
+    border: 1px solid rgb(255, 205, 51);
+    color: black;
+    font-weight: bold;
+    font-size: mat.font-size($typography, subheading-2);
+  }
+  .igo-map-tooltip-hidden {
+    display: none;
+  }
+  .igo-map-tooltip-measure-by-display{
+    display: none;
+  }
+}
+
+@mixin igo-workspace-theming($theme, $typography) {
+  @include igo-confirmation-popup-theming($theme, $typography);
+}
+
+@mixin igo-confirmation-popup-theming($theme, $typography) {
+    $foreground: map-get($theme, foreground);
+
+    igo-confirmation-popup-component {
+      h1 {
+        font-size: mat.font-size($typography, display-1);
+        font-family:  Roboto, "Helvetica Neue", sans-serif;
+      }
+    }
+ }
+
+.blue-theme {
+    $primary: mat.define-palette(mat.$blue-palette, 700, 400, 900);
+    $accent: mat.define-palette(mat.$blue-palette, 200);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $temp-theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    $foreground: theme-foreground(mat.define-palette(mat.$grey-palette, 900));
+    $theme: map-merge($temp-theme, (foreground: $foreground));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}
+
+.bluedq-theme {
+    $dq-palette: (
+        50 : #e1f5fd,
+        100 : #b4e5fb,
+        200 : #82d4f8,
+        300 : #53c3f4,
+        400 : #31B6f2,
+        500 : #0d81df,
+        600 : #149Be1,
+        700 : #1088cd,
+        800 : #0F77B9,
+        900 : #095797,
+        A100 : #6dc6ff,
+        A200 : #3ab2ff,
+        A400 : #079eff,
+        A700 : #0090ec,
+        contrast: (
+            50 : #000000,
+            100 : #000000,
+            200 : #000000,
+            300 : #000000,
+            400 : #000000,
+            500 : #000000,
+            600 : #ffffff,
+            700 : #ffffff,
+            800 : #ffffff,
+            900 : #ffffff,
+            A100 : #000000,
+            A200 : #000000,
+            A400 : #ffffff,
+            A700 : #ffffff,
+        )
+    );
+
+    $primary: mat.define-palette($dq-palette, 900);
+    $accent: mat.define-palette($dq-palette, 500);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $temp-theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    $foreground: theme-foreground(mat.define-palette(mat.$grey-palette, 900));
+    $theme: map-merge($temp-theme, (foreground: $foreground));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}
+
+.bluegrey-theme {
+    $primary: mat.define-palette(mat.$blue-grey-palette);
+    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+    $warn: mat.define-palette(mat.$deep-orange-palette);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}
+
+.deeppurple-theme {
+    $primary: mat.define-palette(mat.$deep-purple-palette);
+    $accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}
+
+.indigo-theme {
+    $primary: mat.define-palette(mat.$indigo-palette);
+    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}
+
+.orange-theme {
+    $primary: mat.define-palette(mat.$orange-palette, 800);
+    $accent: mat.define-palette(mat.$light-blue-palette, 600, 100, 800);
+    $warn: mat.define-palette(mat.$red-palette, 600);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}
+
+.dark-theme {
+    $primary: mat.define-palette(mat.$blue-grey-palette);
+    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+    $warn: mat.define-palette(mat.$deep-orange-palette);
+
+    $theme: mat.define-dark-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}
+
+.teal-theme {
+    $primary: mat.define-palette(mat.$teal-palette, 600, 400, 900);
+    $accent: mat.define-palette(mat.$teal-palette, 400);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}
 
 .qcca-theme {
     $qcca-palette: (