@tabler/core 1.5.0 → 1.6.0

package/scss/_maps.scss

@@ -8,8 +8,6 @@
 //
 // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
 
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
-
 $theme-colors-text: (
   'primary': $primary-text-emphasis,
   'secondary': $secondary-text-emphasis,
@@ -87,15 +85,16 @@ $theme-colors-border-subtle-dark: null !default;
 // Extends the default `$theme-colors` maps to help create our utilities.
 
 // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// Only the keys matter: `rgba-css-var()` builds every value from `var(--<key>)`.
 
-$utilities-colors: $theme-colors-rgb !default;
+$utilities-colors: $theme-colors !default;
 
 $utilities-text: map.merge(
   $utilities-colors,
   (
-    'black': to-rgb($black),
-    'white': to-rgb($white),
-    'body': to-rgb($body-color),
+    'black': $black,
+    'white': $white,
+    'body': $body-color,
   )
 ) !default;
 $utilities-text-colors: map-loop($utilities-text, rgba-css-var, '$key', 'text') !default;
@@ -114,9 +113,9 @@ $utilities-text-emphasis-colors: (
 $utilities-bg: map.merge(
   $utilities-colors,
   (
-    'black': to-rgb($black),
-    'white': to-rgb($white),
-    'body': to-rgb($body-bg),
+    'black': $black,
+    'white': $white,
+    'body': $body-bg,
   )
 ) !default;
 $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, '$key', 'bg') !default;
@@ -135,8 +134,8 @@ $utilities-bg-subtle: (
 $utilities-border: map.merge(
   $utilities-colors,
   (
-    'black': to-rgb($black),
-    'white': to-rgb($white),
+    'black': $black,
+    'white': $white,
   )
 ) !default;
 $utilities-border-colors: map-loop($utilities-border, rgba-css-var, '$key', 'border') !default;

package/scss/_mixins.scss

@@ -1,5 +1,6 @@
 @forward 'mixins/mixins';
 @forward 'mixins/functions';
+@forward 'mixins/deprecated';
 
 // Bootstrap mixins managed by Tabler
 // rfs is forwarded with `$enable-rfs: false` (Tabler disables responsive font

package/scss/_props.scss

@@ -28,6 +28,8 @@
   --white: #{$white};
   --white-lt: color-mix(in oklab, var(--white) 10%, transparent);
   --black: #{$black};
+  --gray: #{$gray-600};
+  --gray-dark: #{$gray-800};
   // `.shape-*` runs over `$colors`, which carries these three on top of the
   // theme colors; the `-lt` tint below is generated for the theme colors only.
   --black-lt: color-mix(in oklab, var(--black) 10%, transparent);
@@ -42,14 +44,10 @@
   /** Theme colors */
   @each $name, $color in map.merge($theme-colors, $social-colors) {
     --#{$name}: #{$color};
-    --#{$name}-rgb: #{to-rgb($color)};
     --#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--light); else: var(--dark))};
-    --#{$name}-darken: #{theme-color-darker($color)};
-    --#{$name}-darken: color-mix(in oklab, var(--#{$name}), transparent 20%);
-    --#{$name}-lt: #{theme-color-lighter($color)};
+    --#{$name}-darken: #{adjust-lightness-css(var(--#{$name}), -6%)};
     --#{$name}-lt: color-mix(in oklab, var(--#{$name}) 10%, transparent);
     --#{$name}-200: color-mix(in oklab, var(--#{$name}) 20%, transparent);
-    --#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
   }
 
   /** Gray colors */
@@ -62,6 +60,9 @@
     --spacer-#{$name}: #{$value};
   }
 
+  /** Icons */
+  --icon-size: #{$icon-size};
+
   /** Font sizes */
   @each $name, $value in $font-weights {
     --font-weight-#{$name}: #{$value};
@@ -76,6 +77,7 @@
   }
 
   /** Shadows */
+  --shadow-color: #{$box-shadow-color};
   @each $name, $value in $box-shadows {
     --shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
   }
@@ -90,9 +92,42 @@
     }
   }
 
