@coreui/coreui 4.3.0-beta.0 → 4.3.0

package/scss/forms/_form-check.scss

@@ -15,14 +15,14 @@
 }
 
 .form-check-reverse {
-  padding-right: $form-check-padding-start;
-  padding-left: 0;
-  text-align: right;
+  @include ltr-rtl("padding-right", $form-check-padding-start);
+  @include ltr-rtl("padding-left", 0);
+  @include ltr-rtl("text-align", right);
 
   .form-check-input {
-    float: right;
-    margin-right: $form-check-padding-start * -1;
-    margin-left: 0;
+    @include ltr-rtl("float", right);
+    @include ltr-rtl("margin-right", $form-check-padding-start * -1);
+    @include ltr-rtl("margin-left", 0);
   }
 }
 
@@ -33,13 +33,13 @@
   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(--#{$prefix}form-check-bg);
   background-image: var(--#{$prefix}form-check-bg-image);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   border: $form-check-input-border;
-  appearance: none;
   print-color-adjust: exact; // Keep themed appearance for print
   @include transition($form-check-transition);
 
@@ -127,7 +127,7 @@
     --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
 
     width: $form-switch-width;
-    margin-left: $form-switch-padding-start * -1;
+    @include ltr-rtl("margin-left", $form-switch-padding-start * -1);
     background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
     @include border-radius($form-switch-border-radius);
@@ -149,12 +149,12 @@
   }
 
   &.form-check-reverse {
-    padding-right: $form-switch-padding-start;
-    padding-left: 0;
+    @include ltr-rtl("padding-right", $form-check-padding-start);
+    @include ltr-rtl("padding-left", 0);
 
     .form-check-input {
-      margin-right: $form-switch-padding-start * -1;
-      margin-left: 0;
+      @include ltr-rtl("margin-right", $form-check-padding-start * -1);
+      @include ltr-rtl("margin-left", 0);
     }
   }
 }
@@ -199,11 +199,3 @@
     }
   }
 }
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .form-switch .form-check-input:not(:checked):not(:focus) {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
-    }
-  }
-}

package/scss/forms/_form-control.scss

@@ -10,11 +10,11 @@
   @include font-size($input-font-size);
   font-weight: $input-font-weight;
   line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
+  color: var(--#{$prefix}input-color, $input-color);
   appearance: none; // Fix appearance for date inputs in Safari
+  background-color: var(--#{$prefix}input-bg, $input-bg);
+  background-clip: padding-box;
+  border: $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color);
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);
@@ -32,9 +32,9 @@
 
   // Customize the `:focus` state to imitate native WebKit styles.
   &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
