@coreui/coreui 5.2.0 → 5.3.1

package/scss/coreui-utilities.rtl.scss

@@ -1,4 +1,4 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "coreui-utilities";
+@use "coreui-utilities" with (
+  $enable-ltr: false,
+  $enable-rtl: true
+);

package/scss/coreui-utilities.scss

@@ -1,19 +1,16 @@
-@import "mixins/banner";
-@include bsBanner(Utilities);
+@use "banner" with (
+  $file: "Utilities"
+);
 
 // Configuration
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "utilities";
+@forward "variables";
+@forward "variables-dark";
 
 // Layout & components
-@import "root";
+@forward "root";
 
 // Helpers
-@import "helpers";
+@forward "helpers";
 
 // Utilities
-@import "utilities/api";
+@forward "utilities/api";

package/scss/coreui.rtl.scss

@@ -1,4 +1,4 @@
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "coreui";
+@use "coreui" with (
+  $enable-ltr: false,
+  $enable-rtl: true
+);

package/scss/coreui.scss

@@ -1,58 +1,55 @@
-@import "mixins/banner";
-@include bsBanner("");
+@use "banner";
 
 // scss-docs-start import-stack
 // Configuration
-@import "functions";
-@import "variables";
-@import "variables-dark";
-@import "maps";
-@import "mixins";
-@import "utilities";
+@forward "variables";
+@forward "variables-dark";
+@forward "functions";
+@forward "mixins";
 
 // Layout & components
-@import "root";
-@import "reboot";
-@import "type";
-@import "images";
-@import "containers";
-@import "grid";
-@import "tables";
-@import "forms";
-@import "buttons";
-@import "transitions";
-@import "dropdown";
-@import "button-group";
-@import "nav";
-@import "navbar";
-@import "card";
-@import "accordion";
-@import "breadcrumb";
-@import "pagination";
-@import "badge";
-@import "alert";
-@import "progress";
-@import "list-group";
-@import "close";
-@import "toasts";
-@import "modal";
-@import "tooltip";
-@import "popover";
-@import "carousel";
-@import "spinners";
-@import "offcanvas";
-@import "placeholders";
+@forward "root";
+@forward "reboot";
+@forward "type";
+@forward "images";
+@forward "containers";
+@forward "grid";
+@forward "tables";
+@forward "forms";
+@forward "buttons";
+@forward "transitions";
+@forward "dropdown";
+@forward "button-group";
+@forward "nav";
+@forward "navbar";
+@forward "card";
+@forward "accordion";
+@forward "breadcrumb";
+@forward "pagination";
+@forward "badge";
+@forward "alert";
+@forward "progress";
+@forward "list-group";
+@forward "close";
+@forward "toasts";
+@forward "modal";
+@forward "tooltip";
+@forward "popover";
+@forward "carousel";
+@forward "spinners";
+@forward "offcanvas";
+@forward "placeholders";
 
-@import "avatar";
-@import "callout";
-@import "footer";
-@import "header";
-@import "icon";
-@import "sidebar";
+@forward "avatar";
+@forward "callout";
+@forward "footer";
+@forward "header";
+@forward "icon";
+@forward "sidebar";
 
 // Helpers
-@import "helpers";
+@forward "helpers";
 
 // Utilities
-@import "utilities/api";
+@forward "utilities/api";
 // scss-docs-end import-stack

package/scss/forms/_floating-labels.import.scss

@@ -0,0 +1 @@
+@forward "floating-labels";

package/scss/forms/_floating-labels.scss