+  /** Buttons and form controls: one scale, in the names Bootstrap 6 uses */
+  // scss-docs-start btn-input-css-vars
+  --btn-input-fg: var(--body-color);
+  --btn-input-bg: var(--bg-forms);
+  --btn-input-padding-y: #{$input-btn-padding-y};
+  --btn-input-padding-x: #{$input-btn-padding-x};
+  --btn-input-font-size: #{$input-btn-font-size};
+  --btn-input-line-height: #{$input-btn-line-height};
+  --btn-input-border-radius: var(--border-radius);
+  --btn-input-min-height: calc(var(--btn-input-line-height) + var(--btn-input-padding-y) * 2 + #{$input-btn-border-width} * 2);
+
+  --btn-input-sm-padding-y: #{$input-btn-padding-y-sm};
+  --btn-input-sm-padding-x: #{$input-btn-padding-x-sm};
+  --btn-input-sm-font-size: #{$input-btn-font-size-sm};
+  --btn-input-sm-line-height: #{$input-btn-line-height-sm};
+  --btn-input-sm-border-radius: var(--border-radius-sm);
+  --btn-input-sm-min-height: calc(var(--btn-input-sm-line-height) + var(--btn-input-sm-padding-y) * 2 + #{$input-btn-border-width} * 2);
+
+  --btn-input-lg-padding-y: #{$input-btn-padding-y-lg};
+  --btn-input-lg-padding-x: #{$input-btn-padding-x-lg};
+  --btn-input-lg-font-size: #{$input-btn-font-size-lg};
+  --btn-input-lg-line-height: #{$input-btn-line-height-lg};
+  --btn-input-lg-border-radius: var(--border-radius-lg);
+  --btn-input-lg-min-height: calc(var(--btn-input-lg-line-height) + var(--btn-input-lg-padding-y) * 2 + #{$input-btn-border-width} * 2);
+
+  --btn-input-xl-padding-y: #{$input-btn-padding-y-xl};
+  --btn-input-xl-padding-x: #{$input-btn-padding-x-xl};
+  --btn-input-xl-font-size: #{$input-btn-font-size-xl};
+  --btn-input-xl-line-height: #{$input-btn-line-height-xl};
+  --btn-input-xl-border-radius: var(--border-radius);
+  --btn-input-xl-min-height: calc(var(--btn-input-xl-line-height) + var(--btn-input-xl-padding-y) * 2 + #{$input-btn-border-width} * 2);
+  // scss-docs-end btn-input-css-vars
+
   /** Backdrops */
   --backdrop-opacity: #{$backdrop-opacity};
-  --backdrop-bg: var(--bg-surface-dark);
+  --backdrop-bg: #{$backdrop-bg};
   @each $name, $value in $backdrops {
     --backdrop-bg#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
   }

package/scss/_settings.scss

@@ -9,7 +9,9 @@
 // Prefixes
 
 // Characters which are escaped by the escape-svg function
-$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
+// `%` goes first so the escapes added below are not re-encoded; it shows up in
+// `oklch()` lightness values that end up inside svg data uris.
+$escaped-characters: (('%', '%25'), ('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
 
 $black: #000 !default;
 $white: #fff !default;

package/scss/_utilities-marketing.scss

@@ -199,8 +199,7 @@ $marketing-utilities: (
   ),
   'gutter': (
     responsive: true,
-    css-var: true,
-    css-variable-name: gutter-x,
+    property: --gutter-x --gutter-y,
     class: g,
     values: $spacers-extra,
   )

package/scss/_utilities.scss

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:map';
 @use 'settings' as *;
 @use 'variables' as *;
@@ -21,6 +22,25 @@ $utilities-border-colors: map-loop(
   'border'
 ) !default;
 
+// `utils/_colors.scss` emits `.text-*`, `.bg-*` and `.border-*` for these colors
+// later in the file, with the same specificity, which always overrides the
+// utilities generated here. The API only keeps what that file does not
+// cover: the `--bg-opacity: 1` / `--border-opacity: 1` reset, which has to
+// stay ahead of the `.bg-opacity-*` / `.border-opacity-*` classes.
+$utilities-colors-overridden-text: map.keys($theme-colors);
+$utilities-colors-overridden: list.join(map.keys($theme-colors), ('white'), comma);
+
+// `(color: 1)` for every overridden color the given utility map generates.
+@function utilities-opacity-reset($utility-colors) {
+  $map: ();
+  @each $color in $utilities-colors-overridden {
+    @if map.has-key($utility-colors, $color) {
+      $map: map.merge($map, (#{$color}: 1));
+    }
+  }
+  @return $map;
+}
+
 // Utilities
 
 $utilities: () !default;
@@ -97,7 +117,7 @@ $utilities: map.merge(
       css-var: true,
       css-variable-name: focus-ring-color,
       class: focus-ring,
-      values: map-loop($theme-colors-rgb, rgba-css-var, '$key', 'focus-ring'),
+      values: map-loop($theme-colors, rgba-css-var, '$key', 'focus-ring'),
     ),
     'position': (
       property: position,
@@ -201,7 +221,13 @@ $utilities: map.merge(
       local-vars: (
         'border-opacity': 1,
       ),
-      values: $utilities-border-colors,
+      values: map.remove($utilities-border-colors, $utilities-colors-overridden...),
+    ),
+    'border-color-opacity': (
+      css-var: true,
+      css-variable-name: border-opacity,
+      class: border,
+      values: utilities-opacity-reset($utilities-border-colors),
     ),
     'subtle-border-color': (
       property: border-color,
@@ -687,20 +713,23 @@ $utilities: map.merge(
       local-vars: (
         'text-opacity': 1,
       ),
-      values: map.merge(
-          $utilities-text-colors,
-          (
-            'muted': var(--secondary-color),
-            // deprecated
-            'black-50': rgba($black, 0.5),
-            // deprecated
-            'white-50': rgba($white, 0.5),
-            // deprecated
-            'body-secondary': var(--secondary-color),
-            'body-tertiary': var(--tertiary-color),
-            'body-emphasis': var(--emphasis-color),
-            'reset': inherit,
-          )
+      values: map.remove(
+          map.merge(
+            $utilities-text-colors,
+            (
+              'muted': var(--secondary-color),
+              // deprecated
+              'black-50': color-transparent(var(--black), 0.5),
+              // deprecated
+              'white-50': color-transparent(var(--white), 0.5),
+              // deprecated
+              'body-secondary': var(--secondary-color),
+              'body-tertiary': var(--tertiary-color),
+              'body-emphasis': var(--emphasis-color),
+              'reset': inherit,
+            )
+          ),
+          $utilities-colors-overridden-text...
         ),
     ),
     'text-opacity': (
@@ -749,7 +778,7 @@ $utilities: map.merge(
       values: map.merge(
           $utilities-links-underline,
           (
-            null: color-mix(in srgb, var(--link-color) calc(var(--link-underline-opacity, 1) * 100%), transparent),
+            null: color-transparent(var(--link-color), calc(var(--link-underline-opacity, 1) * 100%)),
           )
         ),
     ),
@@ -772,15 +801,24 @@ $utilities: map.merge(
       local-vars: (
         'bg-opacity': 1,
       ),
-      values: map.merge(
-          $utilities-bg-colors,
-          (
-            'transparent': transparent,
-            'body-secondary': color-mix(in srgb, var(--secondary-bg) calc(var(--bg-opacity) * 100%), transparent),
-            'body-tertiary': color-mix(in srgb, var(--tertiary-bg) calc(var(--bg-opacity) * 100%), transparent),
-          )
+      values: map.remove(
+          map.merge(
+            $utilities-bg-colors,
+            (
+              'transparent': transparent,
+              'body-secondary': color-transparent(var(--secondary-bg), calc(var(--bg-opacity) * 100%)),
+              'body-tertiary': color-transparent(var(--tertiary-bg), calc(var(--bg-opacity) * 100%)),
+            )
+          ),
+          $utilities-colors-overridden...
         ),
     ),
+    'background-color-opacity': (
+      css-var: true,
+      css-variable-name: bg-opacity,
+      class: bg,
+      values: utilities-opacity-reset($utilities-bg-colors),
+    ),
     'bg-opacity': (
       css-var: true,
       class: bg-opacity,

package/scss/_variables-dark.scss

@@ -1,4 +1,3 @@
-@use 'sass:color';
 @use 'settings' as *;
 @use 'variables' as *;
 @use 'mixins/functions' as *;
@@ -6,12 +5,11 @@
 //
 // Dark mode
 //
-$darken-dark: color.adjust($dark, $lightness: -2%) !default;
-$lighten-dark: color.adjust($dark, $lightness: 2%) !default;
-$border-color-dark: color.adjust($dark, $lightness: 8%) !default;
+$darken-dark: adjust-lightness-css(var(--dark), -2%) !default;
+$border-color-dark: adjust-lightness-css(var(--dark), 8%) !default;
 $border-color-translucent-dark: rgba(128, 150, 172, 0.2) !default;
-$border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
-$border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
+$border-dark-color-dark: adjust-lightness-css(var(--dark), 4%) !default;
+$border-active-color-dark: adjust-lightness-css(var(--dark), 12%) !default;
 
 //new bootsrap variables
 $body-color-dark: $gray-200 !default;
@@ -20,41 +18,41 @@ $body-emphasis-color-dark: $white !default;
 $text-secondary-dark: rgba(153, 159, 164, 1) !default;
 
 // Theme text emphasis dark
-$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
-$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
-$success-text-emphasis-dark: tint-color($success, 40%) !default;
-$info-text-emphasis-dark: tint-color($info, 40%) !default;
-$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
-$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
+$primary-text-emphasis-dark: mix-color-css(var(--white), var(--primary), 40%) !default;
+$secondary-text-emphasis-dark: mix-color-css(var(--white), var(--secondary), 40%) !default;
+$success-text-emphasis-dark: mix-color-css(var(--white), var(--success), 40%) !default;
+$info-text-emphasis-dark: mix-color-css(var(--white), var(--info), 40%) !default;
+$warning-text-emphasis-dark: mix-color-css(var(--white), var(--warning), 40%) !default;
+$danger-text-emphasis-dark: mix-color-css(var(--white), var(--danger), 40%) !default;
 $light-text-emphasis-dark: $gray-100 !default;
 $dark-text-emphasis-dark: $gray-300 !default;
 
 // Theme bg subtle dark
-$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
-$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
-$success-bg-subtle-dark: shade-color($success, 80%) !default;
-$info-bg-subtle-dark: shade-color($info, 80%) !default;
-$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
-$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
+$primary-bg-subtle-dark: mix-color-css(var(--black), var(--primary), 80%) !default;
+$secondary-bg-subtle-dark: mix-color-css(var(--black), var(--secondary), 80%) !default;
+$success-bg-subtle-dark: mix-color-css(var(--black), var(--success), 80%) !default;
+$info-bg-subtle-dark: mix-color-css(var(--black), var(--info), 80%) !default;
+$warning-bg-subtle-dark: mix-color-css(var(--black), var(--warning), 80%) !default;
+$danger-bg-subtle-dark: mix-color-css(var(--black), var(--danger), 80%) !default;
 $light-bg-subtle-dark: $gray-800 !default;
-$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
+$dark-bg-subtle-dark: mix-color-css(var(--gray-800), var(--black)) !default;
 
 // Theme border subtle dark
-$primary-border-subtle-dark: shade-color($primary, 40%) !default;
-$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
-$success-border-subtle-dark: shade-color($success, 40%) !default;
-$info-border-subtle-dark: shade-color($info, 40%) !default;
-$warning-border-subtle-dark: shade-color($warning, 40%) !default;
-$danger-border-subtle-dark: shade-color($danger, 40%) !default;
+$primary-border-subtle-dark: mix-color-css(var(--black), var(--primary), 40%) !default;
+$secondary-border-subtle-dark: mix-color-css(var(--black), var(--secondary), 40%) !default;
+$success-border-subtle-dark: mix-color-css(var(--black), var(--success), 40%) !default;
+$info-border-subtle-dark: mix-color-css(var(--black), var(--info), 40%) !default;
+$warning-border-subtle-dark: mix-color-css(var(--black), var(--warning), 40%) !default;
+$danger-border-subtle-dark: mix-color-css(var(--black), var(--danger), 40%) !default;
 $light-border-subtle-dark: $gray-700 !default;
 $dark-border-subtle-dark: $gray-800 !default;
 
 // Body dark
 $body-bg-dark: $gray-900 !default;
-$body-secondary-color-dark: rgba($body-color-dark, 0.75) !default;
+$body-secondary-color-dark: color-transparent(var(--body-color), 0.75) !default;
 $body-secondary-bg-dark: $gray-800 !default;
-$body-tertiary-color-dark: rgba($body-color-dark, 0.5) !default;
-$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
+$body-tertiary-color-dark: color-transparent(var(--body-color), 0.5) !default;
+$body-tertiary-bg-dark: mix-color($gray-800, $gray-900, 50%) !default;
 
 // Headings dark
 $headings-color-dark: inherit !default;
@@ -65,7 +63,7 @@ $link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !
 
 // Mark dark
 $mark-color-dark: $body-color-dark !default;
-$mark-bg-dark: shade-color($yellow, 60%) !default;
+$mark-bg-dark: mix-color-css(var(--black), var(--yellow), 60%) !default;
 
 //
 // Forms dark
@@ -74,14 +72,11 @@ $mark-bg-dark: shade-color($yellow, 60%) !default;
 $form-select-indicator-color-dark: $body-color-dark !default;
 $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
 
-$form-switch-color-dark: rgba($white, 0.25) !default;
-$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
-
 // Form validation colors dark
-$form-valid-color-dark: tint-color($green, 40%) !default;
-$form-valid-border-color-dark: tint-color($green, 40%) !default;
-$form-invalid-color-dark: tint-color($red, 40%) !default;
-$form-invalid-border-color-dark: tint-color($red, 40%) !default;
+$form-valid-color-dark: mix-color-css(var(--white), var(--green), 40%) !default;
+$form-valid-border-color-dark: mix-color-css(var(--white), var(--green), 40%) !default;
+$form-invalid-color-dark: mix-color-css(var(--white), var(--red), 40%) !default;
+$form-invalid-border-color-dark: mix-color-css(var(--white), var(--red), 40%) !default;
 
 //
 // Accordion dark
@@ -91,10 +86,6 @@ $form-invalid-border-color-dark: tint-color($red, 40%) !default;
 // Carousel dark
 //
 
-$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
-$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
-$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
-
 $carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
 $carousel-caption-color-dark: $carousel-dark-caption-color !default;
 $carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
@@ -103,6 +94,4 @@ $carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
 // Close button dark
 //
 
-$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
-
 $btn-close-filter-dark: $btn-close-white-filter !default;

package/scss/_variables-deprecated.scss

@@ -0,0 +1,60 @@
+// Sass variables kept only so that projects written for an older 1.x release
+// still compile: configuring a variable that does not exist is an error in the
+// Sass module system, and so is reading one. Nothing in Tabler reads them. Each
+// keeps its 1.5 default; `_deprecated.scss` turns a customised value into the
+// matching new token where there is one.
+//
+// Removed in 2.0, together with this file.
+@use 'settings' as *;
+@use 'variables' as *;
+@use 'mixins/functions' as *;
+
+// deprecated(2.0): `--active-bg` now carries its own dark value in `$active-bg`
+$lighten-dark: adjust-lightness-css(var(--dark), 2%) !default;
+
+// deprecated(2.0): the focus ring is an outline, see `$focus-ring-width`,
+// `$focus-ring-offset`, `$focus-ring-color` and `$focus-ring-opacity`
+$focus-ring-blur: 0 !default;
+$input-btn-focus-width: 0.25rem !default;
+$input-btn-focus-color-opacity: 0.25 !default;
+$input-btn-focus-color: color-transparent(var(--primary), $input-btn-focus-color-opacity) !default;
+$input-btn-focus-blur: $focus-ring-blur !default;
+$focus-ring-box-shadow:
+  0 0 0 2px var(--primary),
+  0 0 $focus-ring-blur $input-btn-focus-width $input-btn-focus-color !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-focus-box-shadow: $focus-ring-box-shadow !default;
+$btn-close-focus-shadow: $focus-ring-box-shadow !default;
+$accordion-btn-focus-box-shadow: $focus-ring-box-shadow !default;
+$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
+$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
+$form-select-focus-width: $input-focus-width !default;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
+$form-range-thumb-focus-box-shadow:
+  0 0 0 1px var(--body-bg),
+  $input-focus-box-shadow !default;
+
+// deprecated(2.0): `.form-hint` is `.form-text`
+$form-hint-margin-top: 0.25rem !default;
+$form-hint-label-offset: -0.25rem !default;
+$form-hint-control-margin-top: 0.5rem !default;
+
+// deprecated(2.0): the switch knob, the check mark and the navbar toggler are
+// masks painted with a colour, see `$form-switch-color`, `$form-check-input-checked-color`
+// and `$navbar-light-icon-color`
+$form-switch-color-dark: rgba($white, 0.25) !default;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#e5e7eb'/></svg>") !default;
+$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#83b7e8'/></svg>") !default;
+$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$white}'/></svg>") !default;
+$form-switch-checked-bg-position: right center !default;
+$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#1f2937' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>") !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(0, 0, 0, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+
+// deprecated(2.0): colours are mixed with `color-mix()`, nothing needs the triplets
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;