Test for Sass compilation

diff --git a/dist/css/mixins/index.css b/dist/css/mixins/index.css
new file mode 100644 (file)
index 0000000..293771b
--- /dev/null
+++ b/dist/css/mixins/index.css
@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=index.css.map */

diff --git a/dist/css/mixins/index.css.map b/dist/css/mixins/index.css.map
new file mode 100644 (file)
index 0000000..ec9a3d8
--- /dev/null
+++ b/dist/css/mixins/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"index.css","sourcesContent":[]}
\ No newline at end of file

diff --git a/dist/css/setup/index.css b/dist/css/setup/index.css
new file mode 100644 (file)
index 0000000..293771b
--- /dev/null
+++ b/dist/css/setup/index.css
@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=index.css.map */

diff --git a/dist/css/setup/index.css.map b/dist/css/setup/index.css.map
new file mode 100644 (file)
index 0000000..ec9a3d8
--- /dev/null
+++ b/dist/css/setup/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"index.css","sourcesContent":[]}
\ No newline at end of file

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index d69dfd617fb91eddb0d1a8c009ec3dc99b9ae870..574ef3148aa9a8c6313cb54140a69d1c829611e4 100644 (file)
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -2,7 +2,7 @@
 @use "mixins/border-radius";
 @use "mixins/color-mode";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 //

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 172411f21b9c102eb9bc7329cccdf0fb77aa9d12..f96aea77ae2d668ed7ba117d22db69279bc4aeb6 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "mixins/border-radius";
-@use "variables";
+@use "setup/variables";
 
 //
 // Base styles

