@pepperi-addons/ngx-lib 0.4.2-beta.9 → 0.4.2-beta.91

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

@@ -19,7 +19,7 @@
         color-tran-30: variables.$color-system-primary-invert-tran-30,
         color-tran-20: variables.$color-system-primary-invert-tran-20,
         color-tran-10: variables.$color-system-primary-invert-tran-10,
-        color-tran-0: variables.$color-system-primary-invert-tran-0,
+        color-tran-00: variables.$color-system-primary-invert-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-system-primary-invert-flat-l-20,
         color-flat-l-10: variables.$color-system-primary-invert-flat-l-10,
@@ -44,7 +44,7 @@
         color-tran-30: variables.$color-system-primary-tran-30,
         color-tran-20: variables.$color-system-primary-tran-20,
         color-tran-10: variables.$color-system-primary-tran-10,
-        color-tran-0: variables.$color-system-primary-tran-0,
+        color-tran-00: variables.$color-system-primary-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-system-primary-flat-l-20,
         color-flat-l-10: variables.$color-system-primary-flat-l-10,
@@ -69,7 +69,7 @@
         color-tran-30: variables.$color-system-success-tran-30,
         color-tran-20: variables.$color-system-success-tran-20,
         color-tran-10: variables.$color-system-success-tran-10,
-        color-tran-0: variables.$color-system-success-tran-0,
+        color-tran-00: variables.$color-system-success-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-system-success-flat-l-20,
         color-flat-l-10: variables.$color-system-success-flat-l-10,
@@ -94,7 +94,7 @@
         color-tran-30: variables.$color-system-caution-tran-30,
         color-tran-20: variables.$color-system-caution-tran-20,
         color-tran-10: variables.$color-system-caution-tran-10,
-        color-tran-0: variables.$color-system-caution-tran-0,
+        color-tran-00: variables.$color-system-caution-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-system-caution-flat-l-20,
         color-flat-l-10: variables.$color-system-caution-flat-l-10,
@@ -119,7 +119,7 @@
         color-tran-30: variables.$color-user-primary-tran-30,
         color-tran-20: variables.$color-user-primary-tran-20,
         color-tran-10: variables.$color-user-primary-tran-10,
-        color-tran-0: variables.$color-user-primary-tran-0,
+        color-tran-00: variables.$color-user-primary-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-user-primary-flat-l-20,
         color-flat-l-10: variables.$color-user-primary-flat-l-10,
@@ -144,7 +144,7 @@
         color-tran-30: variables.$color-user-secondary-tran-30,
         color-tran-20: variables.$color-user-secondary-tran-20,
         color-tran-10: variables.$color-user-secondary-tran-10,
-        color-tran-0: variables.$color-user-secondary-tran-0,
+        color-tran-00: variables.$color-user-secondary-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-user-secondary-flat-l-20,
         color-flat-l-10: variables.$color-user-secondary-flat-l-10,
@@ -169,7 +169,7 @@
         color-tran-30: variables.$color-weak-tran-30,
         color-tran-20: variables.$color-weak-tran-20,
         color-tran-10: variables.$color-weak-tran-10,
-        color-tran-0: variables.$color-weak-tran-0,
+        color-tran-00: variables.$color-weak-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-weak-flat-l-20,
         color-flat-l-10: variables.$color-weak-flat-l-10,
@@ -194,7 +194,7 @@
         color-tran-30: variables.$color-regular-tran-30,
         color-tran-20: variables.$color-regular-tran-20,
         color-tran-10: variables.$color-regular-tran-10,
-        color-tran-0: variables.$color-regular-tran-0,
+        color-tran-00: variables.$color-regular-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-regular-flat-l-20,
         color-flat-l-10: variables.$color-regular-flat-l-10,
@@ -219,7 +219,7 @@
         color-tran-30: variables.$color-strong-tran-30,
         color-tran-20: variables.$color-strong-tran-20,
         color-tran-10: variables.$color-strong-tran-10,
-        color-tran-0: variables.$color-strong-tran-0,
+        color-tran-00: variables.$color-strong-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-strong-flat-l-20,
         color-flat-l-10: variables.$color-strong-flat-l-10,
@@ -244,7 +244,7 @@
         color-tran-30: variables.$color-top-header-tran-30,
         color-tran-20: variables.$color-top-header-tran-20,
         color-tran-10: variables.$color-top-header-tran-10,
