@pepperi-addons/ngx-lib 0.4.2-storybook.1 → 0.5.0-ng15.2

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

@@ -193,17 +193,17 @@
     }
 }
 
-@mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md) {
-    font-family: variables.$font-family-title !important;
-    font-weight: variables.$font-weight-bold !important;
+@mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md, $font-family: variables.$font-family-title, $font-weight: variables.$font-weight-bold) {
+    font-family: $font-family !important;
+    font-weight: $font-weight !important;
 
     @include font-size($fs);
     @include line-height($lh);
 }
 
-@mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm) {
-    font-family: variables.$font-family-body !important;
-    font-weight: variables.$font-weight-normal;
+@mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm, $font-family: variables.$font-family-body, $font-weight: variables.$font-weight-normal) {
+    font-family: $font-family !important;
+    font-weight: $font-weight;
 
     @include font-size($fs);
     @include line-height($lh);
@@ -306,6 +306,37 @@
     );
 }
 
+@mixin pep-full-width-loader($loader-color: variables.$color-loader-base) {
+    $loader-bg: color-mix(in hsl, $loader-color 0%, transparent);
+
+    height: 0.25rem;
+    z-index: variables.$z-index-high;
+    width: 100%;
+    background: linear-gradient(0.25turn, $loader-bg 0%, $loader-color 50%, $loader-bg 50%);
+    background-size: 200% 200%;
+    animation-timing-function: ease-out;
+    animation-name: slidein;
+    animation-iteration-count: infinite;
+    animation-duration: 1.5s;
+
+    &.rtl {
+        animation-name: slideinRtl;
+        background: linear-gradient(0.75turn, $loader-bg 0%, $loader-color 50%, $loader-bg 50%);
+        background-size: 200% 200%;
+    }
+
+    @keyframes slidein {
+        0% { background-position: 100%; }
+        75% { background-position: -100%; }
+        100% { background-position: -100%; }
+    }
+    @keyframes slideinRtl {
+        0% { background-position: -100%; }
+        75% { background-position: 100%; }
+        100% { background-position: 100%; }
+    }
+}
+
 // ******************************************************************************
 //                        General state declerations
 // ******************************************************************************
@@ -380,7 +411,8 @@
 //  State badge
 // -----------------------------------------------------------------------------
 @mixin pep-badge() {
-    .mat-badge-content {
+    .mat-badge-content,
+    .mat-mdc-badge-content {
         @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);
@@ -388,13 +420,15 @@
 }
 
 // ******************************************************************************
-//                       State weak declerations
+//                       State declerations
 // ******************************************************************************
 @mixin pep-state-default($style: weak, $color-map-key: null, $regularBorder: false) {
     @if ($style == 'none') {
         @include state-none-default();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-default();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-default();
     } @else if ($style == 'weak') {
         @include state-weak-default($color-map-key);
     } @else if ($style == 'strong') {
@@ -408,6 +442,8 @@
         @include state-none-disable();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-disable();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-disable();
     } @else if ($style == 'weak') {
         @include state-weak-disable($color-map-key);
     } @else if ($style == 'strong') {
@@ -421,6 +457,8 @@
         @include state-none-hover();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-hover();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-hover();
     } @else if ($style == 'weak') {
         @include state-weak-hover($color-map-key);
     } @else if ($style == 'strong') {
@@ -434,6 +472,8 @@
         @include state-none-active();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-active();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-active();
     } @else if ($style == 'weak') {
         @include state-weak-active($color-map-key);
     } @else if ($style == 'strong') {
@@ -447,6 +487,8 @@
         @include state-none-focus();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-focus();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-focus();
     } @else if ($style == 'weak') {
         @include state-weak-focus($color-map-key);
     } @else if ($style == 'strong') {
@@ -465,7 +507,7 @@
     @if ($color-map-key == null) {
         $color-map-key: color-weak;
     }
-    background: functions.get-pep-color($color-map-key, color-tran-30);
+    background: functions.get-pep-color($color-map-key, color-tran-20);
 }
 @mixin state-weak-disable($color-map-key: null) {
     @include state-disabled();
@@ -473,8 +515,12 @@
     @if ($color-map-key == null) {
         $color-map-key: color-weak;
     }
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color($color-map-key, color-tran-10) !important;
+
+    &:not(.disabled-no-background-no-color) {
+        color:functions.get-pep-color(color-text, color-disabled) !important;
+        background: functions.get-pep-color($color-map-key, color-tran-10) !important;
+    }
+
 }
 @mixin state-weak-hover($color-map-key: null) {
     @if ($color-map-key == null) {
@@ -507,33 +553,90 @@
 //  Weak - invert
 // -----------------------------------------------------------------------------
 @mixin state-weak-invert-default() {
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-30);
 
-    // $color: functions.get-pep-color(color-text, color-main);
-    // color: $color;
-
-    // .svg-icon {
-    //     fill: $color !important;
-    // }
+    $color: functions.get-pep-color(color-text, color-invert);
+    color: $color;
+    
+    .svg-icon {
+        fill: $color !important;
+    }
 }
 @mixin state-weak-invert-disable() {
     @include state-disabled();
     
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-20) !important;
+    &:not(.disabled-no-background-no-color) {
+        color:functions.get-pep-color(color-system-primary-invert, color-tran-40) !important;
+        background: functions.get-pep-color(color-system-primary-invert, color-tran-10) !important;
+    }
+
+    .svg-icon {
+        fill: functions.get-pep-color(color-system-primary-invert, color-tran-40) !important;
+    }
 }
 @mixin state-weak-invert-hover() {
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-50);
     box-shadow: functions.get-pep-shadow(shadow-xs, soft);
     cursor: pointer;
 }
 @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);
