@coreui/coreui 5.0.0-alpha.1 → 5.0.0-alpha.3

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@coreui/coreui",
   "description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintained by the CoreUI Team",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.3",
   "config": {
-    "version_short": "4.3"
+    "version_short": "5.0"
   },
   "keywords": [
     "css",
@@ -28,15 +28,15 @@
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
     "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
-    "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-test": "jasmine --config=scss/tests/jasmine.js",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
-    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
-    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
-    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
-    "js-compile-plugins": "node build/build-plugins.js",
-    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js,.md .",
+    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.mjs --sourcemap",
+    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
+    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.mjs --sourcemap",
+    "js-compile-plugins": "node build/build-plugins.mjs",
+    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js,.mjs,.md .",
     "js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
     "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.js.map,includeSources,url=coreui.min.js.map\" --output dist/js/coreui.min.js dist/js/coreui.js",
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.esm.js.map,includeSources,url=coreui.esm.min.js.map\" --output dist/js/coreui.esm.min.js dist/js/coreui.esm.js",
@@ -52,15 +52,15 @@
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "hugo --cleanDestinationDir --printUnusedTemplates",
     "docs-compile": "npm run docs-build",
-    "docs-vnu": "node build/vnu-jar.js",
+    "docs-vnu": "node build/vnu-jar.mjs",
     "docs-lint": "npm run docs-vnu",
     "docs-serve": "hugo server --port 9001 --disableFastRender --printUnusedTemplates",
     "docs-serve-only": "npx sirv-cli _gh_pages --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
     "update-deps": "ncu -u -x globby,jasmine,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update docs/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
-    "release-sri": "node build/generate-sri.js",
-    "release-version": "node build/change-version.js",
+    "release-sri": "node build/generate-sri.mjs",
+    "release-version": "node build/change-version.mjs",
     "release-zip": "cross-env-shell \"rm -rf coreui-$npm_package_version-dist coreui-$npm_package_version-dist.zip && cp -r dist/ coreui-$npm_package_version-dist && zip -qr9 coreui-$npm_package_version-dist.zip coreui-$npm_package_version-dist && rm -rf coreui-$npm_package_version-dist\"",
     "dist": "npm-run-all --aggregate-output --parallel css js",
     "test": "npm-run-all lint dist js-test docs-build docs-lint",
@@ -90,34 +90,34 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@popperjs/core": "^2.11.7"
+    "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.21.5",
-    "@babel/core": "^7.22.1",
-    "@babel/preset-env": "^7.22.4",
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.22.20",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-replace": "^5.0.2",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.16",
     "bundlewatch": "^0.3.3",
     "clean-css-cli": "^5.6.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.41.0",
+    "eslint": "^8.50.0",
     "eslint-config-xo": "^0.43.1",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-unicorn": "^47.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-plugin-unicorn": "^48.0.1",
     "find-unused-sass-variables": "^5.0.0",
     "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.104.0",
+    "hugo-bin": "^0.114.2",
     "ip": "^2.0.0",
     "jasmine": "^4.6.0",
-    "jquery": "^3.7.0",
+    "jquery": "^3.7.1",
     "karma": "^6.4.2",
     "karma-browserstack-launcher": "1.6.0",
     "karma-chrome-launcher": "^3.2.0",
@@ -125,23 +125,23 @@
     "karma-detect-browsers": "^2.3.3",
     "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "^5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.8",
-    "lockfile-lint": "^4.10.5",
-    "nodemon": "^2.0.22",
+    "lockfile-lint": "^4.12.1",
+    "nodemon": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.30",
     "postcss-cli": "^10.1.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "rollup": "^3.23.0",
+    "rollup": "^3.29.3",
     "rollup-plugin-istanbul": "^4.0.0",
-    "rtlcss": "^4.1.0",
-    "sass": "^1.62.1",
+    "rtlcss": "^4.1.1",
+    "sass": "^1.68.0",
     "sass-true": "^7.0.0",
     "shelljs": "^0.8.5",
-    "stylelint": "^15.6.2",
-    "stylelint-config-twbs-bootstrap": "^10.0.0",
-    "terser": "5.17.6",
+    "stylelint": "^15.10.3",
+    "stylelint-config-twbs-bootstrap": "^11.0.1",
+    "terser": "5.20.0",
     "vnu-jar": "23.4.11"
   },
   "files": [
@@ -169,7 +169,7 @@
     },
     "dependencies": {},
     "peerDependencies": {
-      "@popperjs/core": "^2.11.7"
+      "@popperjs/core": "^2.11.8"
     }
   }
 }