-        color-tran-0: variables.$color-top-header-tran-0,
+        color-tran-00: variables.$color-top-header-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-top-header-flat-l-20,
         color-flat-l-10: variables.$color-top-header-flat-l-10,
@@ -268,7 +268,7 @@
         color-tran-30: variables.$color-qs-tran-30,
         color-tran-20: variables.$color-qs-tran-20,
         color-tran-10: variables.$color-qs-tran-10,
-        color-tran-0: variables.$color-qs-tran-0,
+        color-tran-00: variables.$color-qs-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-qs-flat-l-20,
         color-flat-l-10: variables.$color-qs-flat-l-10,

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

@@ -194,14 +194,17 @@
 }
 
 @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: variables.$font-family-title !important;
+    font-weight: variables.$font-weight-bold !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;
+
     @include font-size($fs);
     @include line-height($lh);
 }
@@ -280,7 +283,7 @@
     $color-high-opacity: null;
 
     @if ($hex-color == null) {
-        $color-low-opacity: functions.get-pep-color(color-system-caution, color-tran-0);
+        $color-low-opacity: functions.get-pep-color(color-system-caution, color-tran-00);
         $color-high-opacity: functions.get-pep-color(color-system-caution, color-tran-60);
     } @else {
         $color-low-opacity: rgba($hex-color, 0);
@@ -485,7 +488,7 @@
     }
 
     &:not(.keep-background-on-focus) {
-        // background: functions.get-pep-color($color-map-key, color-tran-0); // TODO: In Table view is gray so what sould we do ask Yonatan.
+        // background: functions.get-pep-color($color-map-key, color-tran-00); // TODO: In Table view is gray so what sould we do ask Yonatan.
         background: functions.get-pep-color(color-system-primary-invert, color-base);
     }
 
@@ -654,11 +657,11 @@
 //  None - default
 // -----------------------------------------------------------------------------
 @mixin state-none-default() {
-    background: functions.get-pep-color(color-system-primary, color-tran-0);
+    background: functions.get-pep-color(color-system-primary, color-tran-00);
 }
 @mixin state-none-disable() {
     @include state-disabled();
-    background: functions.get-pep-color(color-system-primary, color-tran-0) !important;
+    background: functions.get-pep-color(color-system-primary, color-tran-00) !important;
 }
 @mixin state-none-hover() {
     @include state-weak-hover();

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

@@ -44,15 +44,35 @@ $fs-md: var(--pep-font-size-md, 1rem);
 $fs-lg: var(--pep-font-size-lg, 1.125rem);
 $fs-xl: var(--pep-font-size-xl, 1.25rem);
 $fs-2xl: var(--pep-font-size-2xl, 1.5rem);
+$fs-3xl: var(--pep-font-size-3xl, 1.75rem);
+$fs-4xl: var(--pep-font-size-4xl, 2rem);
+$fs-5xl: var(--pep-font-size-5xl, 2.5rem);
+$fs-6xl: var(--pep-font-size-6xl, 3rem);
+$fs-7xl: var(--pep-font-size-7xl, 3.5rem);
+$fs-8xl: var(--pep-font-size-8xl, 4rem);
+$fs-9xl: var(--pep-font-size-9xl, 5rem);
+$fs-10xl: var(--pep-font-size-10xl, 6rem);
+$fs-11xl: var(--pep-font-size-11xl, 7rem);
+$fs-12xl: var(--pep-font-size-12xl, 8rem);
 
 // Line Height
-$lh-2xs: var(--pep-line-height-2xs, 0.75rem);
-$lh-xs: var(--pep-line-height-xs, 1rem);
-$lh-sm: var(--pep-line-height-sm, 1.25rem);
-$lh-md: var(--pep-line-height-md, 1.5rem);
-$lh-lg: var(--pep-line-height-lg, 1.75rem);
-$lh-xl: var(--pep-line-height-xl, 2rem);
-$lh-2xl: var(--pep-line-height-2xl, 2.25rem);
+$lh-2xs: var(--pep-line-height-2xs, 0.78125rem);
+$lh-xs: var(--pep-line-height-xs, 0.9375rem);
+$lh-sm: var(--pep-line-height-sm, 1.09375rem);
+$lh-md: var(--pep-line-height-md, 1.25rem);
+$lh-lg: var(--pep-line-height-lg, 1.40625rem);
+$lh-xl: var(--pep-line-height-xl, 1.5625rem);
+$lh-2xl: var(--pep-line-height-2xl, 1.875rem);
+$lh-3xl: var(--pep-line-height-3xl, 2.1875rem);
+$lh-4xl: var(--pep-line-height-4xl, 2.5rem);
+$lh-5xl: var(--pep-line-height-5xl, 3.125rem);
+$lh-6xl: var(--pep-line-height-6xl, 3.75rem);
+$lh-7xl: var(--pep-line-height-7xl, 4.375rem);
+$lh-8xl: var(--pep-line-height-8xl, 5rem);
+$lh-9xl: var(--pep-line-height-9xl, 6.25rem);
+$lh-10xl: var(--pep-line-height-10xl, 7.5rem);
+$lh-11xl: var(--pep-line-height-11xl, 8.75rem);
+$lh-12xl: var(--pep-line-height-12xl, 10rem);
 
 //  Fonts weight - General
 $font-weight-normal: var(--pep-font-weight-normal, 400);
@@ -195,7 +215,7 @@ $color-system-primary-invert-tran-40: hsla(#{$color-system-primary-invert-h}, #{
 $color-system-primary-invert-tran-30: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.12);
 $color-system-primary-invert-tran-20: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.08);
 $color-system-primary-invert-tran-10: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.04);
