Refactor SCSS imports to use @forward and @use for better modularity and dependency management. Update mixins and variables to align with the new structure, ensuring consistent access across modules.

core/scss/_config.scss

@@ -1,6 +1,11 @@
-@import 'mixins';
-@import 'variables';
-@import 'variables-dark';
-@import 'maps';
-@import 'utilities';
-
+// Central hub of Tabler's Sass module graph.
+//
+// Forwards are ordered leaves-first (dependency order) so that a future
+// `@use 'config' with (...)` configures each module on its first load.
+// None of these modules emit CSS, so the order has no effect on output.
+@forward 'settings';
+@forward 'variables';
+@forward 'variables-dark';
+@forward 'maps';
+@forward 'mixins';
+@forward 'utilities';

core/scss/_maps.scss

@@ -1,4 +1,8 @@
 @use 'sass:map';
+@use 'settings' as *;
+@use 'variables' as *;
+@use 'variables-dark' as *;
+@use 'mixins/functions' as *;
 
 // Re-assigned maps
 //

core/scss/_mixins.scss

@@ -1,33 +1,36 @@
-@import 'mixins/mixins';
-@import 'mixins/functions';
+@forward 'mixins/mixins';
+@forward 'mixins/functions';
 
 // Bootstrap mixins managed by Tabler
-// $enable-rfs is declared before rfs import so rfs's `!default` becomes a no-op.
-// Users can override by setting $enable-rfs before importing Tabler.
-$enable-rfs: false !default;
-@import 'mixins/bootstrap/rfs';
-@import 'mixins/bootstrap/deprecate';
-@import 'mixins/bootstrap/breakpoints';
-@import 'mixins/bootstrap/color-mode';
-@import 'mixins/bootstrap/color-scheme';
-@import 'mixins/bootstrap/image';
-@import 'mixins/bootstrap/resize';
-@import 'mixins/bootstrap/visually-hidden';
-@import 'mixins/bootstrap/reset-text';
-@import 'mixins/bootstrap/text-truncate';
-@import 'mixins/bootstrap/utilities';
-@import 'mixins/bootstrap/alert';
-@import 'mixins/bootstrap/backdrop';
-@import 'mixins/bootstrap/buttons';
-@import 'mixins/bootstrap/caret';
-@import 'mixins/bootstrap/pagination';
-@import 'mixins/bootstrap/lists';
-@import 'mixins/bootstrap/forms';
-@import 'mixins/bootstrap/table-variants';
-@import 'mixins/bootstrap/border-radius';
-@import 'mixins/bootstrap/box-shadow';
-@import 'mixins/bootstrap/gradients';
-@import 'mixins/bootstrap/transition';
-@import 'mixins/bootstrap/clearfix';
-@import 'mixins/bootstrap/container';
-@import 'mixins/bootstrap/grid';
+// rfs is forwarded with `$enable-rfs: false` (Tabler disables responsive font
+// sizes by default) — the `!default` flag keeps it user-overridable.
+// `divide` is hidden because `mixins/functions` already forwards an identical
+// implementation.
+@forward 'mixins/bootstrap/rfs' hide divide with (
+  $enable-rfs: false !default
+);
+@forward 'mixins/bootstrap/deprecate';
+@forward 'mixins/bootstrap/breakpoints';
+@forward 'mixins/bootstrap/color-mode';
+@forward 'mixins/bootstrap/color-scheme';
+@forward 'mixins/bootstrap/image';
+@forward 'mixins/bootstrap/resize';
+@forward 'mixins/bootstrap/visually-hidden';
+@forward 'mixins/bootstrap/reset-text';
+@forward 'mixins/bootstrap/text-truncate';
+@forward 'mixins/bootstrap/utilities';
+@forward 'mixins/bootstrap/alert';
+@forward 'mixins/bootstrap/backdrop';
+@forward 'mixins/bootstrap/buttons';
+@forward 'mixins/bootstrap/caret';
+@forward 'mixins/bootstrap/pagination';
+@forward 'mixins/bootstrap/lists';
+@forward 'mixins/bootstrap/forms';
+@forward 'mixins/bootstrap/table-variants';
+@forward 'mixins/bootstrap/border-radius';
+@forward 'mixins/bootstrap/box-shadow';
+@forward 'mixins/bootstrap/gradients';
+@forward 'mixins/bootstrap/transition';
+@forward 'mixins/bootstrap/clearfix';
+@forward 'mixins/bootstrap/container';
+@forward 'mixins/bootstrap/grid';

