qms-angular 1.0.88 → 1.0.91

package/src/themes/core/_tab.scss

@@ -1,12 +1,13 @@
-@import "colors";
-@import "./colors";
+@import "../theme/variable";
+@import "../theme/mixins";
+
 .mat-tab-group{
     &.qms-tab-group{
         .qms-tab-label{
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: $tab-dark-background;
+            color: theme-apply($tab-dark-background);
             font-family: Open Sans, Arial, Sans-Serif;
         }
 
@@ -16,7 +17,7 @@
 
         .mat-tab-label-active{
             .qms-tab-label{
-                color: $active;
+                color: theme-apply($active);
                 font-weight: 600;
             }
         }
@@ -35,12 +36,12 @@
             opacity: 1;
             height: auto;
             min-height: 48px;
-            &:hover, 
+            &:hover,
             &:focus-visible,
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled),
             .mat-ripple-element{
-                background: $tab-disable-background;
+                background: theme-apply($tab-disable-background);
             }
         }
 
@@ -48,12 +49,12 @@
             .mat-tab-header-pagination-chevron{
                 border-color: black(0.38);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-border;
+                border-color: theme-apply($tab-border);
             }
         }
     }
@@ -63,7 +64,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: $popup-title-color;
+            color: theme-apply($popup-title-color);
             font-family: Open Sans, Arial, Sans-Serif;
             font-weight: 400;
             .mat-icon{
@@ -73,10 +74,10 @@
 
         .mat-tab-label-active{
             .qms-tab-label{
-                color: $active;
+                color: theme-apply($active);
                 font-weight: 600;
                 .mat-icon{
-                    color: $active;
+                    color: theme-apply($active);
                 }
             }
         }
@@ -102,37 +103,37 @@
 
         .mat-ripple.mat-tab-label{
             &:hover{
-                background: $tab-hover-background;
+                background: theme-apply($tab-hover-background);
                 .qms-tab-label{
                     font-weight: 600;
                 }
             }
 
             &:focus-visible{
-                background-color: $tab-hover-background;
+                background-color: theme-apply($tab-hover-background);
             }
 
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled){
-                background: $tab-hover-background;
+                background: theme-apply($tab-hover-background);
             }
 
             .mat-ripple-element{
-                background-color: $tab-hover-background
+                background-color: theme-apply($tab-hover-background)
             }
-            
+
             &.mat-tab-label-active{
                 &:hover{
-                    background: $tab-hover-background;
+                    background: theme-apply($tab-hover-background);
                     .qms-tab-label{
                         font-weight: 600;
                     }
                 }
-                
+
                 &:focus-visible, .mat-ripple-element,
-                &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+                &.cdk-keyboard-focused:not(.mat-tab-disabled),
                 &.cdk-program-focused:not(.mat-tab-disabled){
-                    background: $tab-disable-background;
+                    background: theme-apply($tab-disable-background);
                 }
             }
         }
