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

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

@@ -1,545 +1,545 @@
-// -----------------------------------------------------------------------------
-// General
-// -----------------------------------------------------------------------------
-$max-scr-width: 100%;
-
-/// Container's maximum width
-/// @type Length
-$max-width: 1180px !default;
-
-/// Relative or absolute URL where all assets are served from
-/// @type String
-///   $base-url: 'http://cdn.example.com/assets/';
-$base-url: '/assets/' !default;
-
-//  Z-index - General
-// -----------------------------------------------------------------------------
-$z-index-high: 999; // 999 because material modals & overlays.
-$z-index-medium: 100;
-$z-index-low: 50;
-$z-index-lowest: 1;
-
-//  Screen size - General (flex layout breakpoints)
-// -----------------------------------------------------------------------------
-$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;
-
-// Fonts - General
-// -----------------------------------------------------------------------------
-// Title font family
-$font-family-title: var(--pep-font-family-title, Nexa), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !default;
-
-// Body font family
-$font-family-body: var(--pep-font-family-body, Inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !default;
-
-// Font sizes
-$fs-2xs: var(--pep-font-size-2xs, 0.625rem);
-$fs-xs: var(--pep-font-size-xs, 0.75rem);
-$fs-sm: var(--pep-font-size-sm, 0.875rem);
-$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);
-
-// 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);
-
-//  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);
-
-
-// Round corners
-// -----------------------------------------------------------------------------
-$border-radius-sm: var(--pep-border-radius-sm, 0.125rem);
-$border-radius-md: var(--pep-border-radius-md, 0.25rem);
-$border-radius-lg: var(--pep-border-radius-lg, 0.5rem);
-
-//  Spacing size - General
-// -----------------------------------------------------------------------------
-$spacing-2xs: var(--pep-spacing-2xs, 0.125rem);
-$spacing-xs: var(--pep-spacing-xs, 0.25rem);
-$spacing-sm: var(--pep-spacing-sm, 0.5rem);
-$spacing-md: var(--pep-spacing-md, 0.75rem);
-$spacing-lg: var(--pep-spacing-lg, 1rem);
-$spacing-xl: var(--pep-spacing-xl, 1.5rem);
-$spacing-2xl: var(--pep-spacing-2xl, 2rem);
-$spacing-3xl: var(--pep-spacing-3xl, 2.5rem);   // 40px
-$spacing-4xl: var(--pep-spacing-4xl, 3rem);     // 48px
-$spacing-5xl: var(--pep-spacing-5xl, 3.5rem);   // 56px
-$spacing-6xl: var(--pep-spacing-6xl, 5rem);     // 80px
-$spacing-7xl: var(--pep-spacing-7xl, 6rem);     // 96px
-$spacing-8xl: var(--pep-spacing-8xl, 8rem);     // 128px
-$spacing-9xl: var(--pep-spacing-9xl, 16rem);    // 256px
-
-// *****************************************************************************************
-//                        Layout - General
-// *****************************************************************************************
-$content-margin: $spacing-lg;
-$double-content-margin: calc(#{$spacing-lg} * 2); // $content-margin * 2;
-$content-padding: $spacing-lg;
-$double-content-padding: calc(#{$spacing-lg} * 2);// $content-padding * 2;
-
-//  Header
-// -----------------------------------------------------------------------------
-$header-height: var(--pep-header-height, 4rem); // (default - 4rem)
-
-//  Main
-// -----------------------------------------------------------------------------
-$main-height: var(--pep-main-height); // window.innerHeight - header
-
-//  Side bar
-// -----------------------------------------------------------------------------
-$side-bar-width: var(--pep-side-bar-width, 16rem);
-$floating-side-bar-width: calc(#{$side-bar-width} + #{$spacing-2xl});
-$settings-bar-width: var(--pep-settings-bar-width, 16rem);
-
-//  Dialogs
-// -----------------------------------------------------------------------------
-$dialog-header-height: 3rem;
-
-//  Top bar & Footer
-// -----------------------------------------------------------------------------
-$top-bar-spacing-top: var(--pep-top-bar-spacing-top, 1.5rem);
-$top-bar-spacing-bottom: var(--pep-top-bar-spacing-bottom, 0.5rem);
-$top-bar-field-height: var(--pep-top-bar-field-height, 2.5rem);
-$top-bar-height: calc(#{$top-bar-spacing-top} + #{$top-bar-spacing-bottom} + #{$top-bar-field-height});
-$top-bar-height-with-no-top: calc(#{$top-bar-spacing-bottom} + #{$top-bar-field-height});
-
-$footer-bar-spacing-top: var(--pep-footer-bar-spacing-top, 0.75rem);
-$footer-bar-spacing-bottom: var(--pep-footer-bar-spacing-bottom, 1.25rem);
-$footer-bar-field-height: $top-bar-field-height;
-$footer-bar-height: var(--pep-footer-bar-height, 4.5rem);
-
-//  Form - Layout
-// -----------------------------------------------------------------------------
-$form-field-height: var(--pep-form-field-height, 2.5rem);
-$form-field-title-height: var(--pep-form-field-title-height, 1.5rem);
-$form-spacing: var(--pep-form-spacing, 1rem);
-$form-row-height: calc(#{$form-field-height} + #{$form-field-title-height});
-$form-field-button-size: calc(#{$form-field-height} - #{$spacing-lg});
-$form-field-button-icon-size: calc(#{$form-field-height} - #{$spacing-xl});
-
-//  Card - Layout
-// -----------------------------------------------------------------------------
-$card-field-height: var(--pep-card-field-height, 1.5rem);
-// $card-spacing: var(--pep-card-spacing);
-$card-field-button-size: calc(#{$card-field-height} - #{$spacing-sm});
-$card-field-button-icon-size: calc(#{$card-field-height} - #{$spacing-md});
-
-$card-border-radius: var(--pep-card-border-radius, 0.25rem);
-
-//  Table - Layout
-// -----------------------------------------------------------------------------
-$table-field-height: var(--pep-table-field-height, 2rem);
-$table-spacing: var(--pep-table-spacing, 0.5rem);
-$table-row-fieldset-height: calc(#{$table-field-height} + #{$table-spacing}); // 2.5rem
-$table-row-height: calc(#{$table-field-height} + (#{$table-spacing} * 2)); // 3rem;
-$table-half-spacing: calc(#{$table-spacing} / 2); // 0.25rem
-
-$table-border-radius: var(--pep-table-border-radius, 0.25rem);
-
-//  Tabs - Layout
-// -----------------------------------------------------------------------------
-$tabs-labels-height: 3.5rem;
-
-// *****************************************************************************************
-//                        General color variables
-// *****************************************************************************************
-$flat-l-20-lp: 15%;  // 5%
-$flat-l-10-lp: 8%;  // 8%
-$flat-r-10-lp: 20%; // 50%;
-$flat-r-20-lp: 30%; // 66%;
-$flat-r-30-lp: 88%;
-$flat-r-40-lp: 98%;
-
-// *****************************************************************************************
-//                        System primary invert - color
-// *****************************************************************************************
-// Base color
-$color-system-primary-invert-h: var(--pep-color-system-primary-invert-h, 255);
-$color-system-primary-invert-s: var(--pep-color-system-primary-invert-s, 100%);
-$color-system-primary-invert-l: var(--pep-color-system-primary-invert-l, 100%);
-$color-system-primary-invert-base: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}); // base
-
-// Transparent colors.
-$color-system-primary-invert-tran-90: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.97);
-$color-system-primary-invert-tran-80: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.80);
-$color-system-primary-invert-tran-70: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.50);
-$color-system-primary-invert-tran-60: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.32);
-$color-system-primary-invert-tran-50: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.24);
-$color-system-primary-invert-tran-40: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.16);
-$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);
-// 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}));
-$color-system-primary-invert-flat-r-10: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, calc(#{$color-system-primary-invert-l} + #{$flat-r-10-lp}));
-$color-system-primary-invert-flat-r-20: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, calc(#{$color-system-primary-invert-l} + #{$flat-r-20-lp}));
-$color-system-primary-invert-flat-r-30: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, $flat-r-30-lp);
-$color-system-primary-invert-flat-r-40: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, $flat-r-40-lp);
-
-// *****************************************************************************************
-//                        System primary - color
-// *****************************************************************************************
-// Base color
-$color-system-primary-h: var(--pep-color-system-primary-h, 0);
-$color-system-primary-s: var(--pep-color-system-primary-s, 0%);
-$color-system-primary-l: var(--pep-color-system-primary-l, 10%);
-$color-system-primary-base: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}); // base
-
-// Transparent colors.
-$color-system-primary-tran-90: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.97);
-$color-system-primary-tran-80: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.80);
-$color-system-primary-tran-70: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.50);
-$color-system-primary-tran-60: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.32);
-$color-system-primary-tran-50: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.24);
-$color-system-primary-tran-40: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.16);
-$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);
-// 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}));
-$color-system-primary-flat-r-10: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, calc(#{$color-system-primary-l} + #{$flat-r-10-lp}));
-$color-system-primary-flat-r-20: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, calc(#{$color-system-primary-l} + #{$flat-r-20-lp}));
-$color-system-primary-flat-r-30: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, $flat-r-30-lp);
-$color-system-primary-flat-r-40: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, $flat-r-40-lp);
-
-// *****************************************************************************************
-//                        System success - color
-// *****************************************************************************************
-// Base color
-$color-system-success-h: var(--pep-color-system-success-h, 100);
-$color-system-success-s: var(--pep-color-system-success-s, 100%);
-$color-system-success-l: var(--pep-color-system-success-l, 25%);
-$color-system-success-base: hsl(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}); // base
-
-// Transparent colors.
-$color-system-success-tran-90: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.97);
-$color-system-success-tran-80: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.80);
-$color-system-success-tran-70: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.50);
-$color-system-success-tran-60: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.32);
-$color-system-success-tran-50: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.24);
-$color-system-success-tran-40: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.16);
-$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);
-// 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}));
-$color-system-success-flat-r-10: hsl(#{$color-system-success-h}, #{$color-system-success-s}, calc(#{$color-system-success-l} + #{$flat-r-10-lp}));
-$color-system-success-flat-r-20: hsl(#{$color-system-success-h}, #{$color-system-success-s}, calc(#{$color-system-success-l} + #{$flat-r-20-lp}));
-$color-system-success-flat-r-30: hsl(#{$color-system-success-h}, #{$color-system-success-s}, $flat-r-30-lp);
-$color-system-success-flat-r-40: hsl(#{$color-system-success-h}, #{$color-system-success-s}, $flat-r-40-lp);
-
-// *****************************************************************************************
-//                        System caution - color
-// *****************************************************************************************
-// Base color
-$color-system-caution-h: var(--pep-color-system-caution-h, 360);
-$color-system-caution-s: var(--pep-color-system-caution-s, 100%);
-$color-system-caution-l: var(--pep-color-system-caution-l, 45%);
-$color-system-caution-base: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}); // base
-
-// Transparent colors.
-$color-system-caution-tran-90: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.97);
-$color-system-caution-tran-80: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.80);
-$color-system-caution-tran-70: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.50);
-$color-system-caution-tran-60: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.32);
-$color-system-caution-tran-50: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.24);
-$color-system-caution-tran-40: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.16);
-$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);
-// 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}));
-$color-system-caution-flat-r-10: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, calc(#{$color-system-caution-l} + #{$flat-r-10-lp}));
-$color-system-caution-flat-r-20: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, calc(#{$color-system-caution-l} + #{$flat-r-20-lp}));
-$color-system-caution-flat-r-30: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, $flat-r-30-lp);
-$color-system-caution-flat-r-40: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, $flat-r-40-lp);
-
-// *****************************************************************************************
-//                        User primary - color
-// *****************************************************************************************
-// Base color
-$color-user-primary-h: var(--pep-color-user-primary-h, 78);
-$color-user-primary-s: var(--pep-color-user-primary-s, 87%);
-$color-user-primary-l: var(--pep-color-user-primary-l, 27%);
-$color-user-primary-base: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}); // base
-
-// Transparent colors.
-$color-user-primary-tran-90: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.97);
-$color-user-primary-tran-80: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.80);
-$color-user-primary-tran-70: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.50);
-$color-user-primary-tran-60: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.32);
-$color-user-primary-tran-50: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.24);
-$color-user-primary-tran-40: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.16);
-$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);
-// 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}));
-$color-user-primary-flat-r-10: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, calc(#{$color-user-primary-l} + #{$flat-r-10-lp}));
-$color-user-primary-flat-r-20: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, calc(#{$color-user-primary-l} + #{$flat-r-20-lp}));
-$color-user-primary-flat-r-30: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, $flat-r-30-lp);
-$color-user-primary-flat-r-40: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, $flat-r-40-lp);
-
-// *****************************************************************************************
-//                        User secondary - color
-// *****************************************************************************************
-// Base color
-$color-user-secondary-h: var(--pep-color-user-secondary-h, 77);
-$color-user-secondary-s: var(--pep-color-user-secondary-s, 87%);
-$color-user-secondary-l: var(--pep-color-user-secondary-l, 42%);
-$color-user-secondary-base: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}); // base
-
-// Transparent colors.
-$color-user-secondary-tran-90: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.97);
-$color-user-secondary-tran-80: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.80);
-$color-user-secondary-tran-70: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.50);
-$color-user-secondary-tran-60: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.32);
-$color-user-secondary-tran-50: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.24);
-$color-user-secondary-tran-40: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.16);
-$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);
-// 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}));
-$color-user-secondary-flat-r-10: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, calc(#{$color-user-secondary-l} + #{$flat-r-10-lp}));
-$color-user-secondary-flat-r-20: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, calc(#{$color-user-secondary-l} + #{$flat-r-20-lp}));
-$color-user-secondary-flat-r-30: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, $flat-r-30-lp);
-$color-user-secondary-flat-r-40: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, $flat-r-40-lp);
-
-// *****************************************************************************************
-//                        Weak - color
-// *****************************************************************************************
-// Base color
-$color-weak-h: var(--pep-color-weak-h, 0);
-$color-weak-s: var(--pep-color-weak-s, 0%);
-$color-weak-l: var(--pep-color-weak-l, 10%);
-$color-weak-base: hsl(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}); // base
-
-// Transparent colors. --pep-color-system-primary
-$color-weak-tran-90: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.97);
-$color-weak-tran-80: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.80);
-$color-weak-tran-70: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.50);
-$color-weak-tran-60: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.32);
-$color-weak-tran-50: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.24);
-$color-weak-tran-40: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.16);
-$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);
-// 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}));
-$color-weak-flat-r-10: hsl(#{$color-weak-h}, #{$color-weak-s}, calc(#{$color-weak-l} + #{$flat-r-10-lp}));
-$color-weak-flat-r-20: hsl(#{$color-weak-h}, #{$color-weak-s}, calc(#{$color-weak-l} + #{$flat-r-20-lp}));
-$color-weak-flat-r-30: hsl(#{$color-weak-h}, #{$color-weak-s}, $flat-r-30-lp);
-$color-weak-flat-r-40: hsl(#{$color-weak-h}, #{$color-weak-s}, $flat-r-40-lp);
-
-// *****************************************************************************************
-//                        Regular - color
-// *****************************************************************************************
-// Base color
-$color-regular-h: var(--pep-color-regular-h, 0);
-$color-regular-s: var(--pep-color-regular-s, 0%);
-$color-regular-l: var(--pep-color-regular-l, 10%);
-$color-regular-base: hsl(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}); // base
-
-// Transparent colors. --pep-color-system-primary
-$color-regular-tran-90: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.97);
-$color-regular-tran-80: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.80);
-$color-regular-tran-70: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.50);
-$color-regular-tran-60: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.32);
-$color-regular-tran-50: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.24);
-$color-regular-tran-40: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.16);
-$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);
-// 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}));
-$color-regular-flat-r-10: hsl(#{$color-regular-h}, #{$color-regular-s}, calc(#{$color-regular-l} + #{$flat-r-10-lp}));
-$color-regular-flat-r-20: hsl(#{$color-regular-h}, #{$color-regular-s}, calc(#{$color-regular-l} + #{$flat-r-20-lp}));
-$color-regular-flat-r-30: hsl(#{$color-regular-h}, #{$color-regular-s}, $flat-r-30-lp);
-$color-regular-flat-r-40: hsl(#{$color-regular-h}, #{$color-regular-s}, $flat-r-40-lp);
-
-// *****************************************************************************************
-//                        Strong - color
-// *****************************************************************************************
-// Base color
-$color-strong-h: var(--pep-color-strong-h, 78);
-$color-strong-s: var(--pep-color-strong-s, 87%);
-$color-strong-l: var(--pep-color-strong-l, 27%);
-$color-strong-base: hsl(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}); // base
-
-// Transparent colors.
-$color-strong-tran-90: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.97);
-$color-strong-tran-80: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.80);
-$color-strong-tran-70: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.50);
-$color-strong-tran-60: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.32);
-$color-strong-tran-50: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.24);
-$color-strong-tran-40: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.16);
-$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);
-// 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}));
-$color-strong-flat-r-10: hsl(#{$color-strong-h}, #{$color-strong-s}, calc(#{$color-strong-l} + #{$flat-r-10-lp}));
-$color-strong-flat-r-20: hsl(#{$color-strong-h}, #{$color-strong-s}, calc(#{$color-strong-l} + #{$flat-r-20-lp}));
-$color-strong-flat-r-30: hsl(#{$color-strong-h}, #{$color-strong-s}, $flat-r-30-lp);
-$color-strong-flat-r-40: hsl(#{$color-strong-h}, #{$color-strong-s}, $flat-r-40-lp);
-
-//*********************************************************************************
-//                            Text - colors
-//*********************************************************************************
-$color-text-main: $color-system-primary-base;
-$color-text-dimmed: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.7);
-$color-text-disabled: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.35);
-$color-text-invert: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l});
-
-$color-text-success: $color-system-success-base;
-$color-text-caution: $color-system-caution-base;
-
-// Link color
-$color-text-link-h: var(--pep-color-text-link-h, 207);
-$color-text-link-s: var(--pep-color-text-link-s, 76%);
-$color-text-link-l: var(--pep-color-text-link-l, 37%);
-
-$color-text-link: hsl(#{$color-text-link-h}, #{$color-text-link-s}, #{$color-text-link-l});
-$color-text-link-highlight: hsla(#{$color-text-link-h}, #{$color-text-link-s}, #{$color-text-link-l}, 0.24);
-$color-text-link-focus: hsla(#{$color-text-link-h}, #{$color-text-link-s}, #{$color-text-link-l}, 0.5);
-
-//*********************************************************************************
-//                       Top header - color
-//*********************************************************************************
-// Base color
-$color-top-header-h: var(--pep-color-top-header-h, 0);
-$color-top-header-s: var(--pep-color-top-header-s, 0%);
-$color-top-header-l: var(--pep-color-top-header-l, 10%);
-$color-top-header-base: hsl(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}); // base
-
-// Transparent colors. --pep-color-system-primary
-$color-top-header-tran-90: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.97);
-$color-top-header-tran-80: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.80);
-$color-top-header-tran-70: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.50);
-$color-top-header-tran-60: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.32);
-$color-top-header-tran-50: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.24);
-$color-top-header-tran-40: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.16);
-$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);
-// 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}));
-$color-top-header-flat-r-10: hsl(#{$color-top-header-h}, #{$color-top-header-s}, calc(#{$color-top-header-l} + #{$flat-r-10-lp}));
-$color-top-header-flat-r-20: hsl(#{$color-top-header-h}, #{$color-top-header-s}, calc(#{$color-top-header-l} + #{$flat-r-20-lp}));
-$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);
-
-//*********************************************************************************
-//                       Quantity selector - color
-//*********************************************************************************
-// Base color
-$color-qs-h: var(--pep-color-qs-h, 0);
-$color-qs-s: var(--pep-color-qs-s, 0%);
-$color-qs-l: var(--pep-color-qs-l, 10%);
-$color-qs-base: hsl(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}); // base
-
-// Transparent colors. --pep-color-system-primary
-$color-qs-tran-90: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.97);
-$color-qs-tran-80: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.80);
-$color-qs-tran-70: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.50);
-$color-qs-tran-60: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.32);
-$color-qs-tran-50: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.24);
-$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);
-// 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}));
-$color-qs-flat-r-10: hsl(#{$color-qs-h}, #{$color-qs-s}, calc(#{$color-qs-l} + #{$flat-r-10-lp}));
-$color-qs-flat-r-20: hsl(#{$color-qs-h}, #{$color-qs-s}, calc(#{$color-qs-l} + #{$flat-r-20-lp}));
-$color-qs-flat-r-30: hsl(#{$color-qs-h}, #{$color-qs-s}, $flat-r-30-lp);
-$color-qs-flat-r-40: hsl(#{$color-qs-h}, #{$color-qs-s}, $flat-r-40-lp);
-
-//*********************************************************************************
-//                            Shadows
-//*********************************************************************************
-// none
-$shadow-none-offset: var(--pep-shadow-xs-offset, 0);
-$shadow-none-xsoft: $shadow-none-offset;
-$shadow-none-soft: $shadow-none-offset;
-$shadow-none-regular: $shadow-none-offset;
-$shadow-none-hard: $shadow-none-offset;
-
-// xs
-$shadow-xs-offset: var(--pep-shadow-xs-offset, 0 0.125rem 0.25rem 0);
-$shadow-xs-xsoft: $shadow-xs-offset $color-system-primary-tran-10;
-$shadow-xs-soft: $shadow-xs-offset $color-system-primary-tran-20;
-$shadow-xs-regular: $shadow-xs-offset $color-system-primary-tran-40;
-$shadow-xs-hard: $shadow-xs-offset $color-system-primary-tran-60;
-
-// small
-$shadow-sm-offset: var(--pep-shadow-sm-offset, 0 0.25rem 0.5rem 0);
-$shadow-sm-xsoft: $shadow-sm-offset $color-system-primary-tran-10;
-$shadow-sm-soft: $shadow-sm-offset $color-system-primary-tran-20;
-$shadow-sm-regular: $shadow-sm-offset $color-system-primary-tran-40;
-$shadow-sm-hard: $shadow-sm-offset $color-system-primary-tran-60;
-
-// medium
-$shadow-md-offset: var(--pep-shadow-md-offset, 0 0.5rem 1rem 0);
-$shadow-md-xsoft: $shadow-md-offset $color-system-primary-tran-10;
-$shadow-md-soft: $shadow-md-offset $color-system-primary-tran-20;
-$shadow-md-regular: $shadow-md-offset $color-system-primary-tran-40;
-$shadow-md-hard: $shadow-md-offset $color-system-primary-tran-60;
-
-// large
-$shadow-lg-offset: var(--pep-shadow-lg-offset, 0 1rem 2rem 0);
-$shadow-lg-xsoft: $shadow-lg-offset $color-system-primary-tran-10;
-$shadow-lg-soft: $shadow-lg-offset $color-system-primary-tran-20;
-$shadow-lg-regular: $shadow-lg-offset $color-system-primary-tran-40;
-$shadow-lg-hard: $shadow-lg-offset $color-system-primary-tran-60;
-
-// x-large
-$shadow-xl-offset: var(--pep-shadow-xl-offset, 0 2rem 4rem 0);
-$shadow-xl-xsoft: $shadow-xl-offset $color-system-primary-tran-10;
-$shadow-xl-soft: $shadow-xl-offset $color-system-primary-tran-20;
-$shadow-xl-regular: $shadow-xl-offset $color-system-primary-tran-40;
-$shadow-xl-hard: $shadow-xl-offset $color-system-primary-tran-60;
-
-// Card
-$shadow-card-offset: var(--pep-shadow-card-offset, 0 0.25rem 0.5rem 0);
-$shadow-card-xsoft: $shadow-card-offset $color-system-primary-tran-10;
-$shadow-card-soft: $shadow-card-offset $color-system-primary-tran-20;
-$shadow-card-regular: $shadow-card-offset $color-system-primary-tran-40;
-$shadow-card-hard: $shadow-card-offset $color-system-primary-tran-60;
+// -----------------------------------------------------------------------------
+// General
+// -----------------------------------------------------------------------------
+$max-scr-width: 100%;
+
+/// Container's maximum width
+/// @type Length
+$max-width: 1180px !default;
+
+/// Relative or absolute URL where all assets are served from
+/// @type String
+///   $base-url: 'http://cdn.example.com/assets/';
+$base-url: '/assets/' !default;
+
+//  Z-index - General
+// -----------------------------------------------------------------------------
+$z-index-high: 999; // 999 because material modals & overlays.
+$z-index-medium: 100;
+$z-index-low: 50;
+$z-index-lowest: 1;
+
+//  Screen size - General (flex layout breakpoints)
+// -----------------------------------------------------------------------------
+$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;
+
+// Fonts - General
+// -----------------------------------------------------------------------------
+// Title font family
+$font-family-title: var(--pep-font-family-title, Nexa), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !default;
+
+// Body font family
+$font-family-body: var(--pep-font-family-body, Inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !default;
+
+// Font sizes
+$fs-2xs: var(--pep-font-size-2xs, 0.625rem);
+$fs-xs: var(--pep-font-size-xs, 0.75rem);
+$fs-sm: var(--pep-font-size-sm, 0.875rem);
+$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);
+
+// 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);
+
+//  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);
+
+
+// Round corners
+// -----------------------------------------------------------------------------
+$border-radius-sm: var(--pep-border-radius-sm, 0.125rem);
+$border-radius-md: var(--pep-border-radius-md, 0.25rem);
+$border-radius-lg: var(--pep-border-radius-lg, 0.5rem);
+
+//  Spacing size - General
+// -----------------------------------------------------------------------------
+$spacing-2xs: var(--pep-spacing-2xs, 0.125rem);
+$spacing-xs: var(--pep-spacing-xs, 0.25rem);
+$spacing-sm: var(--pep-spacing-sm, 0.5rem);
+$spacing-md: var(--pep-spacing-md, 0.75rem);
+$spacing-lg: var(--pep-spacing-lg, 1rem);
+$spacing-xl: var(--pep-spacing-xl, 1.5rem);
+$spacing-2xl: var(--pep-spacing-2xl, 2rem);
+$spacing-3xl: var(--pep-spacing-3xl, 2.5rem);   // 40px
+$spacing-4xl: var(--pep-spacing-4xl, 3rem);     // 48px
+$spacing-5xl: var(--pep-spacing-5xl, 3.5rem);   // 56px
+$spacing-6xl: var(--pep-spacing-6xl, 5rem);     // 80px
+$spacing-7xl: var(--pep-spacing-7xl, 6rem);     // 96px
+$spacing-8xl: var(--pep-spacing-8xl, 8rem);     // 128px
+$spacing-9xl: var(--pep-spacing-9xl, 16rem);    // 256px
+
+// *****************************************************************************************
+//                        Layout - General
+// *****************************************************************************************
+$content-margin: $spacing-lg;
+$double-content-margin: calc(#{$spacing-lg} * 2); // $content-margin * 2;
+$content-padding: $spacing-lg;
+$double-content-padding: calc(#{$spacing-lg} * 2);// $content-padding * 2;
+
+//  Header
+// -----------------------------------------------------------------------------
+$header-height: var(--pep-header-height, 4rem); // (default - 4rem)
+
+//  Main
+// -----------------------------------------------------------------------------
+$main-height: var(--pep-main-height); // window.innerHeight - header
+
+//  Side bar
+// -----------------------------------------------------------------------------
+$side-bar-width: var(--pep-side-bar-width, 16rem);
+$floating-side-bar-width: calc(#{$side-bar-width} + #{$spacing-2xl});
+$settings-bar-width: var(--pep-settings-bar-width, 16rem);
+
+//  Dialogs
+// -----------------------------------------------------------------------------
+$dialog-header-height: 3rem;
+
+//  Top bar & Footer
+// -----------------------------------------------------------------------------
+$top-bar-spacing-top: var(--pep-top-bar-spacing-top, 1.5rem);
+$top-bar-spacing-bottom: var(--pep-top-bar-spacing-bottom, 0.5rem);
+$top-bar-field-height: var(--pep-top-bar-field-height, 2.5rem);
+$top-bar-height: calc(#{$top-bar-spacing-top} + #{$top-bar-spacing-bottom} + #{$top-bar-field-height});
+$top-bar-height-with-no-top: calc(#{$top-bar-spacing-bottom} + #{$top-bar-field-height});
+
+$footer-bar-spacing-top: var(--pep-footer-bar-spacing-top, 0.75rem);
+$footer-bar-spacing-bottom: var(--pep-footer-bar-spacing-bottom, 1.25rem);
+$footer-bar-field-height: $top-bar-field-height;
+$footer-bar-height: var(--pep-footer-bar-height, 4.5rem);
+
+//  Form - Layout
+// -----------------------------------------------------------------------------
+$form-field-height: var(--pep-form-field-height, 2.5rem);
+$form-field-title-height: var(--pep-form-field-title-height, 1.5rem);
+$form-spacing: var(--pep-form-spacing, 1rem);
+$form-row-height: calc(#{$form-field-height} + #{$form-field-title-height});
+$form-field-button-size: calc(#{$form-field-height} - #{$spacing-lg});
+$form-field-button-icon-size: calc(#{$form-field-height} - #{$spacing-xl});
+
+//  Card - Layout
+// -----------------------------------------------------------------------------
+$card-field-height: var(--pep-card-field-height, 1.5rem);
+// $card-spacing: var(--pep-card-spacing);
+$card-field-button-size: calc(#{$card-field-height} - #{$spacing-sm});
+$card-field-button-icon-size: calc(#{$card-field-height} - #{$spacing-md});
+
+$card-border-radius: var(--pep-card-border-radius, 0.25rem);
+
+//  Table - Layout
+// -----------------------------------------------------------------------------
+$table-field-height: var(--pep-table-field-height, 2rem);
+$table-spacing: var(--pep-table-spacing, 0.5rem);
+$table-row-fieldset-height: calc(#{$table-field-height} + #{$table-spacing}); // 2.5rem
+$table-row-height: calc(#{$table-field-height} + (#{$table-spacing} * 2)); // 3rem;
+$table-half-spacing: calc(#{$table-spacing} / 2); // 0.25rem
+
+$table-border-radius: var(--pep-table-border-radius, 0.25rem);
+
+//  Tabs - Layout
+// -----------------------------------------------------------------------------
+$tabs-labels-height: 3.5rem;
+
+// *****************************************************************************************
+//                        General color variables
+// *****************************************************************************************
+$flat-l-20-lp: 15%;  // 5%
+$flat-l-10-lp: 8%;  // 8%
+$flat-r-10-lp: 20%; // 50%;
+$flat-r-20-lp: 30%; // 66%;
+$flat-r-30-lp: 88%;
+$flat-r-40-lp: 98%;
+
+// *****************************************************************************************
+//                        System primary invert - color
+// *****************************************************************************************
+// Base color
+$color-system-primary-invert-h: var(--pep-color-system-primary-invert-h, 255);
+$color-system-primary-invert-s: var(--pep-color-system-primary-invert-s, 100%);
+$color-system-primary-invert-l: var(--pep-color-system-primary-invert-l, 100%);
+$color-system-primary-invert-base: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}); // base
+
+// Transparent colors.
+$color-system-primary-invert-tran-90: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.97);
+$color-system-primary-invert-tran-80: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.80);
+$color-system-primary-invert-tran-70: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.50);
+$color-system-primary-invert-tran-60: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.32);
+$color-system-primary-invert-tran-50: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.24);
+$color-system-primary-invert-tran-40: hsla(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l}, 0.16);
+$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);
+// 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}));
+$color-system-primary-invert-flat-r-10: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, calc(#{$color-system-primary-invert-l} + #{$flat-r-10-lp}));
+$color-system-primary-invert-flat-r-20: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, calc(#{$color-system-primary-invert-l} + #{$flat-r-20-lp}));
+$color-system-primary-invert-flat-r-30: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, $flat-r-30-lp);
+$color-system-primary-invert-flat-r-40: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, $flat-r-40-lp);
+
+// *****************************************************************************************
+//                        System primary - color
+// *****************************************************************************************
+// Base color
+$color-system-primary-h: var(--pep-color-system-primary-h, 0);
+$color-system-primary-s: var(--pep-color-system-primary-s, 0%);
+$color-system-primary-l: var(--pep-color-system-primary-l, 10%);
+$color-system-primary-base: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}); // base
+
+// Transparent colors.
+$color-system-primary-tran-90: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.97);
+$color-system-primary-tran-80: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.80);
+$color-system-primary-tran-70: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.50);
+$color-system-primary-tran-60: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.32);
+$color-system-primary-tran-50: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.24);
+$color-system-primary-tran-40: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.16);
+$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);
+// 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}));
+$color-system-primary-flat-r-10: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, calc(#{$color-system-primary-l} + #{$flat-r-10-lp}));
+$color-system-primary-flat-r-20: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, calc(#{$color-system-primary-l} + #{$flat-r-20-lp}));
+$color-system-primary-flat-r-30: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, $flat-r-30-lp);
+$color-system-primary-flat-r-40: hsl(#{$color-system-primary-h}, #{$color-system-primary-s}, $flat-r-40-lp);
+
+// *****************************************************************************************
+//                        System success - color
+// *****************************************************************************************
+// Base color
+$color-system-success-h: var(--pep-color-system-success-h, 100);
+$color-system-success-s: var(--pep-color-system-success-s, 100%);
+$color-system-success-l: var(--pep-color-system-success-l, 25%);
+$color-system-success-base: hsl(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}); // base
+
+// Transparent colors.
+$color-system-success-tran-90: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.97);
+$color-system-success-tran-80: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.80);
+$color-system-success-tran-70: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.50);
+$color-system-success-tran-60: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.32);
+$color-system-success-tran-50: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.24);
+$color-system-success-tran-40: hsla(#{$color-system-success-h}, #{$color-system-success-s}, #{$color-system-success-l}, 0.16);
+$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);
+// 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}));
+$color-system-success-flat-r-10: hsl(#{$color-system-success-h}, #{$color-system-success-s}, calc(#{$color-system-success-l} + #{$flat-r-10-lp}));
+$color-system-success-flat-r-20: hsl(#{$color-system-success-h}, #{$color-system-success-s}, calc(#{$color-system-success-l} + #{$flat-r-20-lp}));
+$color-system-success-flat-r-30: hsl(#{$color-system-success-h}, #{$color-system-success-s}, $flat-r-30-lp);
+$color-system-success-flat-r-40: hsl(#{$color-system-success-h}, #{$color-system-success-s}, $flat-r-40-lp);
+
+// *****************************************************************************************
+//                        System caution - color
+// *****************************************************************************************
+// Base color
+$color-system-caution-h: var(--pep-color-system-caution-h, 360);
+$color-system-caution-s: var(--pep-color-system-caution-s, 100%);
+$color-system-caution-l: var(--pep-color-system-caution-l, 45%);
+$color-system-caution-base: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}); // base
+
+// Transparent colors.
+$color-system-caution-tran-90: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.97);
+$color-system-caution-tran-80: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.80);
+$color-system-caution-tran-70: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.50);
+$color-system-caution-tran-60: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.32);
+$color-system-caution-tran-50: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.24);
+$color-system-caution-tran-40: hsla(#{$color-system-caution-h}, #{$color-system-caution-s}, #{$color-system-caution-l}, 0.16);
+$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);
+// 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}));
+$color-system-caution-flat-r-10: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, calc(#{$color-system-caution-l} + #{$flat-r-10-lp}));
+$color-system-caution-flat-r-20: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, calc(#{$color-system-caution-l} + #{$flat-r-20-lp}));
+$color-system-caution-flat-r-30: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, $flat-r-30-lp);
+$color-system-caution-flat-r-40: hsl(#{$color-system-caution-h}, #{$color-system-caution-s}, $flat-r-40-lp);
+
+// *****************************************************************************************
+//                        User primary - color
+// *****************************************************************************************
+// Base color
+$color-user-primary-h: var(--pep-color-user-primary-h, 78);
+$color-user-primary-s: var(--pep-color-user-primary-s, 87%);
+$color-user-primary-l: var(--pep-color-user-primary-l, 27%);
+$color-user-primary-base: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}); // base
+
+// Transparent colors.
+$color-user-primary-tran-90: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.97);
+$color-user-primary-tran-80: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.80);
+$color-user-primary-tran-70: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.50);
+$color-user-primary-tran-60: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.32);
+$color-user-primary-tran-50: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.24);
+$color-user-primary-tran-40: hsla(#{$color-user-primary-h}, #{$color-user-primary-s}, #{$color-user-primary-l}, 0.16);
+$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);
+// 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}));
+$color-user-primary-flat-r-10: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, calc(#{$color-user-primary-l} + #{$flat-r-10-lp}));
+$color-user-primary-flat-r-20: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, calc(#{$color-user-primary-l} + #{$flat-r-20-lp}));
+$color-user-primary-flat-r-30: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, $flat-r-30-lp);
+$color-user-primary-flat-r-40: hsl(#{$color-user-primary-h}, #{$color-user-primary-s}, $flat-r-40-lp);
+
+// *****************************************************************************************
+//                        User secondary - color
+// *****************************************************************************************
+// Base color
+$color-user-secondary-h: var(--pep-color-user-secondary-h, 77);
+$color-user-secondary-s: var(--pep-color-user-secondary-s, 87%);
+$color-user-secondary-l: var(--pep-color-user-secondary-l, 42%);
+$color-user-secondary-base: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}); // base
+
+// Transparent colors.
+$color-user-secondary-tran-90: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.97);
+$color-user-secondary-tran-80: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.80);
+$color-user-secondary-tran-70: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.50);
+$color-user-secondary-tran-60: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.32);
+$color-user-secondary-tran-50: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.24);
+$color-user-secondary-tran-40: hsla(#{$color-user-secondary-h}, #{$color-user-secondary-s}, #{$color-user-secondary-l}, 0.16);
+$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);
+// 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}));
+$color-user-secondary-flat-r-10: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, calc(#{$color-user-secondary-l} + #{$flat-r-10-lp}));
+$color-user-secondary-flat-r-20: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, calc(#{$color-user-secondary-l} + #{$flat-r-20-lp}));
+$color-user-secondary-flat-r-30: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, $flat-r-30-lp);
+$color-user-secondary-flat-r-40: hsl(#{$color-user-secondary-h}, #{$color-user-secondary-s}, $flat-r-40-lp);
+
+// *****************************************************************************************
+//                        Weak - color
+// *****************************************************************************************
+// Base color
+$color-weak-h: var(--pep-color-weak-h, 0);
+$color-weak-s: var(--pep-color-weak-s, 0%);
+$color-weak-l: var(--pep-color-weak-l, 10%);
+$color-weak-base: hsl(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}); // base
+
+// Transparent colors. --pep-color-system-primary
+$color-weak-tran-90: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.97);
+$color-weak-tran-80: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.80);
+$color-weak-tran-70: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.50);
+$color-weak-tran-60: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.32);
+$color-weak-tran-50: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.24);
+$color-weak-tran-40: hsla(#{$color-weak-h}, #{$color-weak-s}, #{$color-weak-l}, 0.16);
+$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);
+// 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}));
+$color-weak-flat-r-10: hsl(#{$color-weak-h}, #{$color-weak-s}, calc(#{$color-weak-l} + #{$flat-r-10-lp}));
+$color-weak-flat-r-20: hsl(#{$color-weak-h}, #{$color-weak-s}, calc(#{$color-weak-l} + #{$flat-r-20-lp}));
+$color-weak-flat-r-30: hsl(#{$color-weak-h}, #{$color-weak-s}, $flat-r-30-lp);
+$color-weak-flat-r-40: hsl(#{$color-weak-h}, #{$color-weak-s}, $flat-r-40-lp);
+
+// *****************************************************************************************
+//                        Regular - color
+// *****************************************************************************************
+// Base color
+$color-regular-h: var(--pep-color-regular-h, 0);
+$color-regular-s: var(--pep-color-regular-s, 0%);
+$color-regular-l: var(--pep-color-regular-l, 10%);
+$color-regular-base: hsl(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}); // base
+
+// Transparent colors. --pep-color-system-primary
+$color-regular-tran-90: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.97);
+$color-regular-tran-80: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.80);
+$color-regular-tran-70: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.50);
+$color-regular-tran-60: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.32);
+$color-regular-tran-50: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.24);
+$color-regular-tran-40: hsla(#{$color-regular-h}, #{$color-regular-s}, #{$color-regular-l}, 0.16);
+$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);
+// 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}));
+$color-regular-flat-r-10: hsl(#{$color-regular-h}, #{$color-regular-s}, calc(#{$color-regular-l} + #{$flat-r-10-lp}));
+$color-regular-flat-r-20: hsl(#{$color-regular-h}, #{$color-regular-s}, calc(#{$color-regular-l} + #{$flat-r-20-lp}));
+$color-regular-flat-r-30: hsl(#{$color-regular-h}, #{$color-regular-s}, $flat-r-30-lp);
+$color-regular-flat-r-40: hsl(#{$color-regular-h}, #{$color-regular-s}, $flat-r-40-lp);
+
+// *****************************************************************************************
+//                        Strong - color
+// *****************************************************************************************
+// Base color
+$color-strong-h: var(--pep-color-strong-h, 78);
+$color-strong-s: var(--pep-color-strong-s, 87%);
+$color-strong-l: var(--pep-color-strong-l, 27%);
+$color-strong-base: hsl(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}); // base
+
+// Transparent colors.
+$color-strong-tran-90: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.97);
+$color-strong-tran-80: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.80);
+$color-strong-tran-70: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.50);
+$color-strong-tran-60: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.32);
+$color-strong-tran-50: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.24);
+$color-strong-tran-40: hsla(#{$color-strong-h}, #{$color-strong-s}, #{$color-strong-l}, 0.16);
+$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);
+// 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}));
+$color-strong-flat-r-10: hsl(#{$color-strong-h}, #{$color-strong-s}, calc(#{$color-strong-l} + #{$flat-r-10-lp}));
+$color-strong-flat-r-20: hsl(#{$color-strong-h}, #{$color-strong-s}, calc(#{$color-strong-l} + #{$flat-r-20-lp}));
+$color-strong-flat-r-30: hsl(#{$color-strong-h}, #{$color-strong-s}, $flat-r-30-lp);
+$color-strong-flat-r-40: hsl(#{$color-strong-h}, #{$color-strong-s}, $flat-r-40-lp);
+
+//*********************************************************************************
+//                            Text - colors
+//*********************************************************************************
+$color-text-main: $color-system-primary-base;
+$color-text-dimmed: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.7);
+$color-text-disabled: hsla(#{$color-system-primary-h}, #{$color-system-primary-s}, #{$color-system-primary-l}, 0.35);
+$color-text-invert: hsl(#{$color-system-primary-invert-h}, #{$color-system-primary-invert-s}, #{$color-system-primary-invert-l});
+
+$color-text-success: $color-system-success-base;
+$color-text-caution: $color-system-caution-base;
+
+// Link color
+$color-text-link-h: var(--pep-color-text-link-h, 207);
+$color-text-link-s: var(--pep-color-text-link-s, 76%);
+$color-text-link-l: var(--pep-color-text-link-l, 37%);
+
+$color-text-link: hsl(#{$color-text-link-h}, #{$color-text-link-s}, #{$color-text-link-l});
+$color-text-link-highlight: hsla(#{$color-text-link-h}, #{$color-text-link-s}, #{$color-text-link-l}, 0.24);
+$color-text-link-focus: hsla(#{$color-text-link-h}, #{$color-text-link-s}, #{$color-text-link-l}, 0.5);
+
+//*********************************************************************************
+//                       Top header - color
+//*********************************************************************************
+// Base color
+$color-top-header-h: var(--pep-color-top-header-h, 0);
+$color-top-header-s: var(--pep-color-top-header-s, 0%);
+$color-top-header-l: var(--pep-color-top-header-l, 10%);
+$color-top-header-base: hsl(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}); // base
+
+// Transparent colors. --pep-color-system-primary
+$color-top-header-tran-90: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.97);
+$color-top-header-tran-80: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.80);
+$color-top-header-tran-70: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.50);
+$color-top-header-tran-60: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.32);
+$color-top-header-tran-50: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.24);
+$color-top-header-tran-40: hsla(#{$color-top-header-h}, #{$color-top-header-s}, #{$color-top-header-l}, 0.16);
+$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);
+// 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}));
+$color-top-header-flat-r-10: hsl(#{$color-top-header-h}, #{$color-top-header-s}, calc(#{$color-top-header-l} + #{$flat-r-10-lp}));
+$color-top-header-flat-r-20: hsl(#{$color-top-header-h}, #{$color-top-header-s}, calc(#{$color-top-header-l} + #{$flat-r-20-lp}));
+$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);
+
+//*********************************************************************************
+//                       Quantity selector - color
+//*********************************************************************************
+// Base color
+$color-qs-h: var(--pep-color-qs-h, 0);
+$color-qs-s: var(--pep-color-qs-s, 0%);
+$color-qs-l: var(--pep-color-qs-l, 10%);
+$color-qs-base: hsl(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}); // base
+
+// Transparent colors. --pep-color-system-primary
+$color-qs-tran-90: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.97);
+$color-qs-tran-80: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.80);
+$color-qs-tran-70: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.50);
+$color-qs-tran-60: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.32);
+$color-qs-tran-50: hsla(#{$color-qs-h}, #{$color-qs-s}, #{$color-qs-l}, 0.24);
+$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);
+// 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}));
+$color-qs-flat-r-10: hsl(#{$color-qs-h}, #{$color-qs-s}, calc(#{$color-qs-l} + #{$flat-r-10-lp}));
+$color-qs-flat-r-20: hsl(#{$color-qs-h}, #{$color-qs-s}, calc(#{$color-qs-l} + #{$flat-r-20-lp}));
+$color-qs-flat-r-30: hsl(#{$color-qs-h}, #{$color-qs-s}, $flat-r-30-lp);
+$color-qs-flat-r-40: hsl(#{$color-qs-h}, #{$color-qs-s}, $flat-r-40-lp);
+
+//*********************************************************************************
+//                            Shadows
+//*********************************************************************************
+// none
+$shadow-none-offset: var(--pep-shadow-xs-offset, 0);
+$shadow-none-xsoft: $shadow-none-offset;
+$shadow-none-soft: $shadow-none-offset;
+$shadow-none-regular: $shadow-none-offset;
+$shadow-none-hard: $shadow-none-offset;
+
+// xs
+$shadow-xs-offset: var(--pep-shadow-xs-offset, 0 0.125rem 0.25rem 0);
+$shadow-xs-xsoft: $shadow-xs-offset $color-system-primary-tran-10;
+$shadow-xs-soft: $shadow-xs-offset $color-system-primary-tran-20;
+$shadow-xs-regular: $shadow-xs-offset $color-system-primary-tran-40;
+$shadow-xs-hard: $shadow-xs-offset $color-system-primary-tran-60;
+
+// small
+$shadow-sm-offset: var(--pep-shadow-sm-offset, 0 0.25rem 0.5rem 0);
+$shadow-sm-xsoft: $shadow-sm-offset $color-system-primary-tran-10;
+$shadow-sm-soft: $shadow-sm-offset $color-system-primary-tran-20;
+$shadow-sm-regular: $shadow-sm-offset $color-system-primary-tran-40;
+$shadow-sm-hard: $shadow-sm-offset $color-system-primary-tran-60;
+
+// medium
+$shadow-md-offset: var(--pep-shadow-md-offset, 0 0.5rem 1rem 0);
+$shadow-md-xsoft: $shadow-md-offset $color-system-primary-tran-10;
+$shadow-md-soft: $shadow-md-offset $color-system-primary-tran-20;
+$shadow-md-regular: $shadow-md-offset $color-system-primary-tran-40;
+$shadow-md-hard: $shadow-md-offset $color-system-primary-tran-60;
+
+// large
+$shadow-lg-offset: var(--pep-shadow-lg-offset, 0 1rem 2rem 0);
+$shadow-lg-xsoft: $shadow-lg-offset $color-system-primary-tran-10;
+$shadow-lg-soft: $shadow-lg-offset $color-system-primary-tran-20;
+$shadow-lg-regular: $shadow-lg-offset $color-system-primary-tran-40;
+$shadow-lg-hard: $shadow-lg-offset $color-system-primary-tran-60;
+
+// x-large
+$shadow-xl-offset: var(--pep-shadow-xl-offset, 0 2rem 4rem 0);
+$shadow-xl-xsoft: $shadow-xl-offset $color-system-primary-tran-10;
+$shadow-xl-soft: $shadow-xl-offset $color-system-primary-tran-20;
+$shadow-xl-regular: $shadow-xl-offset $color-system-primary-tran-40;
+$shadow-xl-hard: $shadow-xl-offset $color-system-primary-tran-60;
+
+// Card
+$shadow-card-offset: var(--pep-shadow-card-offset, 0 0.25rem 0.5rem 0);
+$shadow-card-xsoft: $shadow-card-offset $color-system-primary-tran-10;
+$shadow-card-soft: $shadow-card-offset $color-system-primary-tran-20;
+$shadow-card-regular: $shadow-card-offset $color-system-primary-tran-40;
+$shadow-card-hard: $shadow-card-offset $color-system-primary-tran-60;