-$color-system-primary-invert-tran-0: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0);
+$color-system-primary-invert-tran-00: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0);
 // Flat colors.
 $color-system-primary-invert-flat-l-20: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, calc(#{$color-system-primary-invert-l} - #{$flat-l-20-lp}));
 $color-system-primary-invert-flat-l-10: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, calc(#{$color-system-primary-invert-l} - #{$flat-l-10-lp}));
@@ -223,7 +243,7 @@ $color-system-primary-tran-40: hsla(#{$color-system-primary-h}, #{$color-system-
 $color-system-primary-tran-30: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.12);
 $color-system-primary-tran-20: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.08);
 $color-system-primary-tran-10: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.04);
-$color-system-primary-tran-0: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0);
+$color-system-primary-tran-00: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0);
 // Flat colors.
 $color-system-primary-flat-l-20: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, calc(#{$color-system-primary-l} - #{$flat-l-20-lp}));
 $color-system-primary-flat-l-10: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, calc(#{$color-system-primary-l} - #{$flat-l-10-lp}));
@@ -251,7 +271,7 @@ $color-system-success-tran-40: hsla(#{$color-system-success-h}, #{$color-system-
 $color-system-success-tran-30: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.12);
 $color-system-success-tran-20: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.08);
 $color-system-success-tran-10: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.04);
-$color-system-success-tran-0: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0);
+$color-system-success-tran-00: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0);
 // Flat colors.
 $color-system-success-flat-l-20: hsl(#{$color-system-success-h}, #{$color-system-success-s}, calc(#{$color-system-success-l} - #{$flat-l-20-lp}));
 $color-system-success-flat-l-10: hsl(#{$color-system-success-h}, #{$color-system-success-s}, calc(#{$color-system-success-l} - #{$flat-l-10-lp}));
@@ -279,7 +299,7 @@ $color-system-caution-tran-40: hsla(#{$color-system-caution-h}, #{$color-system-
 $color-system-caution-tran-30: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.12);
 $color-system-caution-tran-20: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.08);
 $color-system-caution-tran-10: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.04);
-$color-system-caution-tran-0: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0);
+$color-system-caution-tran-00: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0);
 // Flat colors.
 $color-system-caution-flat-l-20: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, calc(#{$color-system-caution-l} - #{$flat-l-20-lp}));
 $color-system-caution-flat-l-10: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, calc(#{$color-system-caution-l} - #{$flat-l-10-lp}));
@@ -307,7 +327,7 @@ $color-user-primary-tran-40: hsla(#{$color-user-primary-h}, #{$color-user-primar
 $color-user-primary-tran-30: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.12);
 $color-user-primary-tran-20: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.08);
 $color-user-primary-tran-10: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.04);
