@pepperi-addons/ngx-lib 0.4.2-beta.7 → 0.4.2-beta.71

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  |

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

@@ -0,0 +1,62 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import States from "./states.component";
+
+<Meta title="Abstracts/States" component={States} />
+
+export const Template = (args) => ({ props: args });
+
+# States
+
+We use states all-over-the-place, from buttons to inputs, basically everywhere there's a user interaction. 
+
+> Even though, it's rare to use states as-is
+
+States have 3 different styles
+
+- `weak`
+- `regualr`
+- `strong`
+
+Each of the styles have its common interactive states
+
+- deafult
+- hover
+- active 
+- foucs
+- read only / disabled 
+
+You can use it as a class
+
+```html
+<button class="pep-button weak success"></button>
+```
+
+Or throw a mixin in a class `↓`
+
+```css
+// Make sure you call the `mixins.scss` at the top of the file
+@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/mixins";
+
+.state-is-weak {
+    @include mixins.pep-button-states(weak);
+    // You do not have to include the (weak), it's the default
+}
+.state-is-regular {
+    @include mixins.pep-button-states(regular);
+}
+.state-is-strong {
+    @include mixins.pep-button-states(strong);
+}
+```
+## Example
+
+<Story name="States" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>
+
+#### Todo
+
+- [ ] think of abetter name then `pep-button-states`... should it be just `pep-states`?

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

@@ -0,0 +1,89 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import Typography from "./typography.component";
+
+<Meta title="Abstracts/Typography" component={Typography} />
+
+export const Template = (args) => ({ props: args });
+
+# Typography
+
+Here you can find typography styles and colors by **classes** or **tags**
+
+## Examples
+
+### Headings by class
+
+Use like this ` ↓ `
+
+```html
+    <span class="title-md">This is a MD title</span>
+```
+
+<Story name="Headings by class" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>
+
+
+### Headings by tag
+
+Use like this ` ↓ `
+
+```html
+    <h1>This is an h1 tag</h1>
+```
+
+<Story name="Headings by tag" args={{
+        storyIndex: 2,
+    }}>
+    {Template.bind({})}
+</Story>
+
+### Body text styles & tag
+
+Use like this ` ↓ `
+
+```html
+    <p class="body-md">This is a MD title</p>
+```
+
+<Story name="Body text styles & tag" args={{
+    storyIndex: 3,
+}}>
+    {Template.bind({})}
+</Story>
+
+### Text color styles
+
+Use like this ` ↓ `
+
+```html
+    <p class="color-main">...</p>
+```
+
+<Story name="Text color styles" args={{
+    storyIndex: 4,
+}}>
+    {Template.bind({})}
+</Story>
+
+### Stating the obvious
+
+You can always mix tags/classes for better semantics or look and feel  
+
+Like so ` ↓ `
+
+```html
+<p class="color-user-primary body-md">...</p>
+<h4 class="color-dimmed body-xl">...</h4>
+<span class="color-caution title-md">...</span>
+```
+
+<Story name="Stating the obvious" args={{
+    storyIndex: 5,
+}}>
+    {Template.bind({})}
+</Story>
+