+    color: var(--#{$prefix}input-focus-color, $input-focus-color);
+    background-color: var(--#{$prefix}input-focus-bg, $input-focus-bg);
+    border-color: var(--#{$prefix}input-focus-border-color, $input-focus-border-color);
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
@@ -44,6 +44,9 @@
     }
   }
 
+  // Add some height to date inputs on iOS
+  // 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
   &::-webkit-date-and-time-value {
     // On Android Chrome, form-control's "width: 100%" makes the input width too small
     // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
@@ -96,8 +99,8 @@
     padding: $input-padding-y $input-padding-x;
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
-    color: $form-file-button-color;
-    @include gradient-bg($form-file-button-bg);
+    color: var(--#{$prefix}form-file-button-color, $form-file-button-color);
+    @include gradient-bg(var(--#{$prefix}form-file-button-bg, $form-file-button-bg));
     pointer-events: none;
     border-color: inherit;
     border-style: solid;
@@ -108,7 +111,7 @@
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $form-file-button-hover-bg;
+    background-color: var(--#{$prefix}form-file-button-hover-bg, $form-file-button-hover-bg);
   }
 }
 
@@ -123,7 +126,7 @@
   padding: $input-padding-y 0;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
   line-height: $input-line-height;
-  color: $input-plaintext-color;
+  color: var(--#{$prefix}input-plaintext-color, $input-plaintext-color);
   background-color: transparent;
   border: solid transparent;
   border-width: $input-border-width 0;

package/scss/forms/_form-range.scss

@@ -8,8 +8,8 @@
   width: 100%;
   height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
   padding: 0; // Need to reset padding
-  background-color: transparent;
   appearance: none;
+  background-color: transparent;
 
   &:focus {
     outline: 0;
@@ -28,15 +28,15 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
-    @include gradient-bg($form-range-thumb-bg);
+    appearance: none;
+    @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
-    appearance: none;
 
     &:active {
-      @include gradient-bg($form-range-thumb-active-bg);
+      @include gradient-bg(var(--#{$prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
     }
   }
 
@@ -45,7 +45,7 @@
     height: $form-range-track-height;
     color: transparent; // Why?
     cursor: $form-range-track-cursor;
-    background-color: $form-range-track-bg;
+    background-color: var(--#{$prefix}form-range-track-bg, $form-range-track-bg);
     border-color: transparent;
     @include border-radius($form-range-track-border-radius);
     @include box-shadow($form-range-track-box-shadow);
@@ -54,15 +54,15 @@
   &::-moz-range-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    @include gradient-bg($form-range-thumb-bg);
+    appearance: none;
+    @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
-    appearance: none;
 
     &:active {
-      @include gradient-bg($form-range-thumb-active-bg);
+      @include gradient-bg(var(--#{$prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
     }
   }
 
@@ -71,7 +71,7 @@
     height: $form-range-track-height;
     color: transparent;
     cursor: $form-range-track-cursor;
-    background-color: $form-range-track-bg;
+    background-color: var(--#{$prefix}form-range-track-bg, $form-range-track-bg);
     border-color: transparent; // Firefox specific?
     @include border-radius($form-range-track-border-radius);
     @include box-shadow($form-range-track-box-shadow);
@@ -81,11 +81,11 @@
     pointer-events: none;
 
     &::-webkit-slider-thumb {
-      background-color: $form-range-thumb-disabled-bg;
+      background-color: var(--#{$prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
     }
 
     &::-moz-range-thumb {
-      background-color: $form-range-thumb-disabled-bg;
+      background-color: var(--#{$prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
     }
   }
 }

package/scss/forms/_form-select.scss

@@ -9,24 +9,25 @@
   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);
+  -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
   line-height: $form-select-line-height;
-  color: $form-select-color;
-  background-color: $form-select-bg;
+  color: var(--#{$prefix}form-select-color, $form-select-color);
+  appearance: none;
+  background-color: var(--#{$prefix}form-select-bg, $form-select-bg);
   background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
   background-repeat: no-repeat;
   @include ltr-rtl-value-only("background-position", $form-select-bg-position);
   background-size: $form-select-bg-size;
-  border: $form-select-border-width solid $form-select-border-color;
+  border: $form-select-border-width solid var(--#{$prefix}form-select-border-color, $form-select-border-color);
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
   @include transition($form-select-transition);
-  appearance: none;
 
   &:focus {
-    border-color: var($form-select-focus-border-color);
+    border-color: var(--#{$prefix}form-select-focus-border-color, $form-select-focus-border-color);
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
@@ -43,15 +44,15 @@
   }
 
   &:disabled {
-    color: $form-select-disabled-color;
-    background-color: $form-select-disabled-bg;
+    color: var(--#{$prefix}form-select-disabled-color, $form-select-disabled-color);
+    background-color: var(--#{$prefix}form-select-disabled-bg, $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 $form-select-color;
+    text-shadow: 0 0 0 var(--#{$prefix}form-select-color, $form-select-color);
   }
 }
 
@@ -70,11 +71,3 @@
   @include font-size($form-select-font-size-lg);
   @include border-radius($form-select-border-radius-lg);
 }
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .form-select {
-      --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
-    }
-  }
-}

package/scss/forms/_form-text.scss

@@ -7,5 +7,5 @@
   @include font-size($form-text-font-size);
   font-style: $form-text-font-style;
   font-weight: $form-text-font-weight;
-  color: $form-text-color;
+  color: var(--#{$prefix}form-text-color, $form-text-color);
 }

package/scss/forms/_labels.scss

@@ -7,7 +7,7 @@
   @include font-size($form-label-font-size);
   font-style: $form-label-font-style;
   font-weight: $form-label-font-weight;
-  color: $form-label-color;
+  color: var(--#{$prefix}form-label-color, $form-label-color);
 }
 
 // For use with horizontal and inline forms, when you need the label (or legend)
@@ -20,7 +20,7 @@
   font-style: $form-label-font-style;
   font-weight: $form-label-font-weight;
   line-height: $input-line-height;
-  color: $form-label-color;
+  color: var(--#{$prefix}form-label-color, $form-label-color);
 }
 
 .col-form-label-lg {

package/scss/helpers/_color-bg.scss

@@ -1,20 +1,7 @@
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
-  $color-rgb: to-rgb($value);
   .text-bg-#{$color} {
     color: color-contrast($value) if($enable-important-utilities, !important, null);
-    background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
-  }
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    @each $color, $value in $theme-colors-dark {
-      $color-rgb: to-rgb($value);
-      .text-bg-#{$color} {
-        color: color-contrast($value) if($enable-important-utilities, !important, null);
-        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
-      }
-    }
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }

package/scss/helpers/_vr.scss

@@ -1,7 +1,7 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: 1px;
+  width: $vr-border-width;
   min-height: 1em;
   padding: 0;
   background-color: currentcolor;

package/scss/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * CoreUI #{$file} v4.3.0-beta.0 (https://coreui.io)
+   * CoreUI #{$file} v4.3.0 (https://coreui.io)
    * Copyright (c) 2023 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
    */

package/scss/mixins/_caret.scss

@@ -35,7 +35,7 @@
   @if $enable-caret {
     &::after {
       display: inline-block;
-      margin-left: $spacing;
+      @include ltr-rtl("margin-left", $spacing);
       vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
@@ -54,7 +54,7 @@
 
       &::before {
         display: inline-block;
-        margin-right: $spacing;
+        @include ltr-rtl("margin-right", $spacing);
         vertical-align: $vertical-align;
         content: "";
         @include caret-start($width);
@@ -62,7 +62,7 @@
     }
 
     &:empty::after {
-      margin-left: 0;
+      @include ltr-rtl("margin-left", 0);
     }
   }
 }

package/scss/mixins/_list-group.scss

@@ -1,7 +1,6 @@
 @include deprecate("`list-group-item-variant()`", "v4.3.0", "v6.0.0");
 
 // List Groups
-
 // scss-docs-start list-group-mixin
 @mixin list-group-item-variant($state, $variant) {
   $background: map-get($variant, "bg");

package/scss/mixins/_utilities.scss

@@ -1,6 +1,6 @@
 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
+@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
   $values: map-get($utility, values);
 
   // If the values are a list or string, convert it into a map
@@ -31,6 +31,9 @@
     // Don't prefix if value key is null (e.g. with shadow class)
     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
+    // Generate RTL version
+    $generate-rtl: if(map-has-key($utility, rtl), map-get($utility, rtl), false);
+
     @if map-get($utility, rfs) {
       // Inside the media query
       @if $is-rfs-media-query {
@@ -45,7 +48,6 @@
     }
 
     $is-css-var: map-get($utility, css-var);
-    $is-dark-mode: map-get($utility, dark-mode);
     $is-local-vars: map-get($utility, local-vars);
     $is-rtl: map-get($utility, rtl);
 
@@ -55,15 +57,8 @@
       }
 
       @if $is-css-var {
-        @if $enable-dark-mode and $is-dark-mode {
-          #{theme-prefix("dark", "#{$property-class + $infix + $property-class-modifier}")},
-          .#{$property-class + $infix + $property-class-modifier} {
-            --#{$prefix}#{$css-variable-name}: #{$value};
-          }
-        } @else {
-          .#{$property-class + $infix + $property-class-modifier} {
-            --#{$prefix}#{$css-variable-name}: #{$value};
-          }
+        .#{$property-class + $infix + $property-class-modifier} {
+          --#{$prefix}#{$css-variable-name}: #{$value};
         }
 
         @each $pseudo in $state {
@@ -72,32 +67,17 @@
           }
         }
       } @else {
-        @if $enable-dark-mode and $is-dark-mode {
-          #{theme-prefix("dark", "#{$property-class + $infix + $property-class-modifier}")},
-          .#{$property-class + $infix + $property-class-modifier} {
-            @each $property in $properties {
-              @if $is-local-vars {
-                @each $local-var, $variable in $is-local-vars {
-                  --#{$prefix}#{$local-var}: #{$variable};
-                }
+        .#{$property-class + $infix + $property-class-modifier} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --#{$prefix}#{$local-var}: #{$variable};
               }
-              #{$property}: $value if($enable-important-utilities, !important, null);
             }
-          }
-        } @else {
-          .#{$property-class + $infix + $property-class-modifier} {
-            @each $property in $properties {
-              @if $is-local-vars {
-                @each $local-var, $variable in $is-local-vars {
-                  --#{$prefix}#{$local-var}: #{$variable};
-                }
-              }
-              @if $is-rtl == true {
-                @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
-              } @else {
-                #{$property}: $value if($enable-important-utilities, !important, null);
-              }
-
+            @if $generate-rtl == true {
+              @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
+            } @else {
+              #{$property}: $value if($enable-important-utilities, !important, null);
             }
           }
         }

package/scss/sidebar/_sidebar.scss

@@ -25,7 +25,9 @@
   --#{$prefix}sidebar-toggler-indicator-height: #{$sidebar-toggler-indicator-height};
   --#{$prefix}sidebar-toggler-hover-bg: #{$sidebar-toggler-hover-bg};
   --#{$prefix}sidebar-toggler-indicator-hover: #{escape-svg($sidebar-toggler-indicator-hover-icon)};
+
   --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
+
   --#{$prefix}sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
   --#{$prefix}sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
   --#{$prefix}sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};
@@ -317,13 +319,3 @@
     @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
   }
 }
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .sidebar {
-      --#{$prefix}sidebar-bg: #{$sidebar-bg-dark};
-      --#{$prefix}sidebar-border-width: #{$sidebar-border-width-dark};
-      --#{$prefix}sidebar-border-color: #{$sidebar-border-color-dark};
-    }
-  }
-}

package/js/index.esm.js

@@ -1,21 +0,0 @@
-/**
- * --------------------------------------------------------------------------
- * CoreUI index.esm.js
- * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
- * --------------------------------------------------------------------------
- */
-
-export { default as Alert } from './src/alert.js'
-export { default as Button } from './src/button.js'
-export { default as Carousel } from './src/carousel.js'
-export { default as Collapse } from './src/collapse.js'
-export { default as Dropdown } from './src/dropdown.js'
-export { default as Modal } from './src/modal.js'
-export { default as Navigation } from './src/navigation.js'
-export { default as Offcanvas } from './src/offcanvas.js'
-export { default as Popover } from './src/popover.js'
-export { default as ScrollSpy } from './src/scrollspy.js'
-export { default as Sidebar } from './src/sidebar.js'
-export { default as Tab } from './src/tab.js'
-export { default as Toast } from './src/toast.js'
-export { default as Tooltip } from './src/tooltip.js'

package/js/index.umd.js

@@ -1,38 +0,0 @@
-/**
- * --------------------------------------------------------------------------
- * CoreUI index.esm.js
- * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
- * --------------------------------------------------------------------------
- */
-
-import Alert from './src/alert.js'
-import Button from './src/button.js'
-import Carousel from './src/carousel.js'
-import Collapse from './src/collapse.js'
-import Dropdown from './src/dropdown.js'
-import Modal from './src/modal.js'
-import Navigation from './src/navigation.js'
-import OffCanvas from './src/offcanvas.js'
-import Popover from './src/popover.js'
-import ScrollSpy from './src/scrollspy.js'
-import Sidebar from './src/sidebar.js'
-import Tab from './src/tab.js'
-import Toast from './src/toast.js'
-import Tooltip from './src/tooltip.js'
-
-export default {
-  Alert,
-  Button,
-  Carousel,
-  Collapse,
-  Dropdown,
-  Modal,
-  Navigation,
-  OffCanvas,
-  Popover,
-  ScrollSpy,
-  Sidebar,
-  Tab,
-  Toast,
-  Tooltip
-}