uikit 3.23.7 → 3.23.8-dev.65e3f4fda

package/src/scss/variables.scss

@@ -1,3 +1,7 @@
+@use "sass:string";
+@use "sass:math";
+@use "sass:color";
+
 $global-margin: 20px !default;
 $accordion-item-margin-top: $global-margin !default;
 $global-medium-font-size: 1.25rem !default;
@@ -22,16 +26,16 @@ $alert-color: $global-color !default;
 $alert-close-top: $alert-padding + 5px !default;
 $alert-close-right: $alert-padding !default;
 $global-primary-background: #1e87f0 !default;
-$alert-primary-background: lighten(mix(white, $global-primary-background, 40%), 20%) !default;
+$alert-primary-background: color.adjust(color.mix(white, $global-primary-background, 40%), $lightness: 20%) !default;
 $alert-primary-color: $global-primary-background !default;
 $global-success-background: #32d296 !default;
-$alert-success-background: lighten(mix(white, $global-success-background, 40%), 25%) !default;
+$alert-success-background: color.adjust(color.mix(white, $global-success-background, 40%), $lightness: 25%) !default;
 $alert-success-color: $global-success-background !default;
 $global-warning-background: #faa05a !default;
-$alert-warning-background: lighten(mix(white, $global-warning-background, 45%), 15%) !default;
+$alert-warning-background: color.adjust(color.mix(white, $global-warning-background, 45%), $lightness: 15%) !default;
 $alert-warning-color: $global-warning-background !default;
 $global-danger-background: #f0506e !default;
-$alert-danger-background: lighten(mix(white, $global-danger-background, 40%), 20%) !default;
+$alert-danger-background: color.adjust(color.mix(white, $global-danger-background, 40%), $lightness: 20%) !default;
 $alert-danger-color: $global-danger-background !default;
 $global-gutter: 30px !default;
 $align-margin-horizontal: $global-gutter !default;
@@ -185,27 +189,27 @@ $button-small-padding-horizontal: $global-small-gutter !default;
 $button-large-padding-horizontal: $global-medium-gutter !default;
 $button-default-background: $global-muted-background !default;
 $button-default-color: $global-emphasis-color !default;
-$button-default-hover-background: darken($button-default-background, 5%) !default;
+$button-default-hover-background: color.adjust($button-default-background, $lightness: -5%) !default;
 $button-default-hover-color: $global-emphasis-color !default;
-$button-default-active-background: darken($button-default-background, 10%) !default;
+$button-default-active-background: color.adjust($button-default-background, $lightness: -10%) !default;
 $button-default-active-color: $global-emphasis-color !default;
 $button-primary-background: $global-primary-background !default;
 $button-primary-color: $global-inverse-color !default;
-$button-primary-hover-background: darken($button-primary-background, 5%) !default;
+$button-primary-hover-background: color.adjust($button-primary-background, $lightness: -5%) !default;
 $button-primary-hover-color: $global-inverse-color !default;
-$button-primary-active-background: darken($button-primary-background, 10%) !default;
+$button-primary-active-background: color.adjust($button-primary-background, $lightness: -10%) !default;
 $button-primary-active-color: $global-inverse-color !default;
 $button-secondary-background: $global-secondary-background !default;
 $button-secondary-color: $global-inverse-color !default;
-$button-secondary-hover-background: darken($button-secondary-background, 5%) !default;
+$button-secondary-hover-background: color.adjust($button-secondary-background, $lightness: -5%) !default;
 $button-secondary-hover-color: $global-inverse-color !default;
-$button-secondary-active-background: darken($button-secondary-background, 10%) !default;
+$button-secondary-active-background: color.adjust($button-secondary-background, $lightness: -10%) !default;
 $button-secondary-active-color: $global-inverse-color !default;
 $button-danger-background: $global-danger-background !default;
 $button-danger-color: $global-inverse-color !default;