core/scss/_props.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import 'config';
+@use 'config' as *;
 
 :root,
 :host {

core/scss/_settings.scss

@@ -0,0 +1,33 @@
+// Foundational settings used by both functions and variables.
+//
+// This is the lowest layer of the Sass module graph. Variables live here
+// (instead of `_variables.scss`) when they are referenced by functions or
+// mixins in `mixins/` — keeping them in `_variables.scss` would create a
+// circular `@use` between variables and functions. They are re-exported
+// through `_config.scss`, so overriding them works exactly as before.
+
+// Prefixes
+$prefix: 'tblr-' !default;
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
+
+$black: #000000 !default;
+$white: #ffffff !default;
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
+$min-contrast-ratio: 2 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+// Grid breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+) !default;

core/scss/_utilities.scss

@@ -1,4 +1,9 @@
 @use 'sass:map';
+@use 'settings' as *;
+@use 'variables' as *;
+@use 'variables-dark' as *;
+@use 'maps' as *;
+@use 'mixins/functions' as *;
 
 $border-values: (
   null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),

core/scss/_variables-dark.scss

@@ -1,4 +1,7 @@
 @use 'sass:color';
+@use 'settings' as *;
+@use 'variables' as *;
+@use 'mixins/functions' as *;
 
 //
 // Dark mode

core/scss/_variables.scss

@@ -2,9 +2,11 @@
 @use 'sass:math';
 @use 'sass:map';
 @use 'sass:color';
+@use 'settings' as *;
+@use 'mixins/functions' as *;
 
 // Prefixes
-$prefix: 'tblr-' !default;
+// $prefix moved to `_settings.scss`
 $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
 
 // Assets Base
@@ -18,7 +20,7 @@ $enable-shadows: true !default;
 $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
 $enable-negative-margins: true !default;
-$enable-rfs: false !default;
+// $enable-rfs is declared in `_mixins.scss` (forwarded from rfs with `false !default`)
 $enable-cssgrid: true !default;
 $enable-caret: true !default;
 $enable-rounded: true !default;
@@ -33,7 +35,7 @@ $enable-deprecation-messages: true !default;
 $enable-important-utilities: true !default;
 
 // Escaped Characters
-$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
+// $escaped-characters moved to `_settings.scss`
 
 // Dark Mode
 $color-mode-type: data !default;
@@ -51,8 +53,7 @@ $gray-800: #1f2937 !default;
 $gray-900: #111827 !default;
 $gray-950: #030712 !default;
 
-$black: #000000 !default;
-$white: #ffffff !default;
+// $black and $white moved to `_settings.scss`
 
 $light: $gray-50 !default;
 $dark: $gray-800 !default;
@@ -101,9 +102,7 @@ $colors: (
   'gray-dark': $gray-800,
 ) !default;
 
-$min-contrast-ratio: 2 !default;
-$color-contrast-dark: $black !default;
-$color-contrast-light: $white !default;
+// $min-contrast-ratio, $color-contrast-dark and $color-contrast-light moved to `_settings.scss`
 
 $blue-100: tint-color($blue, 80%) !default;
 $blue-200: tint-color($blue, 60%) !default;
@@ -570,8 +569,9 @@ $body-bg: $gray-50 !default;
 $body-color: $gray-800 !default;
 $body-emphasis-color: $gray-700 !default;
 
-$color-contrast-dark: $body-color !default;
-$color-contrast-light: $light !default;
+// $color-contrast-dark and $color-contrast-light moved to `_settings.scss`.
+// Note: they were already no-ops here — the `!default` definitions earlier
+// in this file always won, so their effective values were $black / $white.
 
 $text-muted: $gray-500 !default;
 $text-secondary: $gray-500 !default;
@@ -921,14 +921,7 @@ $position-values: (
 ) !default;
 
 // Grid breakpoints
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px,
-) !default;
+// $grid-breakpoints moved to `_settings.scss`
 
 // Grid containers
 $container-max-widths: (

core/scss/mixins/_functions.scss

@@ -4,6 +4,8 @@
 @use 'sass:map';
 @use 'sass:color';
 @use 'sass:meta';
+@use '../settings' as *;
+@use 'bootstrap/breakpoints' as *;
 
 @function theme-color-lighter($color, $background: #fff) {
   @return color.mix($color, $background, 10%);
@@ -13,18 +15,8 @@
   @return shade-color($color, 10%);
 }
 
-//
-// Replace all occurrences of a substring within a 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;
-}
+// str-replace was defined here twice — the canonical copy lives in the
+// "Bootstrap functions" section below.
 
 @mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) {
   $prev: breakpoint-prev($name);
@@ -52,23 +44,8 @@
   @return if(sass($n > 1): list.nth($breakpoint-names, $n - 1); else: null);
 }
 
