@coreui/coreui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/scss/_navbar.scss

@@ -65,7 +65,7 @@
 .navbar-brand {
   padding-top: var(--#{$prefix}navbar-brand-padding-y);
   padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
-  margin-right: var(--#{$prefix}navbar-brand-margin-end);
+  @include ltr-rtl("margin-right", var(--#{$prefix}navbar-brand-margin-end));
   @include font-size(var(--#{$prefix}navbar-brand-font-size));
   color: var(--#{$prefix}navbar-brand-color);
   text-decoration: if($link-decoration == none, null, none);
@@ -96,13 +96,15 @@
 
   display: flex;
   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-  padding-left: 0;
+  @include ltr-rtl("padding-left", 0);
   margin-bottom: 0;
   list-style: none;
 
-  .show > .nav-link,
-  .nav-link.active {
-    color: var(--#{$prefix}navbar-active-color);
+  .nav-link {
+    &.active,
+    &.show {
+      color: var(--#{$prefix}navbar-active-color);
+    }
   }
 
   .dropdown-menu {
@@ -261,10 +263,11 @@
 // Styles for switching between navbars with light or dark background.
 
 .navbar-light {
-  @include deprecate("`.navbar-light`", "v4.2.0", "v6.0.0", true);
+  @include deprecate("`.navbar-light`", "v4.2.6", "v6.0.0", true);
 }
 
-.navbar-dark {
+.navbar-dark,
+.navbar[data-coreui-theme="dark"] {
   // scss-docs-start navbar-dark-css-vars
   --#{$prefix}navbar-color: #{$navbar-dark-color};
   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -279,7 +282,7 @@
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
-    .navbar {
+    .navbar-toggler-icon {
       --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
     }
   }

package/scss/_offcanvas.scss

@@ -48,17 +48,17 @@
 
       &.offcanvas-start {
         top: 0;
-        left: 0;
+        @include ltr-rtl("left", 0);
         width: var(--#{$prefix}offcanvas-width);
-        border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-        transform: translateX(-100%);
+        @include ltr-rtl("border-right", var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color));
+        @include ltr-rtl-value-only("transform", translateX(-100%), translateX(100%));
       }
 
       &.offcanvas-end {
         top: 0;
-        right: 0;
+        @include ltr-rtl("right", 0);
         width: var(--#{$prefix}offcanvas-width);
-        border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+        @include ltr-rtl("border-left", var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color));
         transform: translateX(100%);
       }
 
@@ -83,7 +83,7 @@
 
       &.showing,
       &.show:not(.hiding) {
-        transform: none;
+        transform: none !important; // stylelint-disable-line declaration-no-important
       }
 
       &.showing,
@@ -117,7 +117,7 @@
 }
 
 .offcanvas-backdrop {
-  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+  @include overlay-backdrop($zindex-offcanvas-backdrop, var(--#{$prefix}offcanvas-backdrop-bg, $offcanvas-backdrop-bg), $offcanvas-backdrop-opacity);
 }
 
 .offcanvas-header {
@@ -129,7 +129,7 @@
   .btn-close {
     padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
     margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
-    margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
+    @include ltr-rtl("margin-right", calc(-.5 * var(--#{$prefix}offcanvas-padding-x)));
     margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
   }
 }

package/scss/_pagination.scss

@@ -72,10 +72,10 @@
 
 .page-item {
   &:not(:first-child) .page-link {
-    margin-left: $pagination-margin-start;
+    @include ltr-rtl("margin-left", $pagination-margin-start);
   }
 
-  @if $pagination-margin-start == calc($pagination-border-width * -1) {
+  @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
     &:first-child {
       .page-link {
         @include border-start-radius(var(--#{$prefix}pagination-border-radius));

package/scss/_progress.scss

@@ -66,3 +66,46 @@
     }
   }
 }
+
+.progress-thin {
+  height: 4px;
+}
+
+// White progress bar
+.progress.progress-white {
+  background-color: rgba(255, 255, 255, .2);
+  .progress-bar {
+    background-color: $white;
+  }
+}
+
+.progress-group {
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: $progress-group-margin-bottom;
+}
+
+.progress-group-prepend {
+  flex: 0 0 100px;
+  align-self: center;
+}
+
+.progress-group-header {
+  display: flex;
+  flex-basis: 100%;
+  align-items: center;
+  margin-bottom: $progress-group-header-margin-bottom;
+}
+
+.progress-group-bars {
+  flex-grow: 1;
+  align-self: center;
+
+  .progress:not(:last-child) {
+    margin-bottom: 2px;
+  }
+}
+
+.progress-group-header + .progress-group-bars {
+  flex-basis: 100%;
+}

package/scss/_reboot.scss

@@ -87,7 +87,7 @@ hr {
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
-  color: var(--#{$prefix}heading-color, inherit);
+  color: var(--#{$prefix}heading-color);
 }
 
 h1 {
@@ -156,10 +156,10 @@ address {
 
 // Lists
 
-ol,
-ul {
-  padding-left: 2rem;
-}
+// ol,
+// ul {
+//   @include ltr-rtl("padding-left", 2rem); // TODO: find solution
+// }
 
 ol,
 ul,
@@ -183,7 +183,7 @@ dt {
 
 dd {
   margin-bottom: .5rem;
-  margin-left: 0; // 1
+  @include ltr-rtl("margin-left", 0); // 1
 }
 
 
@@ -249,7 +249,6 @@ a {
     text-decoration: $link-hover-decoration;
   }
 }
-
 // And undo these styles for placeholder links/named anchors (without href).
 // It would be more straightforward to just use a[href] in previous block, but that
 // causes specificity issues in many other styles that are too complex to fix.
@@ -284,7 +283,7 @@ pre {
   margin-bottom: 1rem; // 2
   overflow: auto; // 3
   @include font-size($code-font-size);
-  color: $pre-color;
+  color: var(--#{$prefix}pre-color, $pre-color);
 
   // Account for some code outputs that place code tags in pre tags
   code {
@@ -308,8 +307,8 @@ code {
 kbd {
   padding: $kbd-padding-y $kbd-padding-x;
   @include font-size($kbd-font-size);
-  color: $kbd-color;
-  background-color: $kbd-bg;
+  color: var(--#{$prefix}kbd-color, $kbd-color);
+  background-color: var(--#{$prefix}kbd-bg, $kbd-bg);
   @include border-radius($border-radius-sm);
 
   kbd {
@@ -349,7 +348,7 @@ table {
 caption {
   padding-top: $table-cell-padding-y;
   padding-bottom: $table-cell-padding-y;
-  color: $table-caption-color;
+  color: var(--#{$prefix}table-caption-color, $table-caption-color);
   text-align: left;
 }
 
@@ -494,7 +493,7 @@ fieldset {
 //    See https://github.com/twbs/bootstrap/issues/29712
 
 legend {
-  float: left; // 1
+  @include ltr-rtl("float", left); // 1
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
@@ -524,30 +523,29 @@ legend {
   height: auto;
 }
 
-// 1. Correct the outline style in Safari.
-// 2. This overrides the extra rounded corners on search inputs in iOS so that our
+// 1. This overrides the extra rounded corners on search inputs in iOS so that our
 //    `.form-control` class can properly style them. Note that this cannot simply
 //    be added to `.form-control` as it's not specific enough. For details, see
 //    https://github.com/twbs/bootstrap/issues/11586.
+// 2. Correct the outline style in Safari.
 
 [type="search"] {
-  outline-offset: -2px; // 1
-  -webkit-appearance: textfield; // 2
+  -webkit-appearance: textfield; // 1
+  outline-offset: -2px; // 2
 }
 
 // 1. A few input types should stay LTR
 // See https://rtlstyling.com/posts/rtl-styling#form-inputs
-// 2. RTL only output
-// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
 
-/* rtl:raw:
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
-  direction: ltr;
+*[dir="rtl"] {
+  [type="tel"],
+  [type="url"],
+  [type="email"],
+  [type="number"] {
+    direction: ltr;
+  }
 }
-*/
+
 
 // Remove the inner padding in Chrome and Safari on macOS.
 

package/scss/_root.scss

@@ -4,7 +4,7 @@
 
   // Colors
   //
-  // Generate palettes for full colors, grays, and theme colors.
+  // Generate palettes for full colors, grays, and theme colors
 
   @each $color, $value in $colors {
     --#{$prefix}#{$color}: #{$value};
@@ -23,7 +23,7 @@
   }
 
   @each $color, $value in $theme-colors-text {
-    --#{$prefix}#{$color}-text: #{$value};
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
   }
 
   @each $color, $value in $theme-colors-bg-subtle {
@@ -36,8 +36,6 @@
 
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
-  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
-  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   // Fonts
 
@@ -56,7 +54,14 @@
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
+  @if $body-text-align != null {
+    --#{$prefix}body-text-align: #{$body-text-align};
+  }
+
   --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   --#{$prefix}emphasis-color: #{$body-emphasis-color};
   --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
@@ -71,16 +76,26 @@
   --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
   --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
 
-  @if $body-text-align != null {
-    --#{$prefix}body-text-align: #{$body-text-align};
-  }
-  --#{$prefix}body-bg: #{$body-bg};
-  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
+  --#{$prefix}body-color-dark: #{$body-color-dark};
+  --#{$prefix}body-color-rgb-dark: #{to-rgb($body-color-dark)};
+  --#{$prefix}body-bg-dark: #{$body-bg-dark};
+  --#{$prefix}body-bg-rgb-dark: #{to-rgb($body-bg-dark)};
+
+  --#{$prefix}emphasis-color-dark: #{$body-emphasis-color-dark};
+  --#{$prefix}emphasis-color-rgb-dark: #{to-rgb($body-emphasis-color-dark)};
+
+  --#{$prefix}secondary-color-dark: #{$body-secondary-color-dark};
+  --#{$prefix}secondary-color-rgb-dark: #{to-rgb($body-secondary-color-dark)};
+  --#{$prefix}secondary-bg-dark: #{$body-secondary-bg-dark};
+  --#{$prefix}secondary-bg-rgb-dark: #{to-rgb($body-secondary-bg-dark)};
+
+  --#{$prefix}tertiary-color-dark: #{$body-tertiary-color-dark};
+  --#{$prefix}tertiary-color-rgb-dark: #{to-rgb($body-tertiary-color-dark)};
+  --#{$prefix}tertiary-bg-dark: #{$body-tertiary-bg-dark};
+  --#{$prefix}tertiary-bg-rgb-dark: #{to-rgb($body-tertiary-bg-dark)};
   // scss-docs-end root-body-variables
 
-  @if $headings-color != null {
-    --#{$prefix}heading-color: #{$headings-color};
-  }
+  --#{$prefix}heading-color: #{$headings-color};
 
   --#{$prefix}link-color: #{$link-color};
   --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
@@ -106,7 +121,8 @@
   --#{$prefix}border-radius-sm: #{$border-radius-sm};
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
-  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.0.0 for consistency
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-var
 
@@ -115,34 +131,25 @@
   --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
   --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
 
-  --#{$prefix}emphasis-color: #{$emphasis-color};
-
-  // scss-docs-start form-control-vars
-  --#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
-  --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
-  // scss-docs-end form-control-vars
-
-  --#{$prefix}highlight-bg: #{$mark-bg};
-
-  @each $name, $value in $grid-breakpoints {
-    --#{$prefix}breakpoint-#{$name}: #{$value};
-  }
-
-  --#{$prefix}mobile-breakpoint: #{$mobile-breakpoint};
+  // Focus styles
+  // scss-docs-start root-focus-variables
+  --#{$prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$prefix}focus-ring-color: #{$focus-ring-color};
+  // scss-docs-end root-focus-variables
+
+  // scss-docs-start root-form-validation-variables
+  --#{$prefix}form-valid-color: #{$form-valid-color};
+  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+  --#{$prefix}form-invalid-color: #{$form-invalid-color};
+  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+  // scss-docs-end root-form-validation-variables
 }
 
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
     color-scheme: dark;
 
-    @each $color, $value in $theme-colors-dark {
-      --#{$prefix}#{$color}: #{$value};
-    }
-
-    @each $color, $value in $theme-colors-dark-rgb {
-      --#{$prefix}#{$color}-rgb: #{$value};
-    }
-
     // scss-docs-start root-dark-mode-vars
     --#{$prefix}body-color: #{$body-color-dark};
     --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
@@ -162,34 +169,29 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
-    --#{$prefix}emphasis-color: #{$emphasis-color-dark};
-
-    --#{$prefix}primary-text: #{$primary-text-dark};
-    --#{$prefix}secondary-text: #{$secondary-text-dark};
-    --#{$prefix}success-text: #{$success-text-dark};
-    --#{$prefix}info-text: #{$info-text-dark};
-    --#{$prefix}warning-text: #{$warning-text-dark};
-    --#{$prefix}danger-text: #{$danger-text-dark};
-    --#{$prefix}light-text: #{$light-text-dark};
-    --#{$prefix}dark-text: #{$dark-text-dark};
-
-    --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
-    --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
-    --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
-    --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
-    --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
-    --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
-    --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
-    --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
-
-    --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
-    --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
-    --#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
-    --#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
-    --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
-    --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
-    --#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
-    --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
+    @each $color, $value in $theme-colors-dark {
+      --#{$prefix}#{$color}: #{$value};
+    }
+
+    @each $color, $value in $grays-dark {
+      --#{$prefix}gray-#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-rgb-dark {
+      --#{$prefix}#{$color}-rgb: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-text-dark {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-bg-subtle-dark {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-border-subtle-dark {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
 
     --#{$prefix}heading-color: #{$headings-color-dark};
 
@@ -202,6 +204,11 @@
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+
+    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
     // scss-docs-end root-dark-mode-vars
   }
 }

package/scss/_sidebar.scss

@@ -1,14 +1,3 @@
 @import "sidebar/sidebar";
 @import "sidebar/sidebar-nav";
 @import "sidebar/sidebar-narrow";
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .sidebar {
-      --#{$prefix}sidebar-bg: #{$sidebar-bg-dark};
-      --#{$prefix}sidebar-color: #{$sidebar-color-dark};
-      --#{$prefix}sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg-dark};
-      --#{$prefix}sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg-dark};
-    }
-  }
-}

package/scss/_tables.scss

@@ -3,6 +3,12 @@
 //
 
 .table {
+  // Reset needed for nesting tables
+  --#{$prefix}table-color-type: initial;
+  --#{$prefix}table-bg-type: initial;
+  --#{$prefix}table-color-state: initial;
+  --#{$prefix}table-bg-state: initial;
+  // End of reset
   --#{$prefix}table-color: #{$table-color};
   --#{$prefix}table-bg: #{$table-bg};
   --#{$prefix}table-border-color: #{$table-border-color};
@@ -16,7 +22,6 @@
 
   width: 100%;
   margin-bottom: $spacer;
-  color: var(--#{$prefix}table-color);
   vertical-align: $table-cell-vertical-align;
   border-color: var(--#{$prefix}table-border-color);
 
@@ -27,9 +32,11 @@
   // stylelint-disable-next-line selector-max-universal
   > :not(caption) > * > * {
     padding: $table-cell-padding-y $table-cell-padding-x;
+    // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
+    color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
     background-color: var(--#{$prefix}table-bg);
     border-bottom-width: $table-border-width;
-    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
   }
 
   > tbody {
@@ -42,7 +49,7 @@
 }
 
 .table-group-divider {
-  border-top: calc($table-border-width * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
+  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
 }
 
 //
@@ -104,16 +111,16 @@
 // For rows
 .table-striped {
   > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
-    color: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
   }
 }
 
 // For columns
 .table-striped-columns {
   > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-    --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg);
-    color: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
   }
 }
 
@@ -122,8 +129,8 @@
 // The `.table-active` class can be added to highlight rows or cells
 
 .table-active {
-  --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
-  color: var(--#{$prefix}table-active-color);
+  --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
 }
 
 // Hover effect
@@ -132,8 +139,8 @@
 
 .table-hover {
   > tbody > tr:hover > * {
-    --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
-    color: var(--#{$prefix}table-hover-color);
+    --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+    --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
   }
 }
 

package/scss/_toasts.scss

@@ -62,8 +62,8 @@
   @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
 
   .btn-close {
-    margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
-    margin-left: var(--#{$prefix}toast-padding-x);
+    @include ltr-rtl("margin-right", calc(-.5 * var(--#{$prefix}toast-padding-x)));
+    @include ltr-rtl("margin-left", var(--#{$prefix}toast-padding-x));
   }
 }
 

package/scss/_tooltip.scss

@@ -17,9 +17,8 @@
 
   z-index: var(--#{$prefix}tooltip-zindex);
   display: block;
-  padding: var(--#{$prefix}tooltip-arrow-height);
   margin: var(--#{$prefix}tooltip-margin);
-  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
+  @include deprecate("`$tooltip-margin`", "v4", "v4.x", true);
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -44,8 +43,8 @@
   }
 }
 
-.cui-tooltip-top .tooltip-arrow {
-  bottom: 0;
+.bs-tooltip-top .tooltip-arrow {
+  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
 
   &::before {
     top: -1px;
@@ -55,8 +54,8 @@
 }
 
 /* rtl:begin:ignore */
-.cui-tooltip-end .tooltip-arrow {
-  left: 0;
+.bs-tooltip-end .tooltip-arrow {
+  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
@@ -69,8 +68,8 @@
 
 /* rtl:end:ignore */
 
-.cui-tooltip-bottom .tooltip-arrow {
-  top: 0;
+.bs-tooltip-bottom .tooltip-arrow {
+  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
 
   &::before {
     bottom: -1px;
@@ -80,8 +79,8 @@
 }
 
 /* rtl:begin:ignore */
-.cui-tooltip-start .tooltip-arrow {
-  right: 0;
+.bs-tooltip-start .tooltip-arrow {
+  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
@@ -94,18 +93,18 @@
 
 /* rtl:end:ignore */
 
-.cui-tooltip-auto {
+.bs-tooltip-auto {
   &[data-popper-placement^="top"] {
-    @extend .cui-tooltip-top;
+    @extend .bs-tooltip-top;
   }
   &[data-popper-placement^="right"] {
-    @extend .cui-tooltip-end;
+    @extend .bs-tooltip-end;
   }
   &[data-popper-placement^="bottom"] {
-    @extend .cui-tooltip-bottom;
+    @extend .bs-tooltip-bottom;
   }
   &[data-popper-placement^="left"] {
-    @extend .cui-tooltip-start;
+    @extend .bs-tooltip-start;
   }
 }