@@ -140,21 +141,21 @@
             .mat-tab-header-pagination-chevron{
                 border-color: black(0.38);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-border;
+                border-color: theme-apply($tab-border);
             }
         }
     }
 
     &.qms-tab-group-advanced.primary{
-        background: $tab-dark-background;
+        background: theme-apply($tab-dark-background);
 
         .mat-tab-labels{
-            border-bottom: 1px solid $tab-primary-label;
+            border-bottom: 1px solid theme-apply($tab-primary-label);
         }
         .qms-tab-label{
             display: flex;
@@ -163,16 +164,16 @@
             color: white;
             font-weight: 400;
             .mat-icon{
-                color: $tab-primary-icon;
+                color: theme-apply($tab-primary-icon);
             }
         }
 
 
         .mat-tab-disabled{
             .qms-tab-label{
-                color: $tab-primary-label;
+                color: theme-apply($tab-primary-label);
                 .mat-icon{
-                    color: $tab-primary-label;
+                    color: theme-apply($tab-primary-label);
                 }
             }
         }
@@ -180,7 +181,7 @@
         .mat-tab-label-active{
             .qms-tab-label{
                 color: white;
-                font-weight: 600;  
+                font-weight: 600;
                 .mat-icon{
                     color: white;
                 }
@@ -189,44 +190,44 @@
 
         .mat-ripple.mat-tab-label{
             &:hover{
-                background: $tab-primary-background-hover;
+                background: theme-apply($tab-primary-background-hover);
                 .qms-tab-label{
                     font-weight: 600;
                 }
             }
 
             &:focus-visible{
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
 
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled){
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
 
             .mat-ripple-element{
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
-            
+
             &.mat-tab-label-active{
                 &:hover{
-                    background: $tab-primary-background-hover;
+                    background: theme-apply($tab-primary-background-hover);
                     .qms-tab-label{
                         font-weight: 600;
                     }
                 }
-                
+
                 &:focus-visible{
-                    background-color: $tab-primary-label;
+                    background-color: theme-apply($tab-primary-label);
                 }
 
                 .mat-ripple-element{
-                    background-color:$tab-primary-label;;
+                    background-color:theme-apply($tab-primary-label);;
                 }
             }
-            
+
             &.mat-tab-disabled:hover{
-                background: $tab-dark-background;
+                background: theme-apply($tab-dark-background);
             }
         }
 
@@ -238,9 +239,9 @@
 
         .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-primary-border;
+                border-color: theme-apply($tab-primary-border);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
@@ -269,7 +270,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: $tab-dark-background;
+            color: theme-apply($tab-dark-background);
             font-family: Open Sans, Arial, Sans-Serif;
         }
 
@@ -278,7 +279,7 @@
         }
 
         .mat-tab-label-active{
-            color: $active;
+            color: theme-apply($active);
             font-weight: 600;
         }
 
@@ -296,12 +297,12 @@
             opacity: 1;
             height: auto;
             min-height: 48px;
-            &:hover, 
+            &:hover,
             &:focus-visible,
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled),
             .mat-ripple-element{
-                background: $tab-disable-background;
+                background: theme-apply($tab-disable-background);
             }
         }
 
@@ -313,12 +314,12 @@
             .mat-tab-header-pagination-chevron{
                 border-color: black(0.38);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-border;
+                border-color: theme-apply($tab-border);
             }
         }
     }
@@ -328,7 +329,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: $tab-dark-background;
+            color: theme-apply($tab-dark-background);
             font-family: Open Sans, Arial, Sans-Serif;
             font-weight: 400;
             .mat-icon{
@@ -339,9 +340,9 @@
         .mat-tab-label-active{
             &.qms-tab-label{
                 font-weight: 600;
-                color: $active;
+                color: theme-apply($active);
                 .mat-icon{
-                    color: $active;
+                    color: theme-apply($active);
                 }
             }
         }
@@ -367,35 +368,35 @@
 
         .mat-tab-link{
             &:hover{
-                background: $tab-hover-background;
+                background: theme-apply($tab-hover-background);
                 font-weight: 600;
             }
 
             &:focus-visible{
-                background-color: $tab-hover-background;
+                background-color: theme-apply($tab-hover-background);
             }
 
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled){
-                background: $tab-hover-background;
+                background: theme-apply($tab-hover-background);
             }
 
             .mat-ripple-element{
-                background-color: $tab-hover-background
+                background-color: theme-apply($tab-hover-background)
             }
-            
+
             &.mat-tab-label-active{
                 &:hover{
-                    background: $tab-hover-background;
+                    background: theme-apply($tab-hover-background);
                     .qms-tab-label{
                         font-weight: 600;
                     }
                 }
-                
+
                 &:focus-visible, .mat-ripple-element,
-                &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+                &.cdk-keyboard-focused:not(.mat-tab-disabled),
                 &.cdk-program-focused:not(.mat-tab-disabled){
-                    background: $tab-disable-background;
+                    background: theme-apply($tab-disable-background);
                 }
             }
         }
@@ -403,19 +404,19 @@
             .mat-tab-header-pagination-chevron{
                 border-color: black(0.38);
             }