-$button-danger-hover-background: darken($button-danger-background, 5%) !default;
+$button-danger-hover-background: color.adjust($button-danger-background, $lightness: -5%) !default;
 $button-danger-hover-color: $global-inverse-color !default;
-$button-danger-active-background: darken($button-danger-background, 10%) !default;
+$button-danger-active-background: color.adjust($button-danger-background, $lightness: -10%) !default;
 $button-danger-active-color: $global-inverse-color !default;
 $button-disabled-background: $global-muted-background !default;
 $button-disabled-color: $global-muted-color !default;
@@ -220,21 +224,21 @@ $button-link-hover-text-decoration: none !default;
 $button-link-disabled-color: $global-muted-color !default;
 $inverse-button-default-background: $inverse-global-primary-background !default;
 $inverse-button-default-color: $inverse-global-inverse-color !default;
-$inverse-button-default-hover-background: darken($inverse-button-default-background, 5%) !default;
+$inverse-button-default-hover-background: color.adjust($inverse-button-default-background, $lightness: -5%) !default;
 $inverse-button-default-hover-color: $inverse-global-inverse-color !default;
-$inverse-button-default-active-background: darken($inverse-button-default-background, 10%) !default;
+$inverse-button-default-active-background: color.adjust($inverse-button-default-background, $lightness: -10%) !default;
 $inverse-button-default-active-color: $inverse-global-inverse-color !default;
 $inverse-button-primary-background: $inverse-global-primary-background !default;
 $inverse-button-primary-color: $inverse-global-inverse-color !default;
-$inverse-button-primary-hover-background: darken($inverse-button-primary-background, 5%) !default;
+$inverse-button-primary-hover-background: color.adjust($inverse-button-primary-background, $lightness: -5%) !default;
 $inverse-button-primary-hover-color: $inverse-global-inverse-color !default;
-$inverse-button-primary-active-background: darken($inverse-button-primary-background, 10%) !default;
+$inverse-button-primary-active-background: color.adjust($inverse-button-primary-background, $lightness: -10%) !default;
 $inverse-button-primary-active-color: $inverse-global-inverse-color !default;
 $inverse-button-secondary-background: $inverse-global-primary-background !default;
 $inverse-button-secondary-color: $inverse-global-inverse-color !default;
-$inverse-button-secondary-hover-background: darken($inverse-button-secondary-background, 5%) !default;
+$inverse-button-secondary-hover-background: color.adjust($inverse-button-secondary-background, $lightness: -5%) !default;
 $inverse-button-secondary-hover-color: $inverse-global-inverse-color !default;
-$inverse-button-secondary-active-background: darken($inverse-button-secondary-background, 10%) !default;
+$inverse-button-secondary-active-background: color.adjust($inverse-button-secondary-background, $lightness: -10%) !default;
 $inverse-button-secondary-active-color: $inverse-global-inverse-color !default;
 $inverse-button-text-color: $inverse-global-emphasis-color !default;
 $inverse-button-text-hover-color: $inverse-global-muted-color !default;
@@ -246,13 +250,13 @@ $card-body-padding-vertical: $global-gutter !default;
 $card-body-padding-horizontal-l: $global-medium-gutter !default;
 $card-body-padding-vertical-l: $global-medium-gutter !default;
 $card-header-padding-horizontal: $global-gutter !default;
-$card-header-padding-vertical: round(($global-gutter * 0.5)) !default;
+$card-header-padding-vertical: math.round(($global-gutter * 0.5)) !default;
 $card-header-padding-horizontal-l: $global-medium-gutter !default;
-$card-header-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
+$card-header-padding-vertical-l: math.round(($global-medium-gutter * 0.5)) !default;
 $card-footer-padding-horizontal: $global-gutter !default;
 $card-footer-padding-vertical: ($global-gutter * 0.5) !default;
 $card-footer-padding-horizontal-l: $global-medium-gutter !default;
