@igo2/core 1.13.0-alpha.1 → 1.13.0

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,39 @@ 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-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,254 +295,254 @@ 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;
+  }
+}
 
 .ol-box {
   box-sizing: border-box;
@@ -573,6 +575,12 @@ button.toast-close-button {
   will-change: contents, width;
   transition: all 0.25s;
 }
+.ol-scale-singlebar-even{
+  background-color: #000000;
+}
+.ol-scale-singlebar-odd{
+  background-color: #ffffff;
+}
 .ol-scale-bar {
   position: absolute;
   bottom: 8px;
@@ -827,422 +835,422 @@ button.toast-close-button {
 .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: (