@coreui/coreui 4.3.0-alpha.0 → 4.3.0

package/scss/_maps.scss

@@ -6,95 +6,6 @@
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
-// scss-docs-start theme-text-map
-$theme-colors-text: (
-  "primary": $primary-text-emphasis,
-  "secondary": $secondary-text-emphasis,
-  "success": $success-text-emphasis,
-  "info": $info-text-emphasis,
-  "warning": $warning-text-emphasis,
-  "danger": $danger-text-emphasis,
-  "light": $light-text-emphasis,
-  "dark": $dark-text-emphasis,
-) !default;
-// scss-docs-end theme-text-map
-
-// scss-docs-start theme-bg-subtle-map
-$theme-colors-bg-subtle: (
-  "primary": $primary-bg-subtle,
-  "secondary": $secondary-bg-subtle,
-  "success": $success-bg-subtle,
-  "info": $info-bg-subtle,
-  "warning": $warning-bg-subtle,
-  "danger": $danger-bg-subtle,
-  "light": $light-bg-subtle,
-  "dark": $dark-bg-subtle,
-) !default;
-// scss-docs-end theme-bg-subtle-map
-
-// scss-docs-start theme-border-subtle-map
-$theme-colors-border-subtle: (
-  "primary": $primary-border-subtle,
-  "secondary": $secondary-border-subtle,
-  "success": $success-border-subtle,
-  "info": $info-border-subtle,
-  "warning": $warning-border-subtle,
-  "danger": $danger-border-subtle,
-  "light": $light-border-subtle,
-  "dark": $dark-border-subtle,
-) !default;
-// scss-docs-end theme-border-subtle-map
-
-$theme-colors-rgb-dark: null !default;
-$theme-colors-text-dark: null !default;
-$theme-colors-bg-subtle-dark: null !default;
-$theme-colors-border-subtle-dark: null !default;
-
-@if $enable-dark-mode {
-  // scss-docs-start theme-colors-rgb-dark
-  $theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;
-  // scss-docs-end theme-colors-rgb-dark
-
-  // scss-docs-start theme-text-dark-map
-  $theme-colors-text-dark: (
-    "primary": $primary-text-emphasis-dark,
-    "secondary": $secondary-text-emphasis-dark,
-    "success": $success-text-emphasis-dark,
-    "info": $info-text-emphasis-dark,
-    "warning": $warning-text-emphasis-dark,
-    "danger": $danger-text-emphasis-dark,
-    "light": $light-text-emphasis-dark,
-    "dark": $dark-text-emphasis-dark,
-  ) !default;
-  // scss-docs-end theme-text-dark-map
-
-  // scss-docs-start theme-bg-subtle-dark-map
-  $theme-colors-bg-subtle-dark: (
-    "primary": $primary-bg-subtle-dark,
-    "secondary": $secondary-bg-subtle-dark,
-    "success": $success-bg-subtle-dark,
-    "info": $info-bg-subtle-dark,
-    "warning": $warning-bg-subtle-dark,
-    "danger": $danger-bg-subtle-dark,
-    "light": $light-bg-subtle-dark,
-    "dark": $dark-bg-subtle-dark,
-  ) !default;
-  // scss-docs-end theme-bg-subtle-dark-map
-
-  // scss-docs-start theme-border-subtle-dark-map
-  $theme-colors-border-subtle-dark: (
-    "primary": $primary-border-subtle-dark,
-    "secondary": $secondary-border-subtle-dark,
-    "success": $success-border-subtle-dark,
-    "info": $info-border-subtle-dark,
-    "warning": $warning-border-subtle-dark,
-    "danger": $danger-border-subtle-dark,
-    "light": $light-border-subtle-dark,
-    "dark": $dark-border-subtle-dark,
-  ) !default;
-  // scss-docs-end theme-border-subtle-dark-map
-}
-
 // Utilities maps
 //
 // Extends the default `$theme-colors` maps to help create our utilities.
@@ -114,17 +25,6 @@ $utilities-text: map-merge(
   )
 ) !default;
 $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
