@pepperi-addons/ngx-lib 0.2.61 → 0.3.0

package/src/core/style/base/grids.scss

@@ -1,4 +1,4 @@
-@import '../abstracts/variables';
+// @use '../abstracts/variables';
 
 //  Layout - General
 // -----------------------------------------------------

package/src/core/style/base/typography.scss

@@ -1,3 +1,7 @@
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+@use '../abstracts/functions';
+
 // -----------------------------------------------------------------------------
 // Typography style - This file contains all @font-face declarations, if any.
 // -----------------------------------------------------------------------------
@@ -5,91 +9,91 @@
 @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&family=Crimson+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=David+Libre:wght@400;500;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 //    Calculation
-@media screen and (max-width: $screen-max-size-2xs) {
+@media screen and (max-width: variables.$screen-max-size-2xs) {
     //    Smaller then XXS
     .body-2xs {
-        @include font-body($fs-2xs, $lh-2xs);
+        @include mixins.font-body(variables.$fs-2xs, variables.$lh-2xs);
     }
     .body-xs {
-        @include font-body($fs-xs, $lh-xs);
+        @include mixins.font-body(variables.$fs-xs, variables.$lh-xs);
     }
     .body-sm {
-        @include font-body($fs-sm, $lh-sm);
+        @include mixins.font-body(variables.$fs-sm, variables.$lh-sm);
     }
     .body-md {
-        @include font-body($fs-md, $lh-md);
+        @include mixins.font-body(variables.$fs-md, variables.$lh-md);
     }
     .body-lg {
-        @include font-body($fs-lg, $lh-lg);
+        @include mixins.font-body(variables.$fs-lg, variables.$lh-lg);
     }
     .body-xl {
-        @include font-body($fs-xl, $lh-xl);
+        @include mixins.font-body(variables.$fs-xl, variables.$lh-xl);
     }
     .body-2xl {
-        @include font-body($fs-2xl, $lh-2xl);
+        @include mixins.font-body(variables.$fs-2xl, variables.$lh-2xl);
     }
 
     .title-xs {
-        @include font-title($fs-xs, $lh-xs);
+        @include mixins.font-title(variables.$fs-xs, variables.$lh-xs);
     }
     .title-sm {
-        @include font-title($fs-sm, $lh-sm);
+        @include mixins.font-title(variables.$fs-sm, variables.$lh-sm);
     }
     .title-md {
-        @include font-title($fs-md, $lh-md);
+        @include mixins.font-title(variables.$fs-md, variables.$lh-md);
     }
     .title-lg {
-        @include font-title($fs-lg, $lh-lg);
+        @include mixins.font-title(variables.$fs-lg, variables.$lh-lg);
     }
     .title-xl {
-        @include font-title($fs-xl, $lh-xl);
+        @include mixins.font-title(variables.$fs-xl, variables.$lh-xl);
     }
     .title-2xl {
-        @include font-title($fs-2xl, $lh-2xl);
+        @include mixins.font-title(variables.$fs-2xl, variables.$lh-2xl);
     }
 }
 
-@media screen and (min-width: $screen-max-size-2xs) {
+@media screen and (min-width: variables.$screen-max-size-2xs) {
     //    Bigger then XXS
     .body-2xs {
-        @include font-body($fs-2xs, $lh-2xs);
+        @include mixins.font-body(variables.$fs-2xs, variables.$lh-2xs);
     }
     .body-xs {
-        @include font-body($fs-xs, $lh-xs);
+        @include mixins.font-body(variables.$fs-xs, variables.$lh-xs);
     }
     .body-sm {
-        @include font-body($fs-sm, $lh-sm);
+        @include mixins.font-body(variables.$fs-sm, variables.$lh-sm);
     }
     .body-md {
-        @include font-body($fs-md, $lh-md);
+        @include mixins.font-body(variables.$fs-md, variables.$lh-md);
     }
     .body-lg {
-        @include font-body($fs-lg, $lh-lg);
+        @include mixins.font-body(variables.$fs-lg, variables.$lh-lg);
     }
     .body-xl {
-        @include font-body($fs-xl, $lh-xl);
+        @include mixins.font-body(variables.$fs-xl, variables.$lh-xl);
     }
     .body-2xl {
-        @include font-body($fs-2xl, $lh-2xl);
+        @include mixins.font-body(variables.$fs-2xl, variables.$lh-2xl);
     }
 
     .title-xs {
-        @include font-title($fs-xs, $lh-xs);
+        @include mixins.font-title(variables.$fs-xs, variables.$lh-xs);
     }
     .title-sm {
-        @include font-title($fs-sm, $lh-sm);
+        @include mixins.font-title(variables.$fs-sm, variables.$lh-sm);
     }
     .title-md {
-        @include font-title($fs-md, $lh-md);
+        @include mixins.font-title(variables.$fs-md, variables.$lh-md);
     }
     .title-lg {
-        @include font-title($fs-lg, $lh-lg);
+        @include mixins.font-title(variables.$fs-lg, variables.$lh-lg);
     }
     .title-xl {
-        @include font-title($fs-xl, $lh-xl);
+        @include mixins.font-title(variables.$fs-xl, variables.$lh-xl);
     }
     .title-2xl {
-        @include font-title($fs-2xl, $lh-2xl);
+        @include mixins.font-title(variables.$fs-2xl, variables.$lh-2xl);
     }
 }
 
@@ -104,15 +108,15 @@ html,
 body {
     $font-size: 16px;
 
-    font-family: $font-family-body;
-    font-weight: $font-weight-normal;
+    font-family: variables.$font-family-body;
+    font-weight: variables.$font-weight-normal;
     font-size: $font-size;
 
     // Override default user agent stylesheet
     button {
-        font: $font-weight-normal $font-size $font-family-body;
+        font: variables.$font-weight-normal $font-size variables.$font-family-body;
     }
-    // line-height: $lh-md;
+    // line-height: variables.$lh-md;
 
     /*.lang-he {
         font-family: 'Open Sans Hebrew' !important;
@@ -122,17 +126,17 @@ body {
 //  Font weight
 // ------------------------
 .normal {
-    font-weight: $font-weight-normal !important;
+    font-weight: variables.$font-weight-normal !important;
 }
 .bold {
-    font-weight: $font-weight-bold !important;
+    font-weight: variables.$font-weight-bold !important;
 }
 .bolder {
-    font-weight: $font-weight-bolder !important;
+    font-weight: variables.$font-weight-bolder !important;
 }
 
 .ellipsis {
-    @include ellipsis();
+    @include mixins.ellipsis();
 }
 
 h6,
@@ -141,7 +145,7 @@ h4,
 h3,
 h2,
 h1 {
-    font-family: $font-family-title;
+    font-family: variables.$font-family-title;
 }
 
 /**
@@ -154,9 +158,9 @@ a {
         display: block;
         text-anchor: end;
         text-decoration: underline;
-        // @include box-sizing(border-box);
+        // @include mixins.box-sizing(border-box);
         box-sizing: border-box;
-        @include ellipsis();
+        @include mixins.ellipsis();
     }
 
     &.disable,
@@ -164,92 +168,92 @@ a {
         pointer-events: none;
     }
 
-    @include on-event {
+    @include mixins.on-event {
         text-decoration: underline;
     }
 }
 
-@mixin declare-system-typography-theme($pepperi-theme) {
+@mixin declare-system-typography-theme() {
     body {
-        color: get-pep-color($pepperi-theme, color-text, color-main);
+        color: functions.get-pep-color(color-text, color-main);
     }
 
     .color-user-primary {
-        color: get-pep-color($pepperi-theme, color-user-primary, color-base);
+        color: functions.get-pep-color(color-user-primary, color-base);
     }
     .background-color-user-primary {
-        background-color: get-pep-color($pepperi-theme, color-user-primary, color-base);
+        background-color: functions.get-pep-color(color-user-primary, color-base);
     }
 
     .color-user-secondary {
-        color: get-pep-color($pepperi-theme, color-user-secondary, color-base);
+        color: functions.get-pep-color(color-user-secondary, color-base);
     }
     .background-color-user-secondary {
-        background-color: get-pep-color($pepperi-theme, color-user-secondary, color-base);
+        background-color: functions.get-pep-color(color-user-secondary, color-base);
     }
 
     .color-system-primary,
     .color-main {
-        color: get-pep-color($pepperi-theme, color-text, color-main);
+        color: functions.get-pep-color(color-text, color-main);
     }
     .background-color-main {
-        background-color: get-pep-color($pepperi-theme, color-text, color-main);
+        background-color: functions.get-pep-color(color-text, color-main);
     }
 
     .color-invert {
-        color: get-pep-color($pepperi-theme, color-text, color-invert);
+        color: functions.get-pep-color(color-text, color-invert);
     }
     .background-color-invert {
-        background-color: get-pep-color($pepperi-theme, color-text, color-invert);
+        background-color: functions.get-pep-color(color-text, color-invert);
     }
 
     .color-link {
-        color: get-pep-color($pepperi-theme, color-text, color-link);
+        color: functions.get-pep-color(color-text, color-link);
     }
     .background-color-link {
-        background-color: get-pep-color($pepperi-theme, color-text, color-link);
+        background-color: functions.get-pep-color(color-text, color-link);
     }
 
     .red,
     .color-caution {
-        color: get-pep-color($pepperi-theme, color-text, color-caution);
+        color: functions.get-pep-color(color-text, color-caution);
     }
     .background-color-caution {
-        background-color: get-pep-color($pepperi-theme, color-text, color-caution);
+        background-color: functions.get-pep-color(color-text, color-caution);
     }
 
     .color-success {
-        color: get-pep-color($pepperi-theme, color-text, color-success);
+        color: functions.get-pep-color(color-text, color-success);
     }
     .background-color-success {
-        background-color: get-pep-color($pepperi-theme, color-text, color-success);
+        background-color: functions.get-pep-color(color-text, color-success);
     }
 
     .color-dimmed {
-        color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+        color: functions.get-pep-color(color-text, color-dimmed);
     }
     .background-color-dimmed {
-        background-color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+        background-color: functions.get-pep-color(color-text, color-dimmed);
     }
 
     a {
         // &.color-link {
-        //     color: get-pep-color($pepperi-theme, color-text, color-link);
+        //     color: functions.get-pep-color(color-text, color-link);
         // }
 
         &.disable,
         &:disabled {
-            @include state-weak-disable($pepperi-theme);
+            @include mixins.state-weak-disable();
             background: transparent !important;
         }
     }
 
     ::selection {
-        background: get-pep-color($pepperi-theme, color-text, color-link-focus);
+        background: functions.get-pep-color(color-text, color-link-focus);
     }
 
     .mat-drawer-container {
         background-color: transparent !important;
-        color: get-pep-color($pepperi-theme, color-text, color-main);
+        color: functions.get-pep-color(color-text, color-main);
     }
 }

package/src/core/style/components/button.scss

@@ -1,3 +1,6 @@
+@use '../abstracts/variables';
+@use '../abstracts/mixins';
+
 // -----------------------------------------------------
 //  Button
 // -----------------------------------------------------
@@ -78,35 +81,35 @@
             width: $button-icon-height;
             // height: $button-icon-height !important;
             // width: $button-icon-height !important;
-            @include align-center();
+            @include mixins.align-center();
         }
     }
 }
 
-@mixin pep-button-state-none($pepperi-theme) {
-    @include pep-button-states($pepperi-theme, none);
+@mixin pep-button-state-none() {
+    @include mixins.pep-button-states(none);
 }
 
-@mixin pep-button-state-weak-invert($pepperi-theme) {
-    @include pep-button-states($pepperi-theme, weak-invert);
+@mixin pep-button-state-weak-invert() {
+    @include mixins.pep-button-states(weak-invert);
 }
 
-@mixin pep-button-state-weak($pepperi-theme, $color: null) {
-    @include pep-button-states($pepperi-theme, weak, $color);
+@mixin pep-button-state-weak($color: null) {
+    @include mixins.pep-button-states(weak, $color);
 }
 
-@mixin pep-button-state-regular($pepperi-theme, $color: null) {
-    @include pep-button-states($pepperi-theme, regular, $color);
+@mixin pep-button-state-regular($color: null) {
+    @include mixins.pep-button-states(regular, $color);
 }
 
-@mixin pep-button-state-strong($pepperi-theme, $color: null) {
-    @include pep-button-states($pepperi-theme, strong, $color);
+@mixin pep-button-state-strong($color: null) {
+    @include mixins.pep-button-states(strong, $color);
 }
 
 .pepperi-button, .pep-button {
-    @include fix-inline-z-index();
+    @include mixins.fix-inline-z-index();
     transition: all 0.25s;
-    border-radius: $border-radius-md;
+    border-radius: variables.$border-radius-md;
     border: none;
     text-align: center;
     text-decoration: none;
@@ -116,25 +119,20 @@
     padding-top: 0;
 
     .button-title {
-        @include ellipsis();
-        // @include calc(max-width, '100%'); // For none icon
+        @include mixins.ellipsis();
         max-width: calc(100%); // For none icon
     }
 
     .button-title-with-icon {
-        margin-inline-end: $spacing-sm;
-        @include ellipsis();
-        // @include calc(max-width, '100% - 1rem'); // For icon if exist
-        // max-width: calc(100% - 1rem); // For icon if exist
+        margin-inline-end: variables.$spacing-sm;
+        @include mixins.ellipsis();
 
         &.icon-before {
             margin-inline-end: unset;
-            margin-inline-start: $spacing-sm;
+            margin-inline-start: variables.$spacing-sm;
         }
     }
-    // Default size
-    // @include pep-button-size('md');
-
+    
     &.chip {
         border-radius: 2rem !important;
     }
@@ -143,7 +141,7 @@
         max-width: 11.25rem;
     }
 
-    @media (max-width: $screen-max-size-sm) {
+    @media (max-width: variables.$screen-max-size-sm) {
         &.pepperi-button-limited-width, &.pep-button-limited-width {
             max-width: 8.25rem;
         }
@@ -153,11 +151,11 @@
         @include pep-button-size('xl');
 
         .button-title-with-icon {
-            margin-inline-end: $spacing-md;
+            margin-inline-end: variables.$spacing-md;
             
             &.icon-before {
                 margin-inline-end: unset;
-                margin-inline-start: $spacing-md;
+                margin-inline-start: variables.$spacing-md;
             }
         }
     }
@@ -174,11 +172,11 @@
         @include pep-button-size('xs');
 
         .button-title-with-icon {
-            margin-inline-end: $spacing-xs;
+            margin-inline-end: variables.$spacing-xs;
             
             &.icon-before {
                 margin-inline-end: unset;
-                margin-inline-start: $spacing-xs;
+                margin-inline-start: variables.$spacing-xs;
             }
         }
     }
@@ -203,14 +201,14 @@
     //  Override material style
     // -----------------------------------------------------
     &.mat-button {
-        border-radius: $border-radius-md; // override material.
+        border-radius: variables.$border-radius-md; // override material.
 
         span {
             &.mat-button-wrapper {
                 // display: block !important;
                 display: grid!important;
                 grid-auto-flow: column;
-                @include ellipsis();
+                @include mixins.ellipsis();
                 max-width: inherit;
             }
         }
@@ -220,10 +218,10 @@
             height: 100%;
             width: 100%;
 
-            @include align-center();
+            @include mixins.align-center();
 
             .mat-icon {
-                @include align-center();
+                @include mixins.align-center();
                 vertical-align: unset; // Init material middle style
                 line-height: inherit;
                 height: inherit;
@@ -231,112 +229,111 @@
         }
 
         .mat-badge-content {
-            @include mat-badge-content();
+            @include mixins.mat-badge-content();
         }
 
         &.right-alignment {
             .mat-badge-content {
-                left: calc(#{$spacing-xs} * -1) !important;
+                left: calc(#{variables.$spacing-xs} * -1) !important;
             }
         }
 
         &.left-alignment {
             .mat-badge-content {
-                right: calc(#{$spacing-xs} * -1) !important;
+                right: calc(#{variables.$spacing-xs} * -1) !important;
             }
         }
 
         &.mat-badge-small {
             .mat-badge-content {
                 font-size: 70%;
-                // @include calc(max-width, '100% + .5rem');
                 max-width: calc(100% + .5rem);
             }
         }
     }
 }
 
-@mixin pep-button-theme($pepperi-theme) {
+@mixin pep-button-theme() {
     .pepperi-button, .pep-button {
         outline: unset;
 
         &.weak {
-            @include pep-button-state-weak($pepperi-theme);
+            @include pep-button-state-weak();
 
             &.system-primary {
-                @include pep-button-state-weak($pepperi-theme, color-system-primary);
+                @include pep-button-state-weak(color-system-primary);
             }
             &.user-primary {
-                @include pep-button-state-weak($pepperi-theme, color-user-primary);
+                @include pep-button-state-weak(color-user-primary);
             }
             &.user-secondary {
-                @include pep-button-state-weak($pepperi-theme, color-user-secondary);
+                @include pep-button-state-weak(color-user-secondary);
             }
             &.caution {
-                @include pep-button-state-weak($pepperi-theme, color-system-caution);
+                @include pep-button-state-weak(color-system-caution);
             }
             &.success {
-                @include pep-button-state-weak($pepperi-theme, color-system-success);
+                @include pep-button-state-weak(color-system-success);
             }
             &.invert {
-                @include pep-button-state-weak-invert($pepperi-theme);
+                @include pep-button-state-weak-invert();
             }
         }
 
         &.weak-invert {
-            @include pep-button-state-weak-invert($pepperi-theme);
+            @include pep-button-state-weak-invert();
         }
 
         &.regular {
-            @include pep-button-state-regular($pepperi-theme);
+            @include pep-button-state-regular();
 
             &.system-primary {
-                @include pep-button-state-regular($pepperi-theme, color-system-primary);
+                @include pep-button-state-regular(color-system-primary);
             }
             &.user-primary {
-                @include pep-button-state-regular($pepperi-theme, color-user-primary);
+                @include pep-button-state-regular(color-user-primary);
             }
             &.user-secondary {
-                @include pep-button-state-regular($pepperi-theme, color-user-secondary);
+                @include pep-button-state-regular(color-user-secondary);
             }
             &.caution {
-                @include pep-button-state-regular($pepperi-theme, color-system-caution);
+                @include pep-button-state-regular(color-system-caution);
             }
             &.success {
-                @include pep-button-state-regular($pepperi-theme, color-system-success);
+                @include pep-button-state-regular(color-system-success);
             }
         }
 
         &.strong {
-            @include pep-button-state-strong($pepperi-theme);
+            @include pep-button-state-strong();
 
             &.system-primary {
-                @include pep-button-state-strong($pepperi-theme, color-system-primary);
+                @include pep-button-state-strong(color-system-primary);
             }
             &.user-primary {
-                @include pep-button-state-strong($pepperi-theme, color-user-primary);
+                @include pep-button-state-strong(color-user-primary);
             }
             &.user-secondary {
-                @include pep-button-state-strong($pepperi-theme, color-user-secondary);
+                @include pep-button-state-strong(color-user-secondary);
             }
             &.caution {
-                @include pep-button-state-strong($pepperi-theme, color-system-caution);
+                @include pep-button-state-strong(color-system-caution);
             }
             &.success {
-                @include pep-button-state-strong($pepperi-theme, color-system-success);
+                @include pep-button-state-strong(color-system-success);
             }
         }
 
         &.none {
-            @include pep-button-state-none($pepperi-theme);
+            @include pep-button-state-none();
         }
 
         &.focused {
-            @include focus($pepperi-theme, true);
+            @include mixins.focus(true);
         }
 
         &.mat-button {
-            @include pep-badge($pepperi-theme);
+            @include mixins.pep-badge();
 
             &:hover {
                 .mat-button-focus-overlay {