@pepperi-addons/ngx-lib 0.2.59-query-builder.13 → 0.2.61-query-builder.2

package/src/core/style/abstracts/mixins.scss

@@ -1,3 +1,6 @@
+@use 'variables.scss';
+@use 'functions.scss';
+
 // -----------------------------------------------------------------------------
 // This file contains all application-wide Sass mixins.
 // -----------------------------------------------------------------------------
@@ -32,7 +35,7 @@
     }
 }
 
-@mixin font($size: false, $weight: 400, $lh: false, $family: $font-family-body) {
+@mixin font($size: false, $weight: 400, $lh: false, $family: variables.$font-family-body) {
     font-family: $family;
 
     @if $size {
@@ -48,7 +51,7 @@
     }
 }
 
-@mixin pep-spacing-element-negative($add-important: true, $spacing-size: $spacing-xs) {
+@mixin pep-spacing-element-negative($add-important: true, $spacing-size: variables.$spacing-xs) {
     @if ($add-important) {
         margin-right: calc(#{$spacing-size} * -1) !important;
         margin-left: calc(#{$spacing-size} * -1) !important;
@@ -58,7 +61,7 @@
     }
 }
 
-@mixin pep-spacing-element($add-important: true, $spacing-size: $spacing-xs) {
+@mixin pep-spacing-element($add-important: true, $spacing-size: variables.$spacing-xs) {
     @if ($add-important) {
         margin-right: $spacing-size !important;
         margin-left: $spacing-size !important;
@@ -190,15 +193,15 @@
     }
 }
 
-@mixin font-title($fs: $fs-md, $lh: $lh-md) {
-    font-family: $font-family-title;
-    font-weight: $font-weight-bold;
+@mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md) {
+    font-family: variables.$font-family-title;
+    font-weight: variables.$font-weight-bold;
 
     @include font-size($fs);
     @include line-height($lh);
 }
 
-@mixin font-body($fs: $fs-sm, $lh: $lh-sm) {
+@mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm) {
     @include font-size($fs);
     @include line-height($lh);
 }
@@ -222,8 +225,8 @@
     }
 }
 
-@mixin pep-border($property, $pepperi-theme, $style: solid, $important: false) {
-    @include border($property, 1px, $style, get-pep-color($pepperi-theme, color-system-primary, color-tran-50), $important);
+@mixin pep-border($property, $style: solid, $important: false) {
+    @include border($property, 1px, $style, functions.get-pep-color(color-system-primary, color-tran-50), $important);
 }
 
 // Inline  - this line face inward // This works only for buttons (and other objects that contains children).
@@ -235,7 +238,7 @@
 
         // 👆 Requires parent element to be 'position: relative;'
         &:after {
-            z-index: $z-index-lowest - 1;
+            z-index: variables.$z-index-lowest - 1;
             content: "";
             transition: all 0.25s; // same as 'pep-btn' @mixin
             display: block;
@@ -252,33 +255,33 @@
 
 @mixin fix-inline-z-index() {
     // to fix the z-index in the inline &:after.
-    z-index: $z-index-lowest;
+    z-index: variables.$z-index-lowest;
 }
 
 @mixin mat-badge-content() {
-    z-index: $z-index-medium - 3;
+    z-index: variables.$z-index-medium - 3;
     min-width: 1.5rem;
     width: fit-content !important;
     border-radius: 0.625rem;
     padding: 0 0.5rem;
-    top: calc(#{$spacing-sm} * -1) !important;
+    top: calc(#{variables.$spacing-sm} * -1) !important;
     @include ellipsis();
     max-width: inherit;
 }
 
 @mixin pep-top-bar-button() {
-    // margin-top: $spacing-xs;
-    height: $top-bar-field-height;
-    line-height: $top-bar-field-height;
+    // margin-top: variables.$spacing-xs;
+    height: variables.$top-bar-field-height;
+    line-height: variables.$top-bar-field-height;
 }
 
-@mixin pep-cross-hatch($pepperi-theme, $hex-color: null) {
+@mixin pep-cross-hatch($hex-color: null) {
     $color-low-opacity: null;
     $color-high-opacity: null;
 
     @if ($hex-color == null) {
-        $color-low-opacity: get-pep-color($pepperi-theme, color-system-caution, color-tran-0);
-        $color-high-opacity: get-pep-color($pepperi-theme, color-system-caution, color-tran-60);
+        $color-low-opacity: functions.get-pep-color(color-system-caution, color-tran-0);
+        $color-high-opacity: functions.get-pep-color(color-system-caution, color-tran-60);
     } @else {
         $color-low-opacity: rgba($hex-color, 0);
         $color-high-opacity: rgba($hex-color, 0.32)
@@ -303,9 +306,9 @@
 // ******************************************************************************
 //                        General state declerations
 // ******************************************************************************
-@mixin focus($pepperi-theme, $add-important: false, $focus-color: null, $focus-size: $spacing-xs) {
+@mixin focus($add-important: false, $focus-color: null, $focus-size: variables.$spacing-xs) {
     @if ($focus-color == null) {
-        $focus-color: get-pep-color($pepperi-theme, color-text, color-link-focus);
+        $focus-color: functions.get-pep-color(color-text, color-link-focus);
     }
   
     @if ($add-important) {
@@ -315,18 +318,18 @@
     }
 }
 
-@mixin state-error-wrapper($pepperi-theme) {
-    border-radius: $border-radius-md;
-    background: get-pep-color($pepperi-theme, color-system-caution, color-base);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, regular);
+@mixin state-error-wrapper() {
+    border-radius: variables.$border-radius-md;
+    background: functions.get-pep-color(color-system-caution, color-base);
+    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
 }
 
-@mixin state-error($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    border: 1px solid get-pep-color($pepperi-theme, color-system-caution, color-base);
+@mixin state-error() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+    border: 1px solid functions.get-pep-color(color-system-caution, color-base);
 }
  
-@mixin state-disabled($pepperi-theme) {
+@mixin state-disabled() {
     // For remove all other states
     box-shadow: unset;
     border: unset;
@@ -336,30 +339,30 @@
     }
 
     .svg-icon {
-        @include state-icon-disabled($pepperi-theme);
+        @include state-icon-disabled();
     }
 }
 
 //  State icon
 // ----------------------------------------------------------------------------------
-@mixin state-icon($pepperi-theme) {
-    @include svg-icon-color(get-pep-color($pepperi-theme, color-system-primary, color-tran-80));
+@mixin state-icon() {
+    @include svg-icon-color(functions.get-pep-color(color-system-primary, color-tran-80));
     
     &:hover {
-        @include svg-icon-color(get-pep-color($pepperi-theme, color-system-primary, color-tran-90));
+        @include svg-icon-color(functions.get-pep-color(color-system-primary, color-tran-90));
     }
 
     &:active {
-        @include svg-icon-color(get-pep-color($pepperi-theme, color-system-primary, color-base));
+        @include svg-icon-color(functions.get-pep-color(color-system-primary, color-base));
     }
 
     &:disabled {
-        @include state-icon-disabled($pepperi-theme);
+        @include state-icon-disabled();
     }
 }
 
-@mixin state-icon-disabled($pepperi-theme) {
-    @include svg-icon-color(get-pep-color($pepperi-theme, color-text, color-disabled));
+@mixin state-icon-disabled() {
+    @include svg-icon-color(functions.get-pep-color(color-text, color-disabled));
 }
 
 @mixin svg-icon-color($color) {
@@ -373,80 +376,80 @@
 
 //  State badge
 // -----------------------------------------------------------------------------
-@mixin pep-badge($pepperi-theme) {
+@mixin pep-badge() {
     .mat-badge-content {
-        @include state-strong-default($pepperi-theme);
-        background-color: get-pep-color($pepperi-theme, color-system-primary, color-base) !important;
-        box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard);
+        @include state-strong-default();
+        background-color: functions.get-pep-color(color-system-primary, color-base) !important;
+        box-shadow: functions.get-pep-shadow(shadow-sm, hard);
     }
 }
 
 // ******************************************************************************
 //                       State weak declerations
 // ******************************************************************************
-@mixin pep-state-default($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-default($style: weak, $color-name: null, $regularBorder: false) {
     @if ($style == 'none') {
-        @include state-none-default($pepperi-theme);
+        @include state-none-default();
     } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-default($pepperi-theme);
+        @include state-weak-invert-default();
     } @else if ($style == 'weak') {
-        @include state-weak-default($pepperi-theme, $color-name);
+        @include state-weak-default($color-name);
     } @else if ($style == 'strong') {
-        @include state-strong-default($pepperi-theme, $color-name);
+        @include state-strong-default($color-name);
     } @else { // regular.
-        @include state-regular-default($pepperi-theme, $regularBorder, $color-name);
+        @include state-regular-default($regularBorder, $color-name);
     }
 }
-@mixin pep-state-disable($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-disable($style: weak, $color-name: null, $regularBorder: false) {
     @if ($style == 'none') {
-        @include state-none-disable($pepperi-theme);
+        @include state-none-disable();
     } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-disable($pepperi-theme);
+        @include state-weak-invert-disable();
     } @else if ($style == 'weak') {
-        @include state-weak-disable($pepperi-theme, $color-name);
+        @include state-weak-disable($color-name);
     } @else if ($style == 'strong') {
-        @include state-strong-disable($pepperi-theme, $color-name);
+        @include state-strong-disable($color-name);
     } @else { // regular.
-        @include state-regular-disable($pepperi-theme, $regularBorder, $color-name);
+        @include state-regular-disable($regularBorder, $color-name);
     }
 }
-@mixin pep-state-hover($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-hover($style: weak, $color-name: null, $regularBorder: false) {
     @if ($style == 'none') {
-        @include state-none-hover($pepperi-theme);
+        @include state-none-hover();
     } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-hover($pepperi-theme);
+        @include state-weak-invert-hover();
     } @else if ($style == 'weak') {
-        @include state-weak-hover($pepperi-theme, $color-name);
+        @include state-weak-hover($color-name);
     } @else if ($style == 'strong') {
-        @include state-strong-hover($pepperi-theme, $color-name);
+        @include state-strong-hover($color-name);
     } @else { // regular.
-        @include state-regular-hover($pepperi-theme, $regularBorder, $color-name);
+        @include state-regular-hover($regularBorder, $color-name);
     }
 }
-@mixin pep-state-active($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-active($style: weak, $color-name: null, $regularBorder: false) {
     @if ($style == 'none') {
-        @include state-none-active($pepperi-theme);
+        @include state-none-active();
     } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-active($pepperi-theme);
+        @include state-weak-invert-active();
     } @else if ($style == 'weak') {
-        @include state-weak-active($pepperi-theme, $color-name);
+        @include state-weak-active($color-name);
     } @else if ($style == 'strong') {
-        @include state-strong-active($pepperi-theme, $color-name);
+        @include state-strong-active($color-name);
     } @else { // regular.
-        @include state-regular-active($pepperi-theme, $regularBorder, $color-name);
+        @include state-regular-active($regularBorder, $color-name);
     }
 }
-@mixin pep-state-focus($pepperi-theme, $style: weak, $color-name: null, $regularBorder: false) {
+@mixin pep-state-focus($style: weak, $color-name: null, $regularBorder: false) {
     @if ($style == 'none') {
-        @include state-none-focus($pepperi-theme);
+        @include state-none-focus();
     } @else if ($style == 'weak-invert') {
-        @include state-weak-invert-focus($pepperi-theme);
+        @include state-weak-invert-focus();
     } @else if ($style == 'weak') {
-        @include state-weak-focus($pepperi-theme, $color-name);
+        @include state-weak-focus($color-name);
     } @else if ($style == 'strong') {
-        @include state-strong-focus($pepperi-theme, $color-name);
+        @include state-strong-focus($color-name);
     } @else { // regular.
-        @include state-regular-focus($pepperi-theme, $regularBorder, $color-name);
+        @include state-regular-focus($regularBorder, $color-name);
     }
 }
 
@@ -455,79 +458,79 @@
 // ******************************************************************************
 //  Weak - default
 // -----------------------------------------------------------------------------
-@mixin state-weak-default($pepperi-theme, $color-map-name: null) {
+@mixin state-weak-default($color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-weak;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-tran-30);
+    background: functions.get-pep-color($color-map-name, color-tran-30);
 }
-@mixin state-weak-disable($pepperi-theme, $color-map-name: null) {
-    @include state-disabled($pepperi-theme);
+@mixin state-weak-disable($color-map-name: null) {
+    @include state-disabled();
 
     @if ($color-map-name == null) {
         $color-map-name: color-weak;
     }
-    color:get-pep-color($pepperi-theme, color-text, color-disabled) !important;
-    background: get-pep-color($pepperi-theme, $color-map-name, color-tran-10) !important;
+    color:functions.get-pep-color(color-text, color-disabled) !important;
+    background: functions.get-pep-color($color-map-name, color-tran-10) !important;
 }
-@mixin state-weak-hover($pepperi-theme, $color-map-name: null) {
+@mixin state-weak-hover($color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-weak;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-tran-40);
+    background: functions.get-pep-color($color-map-name, color-tran-40);
 }
-@mixin state-weak-active($pepperi-theme, $color-map-name: null, $add-inline: true, $regularBorder: false) {
+@mixin state-weak-active($color-map-name: null, $add-inline: true, $regularBorder: false) {
     @if ($color-map-name == null) {
         $color-map-name: color-weak;
     }
 
     &:not(.keep-background-on-focus) {
-        // background: get-pep-color($pepperi-theme, $color-map-name, color-tran-0); // TODO: In Table view is gray so what sould we do ask Yonatan.
-        background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
+        // background: functions.get-pep-color($color-map-name, color-tran-0); // TODO: In Table view is gray so what sould we do ask Yonatan.
+        background: functions.get-pep-color(color-system-primary-invert, color-base);
     }
 
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
+    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
     
     @if ($add-inline) {
-        @include inline(get-pep-color($pepperi-theme, $color-map-name, color-base), 1px, solid, $regularBorder);
+        @include inline(functions.get-pep-color($color-map-name, color-base), 1px, solid, $regularBorder);
     }
 }
-@mixin state-weak-focus($pepperi-theme, $color-map-name: null, $add-inline: true, $regularBorder: false) {
-    // box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
-    @include state-weak-active($pepperi-theme, $color-map-name, $add-inline, $regularBorder);
-    @include focus($pepperi-theme);
+@mixin state-weak-focus($color-map-name: null, $add-inline: true, $regularBorder: false) {
+    // box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+    @include state-weak-active($color-map-name, $add-inline, $regularBorder);
+    @include focus();
 }
 
 //  Weak - invert
 // -----------------------------------------------------------------------------
-@mixin state-weak-invert-default($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-tran-70);
+@mixin state-weak-invert-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
 
-    // $color: get-pep-color($pepperi-theme, color-text, color-main);
+    // $color: functions.get-pep-color(color-text, color-main);
     // color: $color;
 
     // .svg-icon {
     //     fill: $color !important;
     // }
 }
-@mixin state-weak-invert-disable($pepperi-theme) {
-    @include state-disabled($pepperi-theme);
+@mixin state-weak-invert-disable() {
+    @include state-disabled();
     
-    color:get-pep-color($pepperi-theme, color-text, color-disabled) !important;
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-tran-20) !important;
+    color:functions.get-pep-color(color-text, color-disabled) !important;
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-20) !important;
 }
-@mixin state-weak-invert-hover($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-tran-70);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
+@mixin state-weak-invert-hover() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
     cursor: pointer;
 }
-@mixin state-weak-invert-active($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, regular);
+@mixin state-weak-invert-active() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
 }
-@mixin state-weak-invert-focus($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    @include focus($pepperi-theme);
+@mixin state-weak-invert-focus() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+    @include focus();
 }
 
 // ******************************************************************************
@@ -535,54 +538,54 @@
 // ******************************************************************************
 //  Regular - default
 // -----------------------------------------------------------------------------
-@mixin state-regular-default($pepperi-theme, $regularBorder: false, $color-map-name: null) {
+@mixin state-regular-default($regularBorder: false, $color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-regular;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-40);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-flat-r-20), 1px, solid, $regularBorder);
+    background: functions.get-pep-color($color-map-name, color-flat-r-40);
+    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+    @include inline(functions.get-pep-color($color-map-name, color-flat-r-20), 1px, solid, $regularBorder);
 }
-@mixin state-regular-hover($pepperi-theme, $regularBorder: false, $color-map-name: null) {
+@mixin state-regular-hover($regularBorder: false, $color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-regular;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-40);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, regular);
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-flat-r-10), 1px, solid, $regularBorder);
+    background: functions.get-pep-color($color-map-name, color-flat-r-40);
+    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    @include inline(functions.get-pep-color($color-map-name, color-flat-r-10), 1px, solid, $regularBorder);
 }
-@mixin state-regular-active($pepperi-theme, $regularBorder: false, $color-map-name: null) {
+@mixin state-regular-active($regularBorder: false, $color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-regular;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-30);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, hard);
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-base), 1px, solid, $regularBorder);
+    background: functions.get-pep-color($color-map-name, color-flat-r-30);
+    box-shadow: functions.get-pep-shadow(shadow-xs, hard);
+    @include inline(functions.get-pep-color($color-map-name, color-base), 1px, solid, $regularBorder);
 
     // @if $regularBorder {
     // } @else {
-    //     @include focus($pepperi-theme);
+    //     @include focus();
     // }
 }
-@mixin state-regular-focus($pepperi-theme, $regularBorder: false, $color-map-name: null) {
+@mixin state-regular-focus($regularBorder: false, $color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-regular;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-30);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, regular);
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-base), 1px, solid, $regularBorder);
-    @include focus($pepperi-theme);
+    background: functions.get-pep-color($color-map-name, color-flat-r-30);
+    box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    @include inline(functions.get-pep-color($color-map-name, color-base), 1px, solid, $regularBorder);
+    @include focus();
 }
-@mixin state-regular-disable($pepperi-theme, $regularBorder: false, $color-map-name: null) {
-    @include state-disabled($pepperi-theme);
+@mixin state-regular-disable($regularBorder: false, $color-map-name: null) {
+    @include state-disabled();
     
     @if ($color-map-name == null) {
         $color-map-name: color-regular;
     }
-    color:get-pep-color($pepperi-theme, color-text, color-disabled) !important;
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-r-30) !important;
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, xsoft) !important;
-    @include inline(get-pep-color($pepperi-theme, $color-map-name, color-tran-20), 1px, solid, $regularBorder);
+    color:functions.get-pep-color(color-text, color-disabled) !important;
+    background: functions.get-pep-color($color-map-name, color-flat-r-30) !important;
+    box-shadow: functions.get-pep-shadow(shadow-xs, xsoft) !important;
+    @include inline(functions.get-pep-color($color-map-name, color-tran-20), 1px, solid, $regularBorder);
 }
 
 // ******************************************************************************
@@ -590,59 +593,59 @@
 // ******************************************************************************
 //  Strong - default
 // -----------------------------------------------------------------------------
-@mixin state-strong-default($pepperi-theme, $color-map-name: null) {
+@mixin state-strong-default($color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-strong;
     }
 
-    font-weight: $font-weight-bold;
-    background: get-pep-color($pepperi-theme, $color-map-name, color-base);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, soft);
+    font-weight: variables.$font-weight-bold;
+    background: functions.get-pep-color($color-map-name, color-base);
+    box-shadow: functions.get-pep-shadow(shadow-sm, soft);
 
-    $color: get-pep-color($pepperi-theme, color-text, color-invert);
+    $color: functions.get-pep-color(color-text, color-invert);
 
     color: $color;
     .svg-icon {
         @include svg-icon-color($color);
     }
 }
-@mixin state-strong-disable($pepperi-theme, $color-map-name: null) {
-    @include state-disabled($pepperi-theme);
+@mixin state-strong-disable($color-map-name: null) {
+    @include state-disabled();
     
     @if ($color-map-name == null) {
         $color-map-name: color-strong;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-base) !important;
+    background: functions.get-pep-color($color-map-name, color-base) !important;
     opacity: 0.5 !important;
     
-    $color: get-pep-color($pepperi-theme, color-text, color-invert);
+    $color: functions.get-pep-color(color-text, color-invert);
 
     color: $color;
     .svg-icon {
         @include svg-icon-color($color);
     }
 }
-@mixin state-strong-hover($pepperi-theme, $color-map-name: null) {
+@mixin state-strong-hover($color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-strong;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-l-10);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, regular);
+    background: functions.get-pep-color($color-map-name, color-flat-l-10);
+    box-shadow: functions.get-pep-shadow(shadow-sm, regular);
 }
-@mixin state-strong-active($pepperi-theme, $color-map-name: null) {
+@mixin state-strong-active($color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-strong;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-l-20);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard);
+    background: functions.get-pep-color($color-map-name, color-flat-l-20);
+    box-shadow: functions.get-pep-shadow(shadow-sm, hard);
 }
