@finqu/cool 1.2.29 → 2.0.2

package/scss/_variables.scss

@@ -1,823 +1,1229 @@
-// Variables
-// -----------------------------------------------------------------------------------------
-
-// Colors
-// Provide a decent range of greys. This is also to make some
-// syncing with Ionic theming.
-$grey-50: 									 #F0F0F0 !default;
-$grey-100: 									 #E1E1E1 !default;
-$grey-150: 									 #D9D9D9 !default;
-$grey-200: 									 #CCCCCC !default;
-$grey-250: 									 #BFBFBF !default;
-$grey-300: 									 #B3B3B3 !default;
-$grey-350: 									 #A6A6A6 !default;
-$grey-400: 									 #999999 !default;
-$grey-450: 									 #8C8C8C !default;
-$grey-500: 									 #808080 !default;
-$grey-550: 									 #737373 !default;
-$grey-600: 									 #666666 !default;
-$grey-650: 									 #595959 !default;
-$grey-700: 									 #4D4D4D !default;
-$grey-750: 									 #404040 !default;
-$grey-800: 									 #333333 !default;
-$grey-850: 									 #262626 !default;
-$grey-900: 									 #1A1A1A !default;
-$grey-950: 									 #0D0D0D !default;
-
-// These colors do not provide any semantic context and therefore
-// make adjustments to the UI really hard if developers use such
-// definitions. Therefore these colors should not be provided
-// as general CSS classes but as a guideline for developers
-// to use right colors when creating spesific components.
-//
-// 'blue' color isn't anything else but a shade of blue color but
-// 'info' can be anything that fits the UI design. So if we were
-// to change UI to a blue themed design text and background classes as
-// text-blue or bg-blue would be a pain in the ass.
-//
-// Also it would make sense to provide shades and tints for other
-// colors too and not only for greys.
+/* Variables ========================================================================== */
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:string";
+@use "sass:color";
+@use "sass:meta";
+
+$cool-use-layers: true !default;
+$cool-use-component-layer: $cool-use-layers !default;
+$cool-use-utilities-layer: $cool-use-layers !default;
+$cool-use-base-layer: $cool-use-layers !default;
+
+$cool-enable-dark-mode: true !default;
+
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+    $n: list.index($breakpoint-names, $name);
+
+    @if $n != null and $n < list.length($breakpoint-names) {
+        @return list.nth($breakpoint-names, $n + 1);
+    } @else {
+        @return null;
+    }
+}
+
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+    $min: map.get($breakpoints, $name);
+
+    @if $min != 0 {
+        @return $min;
+    } @else {
+        @return null;
+    }
+}
+
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+    $next: breakpoint-next($name, $breakpoints);
+
+    @if $next {
+        @return breakpoint-min($next, $breakpoints) - 0.02;
+    } @else {
+        @return null;
+    }
+}
+
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+    @if breakpoint-min($name, $breakpoints) == null {
+        @return "";
+    } @else {
+        @return "-#{$name}";
+    }
+}
+
+@function color($key) {
+    @if map.has-key($colors, $key) {
+        @return map.get($colors, $key);
+    }
+
+    @warn "Unknown `#{$key}` in $colors.";
+    @return null;
+}
+
+@function theme-color($key) {
+    @if map.has-key($theme-colors, $key) {
+        @return map.get($theme-colors, $key);
+    }
+
+    @warn "Unknown `#{$key}` in $theme-colors.";
+    @return null;
+}
+
+@function theme-foreground-color($key) {
+    @if map.has-key($theme-foreground-colors, $key) {
+        @return map.get($theme-foreground-colors, $key);
+    }
+
+    @warn "Unknown `#{$key}` in $theme-foreground-colors.";
+    @return null;
+}
+
+@function theme-bg-color($key) {
+    @if map.has-key($theme-bg-colors, $key) {
+        @return map.get($theme-bg-colors, $key);
+    }
+
+    @warn "Unknown `#{$key}` in $theme-bg-colors.";
+    @return null;
+}
+
+@function theme-text-color($key) {
+    @if map.has-key($theme-text-colors, $key) {
+        @return map.get($theme-text-colors, $key);
+    }
+
+    @warn "Unknown `#{$key}` in $theme-text-colors.";
+    @return null;
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-min($name, $breakpoints);
+
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+    $max: breakpoint-max($name, $breakpoints);
+
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+// Sidebar right custom media queries
+@mixin media-breakpoint-sidebar-right-up() {
+    @media (min-width: $frame-sidebar-right-breakpoint) {
+        @content;
+    }
+}
+
+@mixin media-breakpoint-sidebar-right-down() {
+    @media (max-width: calc($frame-sidebar-right-breakpoint - 0.02px)) {
+        @content;
+    }
+}
+
+// Container query mixins
+@mixin container-query-up($name, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-min($name, $breakpoints);
+
+    @if $min {
+        @container (width >=#{$min}) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin container-query-down($name, $breakpoints: $grid-breakpoints) {
+    $max: breakpoint-max($name, $breakpoints);
+
+    @if $max {
+        @container (width <=#{$max}) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin text-truncate-adjust(
+    $lines: 1,
+    $font-size: var(--cool-font-size-base),
+    $line-height: var(--cool-line-height-base),
+    $fixed-height: false
+) {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $lines;
+
+    @if $fixed-height {
+        height: calc($font-size * $line-height * $lines);
+    }
+
+    &.text-truncate-fixed {
+        height: calc($font-size * $line-height * $lines);
+    }
+
+    &:after {
+        width: calc($font-size * $line-height * 4);
+        height: calc($font-size * $line-height);
+    }
+
+    & small,
+    &.small {
+        @if $fixed-height {
+            height: calc($font-size * var(--cool-small-font-size) * 0.01 * $line-height * $lines);
+        }
+
+        &.text-truncate-fixed {
+            height: calc($font-size * var(--cool-small-font-size) * 0.01 * $line-height * $lines);
+        }
+
+        &:after {
+            width: calc($font-size * var(--cool-small-font-size) * 0.01 * $line-height * 4);
+            height: calc($font-size * var(--cool-small-font-size) * 0.01 * $line-height);
+        }
+    }
+}
+
+@mixin text-truncate-generate(
+    $font-size: var(--cool-font-size-base),
+    $line-height: var(--cool-line-height-base),
+    $fixed-height: false
+) {
+    & {
+        @include text-truncate-adjust(1, $font-size, $line-height, $fixed-height);
+
+        &.text-truncate-lines-2 {
+            @include text-truncate-adjust(2, $font-size, $line-height, $fixed-height);
+        }
+
+        &.text-truncate-lines-3 {
+            @include text-truncate-adjust(3, $font-size, $line-height, $fixed-height);
+        }
+
+        &.text-truncate-lines-4 {
+            @include text-truncate-adjust(4, $font-size, $line-height, $fixed-height);
+        }
+
+        &.text-truncate-lines-5 {
+            @include text-truncate-adjust(5, $font-size, $line-height, $fixed-height);
+        }
+    }
+}
+
+@mixin text-truncate(
+    $font-size: var(--cool-font-size-base),
+    $line-height: var(--cool-line-height-base),
+    $fixed-height: false,
+    $background: white
+) {
+    display: -webkit-box !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    position: relative !important;
+
+    &:after {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        content: "";
+        max-height: 100%;
+        background: linear-gradient(to right, rgb(from #{$background} r g b / 0), #{$background});
+        pointer-events: none;
+    }
+
+    @include text-truncate-generate($font-size, $line-height, $fixed-height);
+}
+
+// grey-lightest
+$grey-50: #f5f9ff !default;
+$grey-100: #eff3fa !default;
+$grey-150: #dfe4eb !default;
+
+// grey-lighter
+$grey-200: #cfd5df !default;
+
+$grey-250: #cfd5df !default;
+$grey-300: #cfd5df !default;
+// grey-light
+$grey-350: #cfd5df !default;
+$grey-400: #abb5c4 !default;
+$grey-450: #8694a9 !default;
+
+// grey
+$grey-500: #62748e !default;
+$grey-550: #5b697e !default;
+$grey-600: #545e6d !default;
+
+// grey-dark
+$grey-650: #4d535d !default;
+
+$grey-700: #404451 !default;
+$grey-750: #323545 !default;
+
+// grey-darker
+$grey-800: #363a4e !default;
+$grey-850: #25293c !default;
+$grey-900: #13172a !default;
+
+// grey-darkest
+$grey-950: #020618 !default;
+
+// Legacy support
 $colors: () !default;
-$colors: map-merge(
-	(
-		// Black and white don't need to be variables
-		// as they are just white and black. If we do not provide
-		// any helper classes for these (read the above)
-		// these variables really do not make any sense, do they?
-	    // 'white':                             #ffffff,
-	    // 'black':                             #000000,
-
-	    'grey-lightest':                     $grey-50,
-	    'grey-lighter':                      $grey-200,
-	    'grey-light':                        $grey-350,
-	    'grey':                              $grey-500,
-	    'grey-dark':                         $grey-650,
-	    'grey-darker':                       $grey-800,
-	    'grey-darkest':                      $grey-950,
-
-		'blue-lightest':					 #d0ddf5,
-		'blue-lighter':						 #a2bbea,
-		'blue-light':						 #7499e0,
-	    'blue':                              #4577D5,
-	    'blue-dark':						 #2755ad,
-	    'blue-darker':						 #1a3973,
-	    'blue-darkest':						 #0d1c3a,
-
-		'green-lightest':					 #d8ecdf,
-		'green-lighter':					 #b1dabf,
-		'green-light':						 #89c79f,
-	    'green':                             #62B47F,
-	    'green-dark':						 #438d5d,
-	    'green-darker':						 #2d5e3e,
-	    'green-darkest':					 #162f1f,
-
-		'red-lightest':						 #ffceda,
-		'red-lighter':						 #fe9eb5,
-		'red-light':						 #fe6d90,
-	    'red':                             	 #FE3C6B,
-	    'red-dark':							 #ea013a,
-	    'red-darker':						 #9c0126,
-	    'red-darkest':						 #4e0013,
-
-		'yellow-lightest':					 #fdf0d6,
-		'yellow-lighter':					 #fbe0ac,
-		'yellow-light':						 #f8d183,
-	    'yellow':                            #F6C25A,
-	    'yellow-dark':						 #efa40d,
-	    'yellow-darker':					 #9f6d09,
-	    'yellow-darkest':					 #503704
-	),
-	$colors
+$colors: map.merge(
+    (
+        "grey-lightest": $grey-50,
+        "grey-lighter": $grey-200,
+        "grey-light": $grey-350,
+        "grey": $grey-500,
+        "grey-dark": $grey-650,
+        "grey-darker": $grey-800,
+        "grey-darkest": $grey-950,
+    ),
+    $colors
 );
 
-
-
 $theme-colors: () !default;
-$theme-colors: map-merge(
-	(
-		'primary':                           #212121,
-		'secondary':                         #e4e4e4,
-		'success':                           #62B47F,
-		'info':                              #4577D5,
-		'warning':                           #F6C25A,
-		'danger':                            #FE3C6B,
-		'light':							 $grey-150,
-		'medium':							 $grey-450,
-		'dark':								 $grey-700,
-		'brand':                             #EF5FA0,
-   	),
-	$theme-colors
+$theme-colors: map.merge(
+    (
+        "primary": #0c0e1d,
+        "secondary": #d0d9e4,
+        "success": #62b47f,
+        "info": #448bbf,
+        "warning": #f0a030,
+        "danger": #d86783,
+        "light": #eff3fa,
+        "medium": #62748e,
+        "dark": #020618,
+        "brand": #e70d68,
+    ),
+    $theme-colors
 );
 
+$theme-foreground-colors: () !default;
+$theme-foreground-colors: map.merge(
+    (
+        "primary": #f8fafc,
+        "secondary": #020618,
+        "success": #333333,
+        "info": #333333,
+        "warning": #333333,
+        "danger": #333333,
+        "light": #333333,
+        "medium": #ffffff,
+        "dark": #ffffff,
+        "brand": #ffffff,
+        "grey-lightest": #020618,
+        "grey-lighter": #020618,
+        "grey-light": #020618,
+        "grey": #020618,
+        "grey-dark": #ffffff,
+        "grey-darker": #ffffff,
+        "grey-darkest": #ffffff,
+    ),
+    $theme-foreground-colors
+);
 
-// Color contrast
-$yiq-contrasted-threshold:                   150 !default;
-$yiq-text-dark:                              $grey-800 !default;
-$yiq-text-light:                             #ffffff !default;
-
-
-// Utilities
-$displays: (
-	none,
-	inline,
-	inline-block,
-	block,
-	table,
-	table-row,
-	table-cell,
-	flex,
-	inline-flex
-) !default;
-
-$overflows: (
-	auto,
-	hidden,
-	visible
-) !default;
-
-$positions: (
-	static,
-	relative,
-	absolute,
-	fixed,
-	sticky
-) !default;
+$theme-text-colors: () !default;
+$theme-text-colors: map.merge(
+    (
+        "primary": #0c0e1d,
+        "secondary": #2d4460,
+        "success": #1a7a4a,
+        "info": #2568a0,
+        "warning": #8a6d00,
+        "danger": #b5384f,
+        "light": #eff3fa,
+        "medium": #62748e,
+        "dark": #020618,
+        "brand": #e70d68,
+    ),
+    $theme-text-colors
+);
 
+$theme-bg-colors: () !default;
+$theme-bg-colors: map.merge(
+    (
+        "primary": #0c0e1d,
+        "secondary": #e4e4e4,
+        "success": #d1f4e3,
+        "info": rgb(241 246 254),
+        "warning": rgb(255 251 237),
+        "danger": rgb(252 243 242),
+        "light": $grey-150,
+        "medium": $grey-450,
+        "dark": $grey-700,
+        "brand": #f5cbde,
+    ),
+    $theme-bg-colors
+);
 
 // Grid
-$grid-columns:                               12 !default;
-$grid-gutter-width:                          20px !default;
+$grid-columns: 12 !default;
+$grid-gutter-x: 15px !default;
+$grid-gutter-y: 15px !default;
+$grid-row-gap: $grid-gutter-y !default;
+$grid-column-gap: $grid-gutter-x !default;
+
 $grid-breakpoints: (
-	xs: 0,
-	xs-lg: 400px,
-	sm: 568px,
-	md: 768px,
-	lg: 1047px,
-	xl: 1280px
+    xs: 0,
+    xs-lg: 400px,
+    sm: 568px,
+    md: 768px,
+    lg: 1047px,
+    xl: 1280px,
 ) !default;
 
-@include _assert-ascending(
-	$grid-breakpoints,
-	'$grid-breakpoints'
-);
-
-@include _assert-starts-at-zero(
-	$grid-breakpoints,
-	'$grid-breakpoints'
-);
-
-$container-content-max-width:                1200px;
+$container-content-max-width: 1200px;
 $container-max-widths: (
-	sm: 540px,
-	md: 720px,
-	lg: 960px,
-	xl: 1140px
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
 ) !default;
 
-@include _assert-ascending(
-	$container-max-widths,
-	'$container-max-widths'
-);
-
-
 // Spacing
-$spacer:                                     5px !default;
+$spacer: 5px !default;
 $spacers: () !default;
-$spacers: map-merge(
-	(
-		0: $spacer * 0,
-		1: $spacer * 1,
-		2: $spacer * 2,
-		3: $spacer * 3,
-		4: $spacer * 4,
-		5: $spacer * 5,
-		6: $spacer * 6
-	),
-	$spacers
+$spacers: map.merge(
+    (
+        0: $spacer * 0,
+        1: $spacer * 1,
+        2: $spacer * 2,
+        3: $spacer * 3,
+        4: $spacer * 4,
+        5: $spacer * 5,
+        6: $spacer * 6,
+    ),
+    $spacers
 );
 
+@function spacer($key) {
+    @if map.has-key($spacers, $key) {
+        @return map.get($spacers, $key);
+    }
+
+    @warn "Unknown `#{$key}` in $spacers.";
+    @return null;
+}
 
 // Sizing
 $sizes: () !default;
-$sizes: map-merge(
-	(
-		25: 25%,
-		50: 50%,
-		75: 75%,
-		100: 100%,
-		auto: auto
-	),
-	$sizes
+$sizes: map.merge(
+    (
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%,
+        auto: auto,
+    ),
+    $sizes
 );
 
-
 // Body
-$body-bg:                                    #eaeaea; //#F1F1F1 !default;
-$body-color:                                 #212121 !default;
-$body-hover-bg:								 #fafafa !default;
-$body-emphasize-bg:							 #fafafa !default;
+$body-bg: #e7e9ee !default;
+$body-color: #020618 !default;
+$body-hover-bg: #fafafa !default;
+$body-emphasize-bg: #fafafa !default;
+$body-surface-bg: #ffffff !default;
 
 // Borders
-$border-width:                               1px !default;
-$border-color:                               $grey-50 !default;
-
-$border-radius:                              6px !default;
-$border-radius-xs:                           4px !default;
-$border-radius-sm:                           5px !default;
-$border-radius-lg:                           7px !default;
+$border-width: 1px !default;
+$border-color: #cfd5df !default;
 
+$border-radius: 8px !default;
+$border-radius-xs: 3px !default;
+$border-radius-sm: 5px !default;
+$border-radius-lg: 14px !default;
 
 // Navbar
-$navbar-bg:                                  transparent !default;
-$navbar-color:                               $body-color !default;
-$navbar-hover-color:                         theme-color('brand') !default;
-$navbar-height:                              60px !default;
-$navbar-height-sm:                           60px !default;
-$navbar-border-width:                        1px !default;
-$navbar-border-color:                        transparent;
-$navbar-padding-x:                           15px !default;
-
-$navbar-item-min-width:                      45px !default;
-$navbar-item-padding-x:                      8px !default;
-$navbar-item-font-size:                      14px !default;
-$navbar-item-icon-size:                      20px !default;
-$navbar-item-spacer-width:					 10px !default;
-$navbar-pulse-shadow-color: 				 lighten($navbar-color, 10%) !default;
+$navbar-bg: #0c0e1d !default;
+$navbar-color: #ffffff !default;
+$navbar-hover-color: #ffffff !default;
+$navbar-height: 60px !default;
+$navbar-height-sm: 48px !default;
+$navbar-border-width: 12px !default;
+$navbar-border-color: $navbar-bg !default;
+$navbar-border-radius: 14px !default;
+$navbar-padding-x: 11px !default;
+
+$navbar-item-bg: #252734 !default;
+$navbar-item-hover-bg: #343649 !default;
+$navbar-item-color: #ffffff !default;
+$navbar-item-hover-color: #ffffff !default;
+$navbar-item-min-width: initial !default;
+$navbar-item-padding-x: 8px !default;
+$navbar-item-font-size: 13px !default;
+$navbar-item-icon-size: 20px !default;
+$navbar-item-spacer-width: 8px !default;
+$navbar-pulse-shadow-color: $navbar-color !default;
+
+$navbar-toggler-icon-width: 22px !default;
+$navbar-toggler-icon-height: 15px !default;
+$navbar-toggler-bar-height: 2px !default;
+$navbar-toggler-bar-spacing: 6px !default;
+$navbar-toggler-bar-radius: 1px !default;
+
+$navbar-avatar-spacing: spacer(2) !default;
+$navbar-notification-counter-color: #ffffff !default;
+$navbar-notification-counter-bg: theme-color("brand") !default;
+$navbar-notification-counter-font-size: 10px !default;
+$navbar-notification-counter-height: 18px !default;
+$navbar-notification-counter-padding: 2px 4px !default;
+$navbar-notification-counter-radius: 10px !default;
+$navbar-nav-gap: $navbar-item-padding-x !default;
+$navbar-nav-padding: 12px 0 !default;
+$navbar-item-height: 36px !default;
+$navbar-item-height-sm: 32px !default;
+$navbar-brand-svg-margin-top: 5px !default;
 
 // Fonts
-$font-family-sans-serif:                     'Inter', Helvetica, Arial, sans-serif !default;
-$font-family-serif:                          Georgia, 'Times New Roman', Times, serif !default;
-$font-family-title: 						'Poppins', sans-serif !default;
-$font-family-monospace:                      Menlo, Monaco, Consolas, 'Courier New', monospace !default;
-$font-family-base:                           $font-family-sans-serif !default;
-
-$font-size-base:                             14px !default;
-$font-size-lg:                               16px !default;
-$font-size-sm:                               12px !default;
-$font-size-xs:								 10px !default;
-
-$font-weight-lighter:                        lighter !default;
-$font-weight-light:                          400 !default;
-$font-weight-normal:                         500 !default;
-$font-weight-bold:                           600 !default;
-$font-weight-bolder:                         bolder !default;
-$font-weight-base:                           $font-weight-normal !default;
-
-$line-height-lg:                             1.5 !default;
-$line-height-base:                           1.5 !default;
-$line-height-sm:                             1.35 !default;
-$line-height-xs:                             1.25 !default;
-$line-height-computed:                       floor(($font-size-base * $line-height-base)) !default; // 21px
-
-											 // Minor third scale (1.2)
-$h1-font-size:                               floor(($font-size-base * 2.986)) !default;
-$h2-font-size:                               floor(($font-size-base * 2.488)) !default;
-$h3-font-size:                               ceil(($font-size-base * 2.074)) !default;
-$h4-font-size:                               ceil(($font-size-base * 1.728)) !default;
-$h5-font-size:                               ceil(($font-size-base * 1.44)) !default;
-$h6-font-size:                               ceil(($font-size-base * 1.2)) !default;
-
-$headings-margin-bottom:	                 calc(#{$line-height-computed / 2}) !default;
-$headings-font-family:                       $font-family-title !default;
-$headings-font-weight:                       600 !default;
-$headings-line-height:                       1.2 !default;
-$headings-color:                             inherit !default;
-
-$display1-size:                              104px !default;
-$display2-size:                              86px !default;
-$display3-size:                              72px !default;
-$display4-size:                              60px !default;
-
-$display1-weight:                            600 !default;
-$display2-weight:                            600 !default;
-$display3-weight:                            600 !default;
-$display4-weight:                            600 !default;
-$display-line-height:                        $headings-line-height !default;
-
-$lead-font-size:                             $font-size-base * 1.25 !default;
-$lead-font-weight:                           300 !default;
-
-$small-font-size:                            80% !default;
-
-$hr-border-color:                            $border-color !default;
-$hr-border-width:                            $border-width !default;
-$hr-margin-y:                                spacer(3) !default;
-
+$font-family-sans-serif: "Inter", Helvetica, Arial, sans-serif !default;
+$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
+$font-family-title: "Inter", Helvetica, Arial, sans-serif !default;
+$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-base: 13px !default;
+$font-size-lg: 15px !default;
+$font-size-sm: 12px !default;
+$font-size-xs: 10px !default;
+
+$font-weight-lighter: lighter !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 500 !default;
+$font-weight-bolder: 600 !default;
+$font-weight-base: $font-weight-normal !default;
+
+$line-height-lg: 1.6 !default;
+$line-height-base: 1.5 !default;
+$line-height-sm: 1.3 !default;
+$line-height-xs: 1.2 !default;
+$line-height-computed: math.floor(($font-size-base * $line-height-base)) !default; // 21px
+
+// Minor third scale (1.2)
+$h1-font-size: math.floor(($font-size-base * 2.986)) !default;
+$h2-font-size: math.floor(($font-size-base * 2.488)) !default;
+$h3-font-size: math.ceil(($font-size-base * 2.074)) !default;
+$h4-font-size: math.ceil(($font-size-base * 1.728)) !default;
+$h5-font-size: math.ceil(($font-size-base * 1.5)) !default;
+$h6-font-size: math.ceil(($font-size-base * 1.2)) !default;
+
+$headings-margin-bottom: calc(math.div($line-height-computed, 2)) !default;
+$headings-font-family: $font-family-title !default;
+$headings-font-weight: 600 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: inherit !default;
+
+$display1-size: 104px !default;
+$display2-size: 86px !default;
+$display3-size: 72px !default;
+$display4-size: 60px !default;
+
+$display1-weight: 600 !default;
+$display2-weight: 600 !default;
+$display3-weight: 600 !default;
+$display4-weight: 600 !default;
+$display-line-height: $headings-line-height !default;
+
+$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 80% !default;
+
+$hr-border-color: $border-color !default;
+$hr-border-width: $border-width !default;
+$hr-margin-y: $spacer * 3 !default;
 
 // Frame
-$frame-enable:                               true !default;
-
-$frame-sidebar-left-width:                   280px !default;
-$frame-sidebar-left-bg:                      transparent !default;
-$frame-sidebar-left-bg-mobile:               transparent !default;
-$frame-sidebar-left-border-width:            0 !default;
-$frame-sidebar-left-border-color:            $border-color !default;
-$frame-sidebar-left-padding-y:			     0px !default;
-$frame-sidebar-left-padding-x:			     0px !default;
-$frame-sidebar-left-header-padding-y: 		 30px !default;
-$frame-sidebar-left-header-padding-x: 		 30px !default;
-$frame-sidebar-left-content-padding-y:		 20px !default;
-$frame-sidebar-left-content-padding-x:		 20px !default;
-
-$frame-sidebar-spacing:						 0px !default;
-$frame-sidebar-right-width:                  280px !default;
-$frame-sidebar-right-bg:                     transparent !default;
-$frame-sidebar-right-bg-mobile:              transparent !default;
-$frame-sidebar-right-border-width:           0 !default;
-$frame-sidebar-right-border-color:           $border-color !default;
-
-$frame-sidebar-nav-style: 				  	 'simple' !default;
-$frame-sidebar-nav-bg:						 transparent !default;
-$frame-sidebar-nav-padding-y:		 		 0px !default;
-$frame-sidebar-nav-padding-x:		         10px !default;
-$frame-sidebar-sub-nav-padding-y:		 	 0px !default;
-$frame-sidebar-sub-nav-padding-x:		     0px !default;
-$frame-sidebar-nav-font-family:				 $font-family-title;
-$frame-sidebar-nav-icon-size:                20px !default;
-$frame-sidebar-nav-icon-color:               $body-color !default;
-$frame-sidebar-nav-icon-hover-color:         $body-color !default;
-$frame-sidebar-nav-icon-active-color:        $body-color !default;
-
-$frame-sidebar-nav-item-padding-x: 			 0px !default;
-$frame-sidebar-nav-item-padding-y: 			 7px !default;
-$frame-sidebar-nav-item-child-padding-x: 	 0px !default;
-$frame-sidebar-nav-item-child-padding-y: 	 9px !default;
-$frame-sidebar-nav-item-border-color:        $border-color !default;
-
-$frame-sidebar-nav-item-parent-font-size:    16px !default;
-$frame-sidebar-nav-item-parent-font-weight:  600 !default;
-$frame-sidebar-nav-item-parent-color:        $body-color !default;
-$frame-sidebar-nav-item-parent-hover-color:  $body-color !default;
-$frame-sidebar-nav-item-parent-active-color: $body-color !default;
-
-$frame-sidebar-nav-item-child-font-size:     12px !default;
-$frame-sidebar-nav-item-child-font-weight:   500 !default;
-$frame-sidebar-nav-item-child-color:         $body-color !default;
-$frame-sidebar-nav-item-child-hover-color:   $body-color !default;
-$frame-sidebar-nav-item-child-active-color:  $body-color !default;
-
-$frame-sidebar-tabs-color:                   theme-color('medium') !default;
-$frame-sidebar-tabs-bg:                      transparent !default;
-$frame-sidebar-tabs-border-color:            $border-color !default;
-
-$frame-sidebar-tabs-hover-color:             theme-color('medium') !default;
-$frame-sidebar-tabs-hover-bg:                transparent !default;
-$frame-sidebar-tabs-hover-border-color:      $border-color !default;
-
-$frame-sidebar-tabs-active-color:            darken(theme-color('medium'), 10%) !default;
-$frame-sidebar-tabs-active-bg:               theme-color('light') !default;
-$frame-sidebar-tabs-active-border-color:     color('blue') !default;
-
-$frame-content-box-shadow:					 none !default; //0px 0px 20px rgba(0, 0, 0, 0.05) !default;
-$frame-content-bg:							 $body-bg !default; //#FAFAFA !default;
-$frame-content-padding-sm:				     10px !default;
-$frame-content-border-radius-sm:			 $border-radius-sm $border-radius-sm 0 0 !default;
-$frame-content-padding:					     30px 10px !default;
-$frame-content-border-radius:				 $border-radius 0 0 $border-radius !default;
+$frame-sidebar-floating-bg: #ffffff !default;
+$frame-sidebar-floating-border-radius: 14px !default;
+$frame-sidebar-floating-border-width: $border-width !default;
+$frame-sidebar-floating-border-color: $border-color !default;
+$frame-sidebar-floating-padding-y: 10px !default;
+$frame-sidebar-floating-padding-x: 8px !default;
+$frame-sidebar-floating-box-shadow:
+    rgb(98 116 142 / 6%) 0 8px 10px -2px,
+    rgba(0, 0, 0, 0.04) 0 2px 10px -3px !default;
+
+$frame-sidebar-width: 256px !default;
+$frame-sidebar-left-width: $frame-sidebar-width !default;
+$frame-sidebar-right-width: 480px !default;
+$frame-sidebar-right-breakpoint: 1600px !default;
+$frame-sidebar-bg: #e7e9ee !default;
+$frame-sidebar-bg-mobile: #ffffff !default;
+$frame-sidebar-border-width: 0px !default;
+$frame-sidebar-border-color: transparent !default;
+$frame-sidebar-padding-y: 0px !default;
+$frame-sidebar-padding-x: 0px !default;
+
+$frame-sidebar-header-padding-y: 10px !default;
+$frame-sidebar-header-padding-x: 10px !default;
+
+$frame-sidebar-content-padding-y: 10px !default;
+$frame-sidebar-content-padding-x: 10px !default;
+
+$frame-sidebar-footer-padding-y: 10px !default;
+$frame-sidebar-footer-padding-x: 10px !default;
+
+$frame-sidebar-nav-style: "simple" !default;
+$frame-sidebar-nav-bg: transparent !default;
+$frame-sidebar-nav-padding-y: 0px !default;
+$frame-sidebar-nav-padding-x: 10px !default;
+$frame-sidebar-sub-nav-padding-y: 0px !default;
+$frame-sidebar-sub-nav-padding-x: 0px !default;
+$frame-sidebar-nav-font-family: $font-family-base !default;
+$frame-sidebar-nav-a-icon-size: 11px;
+$frame-sidebar-nav-a-icon-color: #62748e !default;
+$frame-sidebar-nav-a-icon-hover-color: #020618 !default;
+$frame-sidebar-nav-icon-size: 16px !default;
+$frame-sidebar-nav-icon-color: #020618 !default;
+$frame-sidebar-nav-icon-hover-color: theme-color("brand") !default;
+$frame-sidebar-nav-icon-active-color: theme-color("brand") !default;
+
+$frame-sidebar-nav-item-padding-x: 10px !default;
+$frame-sidebar-nav-item-padding-y: 7px !default;
+$frame-sidebar-nav-item-child-padding-x: 10px !default;
+$frame-sidebar-nav-item-child-padding-y: 7px !default;
+$frame-sidebar-nav-item-border-color: $border-color !default;
+
+$frame-sidebar-nav-item-parent-font-size: 13px !default;
+$frame-sidebar-nav-item-parent-font-weight: 400 !default;
+$frame-sidebar-nav-item-parent-color: #333333 !default;
+$frame-sidebar-nav-item-parent-hover-color: #020618 !default;
+$frame-sidebar-nav-item-parent-hover-bg: #edf1f5;
+$frame-sidebar-nav-item-parent-active-color: #020618 !default;
+$frame-sidebar-nav-item-parent-active-bg: #edf1f5 !default;
+
+$frame-sidebar-nav-item-child-font-size: 13px !default;
+$frame-sidebar-nav-item-child-font-weight: 400 !default;
+$frame-sidebar-nav-item-child-color: #333333 !default;
+$frame-sidebar-nav-item-child-hover-color: #020618 !default;
+$frame-sidebar-nav-item-child-hover-bg: #edf1f5;
+$frame-sidebar-nav-item-child-active-color: #020618 !default;
+$frame-sidebar-nav-item-child-active-bg: #edf1f5 !default;
+
+$frame-sidebar-tabs-color: theme-color("medium") !default;
+$frame-sidebar-tabs-bg: transparent !default;
+$frame-sidebar-tabs-border-color: $border-color !default;
+
+$frame-sidebar-tabs-hover-color: theme-color("medium") !default;
+$frame-sidebar-tabs-hover-bg: transparent !default;
+$frame-sidebar-tabs-hover-border-color: $border-color !default;
+
+$frame-sidebar-tabs-active-color: color.adjust($grey-450, $lightness: -10%) !default;
+$frame-sidebar-tabs-active-bg: theme-color("light") !default;
+$frame-sidebar-tabs-active-border-color: theme-color("info") !default;
 
 // Icon
-$icon-color:                                 theme-color('medium') !default;
-$icon-spacer:                                5px;
-
+$icon-color: #333333 !default;
+$icon-spacer: 5px;
 
 // Box shadow
-$box-shadow-sm:                              0 17px 3px rgba(#000000, .075) !default;
-$box-shadow:                                 0 7px 14px rgba(#000000, .15) !default;
-$box-shadow-lg:                              0 14px 42px rgba(#000000, .175) !default;
-
-
-// Caret
-$caret-width:                                4px !default;
-
+$box-shadow-sm: rgba(0, 0, 0, 0.05) 0 1px 2px 0 !default;
+$box-shadow:
+    rgba(0, 0, 0, 0.08) 0 4px 8px -2px,
+    rgba(0, 0, 0, 0.06) 0 2px 4px -2px !default;
+$box-shadow-lg:
+    rgba(0, 0, 0, 0.08) 0 10px 15px -3px,
+    rgba(0, 0, 0, 0.06) 0 4px 6px -4px !default;
 
 // Buttons + Forms
-$input-btn-padding-y:                        11px !default;
-$input-btn-padding-x:                        16px !default;
-$input-btn-font-family:                      $font-family-sans-serif !default;
-$input-btn-font-size:                        $font-size-base !default;
-$input-btn-line-height:                      $line-height-base !default;
+$input-btn-padding-y: 7px !default;
+$input-btn-padding-x: 13px !default;
+$input-btn-font-family: $font-family-sans-serif !default;
+$input-btn-font-size: 12px !default;
+$input-btn-line-height: $line-height-base !default;
 
-$input-btn-padding-y-xs:                     6px !default;
-$input-btn-padding-x-xs:                     9px !default;
-$input-btn-font-size-xs:                     $font-size-xs !default;
-$input-btn-line-height-xs:                   $line-height-xs !default;
+$input-btn-padding-y-xs: 5px !default;
+$input-btn-padding-x-xs: 6px !default;
+$input-btn-font-size-xs: $font-size-xs !default;
+$input-btn-line-height-xs: $line-height-xs !default;
 
-$input-btn-padding-y-sm:                     9px !default;
-$input-btn-padding-x-sm:                     13px !default;
-$input-btn-font-size-sm:                     $font-size-sm !default;
-$input-btn-line-height-sm:                   $line-height-sm !default;
+$input-btn-padding-y-sm: 7px !default;
+$input-btn-padding-x-sm: 8px !default;
+$input-btn-font-size-sm: $font-size-sm !default;
+$input-btn-line-height-sm: $line-height-sm !default;
 
-$input-btn-padding-y-lg:                     14px !default;
-$input-btn-padding-x-lg:                     20px !default;
-$input-btn-font-size-lg:                     $font-size-base + 1px !default;
-$input-btn-line-height-lg:                   $line-height-lg !default;
-
-$input-btn-border-width:                     $border-width !default;
+$input-btn-padding-y-lg: 14px !default;
+$input-btn-padding-x-lg: 20px !default;
+$input-btn-font-size-lg: $font-size-base !default;
+$input-btn-line-height-lg: $line-height-lg !default;
 
+$input-btn-border-width: $border-width !default;
 
 // Buttons
-$btn-padding-y:                              $input-btn-padding-y !default;
-$btn-padding-x:                              $input-btn-padding-x !default;
-$btn-font-family:                            $input-btn-font-family !default;
-$btn-font-size:                              $input-btn-font-size !default;
-$btn-line-height:                            $input-btn-line-height !default;
-
-$btn-padding-y-xs:                           $input-btn-padding-y-xs !default;
-$btn-padding-x-xs:                           $input-btn-padding-x-xs !default;
-$btn-font-size-xs:                           $input-btn-font-size-xs !default;
-$btn-line-height-xs:                         $input-btn-line-height-xs !default;
-
-$btn-padding-y-sm:                           $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:                           $input-btn-padding-x-sm !default;
-$btn-font-size-sm:                           $input-btn-font-size-sm !default;
-$btn-line-height-sm:                         $input-btn-line-height-sm !default;
-
-$btn-padding-y-lg:                           $input-btn-padding-y-lg !default;
-$btn-padding-x-lg:                           $input-btn-padding-x-lg !default;
-$btn-font-size-lg:                           $input-btn-font-size-lg !default;
-$btn-line-height-lg:                         $input-btn-line-height-lg !default;
-
-$btn-border-width:                           $input-btn-border-width !default;
-
-$btn-font-weight:                            600 !default;
-$btn-block-spacing-y:                        8px !default;
-
-$btn-border-radius:                          $border-radius !default;
-$btn-border-radius-lg:                       $border-radius-lg !default;
-$btn-border-radius-sm:                       $border-radius-sm !default;
-$btn-border-radius-xs:                       $border-radius-xs !default;
-
-$btn-icon-height:                            calc(#{$btn-line-height * $btn-font-size} + #{$btn-padding-y * 2}) !default;
-$btn-icon-height-sm:                         calc(#{$btn-line-height-sm * $btn-font-size-sm} + #{$btn-padding-y-sm * 2}) !default;
-$btn-icon-height-lg:                         calc(#{$btn-line-height-lg * $btn-font-size-lg} + #{$btn-padding-y-lg * 2}) !default;
-
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: $input-btn-line-height !default;
+
+$btn-padding-y-xs: $input-btn-padding-y-xs !default;
+$btn-padding-x-xs: $input-btn-padding-x-xs !default;
+$btn-font-size-xs: $input-btn-font-size-xs !default;
+$btn-line-height-xs: $input-btn-line-height-xs !default;
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-font-size-sm: $input-btn-font-size-sm !default;
+$btn-line-height-sm: $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-font-size-lg: $input-btn-font-size-lg !default;
+$btn-line-height-lg: $input-btn-line-height-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: 500 !default;
+
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-xs: $border-radius-xs !default;
+
+$btn-icon-height: calc(($btn-line-height * $btn-font-size) + ($btn-padding-y * 2)) !default;
+$btn-icon-height-sm: calc(($btn-line-height-sm * $btn-font-size-sm) + ($btn-padding-y-sm * 2)) !default;
+$btn-icon-height-lg: calc(($btn-line-height-lg * $btn-font-size-lg) + ($btn-padding-y-lg * 2)) !default;
+$btn-transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out !default;
+$btn-cursor: pointer !default;
 
 // Forms
-$label-font-size:                            12px !default;
-$label-margin-bottom:                        6px !default;
-
-$input-padding-y:                            $input-btn-padding-y !default;
-$input-padding-x:                            $input-btn-padding-x !default;
-$input-font-family:                          $font-family-sans-serif !default;
-$input-font-size:                            $input-btn-font-size !default;
-$input-font-weight:                          $font-weight-normal !default;
-$input-line-height:                          $input-btn-line-height !default;
-
-$input-padding-y-sm:                         $input-btn-padding-y-sm !default;
-$input-padding-x-sm:                         $input-btn-padding-x-sm !default;
-$input-font-size-sm:                         $input-btn-font-size-sm !default;
-$input-line-height-sm:                       $input-btn-line-height-sm !default;
-
-$input-padding-y-lg:                         $input-btn-padding-y-lg !default;
-$input-padding-x-lg:                         $input-btn-padding-x-lg !default;
-$input-font-size-lg:                         $input-btn-font-size-lg !default;
-$input-line-height-lg:                       $input-btn-line-height-lg !default;
-
-$input-bg:                                   #f3f3f3 !default;
-$input-disabled-bg:                          #f3f3f3 !default;
-$input-disabled-color:						 theme-color('medium') !default;
-
-$input-color:                                $body-color !default;
-$input-border-color:                         $grey-100 !default;
-$input-border-width:                         $input-btn-border-width !default;
-
-$input-border-radius:                        $border-radius !default;
-$input-border-radius-lg:                     $border-radius-lg !default;
-$input-border-radius-sm:                     $border-radius-sm !default;
-
-$input-focus-border-color:                   theme-color('medium') !default;
-$input-placeholder-color:                    theme-color('medium') !default;
-$input-plaintext-color:                      $body-color !default;
-
-$input-height-border:                        $input-border-width * 2 !default;
-$input-height-inner:                         $input-line-height * $input-font-size + $input-padding-y * 2 !default;
-$input-height-inner-half:                    $input-line-height * $input-font-size / 2 + $input-padding-y !default;
-$input-height-inner-quarter:                 $input-line-height * $input-font-size / 4 + $input-padding-y / 2 !default;
-
-$input-height:                               $input-line-height * $input-font-size + $input-padding-y * 2 + $input-height-border !default;
-$input-height-sm:                            $input-line-height-sm * $input-font-size-sm + $input-btn-padding-y-sm * 2 + $input-height-border !default;
-$input-height-lg:                            $input-line-height-lg * $input-font-size-lg + $input-btn-padding-y-lg * 2 + $input-height-border !default;
-
-$input-group-addon-color:                    $input-color !default;
-$input-group-addon-bg:                       $input-bg !default;
-$input-group-addon-border-color:             $input-border-color !default;
-
-$form-text-margin-top:                       4px !default;
-
-$form-check-input-gutter:                    spacer(3) !default;
-$form-check-input-margin-y:                  4px !default;
-$form-check-input-margin-x:                  3px !default;
-
-$form-check-inline-margin-x:                 10px !default;
-$form-check-inline-input-margin-x:           5px !default;
-
-$form-grid-gutter-width:                     spacer(3) !default;
-$form-group-margin-bottom:                   spacer(3) !default;
-
-$form-feedback-margin-top:                   $form-text-margin-top !default;
-$form-feedback-font-size:                    $small-font-size !default;
-$form-feedback-valid-color:                  theme-color('success') !default;
-$form-feedback-invalid-color:                theme-color('danger') !default;
-
-$form-validation-states: () !default;
-$form-validation-states: map-merge(
-	(
-		'valid': (
-			'color': $form-feedback-valid-color,
-		),
-		'invalid': (
-			'color': $form-feedback-invalid-color,
-		),
-	),
-	$form-validation-states
-);
-
+$label-font-size: 13px !default;
+$label-margin-bottom: 6px !default;
+
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-font-family: $font-family-sans-serif !default;
+$input-font-size: $input-btn-font-size !default;
+$input-font-weight: $font-weight-normal !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-font-size-sm: $input-btn-font-size-sm !default;
+$input-line-height-sm: $input-btn-line-height-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-font-size-lg: $input-btn-font-size-lg !default;
+$input-line-height-lg: $input-btn-line-height-lg !default;
+
+$input-bg: white !default;
+$input-disabled-bg: #f3f3f3 !default;
+$input-disabled-color: theme-color("medium") !default;
+
+$input-color: $body-color !default;
+$input-border-color: $border-color !default;
+$input-border-width: $input-btn-border-width !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-lg: $border-radius-lg !default;
+$input-border-radius-sm: $border-radius-sm !default;
+
+$input-focus-border-color: theme-color("info") !default;
+$input-placeholder-color: theme-color("medium") !default;
+$input-plaintext-color: $body-color !default;
+
+$input-height: $input-line-height * $input-font-size + $input-padding-y * 2 + $input-border-width * 2 !default;
+$input-height-sm: $input-line-height-sm * $input-font-size-sm + $input-btn-padding-y-sm * 2 + $input-border-width * 2 !default;
+$input-height-lg: $input-line-height-lg * $input-font-size-lg + $input-btn-padding-y-lg * 2 + $input-border-width * 2 !default;
+
+$input-group-addon-color: $grey-700 !default;
+$input-group-addon-bg: $input-bg !default;
+$input-group-addon-border-color: $input-border-color !default;
+$input-group-gap: 0 !default;
+$input-group-border-color: $input-group-addon-border-color !default;
+$input-group-border-width: $input-border-width !default;
+$input-group-border-radius: $input-border-radius !default;
+$input-group-bg: $input-group-addon-bg !default;
+$input-group-color: $input-group-addon-color !default;
+
+$form-check-inline-margin-x: 10px !default;
+$form-check-inline-input-margin-x: 5px !default;
+
+$form-check-input-color: theme-color("info") !default;
+$form-check-input-border-color: $border-color !default;
+$form-check-input-border-width: 1px !default;
+$form-check-input-radius: 5px !default;
+$form-check-input-size: 18px !default;
+
+$form-group-margin-bottom: $spacer * 3 !default;
+
+$form-feedback-margin-top: $spacer !default;
+$form-feedback-font-size: $small-font-size !default;
+$form-feedback-valid-color: theme-color("success") !default;
+$form-feedback-invalid-color: theme-color("danger") !default;
+
+$form-switch-width: 40px !default;
 
 // Badge
-$badge-xs-font-size:                         $font-size-xs !default;
-$badge-xs-font-weight:                       600 !default;
-$badge-xs-line-height:                       $line-height-xs !default;
-$badge-xs-padding-y:                         2px !default;
-$badge-xs-padding-x:                         5px !default;
-
-$badge-sm-font-size:                         $font-size-sm !default;
-$badge-sm-font-weight:                       600 !default;
-$badge-sm-line-height:                       $line-height-sm !default;
-$badge-sm-padding-y:                         3px !default;
-$badge-sm-padding-x:                         7px !default;
-
-$badge-font-size:                            $font-size-base !default;
-$badge-font-weight:                          600 !default;
-$badge-line-height:                          $line-height-base !default;
-$badge-padding-y:                            5px !default;
-$badge-padding-x:                            10px !default;
-$badge-border-radius:                        $border-radius !default;
-
+$badge-font-family: $font-family-base !default;
+$badge-font-size-xs: $font-size-xs !default;
+$badge-font-size-sm: $font-size-xs !default;
+$badge-font-size: $font-size-sm !default;
+
+$badge-font-weight-xs: 500 !default;
+$badge-font-weight-sm: 500 !default;
+$badge-font-weight: 500 !default;
+
+$badge-padding-y-xs: 3px !default;
+$badge-padding-x-xs: 4px !default;
+$badge-padding-y-sm: 4px !default;
+$badge-padding-x-sm: 6px !default;
+$badge-padding-y: 6px !default;
+$badge-padding-x: 8px !default;
+
+$badge-line-height-xs: 1 !default;
+$badge-line-height-sm: $line-height-sm !default;
+$badge-line-height: $line-height-base !default;
+
+$badge-border-radius-xs: $border-radius-xs !default;
+$badge-border-radius-sm: $border-radius-sm !default;
+$badge-border-radius: $border-radius !default;
+
+$badge-border-width: 2px !default;
+$badge-box-shadow-blur: 0.2em !default;
+$badge-box-shadow-opacity: 30% !default;
 
 // Pagination
-$pagination-padding-y:                       8px !default;
-$pagination-padding-x:                       12px !default;
-
-$pagination-active-color:                    $body-color !default;
-$pagination-disabled-color:                  theme-color('light') !default;
-
-$pagination-color:                           theme-color('medium') !default;
-$pagination-line-height:                     20px !default;
-
-$pagination-hover-color:                     theme-color('dark') !default;
-
+$pagination-padding-y: 8px !default;
+$pagination-padding-x: 12px !default;
+$pagination-color: theme-color("primary") !default;
+$pagination-hover-color: theme-color("primary") !default;
+$pagination-active-color: theme-color("primary") !default;
+$pagination-disabled-color: theme-color("medium") !default;
 
 // Z-index
-$zindex-fixed:                               1005 !default;
-$zindex-sticky:                              1005 !default;
-$zindex-popover:                             1005 !default;
-$zindex-tooltip:                             1005 !default;
-$zindex-dropdown:                            1005 !default;
-$zindex-select:                              1005 !default;
-$zindex-toast:                               1010 !default;
-$zindex-dialog:                              1010 !default;
-
+$zindex-fixed: 1005 !default;
+$zindex-sticky: 1005 !default;
+$zindex-popover: 1005 !default;
+$zindex-tooltip: 1011 !default;
+$zindex-dropdown: 1005 !default;
+$zindex-select: 1005 !default;
+$zindex-toast: 1010 !default;
+$zindex-dialog: 1010 !default;
 
 // Links colors
-$link-color:                                 color('blue') !default;
-$link-hover-color:                           color('blue-darker') !default;
-$link-font-weight: 							 $font-weight-bold;
-$emphasized-link-hover-darken-percentage:    15% !default;
-
+$link-color: #2c86c8 !default;
+$link-hover-color: #1a3973 !default;
+$link-text-decoration: none !default;
+$link-hover-text-decoration: underline !default;
+$link-disabled-color: theme-color("medium") !default;
+$link-font-weight: $font-weight-normal;
 
 // Table
-$table-color:                                $body-color !default;
-$table-bg:                                   #ffffff !default;
-$table-hover-color:                          $table-color !default;
-$table-hover-bg:                             #FAFAFA !default;
-$table-accent-bg:                            theme-color('light') !default;
-
-$table-link-color:                           $link-color !default;
-$table-link-hover-color:                     $link-hover-color !default;
-
-$table-head-bg:                              transparent !default;
-$table-head-color:                           $body-color !default;
-
-$table-icon-color:                           theme-color('medium') !default;
-$table-border-color:                         $border-color !default;
-
-$table-th-padding-mobile:					 10px 10px;
-$table-th-padding: 							 10px 20px;
-$table-th-padding-sm: 					     10px 20px;
-$table-th-font-family:						 $font-family-sans-serif;
-$table-th-font-weight:						 600;
-$table-th-font-size:						 $font-size-sm;
-$table-th-line-height:						 18px;
-$table-th-bg:							     transparent;
-
-$table-td-padding-mobile:					 10px 10px;
-$table-td-padding: 							 10px 20px;
-$table-td-padding-sm: 						 5px 20px;
-$table-td-line-height:						 $table-th-line-height;
+$table-color: $body-color !default;
+$table-bg: #ffffff !default;
+$table-hover-color: $table-color !default;
+$table-hover-bg: #fafafa !default;
+$table-hover-transition: background-color 0.2s ease !default;
+$table-accent-bg: theme-color("light") !default;
+$table-striped-order: odd !default;
+$table-caption-color: theme-color("medium") !default;
+$table-link-color: $link-color !default;
+$table-link-hover-color: $link-hover-color !default;
+$table-icon-color: $icon-color !default;
+$table-border-color: #dfe4eb !default;
+
+$table-th-padding-x: $spacer * 3 !default;
+$table-th-padding-y: $spacer * 2 !default;
+$table-th-padding: $table-th-padding-y $table-th-padding-x !default;
+$table-th-font-family: $font-family-sans-serif !default;
+$table-th-font-weight: 600 !default;
+$table-th-font-size: $font-size-sm !default;
+$table-th-line-height: 16px !default;
+$table-th-bg: #f9f9f9 !default;
+
+$table-td-padding-x: $spacer * 3 !default;
+$table-td-padding-y: $spacer * 2 !default;
+$table-td-padding: $table-td-padding-y $table-td-padding-x !default;
+$table-td-line-height: 16px !default;
+
+$table-head-bg: transparent !default;
+$table-head-color: theme-text-color("dark") !default;
+
+$table-sortable-head-hover-bg: #f9f9f9 !default;
+$table-sortable-handle-width: 20px !default;
+$table-sortable-handle-height: 35px !default;
+
+$table-responsive-heading-font-weight: 500 !default;
+$table-responsive-td-font-size: 85% !default;
+$table-responsive-td-line-height: 16px !default;
+$table-responsive-td-padding: 8px !default;
+$table-responsive-first-td-bg: #f5f5f5 !default;
+$table-responsive-heading-margin-bottom: 5px !default;
+$table-responsive-margin-bottom: 15px !default;
+
+$table-sticky-actions-shadow-color: #dee2e9 !default;
+$table-sticky-actions-col-sticky-bg: #f9f9f9 !default;
+$table-sticky-actions-shadow-gradient: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05)) !default;
+$table-sticky-actions-shadow-width: 20px !default;
+
+$table-bulk-actions-hover-bg: #3f74d4 !default;
+$table-bulk-actions-hover-color: #ffffff !default;
+$table-bulk-actions-dropdown-shadow: 0 4px 4px rgba(0, 0, 0, 0.15) !default;
+$table-bulk-actions-dropdown-min-width: 150px !default;
+$table-bulk-actions-dropdown-item-font-size: 12px !default;
+$table-bulk-actions-dropdown-item-line-height: 25px !default;
+$table-bulk-actions-dropdown-item-padding: 5px 15px !default;
+$table-bulk-actions-btn-padding: 4px 6px !default;
+$table-bulk-actions-height: 17px !default;
+$table-bulk-actions-input-group-height: 17px !default;
+$table-bulk-actions-input-group-padding: 5px 6px !default;
+$table-bulk-actions-input-group-margin: -5px -6px !default;
 
 // Tabs
-$tabs-bg:                                    transparent !default;
-$tabs-bg-active:                             transparent !default;
-$tabs-text-color:                            theme-color('medium') !default;
-$tabs-text-active-color:                     $body-color !default;
-
+$tabs-bg: transparent !default;
+$tabs-text-color: theme-color("medium") !default;
+$tabs-hover-color: theme-text-color("dark") !default;
+$tabs-active-color: theme-text-color("primary") !default;
+$tabs-hover-bg: transparent !default;
 
 // Tooltips
-$tooltip-font-size:                          $font-size-sm !default;
-$tooltip-max-width:                          200px !default;
-$tooltip-color:                              #ffffff !default;
-$tooltip-bg:                                 #000000 !default;
-$tooltip-border-radius:                      $border-radius !default;
-$tooltip-opacity:                            .9 !default;
-$tooltip-padding-y:                          4px !default;
-$tooltip-padding-x:                          7px !default;
-$tooltip-margin:                             0 !default;
-
-$tooltip-arrow-width:                        12px !default;
-$tooltip-arrow-height:                       6px !default;
-$tooltip-arrow-color:                        $tooltip-bg !default;
-
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: #ffffff !default;
+$tooltip-bg: #000000 !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: 0.9 !default;
+$tooltip-padding-y: 4px !default;
+$tooltip-padding-x: 7px !default;
+$tooltip-margin: 0 !default;
+
+$tooltip-arrow-width: 12px !default;
+$tooltip-arrow-height: 6px !default;
+$tooltip-arrow-color: $tooltip-bg !default;
 
 // Popovers
-$popover-font-size:                          $font-size-sm !default;
-$popover-bg:                                 #ffffff !default;
-$popover-box-shadow:						 0 0 20px 0 rgba(0,0,0,0.02) !default;
-$popover-max-width:                          276px !default;
-$popover-border-width:                       $border-width !default;
-$popover-border-color:                       $border-color !default;
-$popover-border-radius:                      $border-radius !default;
-
-$popover-header-bg:                          $popover-bg !default;
-$popover-header-color:                       $headings-color !default;
-$popover-header-padding-y:                   10px !default;
-$popover-header-padding-x:                   10px !default;
-
-$popover-body-color:                         $body-color !default;
-$popover-body-padding-y:                     $popover-header-padding-y !default;
-$popover-body-padding-x:                     $popover-header-padding-x !default;
-
-$popover-arrow-width:                        20px !default;
-$popover-arrow-height:                       10px !default;
-$popover-arrow-color:                        $popover-bg !default;
-
-$popover-arrow-outer-color:                  fade-in($popover-border-color, 0.05) !default;
-
+$popover-font-size: $font-size-sm !default;
+$popover-bg: #ffffff !default;
+$popover-box-shadow:
+    rgba(0, 0, 0, 0.1) 0 4px 6px -1px,
+    rgba(0, 0, 0, 0.1) 0 2px 4px -2px !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: $border-color !default;
+$popover-border-radius: $border-radius !default;
+$popover-spacer: 8px !default;
+
+$popover-header-bg: $popover-bg !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: 10px !default;
+$popover-header-padding-x: 10px !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $popover-header-padding-y !default;
+$popover-body-padding-x: $popover-header-padding-x !default;
 
 // Nav divider
-$nav-divider-color:                          theme-color('light') !default;
-$nav-divider-margin-y:                       14px / 2 !default;
-
+$nav-divider-color: theme-color("light") !default;
+$nav-divider-margin-y: math.div(14px, 2) !default;
 
 // Dropdown
-$dropdown-min-width:                         140px !default;
-$dropdown-padding-y:                         spacer(2) !default;
-$dropdown-spacer:                            spacer(1) !default;
-$dropdown-bg:                                #ffffff !default;
-$dropdown-color:                             $body-color !default;
-$dropdown-border-color:                      $input-border-color !default;
-$dropdown-border-radius:                     $border-radius !default;
-$dropdown-border-width:                      $border-width !default;
-$dropdown-divider-bg:                        $input-border-color !default;
-$dropdown-box-shadow:                        0 2px 5px rgba(#000000, 0.16) !default;
-
-$dropdown-link-color:                        $body-color !default;
-$dropdown-link-hover-color:                  $body-color !default;
-$dropdown-link-hover-bg:                     $grey-50 !default;
-
-$dropdown-link-active-color:                 theme-color('primary') !default;
-$dropdown-link-active-bg:                    $grey-50 !default;
-
-$dropdown-link-disabled-color:               theme-color('medium') !default;
-
-$dropdown-item-padding-y:                    spacer(2) !default;
-$dropdown-item-padding-x:                    spacer(4) !default;
-
-$dropdown-header-color:                      theme-color('medium') !default;
-
+$dropdown-font-size: $font-size-sm !default;
+$dropdown-line-height: $line-height-sm !default;
+$dropdown-width: 140px !default;
+$dropdown-padding-y: 8px !default;
+$dropdown-spacer: 8px !default;
+$dropdown-bg: #ffffff !default;
+$dropdown-color: $body-color !default;
+$dropdown-border-color: $border-color !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-divider-bg: theme-color("light") !default;
+$dropdown-box-shadow:
+    rgba(0, 0, 0, 0.1) 0 4px 6px -1px,
+    rgba(0, 0, 0, 0.1) 0 2px 4px -2px !default;
+$dropdown-title-color: theme-color("medium") !default;
+
+$dropdown-link-color: $body-color !default;
+$dropdown-link-hover-color: $body-color !default;
+$dropdown-link-hover-bg: $grey-50 !default;
+
+$dropdown-link-active-color: theme-color("primary") !default;
+$dropdown-link-active-bg: $grey-50 !default;
+
+$dropdown-link-disabled-color: theme-color("medium") !default;
+
+$dropdown-item-padding-y: 8px !default;
+$dropdown-item-padding-x: 15px !default;
 
 // Select
-$select-spacer:                              8px !default;
-$select-bg:                                  $input-bg !default;
-$select-search-bg-color:					 $grey-150 !default;
-$select-border-color:                        $input-border-color !default;
-$select-border-radius:                       $border-radius !default;
-$select-border-width:                        $input-border-width !default;
-$select-divider-bg:                          $input-border-color !default;
-$select-box-shadow:                          0 2px 5px rgba(#000000, 0.16) !default;
-
-$select-item-color:                          $grey-900 !default;
-$select-item-hover-color:                    $grey-950 !default;
-$select-item-hover-bg:                       $grey-100 !default;
-
-$select-item-disabled-color:                 theme-color('medium') !default;
-
-$select-item-padding-y:                      12px !default;
-$select-item-padding-x:                      12px !default;
-
-$select-header-color:                        $body-color !default;
-
+$select-spacer: 8px !default;
+$select-spacer-sm: 6px !default;
+$select-bg: $input-bg !default;
+$select-border-color: $input-border-color !default;
+$select-border-radius: $border-radius !default;
+$select-border-width: $input-border-width !default;
+$select-divider-bg: $input-border-color !default;
+$select-box-shadow:
+    rgba(0, 0, 0, 0.1) 0 4px 6px -1px,
+    rgba(0, 0, 0, 0.1) 0 2px 4px -2px !default;
+
+$select-item-color: $grey-900 !default;
+$select-item-hover-color: $grey-950 !default;
+$select-item-hover-bg: $grey-100 !default;
+
+$select-item-disabled-color: theme-color("medium") !default;
+
+$select-item-padding-y: 7px !default;
+$select-item-padding-x: 13px !default;
+$select-item-padding-y-sm: 7px !default;
+$select-item-padding-x-sm: 8px !default;
+
+$select-header-color: $body-color !default;
+
+$select-chip-bg: theme-color("secondary") !default;
+$select-chip-border-radius: $border-radius-sm !default;
+$select-chip-padding: 2px 5px !default;
+$select-chip-font-size: $font-size-sm !default;
+$select-chip-max-width: 200px !default;
+$select-placeholder-color: theme-text-color("medium") !default;
+$select-placeholder-font-style: italic !default;
+$select-search-icon-color: $icon-color !default;
+$select-animation-length: 500ms !default;
+$select-animation-timing: cubic-bezier(0.23, 1, 0.32, 1) !default;
 
 // Section
-$section-font-size:                          $font-size-base !default;
-$section-border-radius:                      $border-radius !default;
-$section-spacer:                             spacer(4) !default;
-$section-spacer-mobile:                      spacer(2) !default;
-$section-padding:                            spacer(4) !default;
-
-$section-border-width:						 $border-width !default;
-$section-border-color:						 #ffffff !default;
-$section-bg:                                 #ffffff !default;
-$section-color:                              $body-color !default;
-$section-box-shadow:                         none; //0 4px 10px 0px rgba(0,0,0,0.02) !default; //0 1px 2px #cccccc, 0 0 0 1px #eeeeee !default;
-$section-hover-box-shadow:                   none !default; //0 1px 4px #cccccc, 0 0 0 1px #dddddd !default;
-$section-divider-height:					 $border-width;
-$section-divider-color:                      $grey-50 !default;
-$section-divider-padding:					 0 !default;
-
-$section-header-font-family:                 $font-family-title !default;
-$section-header-font-size:                   20px !default;
-$section-header-font-weight:                 600 !default;
-$section-header-bg:                          #ffffff !default;
-$section-header-color:                       $body-color !default;
-$section-header-actions-color:               $body-color !default;
-$section-header-icons-color:                 $body-color !default;
-$section-header-icons-size:                  16px !default;
-
-$section-header-subtitle-font-family:        $font-family-title !default;
-$section-header-subtitle-font-size:          14px !default;
-$section-header-subtitle-font-weight:        600 !default;
-$section-header-subtitle-bg:                 #ffffff !default;
-$section-header-subtitle-color:              theme-color('medium') !default;
-$section-header-subtitle-actions-color:      theme-color('medium') !default;
-$section-header-subtitle-icons-color:        theme-color('medium') !default;
-$section-header-subtitle-icons-size:         16px !default;
-
-$section-subheader-font-family:              $font-family-title !default;
-$section-subheader-font-size:                14px !default;
-$section-subheader-font-weight:              600 !default;
-$section-subheader-bg:                       #ffffff !default;
-$section-subheader-color:                    theme-color('medium') !default;
-$section-subheader-actions-color:            $body-color !default;
-$section-subheader-icons-color:              $body-color !default;
-$section-subheader-icons-size:               14px !default;
-
-$section-tabs-bg:                            #ffffff !default;
-$section-tabs-item-padding-y:                $section-padding !default;
-$section-tabs-item-margin-x:                 $section-padding !default;
-$section-tabs-item-min-width:                50px !default;
-
-$section-tabs-color:                         theme-color('medium') !default;
-$section-tabs-hover-color:                   theme-color('dark') !default;
-$section-tabs-active-color:                  theme-color('dark')!default;
-
-$section-tabs-border-width:                  3px !default;
-$section-tabs-border-color:                  $border-color !default;
-$section-tabs-border-hover-color:            theme-color('medium') !default;
-$section-tabs-border-active-color:           theme-color('dark') !default;
-
+$section-spacer: $spacer * 3 !default;
+$section-spacer-mobile: $spacer * 3 !default;
+$section-padding: $spacer * 3 !default;
+$section-padding-mobile: $section-padding * 0.75 !default;
+$section-border-radius: $border-radius-lg !default;
+$section-inner-border-radius: $border-radius !default;
+
+$section-border-width: $border-width !default;
+$section-border-color: $border-color !default;
+$section-bg: #ffffff !default;
+$section-color: $body-color !default;
+$section-box-shadow:
+    rgb(98 116 142 / 6%) 0 8px 10px -2px,
+    rgba(0, 0, 0, 0.04) 0 2px 10px -3px !default;
+$section-divider-height: $border-width !default;
+$section-divider-color: $grey-50 !default;
+$section-divider-padding: 0 !default;
+$section-secondary-bg: $grey-50 !default;
+
+$section-title-font-family: $font-family-base !default;
+$section-title-font-size: 15px !default;
+$section-title-font-weight: 500 !default;
+$section-title-bg: #ffffff !default;
+$section-title-color: $body-color !default;
+$section-title-actions-color: $body-color !default;
+$section-title-icons-color: $body-color !default;
+$section-title-icons-size: 15px !default;
+$section-title-padding: 16px !default;
+
+$section-subtitle-font-family: $font-family-base !default;
+$section-subtitle-font-size: 14px !default;
+$section-subtitle-font-weight: 600 !default;
+$section-subtitle-color: #62748e !default;
+
+$section-image-badge-bg: theme-color("info") !default;
+$section-image-badge-color: #ffffff !default;
+$section-image-badge-shadow: 0 0 3px rgba(0, 0, 0, 0.3) !default;
+$section-image-badge-padding: 10px 0 !default;
+$section-image-badge-font-size: 12px !default;
+$section-image-darken-bg: rgba(0, 0, 0, 0.15) !default;
+
+$section-placeholder-icon-color: $icon-color !default;
+$section-placeholder-description-color: theme-text-color("medium") !default;
+$section-placeholder-title-font-family: $font-family-title !default;
+$section-placeholder-title-font-weight: 500 !default;
+$section-placeholder-icon-size: 100px !default;
+$section-placeholder-icon-font-size: 5rem !default;
+$section-placeholder-icon-padding: 10px !default;
+$section-placeholder-spacing: 20px !default;
+$section-placeholder-spacing-sm: 10px !default;
+
+$section-definition-heading-color-mobile: theme-text-color("medium") !default;
+$section-definition-heading-font-size-mobile: 12px !default;
+$section-definition-heading-color: $body-color !default;
+$section-definition-heading-font-size: 14px !default;
+$section-definition-spacer-height: 20px !default;
+
+$section-filters-bg: $section-bg !default;
+$section-filters-color: $section-color !default;
+
+$section-bulk-actions-bg: $section-bg !default;
+$section-bulk-actions-color: $section-color !default;
+$section-bulk-actions-divider-color: $section-divider-color !default;
+$section-bulk-action-select-font-size: 12px !default;
+$section-bulk-action-select-max-width: 200px !default;
+
+$section-tabs-font-family: $font-family-sans-serif !default;
+$section-tabs-font-weight: $font-weight-base !default;
+$section-tabs-font-weight-active: $font-weight-bold !default;
+$section-tabs-bg: #ffffff !default;
+$section-tabs-item-padding-y: $section-padding !default;
+$section-tabs-item-padding-x: $section-padding !default;
+$section-tabs-item-gap: $section-padding !default;
+$section-tabs-item-min-width: 50px !default;
+
+$section-tabs-color: theme-text-color("medium") !default;
+$section-tabs-hover-color: theme-text-color("dark") !default;
+$section-tabs-active-color: theme-text-color("dark") !default;
+
+$section-tabs-border-width: 3px !default;
+$section-tabs-border-color: $border-color !default;
+$section-tabs-border-hover-color: transparent !default;
+$section-tabs-border-active-color: theme-bg-color("primary") !default;
 
 // Toast
-$toast-font-size:                            $font-size-base !default;
-$toast-font-size-sm:                         $font-size-sm !default;
-$toast-font-size-lg:                         18px !default;
-
-$toast-bg-light:                             #ffffff !default;
-$toast-bg-dark:                              theme-color('dark') !default;
-$toast-border-width:                         $border-width !default;
-$toast-border-color-light:                   rgba(#000000, 0.2) !default;
-$toast-border-color-dark:                    rgba(#ffffff, 0.2) !default;
-$toast-border-radius:                        $border-radius !default;
-
-$toast-header-bg-light:                      darken($toast-bg-light, 3%) !default;
-$toast-header-bg-dark:                       darken($toast-bg-dark, 3%) !default;
-$toast-header-color-light:                   $headings-color !default;
-$toast-header-color-dark:                    #ffffff !default;
-$toast-header-padding-y:                     8px !default;
-$toast-header-padding-x:                     12px !default;
-
-$toast-header-padding-y-sm:                  6px !default;
-$toast-header-padding-x-sm:                  10px !default;
-
-$toast-header-padding-y-lg:                  8px !default;
-$toast-header-padding-x-lg:                  16px !default;
-
-$toast-body-color-light:                     $body-color !default;
-$toast-body-color-dark:                      #ffffff !default;
-$toast-body-padding-y:                       12px!default;
-$toast-body-padding-x:                       12px !default;
-
-$toast-body-padding-y-sm:                    10px!default;
-$toast-body-padding-x-sm:                    10px !default;
-
-$toast-body-padding-y-lg:                    16px !default;
-$toast-body-padding-x-lg:                    16px !default;
-
-$alert-box-shadow:							 none !default;
-$alert-border-width: 						 5px !default;
-$alert-bg-lighten:							 22% !default;
-
-$dialog-title-font-family: 					 $font-family-title;
-$dialog-title-font-weight: 					 600;
-$dialog-border-width: 						 0;
-$dialog-padding-x:							 spacer(4);
-$dialog-padding-y:							 spacer(4);
+$toast-bg: #0c0e1d !default;
+$toast-border-width: $border-width !default;
+$toast-border-radius: $border-radius !default;
+$toast-font-size: $font-size-sm !default;
+
+$toast-header-bg: $toast-bg !default;
+$toast-header-color: theme-color("medium") !default;
+$toast-header-padding-y: spacer(3) !default;
+$toast-header-padding-x: spacer(3) !default;
+
+$toast-body-color: #ffffff !default;
+$toast-body-padding-y: spacer(3) !default;
+$toast-body-padding-x: spacer(3) !default;
+
+$toast-max-width: 420px !default;
+$toast-offset-x: 16px !default;
+$toast-offset-y: 16px !default;
+$toast-gap: spacer(2) !default;
+$toast-stack-offset: 8px !default;
+$toast-stack-scale: 0.04 !default;
+$toast-stack-opacity: 0.4 !default;
+$toast-transition-duration: 300ms !default;
+
+// Alert & Notification
+$alert-bg: #ffffff !default;
+$alert-color: $body-color !default;
+$alert-border-width: $border-width !default;
+$alert-border-color: theme-color("primary") !default;
+$alert-border-radius: $section-border-radius !default;
+$alert-padding: $section-padding !default;
+$alert-padding-sm: $section-padding * 0.5 !default;
+$alert-margin-bottom: $section-spacer-mobile !default;
+$alert-icon-width: 28px !default;
+$alert-icon-height: 28px !default;
+$alert-icon-font-size: 12px !default;
+
+$notification-bg: #ffffff !default;
+$notification-color: $body-color !default;
+$notification-border-width: $border-width !default;
+$notification-border-color: theme-color("primary") !default;
+$notification-border-radius: $border-radius !default;
+$notification-padding: $spacer * 3 !default;
+
+// Dialog
+$dialog-bg: #ffffff !default;
+$dialog-title-font-family: $font-family-title !default;
+$dialog-title-font-weight: 600 !default;
+$dialog-border-width: 0px !default;
+$dialog-padding-x: 24px !default;
+$dialog-padding-y: 24px !default;
+
+$dialog-width: auto !default;
+$dialog-width-sm: 300px !default;
+$dialog-width-md: 512px !default;
+$dialog-width-lg: 960px !default;
+$dialog-width-xl: 1200px !default;
+
+$dialog-margin-x: 10px !default;
+$dialog-margin-y: 10px !default;
+$dialog-margin-x-lg: 25px !default;
+$dialog-margin-y-lg: 25px !default;
+$dialog-header-height: 70px !default;
+$dialog-body-height: 130px !default;
+$dialog-footer-height: 70px !default;
+$dialog-backdrop-opacity: 0.3 !default;
+$dialog-notification-body-height: 80px !default;
+$dialog-notification-width: 450px !default;
+$dialog-title-font-size: $font-size-lg !default;
+$dialog-close-font-size: 16px !default;
+$dialog-box-shadow: $box-shadow !default;
+
+// List group
+$list-group-bg: transparent !default;
+$list-group-color: $body-color !default;
+$list-group-hover-bg: $body-hover-bg !default;
+$list-group-active-color: theme-color("info") !default;
+$list-group-disabled-color: $grey-200 !default;
+$list-group-border-color: $border-color !default;
+$list-group-item-padding-y: spacer(2) !default;
+$list-group-item-padding-x: spacer(2) !default;
+$list-group-inner-padding: 15px !default;
+$list-group-distinctive-bg: #f5f5f5 !default;
+$list-group-distinctive-padding: spacer(3) !default;
+$list-group-distinctive-gap: spacer(2) !default;
+$list-group-icon-spacing: $icon-spacer !default;
+$list-group-line-height: 20px !default;
+
+// Media
+$image-icon-color: $icon-color !default;
+$image-bg-placeholder: transparent !default;
+$image-bg-thumbnail: $grey-50 !default;
+
+$image-border-color: transparent !default;
+$image-border-width: 0px !default;
+$image-border-radius: $border-radius !default;
+
+$image-transition: opacity 0.4s ease !default;
+$image-transition-duration: 0.4s !default;
+$image-transition-timing: ease !default;
+$image-loaded-bg: $grey-50 !default;
+
+$image-status-indicator-size: 12px !default;
+$image-status-indicator-bg: theme-color("medium") !default;
+$image-status-indicator-active-bg: #2e8b57 !default;
+$image-status-indicator-idle-bg: #e0a100 !default;
+$image-status-indicator-inactive-bg: #d9304f !default;
+$image-status-indicator-info-bg: #4577d5 !default;
+
+$image-showcase-shadow: 0 10px 20px -15px hsla(0, 0%, 25%, 1) !default;
+$image-showcase-border-radius: 5px !default;
+
+$image-select-min-height: 98px !default;
+$image-select-padding: 20px !default;
+$image-select-gap: 10px !default;
+$image-select-trigger-bg: theme-color("secondary") !default;
+$image-select-trigger-color: theme-foreground-color("secondary") !default;
+
+$placeholder-icon-size: 100px !default;
+$placeholder-icon-font-size: 5rem !default;
+$placeholder-icon-color: $icon-color !default;
+$placeholder-padding: 16px !default;
+$placeholder-spacing: 20px !default;
+$placeholder-spacing-sm: 10px !default;
+$placeholder-title-font-family: $font-family-title !default;
+$placeholder-title-font-weight: 600 !default;
+$placeholder-title-color: $body-color !default;
+$placeholder-description-color: theme-color("medium") !default;
+
+// Animation
+$animation-duration: 0.3s !default;
+$animation-timing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+$form-transition-fast: 0.2s ease !default;
+$form-transition-normal: 0.3s ease !default;
+$form-transition-slow: 0.6s ease !default;
+
+$switch-transition: 0.3s ease-in !default;