Merge branch 'v4-dev' of https://github.com/coreui/coreui into v4-dev-sync

# Conflicts:
#	scss/_buttons.scss
#	scss/_variables.scss
#	scss/sidebar/_sidebar-narrow.scss
#	scss/sidebar/_sidebar.scss

Author: mrholek

docs/content/4.0/getting-started/rtl.md

@@ -12,12 +12,6 @@ We recommend getting familiar with CoreUI for Bootstrap first by reading through
 
 You may also want to read up on [the RTLCSS project](https://rtlcss.com/), as it powers our approach to RTL.
 
-{{< callout warning >}}
-### Experimental feature
-
-The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new), we'd love to get your insights.
-{{< /callout >}}
-
 ## Required HTML
 
 There are two strict requirements for enabling RTL in Bootstrap-powered pages.
@@ -67,43 +61,20 @@ You can see the above requirements reflected in this modified RTL starter templa
 
 ## Approach
 
-Our approach to building RTL support into CoreUI for Bootstrap comes with two important decisions that impact how we write and use our CSS:
+Our approach to building RTL support into CoreUI comes with two important decisions that impact how we write and use our CSS:
 
-1. **First, we decided to build it with the [RTLCSS](https://rtlcss.com/) project.** This gives us some powerful features for managing changes and overrides when moving from LTR to RTL. It also allows us to build two versions of CoreUI for Bootstrap from one codebase.
+1. **First, as in CoreUI 3 we decided to build it with our own mixins** This gives us full control and allows us to generate LTR and RTL separately, or if needed one stylesheet with both versions without any style's duplicates.
 
-2. **Second, we've renamed a handful of directional classes to adopt a logical properties approach.** Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like `left` and `right` in favor `start` and `end`. That makes the class names and values appropriate for LTR and RTL without any overhead.
+2. **Second, in CoreUI 3 we introduced a handful of directional classes ex. `mfs-auto`,  but in CoreUI 4 we've simplified them ex. `ms-auto`, and renamed all directional classes to adopt a logical properties approach.** Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like `left` and `right` in favor `start` and `end`. That makes the class names and values appropriate for LTR and RTL without any overhead.
 
   For example, instead of `.ml-3` for `margin-left`, use `.ms-3`.
 
 Working with RTL, through our source Sass or compiled CSS, shouldn't be much different from our default LTR though.
 
 ## Customize from source
 
-When it comes to [customization]({{< docsref "/customize/sass" >}}), the preferred way is to take advantage of variables, maps, and mixins. This approach works the same for RTL, even if it's post-processed from the compiled files, thanks to [how RTLCSS works](https://rtlcss.com/learn/getting-started/why-rtlcss/).
-
-### Custom RTL values
-
-Using [RTLCSS value directives](https://rtlcss.com/learn/usage-guide/value-directives/), you can make a variable output a different value for RTL. For example, to decrease the weight for `$font-weight-bold` throughout the codebase, you may use the `/*rtl: {value}*/` syntax:
-
-```scss
-$font-weight-bold: 700 #{/* rtl:600 */} !default;
-```
-
-Which would ouput to the following for our default CSS and RTL CSS:
-
-```css
-/* coreui.css */
-dt {
-  font-weight: 700 /* rtl:600 */;
-}
-
-/* coreui.rtl.css */
-dt {
-  font-weight: 600;
-}
-```
-
-### Alternative font stack
+When it comes to [customization]({{< docsref "/customize/sass" >}}), the preferred way is to take advantage of variables, maps, and mixins.
+<!-- TODO: find solution ### Alternative font stack
 
 In the case you're using a custom font, be aware that not all fonts support the non-Latin alphabet. To switch from Pan-European to Arabic family, you may need to use `/*rtl:insert: {value}*/` in your font stack to modify the names of font families.
 
@@ -130,47 +101,19 @@ $font-family-sans-serif:
   sans-serif,
   // Emoji fonts
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-```
+``` -->
 
 ### LTR and RTL at the same time
 
-Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://rtlcss.com/learn/usage-guide/string-map/), this is pretty straightforward. Wrap your `@import`s with a class, and set a custom rename rule for RTLCSS:
+Need both LTR and RTL on the same page? All you have to do is set following variables:
 
 ```scss
-/* rtl:begin:options: {
-  "autoRename": true,
-  "stringMap":[
-    "name": "ltr-rtl",
-    "priority": 100,
-    "search": ["ltr"],
-    "replace": ["rtl"],
-    "options": {
-      "scope": "*",
-      "ignoreCase": false
-    }
-  ]
-} */
-.ltr {
-  @import "../node_modules/bootstrap/scss/bootstrap";
-}
-/*rtl:end:options*/
+$enable-ltr: true;
+$enable-rtl: true;
 ```
 
 After running Sass then RTLCSS, each selector in your CSS files will be prepended by `.ltr`, and `.rtl` for RTL files. Now you're able to use both files on the same page, and simply use `.ltr` or `.rtl` on your components wrappers to use one or the other direction.
 
-{{< callout warning >}}
-#### Edge cases and known limitations
-
-While this approach is understandable, please pay attention to the following:
-
-1. When switching `.ltr` and `.rtl`, make sure you add `dir` and `lang` attributes accordingly.
-2. Loading both files can be a real performance bottleneck: consider some [optimization]({{< docsref "/customize/optimize" >}}), and maybe try to [load one of those files asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/).
-3. Nesting styles this way will prevent our `form-validation-state()` mixin from working as intended, thus require you tweak it a bit by yourself. [See #31223](https://github.com/twbs/bootstrap/issues/31223).
-{{< /callout >}}
-
-## The breadcrumb case
-
-The [breadcrumb separator]({{< docsref "/components/breadcrumb" >}}/#changing-the-separator) is the only case requiring its own brand new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
 
 ## Additional resources
 

docs/layouts/partials/sidebar.html

@@ -26,7 +26,7 @@
         </a>
 
         {{- if $group.pages }}
-        <ul class="nav-group-items sidebar-nav-sm">
+        <ul class="nav-group-items compact">
           {{- range $doc := $group.pages -}}
             {{- $doc_slug := $doc.title | urlize -}}
             {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}

scss/_alert.scss

@@ -6,7 +6,9 @@
   position: relative;
   padding: $alert-padding-y $alert-padding-x;
   margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid transparent;
+  color: var(--#{$variable-prefix}alert-color);
+  @include gradient-bg(var(--#{$variable-prefix}alert-bg));
+  border: $alert-border-width solid var(--#{$variable-prefix}alert-border-color, transparent);
   @include border-radius($alert-border-radius);
 }
 
@@ -19,6 +21,7 @@
 // Provide class for links that match alerts
 .alert-link {
   font-weight: $alert-link-font-weight;
+  color: var(--#{$variable-prefix}alert-link-color);
 }
 
 
@@ -44,13 +47,13 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $state, $map in $alert-variants {
-  $background: var(--#{$variable-prefix}alert-background, map-get($map, "background"));
-  $border: var(--#{$variable-prefix}alert-border-color, map-get($map, "border"));
-  $color: var(--#{$variable-prefix}alert-color, contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state));
-  $link-color: var(--#{$variable-prefix}alert-link-color, map-get($map, "link-color"));
+  $background: map-get($map, "background");
+  $border-color: map-get($map, "border-color");
+  $color: contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state);
+  $link-color: map-get($map, "link-color");
 
   .alert-#{$state} {
-    @include alert-variant($background, $border, $color, $link-color);
+    @include alert-variant($background, $border-color, $color, $link-color);
   }
 }
 // scss-docs-end alert-modifiers

scss/_buttons.scss

@@ -7,46 +7,75 @@
   font-family: $btn-font-family;
   font-weight: $btn-font-weight;
   line-height: $btn-line-height;
-  color: var(--#{$variable-prefix}body-color, $body-color);
+  color: var(--#{$variable-prefix}btn-color, $body-color);
   text-align: center;
   text-decoration: if($link-decoration == none, null, none);
   white-space: $btn-white-space;
   vertical-align: middle;
   cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
-  background-color: transparent;
-  border: $btn-border-width solid transparent;
+  @include gradient-bg(var(--#{$variable-prefix}btn-bg, transparent));
+  border: $btn-border-width solid var(--#{$variable-prefix}btn-border-color, transparent);
+  @include box-shadow(var(--#{$variable-prefix}btn-box-shadow, $btn-box-shadow));
   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
   @include transition($btn-transition);
   @include elevation(1, ("[class*='link']", "[class*='outline']", "[class*='ghost']", "[class*='transparent']"));
 
   &:hover {
-    color: var(--#{$variable-prefix}body-color, $body-color);
+    color: var(--#{$variable-prefix}btn-hover-color, $body-color);
+    @include gradient-bg(var(--#{$variable-prefix}btn-hover-bg));
     text-decoration: if($link-hover-decoration == underline, none, null);
+    border-color: var(--#{$variable-prefix}btn-hover-border-color, transparent);
     @include elevation(2, ("[class*='link']", "[class*='outline']", "[class*='ghost']", "[class*='transparent']"));
   }
 
   .btn-check:focus + &,
   &:focus {
+    color: var(--#{$variable-prefix}btn-hover-color);
+    @include gradient-bg(var(--#{$variable-prefix}btn-hover-bg));
+    border-color: var(--#{$variable-prefix}btn-hover-border-color, transparent);
     outline: 0;
-    box-shadow: $btn-focus-box-shadow;
+    // box-shadow: $btn-focus-box-shadow; // TODO: check this solution
+    @if $enable-shadows {
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width var(--#{$variable-prefix}btn-shadow));
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: 0 0 0 $btn-focus-width var(--#{$variable-prefix}btn-shadow);
+    }
   }
 
   .btn-check:checked + &,
   .btn-check:active + &,
   &:active,
-  &.active {
+  &.active,
+  .show > &.dropdown-toggle {
+    color: var(--#{$variable-prefix}btn-active-color);
+    background-color: var(--#{$variable-prefix}btn-active-bg);
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$variable-prefix}btn-active-border-color, transparent);
     @include box-shadow($btn-active-box-shadow);
 
     &:focus {
-      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      // @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); // TODO: check this solution
+      @if $enable-shadows {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width var(--#{$variable-prefix}btn-shadow));
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: 0 0 0 $btn-focus-width var(--#{$variable-prefix}btn-shadow);
+      }
     }
   }
 
   &:disabled,
   &.disabled,
   fieldset:disabled & {
+    color: var(--#{$variable-prefix}btn-disabled-color);
     pointer-events: none;
+    background-color: var(--#{$variable-prefix}btn-disabled-bg);
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$variable-prefix}btn-disabled-border-color, transparent);
     opacity: $btn-disabled-opacity;
     @include box-shadow(none);
   }
@@ -61,19 +90,19 @@
 @each $state, $map in $button-variants {
   .btn-#{$state} {
     @include button-variant(
-      $background: var(--#{$variable-prefix}btn-background, map-get($map, "background")),
-      $border-color: var(--#{$variable-prefix}btn-border-color, map-get($map, "border-color")),
-      $color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
-      $hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
-      $hover-border-color: var(--#{$variable-prefix}btn-hover-border, map-get($map, "hover-border-color")),
-      $hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
-      $active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
-      $active-border-color: var(--#{$variable-prefix}btn-active-border, map-get($map, "active-border-color")),
-      $active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
-      $disabled-background: var(--#{$variable-prefix}btn-disabled-background, map-get($map, "disabled-background")),
-      $disabled-border-color: var(--#{$variable-prefix}btn-disabled-border, map-get($map, "disabled-border-color")),
-      $disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
-      $shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
+      $background: map-get($map, "background"),
+      $border-color: map-get($map, "border-color"),
+      $color: map-get($map, "color"),
+      $hover-background: map-get($map, "hover-background"),
+      $hover-border-color: map-get($map, "hover-border-color"),
+      $hover-color: map-get($map, "hover-color"),
+      $active-background: map-get($map, "active-background"),
+      $active-border-color: map-get($map, "active-border-color"),
+      $active-color: map-get($map, "active-color"),
+      $disabled-background: map-get($map, "disabled-background"),
+      $disabled-border-color: map-get($map, "disabled-border-color"),
+      $disabled-color: map-get($map, "disabled-color"),
+      $shadow: map-get($map, "shadow")
     );
   }
 }
@@ -83,15 +112,15 @@
 @each $state, $map in $button-outline-ghost-variants {
   .btn-outline-#{$state} {
     @include button-outline-variant(
-      $color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
-      $hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
-      $hover-border-color: var(--#{$variable-prefix}btn-hover-border-color, map-get($map, "hover-border-color")),
-      $hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
-      $active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
-      $active-border-color: var(--#{$variable-prefix}btn-active-border-color, map-get($map, "active-border-color")),
-      $active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
-      $disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
-      $shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
+      $color: map-get($map, "color"),
+      $hover-background: map-get($map, "hover-background"),
+      $hover-border-color: map-get($map, "hover-border-color"),
+      $hover-color: map-get($map, "hover-color"),
+      $active-background: map-get($map, "active-background"),
+      $active-border-color: map-get($map, "active-border-color"),
+      $active-color: map-get($map, "active-color"),
+      $disabled-color: map-get($map, "disabled-color"),
+      $shadow: map-get($map, "shadow")
     );
   }
 }
@@ -101,15 +130,15 @@
 @each $state, $map in $button-outline-ghost-variants {
   .btn-ghost-#{$state} {
     @include button-ghost-variant(
-      $color: var(--#{$variable-prefix}btn-color, map-get($map, "color")),
-      $hover-background: var(--#{$variable-prefix}btn-hover-background, map-get($map, "hover-background")),
-      $hover-border-color: var(--#{$variable-prefix}btn-hover-border-color, map-get($map, "hover-border-color")),
-      $hover-color: var(--#{$variable-prefix}btn-hover-color, map-get($map, "hover-color")),
-      $active-background: var(--#{$variable-prefix}btn-active-background, map-get($map, "active-background")),
-      $active-border-color: var(--#{$variable-prefix}btn-active-border-color, map-get($map, "active-border-color")),
-      $active-color: var(--#{$variable-prefix}btn-active-color, map-get($map, "active-color")),
-      $disabled-color: var(--#{$variable-prefix}btn-disabled-color, map-get($map, "disabled-color")),
-      $shadow: var(--#{$variable-prefix}btn-shadow, map-get($map, "shadow"))
+      $color: map-get($map, "color"),
+      $hover-background: map-get($map, "hover-background"),
+      $hover-border-color: map-get($map, "hover-border-color"),
+      $hover-color: map-get($map, "hover-color"),
+      $active-background: map-get($map, "active-background"),
+      $active-border-color: map-get($map, "active-border-color"),
+      $active-color: map-get($map, "active-color"),
+      $disabled-color: map-get($map, "disabled-color"),
+      $shadow: map-get($map, "shadow")
     );
   }
 }

scss/_functions.scss

@@ -184,7 +184,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 @function alert-color-map($color) {
   @return (
     "background": shift-color($color, $alert-bg-scale),
-    "border": shift-color($color, $alert-border-scale),
+    "border-color": shift-color($color, $alert-border-scale),
     "color": shift-color($color, $alert-color-scale),
     "link-color": shade-color(shift-color($color, $alert-color-scale), 20%)
   );
@@ -239,6 +239,28 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 // scss-docs-end list-group-color-functions
 
+// scss-docs-start table-color-functions
+@function table-color-map($background) {
+  $table-bg: $background;
+  $color: color-contrast(opaque($body-bg, $background));
+  $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+  $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+  $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+
+  @return (
+    "bg": $background,
+    "color": $color,
+    "border-color": mix($color, $background, percentage($table-border-factor)),
+    "striped-bg": $striped-bg,
+    "striped-color": color-contrast($striped-bg),
+    "active-bg": $active-bg,
+    "active-color": color-contrast($active-bg),
+    "hover-bg": $hover-bg,
+    "hover-color": color-contrast($hover-bg)
+  );
+}
+// scss-docs-end table-color-functions
+
 // Return valid calc
 @function add($value1, $value2, $return-calc: true) {
   @if $value1 == null {

scss/_list-group.scss

@@ -35,6 +35,7 @@
   &:active {
     color: var(--#{$variable-prefix}list-group-action-active-color, $list-group-action-active-color);
     background-color: var(--#{$variable-prefix}list-group-action-active-bg, $list-group-action-active-bg);
+    border-color: var(--#{$variable-prefix}list-group-action-active-border-color);
   }
 }
 
@@ -152,9 +153,9 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $state, $map in $list-group-variants {
-  $background: var(--#{$variable-prefix}list-group-background, map-get($map, "background"));
-  $background-hover: var(--#{$variable-prefix}list-group-background-hover, map-get($map, "background-hover"));
-  $color: var(--#{$variable-prefix}list-group-color, contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state));
+  $background: map-get($map, "background");
+  $background-hover: map-get($map, "background-hover");
+  $color: contrast-ratio-correction(map-get($map, "color"), map-get($map, "background"), abs($alert-color-scale), $state);
 
   @include list-group-item-variant($state, $background, $background-hover, $color);
 }