package/scss/_button-group.scss

@@ -39,7 +39,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    @include ltr-rtl("margin-left", calc(#{$btn-border-width} * -1));
   }
 
   // Reset rounded corners
@@ -79,11 +79,11 @@
   &::after,
   .dropup &::after,
   .dropend &::after {
-    margin-left: 0;
+    @include ltr-rtl("margin-left", 0);
   }
 
   .dropstart &::before {
-    margin-right: 0;
+    @include ltr-rtl("margin-right", 0);
   }
 }
 

package/scss/_buttons.scss

@@ -161,7 +161,7 @@
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
   --#{$prefix}btn-box-shadow: none;
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
+  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
   text-decoration: $link-decoration;
   @if $enable-gradients {

package/scss/_card.scss

@@ -95,7 +95,7 @@
   }
 
   + .card-link {
-    margin-left: var(--#{$prefix}card-spacer-x);
+    @include ltr-rtl("margin-left", var(--#{$prefix}card-spacer-x));
   }
 }
 
@@ -198,8 +198,8 @@
       margin-bottom: 0;
 
       + .card {
-        margin-left: 0;
-        border-left: 0;
+        @include ltr-rtl("margin-left", 0);
+        @include ltr-rtl("border-left", 0);
       }
 
       // Handle rounded corners

package/scss/_close.scss

@@ -50,6 +50,7 @@
   filter: var(--#{$prefix}btn-close-white-filter);
 }
 
+.btn-close[data-coreui-theme="dark"],
 .btn-close-white {
   @include btn-close-white();
 }

package/scss/_dropdown.scss

@@ -93,8 +93,8 @@
       --cui-position: start;
 
       &[data-coreui-popper] {
-        right: auto;
-        left: 0;
+        @include ltr-rtl("right", auto);
+        @include ltr-rtl("left", 0);
       }
     }
 
@@ -102,8 +102,8 @@
       --cui-position: end;
 
       &[data-coreui-popper] {
-        right: 0;
-        left: auto;
+        @include ltr-rtl("right", 0);
+        @include ltr-rtl("left", auto);
       }
     }
   }

package/scss/_header.scss

@@ -10,6 +10,7 @@
   --#{$prefix}header-hover-color: #{$header-hover-color};
   --#{$prefix}header-disabled-color: #{$header-disabled-color};
   --#{$prefix}header-active-color: #{$header-active-color};
+  --#{$prefix}header-transition: #{$header-transition};
   --#{$prefix}header-brand-padding-y: #{$header-brand-padding-y};
   --#{$prefix}header-brand-color: #{$header-brand-color};
   --#{$prefix}header-brand-hover-color: #{$header-brand-hover-color};
@@ -25,7 +26,6 @@
   --#{$prefix}header-nav-link-padding-y: #{$header-nav-link-padding-y};
   --#{$prefix}header-divider-border-color: #{$header-divider-border-color};
   --#{$prefix}header-divider-border: #{$header-divider-border-width} solid var(--#{$prefix}header-divider-border-color);
-  --#{$prefix}subheader-min-height: #{$subheader-min-height};
   // scss-docs-end header-css-vars
 
   position: relative;
@@ -33,10 +33,11 @@
   flex-wrap: wrap; // allow us to do the line break for collapsing content
   align-items: center;
   justify-content: space-between; // space out brand from logo