-$card-footer-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
+$card-footer-padding-vertical-l: math.round(($global-medium-gutter * 0.5)) !default;
 $card-title-font-size: $global-large-font-size !default;
 $card-title-line-height: 1.4 !default;
 $card-badge-top: 15px !default;
@@ -266,31 +270,31 @@ $card-hover-background: $global-muted-background !default;
 $card-default-background: $global-muted-background !default;
 $card-default-color: $global-color !default;
 $card-default-title-color: $global-emphasis-color !default;
-$card-default-hover-background: darken($card-default-background, 5%) !default;
+$card-default-hover-background: color.adjust($card-default-background, $lightness: -5%) !default;
 $card-default-color-mode: dark !default;
 $card-primary-background: $global-primary-background !default;
 $card-primary-color: $global-inverse-color !default;
 $card-primary-title-color: $card-primary-color !default;
-$card-primary-hover-background: darken($card-primary-background, 5%) !default;
+$card-primary-hover-background: color.adjust($card-primary-background, $lightness: -5%) !default;
 $card-primary-color-mode: light !default;
 $card-secondary-background: $global-secondary-background !default;
 $card-secondary-color: $global-inverse-color !default;
 $card-secondary-title-color: $card-secondary-color !default;
-$card-secondary-hover-background: darken($card-secondary-background, 5%) !default;
+$card-secondary-hover-background: color.adjust($card-secondary-background, $lightness: -5%) !default;
 $card-secondary-color-mode: light !default;
 $card-small-body-padding-horizontal: $global-margin !default;
 $card-small-body-padding-vertical: $global-margin !default;
 $card-small-header-padding-horizontal: $global-margin !default;
-$card-small-header-padding-vertical: round(($global-margin * 0.66667)) !default;
+$card-small-header-padding-vertical: math.round(($global-margin * 0.66667)) !default;
 $card-small-footer-padding-horizontal: $global-margin !default;
-$card-small-footer-padding-vertical: round(($global-margin * 0.66667)) !default;
+$card-small-footer-padding-vertical: math.round(($global-margin * 0.66667)) !default;
 $global-large-gutter: 70px !default;
 $card-large-body-padding-horizontal-l: $global-large-gutter !default;
 $card-large-body-padding-vertical-l: $global-large-gutter !default;
 $card-large-header-padding-horizontal-l: $global-large-gutter !default;
-$card-large-header-padding-vertical-l: round(($global-large-gutter * 0.5)) !default;
+$card-large-header-padding-vertical-l: math.round(($global-large-gutter * 0.5)) !default;
 $card-large-footer-padding-horizontal-l: $global-large-gutter !default;
-$card-large-footer-padding-vertical-l: round(($global-large-gutter * 0.5)) !default;
+$card-large-footer-padding-vertical-l: math.round(($global-large-gutter * 0.5)) !default;
 $inverse-card-badge-background: $inverse-global-primary-background !default;
 $inverse-card-badge-color: $inverse-global-inverse-color !default;
 $close-color: $global-muted-color !default;
@@ -409,35 +413,35 @@ $dropdown-nav-sublist-item-color: $global-muted-color !default;
 $dropdown-nav-sublist-item-hover-color: $global-color !default;
 $dropnav-dropbar-z-index: $global-z-index - 20 !default;
 $form-range-track-height: 3px !default;
-$form-range-track-background: darken($global-muted-background, 5%) !default;
-$form-range-track-focus-background: darken($form-range-track-background, 5%) !default;
+$form-range-track-background: color.adjust($global-muted-background, $lightness: -5%) !default;
+$form-range-track-focus-background: color.adjust($form-range-track-background, $lightness: -5%) !default;
 $form-range-thumb-height: 15px !default;
 $form-range-thumb-width: $form-range-thumb-height !default;
 $form-range-thumb-border-radius: 500px !default;
 $form-range-thumb-background: $global-color !default;
 $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