+    $color: functions.get-pep-color(color-text, color-main);
+    color: $color;
+    
+    .svg-icon {
+        fill: $color !important;
+    }
 }
 @mixin state-weak-invert-focus() {
     background: functions.get-pep-color(color-system-primary-invert, color-base);
     @include focus();
+    $color: functions.get-pep-color(color-text, color-main);
+    color: $color;
+    
+    .svg-icon {
+        fill: $color !important;
+    }
+}
+
+//  Weak - special
+// -----------------------------------------------------------------------------
+@mixin state-weak-special-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-50);
+}
+@mixin state-weak-special-disable() {
+    @include state-disabled();
+    
+    &:not(.disabled-no-background-no-color) {
+        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-special-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-special-active() {
+    // background: functions.get-pep-color(color-system-primary-invert, color-base);
+    // box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    // $color: functions.get-pep-color(color-text, color-main);
+    // color: $color;
+    
+    // .svg-icon {
+    //     fill: $color !important;
+    // }
+}
+@mixin state-weak-special-focus() {
+    // background: functions.get-pep-color(color-system-primary-invert, color-base);
+    // @include focus();
+    // $color: functions.get-pep-color(color-text, color-main);
+    // color: $color;
+    
+    // .svg-icon {
+    //     fill: $color !important;
+    // }
 }
 
 // ******************************************************************************
@@ -585,8 +688,12 @@
     @if ($color-map-key == null) {
         $color-map-key: color-regular;
     }
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color($color-map-key, color-flat-r-30) !important;
+
+    &:not(.disabled-no-background-no-color) {
+        color:functions.get-pep-color(color-text, color-disabled) !important;
+        background: functions.get-pep-color($color-map-key, color-flat-r-30) !important;
+    }
+
     box-shadow: functions.get-pep-shadow(shadow-xs, xsoft) !important;
     @include inline(functions.get-pep-color($color-map-key, color-tran-20), 1px, solid, $regularBorder);
 }
@@ -618,12 +725,15 @@
     @if ($color-map-key == null) {
         $color-map-key: color-strong;
     }
-    background: functions.get-pep-color($color-map-key, color-base) !important;
-    opacity: 0.5 !important;
-    
+
     $color: functions.get-pep-color(color-text, color-invert);
 
-    color: $color;
+    &:not(.disabled-no-background-no-color) {
+        background: functions.get-pep-color($color-map-key, color-base) !important;
+        opacity: 0.5 !important;
+        color: $color;
+    }
+
     .svg-icon {
         @include svg-icon-color($color);
     }
@@ -699,25 +809,31 @@
 // ******************************************************************************
 @mixin pep-form-field-states($style: weak, $color-map-key: null) {
     // Default
-    .mat-form-field-flex {
+    .mat-form-field-flex,
+    .mat-mdc-form-field-flex {
         @include pep-state-default($style, $color-map-key);
     }
 
     // Hover
     &:hover {
         .ignore-disabled,
-        &:not(.mat-form-field-disabled) {
-            .mat-form-field-flex {
+        &:not(.mat-form-field-disabled),
+        &:not(.mat-mdc-form-field-disabled) {
+            .mat-form-field-flex,
+            .mat-mdc-form-field-flex {
                 @include pep-state-hover($style, $color-map-key);
             }
         }
     }
 
     // Focused
-    &.mat-focused {
+    &.mat-focused,
+    &.mat-mdc-focused {
         .ignore-disabled,
-        &:not(.mat-form-field-disabled) {
-            .mat-form-field-flex {
+        &:not(.mat-form-field-disabled),
+        &:not(.mat-mdc-form-field-disabled) {
+            .mat-form-field-flex,
+            .mat-mdc-form-field-flex {
                 @include pep-state-focus($style, $color-map-key);
             }
         }
@@ -727,17 +843,21 @@
     &.active,
     &:active {
         .ignore-disabled,
-        &:not(.mat-form-field-disabled) {
-            .mat-form-field-flex {
+        &:not(.mat-form-field-disabled),
+        &:not(.mat-mdc-form-field-disabled) {
+            .mat-form-field-flex,
+            .mat-mdc-form-field-flex {
                 @include pep-state-active($style, $color-map-key);
             }
         }
     }
 
     // Disabled
-    &.mat-form-field-disabled {
+    &.mat-form-field-disabled,
+    &.mat-mdc-form-field-disabled {
         &:not(.ignore-disabled) {
-            .mat-form-field-flex {
+            .mat-form-field-flex,
+            .mat-mdc-form-field-flex {
                 @include pep-state-disable($style, $color-map-key);
             }
         }

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

@@ -77,7 +77,7 @@ $lh-12xl: var(--pep-line-height-12xl, 10rem);
 //  Fonts weight - General
 $font-weight-normal: var(--pep-font-weight-normal, 400);
 $font-weight-bold: var(--pep-font-weight-bold, 600);
-$font-weight-bolder: var(--pep-font-weight-bolder, 800);
+$font-weight-bolder: var(--pep-font-weight-bold, 600); // var(--pep-font-weight-bolder, 800);
 
 // Round corners
 // -----------------------------------------------------------------------------
@@ -496,6 +496,15 @@ $color-top-header-flat-r-20: hsl(#{$color-top-header-h}, #{$color-top-header-s},
 $color-top-header-flat-r-30: hsl(#{$color-top-header-h}, #{$color-top-header-s}, $flat-r-30-lp);
 $color-top-header-flat-r-40: hsl(#{$color-top-header-h}, #{$color-top-header-s}, $flat-r-40-lp);
 
+//*********************************************************************************
+//                       Loader - color
+//*********************************************************************************
+// Base color - default caution color.
+$color-loader-h: var(--pep-color-loader-h, 360);
+$color-loader-s: var(--pep-color-loader-s, 100%);
+$color-loader-l: var(--pep-color-loader-l, 45%);
+$color-loader-base: hsl(#{$color-loader-h}, #{$color-loader-s}, #{$color-loader-l}); // base
+
 //*********************************************************************************
 //                       Quantity selector - color
 //*********************************************************************************

package/src/core/style/base/Spacing.stories.mdx

@@ -16,14 +16,14 @@ Here are the available spacing vars, see them play out in the box below
 - `$spacing-md`
 - `$spacing-lg`
 - `$spacing-xl`
-- `$spacing-xl2`
-- `$spacing-xl3`
-- `$spacing-xl4`
-- `$spacing-xl5`
-- `$spacing-xl6`
-- `$spacing-xl7`
-- `$spacing-xl8`
-- `$spacing-xl9`
+- `$spacing-2xl`
+- `$spacing-3xl`
+- `$spacing-4xl`
+- `$spacing-5xl`
+- `$spacing-6xl`
+- `$spacing-7xl`
+- `$spacing-8xl`
+- `$spacing-9xl`
 
 
 Use them like so `↓`
@@ -59,17 +59,17 @@ BTW, these are the vaules of the spacing `↓`
 
 | Name | In rems | In PX on base size (1rem=16px) |
 |:---|:---|:---|
-|`$spacing-2xs` |  0.125rem | 2px |
-|`$spacing-xs`  |  0.25rem  | 4px |
-|`$spacing-sm`  |  0.5rem   | 8px |
-|`$spacing-md`  |  0.75rem  | 12px |
-|`$spacing-lg`  |  1rem     | 16px |
-|`$spacing-xl`  |  1.5rem   | 24px |
-|`$spacing-xl2` |  2rem     | 32px |
-|`$spacing-xl3` |  2.5rem   | 40px  |
-|`$spacing-xl4` |  3rem     |   48px  |
-|`$spacing-xl5` |  3.5rem   | 56px  |
-|`$spacing-xl6` |  5rem     |   80px  |
-|`$spacing-xl7` |  6rem     |   96px  |
-|`$spacing-xl8` |  8rem     |   128px  |
-|`$spacing-xl9` |  16rem    |  256px  |
+|`$spacing-2xs` | 0.125rem | 2px   |
+|`$spacing-xs`  | 0.25rem  | 4px   |
+|`$spacing-sm`  | 0.5rem   | 8px   |
+|`$spacing-md`  | 0.75rem  | 12px  |
+|`$spacing-lg`  | 1rem     | 16px  |
+|`$spacing-xl`  | 1.5rem   | 24px  |
+|`$spacing-2xl` | 2rem     | 32px  |
+|`$spacing-3xl` | 2.5rem   | 40px  |
+|`$spacing-4xl` | 3rem     | 48px  |
+|`$spacing-5xl` | 3.5rem   | 56px  |
+|`$spacing-6xl` | 5rem     | 80px  |
+|`$spacing-7xl` | 6rem     | 96px  |
+|`$spacing-8xl` | 8rem     | 128px |
+|`$spacing-9xl` | 16rem    | 256px |