@finqu/cool 1.3.0 → 2.0.2

package/scss/_variables.scss

@@ -0,0 +1,1229 @@
+/* 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(
+    (
+        "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": #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
+);
+
+$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-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,
+) !default;
+
+$container-content-max-width: 1200px;
+$container-max-widths: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+) !default;
+
+// Spacing
+$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
+);
+
+@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
+);
+
+// Body
+$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: #cfd5df !default;
+
+$border-radius: 8px !default;
+$border-radius-xs: 3px !default;
+$border-radius-sm: 5px !default;
+$border-radius-lg: 14px !default;
+
+// Navbar
+$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: "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-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: #333333 !default;
+$icon-spacer: 5px;
+
+// Box shadow
+$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: 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: 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: 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 !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: 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: 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-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-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: 1011 !default;
+$zindex-dropdown: 1005 !default;
+$zindex-select: 1005 !default;
+$zindex-toast: 1010 !default;
+$zindex-dialog: 1010 !default;
+
+// Links colors
+$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-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-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: 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:
+    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: math.div(14px, 2) !default;
+
+// Dropdown
+$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-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-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-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;