-$color-user-primary-tran-0: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0);
+$color-user-primary-tran-00: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0);
 // Flat colors.
 $color-user-primary-flat-l-20: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, calc(#{$color-user-primary-l} - #{$flat-l-20-lp}));
 $color-user-primary-flat-l-10: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, calc(#{$color-user-primary-l} - #{$flat-l-10-lp}));
@@ -335,7 +355,7 @@ $color-user-secondary-tran-40: hsla(#{$color-user-secondary-h}, #{$color-user-se
 $color-user-secondary-tran-30: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.12);
 $color-user-secondary-tran-20: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.08);
 $color-user-secondary-tran-10: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.04);
-$color-user-secondary-tran-0: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0);
+$color-user-secondary-tran-00: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0);
 // Flat colors.
 $color-user-secondary-flat-l-20: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, calc(#{$color-user-secondary-l} - #{$flat-l-20-lp}));
 $color-user-secondary-flat-l-10: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, calc(#{$color-user-secondary-l} - #{$flat-l-10-lp}));
@@ -363,7 +383,7 @@ $color-weak-tran-40: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l},
 $color-weak-tran-30: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.12);
 $color-weak-tran-20: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.08);
 $color-weak-tran-10: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.04);
-$color-weak-tran-0: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0);
+$color-weak-tran-00: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0);
 // Flat colors.
 $color-weak-flat-l-20: hsl(#{$color-weak-h}, #{$color-weak-s}, calc(#{$color-weak-l} - #{$flat-l-20-lp}));
 $color-weak-flat-l-10: hsl(#{$color-weak-h}, #{$color-weak-s}, calc(#{$color-weak-l} - #{$flat-l-10-lp}));
@@ -391,7 +411,7 @@ $color-regular-tran-40: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-
 $color-regular-tran-30: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.12);
 $color-regular-tran-20: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.08);
 $color-regular-tran-10: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.04);
-$color-regular-tran-0: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0);
+$color-regular-tran-00: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0);
 // Flat colors.
 $color-regular-flat-l-20: hsl(#{$color-regular-h}, #{$color-regular-s}, calc(#{$color-regular-l} - #{$flat-l-20-lp}));
 $color-regular-flat-l-10: hsl(#{$color-regular-h}, #{$color-regular-s}, calc(#{$color-regular-l} - #{$flat-l-10-lp}));
@@ -419,7 +439,7 @@ $color-strong-tran-40: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-str
 $color-strong-tran-30: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.12);
 $color-strong-tran-20: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.08);
 $color-strong-tran-10: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.04);
-$color-strong-tran-0: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0);
+$color-strong-tran-00: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0);
 // Flat colors.
 $color-strong-flat-l-20: hsl(#{$color-strong-h}, #{$color-strong-s}, calc(#{$color-strong-l} - #{$flat-l-20-lp}));
 $color-strong-flat-l-10: hsl(#{$color-strong-h}, #{$color-strong-s}, calc(#{$color-strong-l} - #{$flat-l-10-lp}));
@@ -467,7 +487,7 @@ $color-top-header-tran-40: hsla(#{$color-top-header-h}, #{$color-top-header-s},
 $color-top-header-tran-30: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.12);
 $color-top-header-tran-20: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.08);
 $color-top-header-tran-10: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.04);
-$color-top-header-tran-0: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0);
+$color-top-header-tran-00: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0);
 // Flat colors.
 $color-top-header-flat-l-20: hsl(#{$color-top-header-h}, #{$color-top-header-s}, calc(#{$color-top-header-l} - #{$flat-l-20-lp}));
 $color-top-header-flat-l-10: hsl(#{$color-top-header-h}, #{$color-top-header-s}, calc(#{$color-top-header-l} - #{$flat-l-10-lp}));
@@ -495,7 +515,7 @@ $color-qs-tran-40: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.16);
 $color-qs-tran-30: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.12);
 $color-qs-tran-20: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.08);
 $color-qs-tran-10: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.04);