@@ -1,3 +1,7 @@
+@use "../mixins/border-radius" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+
 .form-floating {
   position: relative;
 
@@ -11,8 +15,8 @@
 
   > label {
     position: absolute;
+    inset-inline-start: 0;
     top: 0;
-    @include ltr-rtl("left", 0);
     z-index: 2;
     max-width: 100%;
     height: 100%; // allow textareas

package/scss/forms/_form-check.import.scss

@@ -0,0 +1 @@
+@forward "form-check";

package/scss/forms/_form-check.scss

@@ -1,3 +1,11 @@
+@use "sass:map";
+@use "../functions/escape-svg" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/color-mode" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+@use "../variables-dark" as *;
+
 //
 // Check/radio
 //
@@ -5,24 +13,22 @@
 .form-check {
   display: block;
   min-height: $form-check-min-height;
-  @include ltr-rtl("padding-left", $form-check-padding-start);
+  padding-inline-start: $form-check-padding-start;
   margin-bottom: $form-check-margin-bottom;
 
   .form-check-input {
-    @include ltr-rtl("float", left);
-    @include ltr-rtl("margin-left", $form-check-padding-start * -1);
+    float: inline-start;
+    margin-inline-start: $form-check-padding-start * -1;
   }
 }
 
 .form-check-reverse {
-  @include ltr-rtl("padding-right", $form-check-padding-start);
-  @include ltr-rtl("padding-left", 0);
-  @include ltr-rtl("text-align", right);
+  padding-inline: 0 $form-check-padding-start;
+  text-align: end;
 
   .form-check-input {
-    @include ltr-rtl("float", right);
-    @include ltr-rtl("margin-right", $form-check-padding-start * -1);
-    @include ltr-rtl("margin-left", 0);
+    float: inline-end;
+    margin-inline: 0 $form-check-padding-start * -1;
   }
 }
 
@@ -122,13 +128,13 @@
 //
 
 .form-switch {
-  @include ltr-rtl("padding-left", $form-switch-padding-start);
+  padding-inline-start: $form-switch-padding-start;
 
   .form-check-input {
     --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
 
     width: $form-switch-width;
-    @include ltr-rtl("margin-left", $form-switch-padding-start * -1);
+    margin-inline-start: $form-switch-padding-start * -1;
     background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
     @include border-radius($form-switch-border-radius, 0);
@@ -150,28 +156,26 @@
   }
 
   &.form-check-reverse {
-    @include ltr-rtl("padding-right", $form-check-padding-start);
-    @include ltr-rtl("padding-left", 0);
+    padding-inline: 0 $form-switch-padding-start;
 
     .form-check-input {
-      @include ltr-rtl("margin-right", $form-check-padding-start * -1);
-      @include ltr-rtl("margin-left", 0);
+      margin-inline: 0 $form-switch-padding-start * -1;
     }
   }
 }
 
 @each $size, $map in $form-switch-widths {
-  $width: map-get($map, "width");
-  $height: map-get($map, "height");
+  $width: map.get($map, "width");
+  $height: map.get($map, "height");
 
   .form-switch-#{$size} {
     min-height: $height;
-    @include ltr-rtl("padding-left", $width + .5em);
+    padding-inline-start: $width + .5em;
 
     .form-check-input {
       width: $width;
       height: $height;
-      @include ltr-rtl("margin-left", ($width + .5em) * -1);
+      margin-inline-start: ($width + .5em) * -1;
     }
 
     .form-check-label {
@@ -183,7 +187,7 @@
 
 .form-check-inline {
   display: inline-block;
-  @include ltr-rtl("margin-right", $form-check-inline-margin-end);
+  margin-inline-end: $form-check-inline-margin-end;
 }
 
 .btn-check {

package/scss/forms/_form-control.import.scss

@@ -0,0 +1 @@
+@forward "form-control";

package/scss/forms/_form-control.scss

@@ -1,3 +1,11 @@
+@use "sass:math";
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/gradients" as *;
+@use "../mixins/transition" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
 //
 // General form controls (plus a few specific high-level interventions)
 //
@@ -56,7 +64,7 @@
     // https://github.com/twbs/bootstrap/issues/23307
     // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
     // Multiply line-height by 1em if it has no unit
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
 
     // Android Chrome type="date" is taller than the other inputs
     // because of "margin: 1px 24px 1px 4px" inside the shadow DOM

package/scss/forms/_form-range.import.scss

@@ -0,0 +1 @@
+@forward "form-range";

package/scss/forms/_form-range.scss

@@ -1,3 +1,10 @@
+@use "../functions/math" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/gradients" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+
 // Range
 //
 // Style range inputs the same across browsers. Vendor-specific rules for pseudo

package/scss/forms/_form-select.import.scss

@@ -0,0 +1 @@
+@forward "form-select";

package/scss/forms/_form-select.scss

@@ -1,3 +1,13 @@
+@use "../functions/escape-svg" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/color-mode" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../mixins/transition" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+@use "../variables-dark" as *;
+
 // Select
 //
 // Replaces the browser default select with a custom one, mostly pulled from
@@ -8,7 +18,10 @@
 
   display: block;
   width: 100%;
-  @include ltr-rtl-value-only("padding", $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x, $form-select-padding-y $form-select-padding-x $form-select-padding-y $form-select-indicator-padding);
+  padding-inline-start: $form-select-padding-x;
+  padding-inline-end: $form-select-indicator-padding;
+  padding-top: $form-select-padding-y;
+  padding-bottom: $form-select-padding-y;
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
@@ -26,7 +39,7 @@
   @include transition($form-select-transition);
 
   &:focus {
-    border-color: var($form-select-focus-border-color);
+    border-color: $form-select-focus-border-color;
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
@@ -38,7 +51,7 @@
 
   &[multiple],
   &[size]:not([size="1"]) {
-    @include ltr-rtl("padding-right", $form-select-padding-x);
+    padding-inline-end: $form-select-padding-x;
     background-image: none;
   }
 
@@ -56,17 +69,17 @@
 }
 
 .form-select-sm {
+  padding-inline-start: $form-select-padding-x-sm;
   padding-top: $form-select-padding-y-sm;
   padding-bottom: $form-select-padding-y-sm;
-  @include ltr-rtl("padding-left", $form-select-padding-x-sm);
   @include font-size($form-select-font-size-sm);
   @include border-radius($form-select-border-radius-sm);
 }
 
 .form-select-lg {
+  padding-inline-start: $form-select-padding-x-lg;
   padding-top: $form-select-padding-y-lg;
   padding-bottom: $form-select-padding-y-lg;
-  @include ltr-rtl("padding-left", $form-select-padding-x-lg);
   @include font-size($form-select-font-size-lg);
   @include border-radius($form-select-border-radius-lg);
 }

package/scss/forms/_form-text.import.scss

@@ -0,0 +1 @@
+@forward "form-text";

package/scss/forms/_form-text.scss

@@ -1,3 +1,6 @@
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
 //
 // Form text
 //

package/scss/forms/_input-group.import.scss

@@ -0,0 +1 @@
+@forward "input-group";

package/scss/forms/_input-group.scss

@@ -1,3 +1,9 @@
+@use "sass:map";
+@use "sass:string";
+@use "../mixins/border-radius" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
 //
 // Base styles
 //
@@ -85,7 +91,7 @@
 
 .input-group-lg > .form-select,
 .input-group-sm > .form-select {
-  @include ltr-rtl("padding-right", $form-select-padding-x + $form-select-indicator-padding);
+  padding-inline-end: $form-select-padding-x + $form-select-indicator-padding;
 }
 
 
@@ -116,12 +122,12 @@
   }
 
   $validation-messages: "";
-  @each $state in map-keys($form-validation-states) {
-    $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
+  @each $state in map.keys($form-validation-states) {
+    $validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    @include ltr-rtl("margin-left", calc(#{$input-border-width} * -1));
+    margin-inline-start: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
     @include border-start-radius(0);
   }
 

package/scss/forms/_labels.import.scss

@@ -0,0 +1 @@
+@forward "labels";

package/scss/forms/_labels.scss

@@ -1,3 +1,7 @@
+@use "../functions/math" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
 //
 // Labels
 //

package/scss/forms/_validation.import.scss

@@ -0,0 +1 @@
+@forward "validation";

package/scss/forms/_validation.scss

@@ -1,3 +1,6 @@
+@use "../mixins/forms" as *;
+@use "../variables" as *;
+
 // Form validation
 //
 // Provide feedback to users when form field values are valid or invalid. Works

package/scss/functions/_assert-ascending.scss

@@ -0,0 +1,19 @@
+@use "sass:math";
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
+      // Do nothing
+    } @else if not math.compatible($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}

package/scss/functions/_assert-starts-at-zero.scss

@@ -0,0 +1,14 @@
+@use "sass:list";
+@use "sass:map";
+
+// 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}.";
+    }
+  }
+}

package/scss/functions/_color-contrast-variables.scss

@@ -0,0 +1,23 @@
+@use "contrast-ratio" as *;
+
+// We use this function only in variables.scss because recursive imports are not allowed in Sass anymore.
+
+@function color-contrast-variables($background, $color-contrast-dark, $color-contrast-light, $white, $black, $min-contrast-ratio) {
+  $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+  $max-ratio: 0;
+  $max-ratio-color: null;
+
+  @each $color in $foregrounds {
+    $contrast-ratio: contrast-ratio($background, $color);
+    @if $contrast-ratio > $min-contrast-ratio {
+      @return $color;
+    } @else if $contrast-ratio > $max-ratio {
+      $max-ratio: $contrast-ratio;
+      $max-ratio-color: $color;
+    }
+  }
+
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+  @return $max-ratio-color;
+}

package/scss/functions/_color-contrast.scss

@@ -0,0 +1,27 @@
+@use "contrast-ratio" as *;
+@use "../variables" as *;
+
+// Color contrast
+// See https://github.com/twbs/bootstrap/pull/30168
+
+// scss-docs-start color-contrast-function
+@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, $white, $black;
+  $max-ratio: 0;
+  $max-ratio-color: null;
+
+  @each $color in $foregrounds {
+    $contrast-ratio: contrast-ratio($background, $color);
+    @if $contrast-ratio > $min-contrast-ratio {
+      @return $color;
+    } @else if $contrast-ratio > $max-ratio {
+      $max-ratio: $contrast-ratio;
+      $max-ratio-color: $color;
+    }
+  }
+
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+  @return $max-ratio-color;
+}
+// scss-docs-end color-contrast-function

package/scss/functions/_color.scss

@@ -0,0 +1,18 @@
+@use "sass:color";
+
+// scss-docs-start color-functions
+// Tint a color: mix a color with white
+@function tint-color($color, $weight) {
+  @return color.mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+  @return color.mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it
+@function shift-color($color, $weight) {
+  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+// scss-docs-end color-functions

package/scss/functions/_contrast-ratio.scss

@@ -0,0 +1,35 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+@use "math" as *;
+
+@function contrast-ratio($background, $foreground) {
+  $l1: luminance($background);
+  $l2: luminance(opaque($background, $foreground));
+
+  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.2 relative luminance
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+@function luminance($color) {
+  $rgb: (
+    "r": color.channel($color, "red", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
+    "g": color.channel($color, "green", $space: rgb), // stylelint-disable-line scss/at-function-named-arguments
+    "b": color.channel($color, "blue", $space: rgb) // stylelint-disable-line scss/at-function-named-arguments
+  );
+
+  @each $name, $value in $rgb {
+    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), math.pow(divide((divide(math.round($value) + 1, 255) + .055), 1.055), 2.4));
+    $rgb: map.merge($rgb, ($name: $value));
+  }
+
+  @return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
+}
+
+// Return opaque color
+// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+@function opaque($background, $foreground) {
+  @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+}

package/scss/functions/_escape-svg.scss

@@ -0,0 +1,22 @@
+@use "sass:string";
+@use "str-replace" as *;
+@use "../variables" as *;
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+  @if string.index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if string.index($string, "url(") == 1 {
+        $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}