qms-angular 1.0.88 → 1.0.91

package/src/lib/components/button/_button-base.scss

@@ -1,6 +1,7 @@
 @import "../../../themes/core/variables";
-@import "../../../themes/core/colors";
 @import "../../../themes/core/typography";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 
 $margin: 0 !default;
 $border-radius: 4px !default;
@@ -56,7 +57,7 @@ $mini-fab-padding: 8px !default;
 
   &.qms-btn-disabled {
     cursor: default;
-    background: $disabled;
+    background: theme-apply($disabled);
     color: black(0.38);
   }
 
@@ -76,8 +77,7 @@ $mini-fab-padding: 8px !default;
   height: $size;
   padding: 0;
   flex-shrink: 0;
-  box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
-    0px 5px 5px black(0.2);
+  box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12), 0px 5px 5px black(0.2);
 
   .qms-btn-wrapper {
     padding: $padding 0;
@@ -87,8 +87,7 @@ $mini-fab-padding: 8px !default;
 }
 
 @mixin fab-ext {
-  box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
-    0px 5px 5px black(0.2);
+  box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12), 0px 5px 5px black(0.2);
   padding: $padding-ext;
   border-radius: $border-radius-ext;
   line-height: $line-height-ext;
@@ -117,7 +116,7 @@ $mini-fab-padding: 8px !default;
 
 @mixin qms-btn($color) {
   @if $color == primary {
-    background-color: $primary;
+    background-color: theme-apply($primary);
     color: white;
 
     &:not([disabled]):focus {
@@ -127,16 +126,16 @@ $mini-fab-padding: 8px !default;
     }
 
     &:not([disabled]):focus {
-      background-color: $primary;
+      background-color: theme-apply($primary);
       box-shadow: 0 0 0 2px #8caad4;
     }
 
     &:not([disabled]):hover {
-      background-color: $primary-light;
+      background-color: theme-apply($primary-light);
       color: white;
     }
   } @else if $color == secondary {
-    background-color: $secondary;
+    background-color: theme-apply($secondary);
     color: white;
 
     &:not([disabled]):focus {
@@ -146,12 +145,12 @@ $mini-fab-padding: 8px !default;
     }
 
     &:not([disabled]):focus {
-      background-color: $secondary;
+      background-color: theme-apply($secondary);
       box-shadow: 0 0 0 2px #cf9b87;
     }
 
     &:not([disabled]):hover {
-      background-color: $secondary-light;
+      background-color: theme-apply($secondary-light);
       color: white;
     }
   }
@@ -160,7 +159,7 @@ $mini-fab-padding: 8px !default;
 @mixin qms-btn-outlined($color) {
   @if $color == primary {
     background-color: white;
-    color: $primary;
+    color: theme-apply($primary);
     border: 1px solid black(0.12);
 
     &:not([disabled]):focus {
@@ -171,18 +170,18 @@ $mini-fab-padding: 8px !default;
 
     &:not([disabled]):focus {
       background-color: white;
-      color: $primary;
-      box-shadow: 0 0 0 2px $primary;
+      color: theme-apply($primary);
+      box-shadow: 0 0 0 2px theme-apply($primary);
     }
 
     &:not([disabled]):hover {
-      background-color: $primary-light-6-opacity;
-      color: $primary;
+      background-color: theme-apply($primary-light-6-opacity);
+      color: theme-apply($primary);
     }
   } @else if $color == secondary {
     background-color: white;
-    color: $secondary;
-    border: 1px solid $secondary;
+    color: theme-apply($secondary);
+    border: 1px solid theme-apply($secondary);
 
     &:not([disabled]):focus {
       &:not(:focus-visible) {
@@ -192,14 +191,14 @@ $mini-fab-padding: 8px !default;
 
     &:not([disabled]):focus {
       background-color: white;
-      color: $secondary-light;
-      box-shadow: 0 0 0 2px $secondary-dark;
+      color: theme-apply($secondary-light);
+      box-shadow: 0 0 0 2px theme-apply($secondary-dark);
     }
 
     &:not([disabled]):hover {
-      background-color: $secondary-light-6-opacity;
-      color: $secondary-light;
-      border: 1px solid $secondary-light;
+      background-color: theme-apply($secondary-light-6-opacity);
+      color: theme-apply($secondary-light);
+      border: 1px solid theme-apply($secondary-light);
     }
   }
 }
@@ -207,7 +206,7 @@ $mini-fab-padding: 8px !default;
 @mixin qms-btn-text($color) {
   @if $color == primary {
     background-color: transparent;
-    color: $primary;
+    color: theme-apply($primary);
 
     &:not([disabled]):focus {
       &:not(:focus-visible) {
@@ -217,17 +216,17 @@ $mini-fab-padding: 8px !default;
 
     &:not([disabled]):focus {
       background-color: transparent;
-      color: $primary;
-      box-shadow: 0 0 0 2px $primary;
+      color: theme-apply($primary);
+      box-shadow: 0 0 0 2px theme-apply($primary);
     }
 
     &:not([disabled]):hover {
-      background-color: $primary-light-6-opacity;
-      color: $primary;
+      background-color: theme-apply($primary-light-6-opacity);
+      color: theme-apply($primary);
     }
   } @else if $color == secondary {
     background-color: transparent;
-    color: $secondary;
+    color: theme-apply($secondary);
 
     &:not([disabled]):focus {
       &:not(:focus-visible) {
@@ -237,13 +236,13 @@ $mini-fab-padding: 8px !default;
 
     &:not([disabled]):focus {
       background-color: transparent;
-      color: $secondary-light;
-      box-shadow: 0 0 0 2px $secondary-dark;
+      color: theme-apply($secondary-light);
+      box-shadow: 0 0 0 2px theme-apply($secondary-dark);
     }
 
     &:not([disabled]):hover {
-      background-color: $secondary-light-6-opacity;
-      color: $secondary-light;
+      background-color: theme-apply($secondary-light-6-opacity);
+      color: theme-apply($secondary-light);
     }
   }
 }
@@ -251,51 +250,45 @@ $mini-fab-padding: 8px !default;
 @mixin qms-btn-fab-outlined($color) {
   @if $color == primary {
     background-color: white;
-    color: $primary;
+    color: theme-apply($primary);
     border: 1px solid black(0.12);
 
     &:not([disabled]):focus {
       &:not(:focus-visible) {
-        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
-          0px 5px 5px black(0.2);
+        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12), 0px 5px 5px black(0.2);
       }
     }
 
     &:not([disabled]):focus {
       background-color: white;
-      color: $primary;
-      box-shadow: 0 0 0 2px $primary,
-        0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
-          0px 5px 5px black(0.2);
+      color: theme-apply($primary);
+      box-shadow: 0 0 0 2px theme-apply($primary), 0px 8px 10px black(0.14), 0px 3px 14px black(0.12), 0px 5px 5px black(0.2);
     }
 
     &:not([disabled]):hover {
-      background-color: $primary-light-6-opacity;
-      color: $primary;
+      background-color: theme-apply($primary-light-6-opacity);
+      color: theme-apply($primary);
     }
   } @else if $color == secondary {
     background-color: white;
-    color: $secondary;
+    color: theme-apply($secondary);
     border: 1px solid black(0.12);
 
     &:not([disabled]):focus {
       &:not(:focus-visible) {
-        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
-          0px 5px 5px black(0.2);
+        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12), 0px 5px 5px black(0.2);
       }
     }
 
     &:not([disabled]):focus {
       background-color: white;
-      color: $secondary-light;
-      box-shadow: 0 0 0 2px $secondary-dark,
-        0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
-          0px 5px 5px black(0.2);
+      color: theme-apply($secondary-light);
+      box-shadow: 0 0 0 2px theme-apply($secondary-dark), 0px 8px 10px black(0.14), 0px 3px 14px black(0.12), 0px 5px 5px black(0.2);
     }
 
     &:not([disabled]):hover {
-      background-color: $secondary-light-6-opacity;
-      color: $secondary-light;
+      background-color: theme-apply($secondary-light-6-opacity);
+      color: theme-apply($secondary-light);
     }
   }
 }

package/src/lib/components/button/_button-theme.scss

@@ -1,5 +1,7 @@
-@import "../../../themes/core/colors";
 @import "button-base";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
+
 
 /********** QMS BUTTON BASIC  **********/
 .qms-btn {
@@ -204,7 +206,7 @@
           0px 5px 5px black(0.2);
       }
     }
-    
+
     &:not([disabled]):focus {
       box-shadow: 0 0 0 2px #cf9b87,
       0px 8px 10px black(0.14), 0px 3px 14px black(0.12),

package/src/lib/components/button/button-icon.scss

@@ -1,6 +1,9 @@
-@import "../../../themes/core/colors";
+
 @import "button-base";
 @import "button-theme";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
+
 $size: 48px;
 
 .qms-btn-icon {
@@ -68,12 +71,12 @@ $size: 48px;
     &:not([disabled]):hover,
     &:not([disabled]):focus {
       background-color: black(0.08);
-      color: $default-color;
+      color: theme-apply($default-color);
     }
 
     &:not([disabled]):active {
       background-color: black(0.24);
-      color: $default-color;
+      color: theme-apply($default-color);
     }
 
     // Disable button
@@ -84,17 +87,17 @@ $size: 48px;
 
     // Button light
     &:not(.qms-btn-disabled).active-icon {
-      color: $primary;
+      color: theme-apply($primary);
 
       &:not([disabled]):hover,
       &:not([disabled]):focus {
-        background-color: $primary-light-3-opacity;
-        color: $primary;
+        background-color: theme-apply($primary-light-12-opacity);
+        color: theme-apply($primary);
       }
-   
+
       &:not([disabled]):active {
-        background-color: $primary-light-6-opacity;
-        color: $primary;
+        background-color: theme-apply($primary-light-6-opacity);
+        color: theme-apply($primary);
       }
     }
   }
@@ -118,7 +121,7 @@ $size: 48px;
     }
 
     &.active-icon {
-      color: $secondary-lighter;
+      color: theme-apply($secondary-lighter);
 
       &:not([disabled]):hover,
       &:not([disabled]):focus {
@@ -170,13 +173,13 @@ $size: 48px;
 
     &.active {
       .caption {
-        color: $primary;
+        color: theme-apply($primary);
       }
     }
 
     &:not(.disabled):hover {
       .caption {
-        color: $default-color;
+        color: theme-apply($default-color);
       }
     }
     &:not(.disabled):focus {
@@ -186,7 +189,7 @@ $size: 48px;
     }
     &:not(.disabled):active {
       .caption {
-        color: $default-color;
+        color: theme-apply($default-color);
       }
     }
     .caption {
@@ -205,7 +208,7 @@ $size: 48px;
 
     &.active {
       .caption {
-        color: $secondary-lighter;
+        color: theme-apply($secondary-lighter);
       }
     }
 

package/src/lib/components/button/button-toggle.scss

@@ -1,5 +1,6 @@
-@import "../../../themes/core/colors";
 @import "../../../themes/core/typography";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 
 .qms-button-toggle-group {
   position: relative;
@@ -11,7 +12,7 @@
   border-radius: 4px;
   border: solid 1px #e0e0e0;
 
-  .qms-button-toggle {  
+  .qms-button-toggle {
     font-family: "Open Sans";
     white-space: nowrap;
     position: relative;
@@ -19,23 +20,22 @@
     font-weight: 600;
     line-height: 16px;
 
-
     &.qms-button-toggle-appearance-standard {
       background-color: white;
-      color: $default-color;
+      color: theme-apply($default-color);
       position: relative;
 
       .mat-icon {
-        color: $primary;
+        color: theme-apply($primary);
       }
 
       &:hover {
-        background-color: $primary-light-3-opacity;
+        background-color: theme-apply($primary-light-12-opacity);
       }
 
       &.qms-button-toggle-checked {
-        background-color: $primary-light-3-opacity;
-        color: $primary;
+        background-color: theme-apply($primary-light-12-opacity);
+        color: theme-apply($primary);
       }
 
       + {
@@ -53,7 +53,7 @@
           right: 0;
           width: 3px;
           height: 100%;
-          background: $primary-light;
+          background: theme-apply($primary-light);
         }
 
         &:before {
@@ -64,22 +64,22 @@
           right: 0;
           bottom: 0;
           left: 0;
-          border: 3px solid $primary-light;
+          border: 3px solid theme-apply($primary-light);
         }
       }
     }
 
     &.qms-button-toggle-appearance-active {
-      background-color: $primary-light-3-opacity;
-      color: $primary;
+      background-color: theme-apply($primary-light-12-opacity);
+      color: theme-apply($primary);
 
       &:hover {
-        background-color: $primary;
+        background-color: theme-apply($primary);
         color: white;
       }
 
       &.qms-button-toggle-checked {
-        background-color: $primary;
+        background-color: theme-apply($primary);
         color: white;
       }
 
@@ -91,104 +91,93 @@
 
       &.cdk-keyboard-focused {
         &::after {
-            content: "";
-            display: block;
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 3px;
-            height: 100%;
-            background: $primary-light;
-          }
-  
-          &:before {
-            content: "";
-            display: block;
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            border: 3px solid $primary-light;
-          }
+          content: "";
+          display: block;
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 3px;
+          height: 100%;
+          background: theme-apply($primary-light);
+        }
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 3px solid theme-apply($primary-light);
+        }
       }
     }
 
     &.qms-button-toggle-appearance-dark {
-      background-color: $default-color;
+      background-color: theme-apply($default-color);
       color: rgba(255, 255, 255, 0.6);
 
       .mat-icon {
-        color: $primary-light-32-opacity;
+        color: theme-apply($primary-light-32-opacity);
       }
 
       &:hover {
-        background-color: $primary-lighter;
-        color: $primary;
+        background-color: theme-apply($primary-lighter);
+        color: theme-apply($primary);
       }
 
       &.qms-button-toggle-checked {
-        background-color: $primary-lighter;
-        color: $primary;
+        background-color: theme-apply($primary-lighter);
+        color: theme-apply($primary);
 
         .mat-icon {
-          color: $primary;
+          color: theme-apply($primary);
         }
       }
 
       + {
         .qms-button-toggle {
-          border-left: solid 1px rgba(71, 71, 71, 1);     
+          border-left: solid 1px rgba(71, 71, 71, 1);
         }
       }
 
       &.cdk-keyboard-focused {
         &::after {
-            content: "";
-            display: block;
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 3px;
-            height: 100%;
-            background: $primary-light;
-          }
-  
-          &:before {
-            content: "";
-            display: block;
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            border: 3px solid $primary-light;
-          }
+          content: "";
+          display: block;
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 3px;
+          height: 100%;
+          background: theme-apply($primary-light);
+        }
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border: 3px solid theme-apply($primary-light);
+        }
       }
     }
 
     &.qms-button-toggle-disabled {
       cursor: default !important;
       background: #e4e4e4 !important;
-      color: rgba(0,0,0,.38) !important;
+      color: rgba(0, 0, 0, 0.38) !important;
 
       .mat-icon {
-        color: rgba(0,0,0,.38) !important;
+        color: rgba(0, 0, 0, 0.38) !important;
       }
     }
   }
 
-//   &.qms-button-toggle-group-appearance-standard {
-//     background-color: white;
-//   }
-
-//   &.qms-button-toggle-group-appearance-active {
-//     background-color: $primary-light-3-opacity;
-//   }
-
-//   &.qms-button-toggle-group-appearance-dark {
-//     background-color: $default-color;
-//   }
 }
 
 .qms-button-toggle {
@@ -216,48 +205,8 @@
 }
 
 .qms-button-toggle {
-//   &:not([disabled]):hover {
-//     text-decoration: none;
-//   }
 
   .qms-button-toggle-label-content > * {
     vertical-align: middle;
   }
-
-//   &::after {
-//     content: "";
-//     position: absolute;
-//     top: 50%;
-//     left: 50%;
-//     width: 10px;
-//     height: 10px;
-//     background: rgba(255, 255, 255, 0.5);
-//     opacity: 0;
-//     border-radius: 100%;
-//     transform: scale(1, 1) translate(-50%);
-//     transform-origin: 50% 50%;
-//   }
-
-//   &:not([disabled]):focus {
-//     &:not(:active) {
-//       &::after {
-//         animation: ripple 1s ease-out;
-//       }
-//     }
-//   }
 }
-
-// @keyframes ripple {
-//   0% {
-//     transform: scale(0, 0);
-//     opacity: 1;
-//   }
-//   20% {
-//     transform: scale(25, 25);
-//     opacity: 1;
-//   }
-//   100% {
-//     opacity: 0;
-//     transform: scale(40, 40);
-//   }
-// }

package/src/lib/components/comment/comment.scss

@@ -1,5 +1,6 @@
-@import "../../../themes/core/colors";
 @import "../../../themes/core/typography";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 
 $bg-secondary: rgba(62, 87, 183, 0.12);
 
@@ -41,7 +42,7 @@ $bg-secondary: rgba(62, 87, 183, 0.12);
   }
 
   .btn-action {
-    color: $primary;
+    color: theme-apply($primary);
     font-weight: 600;
     font-size: 13px;
     cursor: pointer;

package/src/lib/components/dialog/dialog.scss

@@ -1,4 +1,5 @@
-@import "../../../themes/core/colors";
+@import "../../../themes/theme/variable";
+@import "../../../themes/theme/mixins";
 @import "../../../themes/core/typography";
 
 ::ng-deep .qms-dialog {

package/src/lib/components/list/_list-base.scss

@@ -3,7 +3,7 @@ $qms-list-top: 6px;
 $item-height: 40px;
 $leading-icon: 24px;
 $leading-icon-padding: 4px;
-$subtitle-color: $default-color;
+$subtitle-color: theme-apply($default-color);
 $subtitle-weight: 600;
 $border-bottom-item: #e0e0e0;
 $size-caption: 0.75rem;
@@ -15,7 +15,7 @@ $two-line-height: 63px;
 // $three-line-height: 88px;
 $three-line-height: 81px;
 $border-radius-default: 2px;
-$image-circle-size: 40px; 
+$image-circle-size: 40px;
 $image-square-size: 56px;
 $image-rect-width: 100px;
 $image-rect-unset: unset;