-$inverse-form-range-track-background: darken($inverse-global-muted-background, 5%) !default;
-$inverse-form-range-track-focus-background: fade-in($inverse-form-range-track-background, 0.05) !default;
-$inverse-form-range-thumb-background: fade-in($inverse-global-color, 1) !default;
+$inverse-form-range-track-background: color.adjust($inverse-global-muted-background, $lightness: -5%) !default;
+$inverse-form-range-track-focus-background: color.adjust($inverse-form-range-track-background, $alpha: 0.05) !default;
+$inverse-form-range-thumb-background: color.adjust($inverse-global-color, $alpha: 1) !default;
 $form-height: $global-control-height !default;
 $form-line-height: $form-height !default;
 $form-padding-horizontal: 10px !default;
-$form-padding-vertical: round($form-padding-horizontal * 0.6) !default;
+$form-padding-vertical: math.round($form-padding-horizontal * 0.6) !default;
 $form-background: $global-muted-background !default;
 $form-color: $global-color !default;
-$form-focus-background: darken($form-background, 5%) !default;
+$form-focus-background: color.adjust($form-background, $lightness: -5%) !default;
 $form-focus-color: $global-color !default;
 $form-disabled-background: $global-muted-background !default;
 $form-disabled-color: $global-muted-color !default;
 $form-placeholder-color: $global-muted-color !default;
 $form-small-height: $global-control-small-height !default;
 $form-small-padding-horizontal: 8px !default;
-$form-small-padding-vertical: round($form-small-padding-horizontal * 0.6) !default;
+$form-small-padding-vertical: math.round($form-small-padding-horizontal * 0.6) !default;
 $form-small-line-height: $form-small-height !default;
 $form-small-font-size: $global-small-font-size !default;
 $form-large-height: $global-control-large-height !default;
 $form-large-padding-horizontal: 12px !default;
-$form-large-padding-vertical: round($form-large-padding-horizontal * 0.6) !default;
+$form-large-padding-vertical: math.round($form-large-padding-horizontal * 0.6) !default;
 $form-large-line-height: $form-large-height !default;
 $form-large-font-size: $global-medium-font-size !default;
 $form-danger-color: $global-danger-background !default;
@@ -454,11 +458,11 @@ $form-datalist-padding-right: 20px !default;
 $form-datalist-icon-color: $global-color !default;
 $form-radio-size: 16px !default;
 $form-radio-margin-top: -4px !default;
-$form-radio-background: darken($global-muted-background, 5%) !default;
-$form-radio-focus-background: darken($form-radio-background, 5%) !default;
+$form-radio-background: color.adjust($global-muted-background, $lightness: -5%) !default;
+$form-radio-focus-background: color.adjust($form-radio-background, $lightness: -5%) !default;
 $form-radio-checked-background: $global-primary-background !default;
 $form-radio-checked-icon-color: $global-inverse-color !default;
-$form-radio-checked-focus-background: darken($global-primary-background, 10%) !default;
+$form-radio-checked-focus-background: color.adjust($global-primary-background, $lightness: -10%) !default;
 $form-radio-disabled-background: $global-muted-background !default;
 $form-radio-disabled-icon-color: $global-muted-color !default;
 $form-legend-font-size: $global-large-font-size !default;
@@ -478,16 +482,16 @@ $internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%
 $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
 $inverse-form-background: $inverse-global-muted-background !default;
 $inverse-form-color: $inverse-global-color !default;
-$inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
+$inverse-form-focus-background: color.adjust($inverse-form-background, $alpha: 0.05) !default;
 $inverse-form-focus-color: $inverse-global-color !default;
 $inverse-form-placeholder-color: $inverse-global-muted-color !default;
 $inverse-form-select-icon-color: $inverse-global-color !default;
 $inverse-form-datalist-icon-color: $inverse-global-color !default;
 $inverse-form-radio-background: $inverse-global-muted-background !default;