-            
+
         }
 
         .mat-tab-header-pagination{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-border;
+                border-color: theme-apply($tab-border);
             }
         }
     }
 
     &.qms-tab-group-advanced.primary{
-        background: $tab-dark-background;
-        
+        background: theme-apply($tab-dark-background);
+
         .qms-tab-label{
             display: flex;
             flex-direction: column;
@@ -423,15 +424,15 @@
             color: white;
             font-weight: 400;
             .mat-icon{
-                color: $tab-primary-icon;
+                color: theme-apply($tab-primary-icon);
             }
         }
-        
+
         .mat-tab-disabled{
             &.qms-tab-label{
-                color: $tab-primary-label;
+                color: theme-apply($tab-primary-label);
                 .mat-icon{
-                    color: $tab-primary-label;
+                    color: theme-apply($tab-primary-label);
                 }
             }
         }
@@ -443,46 +444,46 @@
                 color: white;
             }
         }
-        
+
 
         .mat-tab-link{
             &:hover{
-                background: $tab-primary-background-hover;
+                background: theme-apply($tab-primary-background-hover);
                 font-weight: 600;
             }
 
             &:focus-visible{
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
 
-            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
+            &.cdk-keyboard-focused:not(.mat-tab-disabled),
             &.cdk-program-focused:not(.mat-tab-disabled){
-                background-color: $tab-primary-label;
+                background-color: theme-apply($tab-primary-label);
             }
 
             .mat-ripple-element{
-                background-color: $tab-dark-background;
+                background-color: theme-apply($tab-dark-background);
             }
-            
+
             &.mat-tab-label-active{
                 &:hover{
-                    background: $tab-primary-background-hover;
+                    background: theme-apply($tab-primary-background-hover);
                     .qms-tab-label{
                         font-weight: 600;
                     }
                 }
-                
+
                 &:focus-visible{
-                    background-color: $tab-primary-label;
+                    background-color: theme-apply($tab-primary-label);
                 }
 
                 .mat-ripple-element{
-                    background-color:$tab-primary-label;;
+                    background-color:theme-apply($tab-primary-label);;
                 }
             }
-            
+
             &.mat-tab-disabled:hover{
-                background: $tab-dark-background;
+                background: theme-apply($tab-dark-background);
             }
         }
 
@@ -494,9 +495,9 @@
 
         .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
             .mat-tab-header-pagination-chevron{
-                border-color: $tab-primary-border;
+                border-color: theme-apply($tab-primary-border);
             }
-            
+
         }
 
         .mat-tab-header-pagination{

package/src/themes/core/_table.scss

@@ -1,5 +1,6 @@
+@import "../theme/variable";
+@import "../theme/mixins";
 @import "typography";
-@import "colors";
 
 .qms-table {
     .mat-checkbox.qms-group-options {
@@ -11,7 +12,7 @@
         }
 
         &.mat-checkbox-indeterminate .mat-checkbox-background, &.mat-checkbox-checked .mat-checkbox-background {
-            background-color: $primary !important;
+            background-color: theme-apply($primary) !important;
         }
 
         &.mat-checkbox-checked {
@@ -67,6 +68,7 @@
         color: #323232;
         align-items: stretch;
         cursor: pointer;
+        transition: background 0.2s;
 
         mat-cell:first-of-type {
             padding: 0;
@@ -77,19 +79,28 @@
         }
 
         &[tabindex]:focus-visible {
-            outline: 2px auto $primary;
+            outline: 2px auto theme-apply($primary);
         }
 
-        &:active, &:hover {
+        &:hover {
             background: rgba(0, 0, 0, 0.08);
         }
 
+        &:active {
+            background: theme-apply($primary-light-24-opacity);
+        }
+
         &-selected {
-            background: $tab-focus-background;
+            background: theme-apply($tab-focus-background);
+            transition: background 0.2s;
 
             &:hover {
                 background: rgba(40, 115, 223, 0.06);
             }
+
+            &:active {
+                background: rgba(40, 115, 223, 0.16);
+            }
         }
 
         &-disabled {
@@ -123,7 +134,7 @@
             align-items: stretch!important;
             flex: unset;
             padding-left: 4px;
-    
+
             .qms-row-checkbox {
                 padding: 0 19px;
                 display: flex;
@@ -137,7 +148,7 @@
             .qms-row-checkbox-container:first-child {
                 align-items: stretch!important;
                 flex: unset;
-    
+
                 .qms-row-checkbox {
                     padding: 0 19px;
                     display: flex;
@@ -150,7 +161,7 @@
     &.qms-expand-table {
         .mat-header-cell {
             padding-left: 0;
-            
+
             .expand-icon-header {
                 margin-left: 15px;
             }
@@ -169,9 +180,14 @@
                 background: #F2F7FD;
                 border-bottom-left-radius: 0;
                 border-bottom-right-radius: 0;
+                transition: background 0.2s;
 
                 &:hover {
-                    background: rgba(40, 115, 223, 0.06);
+                    background: #E6EFFB;
+                }
+
+                &:active {
+                    background: rgba(40, 115, 223, 0.16);
                 }
 
                 .expand-icon {
@@ -181,7 +197,7 @@
                 }
 
                 mat-icon {
-                    color: $primary;
+                    color: theme-apply($primary);
                 }
             }
         }
@@ -196,33 +212,33 @@
         .qms-table-row {
             &.expandable-group {
                 padding-left: 0!important;
-                border-left: 4px solid $primary-light-32-opacity;
+                border-left: 4px solid theme-apply($primary-light-32-opacity);
                 border-radius: 4px 4px 0 0;
             }
         }
 
         .qms-collapse-group {
             border: 1px solid #E0E0E0;
-            border-left: 4px solid $primary-light-32-opacity;
+            border-left: 4px solid theme-apply($primary-light-32-opacity);
             border-bottom-left-radius: 4px;
             border-bottom-right-radius: 4px;
             border-top: none;
             padding-left: 12px;
             padding-top: 6px;
-            background: $background-area;
+            background: theme-apply($background-area);
 
             cursor: pointer;
 
             &[tabindex]:focus-visible {
-                outline: 2px auto $primary;
+                outline: 2px auto theme-apply($primary);
             }
-            
+
             .mat-icon {
-                color: $primary;
+                color: theme-apply($primary);
             }
             .qms-text-collapse {
                 vertical-align: super;
-                color: $primary;
+                color: theme-apply($primary);
                 font-weight: 600;
                 font-size: 12px;
                 line-height: 16px;
@@ -234,7 +250,7 @@
             margin-top: unset;
             border-radius: unset;
             padding-left: 0!important;
-            border-left: 4px solid $primary-light-32-opacity;
+            border-left: 4px solid theme-apply($primary-light-32-opacity);
         }
     }
 
@@ -244,4 +260,4 @@
             border-radius: 0;
         }
     }
-}
+}

package/src/themes/core/_text-block.scss

@@ -1,5 +1,7 @@
 @import  "../../lib/components/list/list.scss";
-@import "../../themes/core/colors";
+@import "../theme/variable";
+@import "../theme/mixins";
+
 .qms-text-block{
     font-family: Open Sans;
 

package/src/themes/theme/_mixins.scss

@@ -0,0 +1,18 @@
+@import 'variable';
+
+@mixin theme-map($map: ()) {
+  @each $key, $value in $map {
+      #{$key}: $value;
+  }
+}
+
+@function theme-apply($key, $fallback: null, $map:  $qms-theme-default) {
+  @if not map-has-key($map, $key) {
+      @error "key: '#{$key}', is not a key in map: #{$map}";
+  }
+  @if ($fallback) {
+      @return var($key, $fallback);
+  } @else {
+      @return var($key);
+  }
+}

package/src/themes/theme/_theme.scss

@@ -0,0 +1,17 @@
+@import 'variable';
+@import 'mixins';
+
+:root {
+    body{
+        @include theme-map($qms-theme-default);
+    }
+}
+
+:root{
+    body.qms-theme-pink {
+        @include theme-map($qms-theme-pink);
+    }
+}
+
+
+