diff --git a/scss/_badge.scss b/scss/_badge.scss
index 802c9629abc79ba141991ef932379003d4668be0..3d6946373e2970fb8891d86693acbe9a4ba9c739 100644 (file)
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -1,6 +1,6 @@
 @use "mixins/border-radius";
 @use "mixins/gradients";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Base class

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 1a0ad49bf558dee496bad40067ae479cf79d8064..17bc4ec9778cb1eacf4f9f3b9e3fb50a620169db 100644 (file)
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -1,6 +1,6 @@
 @use "functions";
 @use "mixins/border-radius";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 .breadcrumb {

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 9fdba871fbb2a078e866fc683fd5fae292f67f81..0a9664c3bbb7a685395b9a6a8ad2ca21a94e0fa8 100644 (file)
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -1,6 +1,6 @@
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
-@use "variables";
+@use "setup/variables";
 
 // Make the div behave like a button
 .btn-group,

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 18ad4c6746eee2c5e7999392e9cf76277b2150a2..c387d9a2ac939ddc7312f89fbbaeea0970d7a463 100644 (file)
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -1,10 +1,9 @@
-@use "functions";
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
 @use "mixins/buttons";
 @use "mixins/gradients";
 @use "mixins/transition";
-@use "variables";
+@use "setup" as *;
 @use "vendor/rfs";
 
 //
@@ -13,77 +12,77 @@
 
 .btn {
   // scss-docs-start btn-css-vars
-  --#{variables.$prefix}btn-padding-x: #{variables.$btn-padding-x};
-  --#{variables.$prefix}btn-padding-y: #{variables.$btn-padding-y};
-  --#{variables.$prefix}btn-font-family: #{variables.$btn-font-family};
-  @include rfs.rfs(variables.$btn-font-size, --#{variables.$prefix}btn-font-size);
-  --#{variables.$prefix}btn-font-weight: #{variables.$btn-font-weight};
-  --#{variables.$prefix}btn-line-height: #{variables.$btn-line-height};
-  --#{variables.$prefix}btn-color: #{variables.$btn-color};
-  --#{variables.$prefix}btn-bg: transparent;
-  --#{variables.$prefix}btn-border-width: #{variables.$btn-border-width};
-  --#{variables.$prefix}btn-border-color: transparent;
-  --#{variables.$prefix}btn-border-radius: #{variables.$btn-border-radius};
-  --#{variables.$prefix}btn-hover-border-color: transparent;
-  --#{variables.$prefix}btn-box-shadow: #{variables.$btn-box-shadow};
-  --#{variables.$prefix}btn-disabled-opacity: #{variables.$btn-disabled-opacity};
-  --#{variables.$prefix}btn-focus-box-shadow: 0 0 0 #{variables.$btn-focus-width} rgba(var(--#{variables.$prefix}btn-focus-shadow-rgb), .5);
+  --#{$prefix}btn-padding-x: #{$btn-padding-x};
+  --#{$prefix}btn-padding-y: #{$btn-padding-y};
+  --#{$prefix}btn-font-family: #{$btn-font-family};
+  @include rfs.rfs($btn-font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-font-weight: #{$btn-font-weight};
+  --#{$prefix}btn-line-height: #{$btn-line-height};
+  --#{$prefix}btn-color: #{$btn-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-width: #{$btn-border-width};
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
   // scss-docs-end btn-css-vars
 
   display: inline-block;
-  padding: var(--#{variables.$prefix}btn-padding-y) var(--#{variables.$prefix}btn-padding-x);
-  font-family: var(--#{variables.$prefix}btn-font-family);
-  @include rfs.font-size(var(--#{variables.$prefix}btn-font-size));
-  font-weight: var(--#{variables.$prefix}btn-font-weight);
-  line-height: var(--#{variables.$prefix}btn-line-height);
-  color: var(--#{variables.$prefix}btn-color);
+  padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+  font-family: var(--#{$prefix}btn-font-family);
+  @include rfs.font-size(var(--#{$prefix}btn-font-size));
+  font-weight: var(--#{$prefix}btn-font-weight);
+  line-height: var(--#{$prefix}btn-line-height);
+  color: var(--#{$prefix}btn-color);
   text-align: center;
-  text-decoration: if(variables.$link-decoration == none, null, none);
-  white-space: variables.$btn-white-space;
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: $btn-white-space;
   vertical-align: middle;
-  cursor: if(variables.$enable-button-pointers, pointer, null);
+  cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
-  border: var(--#{variables.$prefix}btn-border-width) solid var(--#{variables.$prefix}btn-border-color);
-  @include border-radius.border-radius(var(--#{variables.$prefix}btn-border-radius));
-  @include gradients.gradient-bg(var(--#{variables.$prefix}btn-bg));
-  @include box-shadow.box-shadow(var(--#{variables.$prefix}btn-box-shadow));
-  @include transition.transition(variables.$btn-transition);
+  border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+  @include border-radius.border-radius(var(--#{$prefix}btn-border-radius));
+  @include gradients.gradient-bg(var(--#{$prefix}btn-bg));
+  @include box-shadow.box-shadow(var(--#{$prefix}btn-box-shadow));
+  @include transition.transition($btn-transition);
 
   &:hover {
-    color: var(--#{variables.$prefix}btn-hover-color);
-    text-decoration: if(variables.$link-hover-decoration == underline, none, null);
-    background-color: var(--#{variables.$prefix}btn-hover-bg);
-    border-color: var(--#{variables.$prefix}btn-hover-border-color);
+    color: var(--#{$prefix}btn-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+    background-color: var(--#{$prefix}btn-hover-bg);
+    border-color: var(--#{$prefix}btn-hover-border-color);
   }
 
   .btn-check + &:hover {
     // override for the checkbox/radio buttons
-    color: var(--#{variables.$prefix}btn-color);
-    background-color: var(--#{variables.$prefix}btn-bg);
-    border-color: var(--#{variables.$prefix}btn-border-color);
+    color: var(--#{$prefix}btn-color);
+    background-color: var(--#{$prefix}btn-bg);
+    border-color: var(--#{$prefix}btn-border-color);
   }
 
   &:focus-visible {
-    color: var(--#{variables.$prefix}btn-hover-color);
-    @include gradients.gradient-bg(var(--#{variables.$prefix}btn-hover-bg));
-    border-color: var(--#{variables.$prefix}btn-hover-border-color);
+    color: var(--#{$prefix}btn-hover-color);
+    @include gradients.gradient-bg(var(--#{$prefix}btn-hover-bg));
+    border-color: var(--#{$prefix}btn-hover-border-color);
     outline: 0;
     // Avoid using mixin so we can pass custom focus shadow properly
-    @if variables.$enable-shadows {
-      box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
     } @else {
-      box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
 
   .btn-check:focus-visible + & {
-    border-color: var(--#{variables.$prefix}btn-hover-border-color);
+    border-color: var(--#{$prefix}btn-hover-border-color);
     outline: 0;
     // Avoid using mixin so we can pass custom focus shadow properly
-    @if variables.$enable-shadows {
-      box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
     } @else {
-      box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
 
@@ -92,41 +91,41 @@
   &:first-child:active,
   &.active,
   &.show {
-    color: var(--#{variables.$prefix}btn-active-color);
-    background-color: var(--#{variables.$prefix}btn-active-bg);
+    color: var(--#{$prefix}btn-active-color);
+    background-color: var(--#{$prefix}btn-active-bg);
     // Remove CSS gradients if they're enabled
-    background-image: if(variables.$enable-gradients, none, null);
-    border-color: var(--#{variables.$prefix}btn-active-border-color);
-    @include box-shadow.box-shadow(var(--#{variables.$prefix}btn-active-shadow));
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-active-border-color);
+    @include box-shadow.box-shadow(var(--#{$prefix}btn-active-shadow));
 
     &:focus-visible {
       // Avoid using mixin so we can pass custom focus shadow properly
-      @if variables.$enable-shadows {
-        box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
       } @else {
-        box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
       }
     }
   }
 
   .btn-check:checked:focus-visible + & {
     // Avoid using mixin so we can pass custom focus shadow properly
-    @if variables.$enable-shadows {
-      box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
     } @else {
-      box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
 
   &:disabled,
   &.disabled,
   fieldset:disabled & {
-    color: var(--#{variables.$prefix}btn-disabled-color);
+    color: var(--#{$prefix}btn-disabled-color);
     pointer-events: none;
-    background-color: var(--#{variables.$prefix}btn-disabled-bg);
-    background-image: if(variables.$enable-gradients, none, null);
-    border-color: var(--#{variables.$prefix}btn-disabled-border-color);
-    opacity: var(--#{variables.$prefix}btn-disabled-opacity);
+    background-color: var(--#{$prefix}btn-disabled-bg);
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-disabled-border-color);
+    opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow.box-shadow(none);
   }
 }
@@ -137,25 +136,25 @@
 //
 
 // scss-docs-start btn-variant-loops
-@each $color, $value in variables.$theme-colors {
+@each $color, $value in $theme-colors {
   .btn-#{$color} {
     @if $color == "light" {
       @include buttons.button-variant(
         $value,
         $value,
-        $hover-background: functions.shade-color($value, variables.$btn-hover-bg-shade-amount),
-        $hover-border: functions.shade-color($value, variables.$btn-hover-border-shade-amount),
-        $active-background: functions.shade-color($value, variables.$btn-active-bg-shade-amount),
-        $active-border: functions.shade-color($value, variables.$btn-active-border-shade-amount)
+        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+        $active-background: shade-color($value, $btn-active-bg-shade-amount),
+        $active-border: shade-color($value, $btn-active-border-shade-amount)
       );
     } @else if $color == "dark" {
       @include buttons.button-variant(
         $value,
         $value,
-        $hover-background: functions.tint-color($value, variables.$btn-hover-bg-tint-amount),
-        $hover-border: functions.tint-color($value, variables.$btn-hover-border-tint-amount),
-        $active-background: functions.tint-color($value, variables.$btn-active-bg-tint-amount),
-        $active-border: functions.tint-color($value, variables.$btn-active-border-tint-amount)
+        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+        $active-background: tint-color($value, $btn-active-bg-tint-amount),
+        $active-border: tint-color($value, $btn-active-border-tint-amount)
       );
     } @else {
       @include buttons.button-variant($value, $value);
@@ -163,7 +162,7 @@
   }
 }
 
-@each $color, $value in variables.$theme-colors {
+@each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @include buttons.button-outline-variant($value);
   }
@@ -177,35 +176,35 @@
 
 // Make a button look and behave like a link
 .btn-link {
-  --#{variables.$prefix}btn-font-weight: #{variables.$font-weight-normal};
-  --#{variables.$prefix}btn-color: #{variables.$btn-link-color};
-  --#{variables.$prefix}btn-bg: transparent;
-  --#{variables.$prefix}btn-border-color: transparent;
-  --#{variables.$prefix}btn-hover-color: #{variables.$btn-link-hover-color};
-  --#{variables.$prefix}btn-hover-border-color: transparent;
-  --#{variables.$prefix}btn-active-color: #{variables.$btn-link-hover-color};
-  --#{variables.$prefix}btn-active-border-color: transparent;
-  --#{variables.$prefix}btn-disabled-color: #{variables.$btn-link-disabled-color};
-  --#{variables.$prefix}btn-disabled-border-color: transparent;
-  --#{variables.$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
-  --#{variables.$prefix}btn-focus-shadow-rgb: #{variables.$btn-link-focus-shadow-rgb};
-
-  text-decoration: variables.$link-decoration;
-  @if variables.$enable-gradients {
+  --#{$prefix}btn-font-weight: #{$font-weight-normal};
+  --#{$prefix}btn-color: #{$btn-link-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-active-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
+  --#{$prefix}btn-disabled-border-color: transparent;
+  --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
+
+  text-decoration: $link-decoration;
+  @if $enable-gradients {
     background-image: none;
   }
 
   &:hover,
   &:focus-visible {
-    text-decoration: variables.$link-hover-decoration;
+    text-decoration: $link-hover-decoration;
   }
 
   &:focus-visible {
-    color: var(--#{variables.$prefix}btn-color);
+    color: var(--#{$prefix}btn-color);
   }
 
   &:hover {
-    color: var(--#{variables.$prefix}btn-hover-color);
+    color: var(--#{$prefix}btn-hover-color);
   }
 
   // No need for an active state here
@@ -217,9 +216,9 @@
 //
 
 .btn-lg {
-  @include buttons.button-size(variables.$btn-padding-y-lg, variables.$btn-padding-x-lg, variables.$btn-font-size-lg, variables.$btn-border-radius-lg);
+  @include buttons.button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
 }
 
 .btn-sm {
-  @include buttons.button-size(variables.$btn-padding-y-sm, variables.$btn-padding-x-sm, variables.$btn-font-size-sm, variables.$btn-border-radius-sm);
+  @include buttons.button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
 }

diff --git a/scss/_card.scss b/scss/_card.scss
index 8897445ee0a59c13b6bb0624ef1dd2ce6ea2586d..19c4085c8d03064afccacabb30d62849f8db5f7d 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
 @use "mixins/breakpoints";
-@use "variables";
+@use "setup/variables";
 
 //
 // Base styles

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 3a12313fdd8cb6b41dd2dc90864912e6e7b97e91..5a1ba666da0216409998027547228de1b68e74dd 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -2,7 +2,7 @@
 @use "mixins/clearfix";
 @use "mixins/color-mode";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 
 // Notes on the classes:
 //

diff --git a/scss/_close.scss b/scss/_close.scss
index cde2347f71983261c89f41016baf3d3417912d73..c8d48c72729daf9e6427744021f890a382d42130 100644 (file)
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -1,7 +1,7 @@
 @use "functions";
 @use "mixins/border-radius";
 @use "mixins/color-mode";
-@use "variables";
+@use "setup/variables";
 
 // Transparent background and border properties included for button version.
 // iOS requires the button element instead of an anchor tag.

diff --git a/scss/_containers.scss b/scss/_containers.scss
index 628c475c65568bb029144bae2cec8b4aeadd3c6c..d025074a9c8cc5398e6b29e27cb56803ce3961c6 100644 (file)
--- a/scss/_containers.scss
+++ b/scss/_containers.scss
@@ -1,6 +1,6 @@
 @use "mixins/breakpoints";
 @use "mixins/container";
-@use "variables";
+@use "setup/variables";
 
 // Container widths
 //

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 74374c39fca1bf91bfb36697b8353ccf78e04f6c..09178b4ba34bae89ed16fcb366f1ae070b8a34ff 100644 (file)
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -4,7 +4,7 @@
 @use "mixins/breakpoints";
 @use "mixins/caret";
 @use "mixins/gradients";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // The dropdown wrapper (`<div>`)

diff --git a/scss/_functions.scss b/scss/_functions.scss
index d6f804b56222921a161c57281f8a02a795517b37..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -1,312 +0,0 @@
-@use "sass:color";
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-// @use "variables";
-
-// Bootstrap functions
-//
-// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
-
-// 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}.";
-    }
-  }
-}
-
-// Colors
-@function to-rgb($value) {
-  @return color.red($value), color.green($value), color.blue($value);
-}
-
-// stylelint-disable scss/dollar-variable-pattern
-@function rgba-css-var($identifier, $target) {
-  @if $identifier == "body" and $target == "bg" {
-    @return rgba(var(--#{variables.$prefix}#{$identifier}-bg-rgb), var(--#{variables.$prefix}#{$target}-opacity));
-  } @if $identifier == "body" and $target == "text" {
-    @return rgba(var(--#{variables.$prefix}#{$identifier}-color-rgb), var(--#{variables.$prefix}#{$target}-opacity));
-  } @else {
-    @return rgba(var(--#{variables.$prefix}#{$identifier}-rgb), var(--#{variables.$prefix}#{$target}-opacity));
-  }
-}
-
-@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 == "$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
-
-@function varify($list) {
-  $result: null;
-  @each $entry in $list {
-    $result: list.append($result, var(--#{variables.$prefix}#{$entry}), space);
-  }
-  @return $result;
-}
-
-// 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;
-}
-
-// 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;
-}
-
-// 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 variables.$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;
-}
-
-// Color contrast
-// See https://github.com/twbs/bootstrap/pull/30168
-
-// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
-// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
-$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
-
-@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
-  $foregrounds: $color-contrast-light, $color-contrast-dark, variables.$white, variables.$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: variables.$color-contrast-light) {
-  $l1: luminance($background);
-  $l2: luminance(opaque($background, $foreground));
-
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
-}
-
-// Return WCAG2.1 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.red($color),
-    "g": color.green($color),
-    "b": color.blue($color)
-  );
-
-  @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
-    $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, opacity($foreground) * 100%);
-}
-
-// mdo-do: Replace tint-color and shade-color with color.adjust(COLOR, $lightness: %).
-
-// 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
-
-// Return valid calc
-// @function add($value1, $value2, $return-calc: true) {
-//   @if $value1 == null {
-//     @return $value2;
-//   }
-
-//   @if $value2 == null {
-//     @return $value1;
-//   }
-
-//   @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-//     @return $value1 + $value2;
-//   }
-
-//   @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + 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 type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-//     @return $value1 - $value2;
-//   }
-
-//   @if type-of($value2) != number {
-//     $value2: unquote("(") + $value2 + unquote(")");
-//   }
-
-//   @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
-// }
-
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: math.abs($dividend);
-  $divisor: math.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/_grid.scss b/scss/_grid.scss
index fa39489bf59c111a0d531f9bc8fac9e2ca268c6d..60d5e010ecfa71528c505aec4e614b106e0f28af 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -1,5 +1,5 @@
 @use "mixins/grid";
-@use "variables";
+@use "setup/variables";
 
 // Row
 //

diff --git a/scss/_images.scss b/scss/_images.scss
index 26d627f6de8138c9c25a619a197c84cd91f25b62..1ac3e98d3d6be143d3784042bc12876b5a34787e 100644 (file)
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
 @use "mixins/image";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Responsive images (ensure images don't scale beyond their parents)

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 40d95fc19654eef9b8ad86947103152e33e46ebc..bbb035a468ac676364935a1346f8f928cb9ca772 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "mixins/border-radius";
 @use "mixins/breakpoints";
-@use "variables";
+@use "setup/variables";
 
 // Base class
 //

diff --git a/scss/_maps.scss b/scss/_maps.scss
index f35e1db9182ffc69ebaf490bedcf4348cbc1efa4..795f7ca42de16d8c9655cdc415c46038e378a3dd 100644 (file)
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -2,7 +2,7 @@
 @use "setup/variables" as *;
 @use "setup/functions" as *;
 // @use "functions";
-// @use "variables";
+// @use "setup/variables";
 
 // Re-assigned maps
 //

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 3b39de0d058cb11e65eec1c52c7b3d3010e51c3f..a41873fb5e85c88986dd83fcb4f08ccad8ced87b 100644 (file)
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -4,7 +4,7 @@
 @use "mixins/box-shadow";
 @use "mixins/breakpoints";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 
 // stylelint-disable function-disallowed-list
 

diff --git a/scss/_nav.scss b/scss/_nav.scss
index d52c1a18ee12fc6420e0c38a22fef81eeda938a2..23599021fc0edb32c2d1b279088d2fe35bfb4551 100644 (file)
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/gradients";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Base class

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 50c65b3c4e408735f55ba07527731dfa36e3fd03..3a245912faa0b57d7fe427af93070eec41461aee 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -7,7 +7,7 @@
 @use "mixins/deprecate";
 @use "mixins/gradients";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Navbar

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 9a08262cb91e5c6eb9f7131f7be4f3ea1ce83ca4..b133522f270f42a9694bff983c613e489d2518d6 100644 (file)
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -3,7 +3,7 @@
 @use "mixins/box-shadow";
 @use "mixins/breakpoints";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 
 // stylelint-disable function-disallowed-list
 

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 7295208ec6842f481808f78e8b052417441b9fad..5536e05f29eaf34675f4880486abf8248aa0884f 100644 (file)
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -3,7 +3,7 @@
 @use "mixins/lists";
 @use "mixins/pagination";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 .pagination {

diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss
index 2bee991b88302b2882b65358da30d095bc37d40d..b1778368be3a61136433ca71ba05e42512007059 100644 (file)
--- a/scss/_placeholders.scss
+++ b/scss/_placeholders.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use "setup/variables";
 
 .placeholder {
   display: inline-block;

diff --git a/scss/_popover.scss b/scss/_popover.scss
index 8a37b1038d9fd7552c84389eb8454287d63e676a..6932b2fb1192639d796de8a7b4550eecd302ad0a 100644 (file)
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
 @use "mixins/reset-text";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 .popover {

diff --git a/scss/_progress.scss b/scss/_progress.scss
index 4036fa28e9ebb8a34eb48bd9990cb09f53ae3d6a..4e1230bdd2e193b059268d20d262c494a3d947d5 100644 (file)
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -2,7 +2,7 @@
 @use "mixins/box-shadow";
 @use "mixins/gradients";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Disable animation if transitions are disabled

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 85395400ab5de02c48021f848b94a9d61342e047..498f0f159f7e2281dae6b33281b3751a2610d763 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,5 +1,5 @@
 @use "mixins/border-radius";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix

diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 059dff0077e367269c5b7aa310f0a59c4526f0a3..dae065f2b16b7e43222a6b37b2c588ee90fe4b57 100644 (file)
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use "setup/variables";
 
 //
 // Rotating border

diff --git a/scss/_tables.scss b/scss/_tables.scss
index aa92050ae7369afa7a8445ca2c1e766e11692f58..0345a2ca8733c57530084d3fb17ebe9ba1e0156b 100644 (file)
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "mixins/breakpoints";
 @use "mixins/table-variants";
-@use "variables";
+@use "setup/variables";
 
 //
 // Basic Bootstrap table

diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 93a0f4a71b52e2f11026e3b7c73132b1ec9fbc79..bec94f350b64a1ae4cecb8ca5a976258e46ebea7 100644 (file)
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,5 +1,5 @@
 @use "mixins/border-radius";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 .toast {

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index a5e579dc578375024d66a8edcef7bc7c64a58a2f..9aa065c4c8c208c5651a414668cae900c20e8a93 100644 (file)
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/deprecate";
 @use "mixins/reset-text";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Base class

diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index 3b37c8392fe0b284435b0cb9b2e3efa022126ae6..c536376818d237d6857919e078438dd8dfcfeb90 100644 (file)
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -1,5 +1,5 @@
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 
 .fade {
   @include transition.transition(variables.$transition-fade);

diff --git a/scss/_type.scss b/scss/_type.scss
index 48f51659bd03f4e41f45d23b20d2322dc21b0802..d523c481dc05aa0016a94b2149d12c9709b95e10 100644 (file)
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -1,6 +1,7 @@
 @use "mixins/lists";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
+@use "reboot";
 
 //
 // Headings

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index fba70c6be11734cd574685903edd1b604f43c3db..860e504130a203f02e5866f9f0527f0cf9d3ffb0 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "functions";
 @use "maps";
-@use "variables";
+@use "setup/variables";
 
 // Utilities
 

diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index aa9c6cb5100088d79b9c5fa345d70839b07661a9..237b6c4fc87a448b3deed9a232b29e46082d18ef 100644 (file)
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -16,14 +16,14 @@
 
 // Layout & components
 @use "root";
-// @use "reboot";
-// @use "type";
-// @use "images";
-// @use "containers";
-// @use "grid";
-// @use "tables";
-// @use "forms";
-// @use "buttons";
+@use "reboot";
+@use "type";
+@use "images";
+@use "containers";
+@use "grid";
+@use "tables";
+@use "forms";
+@use "buttons";
 // @use "transitions";
 // @use "dropdown";
 // @use "button-group";

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 7fd032b68a853d832a3e427978621a1555f9f38e..5ada388bddf66bd4f57d6cc348bf9e8f54c559c2 100644 (file)
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,6 +1,6 @@
 @use "../mixins/border-radius";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup/variables";
 
 .form-floating {
   position: relative;

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 1d8d8a0202617920057b472a7897b90a019b4053..ed1ef8f4e141a9cf1dd7fe1360f207ab80b226ec 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -1,8 +1,7 @@
-@use "../functions";
 @use "../mixins/border-radius";
 @use "../mixins/color-mode";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup" as *;
 
 //
 // Check/radio
@@ -10,101 +9,101 @@
 
 .form-check {
   display: block;
-  min-height: variables.$form-check-min-height;
-  padding-left: variables.$form-check-padding-start;
-  margin-bottom: variables.$form-check-margin-bottom;
+  min-height: $form-check-min-height;
+  padding-left: $form-check-padding-start;
+  margin-bottom: $form-check-margin-bottom;
 
   .form-check-input {
     float: left;
-    margin-left: variables.$form-check-padding-start * -1;
+    margin-left: $form-check-padding-start * -1;
   }
 }
 
 .form-check-reverse {
-  padding-right: variables.$form-check-padding-start;
+  padding-right: $form-check-padding-start;
   padding-left: 0;
   text-align: right;
 
   .form-check-input {
     float: right;
-    margin-right: variables.$form-check-padding-start * -1;
+    margin-right: $form-check-padding-start * -1;
     margin-left: 0;
   }
 }
 
 .form-check-input {
-  --#{variables.$prefix}form-check-bg: #{variables.$form-check-input-bg};
+  --#{$prefix}form-check-bg: #{$form-check-input-bg};
 
   flex-shrink: 0;
-  width: variables.$form-check-input-width;
-  height: variables.$form-check-input-width;
-  margin-top: (variables.$line-height-base - variables.$form-check-input-width) * .5; // line-height minus check height
+  width: $form-check-input-width;
+  height: $form-check-input-width;
+  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
   vertical-align: top;
   appearance: none;
-  background-color: var(--#{variables.$prefix}form-check-bg);
-  background-image: var(--#{variables.$prefix}form-check-bg-image);
+  background-color: var(--#{$prefix}form-check-bg);
+  background-image: var(--#{$prefix}form-check-bg-image);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
-  border: variables.$form-check-input-border;
+  border: $form-check-input-border;
   print-color-adjust: exact; // Keep themed appearance for print
-  @include transition.transition(variables.$form-check-transition);
+  @include transition.transition($form-check-transition);
 
   &[type="checkbox"] {
-    @include border-radius.border-radius(variables.$form-check-input-border-radius);
+    @include border-radius.border-radius($form-check-input-border-radius);
   }
 
   &[type="radio"] {
     // stylelint-disable-next-line property-disallowed-list
-    border-radius: variables.$form-check-radio-border-radius;
+    border-radius: $form-check-radio-border-radius;
   }
 
   &:active {
-    filter: variables.$form-check-input-active-filter;
+    filter: $form-check-input-active-filter;
   }
 
   &:focus {
-    border-color: variables.$form-check-input-focus-border;
+    border-color: $form-check-input-focus-border;
     outline: 0;
-    box-shadow: variables.$form-check-input-focus-box-shadow;
+    box-shadow: $form-check-input-focus-box-shadow;
   }
 
   &:checked {
-    background-color: variables.$form-check-input-checked-bg-color;
-    border-color: variables.$form-check-input-checked-border-color;
+    background-color: $form-check-input-checked-bg-color;
+    border-color: $form-check-input-checked-border-color;
 
     &[type="checkbox"] {
-      @if variables.$enable-gradients {
-        --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)}, var(--#{variables.$prefix}gradient);
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)};
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
       }
     }
 
     &[type="radio"] {
-      @if variables.$enable-gradients {
-        --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)}, var(--#{variables.$prefix}gradient);
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)};
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
       }
     }
   }
 
   &[type="checkbox"]:indeterminate {
-    background-color: variables.$form-check-input-indeterminate-bg-color;
-    border-color: variables.$form-check-input-indeterminate-border-color;
+    background-color: $form-check-input-indeterminate-bg-color;
+    border-color: $form-check-input-indeterminate-border-color;
 
-    @if variables.$enable-gradients {
-      --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)}, var(--#{variables.$prefix}gradient);
+    @if $enable-gradients {
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
     } @else {
-      --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)};
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
     }
   }
 
   &:disabled {
     pointer-events: none;
     filter: none;
-    opacity: variables.$form-check-input-disabled-opacity;
+    opacity: $form-check-input-disabled-opacity;
   }
 
   // Use disabled attribute in addition of :disabled pseudo-class
@@ -113,14 +112,14 @@
   &:disabled {
     ~ .form-check-label {
       cursor: default;
-      opacity: variables.$form-check-label-disabled-opacity;
+      opacity: $form-check-label-disabled-opacity;
     }
   }
 }
 
 .form-check-label {
-  color: variables.$form-check-label-color;
-  cursor: variables.$form-check-label-cursor;
+  color: $form-check-label-color;
+  cursor: $form-check-label-cursor;
 }
 
 //
@@ -128,39 +127,39 @@
 //
 
 .form-switch {
-  padding-left: variables.$form-switch-padding-start;
+  padding-left: $form-switch-padding-start;
 
   .form-check-input {
-    --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-bg-image)};
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
 
-    width: variables.$form-switch-width;
-    margin-left: variables.$form-switch-padding-start * -1;
-    background-image: var(--#{variables.$prefix}form-switch-bg);
+    width: $form-switch-width;
+    margin-left: $form-switch-padding-start * -1;
+    background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
-    @include border-radius.border-radius(variables.$form-switch-border-radius, 0);
-    @include transition.transition(variables.$form-switch-transition);
+    @include border-radius.border-radius($form-switch-border-radius, 0);
+    @include transition.transition($form-switch-transition);
 
     &:focus {
-      --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-focus-bg-image)};
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
     }
 
     &:checked {
-      background-position: variables.$form-switch-checked-bg-position;
+      background-position: $form-switch-checked-bg-position;
 
-      @if variables.$enable-gradients {
-        --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)}, var(--#{variables.$prefix}gradient);
+      @if $enable-gradients {
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)};
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
       }
     }
   }
 
   &.form-check-reverse {
-    padding-right: variables.$form-switch-padding-start;
+    padding-right: $form-switch-padding-start;
     padding-left: 0;
 
     .form-check-input {
-      margin-right: variables.$form-switch-padding-start * -1;
+      margin-right: $form-switch-padding-start * -1;
       margin-left: 0;
     }
   }
@@ -168,7 +167,7 @@
 
 .form-check-inline {
   display: inline-block;
-  margin-right: variables.$form-check-inline-margin-end;
+  margin-right: $form-check-inline-margin-end;
 }
 
 .btn-check {
@@ -181,15 +180,15 @@
     + .btn {
       pointer-events: none;
       filter: none;
-      opacity: variables.$form-check-btn-check-disabled-opacity;
+      opacity: $form-check-btn-check-disabled-opacity;
     }
   }
 }
 
-@if variables.$enable-dark-mode {
+@if $enable-dark-mode {
   @include color-mode.color-mode(dark) {
     .form-switch .form-check-input:not(:checked):not(:focus) {
-      --#{variables.$prefix}form-switch-bg: #{functions.escape-svg($form-switch-bg-image-dark)};
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
     }
   }
 }

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 3f3d8323a850f2604ccfdc0e26579a07e6da700a..03b078f9e7ea81a54774a04f621c643aa7cbdfaa 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -3,7 +3,7 @@
 @use "../mixins/box-shadow";
 @use "../mixins/gradients";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 //

diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 86ceb04aa3539006376e5a55ea4b9bcd0572b08c..c408af0b6f4cb75c746e655abfbeb59864730601 100644 (file)
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -2,7 +2,7 @@
 @use "../mixins/box-shadow";
 @use "../mixins/gradients";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup/variables";
 
 // Range
 //

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 92e70d22f60ef66d79b3cbb4d6529d32af057fdf..7adca06ed78bc40e4a1aa6d2524b41451f7a8976 100644 (file)
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -1,9 +1,8 @@
-@use "../functions";
 @use "../mixins/border-radius";
 @use "../mixins/box-shadow";
 @use "../mixins/color-mode";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup" as *;
 @use "../vendor/rfs";
 
 // Select
@@ -12,77 +11,77 @@
 // https://primer.github.io/.
 
 .form-select {
-  --#{variables.$prefix}form-select-bg-img: #{functions.escape-svg(variables.$form-select-indicator)};
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
 
   display: block;
   width: 100%;
-  padding: variables.$form-select-padding-y variables.$form-select-indicator-padding variables.$form-select-padding-y variables.$form-select-padding-x;
-  font-family: variables.$form-select-font-family;
-  @include rfs.font-size(variables.$form-select-font-size);
-  font-weight: variables.$form-select-font-weight;
-  line-height: variables.$form-select-line-height;
-  color: variables.$form-select-color;
+  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+  font-family: $form-select-font-family;
+  @include rfs.font-size($form-select-font-size);
+  font-weight: $form-select-font-weight;
+  line-height: $form-select-line-height;
+  color: $form-select-color;
   appearance: none;
-  background-color: variables.$form-select-bg;
-  background-image: var(--#{variables.$prefix}form-select-bg-img), var(--#{variables.$prefix}form-select-bg-icon, none);
+  background-color: $form-select-bg;
+  background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
   background-repeat: no-repeat;
-  background-position: variables.$form-select-bg-position;
-  background-size: variables.$form-select-bg-size;
-  border: variables.$form-select-border-width solid variables.$form-select-border-color;
-  @include border-radius.border-radius(variables.$form-select-border-radius, 0);
-  @include box-shadow.box-shadow(variables.$form-select-box-shadow);
-  @include transition.transition(variables.$form-select-transition);
+  background-position: $form-select-bg-position;
+  background-size: $form-select-bg-size;
+  border: $form-select-border-width solid $form-select-border-color;
+  @include border-radius.border-radius($form-select-border-radius, 0);
+  @include box-shadow.box-shadow($form-select-box-shadow);
+  @include transition.transition($form-select-transition);
 
   &:focus {
-    border-color: variables.$form-select-focus-border-color;
+    border-color: $form-select-focus-border-color;
     outline: 0;
-    @if variables.$enable-shadows {
-      @include box-shadow.box-shadow(variables.$form-select-box-shadow, variables.$form-select-focus-box-shadow);
+    @if $enable-shadows {
+      @include box-shadow.box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
     } @else {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: variables.$form-select-focus-box-shadow;
+      box-shadow: $form-select-focus-box-shadow;
     }
   }
 
   &[multiple],
   &[size]:not([size="1"]) {
-    padding-right: variables.$form-select-padding-x;
+    padding-right: $form-select-padding-x;
     background-image: none;
   }
 
   &:disabled {
-    color: variables.$form-select-disabled-color;
-    background-color: variables.$form-select-disabled-bg;
-    border-color: variables.$form-select-disabled-border-color;
+    color: $form-select-disabled-color;
+    background-color: $form-select-disabled-bg;
+    border-color: $form-select-disabled-border-color;
   }
 
   // Remove outline from select box in FF
   &:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 variables.$form-select-color;
+    text-shadow: 0 0 0 $form-select-color;
   }
 }
 
 .form-select-sm {
-  padding-top: variables.$form-select-padding-y-sm;
-  padding-bottom: variables.$form-select-padding-y-sm;
-  padding-left: variables.$form-select-padding-x-sm;
-  @include rfs.font-size(variables.$form-select-font-size-sm);
-  @include border-radius.border-radius(variables.$form-select-border-radius-sm);
+  padding-top: $form-select-padding-y-sm;
+  padding-bottom: $form-select-padding-y-sm;
+  padding-left: $form-select-padding-x-sm;
+  @include rfs.font-size($form-select-font-size-sm);
+  @include border-radius.border-radius($form-select-border-radius-sm);
 }
 
 .form-select-lg {
-  padding-top: variables.$form-select-padding-y-lg;
-  padding-bottom: variables.$form-select-padding-y-lg;
-  padding-left: variables.$form-select-padding-x-lg;
-  @include rfs.font-size(variables.$form-select-font-size-lg);
-  @include border-radius.border-radius(variables.$form-select-border-radius-lg);
+  padding-top: $form-select-padding-y-lg;
+  padding-bottom: $form-select-padding-y-lg;
+  padding-left: $form-select-padding-x-lg;
+  @include rfs.font-size($form-select-font-size-lg);
+  @include border-radius.border-radius($form-select-border-radius-lg);
 }
 
-@if variables.$enable-dark-mode {
+@if $enable-dark-mode {
   @include color-mode.color-mode(dark) {
     .form-select {
-      --#{variables.$prefix}form-select-bg-img: #{functions.escape-svg($form-select-indicator-dark)};
+      --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
     }
   }
 }

diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss
index 4da63f44b96df10a15ca28e2872155a134a2369c..cb8abe2df93c2d73ecc9c7b6a89e155010c89d96 100644 (file)
--- a/scss/forms/_form-text.scss
+++ b/scss/forms/_form-text.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 //

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index db0ac80c4c68a0caa9f8f898d02d06b63d2725c7..9776089d4f32ab24293a88c2a11ed89a52387b63 100644 (file)
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "sass:string";
 @use "../mixins/border-radius";
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 //

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index 1a26eb2c6cb95f18be451271d69260b420b3b271..c6be8f73621fd549d7fdf33a0a9dc81aa247ce11 100644 (file)
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 //

diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index 372fb7aa49129f0f06f21da2332829e0d7d4fbb7..f913c1258d51de64d7af63b6c986c127d8fc899b 100644 (file)
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -1,5 +1,5 @@
 @use "../mixins/forms";
-@use "../variables";
+@use "../setup/variables";
 
 // Form validation
 //

diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index adbc31911de5b908fc2e06928bf0efbcc4a64c61..e5394280e792b10981e46bda4577403ac8256cc6 100644 (file)
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -1,5 +1,5 @@
 @use "../functions";
-@use "../variables";
+@use "../setup/variables";
 
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in variables.$theme-colors {

diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 74307d2592afeebf548e5edc0976302fd3b79c32..aa6d539317f2b1b7e08846f509c4b491fe278a92 100644 (file)
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -1,5 +1,5 @@
 @use "../functions";
-@use "../variables";
+@use "../setup/variables";
 
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in variables.$theme-colors {

diff --git a/scss/helpers/_focus-ring.scss b/scss/helpers/_focus-ring.scss
index 7f9a25a42e7d5bfe837071aea4ce1dec05409da6..f310b59c295d1d2e2c0f92bda35caccd0a73177b 100644 (file)
--- a/scss/helpers/_focus-ring.scss
+++ b/scss/helpers/_focus-ring.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 .focus-ring:focus {
   outline: 0;

diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss
index 49aa757a97db36cfa073f400e0a42a833a9264a6..c30fa857b7efc95ba55dad378ee43bc1e828081e 100644 (file)
--- a/scss/helpers/_icon-link.scss
+++ b/scss/helpers/_icon-link.scss
@@ -1,5 +1,5 @@
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup/variables";
 
 .icon-link {
   display: inline-flex;

diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss
index 37544e9499bbfbf2f47b158c4e3c420d978fe9cc..d792d69d461e5c0d91437967ca25aec61ad5f80f 100644 (file)
--- a/scss/helpers/_position.scss
+++ b/scss/helpers/_position.scss
@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "../mixins/breakpoints";
-@use "../variables";
+@use "../setup/variables";
 
 // Shorthand
 

diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss
index b11f102e81508d9eb1f609ef80f10c8739081bc0..969871682dbd4e67d3b1073e6345d878b4993b09 100644 (file)
--- a/scss/helpers/_ratio.scss
+++ b/scss/helpers/_ratio.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 // Credit: Nicolas Gallagher and SUIT CSS.
 

diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss
index f31ae8f618632be3dacc57f053c5a949328c38eb..a538fe06aff97d053042005417d56db5ace8ab63 100644 (file)
--- a/scss/helpers/_stretched-link.scss
+++ b/scss/helpers/_stretched-link.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 //
 // Stretched link

diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
index 462192386cf5824588c092311c3dd5746bb81a05..8b07e058785f9022b507781418fd8c92b5e7a5c3 100644 (file)
--- a/scss/helpers/_vr.scss
+++ b/scss/helpers/_vr.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 .vr {
   display: inline-block;

diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 3809934a35aa99e977f4d0537618658e78647653..e97b5730acd98822445b7c800c2456bbc1df6a89 100644 (file)
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -1,6 +1,6 @@
 @use "sass:list";
 @use "sass:meta";
-@use "../variables";
+@use "../setup/variables";
 
 // stylelint-disable property-disallowed-list
 // Single side border-radius

diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss
index 2fc140e59d16b434910033457dabed296d197d3a..d7757f98aa83f6a17de849dd09368349554380fd 100644 (file)
--- a/scss/mixins/_box-shadow.scss
+++ b/scss/mixins/_box-shadow.scss
@@ -1,5 +1,5 @@
 @use "sass:list";
-@use "../variables";
+@use "../setup/variables";
 
 @mixin box-shadow($shadow...) {
   @if variables.$enable-shadows {

diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 0ca37485c6d0c4563e7278440d3fc0e235bba9ba..e0091e87669d36a416695d9d67d1387ef09416eb 100644 (file)
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -1,6 +1,6 @@
 @use "sass:list";
 @use "sass:map";
-@use "../variables";
+@use "../setup/variables";
 
 // Breakpoint viewport sizes and media queries.
 //

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index c6a283d5865e186128bc61260c4772eb13567a13..89907edd858def4d342a9d054f7b1094c524c22d 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -1,6 +1,5 @@
 @use "sass:color";
-@use "../functions";
-@use "../variables";
+@use "../setup" as *;
 @use "../vendor/rfs";
 
 // Button variants
@@ -12,64 +11,64 @@
 @mixin button-variant(
   $background,
   $border,
-  $color: functions.color-contrast($background),
-  $hover-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-hover-bg-shade-amount), functions.tint-color($background, variables.$btn-hover-bg-tint-amount)),
-  $hover-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-hover-border-shade-amount), functions.tint-color($border, variables.$btn-hover-border-tint-amount)),
-  $hover-color: functions.color-contrast($hover-background),
-  $active-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-active-bg-shade-amount), functions.tint-color($background, variables.$btn-active-bg-tint-amount)),
-  $active-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-active-border-shade-amount), functions.tint-color($border, variables.$btn-active-border-tint-amount)),
-  $active-color: functions.color-contrast($active-background),
+  $color: color-contrast($background),
+  $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),
+  $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),
   $disabled-background: $background,
   $disabled-border: $border,
-  $disabled-color: functions.color-contrast($disabled-background)
+  $disabled-color: color-contrast($disabled-background)
 ) {
-  --#{variables.$prefix}btn-color: #{$color};
-  --#{variables.$prefix}btn-bg: #{$background};
-  --#{variables.$prefix}btn-border-color: #{$border};
-  --#{variables.$prefix}btn-hover-color: #{$hover-color};
-  --#{variables.$prefix}btn-hover-bg: #{$hover-background};
-  --#{variables.$prefix}btn-hover-border-color: #{$hover-border};
-  --#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb(color.mix($color, $border, 15%))};
-  --#{variables.$prefix}btn-active-color: #{$active-color};
-  --#{variables.$prefix}btn-active-bg: #{$active-background};
-  --#{variables.$prefix}btn-active-border-color: #{$active-border};
-  --#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
-  --#{variables.$prefix}btn-disabled-color: #{$disabled-color};
-  --#{variables.$prefix}btn-disabled-bg: #{$disabled-background};
-  --#{variables.$prefix}btn-disabled-border-color: #{$disabled-border};
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$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};
 }
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin
 @mixin button-outline-variant(
   $color,
-  $color-hover: functions.color-contrast($color),
+  $color-hover: color-contrast($color),
   $active-background: $color,
   $active-border: $color,
-  $active-color: functions.color-contrast($active-background)
+  $active-color: color-contrast($active-background)
 ) {
-  --#{variables.$prefix}btn-color: #{$color};
-  --#{variables.$prefix}btn-border-color: #{$color};
-  --#{variables.$prefix}btn-hover-color: #{$color-hover};
-  --#{variables.$prefix}btn-hover-bg: #{$active-background};
-  --#{variables.$prefix}btn-hover-border-color: #{$active-border};
-  --#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb($color)};
-  --#{variables.$prefix}btn-active-color: #{$active-color};
-  --#{variables.$prefix}btn-active-bg: #{$active-background};
-  --#{variables.$prefix}btn-active-border-color: #{$active-border};
-  --#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
-  --#{variables.$prefix}btn-disabled-color: #{$color};
-  --#{variables.$prefix}btn-disabled-bg: transparent;
-  --#{variables.$prefix}btn-disabled-border-color: #{$color};
-  --#{variables.$prefix}gradient: none;
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$active-background};
+  --#{$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};
+  --#{$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-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{variables.$prefix}btn-padding-y: #{$padding-y};
-  --#{variables.$prefix}btn-padding-x: #{$padding-x};
-  @include rfs.rfs($font-size, --#{variables.$prefix}btn-font-size);
-  --#{variables.$prefix}btn-border-radius: #{$border-radius};
+  --#{$prefix}btn-padding-y: #{$padding-y};
+  --#{$prefix}btn-padding-x: #{$padding-x};
+  @include rfs.rfs($font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-border-radius: #{$border-radius};
 }
 // scss-docs-end btn-size-mixin

diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index 2f1a1e1472f4ee77a9e1bbbc95eeceb0ddd9be07..c1b508dabbd8063f7dabcaf462a557634bc3835f 100644 (file)
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 // scss-docs-start caret-mixins
 @mixin caret-down($width: variables.$caret-width) {

diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss
index 1073ce3ab2aa45cef73d34b609602e11ead5f8c4..28062e811d3df309ce7e733cad56b245328613eb 100644 (file)
--- a/scss/mixins/_container.scss
+++ b/scss/mixins/_container.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 // Container mixins
 

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 608b6e5d00439e64dc33a3f9b74a137de9eab589..e1c2e1834e22c0f43c29abba80e0c039737a1258 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -1,8 +1,7 @@
-@use "../functions";
-@use "../variables";
 @use "../vendor/rfs";
 @use "border-radius";
 @use "box-shadow";
+@use "../setup" 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
@@ -25,17 +24,17 @@
   $state,
   $color,
   $icon,
-  $tooltip-color: functions.color-contrast($color),
-  $tooltip-bg-color: rgba($color, variables.$form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 variables.$input-btn-focus-blur variables.$input-focus-width rgba($color, variables.$input-btn-focus-color-opacity),
+  $tooltip-color: color-contrast($color),
+  $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
 ) {
   .#{$state}-feedback {
     display: none;
     width: 100%;
-    margin-top: variables.$form-feedback-margin-top;
-    @include rfs.font-size(variables.$form-feedback-font-size);
-    font-style: variables.$form-feedback-font-style;
+    margin-top: $form-feedback-margin-top;
+    @include rfs.font-size($form-feedback-font-size);
+    font-style: $form-feedback-font-style;
     color: $color;
   }
 
@@ -45,13 +44,13 @@
     z-index: 5;
     display: none;
     max-width: 100%; // Contain to parent when possible
-    padding: variables.$form-feedback-tooltip-padding-y variables.$form-feedback-tooltip-padding-x;
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
     margin-top: .1rem;
-    @include rfs.font-size(variables.$form-feedback-tooltip-font-size);
-    line-height: variables.$form-feedback-tooltip-line-height;
+    @include rfs.font-size($form-feedback-tooltip-font-size);
+    line-height: $form-feedback-tooltip-line-height;
     color: $tooltip-color;
     background-color: $tooltip-bg-color;
-    @include border-radius.border-radius(variables.$form-feedback-tooltip-border-radius);
+    @include border-radius.border-radius($form-feedback-tooltip-border-radius);
   }
 
   @include form-validation-state-selector($state) {
@@ -65,18 +64,18 @@
     @include form-validation-state-selector($state) {
       border-color: $border-color;
 
-      @if variables.$enable-validation-icons {
-        padding-right: variables.$input-height-inner;
-        background-image: functions.escape-svg($icon);
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-image: escape-svg($icon);
         background-repeat: no-repeat;
-        background-position: right variables.$input-height-inner-quarter center;
-        background-size: variables.$input-height-inner-half variables.$input-height-inner-half;
+        background-position: right $input-height-inner-quarter center;
+        background-size: $input-height-inner-half $input-height-inner-half;
       }
 
       &:focus {
         border-color: $border-color;
-        @if variables.$enable-shadows {
-          @include box-shadow.box-shadow(variables.$input-box-shadow, $focus-box-shadow);
+        @if $enable-shadows {
+          @include box-shadow.box-shadow($input-box-shadow, $focus-box-shadow);
         } @else {
           // Avoid using mixin so we can pass custom focus shadow properly
           box-shadow: $focus-box-shadow;
@@ -88,9 +87,9 @@
   // stylelint-disable-next-line selector-no-qualifying-type
   textarea.form-control {
     @include form-validation-state-selector($state) {
-      @if variables.$enable-validation-icons {
-        padding-right: variables.$input-height-inner;
-        background-position: top variables.$input-height-inner-quarter right variables.$input-height-inner-quarter;
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
   }
@@ -99,20 +98,20 @@
     @include form-validation-state-selector($state) {
       border-color: $border-color;
 
-      @if variables.$enable-validation-icons {
+      @if $enable-validation-icons {
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
-          --#{variables.$prefix}form-select-bg-icon: #{functions.escape-svg($icon)};
-          padding-right: variables.$form-select-feedback-icon-padding-end;
-          background-position: variables.$form-select-bg-position, variables.$form-select-feedback-icon-position;
-          background-size: variables.$form-select-bg-size, variables.$form-select-feedback-icon-size;
+          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+          padding-right: $form-select-feedback-icon-padding-end;
+          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }
 
       &:focus {
         border-color: $border-color;
-        @if variables.$enable-shadows {
-          @include box-shadow.box-shadow(variables.$form-select-box-shadow, $focus-box-shadow);
+        @if $enable-shadows {
+          @include box-shadow.box-shadow($form-select-box-shadow, $focus-box-shadow);
         } @else {
           // Avoid using mixin so we can pass custom focus shadow properly
           box-shadow: $focus-box-shadow;
@@ -123,8 +122,8 @@
 
   .form-control-color {
     @include form-validation-state-selector($state) {
-      @if variables.$enable-validation-icons {
-        width: calc(#{variables.$form-color-width} + #{variables.$input-height-inner});
+      @if $enable-validation-icons {
+        width: calc(#{$form-color-width} + #{$input-height-inner});
       }
     }
   }

diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index 6f38e58df876efaf49a3d8d6903c5425a6e672ae..287cfa9b1a0e2a59e3c30aefc8f287ed1ec92afd 100644 (file)
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 // Gradients
 

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index d0645075ca965b3e31331f06aeaa7740e978b83b..d0ac0d828c3866a721f2204c7453fc91e60bab46 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -1,10 +1,9 @@
 @use "sass:map";
 @use "sass:math";
 @use "sass:meta";
-// @use "../setup" as *;
-// @use "../maps";
-// @use "../setup/variables";
-// @use "breakpoints";
+@use "../setup" as *;
+@use "../maps";
+@use "breakpoints";
 
 // Grid system
 //

diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index a68311997a95354360e080adb3648f52c1f095b1..26aacf4156c24c7eaa42ebdd8ec68b4686f3942e 100644 (file)
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 // Pagination

diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index aa5f8ab92e14c3b0eb8f87de5a1baafec437325e..142140295c424cd729b5b0097b16f7540fe5c334 100644 (file)
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 @mixin reset-text {
   font-family: variables.$font-family-base;

diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
index 40cec1e6e5527afad958028c8bc57fee2a63f111..2dfea0c0cb3d0970e02cda5a9e090c1bcd2e57de 100644 (file)
--- a/scss/mixins/_table-variants.scss
+++ b/scss/mixins/_table-variants.scss
@@ -1,29 +1,28 @@
 @use "sass:color";
 @use "sass:math";
-@use "../functions";
-@use "../variables";
+@use "../setup" as *;
 
 // scss-docs-start table-variant
 @mixin table-variant($state, $background) {
   .table-#{$state} {
-    $color: functions.color-contrast(functions.opaque(variables.$body-bg, $background));
-    $hover-bg: color.mix($color, $background, math.percentage(variables.$table-hover-bg-factor));
-    $striped-bg: color.mix($color, $background, math.percentage(variables.$table-striped-bg-factor));
-    $active-bg: color.mix($color, $background, math.percentage(variables.$table-active-bg-factor));
-    $table-border-color: color.mix($color, $background, math.percentage(variables.$table-border-factor));
+    $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));
 
-    --#{variables.$prefix}table-color: #{$color};
-    --#{variables.$prefix}table-bg: #{$background};
-    --#{variables.$prefix}table-border-color: #{$table-border-color};
-    --#{variables.$prefix}table-striped-bg: #{$striped-bg};
-    --#{variables.$prefix}table-striped-color: #{functions.color-contrast($striped-bg)};
-    --#{variables.$prefix}table-active-bg: #{$active-bg};
-    --#{variables.$prefix}table-active-color: #{functions.color-contrast($active-bg)};
-    --#{variables.$prefix}table-hover-bg: #{$hover-bg};
-    --#{variables.$prefix}table-hover-color: #{functions.color-contrast($hover-bg)};
+    --#{$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-active-bg: #{$active-bg};
+    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$prefix}table-hover-bg: #{$hover-bg};
+    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
 
-    color: var(--#{variables.$prefix}table-color);
-    border-color: var(--#{variables.$prefix}table-border-color);
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
   }
 }
-// scss-docs-end table-variant
+// scss-docs-end table-variant
\ No newline at end of file

diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss
index db8688c028ca713d189be3648d7af94cfa429ad7..261e4e6bc50a63b120af8daecb168a099e8ed59f 100644 (file)
--- a/scss/mixins/_transition.scss
+++ b/scss/mixins/_transition.scss
@@ -1,5 +1,5 @@
 @use "sass:list";
-@use "../variables";
+@use "../setup/variables";
 
 // stylelint-disable property-disallowed-list
 @mixin transition($transition...) {

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index a673cc096a3b98cef363d32a93ccc34c0a88d15b..a30ab0296080e508e30bac817d1ae3caf35be355 100644 (file)
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -2,7 +2,7 @@
 @use "sass:map";
 @use "sass:meta";
 @use "sass:string";
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 // Utility generator

diff --git a/scss/setup/_functions.scss b/scss/setup/_functions.scss
index c8d59684344e3838f0c46951dfc87da0f5a7f121..ba46cc9f98f72ec9070bcac289f67f35b52d0fde 100644 (file)
--- a/scss/setup/_functions.scss
+++ b/scss/setup/_functions.scss
@@ -317,4 +317,4 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     $result: $result * map.get($unit-map, $dividend-unit);
   }
   @return $result;
-}
+}
\ No newline at end of file

diff --git a/scss/setup/_variables.scss b/scss/setup/_variables.scss
index 24bc3572e4a7561cc7233321900de91a6b077f79..34ed1b1696f7eb2ce93cc49c1788a6157ad2d4b2 100644 (file)
--- a/scss/setup/_variables.scss
+++ b/scss/setup/_variables.scss
@@ -1,6 +1,6 @@
 @use "sass:color";
 @use "sass:string";
-@use "functions";
+@use "functions" as *;
 
 // Variables
 //
@@ -847,7 +847,8 @@ $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(color.mix(functions.color-contrast($link-color), $link-color, 15%)) !default;
+// $btn-link-focus-shadow-rgb:   to-rgb(color.mix(functions.color-contrast($link-color), $link-color, 15%)) !default;
+$btn-link-focus-shadow-rgb:   #fd0 !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;

diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index 96471c7b970d8274eee25b4f21a7cb5bca00ad7b..84a5c31b5e237d4164ff11afbca819160b3f3018 100644 (file)
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -3,7 +3,7 @@
 @use "../mixins/breakpoints";
 @use "../mixins/utilities" as mixins-utilities;
 @use "../utilities";
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 // Loop over each breakpoint