-$inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
+$inverse-form-radio-focus-background: color.adjust($inverse-form-radio-background, $alpha: 0.05) !default;
 $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
-$inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
+$inverse-form-radio-checked-focus-background: color.adjust($inverse-global-primary-background, $alpha: 0.1) !default;
 $inverse-form-icon-color: $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color: $inverse-global-color !default;
 $grid-gutter-horizontal: $global-gutter !default;
@@ -528,20 +532,20 @@ $heading-large-line-height: 1.1 !default;
 $heading-xlarge-line-height: 1 !default;
 $heading-2xlarge-line-height: 1 !default;
 $heading-3xlarge-line-height: 1 !default;
-$heading-divider-padding-bottom: unquote('calc(5px + 0.1em)') !default;
-$heading-divider-border-width: unquote('calc(0.2px + 0.05em)') !default;
+$heading-divider-padding-bottom: string.unquote('calc(5px + 0.1em)') !default;
+$heading-divider-border-width: string.unquote('calc(0.2px + 0.05em)') !default;
 $heading-divider-border: $global-border !default;
-$heading-bullet-top: unquote('calc(-0.1 * 1em)') !default;
-$heading-bullet-height: unquote('calc(4px + 0.7em)') !default;
-$heading-bullet-margin-right: unquote('calc(5px + 0.2em)') !default;
-$heading-bullet-border-width: unquote('calc(5px + 0.1em)') !default;
+$heading-bullet-top: string.unquote('calc(-0.1 * 1em)') !default;
+$heading-bullet-height: string.unquote('calc(4px + 0.7em)') !default;
+$heading-bullet-margin-right: string.unquote('calc(5px + 0.2em)') !default;
+$heading-bullet-border-width: string.unquote('calc(5px + 0.1em)') !default;
 $heading-bullet-border: $global-border !default;
 $heading-line-top: 50% !default;
-$heading-line-border-width: unquote('calc(0.2px + 0.05em)') !default;
+$heading-line-border-width: string.unquote('calc(0.2px + 0.05em)') !default;
 $heading-line-height: $heading-line-border-width !default;
 $heading-line-width: 2000px !default;
 $heading-line-border: $global-border !default;
-$heading-line-margin-horizontal: unquote('calc(5px + 0.3em)') !default;
+$heading-line-margin-horizontal: string.unquote('calc(5px + 0.3em)') !default;
 $heading-primary-font-size-l: 3.75rem !default;
 $heading-primary-line-height-l: 1.1 !default;
 $heading-primary-font-size-m: $heading-primary-font-size-l * 0.9 !default;
@@ -562,23 +566,23 @@ $height-large-height: 450px !default;
 $icon-image-size: 20px !default;
 $icon-link-color: $global-muted-color !default;
 $icon-link-hover-color: $global-color !default;
-$icon-link-active-color: darken($global-color, 5%) !default;
+$icon-link-active-color: color.adjust($global-color, $lightness: -5%) !default;
 $icon-button-size: 36px !default;
 $icon-button-border-radius: 500px !default;
 $icon-button-background: $global-muted-background !default;
 $icon-button-color: $global-muted-color !default;
-$icon-button-hover-background: darken($icon-button-background, 5%) !default;
+$icon-button-hover-background: color.adjust($icon-button-background, $lightness: -5%) !default;
 $icon-button-hover-color: $global-color !default;
-$icon-button-active-background: darken($icon-button-background, 10%) !default;
+$icon-button-active-background: color.adjust($icon-button-background, $lightness: -10%) !default;
 $icon-button-active-color: $global-color !default;
 $inverse-icon-link-color: $inverse-global-muted-color !default;
 $inverse-icon-link-hover-color: $inverse-global-color !default;
 $inverse-icon-link-active-color: $inverse-global-color !default;
 $inverse-icon-button-background: $inverse-global-muted-background !default;
 $inverse-icon-button-color: $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
