- ,
- , or
.
@@ -119,7 +125,7 @@
//
// Change the layout of list group items from vertical (default) to horizontal.
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -180,7 +186,7 @@
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
-@each $state in map-keys($theme-colors) {
+@each $state in map.keys($theme-colors) {
.list-group-item-#{$state} {
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
diff --git a/scss/_maps.import.scss b/scss/_maps.import.scss
new file mode 100644
index 0000000000..4a6ec4df9a
--- /dev/null
+++ b/scss/_maps.import.scss
@@ -0,0 +1 @@
+@forward "maps";
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 7caa41b658..51e5ebacbe 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -1,3 +1,9 @@
+@use "sass:map";
+@use "functions/color" as *;
+@use "functions/maps" as *;
+@use "variables" as *;
+@use "variables-dark" as *;
+
// Re-assigned maps
//
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
@@ -105,7 +111,7 @@ $utilities-colors: $theme-colors-rgb !default;
// scss-docs-end utilities-colors
// scss-docs-start utilities-text-colors
-$utilities-text: map-merge(
+$utilities-text: map.merge(
$utilities-colors,
(
"black": to-rgb($black),
@@ -113,7 +119,7 @@ $utilities-text: map-merge(
"body": to-rgb($body-color)
)
) !default;
-$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$prefix", "$key", "text") !default;
$utilities-text-emphasis-colors: (
"primary-emphasis": var(--#{$prefix}primary-text-emphasis),
@@ -128,7 +134,7 @@ $utilities-text-emphasis-colors: (
// scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors
-$utilities-bg: map-merge(
+$utilities-bg: map.merge(
$utilities-colors,
(
"black": to-rgb($black),
@@ -136,7 +142,7 @@ $utilities-bg: map-merge(
"body": to-rgb($body-bg)
)
) !default;
-$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$prefix", "$key", "bg") !default;
$utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
@@ -151,14 +157,14 @@ $utilities-bg-subtle: (
// scss-docs-end utilities-bg-colors
// scss-docs-start utilities-border-colors
-$utilities-border: map-merge(
+$utilities-border: map.merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white)
)
) !default;
-$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$prefix", "$key", "border") !default;
$utilities-border-subtle: (
"primary-subtle": var(--#{$prefix}primary-border-subtle),
@@ -172,7 +178,7 @@ $utilities-border-subtle: (
) !default;
// scss-docs-end utilities-border-colors
-$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
+$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$prefix", "$key", "link-underline") !default;
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
diff --git a/scss/_mixins.import.scss b/scss/_mixins.import.scss
new file mode 100644
index 0000000000..1c0b15361e
--- /dev/null
+++ b/scss/_mixins.import.scss
@@ -0,0 +1 @@
+@forward "mixins";
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 11ad461249..5a70a960b4 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -3,46 +3,46 @@
// Used in conjunction with global variables to enable certain theme features.
// LTR & RTL
-@import "mixins/ltr-rtl";
+@forward "mixins/ltr-rtl";
// Vendor
-@import "vendor/rfs";
+@forward "vendor/rfs";
// Deprecate
-@import "mixins/deprecate";
+@forward "mixins/deprecate";
// Helpers
-@import "mixins/breakpoints";
-@import "mixins/color-mode";
-@import "mixins/color-scheme";
-@import "mixins/image";
-@import "mixins/resize";
-@import "mixins/visually-hidden";
-@import "mixins/reset-text";
-@import "mixins/text-truncate";
+@forward "mixins/breakpoints";
+@forward "mixins/color-mode";
+@forward "mixins/color-scheme";
+@forward "mixins/image";
+@forward "mixins/resize";
+@forward "mixins/visually-hidden";
+@forward "mixins/reset-text";
+@forward "mixins/text-truncate";
// Utilities
-@import "mixins/utilities";
+@forward "mixins/utilities";
// Components
-@import "mixins/alert";
-@import "mixins/avatar";
-@import "mixins/backdrop";
-@import "mixins/buttons";
-@import "mixins/caret";
-@import "mixins/pagination";
-@import "mixins/lists";
-@import "mixins/forms";
-@import "mixins/table-variants";
-@import "mixins/icon";
+@forward "mixins/alert";
+@forward "mixins/avatar";
+@forward "mixins/backdrop";
+@forward "mixins/buttons";
+@forward "mixins/caret";
+@forward "mixins/pagination";
+@forward "mixins/lists";
+@forward "mixins/forms";
+@forward "mixins/table-variants";
+@forward "mixins/icon";
// Skins
-@import "mixins/border-radius";
-@import "mixins/box-shadow";
-@import "mixins/gradients";
-@import "mixins/transition";
+@forward "mixins/border-radius";
+@forward "mixins/box-shadow";
+@forward "mixins/gradients";
+@forward "mixins/transition";
// Layout
-@import "mixins/clearfix";
-@import "mixins/container";
-@import "mixins/grid";
+@forward "mixins/clearfix";
+@forward "mixins/container";
+@forward "mixins/grid";
diff --git a/scss/_modal.import.scss b/scss/_modal.import.scss
new file mode 100644
index 0000000000..81f5438b0c
--- /dev/null
+++ b/scss/_modal.import.scss
@@ -0,0 +1 @@
+@forward "modal";
diff --git a/scss/_modal.scss b/scss/_modal.scss
index b92c1def3b..3b19bc17eb 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -1,4 +1,12 @@
// stylelint-disable function-disallowed-list
+@use "sass:map";
+@use "mixins/backdrop" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/breakpoints" as *;
+@use "mixins/ltr-rtl" as *;
+@use "mixins/transition" as *;
+@use "variables" as *;
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
@@ -205,7 +213,7 @@
}
// scss-docs-start modal-fullscreen-loop
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
diff --git a/scss/_nav.import.scss b/scss/_nav.import.scss
new file mode 100644
index 0000000000..b2a611e721
--- /dev/null
+++ b/scss/_nav.import.scss
@@ -0,0 +1 @@
+@forward "nav";
diff --git a/scss/_nav.scss b/scss/_nav.scss
index ad142abfce..b2506d5e6b 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -1,3 +1,10 @@
+@use "mixins/border-radius" as *;
+@use "mixins/gradients" as *;
+@use "mixins/ltr-rtl" as *;
+@use "mixins/transition" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
// Base class
//
// Kickstart any navigation component with a set of style resets. Works with
diff --git a/scss/_navbar.import.scss b/scss/_navbar.import.scss
new file mode 100644
index 0000000000..f4cd38d2b3
--- /dev/null
+++ b/scss/_navbar.import.scss
@@ -0,0 +1 @@
+@forward "navbar";
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 3779947a33..983470bd2c 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -1,3 +1,16 @@
+@use "sass:map";
+@use "functions/escape-svg" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/breakpoints" as *;
+@use "mixins/color-mode" as *;
+@use "mixins/deprecate" as *;
+@use "mixins/gradients" as *;
+@use "mixins/ltr-rtl" as *;
+@use "mixins/transition" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
@@ -190,7 +203,7 @@
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
- @each $breakpoint in map-keys($grid-breakpoints) {
+ @each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
@@ -267,7 +280,7 @@
}
.navbar-dark,
-.navbar[data-coreui-theme="dark"] {
+.navbar[data#{$data-infix}theme="dark"] {
// scss-docs-start navbar-dark-css-vars
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
diff --git a/scss/_offcanvas.import.scss b/scss/_offcanvas.import.scss
new file mode 100644
index 0000000000..786f8ee693
--- /dev/null
+++ b/scss/_offcanvas.import.scss
@@ -0,0 +1 @@
+@forward "offcanvas";
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index edd2eb74e9..4255c6cb15 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -1,4 +1,11 @@
// stylelint-disable function-disallowed-list
+@use "sass:map";
+@use "mixins/backdrop" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/breakpoints" as *;
+@use "mixins/ltr-rtl" as *;
+@use "mixins/transition" as *;
+@use "variables" as *;
%offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars
@@ -17,7 +24,7 @@
// scss-docs-end offcanvas-css-vars
}
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
@@ -26,7 +33,7 @@
}
}
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
diff --git a/scss/_pagination.import.scss b/scss/_pagination.import.scss
new file mode 100644
index 0000000000..ef891d333f
--- /dev/null
+++ b/scss/_pagination.import.scss
@@ -0,0 +1 @@
+@forward "pagination";
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index e9ee011b0d..e4bd4d6612 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -1,3 +1,12 @@
+@use "mixins/border-radius" as *;
+@use "mixins/gradients" as *;
+@use "mixins/lists" as *;
+@use "mixins/ltr-rtl" as *;
+@use "mixins/pagination" as *;
+@use "mixins/transition" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
.pagination {
// scss-docs-start pagination-css-vars
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
diff --git a/scss/_placeholders.import.scss b/scss/_placeholders.import.scss
new file mode 100644
index 0000000000..bc405f24cf
--- /dev/null
+++ b/scss/_placeholders.import.scss
@@ -0,0 +1 @@
+@forward "placeholders";
diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss
index 6e32e1cdb9..497ec74b24 100644
--- a/scss/_placeholders.scss
+++ b/scss/_placeholders.scss
@@ -1,3 +1,5 @@
+@use "variables" as *;
+
.placeholder {
display: inline-block;
min-height: 1em;
diff --git a/scss/_popover.import.scss b/scss/_popover.import.scss
new file mode 100644
index 0000000000..071aef8732
--- /dev/null
+++ b/scss/_popover.import.scss
@@ -0,0 +1 @@
+@forward "popover";
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 7b69f62328..042fbc5a0a 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -1,3 +1,9 @@
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/reset-text" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
.popover {
// scss-docs-start popover-css-vars
--#{$prefix}popover-zindex: #{$zindex-popover};
diff --git a/scss/_progress.import.scss b/scss/_progress.import.scss
new file mode 100644
index 0000000000..c3fc3c81fc
--- /dev/null
+++ b/scss/_progress.import.scss
@@ -0,0 +1 @@
+@forward "progress";
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 776fc12b80..5c414f3024 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,3 +1,10 @@
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/gradients" as *;
+@use "mixins/transition" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
// Disable animation if transitions are disabled
// scss-docs-start progress-keyframes
diff --git a/scss/_reboot.import.scss b/scss/_reboot.import.scss
new file mode 100644
index 0000000000..bb0353d30b
--- /dev/null
+++ b/scss/_reboot.import.scss
@@ -0,0 +1 @@
+@forward "reboot";
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index bdeabf5095..fa26fc07bb 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,3 +1,8 @@
+@use "mixins/border-radius" as *;
+@use "mixins/ltr-rtl" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
diff --git a/scss/_root.import.scss b/scss/_root.import.scss
new file mode 100644
index 0000000000..bf90eb9b2d
--- /dev/null
+++ b/scss/_root.import.scss
@@ -0,0 +1 @@
+@use "root";
diff --git a/scss/_root.scss b/scss/_root.scss
index 58de374c43..7e84266644 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,5 +1,13 @@
+@use "sass:meta";
+@use "functions/color" as *;
+@use "mixins/color-mode" as *;
+@use "vendor/rfs" as *;
+@use "maps" as *;
+@use "variables" as *;
+@use "variables-dark" as *;
+
:root,
-[data-coreui-theme="light"] {
+[data#{$data-infix}theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
@@ -39,10 +47,10 @@
// Fonts
- // Note: Use `inspect` for lists so that quoted items keep the quotes.
+ // Note: Use `meta.inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
- --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
- --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+ --#{$prefix}font-sans-serif: #{meta.inspect($font-family-sans-serif)};
+ --#{$prefix}font-monospace: #{meta.inspect($font-family-monospace)};
--#{$prefix}gradient: #{$gradient};
// Root and body
@@ -50,7 +58,7 @@
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
- --#{$prefix}body-font-family: #{inspect($font-family-base)};
+ --#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
diff --git a/scss/_sidebar.import.scss b/scss/_sidebar.import.scss
new file mode 100644
index 0000000000..4473c264fb
--- /dev/null
+++ b/scss/_sidebar.import.scss
@@ -0,0 +1,3 @@
+@forward "sidebar/sidebar";
+@forward "sidebar/sidebar-nav";
+@forward "sidebar/sidebar-narrow";
diff --git a/scss/_sidebar.scss b/scss/_sidebar.scss
index 0ffff0763f..4473c264fb 100644
--- a/scss/_sidebar.scss
+++ b/scss/_sidebar.scss
@@ -1,3 +1,3 @@
-@import "sidebar/sidebar";
-@import "sidebar/sidebar-nav";
-@import "sidebar/sidebar-narrow";
+@forward "sidebar/sidebar";
+@forward "sidebar/sidebar-nav";
+@forward "sidebar/sidebar-narrow";
diff --git a/scss/_spinners.import.scss b/scss/_spinners.import.scss
new file mode 100644
index 0000000000..072336a2a8
--- /dev/null
+++ b/scss/_spinners.import.scss
@@ -0,0 +1 @@
+@forward "spinners";
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index ec8473207e..01094b7e3d 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -1,3 +1,5 @@
+@use "variables" as *;
+
//
// Rotating border
//
diff --git a/scss/_tables.import.scss b/scss/_tables.import.scss
new file mode 100644
index 0000000000..c272d95235
--- /dev/null
+++ b/scss/_tables.import.scss
@@ -0,0 +1 @@
+@forward "tables";
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 276521a387..21a7a5a01e 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -1,3 +1,8 @@
+@use "sass:map";
+@use "mixins/breakpoints" as *;
+@use "mixins/table-variants" as *;
+@use "variables" as *;
+
//
// Basic Bootstrap table
//
@@ -159,7 +164,7 @@
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include media-breakpoint-down($breakpoint) {
diff --git a/scss/_toasts.import.scss b/scss/_toasts.import.scss
new file mode 100644
index 0000000000..882c22d46a
--- /dev/null
+++ b/scss/_toasts.import.scss
@@ -0,0 +1 @@
+@forward "toasts";
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 386d0cb6f2..ad6f2a2ecc 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,3 +1,8 @@
+@use "mixins/border-radius" as *;
+@use "mixins/ltr-rtl" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
.toast {
// scss-docs-start toast-css-vars
--#{$prefix}toast-zindex: #{$zindex-toast};
diff --git a/scss/_tooltip.import.scss b/scss/_tooltip.import.scss
new file mode 100644
index 0000000000..5ee0266aa4
--- /dev/null
+++ b/scss/_tooltip.import.scss
@@ -0,0 +1 @@
+@forward "tooltip";
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 999981d383..34b2e87ea1 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -1,3 +1,9 @@
+@use "mixins/border-radius" as *;
+@use "mixins/deprecate" as *;
+@use "mixins/reset-text" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
// Base class
.tooltip {
// scss-docs-start tooltip-css-vars
diff --git a/scss/_transitions.import.scss b/scss/_transitions.import.scss
new file mode 100644
index 0000000000..c7572dfc78
--- /dev/null
+++ b/scss/_transitions.import.scss
@@ -0,0 +1 @@
+@forward "transitions";
diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index bfb26aa8ac..8a562c4880 100644
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -1,3 +1,6 @@
+@use "mixins/transition" as *;
+@use "variables" as *;
+
.fade {
@include transition($transition-fade);
diff --git a/scss/_type.import.scss b/scss/_type.import.scss
new file mode 100644
index 0000000000..c002d0d218
--- /dev/null
+++ b/scss/_type.import.scss
@@ -0,0 +1 @@
+@forward "type";
diff --git a/scss/_type.scss b/scss/_type.scss
index 61d098b048..2883582c54 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -1,3 +1,9 @@
+@use "mixins/lists" as *;
+@use "mixins/ltr-rtl" as *;
+@use "vendor/rfs" as *;
+@use "reboot" as *;
+@use "variables" as *;
+
//
// Headings
//
diff --git a/scss/_utilities.import.scss b/scss/_utilities.import.scss
new file mode 100644
index 0000000000..d94f1f77bd
--- /dev/null
+++ b/scss/_utilities.import.scss
@@ -0,0 +1 @@
+@forward "utilities";
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 9873ca7b7e..7a7e74023c 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,8 +1,13 @@
+@use "sass:map";
+@use "functions/maps" as *;
+@use "maps" as *;
+@use "variables" as *;
+
// Utilities
$utilities: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
-$utilities: map-merge(
+$utilities: map.merge(
(
// scss-docs-start utils-vertical-align
"align": (
@@ -90,7 +95,7 @@ $utilities: map-merge(
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
- values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
+ values: map-loop($theme-colors-rgb, rgba-css-var, "$prefix", "$key", "focus-ring")
),
// scss-docs-end utils-focus-ring
// scss-docs-start utils-position
@@ -180,26 +185,26 @@ $utilities: map-merge(
"border-top-color": (
property: border-top-color,
class: border-top,
- values: map-merge($theme-colors, ("white": $white)),
+ values: map.merge($theme-colors, ("white": $white)),
vars: true
),
"border-end-color": (
property: border-right-color,
class: border-end,
- values: map-merge($theme-colors, ("white": $white)),
+ values: map.merge($theme-colors, ("white": $white)),
vars: true,
rtl: true
),
"border-bottom-color": (
property: border-bottom-color,
class: border-bottom,
- values: map-merge($theme-colors, ("white": $white)),
+ values: map.merge($theme-colors, ("white": $white)),
vars: true
),
"border-start-color": (
property: border-left-color,
class: border-start,
- values: map-merge($theme-colors, ("white": $white)),
+ values: map.merge($theme-colors, ("white": $white)),
vars: true,
rtl: true
),
@@ -407,44 +412,44 @@ $utilities: map-merge(
responsive: true,
property: margin,
class: m,
- values: map-merge($spacers, (auto: auto))
+ values: map.merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
- values: map-merge($spacers, (auto: auto))
+ values: map.merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
- values: map-merge($spacers, (auto: auto))
+ values: map.merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
- values: map-merge($spacers, (auto: auto))
+ values: map.merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
- values: map-merge($spacers, (auto: auto)),
+ values: map.merge($spacers, (auto: auto)),
rtl: true
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
- values: map-merge($spacers, (auto: auto))
+ values: map.merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
- values: map-merge($spacers, (auto: auto)),
+ values: map.merge($spacers, (auto: auto)),
rtl: true
),
// Negative margin utilities
@@ -641,7 +646,7 @@ $utilities: map-merge(
local-vars: (
"text-opacity": 1
),
- values: map-merge(
+ values: map.merge(
$utilities-text-colors,
(
"muted": var(--#{$prefix}secondary-color), // deprecated
@@ -705,7 +710,7 @@ $utilities: map-merge(
local-vars: (
"link-underline-opacity": 1
),
- values: map-merge(
+ values: map.merge(
$utilities-links-underline,
(
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
@@ -734,7 +739,7 @@ $utilities: map-merge(
local-vars: (
"bg-opacity": 1
),
- values: map-merge(
+ values: map.merge(
$utilities-bg-colors,
(
"transparent": transparent,
diff --git a/scss/_variables-dark.import.scss b/scss/_variables-dark.import.scss
new file mode 100644
index 0000000000..173db3b9af
--- /dev/null
+++ b/scss/_variables-dark.import.scss
@@ -0,0 +1 @@
+@forward "variables-dark";
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 9ac5df507a..f86467413a 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -1,6 +1,10 @@
+@use "sass:color";
+@use "functions/color" as *;
+@use "variables" as *;
+
// Dark color mode variables
//
-// Custom variables for the `[data-coreui-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+// Custom variables for the `[data#{$data-infix}theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
//
// Global colors
@@ -42,12 +46,12 @@ $disabled-dark: rgba($white, .38) !default; // Deprecated in v5.0.0
// fusv-enable
// scss-docs-start theme-color-dark-variables
-$primary-dark: desaturate($primary, 10%) !default;
+$primary-dark: color.scale($primary, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$secondary-dark: $secondary !default;
-$success-dark: desaturate($success, 10%) !default;
-$info-dark: desaturate($info, 10%) !default;
-$warning-dark: desaturate($warning, 10%) !default;
-$danger-dark: desaturate($danger, 10%) !default;
+$success-dark: color.scale($success, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$info-dark: color.scale($info, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$warning-dark: color.scale($warning, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$danger-dark: color.scale($danger, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$light-dark: $light !default;
$dark-dark: $dark !default;
// scss-docs-end theme-color-dark-variables
@@ -66,12 +70,12 @@ $theme-colors-dark: (
// scss-docs-end theme-colors-dark-map
// scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark: desaturate($primary-text-emphasis, 10%) !default;
+$primary-text-emphasis-dark: color.scale($primary-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$secondary-text-emphasis-dark: $secondary-text-emphasis !default;
-$success-text-emphasis-dark: desaturate($success-text-emphasis, 10%) !default;
-$info-text-emphasis-dark: desaturate($info-text-emphasis, 10%) !default;
-$warning-text-emphasis-dark: desaturate($warning-text-emphasis, 10%) !default;
-$danger-text-emphasis-dark: desaturate($danger-text-emphasis, 10%) !default;
+$success-text-emphasis-dark: color.scale($success-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$info-text-emphasis-dark: color.scale($info-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$warning-text-emphasis-dark: color.scale($warning-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
+$danger-text-emphasis-dark: color.scale($danger-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$light-text-emphasis-dark: $gray-100-dark !default;
$dark-text-emphasis-dark: $gray-300-dark !default;
// scss-docs-end theme-text-dark-variables
@@ -84,7 +88,7 @@ $info-bg-subtle-dark: $info-bg-subtle !default;
$warning-bg-subtle-dark: $warning-bg-subtle !default;
$danger-bg-subtle-dark: $danger-bg-subtle !default;
$light-bg-subtle-dark: $gray-800-dark !default;
-$dark-bg-subtle-dark: mix($gray-800-dark, $black) !default;
+$dark-bg-subtle-dark: color.mix($gray-800-dark, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables
// scss-docs-start theme-border-subtle-dark-variables
@@ -103,7 +107,7 @@ $body-bg-dark: $gray-900-dark !default;
$body-secondary-color-dark: rgba($white, .6) !default;
$body-secondary-bg-dark: $gray-800-dark !default;
$body-tertiary-color-dark: rgba($white, .38) !default;
-$body-tertiary-bg-dark: mix($gray-800-dark, #212631, 50%) !default;
+$body-tertiary-bg-dark: color.mix($gray-800-dark, #212631, 50%) !default;
$body-emphasis-color-dark: $white !default;
$border-color-dark: $gray-800-dark !default;
$border-color-translucent-dark: rgba($white, .1) !default;
@@ -142,27 +146,4 @@ $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
$accordion-button-icon-dark: url("data:image/svg+xml,") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,") !default;
-
-
-//
-// Buttons
-//
-
-$button-variants-dark: (
- "primary": btn-color-map($primary-dark, $primary-dark),
- "secondary": btn-color-map($secondary-dark, $secondary-dark),
- "success": btn-color-map($success-dark, $success-dark),
- "danger": btn-color-map($danger-dark, $danger-dark),
- "warning": btn-color-map($warning-dark, $warning-dark),
- "info": btn-color-map($info-dark, $info-dark)
-) !default;
-
-$button-outline-ghost-variants-dark: (
- "primary": btn-outline-color-map($primary-dark),
- "secondary": btn-outline-color-map($secondary-dark),
- "success": btn-outline-color-map($success-dark),
- "danger": btn-outline-color-map($danger-dark),
- "warning": btn-outline-color-map($warning-dark),
- "info": btn-outline-color-map($info-dark)
-) !default;
// scss-docs-end sass-dark-mode-vars
diff --git a/scss/_variables.import.scss b/scss/_variables.import.scss
new file mode 100644
index 0000000000..eaab322355
--- /dev/null
+++ b/scss/_variables.import.scss
@@ -0,0 +1 @@
+@forward "variables";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 17f3b5a9fc..a7fd734add 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,3 +1,10 @@
+@use "sass:color";
+@use "sass:string";
+@use "functions/assert" as *;
+@use "functions/color" as *;
+@use "functions/color-contrast" as *;
+@use "functions/math" as *;
+
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
@@ -86,6 +93,7 @@ $min-contrast-ratio: 4.5 !default;
$color-contrast-dark: $black !default;
$color-contrast-light: $white !default;
+
// fusv-disable
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
@@ -350,7 +358,7 @@ $success-bg-subtle: #cbedd6 !default;
$info-bg-subtle: #c0e6ff !default;
$warning-bg-subtle: #feecc5 !default;
$danger-bg-subtle: #f9d4d4 !default;
-$light-bg-subtle: mix($gray-100, $white) !default;
+$light-bg-subtle: color.mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default;
// scss-docs-end theme-bg-subtle-variables
@@ -405,6 +413,10 @@ $color-mode-type: data !default; // `data` or `media-query`
$variable-prefix: cui- !default; // Deprecated in v4.2.6 for the shorter `$prefix`
$prefix: $variable-prefix !default;
+// Prefix for data attributes
+
+$data-infix: -coreui- !default;
+
// Set mobile breakpoint
$mobile-breakpoint: lg !default;
@@ -508,8 +520,8 @@ $grid-breakpoints: (
) !default;
// scss-docs-end grid-breakpoints
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+@include assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
// Grid containers
@@ -526,7 +538,7 @@ $container-max-widths: (
) !default;
// scss-docs-end container-max-widths
-@include _assert-ascending($container-max-widths, "$container-max-widths");
+@include assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
@@ -868,7 +880,7 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default;
-$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
+$btn-link-focus-shadow-rgb: to-rgb(color.mix(color-contrast($link-color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio), $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default;
@@ -885,30 +897,6 @@ $btn-active-bg-shade-amount: 20% !default;
$btn-active-bg-tint-amount: 20% !default;
$btn-active-border-shade-amount: 25% !default;
$btn-active-border-tint-amount: 10% !default;
-
-// scss-docs-start button-variants
-$button-variants: (
- "primary": btn-color-map($primary, $primary),
- "secondary": btn-color-map($secondary, $secondary),
- "success": btn-color-map($success, $success),
- "danger": btn-color-map($danger, $danger),
- "warning": btn-color-map($warning, $warning),
- "info": btn-color-map($info, $info),
- "light": btn-color-map($light, $light),
- "dark": btn-color-map($dark, $dark)
-) !default;
-
-$button-outline-ghost-variants: (
- "primary": btn-outline-color-map($primary),
- "secondary": btn-outline-color-map($secondary),
- "success": btn-outline-color-map($success),
- "danger": btn-outline-color-map($danger),
- "warning": btn-outline-color-map($warning),
- "info": btn-outline-color-map($info),
- "light": btn-outline-color-map($light),
- "dark": btn-outline-color-map($dark)
-) !default;
-// scss-docs-end button-variants
// scss-docs-end btn-variables
@@ -1837,7 +1825,7 @@ $breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
-$breadcrumb-divider: quote("/") !default;
+$breadcrumb-divider: string.quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
// scss-docs-end breadcrumb-variables
@@ -2062,5 +2050,3 @@ $kbd-bg: var(--#{$prefix}body-color) !default;
$nested-kbd-font-weight: null !default; // Deprecated in v4.2.6, removing in v6
$pre-color: null !default;
-
-@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5
diff --git a/scss/coreui-grid.rtl.scss b/scss/coreui-grid.rtl.scss
index d926f6abf3..b665e31999 100644
--- a/scss/coreui-grid.rtl.scss
+++ b/scss/coreui-grid.rtl.scss
@@ -1,4 +1,4 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "coreui-grid";
+@use "coreui-grid" with (
+ $enable-ltr: false,
+ $enable-rtl: true
+);
diff --git a/scss/coreui-grid.scss b/scss/coreui-grid.scss
index 6a094e3cee..40d3d75689 100644
--- a/scss/coreui-grid.scss
+++ b/scss/coreui-grid.scss
@@ -1,25 +1,16 @@
-@import "mixins/banner";
-@include bsBanner(Grid);
-
-$include-column-box-sizing: true !default;
-
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-
-@import "mixins/ltr-rtl";
-@import "mixins/breakpoints";
-@import "mixins/container";
-@import "mixins/grid";
-@import "mixins/utilities";
-
-@import "vendor/rfs";
+@forward "banner" with (
+ $file: "Grid"
+);
-@import "containers";
-@import "grid";
+@forward "variables";
+@forward "variables-dark";
+@forward "containers";
+@forward "grid" with (
+ $include-column-box-sizing: true !default,
+);
+@use "utilities" as *;
+@use "functions/maps" as *;
-@import "utilities";
// Only use the utilities we need
// stylelint-disable-next-line scss/dollar-variable-default
$utilities: map-get-multiple(
@@ -60,4 +51,4 @@ $utilities: map-get-multiple(
)
);
-@import "utilities/api";
+@use "utilities/api";
diff --git a/scss/coreui-reboot.rtl.scss b/scss/coreui-reboot.rtl.scss
index d0223900cd..fc65bed51e 100644
--- a/scss/coreui-reboot.rtl.scss
+++ b/scss/coreui-reboot.rtl.scss
@@ -1,4 +1,4 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "coreui-reboot";
+@use "coreui-reboot" with (
+ $enable-ltr: false,
+ $enable-rtl: true
+);
diff --git a/scss/coreui-reboot.scss b/scss/coreui-reboot.scss
index 5b69b9552d..8d79f13fa0 100644
--- a/scss/coreui-reboot.scss
+++ b/scss/coreui-reboot.scss
@@ -1,10 +1,9 @@
-@import "mixins/banner";
-@include bsBanner(Reboot);
+@use "banner" with (
+ $file: "Reboot"
+);
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "root";
-@import "reboot";
+@forward "variables";
+@forward "variables-dark";
+
+@forward "root";
+@forward "reboot";
diff --git a/scss/coreui-utilities.rtl.scss b/scss/coreui-utilities.rtl.scss
index ea73ae88a4..9b5f86bbd8 100644
--- a/scss/coreui-utilities.rtl.scss
+++ b/scss/coreui-utilities.rtl.scss
@@ -1,4 +1,4 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "coreui-utilities";
+@use "coreui-utilities" with (
+ $enable-ltr: false,
+ $enable-rtl: true
+);
diff --git a/scss/coreui-utilities.scss b/scss/coreui-utilities.scss
index 99c4a3595c..9fc8379a61 100644
--- a/scss/coreui-utilities.scss
+++ b/scss/coreui-utilities.scss
@@ -1,19 +1,17 @@
-@import "mixins/banner";
-@include bsBanner(Utilities);
+@use "banner" with (
+ $file: "Utilities"
+);
// Configuration
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "utilities";
+@forward "variables";
+@forward "variables-dark";
// Layout & components
-@import "root";
+@forward "root";
// Helpers
-@import "helpers";
+@forward "helpers";
-// Utilities
-@import "utilities/api";
+// // Utilities
+@forward "utilities/api";
+// // scss-docs-end import-stack
diff --git a/scss/coreui.rtl.scss b/scss/coreui.rtl.scss
index 0f2c7cab0b..9b247df149 100644
--- a/scss/coreui.rtl.scss
+++ b/scss/coreui.rtl.scss
@@ -1,4 +1,4 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "coreui";
+@use "coreui" with (
+ $enable-ltr: false,
+ $enable-rtl: true
+);
diff --git a/scss/coreui.scss b/scss/coreui.scss
index 0ae5f47d98..e3be8086f9 100644
--- a/scss/coreui.scss
+++ b/scss/coreui.scss
@@ -1,58 +1,53 @@
-@import "mixins/banner";
-@include bsBanner("");
+@use "banner";
// scss-docs-start import-stack
// Configuration
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "utilities";
+@forward "variables";
+@forward "variables-dark";
-// Layout & components
-@import "root";
-@import "reboot";
-@import "type";
-@import "images";
-@import "containers";
-@import "grid";
-@import "tables";
-@import "forms";
-@import "buttons";
-@import "transitions";
-@import "dropdown";
-@import "button-group";
-@import "nav";
-@import "navbar";
-@import "card";
-@import "accordion";
-@import "breadcrumb";
-@import "pagination";
-@import "badge";
-@import "alert";
-@import "progress";
-@import "list-group";
-@import "close";
-@import "toasts";
-@import "modal";
-@import "tooltip";
-@import "popover";
-@import "carousel";
-@import "spinners";
-@import "offcanvas";
-@import "placeholders";
+// // Layout & components
+@forward "root";
+@forward "reboot";
+@forward "type";
+@forward "images";
+@forward "containers";
+@forward "grid";
+@forward "tables";
+@forward "forms";
+@forward "buttons";
+@forward "transitions";
+@forward "dropdown";
+@forward "button-group";
+@forward "nav";
+@forward "navbar";
+@forward "card";
+@forward "accordion";
+@forward "breadcrumb";
+@forward "pagination";
+@forward "badge";
+@forward "alert";
+@forward "progress";
+@forward "list-group";
+@forward "close";
+@forward "toasts";
+@forward "modal";
+@forward "tooltip";
+@forward "popover";
+@forward "carousel";
+@forward "spinners";
+@forward "offcanvas";
+@forward "placeholders";
-@import "avatar";
-@import "callout";
-@import "footer";
-@import "header";
-@import "icon";
-@import "sidebar";
+@forward "avatar";
+@forward "callout";
+@forward "footer";
+@forward "header";
+@forward "icon";
+@forward "sidebar";
// Helpers
-@import "helpers";
+@forward "helpers";
-// Utilities
-@import "utilities/api";
-// scss-docs-end import-stack
+// // Utilities
+@forward "utilities/api";
+// // scss-docs-end import-stack
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 557c8c9e45..70952c47b1 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,3 +1,8 @@
+@use "../mixins/border-radius" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+
.form-floating {
position: relative;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index e47efdbaac..a5068186b0 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -1,3 +1,12 @@
+@use "sass:map";
+@use "../functions/escape-svg" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/color-mode" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+@use "../variables-dark" as *;
+
//
// Check/radio
//
@@ -161,8 +170,8 @@
}
@each $size, $map in $form-switch-widths {
- $width: map-get($map, "width");
- $height: map-get($map, "height");
+ $width: map.get($map, "width");
+ $height: map.get($map, "height");
.form-switch-#{$size} {
min-height: $height;
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 6b8e65f70a..731f05fc41 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -1,3 +1,11 @@
+@use "sass:math";
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/gradients" as *;
+@use "../mixins/transition" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
//
// General form controls (plus a few specific high-level interventions)
//
@@ -56,7 +64,7 @@
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
// Multiply line-height by 1em if it has no unit
- height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+ height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 4732213e97..d267768230 100644
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -1,3 +1,10 @@
+@use "../functions/math" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/gradients" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+
// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index fee09a4bbb..c6b1b0a7ea 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -1,3 +1,13 @@
+@use "../functions/escape-svg" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/color-mode" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../mixins/transition" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+@use "../variables-dark" as *;
+
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
@@ -26,7 +36,7 @@
@include transition($form-select-transition);
&:focus {
- border-color: var($form-select-focus-border-color);
+ border-color: $form-select-focus-border-color;
outline: 0;
@if $enable-shadows {
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss
index f080d1a234..2d0423b60f 100644
--- a/scss/forms/_form-text.scss
+++ b/scss/forms/_form-text.scss
@@ -1,3 +1,6 @@
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
//
// Form text
//
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 698da62bf9..2f51930245 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -1,3 +1,10 @@
+@use "sass:map";
+@use "sass:string";
+@use "../mixins/border-radius" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
//
// Base styles
//
@@ -116,8 +123,8 @@
}
$validation-messages: "";
- @each $state in map-keys($form-validation-states) {
- $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+ @each $state in map.keys($form-validation-states) {
+ $validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index 39ecafcd2f..314717b7c4 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -1,3 +1,7 @@
+@use "../functions/math" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
//
// Labels
//
diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index c48123a716..47a3edb68b 100644
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -1,3 +1,6 @@
+@use "../mixins/forms" as *;
+@use "../variables" as *;
+
// Form validation
//
// Provide feedback to users when form field values are valid or invalid. Works
diff --git a/scss/functions/_assert.scss b/scss/functions/_assert.scss
new file mode 100644
index 0000000000..95ea7f5ba0
--- /dev/null
+++ b/scss/functions/_assert.scss
@@ -0,0 +1,33 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin assert-ascending($map, $map-name) {
+ $prev-key: null;
+ $prev-num: null;
+ @each $key, $num in $map {
+ @if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
+ // Do nothing
+ } @else if not math.compatible($prev-num, $num) {
+ @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ } @else if $prev-num >= $num {
+ @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+ }
+ $prev-key: $key;
+ $prev-num: $num;
+ }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+ @if list.length($map) > 0 {
+ $values: map.values($map);
+ $first-value: list.nth($values, 1);
+ @if $first-value != 0 {
+ @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+ }
+ }
+}
diff --git a/scss/functions/_color-contrast.scss b/scss/functions/_color-contrast.scss
new file mode 100644
index 0000000000..89c4a5f147
--- /dev/null
+++ b/scss/functions/_color-contrast.scss
@@ -0,0 +1,59 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+@use "math" as *;
+
+// Color contrast
+// See https://github.com/twbs/bootstrap/pull/30168
+
+
+@function color-contrast($background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) {
+ $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+ $max-ratio: 0;
+ $max-ratio-color: null;
+
+ @each $color in $foregrounds {
+ $contrast-ratio: contrast-ratio($background, $color);
+ @if $contrast-ratio > $min-contrast-ratio {
+ @return $color;
+ } @else if $contrast-ratio > $max-ratio {
+ $max-ratio: $contrast-ratio;
+ $max-ratio-color: $color;
+ }
+ }
+
+ @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+ @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground) {
+ $l1: luminance($background);
+ $l2: luminance(opaque($background, $foreground));
+
+ @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.2 relative luminance
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+@function luminance($color) {
+ $rgb: (
+ "r": color.channel($color, "red", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
+ "g": color.channel($color, "green", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
+ "b": color.channel($color, "blue", $space: rgb) // stylelint-disable-line scss/at-function-named-arguments
+ );
+
+ @each $name, $value in $rgb {
+ $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), math.pow(divide((divide(math.round($value) + 1, 255) + .055), 1.055), 2.4));
+ $rgb: map.merge($rgb, ($name: $value));
+ }
+
+ @return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+ @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+}
diff --git a/scss/functions/_color.scss b/scss/functions/_color.scss
new file mode 100644
index 0000000000..49abc3a0cc
--- /dev/null
+++ b/scss/functions/_color.scss
@@ -0,0 +1,32 @@
+@use "sass:color";
+
+// scss-docs-start color-functions
+// Tint a color: mix a color with white
+@function tint-color($color, $weight) {
+ @return color.mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+ @return color.mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it
+@function shift-color($color, $weight) {
+ @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+// scss-docs-end color-functions
+
+@function to-rgb($value) {
+ @return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
+}
+
+@function rgba-css-var($prefix, $identifier, $target) {
+ @if $identifier == "body" and $target == "bg" {
+ @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+ } @if $identifier == "body" and $target == "text" {
+ @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+ } @else {
+ @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+ }
+}
diff --git a/scss/functions/_escape-svg.scss b/scss/functions/_escape-svg.scss
new file mode 100644
index 0000000000..020e389ac2
--- /dev/null
+++ b/scss/functions/_escape-svg.scss
@@ -0,0 +1,22 @@
+@use "sass:string";
+@use "str-replace" as *;
+@use "../variables" as *;
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+ @if string.index($string, "data:image/svg+xml") {
+ @each $char, $encoded in $escaped-characters {
+ // Do not escape the url brackets
+ @if string.index($string, "url(") == 1 {
+ $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
+ } @else {
+ $string: str-replace($string, $char, $encoded);
+ }
+ }
+ }
+
+ @return $string;
+}
diff --git a/scss/functions/_maps.scss b/scss/functions/_maps.scss
new file mode 100644
index 0000000000..9fcd561143
--- /dev/null
+++ b/scss/functions/_maps.scss
@@ -0,0 +1,55 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "color" as *;
+@use "../variables" as *;
+
+// stylelint-disable scss/dollar-variable-pattern
+@function map-loop($map, $func, $args...) {
+ $_map: ();
+
+ @each $key, $value in $map {
+ // allow to pass the $key and $value of the map as an function argument
+ $_args: ();
+ @each $arg in $args {
+ $_args: list.append($_args, if($arg == "$prefix", $prefix, if($arg == "$key", $key, if($arg == "$value", $value, $arg))));
+ }
+
+ $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
+ }
+ @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+// Internal Bootstrap function to turn maps into its negative variant.
+// It prefixes the keys with `n` and makes the value negative.
+@function negativify-map($map) {
+ $result: ();
+ @each $key, $value in $map {
+ @if $key != 0 {
+ $result: map.merge($result, ("n" + $key: (-$value)));
+ }
+ }
+ @return $result;
+}
+
+// Get multiple keys from a sass map
+@function map-get-multiple($map, $values) {
+ $result: ();
+ @each $key, $value in $map {
+ @if (list.index($values, $key) != null) {
+ $result: map.merge($result, ($key: $value));
+ }
+ }
+ @return $result;
+}
+
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+ $merged-maps: ();
+
+ @each $map in $maps {
+ $merged-maps: map.merge($merged-maps, $map);
+ }
+ @return $merged-maps;
+}
diff --git a/scss/functions/_math.scss b/scss/functions/_math.scss
new file mode 100644
index 0000000000..3dab817f9b
--- /dev/null
+++ b/scss/functions/_math.scss
@@ -0,0 +1,87 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+ @if $value1 == null {
+ @return $value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
+ @return $value1 + $value2;
+ }
+
+ @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+ @if $value1 == null and $value2 == null {
+ @return null;
+ }
+
+ @if $value1 == null {
+ @return -$value2;
+ }
+
+ @if $value2 == null {
+ @return $value1;
+ }
+
+ @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
+ @return $value1 - $value2;
+ }
+
+ @if meta.type-of($value2) != number {
+ $value2: string.unquote("(") + $value2 + string.unquote(")");
+ }
+
+ @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(" - ") + $value2);
+}
+
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: math.unit($dividend);
+ $divisor-unit: math.unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
+ $result: $result * map.get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
diff --git a/scss/functions/_str-replace.scss b/scss/functions/_str-replace.scss
new file mode 100644
index 0000000000..f4e36b32e7
--- /dev/null
+++ b/scss/functions/_str-replace.scss
@@ -0,0 +1,18 @@
+@use "sass:string";
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Kitty Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+ $index: string.index($string, $search);
+
+ @if $index {
+ @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+ }
+
+ @return $string;
+}
diff --git a/scss/helpers/_clearfix.scss b/scss/helpers/_clearfix.scss
index e92522a94d..e2d9a81f32 100644
--- a/scss/helpers/_clearfix.scss
+++ b/scss/helpers/_clearfix.scss
@@ -1,3 +1,5 @@
+@use "../mixins/clearfix" as *;
+
.clearfix {
@include clearfix();
}
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index 35826854ed..7cc6c58c09 100644
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -1,8 +1,13 @@
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@use "../functions/color" as *;
+@use "../functions/color-contrast" as *;
+@use "../mixins/color-mode" as *;
+@use "../variables" as *;
+@use "../variables-dark" as *;
+
@each $color, $value in $theme-colors {
.text-bg-#{$color} {
- color: color-contrast($value) if($enable-important-utilities, !important, null);
- background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+ color: color-contrast($value, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) if($enable-important-utilities, !important, null);
+ background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
}
}
@@ -11,8 +16,8 @@
@each $color, $value in $theme-colors-dark {
$color-rgb: to-rgb($value);
.text-bg-#{$color} {
- color: color-contrast($value) if($enable-important-utilities, !important, null);
- background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+ color: color-contrast($value, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) if($enable-important-utilities, !important, null);
+ background-color: rgba($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
}
}
}
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 5f86857800..477e55aab1 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -1,15 +1,18 @@
-// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@use "../functions/color" as *;
+@use "../functions/color-contrast" as *;
+@use "../variables" as *;
+
@each $color, $value in $theme-colors {
.link-#{$color} {
- color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+ text-decoration-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
- $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
- color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ $hover-color: if(color-contrast($value, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+ color: rgba(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+ text-decoration-color: rgba(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
}
}
}
@@ -17,14 +20,14 @@
// One-off special link helper as a bridge until v6
.link-body-emphasis {
- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+ color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+ text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
- color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
- text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+ color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+ text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
}
}
}
diff --git a/scss/helpers/_focus-ring.scss b/scss/helpers/_focus-ring.scss
index 3259bd2628..7bdee2dbc4 100644
--- a/scss/helpers/_focus-ring.scss
+++ b/scss/helpers/_focus-ring.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
.focus-ring:focus {
outline: 0;
// By default, there is no `--cui-focus-ring-x`, `--cui-focus-ring-y`, or `--cui-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss
index 3f8bcb335c..53cb8e9a15 100644
--- a/scss/helpers/_icon-link.scss
+++ b/scss/helpers/_icon-link.scss
@@ -1,3 +1,6 @@
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+
.icon-link {
display: inline-flex;
gap: $icon-link-gap;
diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss
index 59103d9436..5bb0689352 100644
--- a/scss/helpers/_position.scss
+++ b/scss/helpers/_position.scss
@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "../mixins/breakpoints" as *;
+@use "../variables" as *;
+
// Shorthand
.fixed-top {
@@ -17,7 +21,7 @@
}
// Responsive sticky top and bottom
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss
index 298036da9a..6b736012b7 100644
--- a/scss/helpers/_ratio.scss
+++ b/scss/helpers/_ratio.scss
@@ -1,3 +1,6 @@
+@use "../mixins/ltr-rtl" as *;
+@use "../variables" as *;
+
// Credit: Nicolas Gallagher and SUIT CSS.
.ratio {
diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss
index 71a1c755af..ec283094d0 100644
--- a/scss/helpers/_stretched-link.scss
+++ b/scss/helpers/_stretched-link.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
//
// Stretched link
//
diff --git a/scss/helpers/_text-truncation.scss b/scss/helpers/_text-truncation.scss
index 6421dac9a8..191dc4d227 100644
--- a/scss/helpers/_text-truncation.scss
+++ b/scss/helpers/_text-truncation.scss
@@ -1,3 +1,5 @@
+@use "../mixins/text-truncate" as *;
+
//
// Text truncation
//
diff --git a/scss/helpers/_visually-hidden.scss b/scss/helpers/_visually-hidden.scss
index 4760ff03d1..ad6bf08845 100644
--- a/scss/helpers/_visually-hidden.scss
+++ b/scss/helpers/_visually-hidden.scss
@@ -1,3 +1,5 @@
+@use "../mixins/visually-hidden" as *;
+
//
// Visually hidden
//
diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
index 517e4327bf..0b764dde65 100644
--- a/scss/helpers/_vr.scss
+++ b/scss/helpers/_vr.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
.vr {
display: inline-block;
align-self: stretch;
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index b5691356e2..a801fea2d3 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../mixins/deprecate" as *;
+
@include deprecate("`alert-variant()`", "v4.3.0", "v6.0.0");
// scss-docs-start alert-variant-mixin
diff --git a/scss/mixins/_avatar.scss b/scss/mixins/_avatar.scss
index 78bc8d927b..1daa889bfe 100644
--- a/scss/mixins/_avatar.scss
+++ b/scss/mixins/_avatar.scss
@@ -1,3 +1,6 @@
+@use "../variables" as *;
+@use "../mixins/deprecate" as *;
+
@include deprecate("`avatar()`", "v5.1.0", "v6.0.0");
@mixin avatar($width) {
diff --git a/scss/mixins/_backdrop.scss b/scss/mixins/_backdrop.scss
index 9705ae9eea..07bd7b97ca 100644
--- a/scss/mixins/_backdrop.scss
+++ b/scss/mixins/_backdrop.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
// Shared between modals and offcanvases
@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
position: fixed;
diff --git a/scss/mixins/_banner.scss b/scss/mixins/_banner.scss
deleted file mode 100644
index b4963c4e43..0000000000
--- a/scss/mixins/_banner.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@mixin bsBanner($file) {
- /*!
- * CoreUI #{$file} v5.2.0 (https://coreui.io)
- * Copyright (c) 2024 creativeLabs Łukasz Holeczek
- * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
- */
-}
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 6fb425f1f4..88e0a020f4 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -1,14 +1,19 @@
// stylelint-disable property-disallowed-list
+@use "sass:list";
+@use "sass:meta";
+@use "ltr-rtl" as *;
+@use "../variables" as *;
+
// Single side border-radius
// Helper function to replace negative values with 0
@function valid-radius($radius) {
$return: ();
@each $value in $radius {
- @if type-of($value) == number {
- $return: append($return, max($value, 0));
+ @if meta.type-of($value) == number {
+ $return: list.append($return, max($value, 0));
} @else {
- $return: append($return, $value);
+ $return: list.append($return, $value);
}
}
@return $return;
diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss
index 4172541f3f..842c7b136d 100644
--- a/scss/mixins/_box-shadow.scss
+++ b/scss/mixins/_box-shadow.scss
@@ -1,12 +1,15 @@
+@use "sass:list";
+@use "../variables" as *;
+
@mixin box-shadow($shadow...) {
@if $enable-shadows {
$result: ();
@each $value in $shadow {
@if $value != null {
- $result: append($result, $value, "comma");
+ $result: list.append($result, $value, "comma");
}
- @if $value == none and length($shadow) > 1 {
+ @if $value == none and list.length($shadow) > 1 {
@warn "The keyword 'none' must be used as a single argument.";
}
}
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 286be893d7..97e480b37c 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -1,3 +1,7 @@
+@use "sass:list";
+@use "sass:map";
+@use "../variables" as *;
+
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -14,12 +18,12 @@
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
- $n: index($breakpoint-names, $name);
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+ $n: list.index($breakpoint-names, $name);
@if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
}
- @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+ @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -27,7 +31,7 @@
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
- $min: map-get($breakpoints, $name);
+ $min: map.get($breakpoints, $name);
@return if($min != 0, $min, null);
}
@@ -41,7 +45,7 @@
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
- $max: map-get($breakpoints, $name);
+ $max: map.get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null);
}
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 212dc9b63e..875a27bfc0 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -1,90 +1,93 @@
+@use "sass:color";
+@use "../functions/color" as *;
+@use "../functions/color-contrast" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
// scss-docs-start btn-variant-mixin
-@mixin button-variant($variant) {
- $background: map-get($variant, "bg");
- $border-color: map-get($variant, "border-color");
- $color: map-get($variant, "color");
- $hover-background: map-get($variant, "hover-bg");
- $hover-border-color: map-get($variant, "hover-border-color");
- $hover-color: map-get($variant, "hover-color");
- $active-background: map-get($variant, "active-bg");
- $active-border-color: map-get($variant, "active-border-color");
- $active-color: map-get($variant, "active-color");
- $disabled-background: map-get($variant, "disabled-bg");
- $disabled-border-color: map-get($variant, "disabled-border-color");
- $disabled-color: map-get($variant, "disabled-color");
- $shadow: map-get($variant, "shadow");
-
+@mixin button-variant(
+ $background,
+ $border,
+ $color: color-contrast($background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
+ $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+ $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+ $hover-color: color-contrast($hover-background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
+ $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+ $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+ $active-color: color-contrast($active-background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
+ $disabled-background: $background,
+ $disabled-border: $border,
+ $disabled-color: color-contrast($disabled-background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)
+) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background};
- --#{$prefix}btn-border-color: #{$border-color};
+ --#{$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background};
- --#{$prefix}btn-hover-border-color: #{$hover-border-color};
- --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border-color, 15%))};
+ --#{$prefix}btn-hover-border-color: #{$hover-border};
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
- --#{$prefix}btn-active-border-color: #{$active-border-color};
+ --#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background};
- --#{$prefix}btn-disabled-border-color: #{$disabled-border-color};
+ --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
// scss-docs-end btn-variant-mixin
// scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant($variant) {
- $color: map-get($variant, "color");
- $hover-background: map-get($variant, "hover-bg");
- $hover-border-color: map-get($variant, "hover-border-color");
- $hover-color: map-get($variant, "hover-color");
- $active-background: map-get($variant, "active-bg");
- $active-border-color: map-get($variant, "active-border-color");
- $active-color: map-get($variant, "active-color");
- $disabled-color: map-get($variant, "disabled-color");
- $shadow: map-get($variant, "shadow");
-
+@mixin button-outline-variant(
+ $color,
+ $color-hover: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
+ $active-background: $color,
+ $active-border: $color,
+ $active-color: color-contrast($active-background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)
+) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color};
- --#{$prefix}btn-hover-color: #{$hover-color};
+ --#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background};
- --#{$prefix}btn-hover-border-color: #{$active-border-color};
+ --#{$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
- --#{$prefix}btn-active-border-color: #{$active-border-color};
+ --#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$color};
--#{$prefix}btn-disabled-bg: transparent;
+ --#{$prefix}btn-disabled-border-color: #{$color};
--#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-ghost-variant-mixin
-@mixin button-ghost-variant($variant) {
- $color: map-get($variant, "color");
- $hover-background: map-get($variant, "hover-bg");
- $hover-border-color: map-get($variant, "hover-border-color");
- $hover-color: map-get($variant, "hover-color");
- $active-background: map-get($variant, "active-bg");
- $active-border-color: map-get($variant, "active-border-color");
- $active-color: map-get($variant, "active-color");
- $disabled-color: map-get($variant, "disabled-color");
- $shadow: map-get($variant, "shadow");
-
+@mixin button-ghost-variant(
+ $color,
+ $color-hover: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
+ $hover-background: $color,
+ $hover-border: $color,
+ $hover-color: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
+ $active-background: $color,
+ $active-border: $color,
+ $active-color: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)
+) {
--#{$prefix}btn-color: #{$color};
+ --#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-bg: #{$hover-background};
- --#{$prefix}btn-hover-border-color: #{$hover-border-color};
- --#{$prefix}btn-hover-color: #{$hover-color};
+ --#{$prefix}btn-hover-border-color: #{$hover-border};
+ --#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-active-bg: #{$active-background};
- --#{$prefix}btn-active-border-color: #{$active-border-color};
+ --#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-color: #{$active-color};
- --#{$prefix}btn-disabled-color: #{$disabled-color};
- --#{$prefix}btn-shadow: #{$shadow};
+ --#{$prefix}btn-disabled-color: #{$color};
+ --#{$prefix}btn-disabled-bg: transparent;
+ --#{$prefix}btn-disabled-border-color: transparent;
}
// scss-docs-end btn-ghost-variant-mixin
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index b99ddcb458..eea04a102f 100644
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -1,3 +1,6 @@
+@use "ltr-rtl" as *;
+@use "../variables" as *;
+
// scss-docs-start caret-mixins
@mixin caret-down($width: $caret-width) {
border-top: $width solid;
diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss
index 440c0faba9..2b5d4b5399 100644
--- a/scss/mixins/_color-mode.scss
+++ b/scss/mixins/_color-mode.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
// scss-docs-start color-mode-mixin
@mixin color-mode($mode: light, $root: false) {
@if $color-mode-type == "media-query" {
@@ -13,7 +15,7 @@
}
}
} @else {
- [data-coreui-theme="#{$mode}"] {
+ [data#{$data-infix}theme="#{$mode}"] {
@content;
}
}
diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss
index b9f33519e2..5986f2d980 100644
--- a/scss/mixins/_container.scss
+++ b/scss/mixins/_container.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
diff --git a/scss/mixins/_deprecate.scss b/scss/mixins/_deprecate.scss
index df070bc596..9807ffffa6 100644
--- a/scss/mixins/_deprecate.scss
+++ b/scss/mixins/_deprecate.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
// Deprecate mixin
//
// This mixin can be used to deprecate mixins or functions.
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 4554af35a5..33928c92ae 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -1,3 +1,10 @@
+@use "../functions/escape-svg" as *;
+@use "../functions/math" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
@@ -19,7 +26,7 @@
$state,
$color,
$icon,
- $tooltip-color: color-contrast($color),
+ $tooltip-color: color-contrast($color, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
$border-color: $color
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index 608e18df2e..8ac4e7afad 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
// Gradients
// scss-docs-start gradient-bg-mixin
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 639528b236..7717ade152 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -1,3 +1,12 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "breakpoints" as *;
+@use "ltr-rtl" as *;
+@use "../functions/math" as *;
+@use "../maps" as *;
+@use "../variables" as *;
+
// Grid system
//
// Generate semantic grid columns with these mixins.
@@ -13,9 +22,9 @@
margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
}
-@mixin make-col-ready() {
+@mixin make-col-ready($include-column-box-sizing: false) {
// Add box sizing if only the grid is loaded
- box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
+ box-sizing: if(meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we set the width
// later on to override this initial width.
@@ -30,7 +39,7 @@
@mixin make-col($size: false, $columns: $grid-columns) {
@if $size {
flex: 0 0 auto;
- width: percentage(divide($size, $columns));
+ width: math.percentage(divide($size, $columns));
} @else {
flex: 1 1 0;
@@ -45,7 +54,7 @@
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: divide($size, $columns);
- @include ltr-rtl("margin-left", if($num == 0, 0, percentage($num)));
+ @include ltr-rtl("margin-left", if($num == 0, 0, math.percentage($num)));
}
// Row columns
@@ -56,7 +65,7 @@
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
- width: percentage(divide(1, $count));
+ width: math.percentage(divide(1, $count));
}
}
@@ -66,7 +75,7 @@
// any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
- @each $breakpoint in map-keys($breakpoints) {
+ @each $breakpoint in map.keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
@@ -127,7 +136,7 @@
}
@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
- @each $breakpoint in map-keys($breakpoints) {
+ @each $breakpoint in map.keys($breakpoints) {
$infix: breakpoint-infix($breakpoint, $breakpoints);
@include media-breakpoint-up($breakpoint, $breakpoints) {
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index 03c207c3d7..9859ab5561 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -1,12 +1,15 @@
+@use "sass:map";
+@use "../mixins/deprecate" as *;
+
@include deprecate("`list-group-item-variant()`", "v4.3.0", "v6.0.0");
// List Groups
// scss-docs-start list-group-mixin
@mixin list-group-item-variant($state, $variant) {
- $background: map-get($variant, "bg");
- $background-hover: map-get($variant, "bg-hover");
- $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), $alert-color-scale, $state);
+ $background: map.get($variant, "bg");
+ $background-hover: map.get($variant, "bg-hover");
+ $color: contrast-ratio-correction(map.get($variant, "color"), map.get($variant, "bg"), $alert-color-scale, $state);
--#{$prefix}list-group-color: #{$color};
--#{$prefix}list-group-bg: #{$background};
diff --git a/scss/mixins/_lists.scss b/scss/mixins/_lists.scss
index 5b82d80cc7..48687c6433 100644
--- a/scss/mixins/_lists.scss
+++ b/scss/mixins/_lists.scss
@@ -1,3 +1,5 @@
+@use "ltr-rtl" as *;
+
// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
diff --git a/scss/mixins/_ltr-rtl.scss b/scss/mixins/_ltr-rtl.scss
index f85a54a719..b74391d59a 100644
--- a/scss/mixins/_ltr-rtl.scss
+++ b/scss/mixins/_ltr-rtl.scss
@@ -1,3 +1,7 @@
+@use "sass:string";
+@use "../functions/str-replace" as *;
+@use "../variables" as *;
+
@mixin ltr {
@if $enable-ltr {
html:not([dir="rtl"]) & {
@@ -16,14 +20,14 @@
@function reflect($element) {
$string: #{$element};
- @if str-index($string, "left") {
+ @if string.index($string, "left") {
@return str-replace($string, "left", "right");
}
- @if str-index($string, "right") {
+ @if string.index($string, "right") {
@return str-replace($string, "right", "left");
}
- @return unquote($string);
+ @return string.unquote($string);
}
@mixin ltr-rtl($property, $value, $property-rtl: null, $value-rtl: null, $important: null) {
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 0d657964fb..31a67f9139 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -1,3 +1,6 @@
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
// Pagination
// scss-docs-start pagination-mixin
diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index b48dd53279..7ca5437cb7 100644
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -1,3 +1,6 @@
+@use "ltr-rtl" as *;
+@use "../variables" as *;
+
@mixin reset-text {
font-family: $font-family-base;
// We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
index 5fe1b9b20d..9a32e93cab 100644
--- a/scss/mixins/_table-variants.scss
+++ b/scss/mixins/_table-variants.scss
@@ -1,21 +1,26 @@
+@use "sass:color";
+@use "sass:math";
+@use "../functions/color-contrast" as *;
+@use "../variables" as *;
+
// scss-docs-start table-variant
@mixin table-variant($state, $background) {
.table-#{$state} {
- $color: color-contrast(opaque($body-bg, $background));
- $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
- $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
- $active-bg: mix($color, $background, percentage($table-active-bg-factor));
- $table-border-color: mix($color, $background, percentage($table-border-factor));
+ $color: color-contrast(opaque($body-bg, $background), $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio);
+ $hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
+ $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
+ $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
+ $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$table-border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
- --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+ --#{$prefix}table-striped-color: #{color-contrast($striped-bg, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)};
--#{$prefix}table-active-bg: #{$active-bg};
- --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+ --#{$prefix}table-active-color: #{color-contrast($active-bg, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)};
--#{$prefix}table-hover-bg: #{$hover-bg};
- --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
+ --#{$prefix}table-hover-color: #{color-contrast($hover-bg, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio)};
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss
index d437f6d8f4..e4d6bfd280 100644
--- a/scss/mixins/_transition.scss
+++ b/scss/mixins/_transition.scss
@@ -1,10 +1,13 @@
// stylelint-disable property-disallowed-list
+@use "sass:list";
+@use "../variables" as *;
+
@mixin transition($transition...) {
- @if length($transition) == 0 {
+ @if list.length($transition) == 0 {
$transition: $transition-base;
}
- @if length($transition) > 1 {
+ @if list.length($transition) > 1 {
@each $value in $transition {
@if $value == null or $value == none {
@warn "The keyword 'none' or 'null' must be used as a single argument.";
@@ -13,11 +16,11 @@
}
@if $enable-transitions {
- @if nth($transition, 1) != null {
+ @if list.nth($transition, 1) != null {
transition: $transition;
}
- @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
+ @if $enable-reduced-motion and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
@media (prefers-reduced-motion: reduce) {
transition: none;
}
diff --git a/scss/mixins/_utilities.import.scss b/scss/mixins/_utilities.import.scss
new file mode 100644
index 0000000000..d94f1f77bd
--- /dev/null
+++ b/scss/mixins/_utilities.import.scss
@@ -0,0 +1 @@
+@forward "utilities";
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index dc1238359f..c4d6b2124b 100644
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -1,37 +1,50 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "ltr-rtl" as *;
+
+// Generate selectors for theme variants
+@function theme-prefix($theme, $selector) {
+ @return #{"[data" + $data-infix + "theme="$theme + "] ." + $theme + "\\:" + $selector + ", [data" + $data-infix + "theme="$theme + "] ." + $theme + "\\:" + $selector + ":not([class*='#{$theme}:'])"};
+}
+
// Utility generator
// Used to generate utilities & print utilities
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
- $values: map-get($utility, values);
+ $values: map.get($utility, values);
// If the values are a list or string, convert it into a map
- @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
- $values: zip($values, $values);
+ @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
+ $values: list.zip($values, $values);
}
@each $key, $value in $values {
- $properties: map-get($utility, property);
+ $properties: map.get($utility, property);
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
- @if type-of($properties) == "string" {
- $properties: append((), $properties);
+ @if meta.type-of($properties) == "string" {
+ $properties: list.append((), $properties);
}
// Use custom class if present
- $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+ $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
$property-class: if($property-class == null, "", $property-class);
// Use custom CSS variable name if present, otherwise default to `class`
- $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+ $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
// State params to generate pseudo-classes
- $state: if(map-has-key($utility, state), map-get($utility, state), ());
+ $state: if(map.has-key($utility, state), map.get($utility, state), ());
- $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+ $infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
// Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
- @if map-get($utility, rfs) {
+ @if map.get($utility, rfs) {
// Inside the media query
@if $is-rfs-media-query {
$val: rfs-value($value);
@@ -44,10 +57,10 @@
}
}
- $is-css-var: map-get($utility, css-var);
- $is-dark-mode: map-get($utility, dark-mode);
- $is-local-vars: map-get($utility, local-vars);
- $is-rtl: map-get($utility, rtl);
+ $is-css-var: map.get($utility, css-var);
+ $is-dark-mode: map.get($utility, dark-mode);
+ $is-local-vars: map.get($utility, local-vars);
+ $is-rtl: map.get($utility, rtl);
@if $value != null {
@if $is-rtl == false {
@@ -93,8 +106,8 @@
}
}
@if $is-rtl == true {
- @if (type-of($value) == "map") {
- @include ltr-rtl($property, map-get($value, "ltr"), null, map-get($value, "rtl"), if($enable-important-utilities, !important, null));
+ @if (meta.type-of($value) == "map") {
+ @include ltr-rtl($property, map.get($value, "ltr"), null, map.get($value, "rtl"), if($enable-important-utilities, !important, null));
} @else {
@include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
}
diff --git a/scss/sidebar/_sidebar-narrow.scss b/scss/sidebar/_sidebar-narrow.scss
index baf4a70dbf..65aa436fb6 100644
--- a/scss/sidebar/_sidebar-narrow.scss
+++ b/scss/sidebar/_sidebar-narrow.scss
@@ -1,3 +1,8 @@
+@use "../mixins/breakpoints" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../variables" as *;
+@use "sidebar" as *;
+
.sidebar-narrow {
// scss-docs-start sidebar-narrow-css-vars
--#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
diff --git a/scss/sidebar/_sidebar-nav.scss b/scss/sidebar/_sidebar-nav.scss
index db10e25a62..db2812d150 100644
--- a/scss/sidebar/_sidebar-nav.scss
+++ b/scss/sidebar/_sidebar-nav.scss
@@ -1,4 +1,9 @@
// Sidebar navigation
+@use "../functions/escape-svg" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
.sidebar-nav {
// scss-docs-start sidebar-nav-css-vars
diff --git a/scss/sidebar/_sidebar.scss b/scss/sidebar/_sidebar.scss
index fcaddf29af..4efccfd3db 100644
--- a/scss/sidebar/_sidebar.scss
+++ b/scss/sidebar/_sidebar.scss
@@ -1,4 +1,13 @@
// stylelint-disable function-disallowed-list
+@use "../functions/escape-svg" as *;
+@use "../mixins/backdrop" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/breakpoints" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+@use "../variables-dark" as *;
+
.sidebar {
// scss-docs-start sidebar-css-vars
--#{$prefix}sidebar-zindex: #{$zindex-sidebar};
diff --git a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss
deleted file mode 100644
index f08ae58752..0000000000
--- a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss
-
-@import "../../functions";
-@import "../../variables";
-// Voluntarily not importing _variables-dark.scss
-@import "../../maps";
-@import "../../mixins";
diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss
index 9f282fcd01..cbeb9acd93 100644
--- a/scss/tests/mixins/_color-modes.test.scss
+++ b/scss/tests/mixins/_color-modes.test.scss
@@ -1,10 +1,8 @@
// stylelint-disable selector-attribute-quotes
-@import "../../functions";
-@import "../../variables";
-@import "../../variables-dark";
-@import "../../maps";
-@import "../../mixins";
+@use "../../variables" as *;
+@use "../../variables-dark" as *;
+@use "../../mixins/color-mode" as *;
@include describe("global $color-mode-type: data") {
@include it("generates data attribute selectors for dark mode") {
@@ -17,7 +15,7 @@
}
}
@include color-mode(dark, true) {
- --custom-color: #{mix($indigo, $blue, 50%)};
+ --custom-color: #{$indigo};
}
}
@include expect() {
@@ -26,7 +24,7 @@
background-color: var(--cui-primary-bg-subtle);
}
[data-coreui-theme=dark] {
- --custom-color: #3a3ff8;
+ --custom-color: #6610f2;
}
}
}
@@ -46,7 +44,7 @@
}
}
@include color-mode(dark, true) {
- --custom-color: #{mix($indigo, $blue, 50%)};
+ --custom-color: #{$indigo};
}
}
@include expect() {
@@ -58,7 +56,7 @@
}
@media (prefers-color-scheme: dark) {
:root {
- --custom-color: #3a3ff8;
+ --custom-color: #6610f2;
}
}
}
diff --git a/scss/tests/mixins/_media-query-color-mode-full.test.scss b/scss/tests/mixins/_media-query-color-mode-full.test.scss
index 598a8cb8b2..f180860d7b 100644
--- a/scss/tests/mixins/_media-query-color-mode-full.test.scss
+++ b/scss/tests/mixins/_media-query-color-mode-full.test.scss
@@ -1,6 +1,6 @@
-$color-mode-type: media-query;
-
-@import "../../coreui";
+@use "../../coreui" as * with (
+ $color-mode-type: media-query
+);
@include describe("global $color-mode-type: media-query") {
@include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss
index 2a0a22e86e..04024c6b66 100644
--- a/scss/tests/mixins/_utilities.test.scss
+++ b/scss/tests/mixins/_utilities.test.scss
@@ -1,9 +1,11 @@
-$prefix: cui-;
-$enable-dark-mode: true;
-$enable-important-utilities: false;
-
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
-@import "../../mixins/utilities";
+@use "../../variables" as * with (
+ $prefix: cui-,
+ $enable-dark-mode: true,
+ $enable-important-utilities: false,
+);
+
+@use "../../mixins/utilities" as *;
@mixin test-generate-utility($params...) {
@include assert() {
@@ -45,6 +47,7 @@ $enable-important-utilities: false;
values: (small: .5rem, large: 2rem)
)
) {
+
.padding-small {
padding: .5rem !important;
}
@@ -313,37 +316,6 @@ $enable-important-utilities: false;
}
}
}
-
- @include describe("rfs") {
- @include it("sets the fluid value when not inside media query") {
- @include test-generate-utility(
- (
- property: padding,
- values: 1rem,
- rfs: true
- )
- ) {
- .padding-1rem {
- padding: rfs-fluid-value(1rem);
- }
- }
- }
-
- @include it("sets the value when inside the media query") {
- @include test-generate-utility(
- (
- property: padding,
- values: 1rem,
- rfs: true
- ),
- $is-rfs-media-query: true
- ) {
- .padding-1rem {
- padding: rfs-value(1rem);
- }
- }
- }
- }
}
@include describe("$infix") {
diff --git a/scss/tests/sass-true/runner.js b/scss/tests/sass-true/runner.js
index bef870ac6b..edf9ac4304 100644
--- a/scss/tests/sass-true/runner.js
+++ b/scss/tests/sass-true/runner.js
@@ -6,7 +6,7 @@ const { runSass } = require('sass-true')
module.exports = (filename, { describe, it }) => {
const data = fs.readFileSync(filename, 'utf8')
- const TRUE_SETUP = '$true-terminal-output: false; @import "true";'
+ const TRUE_SETUP = '$true-terminal-output: false; @use "true" as *;'
const sassString = TRUE_SETUP + data
runSass(
diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss
index 304d8d1c94..11cdc5e1fd 100644
--- a/scss/tests/utilities/_api.test.scss
+++ b/scss/tests/utilities/_api.test.scss
@@ -1,36 +1,34 @@
-@import "../../functions";
-@import "../../variables";
-@import "../../variables-dark";
-@import "../../maps";
-@import "../../mixins";
+@use "sass:map";
-$utilities: ();
+@use "../../variables" with (
+ $grid-breakpoints: (
+ xs: 0,
+ sm: 333px,
+ md: 666px
+ )
+);
-@include describe("utilities/api") {
- @include it("generates utilities for each breakpoints") {
- $utilities: (
- margin: (
- property: margin,
- values: auto
- ),
- padding: (
- property: padding,
- responsive: true,
- values: 1rem
- ),
- font-size: (
- property: font-size,
- values: (large: 1.25rem),
- print: true
- )
- ) !global;
+@use "../../utilities" as *;
- $grid-breakpoints: (
- xs: 0,
- sm: 333px,
- md: 666px
- ) !global;
+$utilities: (
+ margin: (
+ property: margin,
+ values: auto
+ ),
+ padding: (
+ property: padding,
+ responsive: true,
+ values: 1rem
+ ),
+ font-size: (
+ property: font-size,
+ values: (large: 1.25rem),
+ print: true
+ )
+);
+@include describe("utilities/api") {
+ @include it("generates utilities for each breakpoints") {
@include assert() {
@include output() {
@import "../../utilities/api";
diff --git a/scss/themes/bootstrap/bootstrap.rtl.scss b/scss/themes/bootstrap/bootstrap.rtl.scss
index a488f977e3..e2caf4a3fe 100644
--- a/scss/themes/bootstrap/bootstrap.rtl.scss
+++ b/scss/themes/bootstrap/bootstrap.rtl.scss
@@ -1,22 +1,28 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
+@use "bootstrap" with (
+ $enable-ltr: false,
+ $enable-rtl: true
+);
-@import "mixins/banner";
-@include bsBanner("");
-@import "../../../node_modules/bootstrap/scss/bootstrap";
-@import "../../variables";
+// $enable-ltr: false !default;
+// $enable-rtl: true !default;
-/* rtl:begin:ignore */
-@import "../../mixins/avatar";
-@import "../../mixins/icon";
-@import "../../mixins/ltr-rtl";
+// @import "mixins/banner";
+// @include bsBanner("");
-@import "../../avatar";
-@import "../../callout";
-@import "../../footer";
-@import "../../header";
-@import "../../icon";
-@import "../../sidebar";
+// @import "../../../node_modules/bootstrap/scss/bootstrap";
+// @import "../../variables";
-/* rtl:end:ignore */
+// /* rtl:begin:ignore */
+// @import "../../mixins/avatar";
+// @import "../../mixins/icon";
+// @import "../../mixins/ltr-rtl";
+
+// @import "../../avatar";
+// @import "../../callout";
+// @import "../../footer";
+// @import "../../header";
+// @import "../../icon";
+// @import "../../sidebar";
+
+// /* rtl:end:ignore */
diff --git a/scss/themes/bootstrap/bootstrap.scss b/scss/themes/bootstrap/bootstrap.scss
index 460c0c2918..60cf153291 100644
--- a/scss/themes/bootstrap/bootstrap.scss
+++ b/scss/themes/bootstrap/bootstrap.scss
@@ -1,19 +1,125 @@
-@import "mixins/banner";
-@include bsBanner("");
+@use "sass:color";
+@use "../../banner" with (
+ $file: "Bootstrap Theme"
+);
+@use "../../functions/color" as *;
-@import "../../../node_modules/bootstrap/scss/bootstrap";
-@import "../../variables";
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+// scss-docs-end gray-color-variables
-/* rtl:begin:ignore */
-@import "../../mixins/avatar";
-@import "../../mixins/icon";
-@import "../../mixins/ltr-rtl";
+// scss-docs-start color-variables
+$blue: #0d6efd !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #d63384 !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #198754 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+// scss-docs-end color-variables
-@import "../../avatar";
-@import "../../callout";
-@import "../../footer";
-@import "../../header";
-@import "../../icon";
-@import "../../sidebar";
+// scss-docs-start theme-color-variables
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
+// scss-docs-end theme-color-variables
-/* rtl:end:ignore */
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark: tint-color($success, 40%) !default;
+$info-text-emphasis-dark: tint-color($info, 40%) !default;
+$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark: shade-color($success, 80%) !default;
+$info-bg-subtle-dark: shade-color($info, 80%) !default;
+$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark: shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
+$success-border-subtle-dark: shade-color($success, 40%) !default;
+$info-border-subtle-dark: shade-color($info, 40%) !default;
+$warning-border-subtle-dark: shade-color($warning, 40%) !default;
+$danger-border-subtle-dark: shade-color($danger, 40%) !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+@forward "../../coreui" with (
+ $prefix: bs- !default,
+ $data-infix: -bs- !default,
+ $white: $white !default,
+ $gray-100: $gray-100 !default,
+ $gray-200: $gray-200 !default,
+ $gray-300: $gray-300 !default,
+ $gray-400: $gray-400 !default,
+ $gray-500: $gray-500 !default,
+ $gray-600: $gray-600 !default,
+ $gray-700: $gray-700 !default,
+ $gray-800: $gray-800 !default,
+ $gray-900: $gray-900 !default,
+ $black: $black !default,
+ $primary: $primary !default,
+ $secondary: $secondary !default,
+ $success: $success !default,
+ $info: $info !default,
+ $warning: $warning !default,
+ $danger: $danger !default,
+ $light: $light !default,
+ $dark: $dark !default,
+ $body-color: $gray-900 !default,
+ $body-secondary-color: rgba($gray-900, .75) !default,
+ $body-tertiary-bg: rgba($gray-900, .75) !default,
+ $component-active-color: $white !default,
+ $component-active-bg: $primary !default,
+ $body-color-dark: $gray-300 !default,
+ $body-bg-dark: $gray-900 !default,
+ $body-secondary-color-dark: rgba($gray-300, .75) !default,
+ $body-secondary-bg-dark: $gray-800 !default,
+ $body-tertiary-color-dark: rgba($gray-300, .5) !default,
+ $body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default,
+ $primary-text-emphasis-dark: $primary-text-emphasis-dark !default,
+ $secondary-text-emphasis-dark: $secondary-text-emphasis-dark !default,
+ $success-text-emphasis-dark: $success-text-emphasis-dark !default,
+ $info-text-emphasis-dark: $info-text-emphasis-dark !default,
+ $warning-text-emphasis-dark: $warning-text-emphasis-dark !default,
+ $danger-text-emphasis-dark: $danger-text-emphasis-dark !default,
+ $primary-bg-subtle-dark: $primary-bg-subtle-dark !default,
+ $secondary-bg-subtle-dark: $secondary-bg-subtle-dark !default,
+ $success-bg-subtle-dark: $success-bg-subtle-dark !default,
+ $info-bg-subtle-dark: $info-bg-subtle-dark !default,
+ $warning-bg-subtle-dark: $warning-bg-subtle-dark !default,
+ $danger-bg-subtle-dark: $danger-bg-subtle-dark !default,
+ $primary-border-subtle-dark: $primary-border-subtle-dark !default,
+ $secondary-border-subtle-dark: $secondary-border-subtle-dark !default,
+ $success-border-subtle-dark: $success-border-subtle-dark !default,
+ $info-border-subtle-dark: $info-border-subtle-dark !default,
+ $warning-border-subtle-dark: $warning-border-subtle-dark !default,
+ $danger-border-subtle-dark: $danger-border-subtle-dark !default,
+ $theme-colors-dark: () !default,
+ $grays-dark: () !default,
+);
diff --git a/scss/utilities/_api.import.scss b/scss/utilities/_api.import.scss
new file mode 100644
index 0000000000..a003da2df2
--- /dev/null
+++ b/scss/utilities/_api.import.scss
@@ -0,0 +1 @@
+@forward "api";
diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index 62e1d398e3..ad8136a244 100644
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -1,5 +1,13 @@
+@use "sass:map";
+@use "sass:meta";
+@use "../utilities" as *;
+@use "../mixins/breakpoints" as *;
+@use "../mixins/utilities" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
// Loop over each breakpoint
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
@@ -9,7 +17,7 @@
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
- @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
+ @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix);
}
}
@@ -18,15 +26,15 @@
// RFS rescaling
@media (min-width: $rfs-mq-value) {
- @each $breakpoint in map-keys($grid-breakpoints) {
+ @each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
- @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+ @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
- @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
+ @if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix, true);
}
}
@@ -40,7 +48,7 @@
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles
- @if type-of($utility) == "map" and map-get($utility, print) == true {
+ @if meta.type-of($utility) == "map" and map.get($utility, print) == true {
@include generate-utility($utility, "-print");
}
}
diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss
index 614c6bde4f..b5b7dc1107 100644
--- a/scss/vendor/_rfs.scss
+++ b/scss/vendor/_rfs.scss
@@ -1,4 +1,8 @@
// stylelint-disable scss/dimension-no-non-numeric-values
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
// SCSS RFS mixin
//
@@ -30,7 +34,7 @@ $rfs-two-dimensional: false !default;
// Factor of decrease
$rfs-factor: 10 !default;
-@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
+@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
}
@@ -50,7 +54,7 @@ $rfs-safari-iframe-resize-bug-fix: false !default;
$enable-rfs: true !default;
// Cache $rfs-base-value unit
-$rfs-base-value-unit: unit($rfs-base-value);
+$rfs-base-value-unit: math.unit($rfs-base-value);
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
@@ -80,16 +84,16 @@ $rfs-base-value-unit: unit($rfs-base-value);
}
}
$result: $result * $factor * $sign;
- $dividend-unit: unit($dividend);
- $divisor-unit: unit($divisor);
+ $dividend-unit: math.unit($dividend);
+ $divisor-unit: math.unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
- @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
- $result: $result * map-get($unit-map, $dividend-unit);
+ @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
+ $result: $result * map.get($unit-map, $dividend-unit);
}
@return $result;
}
@@ -103,7 +107,7 @@ $rfs-base-value-unit: unit($rfs-base-value);
}
// Cache $rfs-breakpoint unit to prevent multiple calls
-$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
@@ -190,7 +194,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
// Helper function to get the formatted non-responsive value
@function rfs-value($values) {
// Convert to list
- $values: if(type-of($values) != list, ($values,), $values);
+ $values: if(meta.type-of($values) != list, ($values,), $values);
$val: "";
@@ -201,7 +205,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}
@else {
// Cache $value unit
- $unit: if(type-of($value) == "number", unit($value), false);
+ $unit: if(meta.type-of($value) == "number", math.unit($value), false);
@if $unit == px {
// Convert to rem if needed
@@ -218,13 +222,13 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}
// Remove first space
- @return unquote(str-slice($val, 2));
+ @return string.unquote(string.slice($val, 2));
}
// Helper function to get the responsive value calculated by RFS
@function rfs-fluid-value($values) {
// Convert to list
- $values: if(type-of($values) != list, ($values,), $values);
+ $values: if(meta.type-of($values) != list, ($values,), $values);
$val: "";
@@ -234,7 +238,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$val: $val + " 0";
} @else {
// Cache $value unit
- $unit: if(type-of($value) == "number", unit($value), false);
+ $unit: if(meta.type-of($value) == "number", math.unit($value), false);
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@if not $unit or $unit != px and $unit != rem {
@@ -274,7 +278,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
}
// Remove first space
- @return unquote(str-slice($val, 2));
+ @return string.unquote(string.slice($val, 2));
}
// RFS mixin