-@mixin state-strong-focus($pepperi-theme, $color-map-name: null) {
+@mixin state-strong-focus($color-map-name: null) {
     @if ($color-map-name == null) {
         $color-map-name: color-strong;
     }
-    background: get-pep-color($pepperi-theme, $color-map-name, color-flat-l-20);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, soft);
-    @include focus($pepperi-theme);
+    background: functions.get-pep-color($color-map-name, color-flat-l-20);
+    box-shadow: functions.get-pep-shadow(shadow-sm, soft);
+    @include focus();
 }
 
 // ******************************************************************************
@@ -650,40 +653,40 @@
 // ******************************************************************************
 //  None - default
 // -----------------------------------------------------------------------------
-@mixin state-none-default($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary, color-tran-0);
+@mixin state-none-default() {
+    background: functions.get-pep-color(color-system-primary, color-tran-0);
 }
-@mixin state-none-disable($pepperi-theme) {
-    @include state-disabled($pepperi-theme);
-    background: get-pep-color($pepperi-theme, color-system-primary, color-tran-0) !important;
+@mixin state-none-disable() {
+    @include state-disabled();
+    background: functions.get-pep-color(color-system-primary, color-tran-0) !important;
 }
-@mixin state-none-hover($pepperi-theme) {
-    @include state-weak-hover($pepperi-theme);
+@mixin state-none-hover() {
+    @include state-weak-hover();
 }
-@mixin state-none-active($pepperi-theme) {
-    @include state-weak-active($pepperi-theme);
+@mixin state-none-active() {
+    @include state-weak-active();
 }
-@mixin state-none-focus($pepperi-theme) {
-    @include state-weak-focus($pepperi-theme);
+@mixin state-none-focus() {
+    @include state-weak-focus();
 }
 
 // ******************************************************************************
 //                       Buttons states declerations
 // ******************************************************************************
-@mixin pep-button-states($pepperi-theme, $style: weak, $color-name: null) {
-    @include pep-state-default($pepperi-theme, $style, $color-name, true);
+@mixin pep-button-states($style: weak, $color-name: null) {
+    @include pep-state-default($style, $color-name, true);
     &:hover {
-        @include pep-state-hover($pepperi-theme, $style, $color-name, true);
+        @include pep-state-hover($style, $color-name, true);
     }
     &:focus {
-        @include pep-state-focus($pepperi-theme, $style, $color-name, true);
+        @include pep-state-focus($style, $color-name, true);
     }
     &:active {
-        @include pep-state-active($pepperi-theme, $style, $color-name, true);
+        @include pep-state-active($style, $color-name, true);
     }
     &:disabled {
         &:not(.ignore-disabled) {
-            @include pep-state-disable($pepperi-theme, $style, $color-name, true);
+            @include pep-state-disable($style, $color-name, true);
         }
     }
 }
@@ -691,10 +694,10 @@
 // ******************************************************************************
 //                       Form field states declerations
 // ******************************************************************************
-@mixin pep-form-field-states($pepperi-theme, $style: weak, $color-name: null) {
+@mixin pep-form-field-states($style: weak, $color-name: null) {
     // Default
     .mat-form-field-flex {
-        @include pep-state-default($pepperi-theme, $style, $color-name);
+        @include pep-state-default($style, $color-name);
     }
 
     // Hover
@@ -702,7 +705,7 @@
         .ignore-disabled,
         &:not(.mat-form-field-disabled) {
             .mat-form-field-flex {
-                @include pep-state-hover($pepperi-theme, $style, $color-name);
+                @include pep-state-hover($style, $color-name);
             }
         }
     }
@@ -712,7 +715,7 @@
         .ignore-disabled,
         &:not(.mat-form-field-disabled) {
             .mat-form-field-flex {
-                @include pep-state-focus($pepperi-theme, $style, $color-name);
+                @include pep-state-focus($style, $color-name);
             }
         }
     }
@@ -723,7 +726,7 @@
         .ignore-disabled,
         &:not(.mat-form-field-disabled) {
             .mat-form-field-flex {
-                @include pep-state-active($pepperi-theme, $style, $color-name);
+                @include pep-state-active($style, $color-name);
             }
         }
     }
@@ -732,7 +735,7 @@
     &.mat-form-field-disabled {
         &:not(.ignore-disabled) {
             .mat-form-field-flex {
-                @include pep-state-disable($pepperi-theme, $style, $color-name);
+                @include pep-state-disable($style, $color-name);
             }
         }
     }
@@ -741,45 +744,45 @@
 // ******************************************************************************
 //                       Table states declerations
 // ******************************************************************************
-@mixin state-table-row-default($pepperi-theme) {
+@mixin state-table-row-default() {
 
 }
-@mixin state-table-row-hover($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-weak, color-tran-30);
+@mixin state-table-row-hover() {
+    background: functions.get-pep-color(color-weak, color-tran-30);
 }
-@mixin state-table-row-active($pepperi-theme) {
+@mixin state-table-row-active() {
     
 }
-@mixin state-table-row-selected($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-success, color-tran-20);
+@mixin state-table-row-selected() {
+    background: functions.get-pep-color(color-system-success, color-tran-20);
 }
 
 // ******************************************************************************
 //                       Card states declerations
 // ******************************************************************************
-@mixin state-card-default($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-card, soft);
+@mixin state-card-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+    box-shadow: functions.get-pep-shadow(shadow-card, soft);
 
     transition: box-shadow 0.25s;
 }
-@mixin state-card-hover($pepperi-theme) {
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-card, regular);
+@mixin state-card-hover() {
+    box-shadow: functions.get-pep-shadow(shadow-card, regular);
 }
-@mixin state-card-active($pepperi-theme) {
-    box-shadow: get-pep-shadow($pepperi-theme, shadow-card, hard);
-    // @include focus($pepperi-theme);
+@mixin state-card-active() {
+    box-shadow: functions.get-pep-shadow(shadow-card, hard);
+    // @include focus();
 }
-@mixin state-card-selected($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-success, color-tran-20);;
+@mixin state-card-selected() {
+    background: functions.get-pep-color(color-system-success, color-tran-20);;
     box-shadow: none;
 }
 
 // ******************************************************************************
 //                       General List declerations
 // ******************************************************************************
-@mixin state-list-body-default($pepperi-theme) {
-    background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
+@mixin state-list-body-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
 }
 
 // ******************************************************************************