+$inverse-icon-button-hover-background: color.adjust($inverse-icon-button-background, $alpha: 0.05) !default;
 $inverse-icon-button-hover-color: $inverse-global-color !default;
-$inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
+$inverse-icon-button-active-background: color.adjust($inverse-icon-button-background, $alpha: 0.1) !default;
 $inverse-icon-button-active-color: $inverse-global-color !default;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -602,7 +606,7 @@ $label-danger-background: $global-danger-background !default;
 $label-danger-color: $global-inverse-color !default;
 $inverse-label-background: $inverse-global-primary-background !default;
 $inverse-label-color: $inverse-global-inverse-color !default;
-$leader-fill-content: unquote('.') !default;
+$leader-fill-content: string.unquote('.') !default;
 $leader-fill-margin-left: $global-small-gutter !default;
 $lightbox-z-index: $global-z-index + 10 !default;
 $lightbox-background: #000 !default;
@@ -697,7 +701,7 @@ $modal-close-position: $global-small-margin !default;
 $modal-close-padding: 5px !default;
 $modal-close-outside-position: 0 !default;
 $modal-close-outside-translate: 100% !default;
-$modal-close-outside-color: lighten($global-inverse-color, 20%) !default;
+$modal-close-outside-color: color.adjust($global-inverse-color, $lightness: 20%) !default;
 $modal-close-outside-hover-color: $global-inverse-color !default;
 $nav-item-padding-vertical: 5px !default;
 $nav-item-padding-horizontal: 0 !default;
@@ -929,14 +933,14 @@ $search-default-width: 240px !default;
 $search-default-height: $global-control-height !default;
 $search-default-padding-horizontal: 10px !default;
 $search-default-background: $global-muted-background !default;
-$search-default-focus-background: darken($search-default-background, 2%) !default;
+$search-default-focus-background: color.adjust($search-default-background, $lightness: -2%) !default;
 $search-default-icon-width: 20px !default;
 $search-default-icon-padding: 10px !default;
 $search-navbar-width: 240px !default;
 $search-navbar-height: $global-control-height !default;
 $search-navbar-padding-horizontal: 10px !default;
 $search-navbar-background: $global-background !default;
-$search-navbar-focus-background: darken($search-navbar-background, 1%) !default;
+$search-navbar-focus-background: color.adjust($search-navbar-background, $lightness: -1%) !default;
 $search-navbar-icon-width: 20px !default;
 $search-navbar-icon-padding: 10px !default;
 $search-medium-width: 400px !default;
@@ -944,7 +948,7 @@ $search-medium-height: $global-control-large-height !default;
 $search-medium-padding-horizontal: 12px !default;
 $search-medium-background: $search-default-background !default;
 $search-medium-font-size: $global-large-font-size !default;
-$search-medium-focus-background: darken($search-medium-background, 2%) !default;
+$search-medium-focus-background: color.adjust($search-medium-background, $lightness: -2%) !default;
 $search-medium-icon-width: 24px !default;
 $search-medium-icon-padding: 12px !default;
 $search-large-width: 500px !default;
@@ -952,7 +956,7 @@ $search-large-height: 90px !default;
 $search-large-padding-horizontal: 20px !default;
 $search-large-background: $search-default-background !default;
 $search-large-font-size: $global-2xlarge-font-size !default;
-$search-large-focus-background: darken($search-large-background, 2%) !default;
+$search-large-focus-background: color.adjust($search-large-background, $lightness: -2%) !default;
 $search-large-icon-width: 40px !default;
 $search-large-icon-padding: 20px !default;
 $search-toggle-color: $global-muted-color !default;
@@ -961,13 +965,13 @@ $inverse-search-color: $inverse-global-color !default;
 $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: $inverse-global-muted-background !default;
-$inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
+$inverse-search-default-focus-background: color.adjust($inverse-search-default-background, $alpha: 0.05) !default;
 $inverse-search-navbar-background: $inverse-global-muted-background !default;
