@finqu/cool 1.3.0 → 2.0.2

package/scss/_root.scss

@@ -0,0 +1,848 @@
+@use "variables" as *;
+@use "sass:meta";
+@use "sass:math";
+
+@layer reset, base, layout, vendor, icons, components, utilities, app;
+
+/* Root ========================================================================== */
+
+@mixin cool-root-base {
+    :root {
+        --cool-color-grey-50: #{$grey-50};
+        --cool-color-grey-100: #{$grey-100};
+        --cool-color-grey-150: #{$grey-150};
+        --cool-color-grey-200: #{$grey-200};
+        --cool-color-grey-250: #{$grey-250};
+        --cool-color-grey-300: #{$grey-300};
+        --cool-color-grey-350: #{$grey-350};
+        --cool-color-grey-400: #{$grey-400};
+        --cool-color-grey-450: #{$grey-450};
+        --cool-color-grey-500: #{$grey-500};
+        --cool-color-grey-550: #{$grey-550};
+        --cool-color-grey-600: #{$grey-600};
+        --cool-color-grey-650: #{$grey-650};
+        --cool-color-grey-700: #{$grey-700};
+        --cool-color-grey-750: #{$grey-750};
+        --cool-color-grey-800: #{$grey-800};
+        --cool-color-grey-850: #{$grey-850};
+        --cool-color-grey-900: #{$grey-900};
+        --cool-color-grey-950: #{$grey-950};
+
+        @each $color, $value in $colors {
+            --cool-color-#{$color}: #{$value};
+        }
+
+        @each $color, $value in $theme-colors {
+            --cool-theme-color-#{$color}: #{$value};
+        }
+
+        @each $color, $value in $theme-foreground-colors {
+            --cool-theme-foreground-color-#{$color}: #{$value};
+        }
+
+        @each $color, $value in $theme-bg-colors {
+            --cool-theme-bg-color-#{$color}: #{$value};
+        }
+
+        @each $color, $value in $theme-text-colors {
+            --cool-theme-text-color-#{$color}: #{$value};
+        }
+
+        // Typography
+        --cool-font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
+        --cool-font-family-serif: #{meta.inspect($font-family-serif)};
+        --cool-font-family-title: #{meta.inspect($font-family-title)};
+        --cool-font-family-monospace: #{meta.inspect($font-family-monospace)};
+        --cool-font-family-base: #{meta.inspect($font-family-base)};
+
+        --cool-font-size-base: #{$font-size-base};
+        --cool-font-size-lg: #{$font-size-lg};
+        --cool-font-size-sm: #{$font-size-sm};
+        --cool-font-size-xs: #{$font-size-xs};
+
+        --cool-font-weight-lighter: #{$font-weight-lighter};
+        --cool-font-weight-light: #{$font-weight-light};
+        --cool-font-weight-normal: #{$font-weight-normal};
+        --cool-font-weight-bold: #{$font-weight-bold};
+        --cool-font-weight-bolder: #{$font-weight-bolder};
+        --cool-font-weight-base: #{$font-weight-base};
+
+        --cool-line-height-lg: #{$line-height-lg};
+        --cool-line-height-base: #{$line-height-base};
+        --cool-line-height-sm: #{$line-height-sm};
+        --cool-line-height-xs: #{$line-height-xs};
+        --cool-line-height-computed: #{$line-height-computed};
+
+        --cool-hr-border-color: #{$hr-border-color};
+        --cool-hr-border-width: #{$hr-border-width};
+        --cool-hr-margin-y: #{$hr-margin-y};
+
+        --cool-small-font-size: #{$small-font-size};
+
+        --cool-lead-font-size: #{$lead-font-size};
+        --cool-lead-font-weight: #{$lead-font-weight};
+
+        // Headings
+        --cool-h1-font-size: #{$h1-font-size};
+        --cool-h2-font-size: #{$h2-font-size};
+        --cool-h3-font-size: #{$h3-font-size};
+        --cool-h4-font-size: #{$h4-font-size};
+        --cool-h5-font-size: #{$h5-font-size};
+        --cool-h6-font-size: #{$h6-font-size};
+
+        --cool-headings-margin-bottom: #{$headings-margin-bottom};
+        --cool-headings-font-family: #{meta.inspect($headings-font-family)};
+        --cool-headings-font-weight: #{$headings-font-weight};
+        --cool-headings-line-height: #{$headings-line-height};
+        --cool-headings-color: #{$headings-color};
+
+        // Display sizes
+        --cool-display1-size: #{$display1-size};
+        --cool-display2-size: #{$display2-size};
+        --cool-display3-size: #{$display3-size};
+        --cool-display4-size: #{$display4-size};
+        --cool-display1-weight: #{$display1-weight};
+        --cool-display2-weight: #{$display2-weight};
+        --cool-display3-weight: #{$display3-weight};
+        --cool-display4-weight: #{$display4-weight};
+        --cool-display-line-height: #{$display-line-height};
+
+        // Body
+        --cool-body-bg: #{$body-bg};
+        --cool-body-color: #{$body-color};
+        --cool-body-hover-bg: #{$body-hover-bg};
+        --cool-body-emphasize-bg: #{$body-emphasize-bg};
+        --cool-body-surface-bg: #{$body-surface-bg};
+
+        // Links
+        --cool-link-color: #{$link-color};
+        --cool-link-hover-color: #{$link-hover-color};
+        --cool-link-text-decoration: #{$link-text-decoration};
+        --cool-link-hover-text-decoration: #{$link-hover-text-decoration};
+        --cool-link-disabled-color: #{$link-disabled-color};
+        --cool-link-font-weight: #{$link-font-weight};
+
+        // Borders
+        --cool-border-width: #{$border-width};
+        --cool-border-color: #{$border-color};
+        --cool-border-radius: #{$border-radius};
+        --cool-border-radius-xs: #{$border-radius-xs};
+        --cool-border-radius-sm: #{$border-radius-sm};
+        --cool-border-radius-lg: #{$border-radius-lg};
+
+        // Grid
+        --cool-grid-columns: #{$grid-columns};
+        --cool-grid-gutter-x: #{$grid-gutter-x};
+        --cool-grid-gutter-y: #{$grid-gutter-y};
+        --cool-grid-row-gap: #{$grid-row-gap};
+        --cool-grid-column-gap: #{$grid-column-gap};
+
+        // Breakpoints
+        @each $bp, $value in $grid-breakpoints {
+            --cool-breakpoint-#{$bp}: #{$value};
+        }
+
+        // Container max widths
+        --cool-container-content-max-width: #{$container-content-max-width};
+
+        @each $breakpoint, $container-width in $container-max-widths {
+            --cool-container-#{$breakpoint}: #{$container-width};
+        }
+
+        // Spacing
+        --cool-spacer: #{$spacer};
+
+        @each $key, $value in $spacers {
+            --cool-spacing-#{$key}: #{$value};
+        }
+
+        // Z-index
+        --cool-zindex-fixed: #{$zindex-fixed};
+        --cool-zindex-sticky: #{$zindex-sticky};
+        --cool-zindex-popover: #{$zindex-popover};
+        --cool-zindex-tooltip: #{$zindex-tooltip};
+        --cool-zindex-dropdown: #{$zindex-dropdown};
+        --cool-zindex-select: #{$zindex-select};
+        --cool-zindex-toast: #{$zindex-toast};
+        --cool-zindex-dialog: #{$zindex-dialog};
+
+        // Shadows
+        --cool-box-shadow-sm: #{$box-shadow-sm};
+        --cool-box-shadow: #{$box-shadow};
+        --cool-box-shadow-lg: #{$box-shadow-lg};
+
+        // Buttons
+        --cool-btn-padding-y: #{$btn-padding-y};
+        --cool-btn-padding-x: #{$btn-padding-x};
+        --cool-btn-font-family: #{meta.inspect($btn-font-family)};
+        --cool-btn-font-size: #{$btn-font-size};
+        --cool-btn-line-height: #{$btn-line-height};
+        --cool-btn-font-weight: #{$btn-font-weight};
+        --cool-btn-border-width: #{$btn-border-width};
+        --cool-btn-border-radius: #{$btn-border-radius};
+        --cool-btn-border-radius-lg: #{$btn-border-radius-lg};
+        --cool-btn-border-radius-sm: #{$btn-border-radius-sm};
+        --cool-btn-border-radius-xs: #{$btn-border-radius-xs};
+
+        --cool-btn-padding-y-xs: #{$btn-padding-y-xs};
+        --cool-btn-padding-x-xs: #{$btn-padding-x-xs};
+        --cool-btn-font-size-xs: #{$btn-font-size-xs};
+        --cool-btn-line-height-xs: #{$btn-line-height-xs};
+
+        --cool-btn-padding-y-sm: #{$btn-padding-y-sm};
+        --cool-btn-padding-x-sm: #{$btn-padding-x-sm};
+        --cool-btn-font-size-sm: #{$btn-font-size-sm};
+        --cool-btn-line-height-sm: #{$btn-line-height-sm};
+
+        --cool-btn-padding-y-lg: #{$btn-padding-y-lg};
+        --cool-btn-padding-x-lg: #{$btn-padding-x-lg};
+        --cool-btn-font-size-lg: #{$btn-font-size-lg};
+        --cool-btn-line-height-lg: #{$btn-line-height-lg};
+
+        --cool-btn-icon-height: calc(
+            var(--cool-btn-line-height) * var(--cool-btn-font-size) + var(--cool-btn-padding-y) * 2
+        );
+        --cool-btn-icon-height-sm: calc(
+            var(--cool-btn-line-height-sm) * var(--cool-btn-font-size-sm) + var(--cool-btn-padding-y-sm) * 2
+        );
+        --cool-btn-icon-height-lg: calc(
+            var(--cool-btn-line-height-lg) * var(--cool-btn-font-size-lg) + var(--cool-btn-padding-y-lg) * 2
+        );
+
+        --cool-btn-cursor: #{$btn-cursor};
+
+        // Icons
+        --cool-icon-color: #{$icon-color};
+        --cool-icon-spacer: #{$icon-spacer};
+
+        // Forms
+        --cool-label-font-size: #{$label-font-size};
+        --cool-label-margin-bottom: #{$label-margin-bottom};
+
+        --cool-input-padding-y: #{$input-padding-y};
+        --cool-input-padding-x: #{$input-padding-x};
+        --cool-input-font-family: #{meta.inspect($input-font-family)};
+        --cool-input-font-size: #{$input-font-size};
+        --cool-input-font-weight: #{$input-font-weight};
+        --cool-input-line-height: #{$input-line-height};
+        --cool-input-height: #{$input-height};
+        --cool-input-height-sm: #{$input-height-sm};
+        --cool-input-height-lg: #{$input-height-lg};
+
+        --cool-input-bg: #{$input-bg};
+        --cool-input-disabled-bg: #{$input-disabled-bg};
+        --cool-input-disabled-color: #{$input-disabled-color};
+        --cool-input-color: #{$input-color};
+        --cool-input-border-color: #{$input-border-color};
+        --cool-input-border-width: #{$input-border-width};
+        --cool-input-border-radius: #{$input-border-radius};
+        --cool-input-focus-border-color: #{$input-focus-border-color};
+        --cool-input-placeholder-color: #{$input-placeholder-color};
+        --cool-input-plaintext-color: #{$input-plaintext-color};
+
+        // Form validation
+        --cool-form-feedback-margin-top: #{$form-feedback-margin-top};
+        --cool-form-feedback-font-size: #{$form-feedback-font-size};
+        --cool-form-feedback-valid-color: #{$form-feedback-valid-color};
+        --cool-form-feedback-invalid-color: #{$form-feedback-invalid-color};
+
+        // Form layout
+        --cool-form-group-margin-bottom: #{$form-group-margin-bottom};
+        --cool-form-switch-width: #{$form-switch-width};
+
+        --cool-form-check-input-color: #{$form-check-input-color};
+        --cool-form-check-input-border-color: #{$form-check-input-border-color};
+        --cool-form-check-input-border-width: #{$form-check-input-border-width};
+        --cool-form-check-input-radius: #{$form-check-input-radius};
+        --cool-form-check-input-size: #{$form-check-input-size};
+
+        // List group
+        --cool-list-group-bg: #{$list-group-bg};
+        --cool-list-group-color: #{$list-group-color};
+        --cool-list-group-hover-bg: #{$list-group-hover-bg};
+        --cool-list-group-active-color: #{$list-group-active-color};
+        --cool-list-group-disabled-color: #{$list-group-disabled-color};
+        --cool-list-group-border-color: #{$list-group-border-color};
+        --cool-list-group-item-padding-y: #{$list-group-item-padding-y};
+        --cool-list-group-item-padding-x: #{$list-group-item-padding-x};
+        --cool-list-group-inner-padding: #{$list-group-inner-padding};
+        --cool-list-group-distinctive-bg: #{$list-group-distinctive-bg};
+        --cool-list-group-distinctive-padding: #{$list-group-distinctive-padding};
+        --cool-list-group-distinctive-gap: #{$list-group-distinctive-gap};
+        --cool-list-group-icon-spacing: #{$list-group-icon-spacing};
+        --cool-list-group-line-height: #{$list-group-line-height};
+
+        // Input sizes
+        --cool-input-padding-y-sm: #{$input-padding-y-sm};
+        --cool-input-padding-x-sm: #{$input-padding-x-sm};
+        --cool-input-font-size-sm: #{$input-font-size-sm};
+        --cool-input-line-height-sm: #{$input-line-height-sm};
+        --cool-input-border-radius-sm: #{$input-border-radius-sm};
+
+        --cool-input-padding-y-lg: #{$input-padding-y-lg};
+        --cool-input-padding-x-lg: #{$input-padding-x-lg};
+        --cool-input-font-size-lg: #{$input-font-size-lg};
+        --cool-input-line-height-lg: #{$input-line-height-lg};
+        --cool-input-border-radius-lg: #{$input-border-radius-lg};
+
+        // Input group
+        --cool-input-group-addon-color: #{$input-group-addon-color};
+        --cool-input-group-addon-bg: #{$input-group-addon-bg};
+        --cool-input-group-addon-border-color: #{$input-group-addon-border-color};
+        --cool-input-group-gap: #{$input-group-gap};
+        --cool-input-group-border-color: #{$input-group-border-color};
+        --cool-input-group-border-width: #{$input-group-border-width};
+        --cool-input-group-border-radius: #{$input-group-border-radius};
+        --cool-input-group-bg: #{$input-group-bg};
+        --cool-input-group-color: #{$input-group-color};
+
+        // Navbar
+        --cool-navbar-bg: #{$navbar-bg};
+        --cool-navbar-color: #{$navbar-color};
+        --cool-navbar-hover-color: #{$navbar-hover-color};
+        --cool-navbar-height: #{$navbar-height};
+        --cool-navbar-height-sm: #{$navbar-height-sm};
+        --cool-navbar-border-width: #{$navbar-border-width};
+        --cool-navbar-border-color: #{$navbar-border-color};
+        --cool-navbar-border-radius: #{$navbar-border-radius};
+        --cool-navbar-padding-x: #{$navbar-padding-x};
+
+        --cool-navbar-item-bg: #{$navbar-item-bg};
+        --cool-navbar-item-hover-bg: #{$navbar-item-hover-bg};
+        --cool-navbar-item-color: #{$navbar-item-color};
+        --cool-navbar-item-hover-color: #{$navbar-item-hover-color};
+        --cool-navbar-item-min-width: #{$navbar-item-min-width};
+        --cool-navbar-item-padding-x: #{$navbar-item-padding-x};
+        --cool-navbar-item-font-size: #{$navbar-item-font-size};
+        --cool-navbar-item-icon-size: #{$navbar-item-icon-size};
+        --cool-navbar-item-spacer-width: #{$navbar-item-spacer-width};
+        --cool-navbar-pulse-shadow-color: #{$navbar-pulse-shadow-color};
+        --cool-navbar-item-height: #{$navbar-item-height};
+        --cool-navbar-item-height-sm: #{$navbar-item-height-sm};
+
+        --cool-navbar-toggler-icon-width: #{$navbar-toggler-icon-width};
+        --cool-navbar-toggler-icon-height: #{$navbar-toggler-icon-height};
+        --cool-navbar-toggler-bar-height: #{$navbar-toggler-bar-height};
+        --cool-navbar-toggler-bar-spacing: #{$navbar-toggler-bar-spacing};
+        --cool-navbar-toggler-bar-radius: #{$navbar-toggler-bar-radius};
+        --cool-navbar-avatar-spacing: #{$navbar-avatar-spacing};
+        --cool-navbar-notification-counter-color: #{$navbar-notification-counter-color};
+        --cool-navbar-notification-counter-bg: #{$navbar-notification-counter-bg};
+        --cool-navbar-notification-counter-font-size: #{$navbar-notification-counter-font-size};
+        --cool-navbar-notification-counter-height: #{$navbar-notification-counter-height};
+        --cool-navbar-notification-counter-padding: #{$navbar-notification-counter-padding};
+        --cool-navbar-notification-counter-radius: #{$navbar-notification-counter-radius};
+        --cool-navbar-nav-gap: #{$navbar-nav-gap};
+        --cool-navbar-nav-padding: #{$navbar-nav-padding};
+        --cool-navbar-brand-svg-margin-top: #{$navbar-brand-svg-margin-top};
+
+        // Section
+        --cool-section-spacer: #{$section-spacer};
+        --cool-section-spacer-mobile: #{$section-spacer-mobile};
+
+        --cool-section-padding: #{$section-padding};
+        --cool-section-padding-mobile: #{$section-padding-mobile};
+
+        --cool-section-border-radius: #{$section-border-radius};
+        --cool-section-inner-border-radius: #{$section-inner-border-radius};
+        --cool-section-border-width: #{$section-border-width};
+        --cool-section-border-color: #{$section-border-color};
+
+        --cool-section-bg: #{$section-bg};
+        --cool-section-color: #{$section-color};
+        --cool-section-box-shadow: #{$section-box-shadow};
+        --cool-section-secondary-bg: #{$section-secondary-bg};
+
+        --cool-section-divider-height: #{$section-divider-height};
+        --cool-section-divider-color: #{$section-divider-color};
+        --cool-section-divider-padding: #{$section-divider-padding};
+
+        --cool-section-title-font-family: #{meta.inspect($section-title-font-family)};
+        --cool-section-title-font-size: #{$section-title-font-size};
+        --cool-section-title-font-weight: #{$section-title-font-weight};
+        --cool-section-title-bg: #{$section-title-bg};
+        --cool-section-title-color: #{$section-title-color};
+        --cool-section-title-actions-color: #{$section-title-actions-color};
+        --cool-section-title-icons-color: #{$section-title-icons-color};
+        --cool-section-title-icons-size: #{$section-title-icons-size};
+        --cool-section-title-padding: #{$section-title-padding};
+
+        --cool-section-subtitle-font-family: #{meta.inspect($section-subtitle-font-family)};
+        --cool-section-subtitle-font-size: #{$section-subtitle-font-size};
+        --cool-section-subtitle-font-weight: #{$section-subtitle-font-weight};
+        --cool-section-subtitle-color: #{$section-subtitle-color};
+
+        --cool-section-image-badge-bg: #{$section-image-badge-bg};
+        --cool-section-image-badge-color: #{$section-image-badge-color};
+        --cool-section-image-badge-shadow: #{$section-image-badge-shadow};
+        --cool-section-image-badge-padding: #{$section-image-badge-padding};
+        --cool-section-image-badge-font-size: #{$section-image-badge-font-size};
+        --cool-section-image-darken-bg: #{$section-image-darken-bg};
+
+        --cool-section-placeholder-icon-color: #{$section-placeholder-icon-color};
+        --cool-section-placeholder-description-color: #{$section-placeholder-description-color};
+        --cool-section-placeholder-title-font-family: #{meta.inspect($section-placeholder-title-font-family)};
+        --cool-section-placeholder-title-font-weight: #{$section-placeholder-title-font-weight};
+        --cool-section-placeholder-icon-size: #{$section-placeholder-icon-size};
+        --cool-section-placeholder-icon-font-size: #{$section-placeholder-icon-font-size};
+        --cool-section-placeholder-icon-padding: #{$section-placeholder-icon-padding};
+        --cool-section-placeholder-spacing: #{$section-placeholder-spacing};
+        --cool-section-placeholder-spacing-sm: #{$section-placeholder-spacing-sm};
+
+        --cool-section-definition-heading-color-mobile: #{$section-definition-heading-color-mobile};
+        --cool-section-definition-heading-font-size-mobile: #{$section-definition-heading-font-size-mobile};
+        --cool-section-definition-heading-color: #{$section-definition-heading-color};
+        --cool-section-definition-heading-font-size: #{$section-definition-heading-font-size};
+        --cool-section-definition-spacer-height: #{$section-definition-spacer-height};
+
+        --cool-section-filters-bg: #{$section-filters-bg};
+        --cool-section-filters-color: #{$section-filters-color};
+
+        --cool-section-bulk-actions-bg: #{$section-bulk-actions-bg};
+        --cool-section-bulk-actions-color: #{$section-bulk-actions-color};
+        --cool-section-bulk-actions-divider-color: #{$section-bulk-actions-divider-color};
+        --cool-section-bulk-action-select-font-size: #{$section-bulk-action-select-font-size};
+        --cool-section-bulk-action-select-max-width: #{$section-bulk-action-select-max-width};
+
+        --cool-section-tabs-font-family: #{meta.inspect($section-tabs-font-family)};
+        --cool-section-tabs-font-weight: #{$section-tabs-font-weight};
+        --cool-section-tabs-font-weight-active: #{$section-tabs-font-weight-active};
+
+        --cool-section-tabs-item-padding-y: #{$section-tabs-item-padding-y};
+        --cool-section-tabs-item-padding-x: #{$section-tabs-item-padding-x};
+        --cool-section-tabs-item-gap: #{$section-tabs-item-gap};
+        --cool-section-tabs-item-min-width: #{$section-tabs-item-min-width};
+
+        --cool-section-tabs-bg: #{$section-tabs-bg};
+        --cool-section-tabs-color: #{$section-tabs-color};
+        --cool-section-tabs-hover-color: #{$section-tabs-hover-color};
+        --cool-section-tabs-active-color: #{$section-tabs-active-color};
+
+        --cool-section-tabs-border-width: #{$section-tabs-border-width};
+        --cool-section-tabs-border-color: #{$section-tabs-border-color};
+        --cool-section-tabs-border-hover-color: #{$section-tabs-border-hover-color};
+        --cool-section-tabs-border-active-color: #{$section-tabs-border-active-color};
+
+        // Table
+        --cool-table-color: #{$table-color};
+        --cool-table-bg: #{$table-bg};
+        --cool-table-hover-color: #{$table-hover-color};
+        --cool-table-hover-bg: #{$table-hover-bg};
+        --cool-table-hover-transition: #{$table-hover-transition};
+        --cool-table-accent-bg: #{$table-accent-bg};
+        --cool-table-striped-order: #{$table-striped-order};
+        --cool-table-caption-color: #{$table-caption-color};
+        --cool-table-link-color: #{$table-link-color};
+        --cool-table-link-hover-color: #{$table-link-hover-color};
+        --cool-table-icon-color: #{$table-icon-color};
+        --cool-table-border-color: #{$table-border-color};
+
+        --cool-table-th-bg: #{$table-th-bg};
+        --cool-table-th-font-family: #{$table-th-font-family};
+        --cool-table-th-font-weight: #{$table-th-font-weight};
+        --cool-table-th-font-size: #{$table-th-font-size};
+        --cool-table-th-line-height: #{$table-th-line-height};
+
+        --cool-table-th-padding-x: #{$table-th-padding-x};
+        --cool-table-th-padding-y: #{$table-th-padding-y};
+        --cool-table-th-padding: var(--cool-table-th-padding-y) var(--cool-table-th-padding-x);
+        --cool-table-th-padding-mobile: var(--cool-table-th-padding);
+        --cool-table-th-padding-sm: var(--cool-table-th-padding);
+
+        --cool-table-td-padding-x: #{$table-td-padding-x};
+        --cool-table-td-padding-y: #{$table-td-padding-y};
+        --cool-table-td-padding: var(--cool-table-td-padding-y) var(--cool-table-td-padding-x);
+        --cool-table-td-padding-mobile: var(--cool-table-td-padding);
+        --cool-table-td-padding-sm: var(--cool-table-td-padding);
+        --cool-table-td-line-height: #{$table-td-line-height};
+
+        --cool-table-head-bg: #{$table-head-bg};
+        --cool-table-head-color: #{$table-head-color};
+
+        --cool-table-sortable-head-hover-bg: #{$table-sortable-head-hover-bg};
+        --cool-table-sortable-handle-width: #{$table-sortable-handle-width};
+        --cool-table-sortable-handle-height: #{$table-sortable-handle-height};
+
+        --cool-table-responsive-heading-font-weight: #{$table-responsive-heading-font-weight};
+        --cool-table-responsive-td-font-size: #{$table-responsive-td-font-size};
+        --cool-table-responsive-td-line-height: #{$table-responsive-td-line-height};
+        --cool-table-responsive-td-padding: #{$table-responsive-td-padding};
+        --cool-table-responsive-first-td-bg: #{$table-responsive-first-td-bg};
+        --cool-table-responsive-heading-margin-bottom: #{$table-responsive-heading-margin-bottom};
+        --cool-table-responsive-margin-bottom: #{$table-responsive-margin-bottom};
+
+        --cool-table-sticky-actions-shadow-color: #{$table-sticky-actions-shadow-color};
+        --cool-table-sticky-actions-col-sticky-bg: #{$table-sticky-actions-col-sticky-bg};
+        --cool-table-sticky-actions-shadow-gradient: #{$table-sticky-actions-shadow-gradient};
+        --cool-table-sticky-actions-shadow-width: #{$table-sticky-actions-shadow-width};
+
+        --cool-table-bulk-actions-hover-bg: #{$table-bulk-actions-hover-bg};
+        --cool-table-bulk-actions-hover-color: #{$table-bulk-actions-hover-color};
+        --cool-table-bulk-actions-dropdown-shadow: #{$table-bulk-actions-dropdown-shadow};
+        --cool-table-bulk-actions-dropdown-min-width: #{$table-bulk-actions-dropdown-min-width};
+        --cool-table-bulk-actions-dropdown-item-font-size: #{$table-bulk-actions-dropdown-item-font-size};
+        --cool-table-bulk-actions-dropdown-item-line-height: #{$table-bulk-actions-dropdown-item-line-height};
+        --cool-table-bulk-actions-dropdown-item-padding: #{$table-bulk-actions-dropdown-item-padding};
+        --cool-table-bulk-actions-btn-padding: #{$table-bulk-actions-btn-padding};
+        --cool-table-bulk-actions-height: #{$table-bulk-actions-height};
+        --cool-table-bulk-actions-input-group-height: #{$table-bulk-actions-input-group-height};
+        --cool-table-bulk-actions-input-group-padding: #{$table-bulk-actions-input-group-padding};
+        --cool-table-bulk-actions-input-group-margin: #{$table-bulk-actions-input-group-margin};
+
+        // Tabs
+        --cool-tabs-bg: #{$tabs-bg};
+        --cool-tabs-color: #{$tabs-text-color};
+        --cool-tabs-hover-color: #{$tabs-hover-color};
+        --cool-tabs-active-color: #{$tabs-active-color};
+        --cool-tabs-hover-bg: #{$tabs-hover-bg};
+
+        // Badge
+        --cool-badge-font-family: #{$badge-font-family};
+        --cool-badge-font-size-xs: #{$badge-font-size-xs};
+        --cool-badge-font-size-sm: #{$badge-font-size-sm};
+        --cool-badge-font-size: #{$badge-font-size};
+
+        --cool-badge-font-weight-xs: #{$badge-font-weight-xs};
+        --cool-badge-font-weight-sm: #{$badge-font-weight-sm};
+        --cool-badge-font-weight: #{$badge-font-weight};
+
+        --cool-badge-padding-y-xs: #{$badge-padding-y-xs};
+        --cool-badge-padding-x-xs: #{$badge-padding-x-xs};
+        --cool-badge-padding-y-sm: #{$badge-padding-y-sm};
+        --cool-badge-padding-x-sm: #{$badge-padding-x-sm};
+        --cool-badge-padding-y: #{$badge-padding-y};
+        --cool-badge-padding-x: #{$badge-padding-x};
+
+        --cool-badge-line-height-xs: #{$badge-line-height-xs};
+        --cool-badge-line-height-sm: #{$badge-line-height-sm};
+        --cool-badge-line-height: #{$badge-line-height};
+
+        --cool-badge-border-radius-xs: #{$badge-border-radius-xs};
+        --cool-badge-border-radius-sm: #{$badge-border-radius-sm};
+        --cool-badge-border-radius: #{$badge-border-radius};
+
+        --cool-badge-border-width: #{$badge-border-width};
+        --cool-badge-box-shadow-blur: #{$badge-box-shadow-blur};
+        --cool-badge-box-shadow-opacity: #{$badge-box-shadow-opacity};
+
+        // Dropdown
+        --cool-dropdown-font-size: #{$dropdown-font-size};
+        --cool-dropdown-line-height: #{$dropdown-line-height};
+        --cool-dropdown-width: #{$dropdown-width};
+        --cool-dropdown-padding-y: #{$dropdown-padding-y};
+        --cool-dropdown-spacer: #{$dropdown-spacer};
+        --cool-dropdown-bg: #{$dropdown-bg};
+        --cool-dropdown-color: #{$dropdown-color};
+        --cool-dropdown-border-color: #{$dropdown-border-color};
+        --cool-dropdown-border-radius: #{$dropdown-border-radius};
+        --cool-dropdown-border-width: #{$dropdown-border-width};
+        --cool-dropdown-divider-bg: #{$dropdown-divider-bg};
+        --cool-dropdown-box-shadow: #{$dropdown-box-shadow};
+        --cool-dropdown-title-color: #{$dropdown-title-color};
+
+        --cool-dropdown-link-color: #{$dropdown-link-color};
+        --cool-dropdown-link-hover-color: #{$dropdown-link-hover-color};
+        --cool-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+        --cool-dropdown-link-active-color: #{$dropdown-link-active-color};
+        --cool-dropdown-link-active-bg: #{$dropdown-link-active-bg};
+        --cool-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+
+        --cool-dropdown-item-padding-y: #{$dropdown-item-padding-y};
+        --cool-dropdown-item-padding-x: #{$dropdown-item-padding-x};
+
+        // Nav divider
+        --cool-nav-divider-color: #{$nav-divider-color};
+        --cool-nav-divider-margin-y: #{$nav-divider-margin-y};
+
+        // Frame sidebar floating
+        --cool-frame-sidebar-floating-bg: #{$frame-sidebar-floating-bg};
+        --cool-frame-sidebar-floating-border-radius: #{$frame-sidebar-floating-border-radius};
+        --cool-frame-sidebar-floating-border-width: #{$frame-sidebar-floating-border-width};
+        --cool-frame-sidebar-floating-border-color: #{$frame-sidebar-floating-border-color};
+        --cool-frame-sidebar-floating-padding-y: #{$frame-sidebar-floating-padding-y};
+        --cool-frame-sidebar-floating-padding-x: #{$frame-sidebar-floating-padding-x};
+        --cool-frame-sidebar-floating-box-shadow: #{$frame-sidebar-floating-box-shadow};
+
+        // Frame sidebar left
+        --cool-frame-sidebar-width: #{$frame-sidebar-width};
+        --cool-frame-sidebar-left-width: #{$frame-sidebar-left-width};
+        --cool-frame-sidebar-right-width: #{$frame-sidebar-right-width};
+        --cool-frame-sidebar-right-breakpoint: #{$frame-sidebar-right-breakpoint};
+        --cool-frame-sidebar-bg: #{$frame-sidebar-bg};
+        --cool-frame-sidebar-bg-mobile: #{$frame-sidebar-bg-mobile};
+        --cool-frame-sidebar-border-width: #{$frame-sidebar-border-width};
+        --cool-frame-sidebar-border-color: #{$frame-sidebar-border-color};
+        --cool-frame-sidebar-padding-y: #{$frame-sidebar-padding-y};
+        --cool-frame-sidebar-padding-x: #{$frame-sidebar-padding-x};
+
+        --cool-frame-sidebar-header-padding-y: #{$frame-sidebar-header-padding-y};
+        --cool-frame-sidebar-header-padding-x: #{$frame-sidebar-header-padding-x};
+
+        --cool-frame-sidebar-content-padding-y: #{$frame-sidebar-content-padding-y};
+        --cool-frame-sidebar-content-padding-x: #{$frame-sidebar-content-padding-x};
+
+        --cool-frame-sidebar-footer-padding-y: #{$frame-sidebar-footer-padding-y};
+        --cool-frame-sidebar-footer-padding-x: #{$frame-sidebar-footer-padding-x};
+
+        // Frame sidebar spacing and navigation
+        --cool-frame-sidebar-nav-style: #{$frame-sidebar-nav-style};
+        --cool-frame-sidebar-nav-bg: #{$frame-sidebar-nav-bg};
+        --cool-frame-sidebar-nav-padding-y: #{$frame-sidebar-nav-padding-y};
+        --cool-frame-sidebar-nav-padding-x: #{$frame-sidebar-nav-padding-x};
+        --cool-frame-sidebar-sub-nav-padding-y: #{$frame-sidebar-sub-nav-padding-y};
+        --cool-frame-sidebar-sub-nav-padding-x: #{$frame-sidebar-sub-nav-padding-x};
+        --cool-frame-sidebar-nav-font-family: #{meta.inspect($frame-sidebar-nav-font-family)};
+
+        // Frame sidebar nav icons
+        --cool-frame-sidebar-nav-a-icon-size: #{$frame-sidebar-nav-a-icon-size};
+        --cool-frame-sidebar-nav-a-icon-color: #{$frame-sidebar-nav-a-icon-color};
+        --cool-frame-sidebar-nav-a-icon-hover-color: #{$frame-sidebar-nav-a-icon-hover-color};
+        --cool-frame-sidebar-nav-icon-size: #{$frame-sidebar-nav-icon-size};
+        --cool-frame-sidebar-nav-icon-color: #{$frame-sidebar-nav-icon-color};
+        --cool-frame-sidebar-nav-icon-hover-color: #{$frame-sidebar-nav-icon-hover-color};
+        --cool-frame-sidebar-nav-icon-active-color: #{$frame-sidebar-nav-icon-active-color};
+
+        // Frame sidebar nav items
+        --cool-frame-sidebar-nav-item-padding-x: #{$frame-sidebar-nav-item-padding-x};
+        --cool-frame-sidebar-nav-item-padding-y: #{$frame-sidebar-nav-item-padding-y};
+        --cool-frame-sidebar-nav-item-child-padding-x: #{$frame-sidebar-nav-item-child-padding-x};
+        --cool-frame-sidebar-nav-item-child-padding-y: #{$frame-sidebar-nav-item-child-padding-y};
+        --cool-frame-sidebar-nav-item-border-color: #{$frame-sidebar-nav-item-border-color};
+
+        // Frame sidebar nav item parent styles
+        --cool-frame-sidebar-nav-item-parent-font-size: #{$frame-sidebar-nav-item-parent-font-size};
+        --cool-frame-sidebar-nav-item-parent-font-weight: #{$frame-sidebar-nav-item-parent-font-weight};
+        --cool-frame-sidebar-nav-item-parent-color: #{$frame-sidebar-nav-item-parent-color};
+        --cool-frame-sidebar-nav-item-parent-hover-color: #{$frame-sidebar-nav-item-parent-hover-color};
+        --cool-frame-sidebar-nav-item-parent-hover-bg: #{$frame-sidebar-nav-item-parent-hover-bg};
+        --cool-frame-sidebar-nav-item-parent-active-color: #{$frame-sidebar-nav-item-parent-active-color};
+        --cool-frame-sidebar-nav-item-parent-active-bg: #{$frame-sidebar-nav-item-parent-active-bg};
+
+        // Frame sidebar nav item child styles
+        --cool-frame-sidebar-nav-item-child-font-size: #{$frame-sidebar-nav-item-child-font-size};
+        --cool-frame-sidebar-nav-item-child-font-weight: #{$frame-sidebar-nav-item-child-font-weight};
+        --cool-frame-sidebar-nav-item-child-color: #{$frame-sidebar-nav-item-child-color};
+        --cool-frame-sidebar-nav-item-child-hover-color: #{$frame-sidebar-nav-item-child-hover-color};
+        --cool-frame-sidebar-nav-item-child-hover-bg: #{$frame-sidebar-nav-item-child-hover-bg};
+        --cool-frame-sidebar-nav-item-child-active-color: #{$frame-sidebar-nav-item-child-active-color};
+        --cool-frame-sidebar-nav-item-child-active-bg: #{$frame-sidebar-nav-item-child-active-bg};
+
+        // Frame sidebar tabs
+        --cool-frame-sidebar-tabs-color: #{$frame-sidebar-tabs-color};
+        --cool-frame-sidebar-tabs-bg: #{$frame-sidebar-tabs-bg};
+        --cool-frame-sidebar-tabs-border-color: #{$frame-sidebar-tabs-border-color};
+        --cool-frame-sidebar-tabs-hover-color: #{$frame-sidebar-tabs-hover-color};
+        --cool-frame-sidebar-tabs-hover-bg: #{$frame-sidebar-tabs-hover-bg};
+        --cool-frame-sidebar-tabs-hover-border-color: #{$frame-sidebar-tabs-hover-border-color};
+        --cool-frame-sidebar-tabs-active-color: #{$frame-sidebar-tabs-active-color};
+        --cool-frame-sidebar-tabs-active-bg: #{$frame-sidebar-tabs-active-bg};
+        --cool-frame-sidebar-tabs-active-border-color: #{$frame-sidebar-tabs-active-border-color};
+
+        // Container content
+        --cool-container-content-max-width: #{$container-content-max-width};
+
+        // Dialog
+        --cool-dialog-bg: #{$dialog-bg};
+        --cool-dialog-title-font-family: #{meta.inspect($dialog-title-font-family)};
+        --cool-dialog-title-font-weight: #{$dialog-title-font-weight};
+        --cool-dialog-border-width: #{$dialog-border-width};
+        --cool-dialog-padding-x: #{$dialog-padding-x};
+        --cool-dialog-padding-y: #{$dialog-padding-y};
+
+        --cool-dialog-width: #{$dialog-width};
+        --cool-dialog-width-sm: #{$dialog-width-sm};
+        --cool-dialog-width-md: #{$dialog-width-md};
+        --cool-dialog-width-lg: #{$dialog-width-lg};
+        --cool-dialog-width-xl: #{$dialog-width-xl};
+
+        --cool-dialog-margin-x: #{$dialog-margin-x};
+        --cool-dialog-margin-y: #{$dialog-margin-y};
+        --cool-dialog-margin-x-lg: #{$dialog-margin-x-lg};
+        --cool-dialog-margin-y-lg: #{$dialog-margin-y-lg};
+        --cool-dialog-margin: var(--cool-dialog-margin-y) var(--cool-dialog-margin-x);
+        --cool-dialog-margin-lg: var(--cool-dialog-margin-y-lg) var(--cool-dialog-margin-x-lg);
+
+        --cool-dialog-header-height: #{$dialog-header-height};
+        --cool-dialog-body-height: #{$dialog-body-height};
+        --cool-dialog-footer-height: #{$dialog-footer-height};
+        --cool-dialog-backdrop-opacity: #{$dialog-backdrop-opacity};
+        --cool-dialog-notification-body-height: #{$dialog-notification-body-height};
+        --cool-dialog-notification-width: #{$dialog-notification-width};
+        --cool-dialog-title-font-size: #{$dialog-title-font-size};
+        --cool-dialog-box-shadow: #{$dialog-box-shadow};
+
+        // Animation
+        --cool-animation-duration: #{$animation-duration};
+        --cool-animation-timing: #{$animation-timing};
+
+        --cool-form-transition-fast: #{$form-transition-fast};
+        --cool-form-transition-normal: #{$form-transition-normal};
+        --cool-form-transition-slow: #{$form-transition-slow};
+
+        --cool-switch-transition: #{$switch-transition};
+
+        // Alert & Notification
+        --cool-alert-bg: #{$alert-bg};
+        --cool-alert-color: #{$alert-color};
+        --cool-alert-border-width: #{$alert-border-width};
+        --cool-alert-border-color: #{$alert-border-color};
+        --cool-alert-border-radius: #{$alert-border-radius};
+        --cool-alert-padding: #{$alert-padding};
+        --cool-alert-padding-sm: #{$alert-padding-sm};
+        --cool-alert-margin-bottom: #{$alert-margin-bottom};
+        --cool-alert-icon-width: #{$alert-icon-width};
+        --cool-alert-icon-height: #{$alert-icon-height};
+        --cool-alert-icon-font-size: #{$alert-icon-font-size};
+
+        --cool-notification-bg: #{$notification-bg};
+        --cool-notification-color: #{$notification-color};
+        --cool-notification-border-width: #{$notification-border-width};
+        --cool-notification-border-color: #{$notification-border-color};
+        --cool-notification-border-radius: #{$notification-border-radius};
+        --cool-notification-padding: #{$notification-padding};
+
+        // Media
+        --cool-image-icon-color: #{$image-icon-color};
+        --cool-image-bg-placeholder: #{$image-bg-placeholder};
+        --cool-image-bg-thumbnail: #{$image-bg-thumbnail};
+
+        --cool-image-border-color: #{$image-border-color};
+        --cool-image-border-width: #{$image-border-width};
+        --cool-image-border-radius: #{$image-border-radius};
+
+        --cool-image-transition: #{$image-transition};
+        --cool-image-transition-duration: #{$image-transition-duration};
+        --cool-image-transition-timing: #{$image-transition-timing};
+        --cool-image-loaded-bg: #{$image-loaded-bg};
+
+        --cool-image-status-indicator-size: #{$image-status-indicator-size};
+        --cool-image-status-indicator-bg: #{$image-status-indicator-bg};
+        --cool-image-status-indicator-active-bg: #{$image-status-indicator-active-bg};
+        --cool-image-status-indicator-idle-bg: #{$image-status-indicator-idle-bg};
+        --cool-image-status-indicator-inactive-bg: #{$image-status-indicator-inactive-bg};
+        --cool-image-status-indicator-info-bg: #{$image-status-indicator-info-bg};
+
+        --cool-image-showcase-shadow: #{$image-showcase-shadow};
+        --cool-image-showcase-border-radius: #{$image-showcase-border-radius};
+
+        --cool-image-select-min-height: #{$image-select-min-height};
+        --cool-image-select-padding: #{$image-select-padding};
+        --cool-image-select-gap: #{$image-select-gap};
+        --cool-image-select-trigger-bg: #{$image-select-trigger-bg};
+        --cool-image-select-trigger-color: #{$image-select-trigger-color};
+
+        --cool-placeholder-icon-size: #{$placeholder-icon-size};
+        --cool-placeholder-icon-font-size: #{$placeholder-icon-font-size};
+        --cool-placeholder-icon-color: #{$placeholder-icon-color};
+        --cool-placeholder-padding: #{$placeholder-padding};
+        --cool-placeholder-spacing: #{$placeholder-spacing};
+        --cool-placeholder-spacing-sm: #{$placeholder-spacing-sm};
+        --cool-placeholder-title-font-family: #{meta.inspect($placeholder-title-font-family)};
+        --cool-placeholder-title-font-weight: #{$placeholder-title-font-weight};
+        --cool-placeholder-title-color: #{$placeholder-title-color};
+        --cool-placeholder-description-color: #{$placeholder-description-color};
+
+        // Pagination
+        --cool-pagination-padding-y: #{$pagination-padding-y};
+        --cool-pagination-padding-x: #{$pagination-padding-x};
+        --cool-pagination-color: #{$pagination-color};
+        --cool-pagination-hover-color: #{$pagination-hover-color};
+        --cool-pagination-active-color: #{$pagination-active-color};
+        --cool-pagination-disabled-color: #{$pagination-disabled-color};
+
+        // Popovers
+        --cool-popover-font-size: #{$popover-font-size};
+        --cool-popover-bg: #{$popover-bg};
+        --cool-popover-box-shadow: #{$popover-box-shadow};
+        --cool-popover-max-width: #{$popover-max-width};
+        --cool-popover-border-width: #{$popover-border-width};
+        --cool-popover-border-color: #{$popover-border-color};
+        --cool-popover-border-radius: #{$popover-border-radius};
+        --cool-popover-spacer: #{$popover-spacer};
+        --cool-popover-header-bg: #{$popover-header-bg};
+        --cool-popover-header-color: #{$popover-header-color};
+        --cool-popover-header-padding-y: #{$popover-header-padding-y};
+        --cool-popover-header-padding-x: #{$popover-header-padding-x};
+        --cool-popover-body-color: #{$popover-body-color};
+        --cool-popover-body-padding-y: #{$popover-body-padding-y};
+        --cool-popover-body-padding-x: #{$popover-body-padding-x};
+
+        // Select
+        --cool-select-spacer: #{$select-spacer};
+        --cool-select-spacer-sm: #{$select-spacer-sm};
+        --cool-select-bg: #{$select-bg};
+        --cool-select-border-color: #{$select-border-color};
+        --cool-select-border-radius: #{$select-border-radius};
+        --cool-select-border-width: #{$select-border-width};
+        --cool-select-divider-bg: #{$select-divider-bg};
+        --cool-select-box-shadow: #{$select-box-shadow};
+
+        --cool-select-item-color: #{$select-item-color};
+        --cool-select-item-hover-color: #{$select-item-hover-color};
+        --cool-select-item-hover-bg: #{$select-item-hover-bg};
+        --cool-select-item-disabled-color: #{$select-item-disabled-color};
+
+        --cool-select-item-padding-y: #{$select-item-padding-y};
+        --cool-select-item-padding-x: #{$select-item-padding-x};
+        --cool-select-item-padding-y-sm: #{$select-item-padding-y-sm};
+        --cool-select-item-padding-x-sm: #{$select-item-padding-x-sm};
+
+        --cool-select-header-color: #{$select-header-color};
+        --cool-select-chip-bg: #{$select-chip-bg};
+        --cool-select-chip-border-radius: #{$select-chip-border-radius};
+        --cool-select-chip-padding: #{$select-chip-padding};
+        --cool-select-chip-font-size: #{$select-chip-font-size};
+        --cool-select-chip-max-width: #{$select-chip-max-width};
+        --cool-select-placeholder-color: #{$select-placeholder-color};
+        --cool-select-placeholder-font-style: #{$select-placeholder-font-style};
+        --cool-select-search-icon-color: #{$select-search-icon-color};
+        --cool-select-animation-length: #{$select-animation-length};
+        --cool-select-animation-timing: #{$select-animation-timing};
+
+        // Toast
+        --cool-toast-bg: #{$toast-bg};
+        --cool-toast-border-width: #{$toast-border-width};
+        --cool-toast-border-radius: #{$toast-border-radius};
+        --cool-toast-font-size: #{$toast-font-size};
+
+        --cool-toast-header-bg: #{$toast-header-bg};
+        --cool-toast-header-color: #{$toast-header-color};
+        --cool-toast-header-padding-y: #{$toast-header-padding-y};
+        --cool-toast-header-padding-x: #{$toast-header-padding-x};
+
+        --cool-toast-body-color: #{$toast-body-color};
+        --cool-toast-body-padding-y: #{$toast-body-padding-y};
+        --cool-toast-body-padding-x: #{$toast-body-padding-x};
+
+        --cool-toast-max-width: #{$toast-max-width};
+        --cool-toast-offset-x: #{$toast-offset-x};
+        --cool-toast-offset-y: #{$toast-offset-y};
+        --cool-toast-gap: #{$toast-gap};
+        --cool-toast-stack-offset: #{$toast-stack-offset};
+        --cool-toast-stack-scale: #{$toast-stack-scale};
+        --cool-toast-stack-opacity: #{$toast-stack-opacity};
+        --cool-toast-transition-duration: #{$toast-transition-duration};
+
+        // Tooltip
+        --cool-tooltip-font-size: #{$tooltip-font-size};
+        --cool-tooltip-max-width: #{$tooltip-max-width};
+        --cool-tooltip-color: #{$tooltip-color};
+        --cool-tooltip-bg: #{$tooltip-bg};
+        --cool-tooltip-border-radius: #{$tooltip-border-radius};
+        --cool-tooltip-opacity: #{$tooltip-opacity};
+        --cool-tooltip-padding-y: #{$tooltip-padding-y};
+        --cool-tooltip-padding-x: #{$tooltip-padding-x};
+        --cool-tooltip-margin: #{$tooltip-margin};
+        --cool-tooltip-arrow-width: #{$tooltip-arrow-width};
+        --cool-tooltip-arrow-height: #{$tooltip-arrow-height};
+        --cool-tooltip-arrow-color: #{$tooltip-arrow-color};
+    }
+}
+
+@if $cool-use-base-layer {
+    @layer base {
+        @include cool-root-base;
+    }
+} @else {
+    @include cool-root-base;
+}