-  min-height: var(--#{$prefix}header-min-height);
+  // min-height: var(--#{$prefix}header-min-height);
   padding: var(--#{$prefix}header-padding-y) var(--#{$prefix}header-padding-x);
   background: var(--#{$prefix}header-bg);
   border-bottom: var(--#{$prefix}header-border);
+  @include transition(var(--#{$prefix}header-transition));
 
   // Because flex properties aren't inherited, we need to redeclare these first
   // few properties so that content nested within behave properly.
@@ -59,16 +60,6 @@
     }
   }
 
-  .container:first-child,
-  .container-fluid:first-child {
-    min-height: calc(var(--#{$prefix}header-min-height) - (2 * var(--#{$prefix}header-padding-y))); // stylelint-disable-line function-disallowed-list
-  }
-
-  .container:nth-child(n+2),
-  .container-fluid:nth-child(n+2) {
-    min-height: calc(var(--#{$prefix}subheader-min-height) - (2 * var(--#{$prefix}header-padding-y))); // stylelint-disable-line function-disallowed-list
-  }
-
   &.header-sticky {
     position: sticky;
     top: 0;

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,
@@ -136,6 +121,81 @@
 }
 
 
+//
+// Underline
+//
+
+.nav-underline {
+  // scss-docs-start nav-underline-css-vars
+  --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+  --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+  --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+  // scss-docs-end nav-underline-css-vars
+
+  gap: var(--#{$prefix}nav-underline-gap);
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
+    border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-bottom-color: currentcolor;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: $font-weight-bold;
+    color: var(--#{$prefix}nav-underline-link-active-color);
+    border-bottom-color: currentcolor;
+  }
+}
+
+
+//
+// Underline border
+//
+
+.nav-underline-border {
+  // scss-docs-start nav-underline-css-vars
+  --#{$prefix}nav-underline-border-gap: #{$nav-underline-border-gap};
+  --#{$prefix}nav-underline-border-border-color: #{$nav-underline-border-border-color};
+  --#{$prefix}nav-underline-border-border-width: #{$nav-underline-border-border-width};
+  --#{$prefix}nav-underline-border-link-padding-x: #{$nav-underline-border-link-padding-x};
+  --#{$prefix}nav-underline-border-link-padding-y: #{$nav-underline-border-link-padding-y};
+  --#{$prefix}nav-underline-border-link-color: #{$nav-underline-border-link-color};
+  --#{$prefix}nav-underline-border-link-active-color: #{$nav-underline-border-link-active-color};
+  --#{$prefix}nav-underline-border-link-disabled-color: #{$nav-underline-border-link-disabled-color};
+  // scss-docs-end nav-underline-css-vars
+
+  --#{$prefix}nav-link-color: var(--#{$prefix}nav-underline-border-link-color);
+  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}nav-underline-border-link-disabled-color);
+
+  gap: var(--#{$prefix}nav-underline-border-gap);
+  border-bottom: var(--#{$prefix}nav-underline-border-border-width) solid var(--#{$prefix}nav-underline-border-border-color);
+
+  .nav-link {
+    padding: var(--#{$prefix}nav-underline-border-link-padding-y) var(--#{$prefix}nav-underline-border-link-padding-x);
+    margin-bottom: calc(-1 * var(--#{$prefix}nav-underline-border-border-width)); // stylelint-disable-line function-disallowed-list
+    border-bottom: var(--#{$prefix}nav-underline-border-border-width) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-bottom-color: currentcolor;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: $font-weight-bold;
+    color: var(--#{$prefix}nav-underline-border-link-active-color);
+    border-bottom-color: currentcolor;
+  }
+}
+
+
 //
 // Justified variants
 //

package/scss/_reboot.scss

@@ -217,6 +217,7 @@ small {
 
 mark {
   padding: $mark-padding;
+  color: var(--#{$prefix}highlight-color);
   background-color: var(--#{$prefix}highlight-bg);
 }
 
@@ -523,15 +524,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

@@ -75,15 +75,33 @@
   --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
   --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
   --#{$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}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}high-emphasis-inverse: #{$high-emphasis-inverse};
-  --#{$prefix}medium-emphasis-inverse: #{$medium-emphasis-inverse};
-  --#{$prefix}disabled-inverse: #{$disabled-inverse};
+  --#{$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)};
+
+  --#{$prefix}high-emphasis: #{$high-emphasis}; // Deprecated in v5.0.0
+  --#{$prefix}medium-emphasis: #{$medium-emphasis}; // Deprecated in v5.0.0
+  --#{$prefix}disabled: #{$disabled}; // Deprecated in v5.0.0
+
+  --#{$prefix}high-emphasis-inverse: #{$high-emphasis-inverse}; // Deprecated in v5.0.0
+  --#{$prefix}medium-emphasis-inverse: #{$medium-emphasis-inverse}; // Deprecated in v5.0.0
+  --#{$prefix}disabled-inverse: #{$disabled-inverse}; // Deprecated in v5.0.0
+  // scss-docs-end root-body-variables
 
   --#{$prefix}heading-color: #{$headings-color};
 
@@ -99,6 +117,7 @@
   }
 
   --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
 
   // scss-docs-start root-border-var
@@ -112,7 +131,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
 
@@ -159,9 +178,9 @@
     --#{$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};
+    --#{$prefix}high-emphasis: #{$high-emphasis-dark}; // Deprecated in v5.0.0
+    --#{$prefix}medium-emphasis: #{$medium-emphasis-dark}; // Deprecated in v5.0.0
+    --#{$prefix}disabled: #{$disabled-dark}; // Deprecated in v5.0.0
 
     @each $color, $value in $theme-colors-dark {
       --#{$prefix}#{$color}: #{$value};
@@ -195,6 +214,8 @@
     --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
 
     --#{$prefix}code-color: #{$code-color-dark};
+    --#{$prefix}highlight-color: #{$mark-color-dark};
+    --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

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

@@ -78,9 +78,9 @@ $utilities: map-merge(
       property: box-shadow,
       class: shadow,
       values: (
-        null: $box-shadow,
-        sm: $box-shadow-sm,
-        lg: $box-shadow-lg,
+        null: var(--#{$prefix}box-shadow),
+        sm: var(--#{$prefix}box-shadow-sm),
+        lg: var(--#{$prefix}box-shadow-lg),
         none: none,
       )
     ),

package/scss/_variables-dark.scss

@@ -8,15 +8,15 @@
 
 // scss-docs-start sass-dark-mode-vars
 // scss-docs-start gray-color-dark-variables
-$gray-100-dark: #f3f4f7 !default;
-$gray-200-dark: #e7eaee !default;
-$gray-300-dark: #dbdfe6 !default;
-$gray-400-dark: #cfd4de !default;
-$gray-500-dark: #aab3c5 !default;
-$gray-600-dark: #6d7d9c !default;
-$gray-700-dark: #4a566d !default;
-$gray-800-dark: #323a49 !default;
-$gray-900-dark: #212631 !default;
+$gray-100-dark: $gray-100 !default;
+$gray-200-dark: $gray-200 !default;
+$gray-300-dark: $gray-300 !default;
+$gray-400-dark: $gray-400 !default;
+$gray-500-dark: $gray-500 !default;
+$gray-600-dark: $gray-600 !default;
+$gray-700-dark: $gray-700 !default;
+$gray-800-dark: $gray-800 !default;
+$gray-900-dark: $gray-900 !default;
 // scss-docs-end gray-color-dark-variables
 
 // fusv-disable
@@ -35,15 +35,21 @@ $grays-dark: (
 // scss-docs-end gray-colors-dark-map
 // fusv-enable
 
+// fusv-disable
+$high-emphasis-dark:    rgba($white, .87) !default; // Deprecated in v5.0.0
+$medium-emphasis-dark:  rgba($white, .6) !default; // Deprecated in v5.0.0
+$disabled-dark:         rgba($white, .38) !default; // Deprecated in v5.0.0
+// fusv-enable
+
 // scss-docs-start theme-color-dark-variables
-$primary-dark:       tint-color(desaturate($primary, 20%), 20%) !default;
+$primary-dark:       desaturate($primary, 10%) !default;
 $secondary-dark:     desaturate($secondary, 10%) !default;
 $success-dark:       desaturate($success, 10%) !default;
 $info-dark:          desaturate($info, 10%) !default;
 $warning-dark:       desaturate($warning, 10%) !default;
 $danger-dark:        desaturate($danger, 10%) !default;
-$light-dark:         desaturate($light, 10%) !default;
-$dark-dark:          desaturate($dark, 10%) !default;
+$light-dark:         $light !default;
+$dark-dark:          $dark !default;
 // scss-docs-end theme-color-dark-variables
 
 // scss-docs-start theme-colors-dark-map
@@ -60,12 +66,12 @@ $theme-colors-dark: (
 // scss-docs-end theme-colors-dark-map
 
 // scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        $primary-text-emphasis !default;
-$secondary-text-emphasis-dark:      $secondary-text-emphasis !default;
-$success-text-emphasis-dark:        $success-text-emphasis !default;
-$info-text-emphasis-dark:           $info-text-emphasis !default;
-$warning-text-emphasis-dark:        $warning-text-emphasis !default;
-$danger-text-emphasis-dark:         $danger-text-emphasis !default;
+$primary-text-emphasis-dark:        desaturate($primary-text-emphasis, 10%) !default;
+$secondary-text-emphasis-dark:      desaturate($secondary-text-emphasis, 10%) !default;
+$success-text-emphasis-dark:        desaturate($success-text-emphasis, 10%) !default;
+$info-text-emphasis-dark:           desaturate($info-text-emphasis, 10%) !default;
+$warning-text-emphasis-dark:        desaturate($warning-text-emphasis, 10%) !default;
+$danger-text-emphasis-dark:         desaturate($danger-text-emphasis, 10%) !default;
 $light-text-emphasis-dark:          $gray-100-dark !default;
 $dark-text-emphasis-dark:           $gray-300-dark !default;
 // scss-docs-end theme-text-dark-variables
@@ -92,19 +98,21 @@ $light-border-subtle-dark:          $gray-700-dark !default;
 $dark-border-subtle-dark:           $gray-800-dark !default;
 // scss-docs-end theme-border-subtle-dark-variables
 
-$body-color-dark:                   $gray-500-dark !default;
+$body-color-dark:                   rgba($white, .87) !default;
 $body-bg-dark:                      $gray-900-dark !default;
-$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-color-dark:         rgba($white, .6) !default;
 $body-secondary-bg-dark:            $gray-800-dark !default;
-$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
-$body-tertiary-bg-dark:             mix($gray-800-dark, #181924, 50%) !default;
+$body-tertiary-color-dark:          rgba($white, .38) !default;
+$body-tertiary-bg-dark:             mix($gray-800-dark, #212631, 50%) !default;
 $body-emphasis-color-dark:          $white !default;
-$border-color-dark:                 $gray-700-dark !default;
-$border-color-translucent-dark:     rgba($white, .15) !default;
+$border-color-dark:                 $gray-800-dark !default;
+$border-color-translucent-dark:     rgba($white, .1) !default;
 $headings-color-dark:               inherit !default;
-$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-color-dark:                   $primary-dark !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;
+$mark-color-dark:                   $body-color-dark !default;
+$mark-bg-dark:                      $yellow-800 !default;
 
 
 //
@@ -157,13 +165,4 @@ $button-outline-ghost-variants-dark: (
   "warning":    btn-outline-color-map($warning-dark),
   "info":       btn-outline-color-map($info-dark)
 ) !default;
-
-
-//
-// Sidebar
-//
-
-$sidebar-bg-dark:            $body-bg-dark !default;
-$sidebar-border-width-dark:  var(--#{$prefix}border-width) !default;
-$sidebar-border-color-dark:  var(--#{$prefix}border-color) !default;
 // scss-docs-end sass-dark-mode-vars