-$inverse-search-navbar-focus-background: fade-in($inverse-search-navbar-background, 0.05) !default;
+$inverse-search-navbar-focus-background: color.adjust($inverse-search-navbar-background, $alpha: 0.05) !default;
 $inverse-search-medium-background: $inverse-search-default-background !default;
-$inverse-search-medium-focus-background: fade-in($inverse-search-medium-background, 0.05) !default;
+$inverse-search-medium-focus-background: color.adjust($inverse-search-medium-background, $alpha: 0.05) !default;
 $inverse-search-large-background: $inverse-search-default-background !default;
-$inverse-search-large-focus-background: fade-in($inverse-search-large-background, 0.05) !default;
+$inverse-search-large-focus-background: color.adjust($inverse-search-large-background, $alpha: 0.05) !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;
 $inverse-search-toggle-hover-color: $inverse-global-color !default;
 $section-padding-vertical: $global-medium-margin !default;
@@ -1005,8 +1009,8 @@ $sortable-placeholder-opacity: 0 !default;
 $sortable-empty-height: 50px !default;
 $spinner-size: 30px !default;
 $spinner-stroke-width: 1 !default;
-$spinner-radius: floor((($spinner-size - $spinner-stroke-width) * 0.5)) !default;
-$spinner-circumference: round(2 * 3.141 * $spinner-radius) !default;
+$spinner-radius: math.floor((($spinner-size - $spinner-stroke-width) * 0.5)) !default;
+$spinner-circumference: math.round(2 * 3.141 * $spinner-radius) !default;
 $spinner-duration: 1.4s !default;
 $sticky-z-index: $global-z-index - 20 !default;
 $sticky-animation-duration: 0.2s !default;
@@ -1078,7 +1082,7 @@ $table-large-cell-padding-horizontal: 12px !default;
 $table-expand-min-width: 150px !default;
 $inverse-table-header-cell-color: $inverse-global-color !default;
 $inverse-table-caption-color: $inverse-global-muted-color !default;
-$inverse-table-row-active-background: fade-out($inverse-global-muted-background, 0.02) !default;
+$inverse-table-row-active-background: color.adjust($inverse-global-muted-background, $alpha: -0.02) !default;
 $inverse-table-divider-border: $inverse-global-border !default;
 $inverse-table-striped-row-background: $inverse-global-muted-background !default;
 $inverse-table-hover-row-background: $inverse-table-row-active-background !default;
@@ -1100,7 +1104,7 @@ $text-success-color: $global-success-background !default;
 $text-warning-color: $global-warning-background !default;
 $text-danger-color: $global-danger-background !default;
 $text-background-color: $global-primary-background !default;
-$text-stroke-text-stroke: unquote('calc(1.4px + 0.002em)') !default;
+$text-stroke-text-stroke: string.unquote('calc(1.4px + 0.002em)') !default;
 $inverse-text-lead-color: $inverse-global-color !default;
 $inverse-text-meta-color: $inverse-global-muted-color !default;
 $inverse-text-muted-color: $inverse-global-muted-color !default;

package/src/scss/theme/_import.scss