-//
-// Escape SVG strings.
-//
-@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;
-}
+// escape-svg was defined here twice — the canonical copy lives in the
+// "Bootstrap functions" section below.
 
 /**
  * Converts a given value to a percentage string.

core/scss/mixins/_mixins.scss

@@ -1,4 +1,9 @@
 @use "sass:meta";
+@use "../settings" as *;
+@use "../variables" as *;
+@use "functions" as *;
+@use "bootstrap/transition" as *;
+@use "bootstrap/border-radius" as *;
 
 @mixin subheader($include-color: true, $include-line-height: true) {
   font-size: $h5-font-size;

core/scss/mixins/bootstrap/_alert.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Alert variants
 //
 // Tabler overrides Bootstrap's alert-variant with an empty mixin

core/scss/mixins/bootstrap/_backdrop.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Shared between modals and offcanvases
 @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
   position: fixed;

core/scss/mixins/bootstrap/_border-radius.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // stylelint-disable property-disallowed-list
 @use "sass:list";
 @use "sass:math";

core/scss/mixins/bootstrap/_box-shadow.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 @use "sass:list";
 
 @mixin box-shadow($shadow...) {

core/scss/mixins/bootstrap/_breakpoints.scss

@@ -1,5 +1,6 @@
 @use "sass:list";
 @use "sass:map";
+@use "../../settings" as *;
 
 // Breakpoint viewport sizes and media queries.
 //

core/scss/mixins/bootstrap/_buttons.scss

@@ -1,3 +1,8 @@
+@use "rfs" as *;
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Button variants
 //
 // Tabler overrides Bootstrap's button-variant and button-outline-variant with empty mixins

core/scss/mixins/bootstrap/_caret.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 @mixin caret-down($width: $caret-width) {
   border-top: $width solid;
   border-right: $width solid transparent;

core/scss/mixins/bootstrap/_clearfix.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 @mixin clearfix() {
   &::after {
     display: block;

core/scss/mixins/bootstrap/_color-mode.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 @mixin color-mode($mode: light, $root: false) {
   @if $color-mode-type == "media-query" {
     @if $root == true {

core/scss/mixins/bootstrap/_color-scheme.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 @mixin color-scheme($name) {
   @media (prefers-color-scheme: #{$name}) {
     @content;

core/scss/mixins/bootstrap/_container.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Container mixins
 
 @mixin make-container($gutter: $container-padding-x) {

core/scss/mixins/bootstrap/_deprecate.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Deprecate mixin
 //
 // This mixin can be used to deprecate mixins or functions.

core/scss/mixins/bootstrap/_forms.scss

@@ -1,3 +1,10 @@
+@use "border-radius" as *;
+@use "box-shadow" as *;
+@use "rfs" as *;
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" 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
 

core/scss/mixins/bootstrap/_gradients.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Gradients
 
 @mixin gradient-bg($color: null) {

core/scss/mixins/bootstrap/_grid.scss

@@ -1,3 +1,8 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "../../maps" as *;
+@use "breakpoints" as *;
 @use "sass:math";
 @use "sass:map";
 @use "sass:meta";

core/scss/mixins/bootstrap/_image.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Image Mixins
 // - Responsive image
 // - Retina image

core/scss/mixins/bootstrap/_lists.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Lists
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style

core/scss/mixins/bootstrap/_pagination.scss

@@ -1,3 +1,8 @@
+@use "rfs" as *;
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Pagination
 
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {

core/scss/mixins/bootstrap/_reset-text.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 @mixin reset-text {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.

core/scss/mixins/bootstrap/_resize.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Resize anything
 
 @mixin resizable($direction) {

core/scss/mixins/bootstrap/_table-variants.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 @use "sass:color";
 @use "sass:math";
 

core/scss/mixins/bootstrap/_text-truncate.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // Text truncate
 // Requires inline-block or block for proper styling
 

core/scss/mixins/bootstrap/_transition.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // stylelint-disable property-disallowed-list
 @use "sass:list";
 

core/scss/mixins/bootstrap/_utilities.scss

@@ -1,3 +1,8 @@
+@use "rfs" as *;
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 @use "sass:list";
 @use "sass:map";
 @use "sass:meta";

core/scss/mixins/bootstrap/_visually-hidden.scss

@@ -1,3 +1,7 @@
+@use "../../settings" as *;
+@use "../../variables" as *;
+@use "../functions" as *;
+@use "breakpoints" as *;
 // stylelint-disable declaration-no-important
 
 // Hide content visually while keeping it accessible to assistive technologies

core/scss/tabler-flags.scss

@@ -1 +1 @@
-@import 'ui/flags';
+@forward 'ui/flags';

core/scss/tabler-marketing.scss

@@ -1,5 +1,4 @@
 @import 'config';
-@import 'variables';
 @import 'utilities-marketing';
 
 @import 'marketing/core';

core/scss/tabler-props.scss

@@ -1 +1 @@
-@import 'props';
+@forward 'props';

core/scss/tabler-socials.scss

@@ -1 +1 @@
-@import 'ui/social';
+@forward 'ui/social';

core/scss/tabler-themes.scss

@@ -1,4 +1,4 @@
-@import 'config';
+@use 'config' as *;
 
 [data-bs-theme-base='slate'],
 [data-theme-base='slate'] {