-
-$utilities-text-emphasis-colors: (
-  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
-  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
-  "success-emphasis": var(--#{$prefix}success-text-emphasis),
-  "info-emphasis": var(--#{$prefix}info-text-emphasis),
-  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
-  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
-  "light-emphasis": var(--#{$prefix}light-text-emphasis),
-  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
-) !default;
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
@@ -137,39 +37,16 @@ $utilities-bg: map-merge(
   )
 ) !default;
 $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
-
-$utilities-bg-subtle: (
-  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
-  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
-  "success-subtle": var(--#{$prefix}success-bg-subtle),
-  "info-subtle": var(--#{$prefix}info-bg-subtle),
-  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
-  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
-  "light-subtle": var(--#{$prefix}light-bg-subtle),
-  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
-) !default;
 // scss-docs-end utilities-bg-colors
 
 // scss-docs-start utilities-border-colors
 $utilities-border: map-merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
     "white": to-rgb($white)
   )
 ) !default;
 $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
-
-$utilities-border-subtle: (
-  "primary-subtle": var(--#{$prefix}primary-border-subtle),
-  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
-  "success-subtle": var(--#{$prefix}success-border-subtle),
-  "info-subtle": var(--#{$prefix}info-border-subtle),
-  "warning-subtle": var(--#{$prefix}warning-border-subtle),
-  "danger-subtle": var(--#{$prefix}danger-border-subtle),
-  "light-subtle": var(--#{$prefix}light-border-subtle),
-  "dark-subtle": var(--#{$prefix}dark-border-subtle)
-) !default;
 // scss-docs-end utilities-border-colors
 
 $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;

package/scss/_mixins.scss

@@ -13,7 +13,6 @@
 
 // Helpers
 @import "mixins/breakpoints";
-@import "mixins/color-mode";
 @import "mixins/color-scheme";
 @import "mixins/image";
 @import "mixins/resize";
@@ -32,6 +31,7 @@
 @import "mixins/caret";
 @import "mixins/pagination";
 @import "mixins/lists";
+@import "mixins/list-group";
 @import "mixins/forms";
 @import "mixins/table-variants";
 @import "mixins/icon";

package/scss/_nav.scss

@@ -44,7 +44,8 @@
   }
 
   // Disabled state lightens text
-  &.disabled {
+  &.disabled,
+  &:disabled {
     color: var(--#{$prefix}nav-link-disabled-color);
     pointer-events: none;
     cursor: default;
@@ -70,7 +71,6 @@
 
   .nav-link {
     margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
-    background: none;
     border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
     @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
 
@@ -80,13 +80,6 @@
       isolation: isolate;
       border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
     }
-
-    &.disabled,
-    &:disabled {
-      color: var(--#{$prefix}nav-link-disabled-color);
-      background-color: transparent;
-      border-color: transparent;
-    }
   }
 
   .nav-link.active,
@@ -117,15 +110,7 @@
   // scss-docs-end nav-pills-css-vars
 
   .nav-link {
-    background: none;
-    border: 0;
     @include border-radius(var(--#{$prefix}nav-pills-border-radius));
-
-    &:disabled {
-      color: var(--#{$prefix}nav-link-disabled-color);
-      background-color: transparent;
-      border-color: transparent;
-    }
   }
 
   .nav-link.active,

package/scss/_navbar.scss

@@ -112,7 +112,6 @@
   }
 }
 
-
 // Navbar text
 //
 //
@@ -263,7 +262,7 @@
 // Styles for switching between navbars with light or dark background.
 
 .navbar-light {
-  @include deprecate("`.navbar-light`", "v4.2.6", "v6.0.0", true);
+  @include deprecate("`.navbar-light`", "v4.3.0", "v6.0.0", true);
 }
 
 .navbar-dark {
@@ -278,11 +277,3 @@
   --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
   // scss-docs-end navbar-dark-css-vars
 }
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .navbar-toggler-icon {
-      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
-    }
-  }
-}

package/scss/_reboot.scss

@@ -523,15 +523,15 @@ 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

package/scss/_root.scss

@@ -1,10 +1,9 @@
-:root,
-[data-coreui-theme="light"] {
+:root {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // 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};
@@ -22,20 +21,10 @@
     --#{$prefix}#{$color}-rgb: #{$value};
   }
 
-  @each $color, $value in $theme-colors-text {
-    --#{$prefix}#{$color}-text-emphasis: #{$value};
-  }
-
-  @each $color, $value in $theme-colors-bg-subtle {
-    --#{$prefix}#{$color}-bg-subtle: #{$value};
-  }
-
-  @each $color, $value in $theme-colors-border-subtle {
-    --#{$prefix}#{$color}-border-subtle: #{$value};
-  }
-
   --#{$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
 
@@ -77,13 +66,13 @@
   --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
   // scss-docs-end root-body-variables
 
-  --#{$prefix}high-emphasis: #{$body-color};
-  --#{$prefix}medium-emphasis: #{$body-secondary-color};
-  --#{$prefix}disabled: #{$body-tertiary-color};
+  --#{$prefix}high-emphasis: #{$text-high-emphasis};
+  --#{$prefix}medium-emphasis: #{$text-medium-emphasis};
+  --#{$prefix}disabled: #{$text-disabled};
 
-  --#{$prefix}high-emphasis-inverse: #{$high-emphasis-inverse};
-  --#{$prefix}medium-emphasis-inverse: #{$medium-emphasis-inverse};
-  --#{$prefix}disabled-inverse: #{$disabled-inverse};
+  --#{$prefix}high-emphasis-inverse: #{$text-high-emphasis-inverse};
+  --#{$prefix}medium-emphasis-inverse: #{$text-medium-emphasis-inverse};
+  --#{$prefix}disabled-inverse: #{$text-disabled-inverse};
 
   --#{$prefix}heading-color: #{$headings-color};
 
@@ -112,7 +101,7 @@
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
   --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
-  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v4.3.0 for consistency
+  --#{$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
 
@@ -135,74 +124,3 @@
   --#{$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;
-
-    // scss-docs-start root-dark-mode-vars
-    --#{$prefix}body-color: #{$body-color-dark};
-    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
-    --#{$prefix}body-bg: #{$body-bg-dark};
-    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
-
-    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
-    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
-
-    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
-    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
-    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
-    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
-
-    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
-    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
-    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
-    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
-
-    --#{$prefix}high-emphasis: #{$body-color-dark};
-    --#{$prefix}medium-emphasis: #{$body-secondary-color-dark};
-    --#{$prefix}disabled: #{$body-tertiary-color-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};
-
-    --#{$prefix}link-color: #{$link-color-dark};
-    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
-    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
-    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
-
-    --#{$prefix}code-color: #{$code-color-dark};
-
-    --#{$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/_tooltip.scss

@@ -18,7 +18,7 @@
   z-index: var(--#{$prefix}tooltip-zindex);
   display: block;
   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();

package/scss/_type.scss

@@ -69,7 +69,7 @@
   display: inline-block;
 
   &:not(:last-child) {
-    margin-right: $list-inline-padding;
+    @include ltr-rtl("margin-right", $list-inline-padding);
   }
 }
 

package/scss/_utilities.scss

@@ -227,11 +227,6 @@ $utilities: map-merge(
       values: $border-widths,
       rtl: true
     ),
-    "subtle-border-color": (
-      property: border-color,
-      class: border,
-      values: $utilities-border-subtle
-    ),
     "border-opacity": (
       css-var: true,
       class: border-opacity,
@@ -667,11 +662,6 @@ $utilities: map-merge(
         100: 1
       )
     ),
-    "text-color": (
-      property: color,
-      class: text,
-      values: $utilities-text-emphasis-colors
-    ),
     // scss-docs-end utils-color
     // scss-docs-start utils-links
     "link-opacity": (
@@ -751,12 +741,6 @@ $utilities: map-merge(
         100: 1
       )
     ),
-    "subtle-background-color": (
-      property: background-color,
-      class: bg,
-      dark-mode: true,
-      values: $utilities-bg-subtle
-    ),
     // scss-docs-end utils-bg-color
     "gradient": (
       property: background-image,