@@ -1,82 +0,0 @@
-// Base
-@import "variables.scss";
-@import "base.scss";
-
-// Elements
-@import "link.scss";
-@import "heading.scss";
-@import "divider.scss";
-@import "list.scss";
-@import "description-list.scss";
-@import "table.scss";
-@import "icon.scss";
-@import "form-range.scss";
-@import "form.scss";
-@import "button.scss";
-@import "progress.scss";
-
-// Layout
-@import "section.scss";
-@import "container.scss";
-@import "tile.scss";
-@import "card.scss";
-
-// Common
-@import "close.scss";
-@import "spinner.scss";
-@import "totop.scss";
-@import "marker.scss";
-@import "alert.scss";
-@import "placeholder.scss";
-@import "badge.scss";
-@import "label.scss";
-@import "overlay.scss";
-@import "article.scss";
-@import "comment.scss";
-@import "search.scss";
-
-// JavaScript
-@import "accordion.scss";
-@import "drop.scss";
-@import "dropbar.scss";
-@import "modal.scss";
-@import "slider.scss";
-@import "sticky.scss";
-@import "offcanvas.scss";
-@import "leader.scss";
-@import "notification.scss";
-@import "tooltip.scss";
-@import "sortable.scss";
-@import "countdown.scss";
-
-@import "grid.scss";
-
-// Navs
-@import "nav.scss";
-@import "navbar.scss";
-@import "subnav.scss";
-@import "breadcrumb.scss";
-@import "pagination.scss";
-@import "tab.scss";
-@import "slidenav.scss";
-@import "dotnav.scss";
-@import "thumbnav.scss";
-@import "iconnav.scss";
-
-@import "dropdown.scss";
-@import "lightbox.scss";
-
-// Utilities
-@import "animation.scss";
-@import "width.scss";
-@import "height.scss";
-@import "text.scss";
-@import "column.scss";
-@import "background.scss";
-@import "align.scss";
-@import "utility.scss";
-@import "margin.scss";
-@import "padding.scss";
-@import "position.scss";
-@import "transition.scss";
-@import "inverse.scss";

package/src/scss/theme/accordion.scss

@@ -1,55 +0,0 @@
-//
-// Component: Accordion
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-//
-// New
-//
-
-
-
-// Component
-// ========================================================================
-
-// @mixin hook-accordion(){}
-
-
-// Item
-// ========================================================================
-
-// @mixin hook-accordion-item(){}
-
-
-// Title
-// ========================================================================
-
-
-
-// @mixin hook-accordion-title-hover(){}
-
-
-// Content
-// ========================================================================
-
-// @mixin hook-accordion-content(){}
-
-
-// Miscellaneous
-// ========================================================================
-
-// @mixin hook-accordion-misc(){}
-
-// Inverse
-// ========================================================================
-
-// @mixin hook-inverse-accordion-item(){}
-
-// @mixin hook-inverse-accordion-title(){}
-// @mixin hook-inverse-accordion-title-hover(){}
-
-

package/src/scss/theme/alert.scss

@@ -1,45 +0,0 @@
-//
-// Component: Alert
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-//
-// New
-//
-
-
-
-// Component
-// ========================================================================
-
-// @mixin hook-alert(){}
-
-
-// Close
-// ========================================================================
-
-
-
-
-
-
-// Style modifiers
-// ========================================================================
-
-// @mixin hook-alert-primary(){}
-
-// @mixin hook-alert-success(){}
-
-// @mixin hook-alert-warning(){}
-
-// @mixin hook-alert-danger(){}
-
-
-// Miscellaneous
-// ========================================================================
-
-

package/src/scss/theme/align.scss

@@ -1,14 +0,0 @@
-//
-// Component: Align
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-// Miscellaneous
-// ========================================================================
-
-// @mixin hook-align-misc(){}

package/src/scss/theme/animation.scss

@@ -1,14 +0,0 @@
-//
-// Component: Animation
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-// Miscellaneous
-// ========================================================================
-
-// @mixin hook-animation-misc(){}

package/src/scss/theme/article.scss

@@ -1,49 +0,0 @@
-//
-// Component: Article
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-//
-// New
-//
-
-
-
-// Component
-// ========================================================================
-
-// @mixin hook-article(){}
-
-
-// Adjacent sibling
-// ========================================================================
-
-// @mixin hook-article-adjacent(){}
-
-
-// Title
-// ========================================================================
-
-// @mixin hook-article-title(){}
-
-
-// Meta
-// ========================================================================
-
-
-
-
-// Miscellaneous
-// ========================================================================
-
-// @mixin hook-article-misc(){}
-
-
-// Inverse
-// ========================================================================
-
-// @mixin hook-inverse-article-meta(){}