-$color-qs-tran-0: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0);
+$color-qs-tran-00: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0);
 // Flat colors.
 $color-qs-flat-l-20: hsl(#{$color-qs-h}, #{$color-qs-s}, calc(#{$color-qs-l} - #{$flat-l-20-lp}));
 $color-qs-flat-l-10: hsl(#{$color-qs-h}, #{$color-qs-s}, calc(#{$color-qs-l} - #{$flat-l-10-lp}));

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

@@ -0,0 +1,59 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import { componentWrapperDecorator } from "@storybook/angular";
+
+import BorderRadius from "./borderRadius.component";
+
+<Meta title="Abstracts/Border Radius" component={BorderRadius}
+    decorators={[
+        componentWrapperDecorator(
+            (story) => `<div class="this-max-width">${story}</div>`
+        ),
+    ]}
+/>
+
+export const Template = (args) => ({ props: args });
+
+# Border Radius
+
+You can use the border radius as a class
+
+- `.border-radius-sm`
+- `.border-radius-md`
+- `.border-radius-lg`
+- `.border-radius-xl`
+
+Like so `↓`
+
+```html
+<div class="border-radius-md">
+    <!-- ... -->
+</div>
+```
+
+Or or as a variable
+
+- `variables.$border-radius-sm`
+- `variables.$border-radius-md`
+- `variables.$border-radius-lg`
+- `variables.$border-radius-xl`
+
+Like so `↓`
+
+```css
+// Make sure you call the `variables.scss` at the top of the file
+@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/variables";
+
+.losing-my-edge {
+    border-radius: variables.$border-radius-sm;
+```
+
+##### For the most part you should use the `border-radius-md` size
+
+## Example
+
+<Story name="Border Radius" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>

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

@@ -0,0 +1,36 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import Breakpoints from "./breakpoints.component";
+
+<Meta title="Abstracts/Breakpoints" component={Breakpoints} />
+
+export const Template = (args) => ({ props: args });
+
+# Breakpoints
+
+The see the breakpoints in action decrease and increase your viewport 
+
+These are the breakpoints `↓`
+
+```css
+$screen-max-size-2xs: 460px;
+$screen-max-size-xs: 599px;
+$screen-max-size-sm: 959px;
+$screen-max-size-md: 1279px; 
+$screen-max-size-lg: 1919px; 
+$screen-max-size-xl: 5000px;
+```
+Use them like so `↓`
+
+```css
+@media (max-width: variables.$screen-max-size-xs) {
+    ...
+}
+```
+## Example
+
+<Story name="Breakpoints" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>

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

@@ -0,0 +1,128 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import Colors from "./colors.component";
+
+<Meta title="Abstracts/Colors" component={Colors} />
+
+export const Template = (args) => ({ props: args });
+
+# Colors
+
+Pepperi design system has its pair share of color set with semantic naming (not by color name)
+
+You can see them all here
+
+## Example
+
+### Text colors
+
+You can use a functions to use the `color-text` like so `↓`
+
+```css
+// Make sure you call the `functions.scss` at the top of the file
+@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/functions";
+
+color: functions.get-pep-color(color-text, color-main);
+```
+In the function, the 1st argument is `color-text`, and for the 2nd argument use one of the following:
+
+- `color-main`
+- `color-dimmed`
+- `color-disabled`
+- `color-invert`
+- `color-link`
+- `color-link`
+- `color-link`
+- `color-success`
+- `color-caution`
+
+<Story name="Text colors" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>
+
+### System colors
+
+Like the example above you can use a functions to use the `color-system-primary` like so `↓`
+
+```css
+// Make sure you call the `functions.scss` at the top of the file
+@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/functions";
+
+color: functions.get-pep-color(color-system-primary, color-base);
+```
+In the function, the 1st argument is `color-system-primary`, and for the 2nd argument use one of the following:
+
+- `color-tran-00`
+- `color-tran-10`
+- `color-tran-20`
+- `color-tran-30`
+- `color-tran-40`
+- `color-tran-50`
+- `color-tran-60`
+- `color-tran-70`
+- `color-tran-80`
+- `color-tran-90`
+- `color-flat-l-20`
+- `color-flat-l-10`
+- `color-base`
+- `color-flat-r-20`
+- `color-flat-r-30`
+- `color-flat-r-40`
+
+<Story name="System colors" args={{
+        storyIndex: 2,
+    }}>
+    {Template.bind({})}
+</Story>
+
+### Inverted system colors
+
+You can use them like the system color above but with `color-system-primary-invert` as the 1st argument
+
+<Story name="Inverted system colors" args={{
+        storyIndex: 3,
+    }}>
+    {Template.bind({})}
+</Story>
+
+### Success colors
+
+You can use them like the system color above but with `color-system-success` as the 1st argument
+
+<Story name="Success colors" args={{
+        storyIndex: 4,
+    }}>
+    {Template.bind({})}
+</Story>
+
+### Caution colors
+
+You can use them like the system color above but with `color-system-caution` as the 1st argument
+
+<Story name="Caution colors" args={{
+        storyIndex: 5,
+    }}>
+    {Template.bind({})}
+</Story>
+
+### Primary user colors
+
+You can use them like the system color above but with `color-user-primary` as the 1st argument
+
+<Story name="Primary user colors" args={{
+        storyIndex: 6,
+    }}>
+    {Template.bind({})}
+</Story>
+
+### Secondary user colors
+
+You can use them like the system color above but with `color-user-secondary` as the 1st argument
+
+<Story name="Secondary user colors" args={{
+        storyIndex: 7,
+    }}>
+    {Template.bind({})}
+</Story>

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

@@ -0,0 +1,69 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import Shadows from "./shadows.component";
+
+<Meta title="Abstracts/Shadows" component={Shadows} />
+
+export const Template = (args) => ({ props: args });
+
+# Shadows
+
+Here are the available shadow classes
+
+-   `.shadow-xs-xsoft`
+-   `.shadow-xs-soft`
+-   `.shadow-xs-regular`
+-   `.shadow-xs-hard`
+-   `.shadow-sm-xsoft`
+-   `.shadow-sm-soft`
+-   `.shadow-sm-regular`
+-   `.shadow-sm-hard`
+-   `.shadow-md-xsoft`
+-   `.shadow-md-soft`
+-   `.shadow-md-regular`
+-   `.shadow-md-hard`
+-   `.shadow-lg-xsoft`
+-   `.shadow-lg-soft`
+-   `.shadow-lg-regular`
+-   `.shadow-lg-hard`
+-   `.shadow-xl-xsoft`
+-   `.shadow-xl-soft`
+-   `.shadow-xl-regular`
+-   `.shadow-xl-hard`
+
+Use them like so `↓`
+
+```html
+<div class="shadow-xl-soft">
+    <!-- ... -->
+</div>
+```
+
+You can also use the as variable function
+
+-   `functions.get-pep-shadow(shadow-xs, xsoft | soft | regular | hard);`
+-   `functions.get-pep-shadow(shadow-sm, xsoft | soft | regular | hard);`
+-   `functions.get-pep-shadow(shadow-md, xsoft | soft | regular | hard);`
+-   `functions.get-pep-shadow(shadow-lg, xsoft | soft | regular | hard);`
+-   `functions.get-pep-shadow(shadow-xl, xsoft | soft | regular | hard);`
+
+Like so `↓`
+
+```css
+// Make sure you call the `functions.scss` at the top of the file
+@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/functions";
+
+.burn-my-shadow {
+    box-shadow: : functions.get-pep-shadow(shadow-xl, hard);
+```
+
+## Example
+
+<Story
+    name="Shadows"
+    args={{
+        storyIndex: 1,
+    }}
+>
+    {Template.bind({})}
+</Story>

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

@@ -0,0 +1,75 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import Spacing from "./spacing.component";
+
+<Meta title="Abstracts/Spacing" component={Spacing} />
+
+export const Template = (args) => ({ props: args });
+
+# Spacing
+
+Here are the available spacing vars, see them play out in the box below
+
+- `$spacing-2xs`
+- `$spacing-xs`
+- `$spacing-sm`
+- `$spacing-md`
+- `$spacing-lg`
+- `$spacing-xl`
+- `$spacing-xl2`
+- `$spacing-xl3`
+- `$spacing-xl4`
+- `$spacing-xl5`
+- `$spacing-xl6`
+- `$spacing-xl7`
+- `$spacing-xl8`
+- `$spacing-xl9`
+
+
+Use them like so `↓`
+
+```css
+// Make sure you call the `variables.scss` at the top of the file
+@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/variables";
+
+.size-class {
+    width: variables.$spacing-lg;
+    height: variables.$spacing-xl;
+    padding: variables.$spacing-xs;
+}
+```
+
+> You can use `calc` to reach a bigger size - here we reach a 512px wide class
+
+```css
+.widddde {
+    width: calc(variables.$spacing-lg * 4);
+
+}
+```
+## Example
+
+<Story name="Spacing" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>
+
+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  |