From cf860bfb82784833311ba5463c229505600e021e Mon Sep 17 00:00:00 2001
From: idzark <23485709+idzark@users.noreply.github.com>
Date: Tue, 1 Apr 2025 16:35:53 +0200
Subject: [PATCH] Release 8.0.0

---
 CHANGELOG.md                                  |  37 +
 README.txt                                    |   2 +-
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 projects/mdb-angular-ui-kit/CHANGELOG.md      |  37 +
 .../accordion-item-content.directive.ts       |   8 +-
 .../accordion-item-header.directive.ts        |   8 +-
 .../accordion/accordion-item.component.ts     |   8 +-
 .../accordion/accordion.component.ts          |   8 +-
 .../accordion/accordion.spec.ts               |   1 +
 .../assets/scss/bootstrap/_accordion.scss     |   9 +
 .../assets/scss/bootstrap/_alert.scss         |  21 +-
 .../assets/scss/bootstrap/_button-group.scss  |   4 +-
 .../assets/scss/bootstrap/_buttons.scss       |   6 +-
 .../assets/scss/bootstrap/_card.scss          |   5 +
 .../assets/scss/bootstrap/_carousel.scss      |  22 +-
 .../assets/scss/bootstrap/_close.scss         |  41 +-
 .../assets/scss/bootstrap/_dropdown.scss      |   1 +
 .../assets/scss/bootstrap/_functions.scss     |   2 +-
 .../assets/scss/bootstrap/_grid.scss          |   6 +
 .../assets/scss/bootstrap/_helpers.scss       |   2 +
 .../assets/scss/bootstrap/_list-group.scss    |  21 +-
 .../assets/scss/bootstrap/_maps.scss          | 120 ++++
 .../assets/scss/bootstrap/_mixins.scss        |   3 +-
 .../assets/scss/bootstrap/_nav.scss           |  59 +-
 .../assets/scss/bootstrap/_navbar.scss        |  19 +-
 .../assets/scss/bootstrap/_offcanvas.scss     |   6 +-
 .../assets/scss/bootstrap/_pagination.scss    |   2 +-
 .../assets/scss/bootstrap/_progress.scss      |  11 +-
 .../assets/scss/bootstrap/_reboot.scss        |  15 +-
 .../assets/scss/bootstrap/_root.scss          | 134 +++-
 .../assets/scss/bootstrap/_tables.scss        |  29 +-
 .../assets/scss/bootstrap/_tooltip.scss       |   9 +-
 .../assets/scss/bootstrap/_utilities.scss     | 191 +++++-
 .../scss/bootstrap/_variables-dark.scss       |  87 +++
 .../assets/scss/bootstrap/_variables.scss     | 451 ++++++++-----
 .../assets/scss/bootstrap/bootstrap-grid.scss |   4 +-
 .../scss/bootstrap/bootstrap-reboot.scss      |   1 +
 .../scss/bootstrap/bootstrap-utilities.scss   |   1 +
 .../assets/scss/bootstrap/bootstrap.scss      |   1 +
 .../bootstrap/forms/_floating-labels.scss     |  26 +-
 .../scss/bootstrap/forms/_form-check.scss     |  38 +-
 .../scss/bootstrap/forms/_form-control.scss   |  28 +-
 .../scss/bootstrap/forms/_form-range.scss     |   6 +-
 .../scss/bootstrap/forms/_form-select.scss    |  15 +-
 .../scss/bootstrap/forms/_input-group.scss    |   2 +-
 .../scss/bootstrap/helpers/_color-bg.scss     |   5 +-
 .../bootstrap/helpers/_colored-links.scss     |  22 +-
 .../scss/bootstrap/helpers/_focus-ring.scss   |   5 +
 .../scss/bootstrap/helpers/_icon-link.scss    |  25 +
 .../assets/scss/bootstrap/helpers/_vr.scss    |   2 +-
 .../assets/scss/bootstrap/mixins/_alert.scss  |   5 +-
 .../assets/scss/bootstrap/mixins/_banner.scss |   6 +-
 .../assets/scss/bootstrap/mixins/_caret.scss  |  55 +-
 .../scss/bootstrap/mixins/_color-mode.scss    |  21 +
 .../assets/scss/bootstrap/mixins/_forms.scss  |  15 +-
 .../scss/bootstrap/mixins/_list-group.scss    |   2 +
 .../scss/bootstrap/mixins/_utilities.scss     |   2 +-
 .../bootstrap/mixins/_visually-hidden.scss    |   6 +-
 .../assets/scss/bootstrap/vendor/_rfs.scss    | 184 +++--
 .../assets/scss/free/_accordion.scss          |   7 -
 .../assets/scss/free/_alert.scss              |  12 +-
 .../assets/scss/free/_badge.scss              |   8 +-
 .../assets/scss/free/_buttons.scss            | 207 ++++--
 .../assets/scss/free/_carousel.scss           |   3 +-
 .../assets/scss/free/_dropdown.scss           |   4 +
 .../assets/scss/free/_list-group.scss         |   8 +-
 .../assets/scss/free/_navbar.scss             |  14 +
 .../assets/scss/free/_pagination.scss         |   2 -
 .../assets/scss/free/_root.scss               |  54 +-
 .../assets/scss/free/_tables.scss             |   2 +-
 .../assets/scss/free/_toasts.scss             |  12 +-
 .../assets/scss/free/_type.scss               |   6 +-
 .../assets/scss/free/_variables-dark.scss     |  78 +++
 .../assets/scss/free/_variables.scss          | 634 ++++++------------
 .../assets/scss/free/forms/_form-control.scss |  14 +
 .../assets/scss/free/forms/_form-file.scss    |   9 +
 .../assets/scss/free/forms/_form-range.scss   |   1 +
 .../assets/scss/free/mixins/_buttons.scss     |  63 +-
 .../assets/scss/free/mixins/_color-mode.scss  |  21 +
 .../assets/scss/mdb.core.scss                 |   1 +
 .../assets/scss/mdb.free.scss                 |   3 +
 .../mdb-angular-ui-kit/assets/scss/mdb.scss   |   2 +
 .../carousel/carousel-item.component.ts       |   6 +-
 .../carousel/carousel.component.ts            |   8 +-
 .../carousel/carousel.spec.ts                 |   4 +-
 .../checkbox/checkbox.directive.spec.ts       |  12 +-
 .../checkbox/checkbox.directive.ts            |   9 +-
 .../collapse/collapse.directive.spec.ts       |   1 +
 .../collapse/collapse.directive.ts            |   8 +-
 .../dropdown/dropdown-menu.directive.ts       |   8 +-
 .../dropdown/dropdown-toggle.directive.ts     |   6 +-
 .../dropdown/dropdown.directive.spec.ts       |   6 +-
 .../dropdown/dropdown.directive.ts            |  26 +-
 .../forms/form-control.component.ts           |   8 +-
 .../forms/form-control.spec.ts                |   8 +-
 .../forms/input.directive.ts                  |  10 +-
 .../mdb-angular-ui-kit/forms/input.spec.ts    |   6 +-
 .../forms/label.directive.ts                  |   8 +-
 .../modal/modal-container.component.ts        |   8 +-
 .../mdb-angular-ui-kit/modal/modal.service.ts |   4 +
 .../mdb-angular-ui-kit/modal/modal.spec.ts    |   6 +-
 projects/mdb-angular-ui-kit/package.json      |   2 +-
 .../popover/popover.component.ts              |  24 +-
 .../popover/popover.directive.spec.ts         |  24 +-
 .../popover/popover.directive.ts              |   8 +-
 .../radio/radio-button.directive.ts           |   6 +-
 .../radio/radio-group.directive.spec.ts       |   6 +-
 .../radio/radio-group.directive.ts            |   9 +-
 .../radio/radio.directive.spec.ts             |   6 +-
 .../range/range.component.spec.ts             |   1 +
 .../range/range.component.ts                  |  11 +-
 .../mdb-angular-ui-kit/ripple/ripple-utils.ts |   3 -
 .../ripple/ripple.directive.spec.ts           |   1 +
 .../ripple/ripple.directive.ts                |   8 +-
 .../scrollspy/scrollspy-element.directive.ts  |   6 +-
 .../scrollspy/scrollspy-link.directive.ts     |   6 +-
 .../scrollspy/scrollspy-window.directive.ts   |   6 +-
 .../scrollspy/scrollspy.directive.ts          |   8 +-
 .../tabs/tab-content.directive.ts             |   8 +-
 .../tabs/tab-outlet.directive.ts              |   6 +-
 .../tabs/tab-title.directive.ts               |   8 +-
 .../mdb-angular-ui-kit/tabs/tab.component.ts  |   6 +-
 .../mdb-angular-ui-kit/tabs/tabs.component.ts |   6 +-
 projects/mdb-angular-ui-kit/tabs/tabs.spec.ts |   4 +-
 .../tooltip/tooltip.component.ts              |  24 +-
 .../tooltip/tooltip.directive.spec.ts         |  18 +-
 .../tooltip/tooltip.directive.ts              |  10 +-
 .../validation/error.directive.ts             |   6 +-
 .../validation/success.directive.ts           |   6 +-
 .../validation/validate.directive.spec.ts     |   1 +
 .../validation/validate.directive.ts          |   6 +-
 132 files changed, 2287 insertions(+), 1142 deletions(-)
 create mode 100644 projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables-dark.scss
 create mode 100644 projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_focus-ring.scss
 create mode 100644 projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_icon-link.scss
 create mode 100644 projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_color-mode.scss
 create mode 100644 projects/mdb-angular-ui-kit/assets/scss/free/_variables-dark.scss
 create mode 100644 projects/mdb-angular-ui-kit/assets/scss/free/mixins/_color-mode.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7667fced..e574c802 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,40 @@
+## 8.0.0 (07.04.2025)
+
+This version requires Angular v19. Follow the [Angular Update Guide](https://angular.dev/update-guide) to migrate your project to Angular 19.
+
+### Breaking changes:
+
+- Updated Angular to v19, this version is required in MDB Angular v8
+- Older theming styles are no longer supported, use new [color modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) instead
+- Slightly increased cell width in [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
+- The `.navbar-light` class is no longer used in [Navbar](https://mdbootstrap.com/docs/angular/navigation/navbar), use [color modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) instead
+
+### Design updates:
+
+Introduced a new theming system that allows setting the theme for the entire page, its parts, or selected elements using data attributes.
+
+Read [Colors modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) page to learn more about new theming.
+
+### Fixes and improvements:
+
+- [Modal](https://mdbootstrap.com/docs/angular/components/modal/) - resolved problem with opening animation
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - resolved problem with not hiding option groups labels when using filter
+- [Popconfirm](https://mdbootstrap.com/docs/angular/components/popconfirm/) - added default offset to the component
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - fixed date parsing bug for `yy` year format
+- [Stepper](https://mdbootstrap.com/docs/angular/components/stepper/) - added 'Optional' text to the steps that use `optional` input
+- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - added gap between the buttons and fixed border styles
+- Fixed [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) and [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) toggle button padding in Firefox browser
+- Removed unnecessary `BrowserAnimationsModule` imports from [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/), [Ecommerce gallery](https://mdbootstrap.com/docs/angular/plugins/ecommerce-gallery/) and [Organization chart](https://mdbootstrap.com/docs/angular/plugins/organization-chart/) plugins
+
+### New features:
+
+- Added new SCSS and CSS variables for plugins styles
+- [File upload](https://mdbootstrap.com/docs/angular/plugins/file-upload/) - added new `mimeTypes` input that allow to define a list of mime types for supported file types
+- [Multi item carousel](https://mdbootstrap.com/docs/angular/plugins/multi-item-carousel/) - added new `(slideClick)` event
+- [Color picker](https://mdbootstrap.com/docs/angular/plugins/color-picker/) - added new `color-picker-next-format-button`, `color-picker-previous-format-button` and `color-picker-copy-button` classes for the buttons
+
+---
+
 ## 7.1.0 (18.11.2024)
 
 ### Fixes and improvements:
diff --git a/README.txt b/README.txt
index 605b76ff..b9310f01 100644
--- a/README.txt
+++ b/README.txt
@@ -1,6 +1,6 @@
 MDB 5 Angular
 
-Version: FREE 7.1.0
+Version: FREE 8.0.0
 
 Documentation:
 https://mdbootstrap.com/docs/angular/
diff --git a/package-lock.json b/package-lock.json
index cad96db9..da4e67a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "7.1.0",
+  "version": "8.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mdb-angular-ui-kit-free",
-      "version": "7.1.0",
+      "version": "8.0.0",
       "dependencies": {
         "@angular/animations": "^19.2.2",
         "@angular/cdk": "^19.2.3",
diff --git a/package.json b/package.json
index 1e429b82..7904c412 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "7.1.0",
+  "version": "8.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/projects/mdb-angular-ui-kit/CHANGELOG.md b/projects/mdb-angular-ui-kit/CHANGELOG.md
index 7667fced..e574c802 100644
--- a/projects/mdb-angular-ui-kit/CHANGELOG.md
+++ b/projects/mdb-angular-ui-kit/CHANGELOG.md
@@ -1,3 +1,40 @@
+## 8.0.0 (07.04.2025)
+
+This version requires Angular v19. Follow the [Angular Update Guide](https://angular.dev/update-guide) to migrate your project to Angular 19.
+
+### Breaking changes:
+
+- Updated Angular to v19, this version is required in MDB Angular v8
+- Older theming styles are no longer supported, use new [color modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) instead
+- Slightly increased cell width in [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/)
+- The `.navbar-light` class is no longer used in [Navbar](https://mdbootstrap.com/docs/angular/navigation/navbar), use [color modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) instead
+
+### Design updates:
+
+Introduced a new theming system that allows setting the theme for the entire page, its parts, or selected elements using data attributes.
+
+Read [Colors modes](https://mdbootstrap.com/docs/angular/content-styles/theme/) page to learn more about new theming.
+
+### Fixes and improvements:
+
+- [Modal](https://mdbootstrap.com/docs/angular/components/modal/) - resolved problem with opening animation
+- [Select](https://mdbootstrap.com/docs/angular/forms/select/) - resolved problem with not hiding option groups labels when using filter
+- [Popconfirm](https://mdbootstrap.com/docs/angular/components/popconfirm/) - added default offset to the component
+- [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) - fixed date parsing bug for `yy` year format
+- [Stepper](https://mdbootstrap.com/docs/angular/components/stepper/) - added 'Optional' text to the steps that use `optional` input
+- [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/) - added gap between the buttons and fixed border styles
+- Fixed [Datepicker](https://mdbootstrap.com/docs/angular/forms/datepicker/) and [Timepicker](https://mdbootstrap.com/docs/angular/forms/timepicker/) toggle button padding in Firefox browser
+- Removed unnecessary `BrowserAnimationsModule` imports from [Onboarding](https://mdbootstrap.com/docs/angular/plugins/onboarding/), [Ecommerce gallery](https://mdbootstrap.com/docs/angular/plugins/ecommerce-gallery/) and [Organization chart](https://mdbootstrap.com/docs/angular/plugins/organization-chart/) plugins
+
+### New features:
+
+- Added new SCSS and CSS variables for plugins styles
+- [File upload](https://mdbootstrap.com/docs/angular/plugins/file-upload/) - added new `mimeTypes` input that allow to define a list of mime types for supported file types
+- [Multi item carousel](https://mdbootstrap.com/docs/angular/plugins/multi-item-carousel/) - added new `(slideClick)` event
+- [Color picker](https://mdbootstrap.com/docs/angular/plugins/color-picker/) - added new `color-picker-next-format-button`, `color-picker-previous-format-button` and `color-picker-copy-button` classes for the buttons
+
+---
+
 ## 7.1.0 (18.11.2024)
 
 ### Fixes and improvements:
diff --git a/projects/mdb-angular-ui-kit/accordion/accordion-item-content.directive.ts b/projects/mdb-angular-ui-kit/accordion/accordion-item-content.directive.ts
index 4c6d371e..9eac351b 100644
--- a/projects/mdb-angular-ui-kit/accordion/accordion-item-content.directive.ts
+++ b/projects/mdb-angular-ui-kit/accordion/accordion-item-content.directive.ts
@@ -5,10 +5,10 @@ export const MDB_ACCORDION_ITEM_BODY = new InjectionToken<MdbAccordionItemBodyDi
 );
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbAccordionItemBody]',
-    providers: [{ provide: MDB_ACCORDION_ITEM_BODY, useExisting: MdbAccordionItemBodyDirective }],
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbAccordionItemBody]',
+  providers: [{ provide: MDB_ACCORDION_ITEM_BODY, useExisting: MdbAccordionItemBodyDirective }],
+  standalone: false,
 })
 export class MdbAccordionItemBodyDirective {
   constructor(public template: TemplateRef<any>) {}
diff --git a/projects/mdb-angular-ui-kit/accordion/accordion-item-header.directive.ts b/projects/mdb-angular-ui-kit/accordion/accordion-item-header.directive.ts
index a848a6b2..647f341c 100644
--- a/projects/mdb-angular-ui-kit/accordion/accordion-item-header.directive.ts
+++ b/projects/mdb-angular-ui-kit/accordion/accordion-item-header.directive.ts
@@ -5,10 +5,10 @@ export const MDB_ACCORDION_ITEM_HEADER = new InjectionToken<MdbAccordionItemHead
 );
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbAccordionItemHeader]',
-    providers: [{ provide: MDB_ACCORDION_ITEM_HEADER, useExisting: MdbAccordionItemHeaderDirective }],
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbAccordionItemHeader]',
+  providers: [{ provide: MDB_ACCORDION_ITEM_HEADER, useExisting: MdbAccordionItemHeaderDirective }],
+  standalone: false,
 })
 export class MdbAccordionItemHeaderDirective {
   constructor(public template: TemplateRef<any>) {}
diff --git a/projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts b/projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts
index eab75878..c5777d0c 100644
--- a/projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts
+++ b/projects/mdb-angular-ui-kit/accordion/accordion-item.component.ts
@@ -21,10 +21,10 @@ let uniqueHeaderId = 0;
 let uniqueId = 0;
 
 @Component({
-    selector: 'mdb-accordion-item',
-    templateUrl: './accordion-item.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false
+  selector: 'mdb-accordion-item',
+  templateUrl: './accordion-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MdbAccordionItemComponent implements OnInit {
   @ContentChild(MDB_ACCORDION_ITEM_HEADER, { read: TemplateRef, static: true })
diff --git a/projects/mdb-angular-ui-kit/accordion/accordion.component.ts b/projects/mdb-angular-ui-kit/accordion/accordion.component.ts
index a8af8fa2..6d462f0a 100644
--- a/projects/mdb-angular-ui-kit/accordion/accordion.component.ts
+++ b/projects/mdb-angular-ui-kit/accordion/accordion.component.ts
@@ -13,10 +13,10 @@ import { MdbAccordionItemComponent } from './accordion-item.component';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
-    selector: 'mdb-accordion',
-    templateUrl: './accordion.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false
+  selector: 'mdb-accordion',
+  templateUrl: './accordion.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MdbAccordionComponent implements AfterContentInit {
   @ContentChildren(MdbAccordionItemComponent) items: QueryList<MdbAccordionItemComponent>;
diff --git a/projects/mdb-angular-ui-kit/accordion/accordion.spec.ts b/projects/mdb-angular-ui-kit/accordion/accordion.spec.ts
index 353c2cf9..5248eb2e 100644
--- a/projects/mdb-angular-ui-kit/accordion/accordion.spec.ts
+++ b/projects/mdb-angular-ui-kit/accordion/accordion.spec.ts
@@ -48,6 +48,7 @@ const template = `
 @Component({
   selector: 'mdb-accordion-test',
   template,
+  standalone: false,
 })
 class TestAccordionComponent {
   @ViewChildren(MdbAccordionItemComponent) _accordionItems: QueryList<MdbAccordionItemComponent>;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_accordion.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_accordion.scss
index f09601ba..75588a5a 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_accordion.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_accordion.scss
@@ -147,3 +147,12 @@
     }
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .accordion-button::after {
+      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+    }
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss
index 41adbcc4..b8cff9b7 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_alert.scss
@@ -1,7 +1,7 @@
 //
 // Base styles
 //
-@use 'sass:math';
+
 .alert {
   // scss-docs-start alert-css-vars
   --#{$prefix}alert-bg: transparent;
@@ -12,6 +12,7 @@
   --#{$prefix}alert-border-color: transparent;
   --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: #{$alert-border-radius};
+  --#{$prefix}alert-link-color: inherit;
   // scss-docs-end alert-css-vars
 
   position: relative;
@@ -32,6 +33,7 @@
 // Provide class for links that match alerts
 .alert-link {
   font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
 }
 
 
@@ -54,18 +56,13 @@
 
 
 // scss-docs-start alert-modifiers
-// Generate contextual modifier classes for colorizing the alert.
-
-@each $state, $value in $theme-colors {
-  $alert-background: shift-color($value, $alert-bg-scale);
-  $alert-border: shift-color($value, $alert-border-scale);
-  $alert-color: shift-color($value, $alert-color-scale);
-
-  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
-    $alert-color: mix($value, color-contrast($alert-background), math.abs($alert-color-scale));
-  }
+// Generate contextual modifier classes for colorizing the alert
+@each $state in map-keys($theme-colors) {
   .alert-#{$state} {
-    @include alert-variant($alert-background, $alert-border, $alert-color);
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
   }
 }
 // scss-docs-end alert-modifiers
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_button-group.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_button-group.scss
index 79b100cb..55ae3f65 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_button-group.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_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: -$btn-border-width;
+    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -126,7 +126,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: -$btn-border-width;
+    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_buttons.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_buttons.scss
index f2c4c13a..e14a1843 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_buttons.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_buttons.scss
@@ -10,7 +10,7 @@
   @include rfs($btn-font-size, --#{$prefix}btn-font-size);
   --#{$prefix}btn-font-weight: #{$btn-font-weight};
   --#{$prefix}btn-line-height: #{$btn-line-height};
-  --#{$prefix}btn-color: #{$body-color};
+  --#{$prefix}btn-color: #{$btn-color};
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-width: #{$btn-border-width};
   --#{$prefix}btn-border-color: transparent;
@@ -169,8 +169,8 @@
   --#{$prefix}btn-active-border-color: transparent;
   --#{$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-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
   text-decoration: $link-decoration;
   @if $enable-gradients {
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_card.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_card.scss
index ce8c02f1..d3535a98 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_card.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_card.scss
@@ -7,6 +7,8 @@
   --#{$prefix}card-spacer-y: #{$card-spacer-y};
   --#{$prefix}card-spacer-x: #{$card-spacer-x};
   --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+  --#{$prefix}card-title-color: #{$card-title-color};
+  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
   --#{$prefix}card-border-width: #{$card-border-width};
   --#{$prefix}card-border-color: #{$card-border-color};
   --#{$prefix}card-border-radius: #{$card-border-radius};
@@ -28,6 +30,7 @@
   flex-direction: column;
   min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
   height: var(--#{$prefix}card-height);
+  color: var(--#{$prefix}body-color);
   word-wrap: break-word;
   background-color: var(--#{$prefix}card-bg);
   background-clip: border-box;
@@ -73,11 +76,13 @@
 
 .card-title {
   margin-bottom: var(--#{$prefix}card-title-spacer-y);
+  color: var(--#{$prefix}card-title-color);
 }
 
 .card-subtitle {
   margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
   margin-bottom: 0;
+  color: var(--#{$prefix}card-subtitle-color);
 }
 
 .card-text:last-child {
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_carousel.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_carousel.scss
index 858b8363..0ac8f871 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_carousel.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_carousel.scss
@@ -165,7 +165,6 @@
   margin-right: $carousel-control-width;
   margin-bottom: 1rem;
   margin-left: $carousel-control-width;
-  list-style: none;
 
   [data-bs-target] {
     box-sizing: content-box;
@@ -210,7 +209,7 @@
 
 // Dark mode carousel
 
-.carousel-dark {
+@mixin carousel-dark() {
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
     filter: $carousel-dark-control-icon-filter;
@@ -224,3 +223,22 @@
     color: $carousel-dark-caption-color;
   }
 }
+
+.carousel-dark {
+  @include carousel-dark();
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @if $color-mode-type == "media-query" {
+      .carousel {
+        @include carousel-dark();
+      }
+    } @else {
+      .carousel,
+      &.carousel {
+        @include carousel-dark();
+      }
+    }
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_close.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_close.scss
index a0813de8..4d6e73c1 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_close.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_close.scss
@@ -4,37 +4,60 @@
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
 .btn-close {
+  // scss-docs-start close-css-vars
+  --#{$prefix}btn-close-color: #{$btn-close-color};
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+  --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+  --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
+  // scss-docs-end close-css-vars
+
   box-sizing: content-box;
   width: $btn-close-width;
   height: $btn-close-height;
   padding: $btn-close-padding-y $btn-close-padding-x;
-  color: $btn-close-color;
-  background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  color: var(--#{$prefix}btn-close-color);
+  background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
   border: 0; // for button elements
   @include border-radius();
-  opacity: $btn-close-opacity;
+  opacity: var(--#{$prefix}btn-close-opacity);
 
   // Override <a>'s hover style
   &:hover {
-    color: $btn-close-color;
+    color: var(--#{$prefix}btn-close-color);
     text-decoration: none;
-    opacity: $btn-close-hover-opacity;
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
   }
 
   &:focus {
     outline: 0;
-    box-shadow: $btn-close-focus-shadow;
-    opacity: $btn-close-focus-opacity;
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
   }
 
   &:disabled,
   &.disabled {
     pointer-events: none;
     user-select: none;
-    opacity: $btn-close-disabled-opacity;
+    opacity: var(--#{$prefix}btn-close-disabled-opacity);
   }
 }
 
+@mixin btn-close-white() {
+  filter: var(--#{$prefix}btn-close-white-filter);
+}
+
 .btn-close-white {
-  filter: $btn-close-white-filter;
+  @include btn-close-white();
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .btn-close {
+      @include btn-close-white();
+    }
+  }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_dropdown.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_dropdown.scss
index 8899d25a..587ebb48 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_dropdown.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_dropdown.scss
@@ -184,6 +184,7 @@
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
+  @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
 
   &:hover,
   &:focus {
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss
index 26c953ba..90296586 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss
@@ -188,7 +188,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   );
 
   @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
     $rgb: map-merge($rgb, ($name: $value));
   }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_grid.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_grid.scss
index 0e0ba210..048f8009 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_grid.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_grid.scss
@@ -2,6 +2,12 @@
 //
 // Rows contain your columns.
 
+:root {
+  @each $name, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$name}: #{$value};
+  }
+}
+
 @if $enable-grid-classes {
   .row {
     @include make-row();
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_helpers.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_helpers.scss
index 644b693f..13f2752c 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_helpers.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_helpers.scss
@@ -1,6 +1,8 @@
 @import "http://github.com/helpers/clearfix";
 @import "http://github.com/helpers/color-bg";
 @import "http://github.com/helpers/colored-links";
+@import "http://github.com/helpers/focus-ring";
+@import "http://github.com/helpers/icon-link";
 @import "http://github.com/helpers/ratio";
 @import "http://github.com/helpers/position";
 @import "http://github.com/helpers/stacks";
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss
index 414feddc..455531ee 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_list-group.scss
@@ -1,7 +1,7 @@
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
-@use 'sass:math';
+
 .list-group {
   // scss-docs-start list-group-css-vars
   --#{$prefix}list-group-color: #{$list-group-color};
@@ -180,13 +180,18 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-@each $state, $value in $theme-colors {
-  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
-  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
-  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
-    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), math.abs($list-group-item-color-scale));
+@each $state in map-keys($theme-colors) {
+  .list-group-item-#{$state} {
+    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
+    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
   }
-
-  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
 }
 // scss-docs-end list-group-modifiers
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_maps.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_maps.scss
index 2770a676..68ee421c 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_maps.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_maps.scss
@@ -6,6 +6,90 @@
 $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-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-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.
@@ -25,6 +109,17 @@ $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
@@ -37,18 +132,43 @@ $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;
+
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
 $gutters: $spacers !default;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_mixins.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_mixins.scss
index af1f74f7..e1e130b1 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_mixins.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_mixins.scss
@@ -10,6 +10,7 @@
 
 // Helpers
 @import "http://github.com/mixins/breakpoints";
+@import "http://github.com/mixins/color-mode";
 @import "http://github.com/mixins/color-scheme";
 @import "http://github.com/mixins/image";
 @import "http://github.com/mixins/resize";
@@ -21,13 +22,11 @@
 @import "http://github.com/mixins/utilities";
 
 // Components
-@import "http://github.com/mixins/alert";
 @import "http://github.com/mixins/backdrop";
 @import "http://github.com/mixins/buttons";
 @import "http://github.com/mixins/caret";
 @import "http://github.com/mixins/pagination";
 @import "http://github.com/mixins/lists";
-@import "http://github.com/mixins/list-group";
 @import "http://github.com/mixins/forms";
 @import "http://github.com/mixins/table-variants";
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_nav.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_nav.scss
index 9efc03bc..ff073d36 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_nav.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_nav.scss
@@ -28,6 +28,8 @@
   font-weight: var(--#{$prefix}nav-link-font-weight);
   color: var(--#{$prefix}nav-link-color);
   text-decoration: if($link-decoration == none, null, none);
+  background: none;
+  border: 0;
   @include transition($nav-link-transition);
 
   &:hover,
@@ -36,8 +38,14 @@
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
+  &:focus-visible {
+    outline: 0;
+    box-shadow: $nav-link-focus-box-shadow;
+  }
+
   // Disabled state lightens text
-  &.disabled {
+  &.disabled,
+  &:disabled {
     color: var(--#{$prefix}nav-link-disabled-color);
     pointer-events: none;
     cursor: default;
@@ -63,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));
 
@@ -73,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,
@@ -110,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,
@@ -129,6 +121,39 @@
 }
 
 
+//
+// 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;
+  }
+}
+
+
 //
 // Justified variants
 //
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_navbar.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_navbar.scss
index 599b055e..05c2f6b3 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_navbar.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_navbar.scss
@@ -100,9 +100,11 @@
   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 {
@@ -264,7 +266,8 @@
   @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
 }
 
-.navbar-dark {
+.navbar-dark,
+.navbar[data-mdb-theme="dark"] {
   // scss-docs-start navbar-dark-css-vars
   --#{$prefix}navbar-color: #{$navbar-dark-color};
   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -276,3 +279,11 @@
   --#{$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)};
+    }
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_offcanvas.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_offcanvas.scss
index 23fc357f..04e3ce64 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_offcanvas.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_offcanvas.scss
@@ -12,6 +12,8 @@
   --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
   --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
   --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+  --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
+  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
   // scss-docs-end offcanvas-css-vars
 }
 
@@ -42,7 +44,7 @@
       background-clip: padding-box;
       outline: 0;
       @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
-      @include transition(transform $offcanvas-transition-duration ease-in-out);
+      @include transition(var(--#{$prefix}offcanvas-transition));
 
       &.offcanvas-start {
         top: 0;
@@ -134,7 +136,7 @@
 
 .offcanvas-title {
   margin-bottom: 0;
-  line-height: $offcanvas-title-line-height;
+  line-height: var(--#{$prefix}offcanvas-title-line-height);
 }
 
 .offcanvas-body {
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_pagination.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_pagination.scss
index cf4db3c3..f275a62e 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_pagination.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_pagination.scss
@@ -75,7 +75,7 @@
     margin-left: $pagination-margin-start;
   }
 
-  @if $pagination-margin-start == ($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));
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_progress.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_progress.scss
index 1bfafb58..148c3815 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_progress.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_progress.scss
@@ -8,7 +8,8 @@
 }
 // scss-docs-end progress-keyframes
 
-.progress {
+.progress,
+.progress-stacked {
   // scss-docs-start progress-css-vars
   --#{$prefix}progress-height: #{$progress-height};
   @include rfs($progress-font-size, --#{$prefix}progress-font-size);
@@ -46,6 +47,14 @@
   background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
 }
 
+.progress-stacked > .progress {
+  overflow: visible;
+}
+
+.progress-stacked > .progress > .progress-bar {
+  width: 100%;
+}
+
 @if $enable-transitions {
   .progress-bar-animated {
     animation: $progress-bar-animation-timing progress-bar-stripes;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_reboot.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_reboot.scss
index 8ac79039..18791753 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_reboot.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_reboot.scss
@@ -87,7 +87,7 @@ hr {
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
-  color: $headings-color;
+  color: var(--#{$prefix}heading-color);
 }
 
 h1 {
@@ -217,6 +217,7 @@ small {
 
 mark {
   padding: $mark-padding;
+  color: var(--#{$prefix}highlight-color);
   background-color: var(--#{$prefix}highlight-bg);
 }
 
@@ -241,11 +242,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: var(--#{$prefix}link-color);
+  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
   text-decoration: $link-decoration;
 
   &:hover {
-    color: var(--#{$prefix}link-hover-color);
+    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
     text-decoration: $link-hover-decoration;
   }
 }
@@ -524,15 +525,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
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_root.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_root.scss
index e64ae04e..b822fff4 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_root.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_root.scss
@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-mdb-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
@@ -21,10 +22,20 @@
     --#{$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
 
@@ -39,17 +50,50 @@
   @if $font-size-root != null {
     --#{$prefix}root-font-size: #{$font-size-root};
   }
-  --#{$prefix}body-font-family: #{$font-family-base};
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
-  --#{$prefix}body-color: #{$body-color};
   @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)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$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}heading-color: #{$headings-color};
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+  --#{$prefix}link-decoration: #{$link-decoration};
+
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-color: #{$mark-color};
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
   // scss-docs-start root-border-var
   --#{$prefix}border-width: #{$border-width};
   --#{$prefix}border-style: #{$border-style};
@@ -60,14 +104,84 @@
   --#{$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.3.0 for consistency
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-var
 
-  --#{$prefix}link-color: #{$link-color};
-  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
 
-  --#{$prefix}code-color: #{$code-color};
+  // 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
 
-  --#{$prefix}highlight-bg: #{$mark-bg};
+  // 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;
+
+    // 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)};
+
+    @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}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};
+
+    --#{$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
+  }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tables.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tables.scss
index 1fdd43c6..ebfc00a5 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tables.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_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: ($table-border-width * 2) solid $table-group-separator-color;
+  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);
   }
 }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tooltip.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tooltip.scss
index 7da3df3e..85de90f5 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tooltip.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tooltip.scss
@@ -17,7 +17,6 @@
 
   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);
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
@@ -45,7 +44,7 @@
 }
 
 .bs-tooltip-top .tooltip-arrow {
-  bottom: 0;
+  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
 
   &::before {
     top: -1px;
@@ -56,7 +55,7 @@
 
 /* rtl:begin:ignore */
 .bs-tooltip-end .tooltip-arrow {
-  left: 0;
+  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);
 
@@ -70,7 +69,7 @@
 /* rtl:end:ignore */
 
 .bs-tooltip-bottom .tooltip-arrow {
-  top: 0;
+  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
 
   &::before {
     bottom: -1px;
@@ -81,7 +80,7 @@
 
 /* rtl:begin:ignore */
 .bs-tooltip-start .tooltip-arrow {
-  right: 0;
+  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);
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_utilities.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_utilities.scss
index 1e0d141a..696f906e 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_utilities.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_utilities.scss
@@ -22,6 +22,20 @@ $utilities: map-merge(
       )
     ),
     // scss-docs-end utils-float
+    // Object Fit utilities
+    // scss-docs-start utils-object-fit
+    "object-fit": (
+      responsive: true,
+      property: object-fit,
+      values: (
+        contain: contain,
+        cover: cover,
+        fill: fill,
+        scale: scale-down,
+        none: none,
+      )
+    ),
+    // scss-docs-end utils-object-fit
     // Opacity utilities
     // scss-docs-start utils-opacity
     "opacity": (
@@ -40,6 +54,14 @@ $utilities: map-merge(
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
     // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (
@@ -47,7 +69,7 @@ $utilities: map-merge(
       print: true,
       property: display,
       class: d,
-      values: inline inline-block block grid table table-row table-cell flex inline-flex none
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
     ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
@@ -55,13 +77,21 @@ $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,
       )
     ),
     // scss-docs-end utils-shadow
+    // scss-docs-start utils-focus-ring
+    "focus-ring": (
+      css-var: true,
+      css-variable-name: focus-ring-color,
+      class: focus-ring,
+      values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
+    ),
+    // scss-docs-end utils-focus-ring
     // scss-docs-start utils-position
     "position": (
       property: position,
@@ -141,9 +171,13 @@ $utilities: map-merge(
       ),
       values: $utilities-border-colors
     ),
+    "subtle-border-color": (
+      property: border-color,
+      class: border,
+      values: $utilities-border-subtle
+    ),
     "border-width": (
-      css-var: true,
-      css-variable-name: border-width,
+      property: border-width,
       class: border,
       values: $border-widths
     ),
@@ -450,6 +484,18 @@ $utilities: map-merge(
       class: gap,
       values: $spacers
     ),
+    "row-gap": (
+      responsive: true,
+      property: row-gap,
+      class: row-gap,
+      values: $spacers
+    ),
+    "column-gap": (
+      responsive: true,
+      property: column-gap,
+      class: column-gap,
+      values: $spacers
+    ),
     // scss-docs-end utils-spacing
     // Text
     // scss-docs-start utils-text
@@ -473,11 +519,12 @@ $utilities: map-merge(
       property: font-weight,
       class: fw,
       values: (
-        light: $font-weight-light,
         lighter: $font-weight-lighter,
+        light: $font-weight-light,
         normal: $font-weight-normal,
-        bold: $font-weight-bold,
+        medium: $font-weight-medium,
         semibold: $font-weight-semibold,
+        bold: $font-weight-bold,
         bolder: $font-weight-bolder
       )
     ),
@@ -535,9 +582,12 @@ $utilities: map-merge(
       values: map-merge(
         $utilities-text-colors,
         (
-          "muted": $text-muted,
+          "muted": var(--#{$prefix}secondary-color), // deprecated
           "black-50": rgba($black, .5), // deprecated
           "white-50": rgba($white, .5), // deprecated
+          "body-secondary": var(--#{$prefix}secondary-color),
+          "body-tertiary": var(--#{$prefix}tertiary-color),
+          "body-emphasis": var(--#{$prefix}emphasis-color),
           "reset": inherit,
         )
       )
@@ -552,7 +602,62 @@ $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": (
+      css-var: true,
+      class: link-opacity,
+      state: hover,
+      values: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      )
+    ),
+    "link-offset": (
+      property: text-underline-offset,
+      class: link-offset,
+      state: hover,
+      values: (
+        1: .125em,
+        2: .25em,
+        3: .375em,
+      )
+    ),
+    "link-underline": (
+      property: text-decoration-color,
+      class: link-underline,
+      local-vars: (
+        "link-underline-opacity": 1
+      ),
+      values: map-merge(
+        $utilities-links-underline,
+        (
+          null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+        )
+      )
+    ),
+    "link-underline-opacity": (
+      css-var: true,
+      class: link-underline-opacity,
+      state: hover,
+      values: (
+        0: 0,
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      ),
+    ),
+    // scss-docs-end utils-links
     // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,
@@ -563,7 +668,9 @@ $utilities: map-merge(
       values: map-merge(
         $utilities-bg-colors,
         (
-          "transparent": transparent
+          "transparent": transparent,
+          "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
         )
       )
     ),
@@ -578,6 +685,11 @@ $utilities: map-merge(
         100: 1
       )
     ),
+    "subtle-background-color": (
+      property: background-color,
+      class: bg,
+      values: $utilities-bg-subtle
+    ),
     // scss-docs-end utils-bg-color
     "gradient": (
       property: background-image,
@@ -606,7 +718,7 @@ $utilities: map-merge(
         2: var(--#{$prefix}border-radius),
         3: var(--#{$prefix}border-radius-lg),
         4: var(--#{$prefix}border-radius-xl),
-        5: var(--#{$prefix}border-radius-2xl),
+        5: var(--#{$prefix}border-radius-xxl),
         circle: 50%,
         pill: var(--#{$prefix}border-radius-pill)
       )
@@ -614,22 +726,62 @@ $utilities: map-merge(
     "rounded-top": (
       property: border-top-left-radius border-top-right-radius,
       class: rounded-top,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
     ),
     "rounded-end": (
       property: border-top-right-radius border-bottom-right-radius,
       class: rounded-end,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
     ),
     "rounded-bottom": (
       property: border-bottom-right-radius border-bottom-left-radius,
       class: rounded-bottom,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
     ),
     "rounded-start": (
       property: border-bottom-left-radius border-top-left-radius,
       class: rounded-start,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
     ),
     // scss-docs-end utils-border-radius
     // scss-docs-start utils-visibility
@@ -640,8 +792,15 @@ $utilities: map-merge(
         visible: visible,
         invisible: hidden,
       )
-    )
+    ),
     // scss-docs-end utils-visibility
+    // scss-docs-start utils-zindex
+    "z-index": (
+      property: z-index,
+      class: z,
+      values: $zindex-levels,
+    )
+    // scss-docs-end utils-zindex
   ),
   $utilities
 );
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables-dark.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables-dark.scss
new file mode 100644
index 00000000..6422b387
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables-dark.scss
@@ -0,0 +1,87 @@
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark:        tint-color($success, 40%) !default;
+$info-text-emphasis-dark:           tint-color($info, 40%) !default;
+$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+$light-text-emphasis-dark:          $gray-100 !default;
+$dark-text-emphasis-dark:           $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark:            shade-color($success, 80%) !default;
+$info-bg-subtle-dark:               shade-color($info, 80%) !default;
+$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+$light-bg-subtle-dark:              $gray-800 !default;
+$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+$success-border-subtle-dark:        shade-color($success, 40%) !default;
+$info-border-subtle-dark:           shade-color($info, 40%) !default;
+$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+$light-border-subtle-dark:          $gray-700 !default;
+$dark-border-subtle-dark:           $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+$body-color-dark:                   $gray-300 !default;
+$body-bg-dark:                      $gray-900 !default;
+$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:            $gray-800 !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
+$body-emphasis-color-dark:          $white !default;
+$border-color-dark:                 $gray-700 !default;
+$border-color-translucent-dark:     rgba($white, .15) !default;
+$headings-color-dark:               inherit !default;
+$link-color-dark:                   tint-color($primary, 40%) !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;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark:  $body-color-dark !default;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark:            rgba($white, .25) !default;
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+// scss-docs-start form-validation-colors-dark
+$form-valid-color-dark:             $green-300 !default;
+$form-valid-border-color-dark:      $green-300 !default;
+$form-invalid-color-dark:           $red-300 !default;
+$form-invalid-border-color-dark:    $red-300 !default;
+// scss-docs-end form-validation-colors-dark
+
+
+//
+// Accordion
+//
+
+$accordion-icon-color-dark:         $primary-text-emphasis-dark !default;
+$accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end sass-dark-mode-vars
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss
index e0218365..5429c017 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss
@@ -321,6 +321,39 @@ $theme-colors: (
 ) !default;
 // scss-docs-end theme-colors-map
 
+// scss-docs-start theme-text-variables
+$primary-text-emphasis:   shade-color($primary, 60%) !default;
+$secondary-text-emphasis: shade-color($secondary, 60%) !default;
+$success-text-emphasis:   shade-color($success, 60%) !default;
+$info-text-emphasis:      shade-color($info, 60%) !default;
+$warning-text-emphasis:   shade-color($warning, 60%) !default;
+$danger-text-emphasis:    shade-color($danger, 60%) !default;
+$light-text-emphasis:     $gray-700 !default;
+$dark-text-emphasis:      $gray-700 !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle:       tint-color($primary, 80%) !default;
+$secondary-bg-subtle:     tint-color($secondary, 80%) !default;
+$success-bg-subtle:       tint-color($success, 80%) !default;
+$info-bg-subtle:          tint-color($info, 80%) !default;
+$warning-bg-subtle:       tint-color($warning, 80%) !default;
+$danger-bg-subtle:        tint-color($danger, 80%) !default;
+$light-bg-subtle:         mix($gray-100, $white) !default;
+$dark-bg-subtle:          $gray-400 !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$primary-border-subtle:   tint-color($primary, 60%) !default;
+$secondary-border-subtle: tint-color($secondary, 60%) !default;
+$success-border-subtle:   tint-color($success, 60%) !default;
+$info-border-subtle:      tint-color($info, 60%) !default;
+$warning-border-subtle:   tint-color($warning, 60%) !default;
+$danger-border-subtle:    tint-color($danger, 60%) !default;
+$light-border-subtle:     $gray-200 !default;
+$dark-border-subtle:      $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
+
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
   ("<", "%3c"),
@@ -351,6 +384,9 @@ $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 
+$enable-dark-mode:            true !default;
+$color-mode-type:             data !default; // `data` or `media-query`
+
 // Prefix for :root CSS variables
 
 $variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
@@ -398,9 +434,17 @@ $position-values: (
 //
 // Settings for the `<body>` element.
 
-$body-bg:                   $white !default;
-$body-color:                $gray-900 !default;
 $body-text-align:           null !default;
+$body-color:                $gray-900 !default;
+$body-bg:                   $white !default;
+
+$body-secondary-color:      rgba($body-color, .75) !default;
+$body-secondary-bg:         $gray-200 !default;
+
+$body-tertiary-color:       rgba($body-color, .5) !default;
+$body-tertiary-bg:          $gray-100 !default;
+
+$body-emphasis-color:       $black !default;
 
 // Links
 //
@@ -415,6 +459,15 @@ $link-hover-decoration:                   null !default;
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap:               .375rem !default;
+$icon-link-underline-offset:  .25em !default;
+$icon-link-icon-size:         1em !default;
+$icon-link-icon-transition:   .2s ease-in-out transform !default;
+$icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
 // Paragraphs
 //
 // Style p element.
@@ -485,7 +538,6 @@ $border-widths: (
   4: 4px,
   5: 5px
 ) !default;
-
 $border-style:                solid !default;
 $border-color:                $gray-300 !default;
 $border-color-translucent:    rgba($black, .175) !default;
@@ -496,9 +548,12 @@ $border-radius:               .375rem !default;
 $border-radius-sm:            .25rem !default;
 $border-radius-lg:            .5rem !default;
 $border-radius-xl:            1rem !default;
-$border-radius-2xl:           2rem !default;
+$border-radius-xxl:           2rem !default;
 $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables
+// fusv-disable
+$border-radius-2xl:           $border-radius-xxl !default; // Deprecated in v5.3.0
+// fusv-enable
 
 // scss-docs-start box-shadow-variables
 $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
@@ -510,6 +565,14 @@ $box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
 $component-active-color:      $white !default;
 $component-active-bg:         $primary !default;
 
+// scss-docs-start focus-ring-variables
+$focus-ring-width:      .25rem !default;
+$focus-ring-opacity:    .25 !default;
+$focus-ring-color:      rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-blur:       0 !default;
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
+// scss-docs-end focus-ring-variables
+
 // scss-docs-start caret-variables
 $caret-width:                 .3em !default;
 $caret-vertical-align:        $caret-width * .85 !default;
@@ -556,6 +619,7 @@ $font-size-lg:                $font-size-base * 1.25 !default;
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;
+$font-weight-medium:          500 !default;
 $font-weight-semibold:        600 !default;
 $font-weight-bold:            700 !default;
 $font-weight-bolder:          bolder !default;
@@ -591,7 +655,7 @@ $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
-$headings-color:              null !default;
+$headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -618,7 +682,9 @@ $small-font-size:             .875em !default;
 
 $sub-sup-font-size:           .75em !default;
 
-$text-muted:                  $gray-600 !default;
+// fusv-disable
+$text-muted:                  var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
+// fusv-enable
 
 $initialism-font-size:        $small-font-size !default;
 
@@ -636,9 +702,13 @@ $hr-height:                   null !default; // Deprecated in v5.2.0
 // fusv-enable
 
 $hr-border-color:             null !default; // Allows for inherited colors
-$hr-border-width:             $border-width !default;
+$hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;
 
+// scss-docs-start vr-variables
+$vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;
@@ -648,6 +718,7 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
+$mark-color:                  $body-color !default;
 $mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables
 
@@ -664,26 +735,26 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}body-color) !default;
-$table-bg:                    transparent !default;
+$table-color:                 var(--#{$prefix}emphasis-color) !default;
+$table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
 $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
 
-$table-border-factor:         .1 !default;
-$table-border-width:          $border-width !default;
+$table-border-factor:         .2 !default;
+$table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;
 
 $table-striped-order:         odd !default;
@@ -691,7 +762,7 @@ $table-striped-columns-order: even !default;
 
 $table-group-separator-color: currentcolor !default;
 
-$table-caption-color:         $text-muted !default;
+$table-caption-color:         var(--#{$prefix}secondary-color) !default;
 
 $table-bg-scale:              -80% !default;
 // scss-docs-end table-variables
@@ -721,11 +792,11 @@ $input-btn-font-family:       null !default;
 $input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
-$input-btn-focus-width:         .25rem !default;
-$input-btn-focus-color-opacity: .25 !default;
-$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
-$input-btn-focus-blur:          0 !default;
-$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
+$input-btn-focus-width:         $focus-ring-width !default;
+$input-btn-focus-color-opacity: $focus-ring-opacity !default;
+$input-btn-focus-color:         $focus-ring-color !default;
+$input-btn-focus-blur:          $focus-ring-blur !default;
+$input-btn-focus-box-shadow:    $focus-ring-box-shadow !default;
 
 $input-btn-padding-y-sm:      .25rem !default;
 $input-btn-padding-x-sm:      .5rem !default;
@@ -735,7 +806,7 @@ $input-btn-padding-y-lg:      .5rem !default;
 $input-btn-padding-x-lg:      1rem !default;
 $input-btn-font-size-lg:      $font-size-lg !default;
 
-$input-btn-border-width:      $border-width !default;
+$input-btn-border-width:      var(--#{$prefix}border-width) !default;
 // scss-docs-end input-btn-variables
 
 
@@ -744,6 +815,7 @@ $input-btn-border-width:      $border-width !default;
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 // scss-docs-start btn-variables
+$btn-color:                   var(--#{$prefix}body-color) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -771,11 +843,12 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
+$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius:           var(--#{$prefix}border-radius) !default;
+$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg:        var(--#{$prefix}border-radius-lg) !default;
 
 $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
@@ -797,7 +870,7 @@ $form-text-margin-top:                  .25rem !default;
 $form-text-font-size:                   $small-font-size !default;
 $form-text-font-style:                  null !default;
 $form-text-font-weight:                 null !default;
-$form-text-color:                       $text-muted !default;
+$form-text-color:                       var(--#{$prefix}secondary-color) !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
@@ -824,19 +897,19 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-$input-bg:                              $body-bg !default;
+$input-bg:                              var(--#{$prefix}body-bg) !default;
 $input-disabled-color:                  null !default;
-$input-disabled-bg:                     $gray-200 !default;
+$input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           $body-color !default;
-$input-border-color:                    $gray-400 !default;
+$input-color:                           var(--#{$prefix}body-color) !default;
+$input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      $box-shadow-inset !default;
+$input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
 
-$input-border-radius:                   $border-radius !default;
-$input-border-radius-sm:                $border-radius-sm !default;
-$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius:                   var(--#{$prefix}border-radius) !default;
+$input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
+$input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !default;
 
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              tint-color($component-active-bg, 50%) !default;
@@ -844,10 +917,10 @@ $input-focus-color:                     $input-color !default;
 $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 
-$input-placeholder-color:               $gray-600 !default;
-$input-plaintext-color:                 $body-color !default;
+$input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
+$input-plaintext-color:                 var(--#{$prefix}body-color) !default;
 
-$input-height-border:                   $input-border-width * 2 !default;
+$input-height-border:                   calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
 
 $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
@@ -874,11 +947,11 @@ $form-check-transition:                   null !default;
 $form-check-input-active-filter:          brightness(90%) !default;
 
 $form-check-input-bg:                     $input-bg !default;
-$form-check-input-border:                 1px solid rgba($black, .25) !default;
+$form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
 $form-check-input-border-radius:          .25em !default;
 $form-check-radio-border-radius:          50% !default;
 $form-check-input-focus-border:           $input-focus-border-color !default;
-$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+$form-check-input-focus-box-shadow:       $focus-ring-box-shadow !default;
 
 $form-check-input-checked-color:          $component-active-color !default;
 $form-check-input-checked-bg-color:       $component-active-bg !default;
@@ -919,7 +992,7 @@ $input-group-addon-padding-y:           $input-padding-y !default;
 $input-group-addon-padding-x:           $input-padding-x !default;
 $input-group-addon-font-weight:         $input-font-weight !default;
 $input-group-addon-color:               $input-color !default;
-$input-group-addon-bg:                  $gray-200 !default;
+$input-group-addon-bg:                  var(--#{$prefix}tertiary-bg) !default;
 $input-group-addon-border-color:        $input-border-color !default;
 // scss-docs-end input-group-variables
 
@@ -934,7 +1007,7 @@ $form-select-line-height:           $input-line-height !default;
 $form-select-color:                 $input-color !default;
 $form-select-bg:                    $input-bg !default;
 $form-select-disabled-color:        null !default;
-$form-select-disabled-bg:           $gray-200 !default;
+$form-select-disabled-bg:           $input-disabled-bg !default;
 $form-select-disabled-border-color: $input-disabled-border-color !default;
 $form-select-bg-position:           right $form-select-padding-x center !default;
 $form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
@@ -948,7 +1021,7 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $input-border-radius !default;
-$form-select-box-shadow:          $box-shadow-inset !default;
+$form-select-box-shadow:          var(--#{$prefix}box-shadow-inset) !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
 $form-select-focus-width:         $input-focus-width !default;
@@ -971,9 +1044,9 @@ $form-select-transition:          $input-transition !default;
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             $gray-300 !default;
+$form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
 $form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     $box-shadow-inset !default;
+$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 
 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
@@ -984,26 +1057,28 @@ $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !defa
 $form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
-$form-range-thumb-disabled-bg:             $gray-500 !default;
+$form-range-thumb-disabled-bg:             var(--#{$prefix}secondary-color) !default;
 $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end form-range-variables
 
 // scss-docs-start form-file-variables
 $form-file-button-color:          $input-color !default;
-$form-file-button-bg:             $input-group-addon-bg !default;
-$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;
+$form-file-button-bg:             var(--#{$prefix}tertiary-bg) !default;
+$form-file-button-hover-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end form-file-variables
 
 // scss-docs-start form-floating-variables
-$form-floating-height:            add(3.5rem, $input-height-border) !default;
-$form-floating-line-height:       1.25 !default;
-$form-floating-padding-x:         $input-padding-x !default;
-$form-floating-padding-y:         1rem !default;
-$form-floating-input-padding-t:   1.625rem !default;
-$form-floating-input-padding-b:   .625rem !default;
-$form-floating-label-opacity:     .65 !default;
-$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
+$form-floating-height:                  add(3.5rem, $input-height-border) !default;
+$form-floating-line-height:             1.25 !default;
+$form-floating-padding-x:               $input-padding-x !default;
+$form-floating-padding-y:               1rem !default;
+$form-floating-input-padding-t:         1.625rem !default;
+$form-floating-input-padding-b:         .625rem !default;
+$form-floating-label-height:            1.5em !default;
+$form-floating-label-opacity:           .65 !default;
+$form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+$form-floating-label-disabled-color:    $gray-600 !default;
+$form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
 // scss-docs-end form-floating-variables
 
 // Form validation
@@ -1021,15 +1096,30 @@ $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
 
+// scss-docs-start form-validation-colors
+$form-valid-color:                  $form-feedback-valid-color !default;
+$form-valid-border-color:           $form-feedback-valid-color !default;
+$form-invalid-color:                $form-feedback-invalid-color !default;
+$form-invalid-border-color:         $form-feedback-invalid-color !default;
+// scss-docs-end form-validation-colors
+
 // scss-docs-start form-validation-states
 $form-validation-states: (
   "valid": (
-    "color": $form-feedback-valid-color,
-    "icon": $form-feedback-icon-valid
+    "color": var(--#{$prefix}form-valid-color),
+    "icon": $form-feedback-icon-valid,
+    "tooltip-color": #fff,
+    "tooltip-bg-color": var(--#{$prefix}success),
+    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+    "border-color": var(--#{$prefix}form-valid-border-color),
   ),
   "invalid": (
-    "color": $form-feedback-invalid-color,
-    "icon": $form-feedback-icon-invalid
+    "color": var(--#{$prefix}form-invalid-color),
+    "icon": $form-feedback-icon-invalid,
+    "tooltip-color": #fff,
+    "tooltip-bg-color": var(--#{$prefix}danger),
+    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+    "border-color": var(--#{$prefix}form-invalid-border-color),
   )
 ) !default;
 // scss-docs-end form-validation-states
@@ -1052,6 +1142,16 @@ $zindex-tooltip:                    1080 !default;
 $zindex-toast:                      1090 !default;
 // scss-docs-end zindex-stack
 
+// scss-docs-start zindex-levels-map
+$zindex-levels: (
+  n1: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3
+) !default;
+// scss-docs-end zindex-levels-map
+
 
 // Navs
 
@@ -1063,19 +1163,24 @@ $nav-link-font-weight:              null !default;
 $nav-link-color:                    var(--#{$prefix}link-color) !default;
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
 $nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-$nav-link-disabled-color:           $gray-600 !default;
-
-$nav-tabs-border-color:             $gray-300 !default;
-$nav-tabs-border-width:             $border-width !default;
-$nav-tabs-border-radius:            $border-radius !default;
-$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color:        $gray-700 !default;
-$nav-tabs-link-active-bg:           $body-bg !default;
-$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
-
-$nav-pills-border-radius:           $border-radius !default;
+$nav-link-disabled-color:           var(--#{$prefix}secondary-color) !default;
+$nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;
+
+$nav-tabs-border-color:             var(--#{$prefix}border-color) !default;
+$nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
+$nav-tabs-border-radius:            var(--#{$prefix}border-radius) !default;
+$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
+$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
+$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius:           var(--#{$prefix}border-radius) !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
+
+$nav-underline-gap:                 1rem !default;
+$nav-underline-border-width:        .125rem !default;
+$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
 // scss-docs-end nav-variables
 
 
@@ -1101,12 +1206,13 @@ $navbar-toggler-border-radius:      $btn-border-radius !default;
 $navbar-toggler-focus-width:        $btn-focus-width !default;
 $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
 
-$navbar-light-color:                rgba($black, .55) !default;
-$navbar-light-hover-color:          rgba($black, .7) !default;
-$navbar-light-active-color:         rgba($black, .9) !default;
-$navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
+$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
+$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
+$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
+$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
+$navbar-light-icon-color:           rgba($body-color, .75) !default;
+$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
 $navbar-light-brand-color:          $navbar-light-active-color !default;
 $navbar-light-brand-hover-color:    $navbar-light-active-color !default;
 // scss-docs-end navbar-variables
@@ -1116,7 +1222,8 @@ $navbar-dark-color:                 rgba($white, .55) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
 $navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-icon-color:            $navbar-dark-color !default;
+$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
 $navbar-dark-brand-color:           $navbar-dark-active-color !default;
 $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
@@ -1133,24 +1240,24 @@ $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    $body-color !default;
-$dropdown-bg:                       $white !default;
+$dropdown-color:                    var(--#{$prefix}body-color) !default;
+$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
-$dropdown-border-radius:            $border-radius !default;
-$dropdown-border-width:             $border-width !default;
-$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
+$dropdown-border-width:             var(--#{$prefix}border-width) !default;
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               $box-shadow !default;
+$dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
-$dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;
-$dropdown-link-hover-bg:            $gray-200 !default;
+$dropdown-link-color:               var(--#{$prefix}body-color) !default;
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
 
 $dropdown-link-active-color:        $component-active-color !default;
 $dropdown-link-active-bg:           $component-active-bg !default;
 
-$dropdown-link-disabled-color:      $gray-500 !default;
+$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
 
 $dropdown-item-padding-y:           $spacer * .25 !default;
 $dropdown-item-padding-x:           $spacer !default;
@@ -1192,33 +1299,33 @@ $pagination-padding-x-lg:           1.5rem !default;
 $pagination-font-size:              $font-size-base !default;
 
 $pagination-color:                  var(--#{$prefix}link-color) !default;
-$pagination-bg:                     $white !default;
-$pagination-border-radius:          $border-radius !default;
-$pagination-border-width:           $border-width !default;
-$pagination-margin-start:           ($pagination-border-width * -1) !default;
-$pagination-border-color:           $gray-300 !default;
+$pagination-bg:                     var(--#{$prefix}body-bg) !default;
+$pagination-border-radius:          var(--#{$prefix}border-radius) !default;
+$pagination-border-width:           var(--#{$prefix}border-width) !default;
+$pagination-margin-start:           calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
-$pagination-focus-bg:               $gray-200 !default;
-$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+$pagination-focus-bg:               var(--#{$prefix}secondary-bg) !default;
+$pagination-focus-box-shadow:       $focus-ring-box-shadow !default;
 $pagination-focus-outline:          0 !default;
 
 $pagination-hover-color:            var(--#{$prefix}link-hover-color) !default;
-$pagination-hover-bg:               $gray-200 !default;
-$pagination-hover-border-color:     $gray-300 !default;
+$pagination-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
+$pagination-hover-border-color:     var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
 
 $pagination-active-color:           $component-active-color !default;
 $pagination-active-bg:              $component-active-bg !default;
-$pagination-active-border-color:    $pagination-active-bg !default;
+$pagination-active-border-color:    $component-active-bg !default;
 
-$pagination-disabled-color:         $gray-600 !default;
-$pagination-disabled-bg:            $white !default;
-$pagination-disabled-border-color:  $gray-300 !default;
+$pagination-disabled-color:         var(--#{$prefix}secondary-color) !default;
+$pagination-disabled-bg:            var(--#{$prefix}secondary-bg) !default;
+$pagination-disabled-border-color:  var(--#{$prefix}border-color) !default;
 
 $pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
-$pagination-border-radius-sm:       $border-radius-sm !default;
-$pagination-border-radius-lg:       $border-radius-lg !default;
+$pagination-border-radius-sm:       var(--#{$prefix}border-radius-sm) !default;
+$pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
 // scss-docs-end pagination-variables
 
 
@@ -1235,18 +1342,20 @@ $placeholder-opacity-min:           .2 !default;
 $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
 $card-title-spacer-y:               $spacer * .5 !default;
-$card-border-width:                 $border-width !default;
+$card-title-color:                  null !default;
+$card-subtitle-color:               null !default;
+$card-border-width:                 var(--#{$prefix}border-width) !default;
 $card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
-$card-border-radius:                $border-radius !default;
+$card-border-radius:                var(--#{$prefix}border-radius) !default;
 $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-padding-y:                $card-spacer-y * .5 !default;
 $card-cap-padding-x:                $card-spacer-x !default;
-$card-cap-bg:                       rgba($black, .03) !default;
+$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !default;
 $card-cap-color:                    null !default;
 $card-height:                       null !default;
 $card-color:                        null !default;
-$card-bg:                           $white !default;
+$card-bg:                           var(--#{$prefix}body-bg) !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-end card-variables
@@ -1256,11 +1365,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         $body-color !default; // Sass variable because of $accordion-button-icon
-$accordion-bg:                            $body-bg !default;
-$accordion-border-width:                  $border-width !default;
+$accordion-color:                         var(--#{$prefix}body-color) !default;
+$accordion-bg:                            var(--#{$prefix}body-bg) !default;
+$accordion-border-width:                  var(--#{$prefix}border-width) !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;
-$accordion-border-radius:                 $border-radius !default;
+$accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
 
 $accordion-body-padding-y:                $accordion-padding-y !default;
@@ -1268,18 +1377,18 @@ $accordion-body-padding-x:                $accordion-padding-x !default;
 
 $accordion-button-padding-y:              $accordion-padding-y !default;
 $accordion-button-padding-x:              $accordion-padding-x !default;
-$accordion-button-color:                  $accordion-color !default;
+$accordion-button-color:                  var(--#{$prefix}body-color) !default;
 $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;
-$accordion-button-active-color:           shade-color($primary, 10%) !default;
+$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
+$accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis) !default;
 
 $accordion-button-focus-border-color:     $input-focus-border-color !default;
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
 
 $accordion-icon-width:                    1.25rem !default;
-$accordion-icon-color:                    $accordion-button-color !default;
-$accordion-icon-active-color:             $accordion-button-active-color !default;
+$accordion-icon-color:                    $body-color !default;
+$accordion-icon-active-color:             $primary-text-emphasis !default;
 $accordion-icon-transition:               transform .2s ease-in-out !default;
 $accordion-icon-transform:                rotate(-180deg) !default;
 
@@ -1292,9 +1401,9 @@ $accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w
 // scss-docs-start tooltip-variables
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
-$tooltip-color:                     $white !default;
-$tooltip-bg:                        $black !default;
-$tooltip-border-radius:             $border-radius !default;
+$tooltip-color:                     var(--#{$prefix}body-bg) !default;
+$tooltip-bg:                        var(--#{$prefix}emphasis-color) !default;
+$tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;
 $tooltip-padding-x:                 $spacer * .5 !default;
@@ -1322,21 +1431,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 
 // scss-docs-start popover-variables
 $popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        $white !default;
+$popover-bg:                        var(--#{$prefix}body-bg) !default;
 $popover-max-width:                 276px !default;
-$popover-border-width:              $border-width !default;
+$popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
-$popover-border-radius:             $border-radius-lg !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                $box-shadow !default;
+$popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
+$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
 
 $popover-header-font-size:          $font-size-base !default;
-$popover-header-bg:                 shade-color($popover-bg, 6%) !default;
+$popover-header-bg:                 var(--#{$prefix}secondary-bg) !default;
 $popover-header-color:              $headings-color !default;
 $popover-header-padding-y:          .5rem !default;
 $popover-header-padding-x:          $spacer !default;
 
-$popover-body-color:                $body-color !default;
+$popover-body-color:                var(--#{$prefix}body-color) !default;
 $popover-body-padding-y:            $spacer !default;
 $popover-body-padding-x:            $spacer !default;
 
@@ -1359,16 +1468,16 @@ $toast-padding-x:                   .75rem !default;
 $toast-padding-y:                   .5rem !default;
 $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
-$toast-background-color:            rgba($white, .85) !default;
-$toast-border-width:                $border-width !default;
+$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-border-width:                var(--#{$prefix}border-width) !default;
 $toast-border-color:                var(--#{$prefix}border-color-translucent) !default;
-$toast-border-radius:               $border-radius !default;
-$toast-box-shadow:                  $box-shadow !default;
+$toast-border-radius:               var(--#{$prefix}border-radius) !default;
+$toast-box-shadow:                  var(--#{$prefix}box-shadow) !default;
 $toast-spacing:                     $container-padding-x !default;
 
-$toast-header-color:                $gray-600 !default;
-$toast-header-background-color:     rgba($white, .85) !default;
-$toast-header-border-color:         rgba($black, .05) !default;
+$toast-header-color:                var(--#{$prefix}secondary-color) !default;
+$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-header-border-color:         $toast-border-color !default;
 // scss-docs-end toast-variables
 
 
@@ -1380,7 +1489,7 @@ $badge-font-weight:                 $font-weight-bold !default;
 $badge-color:                       $white !default;
 $badge-padding-y:                   .35em !default;
 $badge-padding-x:                   .65em !default;
-$badge-border-radius:               $border-radius !default;
+$badge-border-radius:               var(--#{$prefix}border-radius) !default;
 // scss-docs-end badge-variables
 
 
@@ -1397,13 +1506,13 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 $modal-title-line-height:           $line-height-base !default;
 
 $modal-content-color:               null !default;
-$modal-content-bg:                  $white !default;
+$modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
-$modal-content-border-width:        $border-width !default;
-$modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-border-width:        var(--#{$prefix}border-width) !default;
+$modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up:    $box-shadow !default;
+$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
+$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;
 
 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
@@ -1438,24 +1547,26 @@ $modal-scale-transform:             scale(1.02) !default;
 $alert-padding-y:               $spacer !default;
 $alert-padding-x:               $spacer !default;
 $alert-margin-bottom:           1rem !default;
-$alert-border-radius:           $border-radius !default;
+$alert-border-radius:           var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:        $font-weight-bold !default;
-$alert-border-width:            $border-width !default;
-$alert-bg-scale:                -80% !default;
-$alert-border-scale:            -70% !default;
-$alert-color-scale:             40% !default;
+$alert-border-width:            var(--#{$prefix}border-width) !default;
 $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables
 
+// fusv-disable
+$alert-bg-scale:                -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale:            -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale:             40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable
 
 // Progress bars
 
 // scss-docs-start progress-variables
 $progress-height:                   1rem !default;
 $progress-font-size:                $font-size-base * .75 !default;
-$progress-bg:                       $gray-200 !default;
-$progress-border-radius:            $border-radius !default;
-$progress-box-shadow:               $box-shadow-inset !default;
+$progress-bg:                       var(--#{$prefix}secondary-bg) !default;
+$progress-border-radius:            var(--#{$prefix}border-radius) !default;
+$progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
 $progress-bar-color:                $white !default;
 $progress-bar-bg:                   $primary !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
@@ -1466,30 +1577,32 @@ $progress-bar-transition:           width .6s ease !default;
 // List group
 
 // scss-docs-start list-group-variables
-$list-group-color:                  $gray-900 !default;
-$list-group-bg:                     $white !default;
-$list-group-border-color:           rgba($black, .125) !default;
-$list-group-border-width:           $border-width !default;
-$list-group-border-radius:          $border-radius !default;
+$list-group-color:                  var(--#{$prefix}body-color) !default;
+$list-group-bg:                     var(--#{$prefix}body-bg) !default;
+$list-group-border-color:           var(--#{$prefix}border-color) !default;
+$list-group-border-width:           var(--#{$prefix}border-width) !default;
+$list-group-border-radius:          var(--#{$prefix}border-radius) !default;
 
 $list-group-item-padding-y:         $spacer * .5 !default;
 $list-group-item-padding-x:         $spacer !default;
-$list-group-item-bg-scale:          -80% !default;
-$list-group-item-color-scale:       40% !default;
+// fusv-disable
+$list-group-item-bg-scale:          -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale:       40% !default; // Deprecated in v5.3.0
+// fusv-enable
 
-$list-group-hover-bg:               $gray-100 !default;
+$list-group-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
 $list-group-active-color:           $component-active-color !default;
 $list-group-active-bg:              $component-active-bg !default;
 $list-group-active-border-color:    $list-group-active-bg !default;
 
-$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-color:         var(--#{$prefix}secondary-color) !default;
 $list-group-disabled-bg:            $list-group-bg !default;
 
-$list-group-action-color:           $gray-700 !default;
-$list-group-action-hover-color:     $list-group-action-color !default;
+$list-group-action-color:           var(--#{$prefix}secondary-color) !default;
+$list-group-action-hover-color:     var(--#{$prefix}emphasis-color) !default;
 
-$list-group-action-active-color:    $body-color !default;
-$list-group-action-active-bg:       $gray-200 !default;
+$list-group-action-active-color:    var(--#{$prefix}body-color) !default;
+$list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end list-group-variables
 
 
@@ -1497,11 +1610,11 @@ $list-group-action-active-bg:       $gray-200 !default;
 
 // scss-docs-start thumbnail-variables
 $thumbnail-padding:                 .25rem !default;
-$thumbnail-bg:                      $body-bg !default;
-$thumbnail-border-width:            $border-width !default;
+$thumbnail-bg:                      var(--#{$prefix}body-bg) !default;
+$thumbnail-border-width:            var(--#{$prefix}border-width) !default;
 $thumbnail-border-color:            var(--#{$prefix}border-color) !default;
-$thumbnail-border-radius:           $border-radius !default;
-$thumbnail-box-shadow:              $box-shadow-sm !default;
+$thumbnail-border-radius:           var(--#{$prefix}border-radius) !default;
+$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm) !default;
 // scss-docs-end thumbnail-variables
 
 
@@ -1509,7 +1622,7 @@ $thumbnail-box-shadow:              $box-shadow-sm !default;
 
 // scss-docs-start figure-variables
 $figure-caption-font-size:          $small-font-size !default;
-$figure-caption-color:              $gray-600 !default;
+$figure-caption-color:              var(--#{$prefix}secondary-color) !default;
 // scss-docs-end figure-variables
 
 
@@ -1522,8 +1635,8 @@ $breadcrumb-padding-x:              0 !default;
 $breadcrumb-item-padding-x:         .5rem !default;
 $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-bg:                     null !default;
-$breadcrumb-divider-color:          $gray-600 !default;
-$breadcrumb-active-color:           $gray-600 !default;
+$breadcrumb-divider-color:          var(--#{$prefix}secondary-color) !default;
+$breadcrumb-active-color:           var(--#{$prefix}secondary-color) !default;
 $breadcrumb-divider:                quote("/") !default;
 $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 $breadcrumb-border-radius:          null !default;
@@ -1592,7 +1705,7 @@ $btn-close-padding-x:        .25em !default;
 $btn-close-padding-y:        $btn-close-padding-x !default;
 $btn-close-color:            $black !default;
 $btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
-$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
+$btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
 $btn-close-focus-opacity:    1 !default;
@@ -1612,8 +1725,8 @@ $offcanvas-transition-duration:     .3s !default;
 $offcanvas-border-color:            $modal-content-border-color !default;
 $offcanvas-border-width:            $modal-content-border-width !default;
 $offcanvas-title-line-height:       $modal-title-line-height !default;
-$offcanvas-bg-color:                $modal-content-bg !default;
-$offcanvas-color:                   $modal-content-color !default;
+$offcanvas-bg-color:                var(--#{$prefix}body-bg) !default;
+$offcanvas-color:                   var(--#{$prefix}body-color) !default;
 $offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
 $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-grid.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-grid.scss
index 1c4cdd1a..52bd577e 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-grid.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-grid.scss
@@ -5,9 +5,9 @@ $include-column-box-sizing: true !default;
 
 @import "http://github.com/functions";
 @import "http://github.com/variables";
+@import "http://github.com/variables-dark";
 @import "http://github.com/maps";
 
-@import "http://github.com/mixins/lists";
 @import "http://github.com/mixins/breakpoints";
 @import "http://github.com/mixins/container";
 @import "http://github.com/mixins/grid";
@@ -15,8 +15,6 @@ $include-column-box-sizing: true !default;
 
 @import "http://github.com/vendor/rfs";
 
-@import "http://github.com/root";
-
 @import "http://github.com/containers";
 @import "http://github.com/grid";
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-reboot.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-reboot.scss
index af527459..5b69b955 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-reboot.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-reboot.scss
@@ -3,6 +3,7 @@
 
 @import "http://github.com/functions";
 @import "http://github.com/variables";
+@import "http://github.com/variables-dark";
 @import "http://github.com/maps";
 @import "http://github.com/mixins";
 @import "http://github.com/root";
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-utilities.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-utilities.scss
index 2b3dbc5f..99c4a359 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-utilities.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-utilities.scss
@@ -4,6 +4,7 @@
 // Configuration
 @import "http://github.com/functions";
 @import "http://github.com/variables";
+@import "http://github.com/variables-dark";
 @import "http://github.com/maps";
 @import "http://github.com/mixins";
 @import "http://github.com/utilities";
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap.scss
index 8f8296de..449d7048 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap.scss
@@ -6,6 +6,7 @@
 // Configuration
 @import "http://github.com/functions";
 @import "http://github.com/variables";
+@import "http://github.com/variables-dark";
 @import "http://github.com/maps";
 @import "http://github.com/mixins";
 @import "http://github.com/utilities";
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_floating-labels.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_floating-labels.scss
index 6e5c9a75..2cf04704 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_floating-labels.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_floating-labels.scss
@@ -5,6 +5,7 @@
   > .form-control-plaintext,
   > .form-select {
     height: $form-floating-height;
+    min-height: $form-floating-height;
     line-height: $form-floating-line-height;
   }
 
@@ -12,7 +13,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    z-index: 2;
     height: 100%; // allow textareas
     padding: $form-floating-padding-y $form-floating-padding-x;
     overflow: hidden;
@@ -55,14 +56,24 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
+
+      &::after {
+        position: absolute;
+        inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+        z-index: -1;
+        height: $form-floating-label-height;
+        content: "";
+        background-color: $input-bg;
+        @include border-radius($input-border-radius);
+      }
     }
   }
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
     }
   }
@@ -72,4 +83,13 @@
       border-width: $input-border-width 0; // Required to properly position label text - as explained above
     }
   }
+
+  > :disabled ~ label,
+  > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
+    color: $form-floating-label-disabled-color;
+
+    &::after {
+      background-color: $input-disabled-bg;
+    }
+  }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss
index 42a2a960..d3a8fe60 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss
@@ -27,16 +27,20 @@
 }
 
 .form-check-input {
+  --#{$prefix}form-check-bg: #{$form-check-input-bg};
+
+  flex-shrink: 0;
   width: $form-check-input-width;
   height: $form-check-input-width;
   margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
   vertical-align: top;
-  background-color: $form-check-input-bg;
+  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);
 
@@ -65,17 +69,17 @@
 
     &[type="checkbox"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        background-image: escape-svg($form-check-input-checked-bg-image);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
       }
     }
 
     &[type="radio"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        background-image: escape-svg($form-check-radio-checked-bg-image);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
       }
     }
   }
@@ -85,9 +89,9 @@
     border-color: $form-check-input-indeterminate-border-color;
 
     @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
     } @else {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image);
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
     }
   }
 
@@ -121,24 +125,26 @@
   padding-left: $form-switch-padding-start;
 
   .form-check-input {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+
     width: $form-switch-width;
     margin-left: $form-switch-padding-start * -1;
-    background-image: escape-svg($form-switch-bg-image);
+    background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
     @include border-radius($form-switch-border-radius);
     @include transition($form-switch-transition);
 
     &:focus {
-      background-image: escape-svg($form-switch-focus-bg-image);
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
     }
 
     &:checked {
       background-position: $form-switch-checked-bg-position;
 
       @if $enable-gradients {
-        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        background-image: escape-svg($form-switch-checked-bg-image);
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
       }
     }
   }
@@ -173,3 +179,11 @@
     }
   }
 }
+
+@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)};
+    }
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-control.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-control.scss
index e707c57e..67ae5f4f 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-control.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-control.scss
@@ -11,10 +11,10 @@
   font-weight: $input-font-weight;
   line-height: $input-line-height;
   color: $input-color;
+  appearance: none; // Fix appearance for date inputs in Safari
   background-color: $input-bg;
   background-clip: padding-box;
   border: $input-border-width solid $input-border-color;
-  appearance: none; // Fix appearance for date inputs in Safari
 
   // 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);
@@ -44,12 +44,31 @@
     }
   }
 
-  // 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
+    //
+    // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
+    // Tested under iOS 16.2 / Safari 16.2
+    min-width: 85px; // Seems to be a good minimum safe width
+
+    // 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
     // Multiply line-height by 1em if it has no unit
     height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+
+    // Android Chrome type="date" is taller than the other inputs
+    // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
+    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+    margin: 0;
+  }
+
+  // Prevent excessive date input height in Webkit
+  // https://github.com/twbs/bootstrap/issues/34433
+  &::-webkit-datetime-edit {
+    display: block;
+    padding: 0;
   }
 
   // Placeholder
@@ -186,6 +205,7 @@ textarea {
   }
 
   &::-webkit-color-swatch {
+    border: 0 !important; // stylelint-disable-line declaration-no-important
     @include border-radius($input-border-radius);
   }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-range.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-range.scss
index 6de42132..4732213e 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-range.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/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,12 +28,12 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
+    appearance: none;
     @include gradient-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);
@@ -54,12 +54,12 @@
   &::-moz-range-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
+    appearance: none;
     @include gradient-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);
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-select.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-select.scss
index 78c34b8f..69ace529 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-select.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-select.scss
@@ -4,17 +4,19 @@
 // https://primer.github.io/.
 
 .form-select {
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+
   display: block;
   width: 100%;
   padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
-  -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;
+  appearance: none;
   background-color: $form-select-bg;
-  background-image: escape-svg($form-select-indicator);
+  background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
   background-repeat: no-repeat;
   background-position: $form-select-bg-position;
   background-size: $form-select-bg-size;
@@ -22,7 +24,6 @@
   @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: $form-select-focus-border-color;
@@ -69,3 +70,11 @@
   @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)};
+    }
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_input-group.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_input-group.scss
index 247f74a7..58e4d409 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_input-group.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_input-group.scss
@@ -121,7 +121,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: -$input-border-width;
+    margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
     @include border-start-radius(0);
   }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_color-bg.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_color-bg.scss
index b5ce7709..1a3a4cff 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_color-bg.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_color-bg.scss
@@ -1,10 +1,7 @@
-// stylelint-disable function-name-case
-
 // 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);
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_colored-links.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_colored-links.scss
index 1cb41828..5f868578 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_colored-links.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_colored-links.scss
@@ -1,12 +1,30 @@
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: $value !important; // stylelint-disable-line declaration-no-important
+    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
+        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
       }
     }
   }
 }
+
+// One-off special link helper as a bridge until v6
+.link-body-emphasis {
+  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+    }
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_focus-ring.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_focus-ring.scss
new file mode 100644
index 00000000..26508a8d
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_focus-ring.scss
@@ -0,0 +1,5 @@
+.focus-ring:focus {
+  outline: 0;
+  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+  box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_icon-link.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_icon-link.scss
new file mode 100644
index 00000000..3f8bcb33
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_icon-link.scss
@@ -0,0 +1,25 @@
+.icon-link {
+  display: inline-flex;
+  gap: $icon-link-gap;
+  align-items: center;
+  text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
+  text-underline-offset: $icon-link-underline-offset;
+  backface-visibility: hidden;
+
+  > .bi {
+    flex-shrink: 0;
+    width: $icon-link-icon-size;
+    height: $icon-link-icon-size;
+    fill: currentcolor;
+    @include transition($icon-link-icon-transition);
+  }
+}
+
+.icon-link-hover {
+  &:hover,
+  &:focus-visible {
+    > .bi {
+      transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+    }
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_vr.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_vr.scss
index 9bca0995..b6f9d42c 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_vr.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_vr.scss
@@ -1,7 +1,7 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: 1px;
+  width: $vr-border-width;
   min-height: 1em;
   background-color: currentcolor;
   opacity: $hr-opacity;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_alert.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_alert.scss
index 231f068e..fb524af1 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_alert.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_alert.scss
@@ -1,15 +1,18 @@
+@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
+
 // scss-docs-start alert-variant-mixin
 @mixin alert-variant($background, $border, $color) {
   --#{$prefix}alert-color: #{$color};
   --#{$prefix}alert-bg: #{$background};
   --#{$prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
 
   @if $enable-gradients {
     background-image: var(--#{$prefix}gradient);
   }
 
   .alert-link {
-    color: shade-color($color, 20%);
+    color: var(--#{$prefix}alert-link-color);
   }
 }
 // scss-docs-end alert-variant-mixin
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_banner.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_banner.scss
index 97ec9d1e..ee2c5842 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_banner.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_banner.scss
@@ -1,9 +1,7 @@
 @mixin bsBanner($file) {
   /*!
-   * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
-   * Copyright 2011-2022 The Bootstrap Authors
-   * Copyright 2011-2022 Twitter, Inc.
+   * Bootstrap #{$file} v5.3.2 (https://getbootstrap.com/)
+   * Copyright 2011-2023 The Bootstrap Authors
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    */
 }
-
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_caret.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_caret.scss
index 4b0f0360..be731165 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_caret.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_caret.scss
@@ -1,44 +1,49 @@
 // scss-docs-start caret-mixins
-@mixin caret-down {
-  border-top: $caret-width solid;
-  border-right: $caret-width solid transparent;
+@mixin caret-down($width: $caret-width) {
+  border-top: $width solid;
+  border-right: $width solid transparent;
   border-bottom: 0;
-  border-left: $caret-width solid transparent;
+  border-left: $width solid transparent;
 }
 
-@mixin caret-up {
+@mixin caret-up($width: $caret-width) {
   border-top: 0;
-  border-right: $caret-width solid transparent;
-  border-bottom: $caret-width solid;
-  border-left: $caret-width solid transparent;
+  border-right: $width solid transparent;
+  border-bottom: $width solid;
+  border-left: $width solid transparent;
 }
 
-@mixin caret-end {
-  border-top: $caret-width solid transparent;
+@mixin caret-end($width: $caret-width) {
+  border-top: $width solid transparent;
   border-right: 0;
-  border-bottom: $caret-width solid transparent;
-  border-left: $caret-width solid;
+  border-bottom: $width solid transparent;
+  border-left: $width solid;
 }
 
-@mixin caret-start {
-  border-top: $caret-width solid transparent;
-  border-right: $caret-width solid;
-  border-bottom: $caret-width solid transparent;
+@mixin caret-start($width: $caret-width) {
+  border-top: $width solid transparent;
+  border-right: $width solid;
+  border-bottom: $width solid transparent;
 }
 
-@mixin caret($direction: down) {
+@mixin caret(
+  $direction: down,
+  $width: $caret-width,
+  $spacing: $caret-spacing,
+  $vertical-align: $caret-vertical-align
+) {
   @if $enable-caret {
     &::after {
       display: inline-block;
-      margin-left: $caret-spacing;
-      vertical-align: $caret-vertical-align;
+      margin-left: $spacing;
+      vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
-        @include caret-down();
+        @include caret-down($width);
       } @else if $direction == up {
-        @include caret-up();
+        @include caret-up($width);
       } @else if $direction == end {
-        @include caret-end();
+        @include caret-end($width);
       }
     }
 
@@ -49,10 +54,10 @@
 
       &::before {
         display: inline-block;
-        margin-right: $caret-spacing;
-        vertical-align: $caret-vertical-align;
+        margin-right: $spacing;
+        vertical-align: $vertical-align;
         content: "";
-        @include caret-start();
+        @include caret-start($width);
       }
     }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_color-mode.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_color-mode.scss
new file mode 100644
index 00000000..e8cbf4cb
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_color-mode.scss
@@ -0,0 +1,21 @@
+// scss-docs-start color-mode-mixin
+@mixin color-mode($mode: light, $root: false) {
+  @if $color-mode-type == "media-query" {
+    @if $root == true {
+      @media (prefers-color-scheme: $mode) {
+        :root {
+          @content;
+        }
+      }
+    } @else {
+      @media (prefers-color-scheme: $mode) {
+        @content;
+      }
+    }
+  } @else {
+    [data-mdb-theme="#{$mode}"] {
+      @content;
+    }
+  }
+}
+// scss-docs-end color-mode-mixin
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_forms.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_forms.scss
index 2a853a78..d47b1e41 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_forms.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_forms.scss
@@ -21,7 +21,8 @@
   $icon,
   $tooltip-color: color-contrast($color),
   $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+  $border-color: $color
 ) {
   .#{$state}-feedback {
     display: none;
@@ -56,7 +57,7 @@
 
   .form-control {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
@@ -67,7 +68,7 @@
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
         box-shadow: $focus-box-shadow;
       }
     }
@@ -85,20 +86,20 @@
 
   .form-select {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       @if $enable-validation-icons {
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
+          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
           padding-right: $form-select-feedback-icon-padding-end;
-          background-image: escape-svg($form-select-indicator), escape-svg($icon);
           background-position: $form-select-bg-position, $form-select-feedback-icon-position;
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }
 
       &:focus {
-        border-color: $color;
+        border-color: $border-color;
         box-shadow: $focus-box-shadow;
       }
     }
@@ -114,7 +115,7 @@
 
   .form-check-input {
     @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;
 
       &:checked {
         background-color: $color;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_list-group.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_list-group.scss
index e55415f2..6274f343 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_list-group.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_list-group.scss
@@ -1,3 +1,5 @@
+@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
+
 // List Groups
 
 // scss-docs-start list-group-mixin
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_utilities.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_utilities.scss
index 59a23746..4795e894 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_utilities.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/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
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_visually-hidden.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_visually-hidden.scss
index 4fc7f49d..082aeec9 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_visually-hidden.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_visually-hidden.scss
@@ -6,7 +6,6 @@
 // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin visually-hidden() {
-  position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
@@ -15,6 +14,11 @@
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important;
+
+  // Fix for positioned table caption that could become anonymous cells
+  &:not(caption) {
+    position: absolute !important;
+  }
 }
 
 // Use to only display content when it's focused, or one of its child elements is focused
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
index fbd8ae04..53196abc 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
@@ -1,4 +1,4 @@
-// stylelint-disable property-blacklist, scss/dollar-variable-default
+// stylelint-disable scss/dimension-no-non-numeric-values
 
 // SCSS RFS mixin
 //
@@ -7,7 +7,7 @@
 // Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
 
 // Configuration
-@use 'sass:math';
+
 // Base value
 $rfs-base-value: 1.25rem !default;
 $rfs-unit: rem !default;
@@ -20,7 +20,13 @@ $rfs-unit: rem !default;
 $rfs-breakpoint: 1200px !default;
 $rfs-breakpoint-unit: px !default;
 
-@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
+@if $rfs-breakpoint-unit !=
+  px and
+  $rfs-breakpoint-unit !=
+  em and
+  $rfs-breakpoint-unit !=
+  rem
+{
   @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
 }
 
@@ -53,9 +59,13 @@ $enable-rfs: true !default;
 $rfs-base-value-unit: unit($rfs-base-value);
 
 @function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: math.abs($dividend);
-  $divisor: math.abs($divisor);
+  $sign: if(
+    $dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0,
+    1,
+    -1
+  );
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
   @if $dividend == 0 {
     @return 0;
   }
@@ -72,7 +82,7 @@ $rfs-base-value-unit: unit($rfs-base-value);
       $quotient: $quotient + 1;
     }
     $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
+    $factor: $factor * 0.1;
     $remainder: $remainder * 10;
     $precision: $precision - 1;
     @if ($precision < 0 and $remainder >= $divisor * 5) {
@@ -86,9 +96,11 @@ $rfs-base-value-unit: unit($rfs-base-value);
     "px": 1px,
     "rem": 1rem,
     "em": 1em,
-    "%": 1%
+    "%": 1%,
   );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+  @if (
+    $dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)
+  ) {
     $result: $result * map-get($unit-map, $dividend-unit);
   }
   @return $result;
@@ -97,9 +109,11 @@ $rfs-base-value-unit: unit($rfs-base-value);
 // Remove px-unit from $rfs-base-value for calculations
 @if $rfs-base-value-unit == px {
   $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
-}
-@else if $rfs-base-value-unit == rem {
-  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
+} @else if $rfs-base-value-unit == rem {
+  $rfs-base-value: divide(
+    $rfs-base-value,
+    divide($rfs-base-value * 0 + 1, $rfs-rem-value)
+  );
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
@@ -108,15 +122,30 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 // Remove unit from $rfs-breakpoint for calculations
 @if $rfs-breakpoint-unit-cache == px {
   $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
-}
-@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
-  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
+} @else if
+  $rfs-breakpoint-unit-cache ==
+  rem or
+  $rfs-breakpoint-unit-cache ==
+  "em"
+{
+  $rfs-breakpoint: divide(
+    $rfs-breakpoint,
+    divide($rfs-breakpoint * 0 + 1, $rfs-rem-value)
+  );
 }
 
 // Calculate the media query value
-$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
+$rfs-mq-value: if(
+  $rfs-breakpoint-unit == px,
+  #{$rfs-breakpoint}px,
+  #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}
+);
 $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
-$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
+$rfs-mq-property-height: if(
+  $rfs-mode == max-media-query,
+  max-height,
+  min-height
+);
 
 // Internal mixin used to determine which media query needs to be used
 @mixin _rfs-media-query {
@@ -125,14 +154,12 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
       @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
         @content;
       }
-    }
-    @else {
+    } @else {
       @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
         @content;
       }
     }
-  }
-  @else {
+  } @else {
     @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
       @content;
     }
@@ -148,41 +175,37 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
     &.disable-rfs {
       @content;
     }
-  }
-  @else if $rfs-class == enable and $rfs-mode == min-media-query {
+  } @else if $rfs-class == enable and $rfs-mode == min-media-query {
     .enable-rfs &,
     &.enable-rfs {
       @content;
     }
-  }
-  @else {
+  } @else {
     @content;
   }
 }
 
 // Internal mixin that adds enable classes to the selector if needed.
 @mixin _rfs-media-query-rule {
-
   @if $rfs-class == enable {
     @if $rfs-mode == min-media-query {
       @content;
     }
 
-    @include _rfs-media-query {
+    @include _rfs-media-query() {
       .enable-rfs &,
       &.enable-rfs {
         @content;
       }
     }
-  }
-  @else {
+  } @else {
     @if $rfs-class == disable and $rfs-mode == min-media-query {
       .disable-rfs &,
       &.disable-rfs {
         @content;
       }
     }
-    @include _rfs-media-query {
+    @include _rfs-media-query() {
       @content;
     }
   }
@@ -191,30 +214,39 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 // Helper function to get the formatted non-responsive value
 @function rfs-value($values) {
   // Convert to list
-  $values: if(type-of($values) != list, ($values,), $values);
+  $values: if(type-of($values) != list, ($values), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
-    }
-    @else {
+      $val: $val + " 0";
+    } @else {
       // Cache $value unit
       $unit: if(type-of($value) == "number", unit($value), false);
 
       @if $unit == px {
         // Convert to rem if needed
-        $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
-      }
-      @else if $unit == rem {
+        $val: $val +
+          " " +
+          if(
+            $rfs-unit == rem,
+            #{divide($value, $value * 0 + $rfs-rem-value)}rem,
+            $value
+          );
+      } @else if $unit == rem {
         // Convert to px if needed
-        $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
-      }
-      @else {
+        $val: $val +
+          " " +
+          if(
+            $rfs-unit == px,
+            #{divide($value, $value * 0 + 1) * $rfs-rem-value}px,
+            $value
+          );
+      } @else {
         // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
-        $val: $val + ' ' + $value;
+        $val: $val + " " + $value;
       }
     }
   }
@@ -226,42 +258,51 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 // Helper function to get the responsive value calculated by RFS
 @function rfs-fluid-value($values) {
   // Convert to list
-  $values: if(type-of($values) != list, ($values,), $values);
+  $values: if(type-of($values) != list, ($values), $values);
 
-  $val: '';
+  $val: "";
 
   // Loop over each value and calculate value
   @each $value in $values {
     @if $value == 0 {
-      $val: $val + ' 0';
-    }
-
-    @else {
+      $val: $val + " 0";
+    } @else {
       // Cache $value unit
       $unit: if(type-of($value) == "number", unit($value), false);
 
       // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
       @if not $unit or $unit != px and $unit != rem {
-        $val: $val + ' ' + $value;
-      }
-
-      @else {
+        $val: $val + " " + $value;
+      } @else {
         // Remove unit from $value for calculations
-        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
+        $value: divide(
+          $value,
+          $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value))
+        );
 
         // Only add the media query if the value is greater than the minimum value
         @if abs($value) <= $rfs-base-value or not $enable-rfs {
-          $val: $val + ' ' +  if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
-        }
-        @else {
+          $val: $val +
+            " " +
+            if(
+              $rfs-unit == rem,
+              #{divide($value, $rfs-rem-value)}rem,
+              #{$value}px
+            );
+        } @else {
           // Calculate the minimum value
-          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
+          $value-min: $rfs-base-value +
+            divide(abs($value) - $rfs-base-value, $rfs-factor);
 
           // Calculate difference between $value and the minimum value
           $value-diff: abs($value) - $value-min;
 
           // Base value formatting
-          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
+          $min-width: if(
+            $rfs-unit == rem,
+            #{divide($value-min, $rfs-rem-value)}rem,
+            #{$value-min}px
+          );
 
           // Use negative value if needed
           $min-width: if($value < 0, -$min-width, $min-width);
@@ -270,10 +311,18 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
           $variable-unit: if($rfs-two-dimensional, vmin, vw);
 
           // Calculate the variable width between 0 and $rfs-breakpoint
-          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
+          $variable-width: #{divide(
+              $value-diff * 100,
+              $rfs-breakpoint
+            )}#{$variable-unit};
 
           // Return the calculated value
-          $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
+          $val: $val +
+            " calc(" +
+            $min-width +
+            if($value < 0, " - ", " + ") +
+            $variable-width +
+            ")";
         }
       }
     }
@@ -287,22 +336,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
 @mixin rfs($values, $property: font-size) {
   @if $values != null {
     $val: rfs-value($values);
-    $fluidVal: rfs-fluid-value($values);
+    $fluid-val: rfs-fluid-value($values);
 
     // Do not print the media query if responsive & non-responsive values are the same
-    @if $val == $fluidVal {
+    @if $val == $fluid-val {
       #{$property}: $val;
-    }
-    @else {
-      @include _rfs-rule {
-        #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
+    } @else {
+      @include _rfs-rule() {
+        #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val);
 
         // Include safari iframe resize fix if needed
         min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
       }
 
-      @include _rfs-media-query-rule {
-        #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
+      @include _rfs-media-query-rule() {
+        #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val);
       }
     }
   }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_accordion.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_accordion.scss
index 80c66168..c913cd24 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_accordion.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_accordion.scss
@@ -26,13 +26,6 @@
   }
 }
 
-.accordion.accordion-borderless,
-.accordion.accordion-flush {
-  --#{$prefix}accordion-bg: transparent;
-
-  background-color: var(--#{$prefix}accordion-bg);
-}
-
 .accordion-borderless {
   --#{$prefix}accordion-borderless-btn-border-radius: #{$accordion-borderless-button-border-radius};
   --#{$prefix}accordion-borderless-btn-bg: #{$accordion-borderless-button-bgc};
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_alert.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_alert.scss
index 1232da4d..f986a02b 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_alert.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_alert.scss
@@ -19,20 +19,20 @@
   position: relative;
 }
 
-@each $color, $value in $alerts {
+@each $color, $value in $theme-colors {
   .alert-#{$color} {
-    background-color: map-get($value, background-color);
-    color: map-get($value, text-color);
+    background-color: var(--#{$prefix}#{$color}-bg-subtle);
+    color: var(--#{$prefix}#{$color}-text-emphasis);
 
     i {
-      color: map-get($value, icon-color);
+      color: var(--#{$prefix}#{$color}-text-emphasis);
     }
 
     .alert-link {
-      color: map-get($value, text-color);
+      color: var(--#{$prefix}#{$color}-text-emphasis);
 
       &:hover {
-        color: shift-color(map-get($value, text-color), 20%);
+        color: rgba(var(--#{$prefix}#{$color}-text-emphasis), var(--#{$prefix}text-hover-opacity));
       }
     }
   }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_badge.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_badge.scss
index d6961691..e8123d55 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_badge.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_badge.scss
@@ -39,13 +39,13 @@
 }
 
 // Contextual colors options
-@each $color, $value in $badges {
+@each $color, $value in $theme-colors {
   .badge-#{$color} {
-    background-color: map-get($value, background-color);
-    color: map-get($value, text-color);
+    background-color: var(--#{$prefix}#{$color}-bg-subtle);
+    color: var(--#{$prefix}#{$color}-text-emphasis);
 
     i {
-      color: map-get($value, icon-color);
+      color: var(--#{$prefix}#{$color}-text-emphasis);
     }
   }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_buttons.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_buttons.scss
index 95a9c233..1e857443 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_buttons.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_buttons.scss
@@ -165,27 +165,64 @@
     box-shadow: none;
   }
 }
-
 // scss-docs-end btn-secondary
 
 // scss-docs-start btn-variant-loop
-@each $color, $value in $buttons {
+@each $color, $value in $theme-colors {
   .btn-#{$color} {
-    @include button-variant(
-      map-get($value, 'background-color'),
-      map-get($value, 'text-color'),
-      $btn-contextual-box-shadow map-get($value, 'shadow-color'),
-      shade-color(map-get($value, 'background-color'), $btn-hover-bg-shade-amount),
-      map-get($value, 'text-color'),
-      shade-color(map-get($value, 'background-color'), $btn-focus-bg-shade-amount),
-      map-get($value, 'text-color'),
-      shade-color(map-get($value, 'background-color'), $btn-active-bg-shade-amount),
-      map-get($value, 'text-color')
-    );
+    @if $color == 'secondary' {
+      @include button-variant(
+        tint-color($primary, $btn-secondary-bg-tint-amount),
+        $value,
+        $color: shade-color($primary, $btn-secondary-color-shade-amount),
+        $hover-background:
+          shade-color(
+            tint-color($primary, $btn-secondary-bg-tint-amount),
+            $btn-hover-bg-shade-amount
+          ),
+        $focus-background:
+          shade-color(
+            tint-color($primary, $btn-secondary-bg-tint-amount),
+            $btn-hover-bg-shade-amount
+          ),
+        $active-background:
+          shade-color(
+            tint-color($primary, $btn-secondary-bg-tint-amount),
+            $btn-hover-bg-shade-amount
+          )
+      );
+    } @else if $color == 'light' {
+      @include button-variant(
+        $light-bg-subtle,
+        $light-border-subtle,
+        $color: $light-text-emphasis,
+        $hover-background: shade-color($light-bg-subtle, $btn-hover-bg-shade-amount),
+        $hover-border: shade-color($light-border-subtle, $btn-hover-border-shade-amount),
+        $active-background: shade-color($light-bg-subtle, $btn-active-bg-shade-amount),
+        $active-border: shade-color($light-border-subtle, $btn-active-border-shade-amount)
+      );
+    } @else if $color == 'dark' {
+      @include button-variant(
+        $dark-bg-subtle,
+        $dark-border-subtle,
+        $color: $dark-text-emphasis,
+        $hover-background: tint-color($dark-bg-subtle, $btn-hover-bg-tint-amount),
+        $hover-border: tint-color($dark-border-subtle, $btn-hover-border-tint-amount),
+        $active-background: tint-color($dark-bg-subtle, $btn-active-bg-tint-amount),
+        $active-border: tint-color($dark-border-subtle, $btn-active-border-tint-amount)
+      );
+    } @else {
+      @include button-variant($value, $value);
+    }
 
-    --#{$prefix}btn-box-shadow-state: #{$btn-contextual-box-shadow-state-first-part
-        rgba(map-get($value, shadow-color), 0.3),
-      $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2)};
+    @if $color == 'secondary' {
+      --#{$prefix}btn-box-shadow-state: transparent;
+    } @else {
+      --#{$prefix}btn-box-shadow-state: #{$btn-contextual-box-shadow-state-first-part
+          rgba(shade-color($value, $btn-hover-bg-shade-amount), 0.3),
+        $btn-contextual-box-shadow-state-second-part
+          rgba(shade-color($value, $btn-hover-bg-shade-amount), 0.2)};
+    }
 
     :not(.btn-check) + &:hover,
     &:first-child:hover,
@@ -223,43 +260,75 @@
       box-shadow: var(--#{$prefix}btn-box-shadow);
     }
   }
+
+  [data-mdb-theme='dark'] .btn-#{$color} {
+    @if $color != 'secondary' {
+      box-shadow: 0 4px 9px -4px rgba($black, 0.35);
+      &:hover,
+      &:active,
+      &:focus {
+        box-shadow: 0 4px 18px -2px rgba($black, 0.7);
+      }
+    }
+  }
 }
 
 // scss-docs-end btn-variant-loop
 
 // scss-docs-start btn-outline-variant-loop
-@each $color, $value in $buttons-outline {
+@each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
-    @include button-outline-variant(
-      map-get($value, 'text-color'),
-      shade-color(map-get($value, 'text-color'), $btn-hover-bg-shade-amount),
-      shade-color(map-get($value, 'text-color'), $btn-focus-bg-shade-amount),
-      shade-color(map-get($value, 'text-color'), $btn-active-bg-shade-amount)
-    );
-
-    --#{$prefix}btn-border-color: #{map-get($value, 'border-color')};
-    --#{$prefix}btn-focus-border-color: #{shade-color(
-        map-get($value, 'border-color'),
-        $btn-focus-bg-shade-amount
-      )};
-    --#{$prefix}btn-hover-border-color: #{shade-color(
-        map-get($value, 'border-color'),
-        $btn-hover-bg-shade-amount
-      )};
-
-    border-color: var(--#{$prefix}btn-border-color);
+    @if $color == 'secondary' {
+      @include button-outline-variant(
+        shade-color($primary, $btn-secondary-color-shade-amount),
+        shade-color($primary, $btn-secondary-color-shade-amount),
+        shade-color($primary, $btn-secondary-color-shade-amount),
+        shade-color($primary, $btn-secondary-color-shade-amount)
+      );
+
+      --#{$prefix}btn-outline-border-color: #{tint-color($primary, $btn-secondary-bg-tint-amount)};
+      --#{$prefix}btn-outline-focus-border-color: #{shade-color(
+          tint-color($primary, $btn-secondary-bg-tint-amount),
+          $btn-focus-bg-shade-amount
+        )};
+      --#{$prefix}btn-outline-hover-border-color: #{shade-color(
+          tint-color($primary, $btn-secondary-bg-tint-amount),
+          $btn-hover-bg-shade-amount
+        )};
+
+      border-color: var(--#{$prefix}btn-outline-border-color);
+    } @else {
+      @include button-outline-variant(
+        $value,
+        shade-color($value, $btn-hover-bg-shade-amount),
+        shade-color($value, $btn-focus-bg-shade-amount),
+        shade-color($value, $btn-active-bg-shade-amount)
+      );
+
+      --#{$prefix}btn-outline-border-color: #{$value};
+      --#{$prefix}btn-outline-focus-border-color: #{shade-color(
+          $value,
+          $btn-outline-focus-bg-shade-amount
+        )};
+      --#{$prefix}btn-outline-hover-border-color: #{shade-color(
+          $value,
+          $btn-outline-hover-bg-shade-amount
+        )};
+
+      border-color: var(--#{$prefix}btn-outline-border-color);
+    }
 
     :not(.btn-check) + &:hover,
     &:first-child:hover,
     &:focus-visible,
     &:hover {
-      border-color: var(--#{$prefix}btn-hover-border-color);
+      border-color: var(--#{$prefix}btn-outline-hover-border-color);
     }
 
     .btn-check:focus-visible + &,
     .btn-check:focus + &,
     &:focus {
-      border-color: var(--#{$prefix}btn-focus-border-color);
+      border-color: var(--#{$prefix}btn-outline-focus-border-color);
     }
 
     .btn-check:checked + &,
@@ -267,17 +336,53 @@
     &:active,
     &.active,
     &.show {
-      border-color: var(--#{$prefix}btn-active-border-color);
+      border-color: var(--#{$prefix}btn-outline-active-border-color);
 
       &:focus {
-        border-color: var(--#{$prefix}btn-focus-border-color);
+        border-color: var(--#{$prefix}btn-outline-focus-border-color);
       }
     }
 
     &:disabled,
     &.disabled,
     fieldset:disabled & {
-      border-color: var(--#{$prefix}btn-border-color);
+      border-color: var(--#{$prefix}btn-outline-border-color);
+    }
+  }
+
+  [data-mdb-theme='dark'] .btn-outline-#{$color} {
+    @if $color == 'secondary' {
+      @include button-outline-variant(
+        tint-color($primary, 70%),
+        tint-color($primary, 60%),
+        tint-color($primary, 60%),
+        tint-color($primary, 60%),
+        shade-color($primary, 60%),
+        shade-color($primary, 60%),
+        shade-color($primary, 60%)
+      );
+
+      --#{$prefix}btn-outline-border-color: #{tint-color($primary, 50%)};
+      --#{$prefix}btn-outline-focus-border-color: #{shade-color(
+          tint-color($primary, 50%),
+          $btn-focus-bg-shade-amount
+        )};
+      --#{$prefix}btn-outline-hover-border-color: #{shade-color(
+          tint-color($primary, 50%),
+          $btn-hover-bg-shade-amount
+        )};
+
+      border-color: var(--#{$prefix}btn-outline-border-color);
+    } @else {
+      @include button-outline-variant(
+        tint-color($value, 20%),
+        shade-color($value, $btn-hover-bg-shade-amount),
+        shade-color($value, $btn-focus-bg-shade-amount),
+        shade-color($value, $btn-active-bg-shade-amount),
+        shade-color($value, 70%),
+        shade-color($value, 70%),
+        shade-color($value, 70%)
+      );
     }
   }
 }
@@ -389,6 +494,28 @@
   }
 }
 
+[data-mdb-theme='dark'] .btn-secondary {
+  --#{$prefix}btn-bg: #{tint-color($primary, 60%)};
+  --#{$prefix}btn-hover-bg: #{tint-color($primary, 50%)};
+  --#{$prefix}btn-focus-bg: #{tint-color($primary, 50%)};
+  --#{$prefix}btn-active-bg: #{tint-color($primary, 50%)};
+}
+
+[data-mdb-theme='dark'] .btn-link {
+  --#{$prefix}btn-color: #{$secondary};
+  --#{$prefix}btn-hover-color: #{tint-color($secondary, 30%)};
+  --#{$prefix}btn-hover-bg: #{shade-color($secondary, 60%)};
+  --#{$prefix}btn-focus-color: #{tint-color($secondary, 30%)};
+  --#{$prefix}btn-active-color: #{tint-color($secondary, 30%)};
+}
+
+[data-mdb-theme='dark'] .btn-tertiary {
+  --#{$prefix}btn-color: #{$secondary};
+  --#{$prefix}btn-hover-color: #{tint-color($secondary, 30%)};
+  --#{$prefix}btn-focus-color: #{tint-color($secondary, 30%)};
+  --#{$prefix}btn-active-color: #{tint-color($secondary, 30%)};
+}
+
 //
 // Button Sizes
 //
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_carousel.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_carousel.scss
index cd601f05..d278a2f7 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_carousel.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_carousel.scss
@@ -52,7 +52,8 @@
     @include transition($carousel-indicator-transition);
   }
 }
-.carousel-dark {
+.carousel-dark,
+[data-mdb-theme='dark'] {
   .carousel-indicators button {
     background-color: $carousel-dark-indicator-active-bg;
   }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_dropdown.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_dropdown.scss
index 4d65dbb3..a85f1888 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_dropdown.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_dropdown.scss
@@ -86,6 +86,10 @@
     color: var(--#{$prefix}dropdown-state-color);
     background-color: var(--#{$prefix}dropdown-state-background-color);
   }
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .hidden-arrow {
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_list-group.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_list-group.scss
index 69520420..a9a1a978 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_list-group.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_list-group.scss
@@ -56,13 +56,13 @@
   }
 }
 
-@each $color, $value in $alerts {
+@each $color, $value in $theme-colors {
   .list-group-item-#{$color} {
-    background-color: map-get($value, background-color);
-    color: map-get($value, text-color);
+    background-color: var(--#{$prefix}#{$color}-bg-subtle);
+    color: var(--#{$prefix}#{$color}-text-emphasis);
 
     i {
-      color: map-get($value, icon-color);
+      color: var(--#{$prefix}#{$color}-link-emphasis);
     }
   }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_navbar.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_navbar.scss
index 847a3a9f..eac43a71 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_navbar.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_navbar.scss
@@ -48,3 +48,17 @@
     background-image: none;
   }
 }
+
+.navbar-dark,
+.navbar[data-mdb-theme='dark'] {
+  // scss-docs-start navbar-dark-css-vars
+  --#{$prefix}navbar-color: #{$navbar-dark-color};
+  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
+  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
+  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
+  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+  // scss-docs-end navbar-dark-css-vars
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_pagination.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_pagination.scss
index a668cd75..fcf1f08f 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_pagination.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_pagination.scss
@@ -5,7 +5,6 @@
 .pagination {
   // scss-docs-start pagination-css-vars
   --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
-  --#{$prefix}pagination-active-box-shadow: #{$pagination-active-box-shadow};
   --#{$prefix}pagination-active-transition: #{$pagination-active-transition};
   --#{$prefix}pagination-active-font-weight: #{$pagination-active-font-weight};
   --#{$prefix}pagination-circle-border-radius: #{$pagination-circle-border-radius};
@@ -30,7 +29,6 @@
   &.active,
   .active > & {
     border: 0;
-    box-shadow: var(--#{$prefix}pagination-active-box-shadow);
     transition: var(--#{$prefix}pagination-active-transition);
     font-weight: var(--#{$prefix}pagination-active-font-weight);
   }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_root.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_root.scss
index 2d39287f..6e28d795 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_root.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_root.scss
@@ -2,7 +2,59 @@
 // Root and body
 //
 
-:root {
+:root,
+[data-mdb-theme='light'] {
   --mdb-font-roboto: #{inspect($font-family-roboto)};
   --mdb-bg-opacity: 1;
+  --mdb-text-hover-opacity: 0.8;
+
+  --#{$prefix}surface-color: #{$surface-color};
+  --#{$prefix}surface-color-rgb: #{to-rgb($surface-color)};
+  --#{$prefix}surface-bg: #{$surface-bg};
+  --#{$prefix}surface-inverted-color: #{$surface-inverted-color};
+  --#{$prefix}surface-inverted-color-rgb: #{to-rgb($surface-inverted-color)};
+  --#{$prefix}surface-inverted-bg: #{$surface-inverted-bg};
+  --#{$prefix}divider-color: #{$divider-color};
+  --#{$prefix}divider-blurry-color: #{$divider-blurry-color};
+  --#{$prefix}highlight-bg-color: #{$highlight-bg-color};
+  --#{$prefix}scrollbar-rail-bg: #{$scrollbar-rail-bg};
+  --#{$prefix}scrollbar-thumb-bg: #{$scrollbar-thumb-bg};
+  --#{$prefix}picker-header-bg: #{$picker-header-bg};
+  --#{$prefix}timepicker-clock-face-bg: #{$timepicker-clock-face-bg};
+  --#{$prefix}sidenav-backdrop-opacity: #{$sidenav-backdrop-opacity};
+  --#{$prefix}form-control-border-color: #{$form-control-border-color};
+  --#{$prefix}form-control-label-color: #{$form-control-label-color};
+  --#{$prefix}form-control-disabled-bg: #{$form-control-disabled-bg};
+  --#{$prefix}box-shadow-color: #{$box-shadow-color};
+  --#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color)};
+  --#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg};
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+
+    // scss-docs-start root-dark-mode-vars
+    --#{$prefix}surface-color: #{$surface-color-dark};
+    --#{$prefix}surface-color-rgb: #{to-rgb($surface-color-dark)};
+    --#{$prefix}surface-bg: #{$surface-bg-dark};
+    --#{$prefix}surface-inverted-color: #{$surface-inverted-color-dark};
+    --#{$prefix}surface-inverted-color-rgb: #{to-rgb($surface-inverted-color-dark)};
+    --#{$prefix}surface-inverted-bg: #{$surface-inverted-bg-dark};
+    --#{$prefix}divider-color: #{$divider-color-dark};
+    --#{$prefix}divider-blurry-color: #{$divider-blurry-color-dark};
+    --#{$prefix}highlight-bg-color: #{$highlight-bg-color-dark};
+    --#{$prefix}scrollbar-rail-bg: #{$scrollbar-rail-bg-dark};
+    --#{$prefix}scrollbar-thumb-bg: #{$scrollbar-thumb-bg-dark};
+    --#{$prefix}picker-header-bg: #{$picker-header-bg-dark};
+    --#{$prefix}timepicker-clock-face-bg: #{$timepicker-clock-face-bg-dark};
+    --#{$prefix}sidenav-backdrop-opacity: #{$sidenav-backdrop-opacity-dark};
+    --#{$prefix}form-control-border-color: #{$form-control-border-color-dark};
+    --#{$prefix}form-control-label-color: #{$form-control-label-color-dark};
+    --#{$prefix}form-control-disabled-bg: #{$form-control-disabled-bg-dark};
+    --#{$prefix}box-shadow-color: #{$box-shadow-color-dark};
+    --#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color-dark)};
+    --#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg-dark};
+    // scss-docs-end root-dark-mode-vars
+  }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_tables.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_tables.scss
index cf3ab28e..8d036936 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_tables.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_tables.scss
@@ -36,7 +36,7 @@
 }
 
 .table-group-divider {
-  border-top: (2 * $table-border-width) solid;
+  border-top: calc(2 * $table-border-width) solid;
   border-top-color: inherit;
 }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss
index 8c1ae520..4854b9e2 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss
@@ -8,6 +8,8 @@
   --#{$prefix}toast-btn-close-width: #{$toast-btn-close-width};
   --#{$prefix}toast-btn-close-mr: #{$toast-btn-close-mr};
   --#{$prefix}toast-btn-close-ml: #{$toast-btn-close-ml};
+  --#{$prefix}toast-bg: #{$toast-background-color};
+  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
   // scss-docs-end toast-css-vars
 
   border: 0;
@@ -55,14 +57,14 @@
 }
 // Additional MDB Angular styles
 
-@each $color, $value in $toasts {
+@each $color, $value in $theme-colors {
   .toast-#{$color} {
-    background-color: map-get($value, background-color);
-    color: map-get($value, text-color);
-    border-color: map-get($value, border-color);
+    background-color: var(--#{$prefix}#{$color}-bg-subtle);
+    color: var(--#{$prefix}#{$color}-text-emphasis);
+    border-color: var(--#{$prefix}#{$color}-border-subtle);
 
     i {
-      color: map-get($value, icon-color);
+      color: var(--#{$prefix}#{$color}-text-emphasis);
     }
   }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_type.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_type.scss
index f4015aa8..ce66965a 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_type.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_type.scss
@@ -13,10 +13,10 @@
   }
 }
 
-@each $color, $value in $note {
+@each $color, $value in $theme-colors {
   .note-#{$color} {
-    background-color: map-get($value, background-color);
-    border-color: map-get($value, border-color);
+    background-color: var(--#{$prefix}#{$color}-bg-subtle);
+    color: var(--#{$prefix}#{$color}-text-emphasis);
   }
 }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_variables-dark.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_variables-dark.scss
new file mode 100644
index 00000000..08e65253
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_variables-dark.scss
@@ -0,0 +1,78 @@
+// Dark color mode variables
+//
+// Custom variables for the `[data-mdb-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+
+// scss-docs-start theme-text-variables
+$primary-text-emphasis-dark: tint-color($primary, 20%) !default;
+$secondary-text-emphasis-dark: tint-color($secondary, 60%) !default;
+$success-text-emphasis-dark: tint-color($success, 40%) !default;
+$info-text-emphasis-dark: tint-color($info, 30%) !default;
+$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark: tint-color($danger, 20%) !default;
+$light-text-emphasis-dark: $gray-100 !default;
+$dark-text-emphasis-dark: $gray-200 !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark: shade-color($success, 80%) !default;
+$info-bg-subtle-dark: shade-color($info, 80%) !default;
+$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
+$light-bg-subtle-dark: $gray-800 !default;
+$dark-bg-subtle-dark: $gray-900 !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$primary-border-subtle-dark: shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
+$success-border-subtle-dark: shade-color($success, 40%) !default;
+$info-border-subtle-dark: shade-color($info, 40%) !default;
+$warning-border-subtle-dark: shade-color($warning, 40%) !default;
+$danger-border-subtle-dark: shade-color($danger, 40%) !default;
+$light-border-subtle-dark: $gray-700 !default;
+$dark-border-subtle-dark: $gray-800 !default;
+// scss-docs-end theme-border-subtle-variables
+
+$body-color-dark: $white !default;
+$body-bg-dark: #303030 !default;
+$body-secondary-bg-dark: $gray-800 !default;
+$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
+$border-color-dark: rgba(255, 255, 255, 0.12) !default;
+$border-color-translucent-dark: rgba($white, 0.15) !default;
+
+// Global MDB dark theme variables
+
+// scss-docs-start mdb-global-dark-theme-variables
+$surface-color-dark: $white !default;
+$surface-bg-dark: #424242 !default;
+$surface-inverted-color-dark: $white !default;
+$surface-inverted-bg-dark: #757575 !default;
+$divider-color-dark: rgba(255, 255, 255, 0.12) !default;
+$divider-blurry-color-dark: hsl(0, 0%, 70%) !default;
+$highlight-bg-color-dark: tint-color($gray-900, 10%) !default;
+$scrollbar-rail-bg-dark: $gray-500 !default;
+$scrollbar-thumb-bg-dark: $gray-200 !default;
+$picker-header-bg-dark: #323232 !default;
+$timepicker-clock-face-bg-dark: $gray-700 !default;
+$sidenav-backdrop-opacity-dark: 0.5 !default;
+$form-control-border-color-dark: rgba(255, 255, 255, 0.7) !default;
+$form-control-label-color-dark: $gray-400 !default;
+$form-control-disabled-bg-dark: $gray-700 !default;
+$box-shadow-color-dark: $black !default;
+$stepper-mobile-bg-dark: $body-tertiary-bg-dark !default;
+// scss-docs-start mdb-global-dark-theme-variables
+
+// Accordion
+
+// scss-docs-start accordion-variables
+$accordion-icon-color-dark: $surface-color-dark !default;
+$accordion-icon-active-color-dark: $primary !default;
+// scss-docs-end accordion-variables
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss
index 65efbda8..1b607c61 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss
@@ -599,7 +599,7 @@ $blue-grays: (
 // scss-docs-start color-variables
 $red: $red-500 !default;
 $pink: $pink-500 !default;
-$purple: purple-500 !default;
+$purple: $purple-500 !default;
 $indigo: $indigo-500 !default;
 $blue: $blue-500 !default;
 $cyan: $cyan-500 !default;
@@ -628,6 +628,12 @@ $colors: (
 ) !default;
 // scss-docs-end colors-map
 
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+$min-contrast-ratio: 2 !default;
+
 // scss-docs-start theme-color-variables
 $primary: #3b71ca !default;
 $secondary: #9fa6b2 !default;
@@ -652,6 +658,39 @@ $theme-colors: (
 ) !default;
 // scss-docs-end theme-colors-map
 
+// scss-docs-start theme-text-variables
+$primary-text-emphasis: shade-color($primary, 20%) !default;
+$secondary-text-emphasis: shade-color($secondary, 60%) !default;
+$success-text-emphasis: shade-color($success, 40%) !default;
+$info-text-emphasis: shade-color($info, 30%) !default;
+$warning-text-emphasis: shade-color($warning, 40%) !default;
+$danger-text-emphasis: shade-color($danger, 20%) !default;
+$light-text-emphasis: $gray-700 !default;
+$dark-text-emphasis: $gray-200 !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle: tint-color($primary, 85%) !default;
+$secondary-bg-subtle: tint-color($secondary, 85%) !default;
+$success-bg-subtle: tint-color($success, 85%) !default;
+$info-bg-subtle: tint-color($info, 85%) !default;
+$warning-bg-subtle: tint-color($warning, 85%) !default;
+$danger-bg-subtle: tint-color($danger, 85%) !default;
+$light-bg-subtle: $gray-100 !default;
+$dark-bg-subtle: $gray-900 !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$primary-border-subtle: tint-color($primary, 60%) !default;
+$secondary-border-subtle: tint-color($secondary, 60%) !default;
+$success-border-subtle: tint-color($success, 60%) !default;
+$info-border-subtle: tint-color($info, 60%) !default;
+$warning-border-subtle: tint-color($warning, 60%) !default;
+$danger-border-subtle: tint-color($danger, 60%) !default;
+$light-border-subtle: $gray-200 !default;
+$dark-border-subtle: $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
@@ -669,6 +708,7 @@ $prefix: $variable-prefix !default;
 // Settings for the `<body>` element.
 
 $body-color: $gray-800 !default;
+$body-tertiary-bg: #fbfbfb !default;
 
 // Links
 //
@@ -707,29 +747,41 @@ $border-radius-lg: 0.5rem !default;
 // scss-docs-start box-shadow-variables
 $box-shadow-0: none !default;
 
-$box-shadow-1: 0 0px 2px 0 rgb(0 0 0 / 7%), 0 1px 1px 0 rgb(0 0 0 / 4%) !default;
-$box-shadow-2: 0 0px 3px 0 rgb(0 0 0 / 7%), 0 2px 2px 0 rgb(0 0 0 / 4%) !default;
-$box-shadow-3: 0 2px 6px -1px rgb(0 0 0 / 7%), 0 6px 18px -1px rgb(0 0 0 / 4%) !default;
-$box-shadow-4: 0 2px 15px -3px rgb(0 0 0 / 7%), 0 10px 20px -2px rgb(0 0 0 / 4%) !default;
-$box-shadow-5: 0 2px 25px -5px rgb(0 0 0 / 7%), 0 25px 21px -5px rgb(0 0 0 / 4%) !default;
-$box-shadow-6: 0 2px 35px -12px rgb(0 0 0 / 21%), 0 50px 40px -5px rgb(0 0 0 / 4%) !default;
-
-$box-shadow-1-soft: 0 1px 5px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-2-soft: 0 2px 10px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-3-soft: 0 5px 15px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-4-soft: 0 10px 20px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-5-soft: 0 15px 30px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-6-soft: 0 20px 40px 0 rgba(0, 0, 0, 0.05) !default;
-
-$box-shadow-1-strong: 0 0px 2px 0 rgb(0 0 0 / 16%), 0 1px 1px 0 rgb(0 0 0 / 10%) !default;
-$box-shadow-2-strong: 0 0px 3px 0 rgb(0 0 0 / 16%), 0 2px 2px 0 rgb(0 0 0 / 10%) !default;
-$box-shadow-3-strong: 0 2px 6px -1px rgb(0 0 0 / 16%), 0 6px 18px -1px rgb(0 0 0 / 10%) !default;
-$box-shadow-4-strong: 0 2px 15px -3px rgb(0 0 0 / 16%), 0 10px 20px -2px rgb(0 0 0 / 10%) !default;
-$box-shadow-5-strong: 0 2px 25px -5px rgb(0 0 0 / 16%), 0 25px 21px -5px rgb(0 0 0 / 10%) !default;
-$box-shadow-6-strong: 0 2px 35px -12px rgb(0 0 0 / 26%), 0 50px 40px -5px rgb(0 0 0 / 10%) !default;
-
-$box-shadow-3-top: 0 -10px 20px 0 rgba(0, 0, 0, 0.05) !default;
-$box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !default;
+$box-shadow-1: 0 0px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
+  0 1px 1px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
+$box-shadow-2: 0 0px 3px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
+  0 2px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
+$box-shadow-3: 0 2px 6px -1px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
+  0 6px 18px -1px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
+$box-shadow-4: 0 2px 15px -3px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
+  0 10px 20px -2px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
+$box-shadow-5: 0 2px 25px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
+  0 25px 21px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
+$box-shadow-6: 0 2px 35px -12px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.21),
+  0 50px 40px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.04) !default;
+
+$box-shadow-1-soft: 0 1px 5px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
+$box-shadow-2-soft: 0 2px 10px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
+$box-shadow-3-soft: 0 5px 15px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
+$box-shadow-4-soft: 0 10px 20px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
+$box-shadow-5-soft: 0 15px 30px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
+$box-shadow-6-soft: 0 20px 40px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
+
+$box-shadow-1-strong: 0 0px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
+  0 1px 1px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
+$box-shadow-2-strong: 0 0px 3px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
+  0 2px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
+$box-shadow-3-strong: 0 2px 6px -1px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
+  0 6px 18px -1px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
+$box-shadow-4-strong: 0 2px 15px -3px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
+  0 10px 20px -2px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
+$box-shadow-5-strong: 0 2px 25px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.16),
+  0 25px 21px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
+$box-shadow-6-strong: 0 2px 35px -12px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.26),
+  0 50px 40px -5px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
+
+$box-shadow-3-top: 0 -10px 20px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
+$box-shadow-inner: inset 0 2px 4px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.06) !default;
 // scss-docs-end box-shadow-variables
 
 // scss-docs-start standard-shadows-map
@@ -789,47 +841,6 @@ $note-border-radius: 5px !default;
 $note-strong-font-weight: 600 !default;
 // scss-docs-end note-variables
 
-// scss-docs-start note-colors-map
-$note: () !default;
-$note: map-merge(
-  (
-    'primary': (
-      'background-color': rgb(223, 231, 246),
-      'border-color': rgb(55, 111, 200),
-    ),
-    'secondary': (
-      'background-color': rgb(235, 237, 239),
-      'border-color': rgb(86, 94, 108),
-    ),
-    'success': (
-      'background-color': rgb(214, 240, 224),
-      'border-color': rgb(19, 150, 71),
-    ),
-    'danger': (
-      'background-color': rgb(249, 225, 229),
-      'border-color': rgb(214, 46, 74),
-    ),
-    'warning': (
-      'background-color': rgb(251, 240, 218),
-      'border-color': rgb(161, 113, 18),
-    ),
-    'info': (
-      'background-color': rgb(222, 241, 247),
-      'border-color': rgb(38, 134, 166),
-    ),
-    'light': (
-      'background-color': rgb(245, 245, 245),
-      'border-color': rgb(140, 140, 140),
-    ),
-    'dark': (
-      'background-color': rgb(51, 46, 46),
-      'border-color': rgb(232, 232, 232),
-    ),
-  ),
-  $note
-);
-// scss-docs-end note-colors-map
-
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
@@ -846,8 +857,11 @@ $table-striped-bg: rgba(0, 0, 0, 0.02) !default;
 $table-hover-transition: 0.5s !default;
 $table-hover-bg: rgba(0, 0, 0, 0.025) !default;
 $table-group-separator-color: inherit !default;
-$table-divider-color: rgba(0, 0, 0, 0.1) !default;
+$table-divider-color: currentcolor !default;
 $table-bg-scale: -80% !default;
+$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.1) !default;
+$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.025) !default;
+$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.02) !default;
 // scss-docs-end table-variables
 
 // scss-docs-start table-loop
@@ -889,8 +903,9 @@ $btn-line-height-sm: 1.5 !default;
 $btn-border-width: $border-width-alternate !default;
 
 $btn-font-weight: $font-weight-medium !default;
-$btn-box-shadow: 0 4px 9px -4px rgba($black, 0.35) !default;
-$btn-hover-box-shadow: 0 8px 9px -4px rgba($black, 0.15), 0 4px 18px 0 rgba($black, 0.1) !default;
+$btn-box-shadow: 0 4px 9px -4px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.35) !default;
+$btn-hover-box-shadow: 0 8px 9px -4px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.15),
+  0 4px 18px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.1) !default;
 $btn-focus-box-shadow: $btn-hover-box-shadow !default;
 $btn-active-box-shadow: $btn-focus-box-shadow !default;
 
@@ -908,6 +923,22 @@ $btn-hover-bg-shade-amount: 5% !default;
 $btn-focus-bg-shade-amount: 5% !default;
 $btn-active-bg-shade-amount: 10% !default;
 
+$btn-hover-bg-tint-amount: 5% !default;
+$btn-focus-bg-tint-amount: 5% !default;
+$btn-active-bg-tint-amount: 10% !default;
+
+$btn-secondary-bg-tint-amount: 85% !default;
+$btn-secondary-color-shade-amount: 30% !default;
+$btn-light-color-tint-amount: 30% !default;
+
+$btn-outline-hover-bg-tint-amount: 95% !default;
+$btn-outline-focus-bg-tint-amount: 95% !default;
+$btn-outline-active-bg-tint-amount: 95% !default;
+
+$btn-outline-hover-bg-shade-amount: 20% !default;
+$btn-outline-focus-bg-shade-amount: 20% !default;
+$btn-outline-active-bg-shade-amount: 20% !default;
+
 $btn-contextual-box-shadow: 0 4px 9px -4px !default;
 $btn-contextual-box-shadow-state-first-part: 0 8px 9px -4px !default;
 $btn-contextual-box-shadow-state-second-part: 0 4px 18px 0 !default;
@@ -968,114 +999,6 @@ $fixed-action-btn-li-margin-bottom: 1.5rem !default;
 $btn-block-margin-top: 0.5rem !default;
 // scss-docs-end btn-variables
 
-// scss-docs-start buttons-colors-map
-$buttons: () !default;
-$buttons: map-merge(
-  (
-    'primary': (
-      'background-color': $primary,
-      'text-color': $white,
-      'shadow-color': $primary,
-    ),
-    'secondary': (
-      'background-color': #e3ebf7,
-      'text-color': #285192,
-      'shadow-color': #e3ebf7,
-    ),
-    'success': (
-      'background-color': $success,
-      'text-color': $white,
-      'shadow-color': $success,
-    ),
-    'danger': (
-      'background-color': $danger,
-      'text-color': $white,
-      'shadow-color': $danger,
-    ),
-    'warning': (
-      'background-color': $warning,
-      'text-color': $white,
-      'shadow-color': $warning,
-    ),
-    'info': (
-      'background-color': $info,
-      'text-color': $white,
-      'shadow-color': $info,
-    ),
-    'light': (
-      'background-color': $light,
-      'text-color': #4f4f4f,
-      'shadow-color': $light,
-    ),
-    'dark': (
-      'background-color': $dark,
-      'text-color': $white,
-      'shadow-color': $dark,
-    ),
-    'white': (
-      'background-color': $white,
-      'text-color': $black,
-      'shadow-color': $white,
-    ),
-    'black': (
-      'background-color': $black,
-      'text-color': $white,
-      'shadow-color': $black,
-    ),
-  ),
-  $buttons
-);
-// scss-docs-end buttons-colors-map
-
-// scss-docs-start buttons-outline-colors-map
-$buttons-outline: () !default;
-$buttons-outline: map-merge(
-  (
-    'primary': (
-      'text-color': $primary,
-      'border-color': $primary,
-    ),
-    'secondary': (
-      'text-color': #285192,
-      'border-color': #e3ebf7,
-    ),
-    'success': (
-      'text-color': $success,
-      'border-color': $success,
-    ),
-    'danger': (
-      'text-color': $danger,
-      'border-color': $danger,
-    ),
-    'warning': (
-      'text-color': $warning,
-      'border-color': $warning,
-    ),
-    'info': (
-      'text-color': $info,
-      'border-color': $info,
-    ),
-    'light': (
-      'text-color': $light,
-      'border-color': $light,
-    ),
-    'dark': (
-      'text-color': $dark,
-      'border-color': $dark,
-    ),
-    'white': (
-      'text-color': $white,
-      'border-color': $white,
-    ),
-    'black': (
-      'text-color': $black,
-      'border-color': $black,
-    ),
-  ),
-  $buttons-outline
-);
-// scss-docs-end buttons-outline-colors-map
-
 // Ripple
 
 // scss-docs-start ripple-variables
@@ -1120,17 +1043,19 @@ $input-padding-bottom: $input-padding-top !default;
 $input-padding-left: 0.75rem !default;
 $input-padding-right: $input-padding-left !default;
 $input-transition: all 0.2s linear !default;
+$input-color: var(--#{$prefix}surface-color) !default;
+$input-placeholder-color: rgba(var(--#{$prefix}surface-color-rgb), 0.8) !default;
 
 $form-label-left: 0.75rem !default;
 $form-label-padding-top: 0.37rem !default;
 $form-label-transition: all 0.2s ease-out !default;
-$form-label-color: rgba(0, 0, 0, 0.6) !default;
+$form-label-color: var(--#{$prefix}form-control-label-color) !default;
 
 $input-focus-active-label-transform: translateY(-1rem) translateY(0.1rem) scale(0.8) !default;
 $input-focus-label-color: $primary !default;
 $input-focus-border-width: 0.125rem !default;
 $input-focus-border-color: $primary !default;
-$input-disabled-background-color: #e9ecef !default;
+$input-disabled-background-color: var(--#{$prefix}form-control-disabled-bg) !default;
 
 $input-font-size-lg: 1rem !default;
 $input-line-height-lg: 2.15 !default;
@@ -1142,7 +1067,7 @@ $input-font-size-sm: 0.775rem !default;
 $input-line-height-sm: 1.5 !default;
 $input-focus-active-label-transform-sm: translateY(-0.85rem) translateY(0.1rem) scale(0.8) !default;
 
-$form-notch-div-border-color: #bdbdbd !default;
+$form-notch-div-border-color: var(--#{$prefix}form-control-border-color) !default;
 $form-notch-leading-width: 0.5rem !default;
 $form-notch-leading-border-radius: 0.25rem !default;
 $form-notch-middle-max-width: 1rem !default;
@@ -1164,9 +1089,9 @@ $form-check-input-margin-left: 1.79rem !default;
 $form-check-input-radio-margin-left: 1.85rem !default;
 $form-check-input-width-md: 1.125rem !default;
 $form-check-input-height: $form-check-input-width-md !default;
-$form-check-input-background-color: $white !default;
+$form-check-input-background-color: var(--#{$prefix}body-bg) !default;
 $form-check-input-border-width: 0.125rem !default;
-$form-check-input-border-color: rgba(0, 0, 0, 0.25) !default;
+$form-check-input-border-color: var(--#{$prefix}form-control-border-color) !default;
 
 $form-check-input-before-box-shadow: 0px 0px 0px 13px transparent !default;
 $form-check-input-before-border-radius: 50% !default;
@@ -1175,7 +1100,8 @@ $form-check-input-before-height: $form-check-input-before-width !default;
 $form-check-input-before-transform: scale(0) !default;
 
 $form-check-input-hover-before-opacity: 0.04 !default;
-$form-check-input-hover-before-box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, 0.6) !default;
+$form-check-input-hover-before-box-shadow: 0px 0px 0px 13px
+  rgba(var(--#{$prefix}box-shadow-color-rgb), 0.6) !default;
 
 $form-check-input-focus-border-color: $form-check-input-border-color !default;
 $form-check-input-focus-transition: border-color 0.2s !default;
@@ -1195,7 +1121,7 @@ $form-check-input-checked-focus-before-transition: $form-check-input-focus-befor
 $form-check-input-checkbox-border-radius: 0.25rem !default;
 $form-check-input-checkbox-focus-after-width: 0.875rem !default;
 $form-check-input-checkbox-focus-after-height: $form-check-input-checkbox-focus-after-width !default;
-$form-check-input-checkbox-focus-after-background-color: $white !default;
+$form-check-input-checkbox-focus-after-background-color: var(--#{$prefix}body-bg) !default;
 $form-check-input-checkbox-checked-background-color: $primary !default;
 $form-check-input-checkbox-checked-focus-background-color: $primary !default;
 
@@ -1229,9 +1155,9 @@ $form-check-input-radio-before-height: $form-check-input-radio-before-width !def
 $form-check-input-radio-after-width: $form-check-input-radio-before-width !default;
 $form-check-input-radio-after-height: $form-check-input-radio-after-width !default;
 $form-check-input-radio-after-border-radius: $form-check-input-radio-border-radius !default;
-$form-check-input-radio-after-background-color: $white !default;
+$form-check-input-radio-after-background-color: var(--#{$prefix}body-bg) !default;
 
-$form-check-input-radio-checked-background-color: $white !default;
+$form-check-input-radio-checked-background-color: var(--#{$prefix}body-bg) !default;
 $form-check-input-radio-checked-after-border-radius: $form-check-input-radio-border-radius !default;
 $form-check-input-radio-checked-after-width: 0.625rem !default;
 $form-check-input-radio-checked-after-height: $form-check-input-radio-checked-after-width !default;
@@ -1240,25 +1166,28 @@ $form-check-input-radio-checked-after-background-color: $primary !default;
 $form-check-input-radio-checked-after-margin-top: 0.1875rem !default;
 $form-check-input-radio-checked-after-margin-left: 0.1875rem !default;
 $form-check-input-radio-checked-after-transition: border-color !default;
-$form-check-input-radio-checked-focus-background-color: $white !default;
+$form-check-input-radio-checked-focus-background-color: var(--#{$prefix}body-bg) !default;
 
 $form-switch-padding-left: 1.85rem !default;
 $form-switch-form-check-input-border-radius: 0.4375rem !default;
 $form-switch-form-check-input-width: 2rem !default;
 $form-switch-form-check-input-height: 0.875rem !default;
-$form-switch-form-check-input-background-color: rgba(0, 0, 0, 0.25) !default;
+$form-switch-form-check-input-background-color: rgba(
+  var(--#{$prefix}emphasis-color-rgb),
+  0.25
+) !default;
 $form-switch-form-check-input-margin-top: 0.35rem !default;
 $form-switch-form-check-input-margin-right: 0.7rem !default;
 
 $form-switch-form-check-input-after-border-radius: 50% !default;
 $form-switch-form-check-input-after-width: 1.25rem !default;
 $form-switch-form-check-input-after-height: $form-switch-form-check-input-after-width !default;
-$form-switch-form-check-input-after-background-color: $white !default;
+$form-switch-form-check-input-after-background-color: var(--#{$prefix}surface-bg) !default;
 $form-switch-form-check-input-after-margin-top: -0.1875rem !default;
 $form-switch-form-check-input-after-box-shadow: $box-shadow-2 !default;
 $form-switch-form-check-input-after-transition: background-color 0.2s, transform 0.2s !default;
 
-$form-switch-form-check-input-focus-before-box-shadow: 3px -1px 0px 13px rgba(0, 0, 0, 0.6) !default;
+$form-switch-form-check-input-focus-before-box-shadow: 3px -1px 0px 13px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.6) !default;
 $form-switch-form-check-input-focus-before-transform: scale(1) !default;
 $form-switch-form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s !default;
 
@@ -1277,8 +1206,9 @@ $form-switch-form-check-input-checked-checkbox-after-height: 1.25rem !default;
 $form-switch-form-check-input-checked-checkbox-after-background-color: $primary !default;
 $form-switch-form-check-input-checked-checkbox-after-margin-top: -3px !default;
 $form-switch-form-check-input-checked-checkbox-after-margin-left: 1.0625rem !default;
-$form-switch-form-check-input-checked-checkbox-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
-  0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;
+$form-switch-form-check-input-checked-checkbox-after-box-shadow: 0 3px 1px -2px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.2),
+  0 2px 2px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.14),
+  0 1px 5px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.12) !default;
 $form-switch-form-check-input-checked-checkbox-after-transition: background-color 0.2s,
   transform 0.2s !default;
 
@@ -1385,7 +1315,7 @@ $nav-tabs-link-font-size: 12px !default;
 $nav-tabs-link-padding-top: 17px !default;
 $nav-tabs-link-padding-bottom: 16px !default;
 $nav-tabs-link-padding-x: 29px !default;
-$nav-tabs-link-hover-background-color: hsl(0, 0%, 96%) !default;
+$nav-tabs-link-hover-background-color: var(--#{$prefix}highlight-bg-color) !default;
 $nav-tabs-link-active-color: $primary !default;
 $nav-tabs-link-active-border-color: $primary !default;
 
@@ -1399,19 +1329,20 @@ $nav-pills-link-line-height: 1 !default;
 $nav-pills-link-background-color: $nav-tabs-link-hover-background-color !default;
 $nav-pills-link-font-weight: $nav-tabs-link-font-weight !default;
 
-$nav-tabs-link-color: rgba(0, 0, 0, 0.55) !default;
-$nav-tabs-link-hover-bgc: #f7f7f7 !default;
+$nav-tabs-link-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55) !default;
+$nav-tabs-link-hover-bgc: var(--#{$prefix}highlight-bg-color) !default;
 
 $nav-pills-link-color: $nav-tabs-link-color !default;
 $nav-pills-link-hover-bg: $nav-tabs-link-hover-bgc !default;
-$nav-pills-link-active-bg: #e3ebf7 !default;
-$nav-pills-link-active-color: #285192 !default;
+$nav-pills-link-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
+$nav-pills-link-active-color: var(--#{$prefix}primary-text-emphasis) !default;
 // scss-docs-end nav-variables
 
 // Navbar
 
 // scss-docs-start navbar-variables
-$navbar-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05) !default;
+$navbar-box-shadow: 0 4px 12px 0 rgba(var(--#{$prefix}box-shadow-color-rgb), 0.07),
+  0 2px 4px rgba(var(--#{$prefix}box-shadow-color-rgb), 0.05) !default;
 $navbar-padding-top: 0.5625rem !default;
 $navbar-brand-img-margin-right: 0.25rem !default;
 // scss-docs-end navbar-variables
@@ -1421,7 +1352,11 @@ $navbar-brand-img-margin-right: 0.25rem !default;
 // Dropdown menu container and contents.
 
 // scss-docs-start dropdown-variables
-$dropdown-color: $body-color !default;
+$dropdown-color: var(--#{$prefix}surface-color) !default;
+$dropdown-bg: var(--#{$prefix}surface-bg) !default;
+$dropdown-link-color: $dropdown-color !default;
+$dropdown-header-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55) !default;
+
 $dropdown-margin-top: 0.125rem !default;
 $dropdown-box-shadow: $box-shadow-4 !default;
 $dropdown-font-size: 0.875rem !default;
@@ -1429,11 +1364,12 @@ $dropdown-item-border-radius: 0.5rem !default;
 $dropdown-item-padding-y: 0.5rem !default;
 $dropdown-item-padding-x: 1rem !default;
 $dropdown-border-radius: 0.5rem !default;
-$dropdown-divider-bg: hsl(0, 0%, 96%) !default;
+$dropdown-divider-bg: var(--#{$prefix}divider-color) !default;
 $dropdown-divider-border-top-width: 2px;
 
-$dropdown-state-color: #16181b !default;
-$dropdown-state-background-color: #eee !default;
+$dropdown-state-color: var(--#{$prefix}surface-color) !default;
+$dropdown-state-background-color: var(--#{$prefix}highlight-bg-color) !default;
+$dropdown-link-disabled-color: rgba(var(--#{$prefix}surface-color-rgb), 0.5) !default;
 
 $dropdown-menu-animated-animation-duration: 0.55s !default;
 $dropdown-menu-animated-animation-timing-function: ease !default;
@@ -1445,11 +1381,12 @@ $dropdown-animation-duration: 1s !default;
 
 // scss-docs-start pagination-variables
 $pagination-font-size: 0.9rem !default;
-$pagination-color: $body-color !default;
+$pagination-color: var(--#{$prefix}body-color) !default;
 $pagination-transition: all 0.3s linear !default;
 $pagination-border-radius: 0.25rem !default;
 
-$pagination-hover-color: $pagination-color !default;
+$pagination-hover-color: var(--#{$prefix}body-color) !default;
+$pagination-hover-bg: var(--#{$prefix}highlight-bg-color) !default;
 $pagination-active-transition: all 0.2s linear !default;
 
 $pagination-circle-border-radius: 50% !default;
@@ -1461,10 +1398,14 @@ $pagination-circle-lg-padding-right: 1.399415rem !default;
 $pagination-circle-sm-padding-left: 0.696rem !default;
 $pagination-circle-sm-padding-right: 0.688rem !default;
 
-$pagination-active-bg: #e3ebf7 !default;
-$pagination-active-color: #285192 !default;
-$pagination-active-box-shadow: 0 4px 9px -4px #e3ebf7 !default;
+$pagination-focus-bg: var(--#{$prefix}highlight-bg-color) !default;
+
+$pagination-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
+$pagination-active-color: var(--#{$prefix}primary-text-emphasis) !default;
 $pagination-active-font-weight: 500 !default;
+
+$pagination-disabled-color: rgba(var(--#{$prefix}body-color-rgb), 0.55) !default;
+$pagination-disabled-bg: transparent !default;
 // scss-docs-end pagination-variables
 
 // Placeholders
@@ -1483,11 +1424,13 @@ $card-box-shadow: $box-shadow-4 !default;
 $card-cap-bg: rgba(255, 255, 255, 0) !default;
 $card-footer-background-color: rgba(255, 255, 255, 0) !default;
 $card-header-border-width: 2px !default;
-$card-header-border-color: hsl(0, 0%, 96%) !default;
+$card-header-border-color: var(--#{$prefix}divider-color) !default;
 $card-footer-border-width: 2px !default;
-$card-footer-border-color: hsl(0, 0%, 96%) !default;
+$card-footer-border-color: var(--#{$prefix}divider-color) !default;
 $card-border-radius: 0.5rem !default;
 $card-img-overlay-padding: 1.5rem !default;
+$card-bg: var(--#{$prefix}surface-bg) !default;
+$card-border-color: rgba(0, 0, 0, 0.175);
 // scss-docs-end card-variables
 
 // Accordion
@@ -1495,25 +1438,29 @@ $card-img-overlay-padding: 1.5rem !default;
 // scss-docs-start accordion-variables
 $accordion-padding-y: 1.15rem !default;
 $accordion-padding-x: 1.5rem !default;
-$accordion-button-active-bg: $white !default;
-$accordion-button-active-color: $primary !default;
-$accordion-button-focus-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125) !default;
 $accordion-border-radius: $border-radius-lg !default;
-$accordion-flush-button-box-shadow: inset 0 -2px 0 hsl(0, 0%, 96%) !default;
-$accordion-flush-item-border-bottom: 2px solid hsl(0, 0%, 96%) !default;
+$accordion-button-color: var(--#{$prefix}surface-color) !default;
+$accordion-button-active-bg: var(--#{$prefix}surface-bg) !default;
+$accordion-button-active-color: $primary !default;
+$accordion-button-focus-box-shadow: inset 0 -1px 0 var(--#{$prefix}border-color) !default;
+$accordion-color: var(--#{$prefix}surface-color) !default;
+$accordion-flush-button-box-shadow: inset 0 -2px 0 var(--#{$prefix}divider-color) !default;
+$accordion-flush-item-border-bottom: 2px solid var(--#{$prefix}divider-color) !default;
 $accordion-borderless-button-border-radius: 0.5rem !default;
-$accordion-borderless-button-bgc: rgb(223, 231, 246) !default;
-$accordion-borderless-button-color: rgb(44, 88, 160) !default;
+$accordion-borderless-button-bgc: var(--#{$prefix}primary-bg-subtle) !default;
+$accordion-borderless-button-color: var(--#{$prefix}primary-text-emphasis) !default;
+$accordion-icon-color: var(--#{$prefix}surface-color) !default;
+$accordion-icon-active-color: $primary !default;
 // scss-docs-end accordion-variables
 
 // Tooltips
 
 // scss-docs-start tooltip-variables
-$tooltip-color: #fff !default;
+$tooltip-color: var(--#{$prefix}surface-inverted-color) !default;
 $tooltip-padding-y: 6px !default;
 $tooltip-padding-x: 16px !default;
 $tooltip-font-size: 14px !default;
-$tooltip-bg: #6d6d6d !default;
+$tooltip-bg: var(--#{$prefix}surface-inverted-bg) !default;
 $tooltip-border-radius: 0.25rem !default;
 // scss-docs-end tooltip-feedback-variables
 
@@ -1524,8 +1471,12 @@ $popover-box-shadow: $box-shadow-2 !default;
 $popover-border-radius: $border-radius-lg !default;
 $popover-border-bottom-width: $border-width-alternate !default;
 $popover-border-width: 1px !default;
-$popover-border-color: hsl(0, 0%, 96%) !default;
-$popover-header-bg: $white !default;
+$popover-border-color: var(--#{$prefix}divider-color) !default;
+$popover-header-bg: var(--#{$prefix}surface-bg) !default;
+$popover-bg: var(--#{$prefix}surface-bg) !default;
+$popover-header-color: var(--#{$prefix}surface-color) !default;
+$popover-body-color: var(--#{$prefix}surface-color) !default;
+
 // scss-docs-end popover-variables
 
 // Toasts
@@ -1534,72 +1485,15 @@ $popover-header-bg: $white !default;
 $toast-box-shadow: $box-shadow-4 !default;
 $toast-border-radius: $border-radius-lg !default;
 $toast-border-bottom-width: $border-width-alternate !default;
-$toast-background-color: $white !default;
+$toast-background-color: var(--#{$prefix}surface-bg) !default;
 $toast-padding-x: 1rem !default;
 $toast-padding-y: 0.65rem !default;
-$toast-header-background-color: $white !default;
+$toast-header-background-color: var(--#{$prefix}surface-bg) !default;
 $toast-btn-close-width: 1.3em !default;
 $toast-btn-close-mr: -0.375rem !default;
 $toast-btn-close-ml: 0.75rem !default;
 // scss-docs-end toast-variables
 
-// scss-docs-start toasts-colors-map
-$toasts: () !default;
-$toasts: map-merge(
-  (
-    'primary': (
-      'background-color': hsl(219, 56.1%, 92%),
-      'text-color': hsl(217, 56.9%, 40%),
-      'icon-color': hsl(217, 56.9%, 50%),
-      'border-color': hsl(218, 57.7%, 86.1%),
-    ),
-    'secondary': (
-      'background-color': hsl(210, 11.1%, 92.9%),
-      'text-color': hsl(216, 10.5%, 28%),
-      'icon-color': hsl(218, 11.3%, 38%),
-      'border-color': hsl(206, 10.4%, 86.9%),
-    ),
-    'success': (
-      'background-color': hsl(143, 46.4%, 89%),
-      'text-color': hsl(144, 77.8%, 22.9%),
-      'icon-color': hsl(144, 77.5%, 33.1%),
-      'border-color': hsl(145, 44.8%, 82.9%),
-    ),
-    'danger': (
-      'background-color': hsl(350, 66.7%, 92.9%),
-      'text-color': hsl(350, 66.7%, 41.2%),
-      'icon-color': hsl(350, 67.2%, 51%),
-      'border-color': hsl(350, 66.7%, 87.1%),
-    ),
-    'warning': (
-      'background-color': hsl(40, 80.5%, 92%),
-      'text-color': hsl(40, 79.7%, 25.1%),
-      'icon-color': hsl(40, 79.9%, 35.1%),
-      'border-color': hsl(39, 83.1%, 86.1%),
-    ),
-    'info': (
-      'background-color': hsl(194, 61%, 92%),
-      'text-color': hsl(195, 63.4%, 30%),
-      'icon-color': hsl(195, 62.7%, 40%),
-      'border-color': hsl(195, 60.6%, 86.1%),
-    ),
-    'light': (
-      'background-color': hsl(0, 0%, 96.1%),
-      'text-color': hsl(0, 0%, 31%),
-      'icon-color': hsl(0, 0%, 54.9%),
-      'border-color': hsl(0, 0%, 90.2%),
-    ),
-    'dark': (
-      'background-color': hsl(0, 5.2%, 19%),
-      'text-color': hsl(0, 0%, 96.1%),
-      'icon-color': hsl(0, 0%, 91%),
-      'border-color': hsl(0, 6.3%, 25.1%),
-    ),
-  ),
-  $toasts
-);
-// scss-docs-end toasts-colors-map
-
 // Badges
 
 // scss-docs-start badge-variables
@@ -1617,72 +1511,17 @@ $badge-notification-padding-y: 0.2em !default;
 $badge-notification-padding-x: 0.45em !default;
 // scss-docs-end badge-variables
 
-// scss-docs-start badges-colors-map
-$badges: () !default;
-$badges: map-merge(
-  (
-    'primary': (
-      'background-color': rgb(223, 231, 246),
-      'text-color': rgb(44, 88, 160),
-      'icon-color': rgb(55, 111, 200),
-      'border-color': rgb(199, 214, 240),
-    ),
-    'secondary': (
-      'background-color': rgb(235, 237, 239),
-      'text-color': rgb(64, 70, 79),
-      'icon-color': rgb(86, 94, 108),
-      'border-color': rgb(218, 222, 225),
-    ),
-    'success': (
-      'background-color': rgb(214, 240, 224),
-      'text-color': rgb(13, 104, 50),
-      'icon-color': rgb(19, 150, 71),
-      'border-color': rgb(192, 231, 208),
-    ),
-    'danger': (
-      'background-color': rgb(249, 225, 229),
-      'text-color': rgb(175, 35, 58),
-      'icon-color': rgb(214, 46, 74),
-      'border-color': rgb(244, 200, 207),
-    ),
-    'warning': (
-      'background-color': rgb(251, 240, 218),
-      'text-color': rgb(115, 81, 13),
-      'icon-color': rgb(161, 113, 18),
-      'border-color': rgb(249, 228, 190),
-    ),
-    'info': (
-      'background-color': rgb(222, 241, 247),
-      'text-color': rgb(28, 101, 125),
-      'icon-color': rgb(38, 134, 166),
-      'border-color': rgb(198, 230, 241),
-    ),
-    'light': (
-      'background-color': rgb(245, 245, 245),
-      'text-color': rgb(79, 79, 79),
-      'icon-color': rgb(140, 140, 140),
-      'border-color': rgb(230, 230, 230),
-    ),
-    'dark': (
-      'background-color': rgb(51, 46, 46),
-      'text-color': rgb(245, 245, 245),
-      'icon-color': rgb(232, 232, 232),
-      'border-color': rgb(68, 60, 60),
-    ),
-  ),
-  $badges
-);
-// scss-docs-end badges-colors-map
-
 // Modals
 
 // scss-docs-start modal-variables
 $modal-box-shadow: $box-shadow-4 !default;
 $modal-content-border-radius: $border-radius-lg !default;
-$modal-header-border-color: $border-color-alternate !default;
-$modal-footer-border-color: $border-color-alternate !default;
+$modal-header-border-color: var(--#{$prefix}divider-color) !default;
+$modal-footer-border-color: var(--#{$prefix}divider-color) !default;
 $modal-header-border-width: $border-width-alternate !default;
 $modal-footer-border-width: $border-width-alternate !default;
+$modal-content-color: var(--#{$prefix}surface-color) !default;
+$modal-content-bg: var(--#{$prefix}surface-bg) !default;
 // scss-docs-end modal-variables
 
 // Alerts
@@ -1693,69 +1532,13 @@ $alert-padding-x: 1.5rem !default;
 $alert-border-radius: $border-radius-lg !default;
 // scss-docs-end alert-variables
 
-// scss-docs-start alerts-colors-map
-$alerts: () !default;
-$alerts: map-merge(
-  (
-    'primary': (
-      'background-color': rgb(223, 231, 246),
-      'text-color': rgb(44, 88, 160),
-      'icon-color': rgb(55, 111, 200),
-      'border-color': rgb(199, 214, 240),
-    ),
-    'secondary': (
-      'background-color': rgb(235, 237, 239),
-      'text-color': rgb(64, 70, 79),
-      'icon-color': rgb(86, 94, 108),
-      'border-color': rgb(218, 222, 225),
-    ),
-    'success': (
-      'background-color': rgb(214, 240, 224),
-      'text-color': rgb(13, 104, 50),
-      'icon-color': rgb(19, 150, 71),
-      'border-color': rgb(192, 231, 208),
-    ),
-    'danger': (
-      'background-color': rgb(249, 225, 229),
-      'text-color': rgb(175, 35, 58),
-      'icon-color': rgb(214, 46, 74),
-      'border-color': rgb(244, 200, 207),
-    ),
-    'warning': (
-      'background-color': rgb(251, 240, 218),
-      'text-color': rgb(115, 81, 13),
-      'icon-color': rgb(161, 113, 18),
-      'border-color': rgb(249, 228, 190),
-    ),
-    'info': (
-      'background-color': rgb(222, 241, 247),
-      'text-color': rgb(28, 101, 125),
-      'icon-color': rgb(38, 134, 166),
-      'border-color': rgb(198, 230, 241),
-    ),
-    'light': (
-      'background-color': rgb(245, 245, 245),
-      'text-color': rgb(79, 79, 79),
-      'icon-color': rgb(140, 140, 140),
-      'border-color': rgb(230, 230, 230),
-    ),
-    'dark': (
-      'background-color': rgb(51, 46, 46),
-      'text-color': rgb(245, 245, 245),
-      'icon-color': rgb(232, 232, 232),
-      'border-color': rgb(68, 60, 60),
-    ),
-  ),
-  $alerts
-);
-// scss-docs-end alerts-colors-map
-
 // Progress bars
 
 // scss-docs-start progress-variables
 $progress-height: 4px !default;
 $progress-circular-size: 48px !default;
 $progress-circular-bar-width: 4px !default;
+$progress-bar-color: color-contrast($primary) !default;
 // scss-docs-end progress-variables
 
 // Range
@@ -1765,18 +1548,18 @@ $range-thumb-height: 30px !default;
 $range-thumb-width: 30px !default;
 $range-thumb-top: -35px !default;
 $range-thumb-background: $primary !default;
-$range-thumb-active-background: tint-color($primary, 70%) !default;
+$range-thumb-active-background: var(--#{$prefix}primary-bg-subtle) !default;
 $range-thumb-margin-left: -15px !default;
 $range-thumb-border-radius: 50% 50% 50% 0 !default;
 $range-thumb-transform: scale(0) !default;
 $range-thumb-transition: transform 0.2s ease-in-out !default;
 $range-thumb-value-font-size: 12px !default;
 $range-thumb-value-line-height: 30px !default;
-$range-thumb-value-color: rgb(255, 255, 255) !default;
+$range-thumb-value-color: color-contrast($primary) !default;
 $range-thumb-value-font-weight: 500 !default;
 // override default bootstrap values for form range
 $form-range-thumb-bg: $range-thumb-background !default;
-$form-range-thumb-active-bg: $range-thumb-active-background !default;
+$form-range-thumb-disabled-bg: var(--#{$prefix}form-control-disabled-bg) !default;
 // scss-docs-end range-variables
 
 // List group
@@ -1785,20 +1568,17 @@ $form-range-thumb-active-bg: $range-thumb-active-background !default;
 $list-group-border-radius: $border-radius-lg !default;
 $list-group-item-padding-x: 1.5rem !default;
 $list-group-item-transition-time: 0.5s !default;
-$list-group-color: $body-color !default;
+$list-group-bg: transparent !default;
+$list-group-disabled-color: rgba(var(--#{$prefix}body-color-rgb), 0.5);
 
 $list-group-light-item-py: 1rem !default;
-$list-group-light-item-border: 2px solid hsl(0, 0%, 96%) !default;
+$list-group-light-item-border: 2px solid var(--#{$prefix}divider-color) !default;
 $list-group-light-item-border-width: 2px !default;
 $list-group-light-active-border-radius: 0.5rem !default;
-$list-group-light-active-bg: rgb(223, 231, 246) !default;
-$list-group-light-active-color: rgb(44, 88, 160) !default;
+$list-group-light-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
+$list-group-light-active-color: var(--#{$prefix}primary-text-emphasis) !default;
 
 $list-group-small-item-py: 0.5rem !default;
-
-$list-group-active-bg: rgb(223, 231, 246) !default;
-$list-group-active-color: rgb(44, 88, 160) !default;
-$list-group-active-border-color: $list-group-active-bg !default;
 // scss-docs-end list-group-variables
 
 // Images
@@ -1817,25 +1597,27 @@ $image-hover-shadow-box-shadow-soft: $box-shadow-5 !default;
 // Breadcrumbs
 
 // scss-docs-start breadcrumb-variables
-$breadcrumb-item-color: rgba(0, 0, 0, 0.55) !default;
+$breadcrumb-divider-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55) !default;
+$breadcrumb-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55) !default;
+$breadcrumb-item-color: $breadcrumb-active-color !default;
 $breadcrumb-item-transition: color 0.15s ease-in-out !default;
-$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7) !default;
-$breadcrumb-item-before-color: $breadcrumb-item-color !default;
+$breadcrumb-item-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.7) !default;
+$breadcrumb-item-before-color: $breadcrumb-divider-color !default;
 // scss-docs-end breadcrumb-variables
 
 // Carousel
 
 // scss-docs-start carousel-variables
-$carousel-control-prev-icon-bg: none;
-$carousel-control-next-icon-bg: none;
-$carousel-control-icon-font-size: 1.7rem;
+$carousel-control-prev-icon-bg: none !default;
+$carousel-control-next-icon-bg: none !default;
+$carousel-control-icon-font-size: 1.7rem !default;
 // scss-docs-end carousel-variables
 
 // Scrollspy
 
 // scss-docs-start scrollspy-variables
 $scrollspy-menu-sidebar-font-size: 0.8rem !default;
-$scrollspy-menu-sidebar-color: #262626 !default;
+$scrollspy-menu-sidebar-color: var(--#{$prefix}body-color) !default;
 $scrollspy-menu-sidebar-line-height: 1.1rem !default;
 $scrollspy-menu-sidebar-padding-x: 5px !default;
 $scrollspy-menu-sidebar-font-weight: 400 !default;
@@ -1855,13 +1637,13 @@ $scrollspy-collapsible-nav-transition-time: 0.5s !default;
 // scss-docs-start divider-variables
 $divider-height: $border-width-alternate !default;
 $divider-width: $border-width-alternate !default;
-$divider-bg: $border-color-alternate !default;
+$divider-bg: var(--#{$prefix}divider-color) !default;
 $divider-opacity: 1 !default;
 
 $divider-blurry-bg-image: linear-gradient(
   90deg,
   transparent,
-  hsl(0, 0%, 40%),
+  var(--#{$prefix}divider-blurry-color),
   transparent
 ) !default;
 $divider-blurry-height: 1px !default;
@@ -1870,8 +1652,30 @@ $divider-blurry-opacity: 0.25 !default;
 $divider-blurry-vr-bg-image: linear-gradient(
   180deg,
   transparent,
-  hsl(0, 0%, 40%),
+  var(--#{$prefix}divider-blurry-color),
   transparent
 ) !default;
 $divider-blurry-vr-width: 1px !default;
 // scss-docs-end divider-variables
+
+// Global MDB light theme variables
+
+// scss-docs-start mdb-global-light-theme-variables
+$surface-color: $gray-800 !default;
+$surface-bg: $white !default;
+$surface-inverted-color: $white !default;
+$surface-inverted-bg: #6d6d6d !default;
+$divider-color: $gray-100 !default;
+$divider-blurry-color: hsl(0, 0%, 40%) !default;
+$highlight-bg-color: $gray-200 !default;
+$scrollbar-rail-bg: $gray-200 !default;
+$scrollbar-thumb-bg: $gray-500 !default;
+$picker-header-bg: $primary !default;
+$timepicker-clock-face-bg: var(--#{$prefix}secondary-bg) !default;
+$sidenav-backdrop-opacity: 0.1 !default;
+$form-control-border-color: $gray-400 !default;
+$form-control-label-color: $gray-600 !default;
+$form-control-disabled-bg: $gray-300 !default;
+$box-shadow-color: $black !default;
+$stepper-mobile-bg: $gray-50 !default;
+// scss-docs-start mdb-global-light-theme-variables
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-control.scss b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-control.scss
index 3bc53fd3..233c4956 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-control.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-control.scss
@@ -187,6 +187,7 @@
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
+    color: var(--#{$prefix}surface-color);
   }
 
   .form-icon-trailing {
@@ -311,6 +312,19 @@
     &[readonly] {
       background-color: $input-disabled-background-color;
     }
+
+    &:disabled,
+    &.disabled,
+    &[readonly] {
+      ~ .timepicker-toggle-button,
+      ~ .datepicker-toggle-button,
+      ~ .datetimepicker-toggle-button,
+      ~ .select-arrow,
+      ~ .trailing {
+        color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
+      }
+    }
+
     &.form-control-lg {
       font-size: $input-font-size-lg;
       line-height: $input-line-height-lg;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-file.scss b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-file.scss
index 21d67e22..52c9fd24 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-file.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-file.scss
@@ -1,8 +1,17 @@
 .form-control {
   &[type='file'] {
+    border-color: var(--#{$prefix}form-control-border-color);
     &::-webkit-file-upload-button {
       background-color: transparent;
     }
+    &:disabled {
+      background-color: var(--#{$prefix}form-control-disabled-bg);
+      color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
+
+      &::file-selector-button {
+        color: rgba(var(--#{$prefix}surface-color-rgb), 0.5);
+      }
+    }
   }
   &:hover {
     &:not(:disabled):not([readonly])::-webkit-file-upload-button {
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-range.scss b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-range.scss
index 69bae8b5..bb4339ed 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-range.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/forms/_form-range.scss
@@ -35,6 +35,7 @@
     height: $form-range-webkit-slider-runnable-track-height;
     border-radius: 0;
     box-shadow: none;
+    background-color: var(--#{$prefix}secondary-bg);
   }
 
   &::-moz-range-thumb {
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/mixins/_buttons.scss b/projects/mdb-angular-ui-kit/assets/scss/free/mixins/_buttons.scss
index 2fdb0dc6..9289f969 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/mixins/_buttons.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/mixins/_buttons.scss
@@ -6,14 +6,47 @@
 // scss-docs-start btn-variant-mixin
 @mixin button-variant(
   $background,
+  $border,
   $color: color-contrast($background),
-  $shadow,
-  $hover-background,
-  $hover-color: color-contrast($hover-background),
-  $focus-background,
-  $focus-color: color-contrast($focus-background),
-  $active-background,
-  $active-color: color-contrast($active-background)
+  $shadow: $btn-contextual-box-shadow
+    if(
+      $color == $color-contrast-light,
+      shade-color($background, $btn-hover-bg-shade-amount),
+      tint-color($background, $btn-hover-bg-tint-amount)
+    ),
+  $hover-background:
+    if(
+      $color == $color-contrast-light,
+      shade-color($background, $btn-hover-bg-shade-amount),
+      tint-color($background, $btn-hover-bg-tint-amount)
+    ),
+  $hover-border:
+    if(
+      $color == $color-contrast-light,
+      shade-color($border, $btn-hover-border-shade-amount),
+      tint-color($border, $btn-hover-border-tint-amount)
+    ),
+  $hover-color: $color,
+  $focus-background:
+    if(
+      $color == $color-contrast-light,
+      shade-color($background, $btn-focus-bg-shade-amount),
+      tint-color($background, $btn-focus-bg-tint-amount)
+    ),
+  $focus-color: $color,
+  $active-border:
+    if(
+      $color == $color-contrast-light,
+      shade-color($border, $btn-active-border-shade-amount),
+      tint-color($border, $btn-active-border-tint-amount)
+    ),
+  $active-background:
+    if(
+      $color == $color-contrast-light,
+      shade-color($background, $btn-active-bg-shade-amount),
+      tint-color($background, $btn-active-bg-tint-amount)
+    ),
+  $active-color: $color
 ) {
   --#{$prefix}btn-bg: #{$background};
   --#{$prefix}btn-color: #{$color};
@@ -28,14 +61,22 @@
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant($color, $hover-color, $focus-color, $active-color) {
+@mixin button-outline-variant(
+  $color,
+  $hover-color,
+  $focus-color,
+  $active-color,
+  $hover-background: tint-color($color, $btn-outline-hover-bg-tint-amount),
+  $focus-background: tint-color($color, $btn-outline-focus-bg-tint-amount),
+  $active-background: tint-color($color, $btn-outline-active-bg-tint-amount)
+) {
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-hover-bg: transparent;
+  --#{$prefix}btn-hover-bg: #{$hover-background};
   --#{$prefix}btn-hover-color: #{$hover-color};
-  --#{$prefix}btn-focus-bg: transparent;
+  --#{$prefix}btn-focus-bg: #{$focus-background};
   --#{$prefix}btn-focus-color: #{$focus-color};
-  --#{$prefix}btn-active-bg: transparent;
+  --#{$prefix}btn-active-bg: #{$active-background};
   --#{$prefix}btn-active-color: #{$active-color};
 }
 // scss-docs-end btn-outline-variant-mixin
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/mixins/_color-mode.scss b/projects/mdb-angular-ui-kit/assets/scss/free/mixins/_color-mode.scss
new file mode 100644
index 00000000..f5993d1e
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/mixins/_color-mode.scss
@@ -0,0 +1,21 @@
+// scss-docs-start color-mode-mixin
+@mixin color-mode($mode: light, $root: false) {
+  @if $color-mode-type == 'media-query' {
+    @if $root == true {
+      @media (prefers-color-scheme: $mode) {
+        :root {
+          @content;
+        }
+      }
+    } @else {
+      @media (prefers-color-scheme: $mode) {
+        @content;
+      }
+    }
+  } @else {
+    [data-mdb-theme='#{$mode}'] {
+      @content;
+    }
+  }
+}
+// scss-docs-end color-mode-mixin
diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.core.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.core.scss
index 0dd62925..12f6b9bf 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/mdb.core.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/mdb.core.scss
@@ -5,6 +5,7 @@
 // CORE VARIABLES
 @import 'http://github.com/free/variables';
 @import 'http://github.com/bootstrap/variables';
+@import 'http://github.com/bootstrap/maps';
 
 // BOOTSTRAP CORE
 @import 'http://github.com/bootstrap/mixins';
diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
index c5a92d1b..99c486d6 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
@@ -4,7 +4,10 @@
 
 // CORE VARIABLES
 @import 'http://github.com/free/variables';
+@import 'http://github.com/free/variables-dark';
 @import 'http://github.com/bootstrap/variables';
+@import 'http://github.com/bootstrap/variables-dark';
+@import 'http://github.com/bootstrap/maps';
 
 // BOOTSTRAP CORE
 @import 'http://github.com/bootstrap/mixins';
diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
index 002dac95..91e3a5a9 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
@@ -4,7 +4,9 @@
 
 // CORE VARIABLES
 @import 'http://github.com/free/variables';
+@import 'http://github.com/free/variables-dark';
 @import 'http://github.com/bootstrap/variables';
+@import 'http://github.com/bootstrap/variables-dark';
 @import 'http://github.com/bootstrap/maps';
 
 // BOOTSTRAP CORE
diff --git a/projects/mdb-angular-ui-kit/carousel/carousel-item.component.ts b/projects/mdb-angular-ui-kit/carousel/carousel-item.component.ts
index 5448661e..3950e52f 100644
--- a/projects/mdb-angular-ui-kit/carousel/carousel-item.component.ts
+++ b/projects/mdb-angular-ui-kit/carousel/carousel-item.component.ts
@@ -1,9 +1,9 @@
 import { Component, ElementRef, HostBinding, Input } from '@angular/core';
 
 @Component({
-    selector: 'mdb-carousel-item',
-    template: '<ng-content></ng-content>',
-    standalone: false
+  selector: 'mdb-carousel-item',
+  template: '<ng-content></ng-content>',
+  standalone: false,
 })
 export class MdbCarouselItemComponent {
   @Input() interval: number | null = null;
diff --git a/projects/mdb-angular-ui-kit/carousel/carousel.component.ts b/projects/mdb-angular-ui-kit/carousel/carousel.component.ts
index dbdcf258..8bb45cc4 100644
--- a/projects/mdb-angular-ui-kit/carousel/carousel.component.ts
+++ b/projects/mdb-angular-ui-kit/carousel/carousel.component.ts
@@ -25,10 +25,10 @@ export enum Direction {
 }
 
 @Component({
-    selector: 'mdb-carousel',
-    templateUrl: './carousel.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false
+  selector: 'mdb-carousel',
+  templateUrl: './carousel.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MdbCarouselComponent implements AfterViewInit, OnDestroy {
   @ContentChildren(MdbCarouselItemComponent) _items: QueryList<MdbCarouselItemComponent>;
diff --git a/projects/mdb-angular-ui-kit/carousel/carousel.spec.ts b/projects/mdb-angular-ui-kit/carousel/carousel.spec.ts
index f61764ed..7e7f5786 100644
--- a/projects/mdb-angular-ui-kit/carousel/carousel.spec.ts
+++ b/projects/mdb-angular-ui-kit/carousel/carousel.spec.ts
@@ -39,8 +39,8 @@ const carouselTemplate = `
 `;
 
 @Component({
-    template: carouselTemplate,
-    standalone: false
+  template: carouselTemplate,
+  standalone: false,
 })
 export class CarouselTestComponent {
   @ViewChild(MdbCarouselComponent, { static: true }) carousel: MdbCarouselComponent;
diff --git a/projects/mdb-angular-ui-kit/checkbox/checkbox.directive.spec.ts b/projects/mdb-angular-ui-kit/checkbox/checkbox.directive.spec.ts
index 47683e9d..c143cc9e 100644
--- a/projects/mdb-angular-ui-kit/checkbox/checkbox.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/checkbox/checkbox.directive.spec.ts
@@ -156,8 +156,8 @@ const basicTemplate = `
 `;
 
 @Component({
-    template: basicTemplate,
-    standalone: false
+  template: basicTemplate,
+  standalone: false,
 })
 class BasicCheckboxComponent {
   checked = false;
@@ -172,8 +172,8 @@ const ngModelTemplate = `
 `;
 
 @Component({
-    template: ngModelTemplate,
-    standalone: false
+  template: ngModelTemplate,
+  standalone: false,
 })
 class CheckboxWithNgModelComponent {
   checked = false;
@@ -188,8 +188,8 @@ const formControlTemplate = `
 `;
 
 @Component({
-    template: formControlTemplate,
-    standalone: false
+  template: formControlTemplate,
+  standalone: false,
 })
 class CheckboxWithFormControlComponent {
   control = new UntypedFormControl(false);
diff --git a/projects/mdb-angular-ui-kit/checkbox/checkbox.directive.ts b/projects/mdb-angular-ui-kit/checkbox/checkbox.directive.ts
index 3d95dc0d..e30717fd 100644
--- a/projects/mdb-angular-ui-kit/checkbox/checkbox.directive.ts
+++ b/projects/mdb-angular-ui-kit/checkbox/checkbox.directive.ts
@@ -12,7 +12,6 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 export const MDB_CHECKBOX_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
-  // eslint-disable-next-line no-use-before-define, @typescript-eslint/no-use-before-define
   useExisting: forwardRef(() => MdbCheckboxDirective),
   multi: true,
 };
@@ -23,10 +22,10 @@ export class MdbCheckboxChange {
 }
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbCheckbox]',
-    providers: [MDB_CHECKBOX_VALUE_ACCESSOR],
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbCheckbox]',
+  providers: [MDB_CHECKBOX_VALUE_ACCESSOR],
+  standalone: false,
 })
 export class MdbCheckboxDirective {
   @Input('checked')
diff --git a/projects/mdb-angular-ui-kit/collapse/collapse.directive.spec.ts b/projects/mdb-angular-ui-kit/collapse/collapse.directive.spec.ts
index d44a8168..95189697 100644
--- a/projects/mdb-angular-ui-kit/collapse/collapse.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/collapse/collapse.directive.spec.ts
@@ -13,6 +13,7 @@ const template = `
 @Component({
   selector: 'mdb-collapse-test',
   template,
+  standalone: false,
 })
 class TestCollapseComponent {
   @ViewChild('collapse') collapse: MdbCollapseDirective;
diff --git a/projects/mdb-angular-ui-kit/collapse/collapse.directive.ts b/projects/mdb-angular-ui-kit/collapse/collapse.directive.ts
index ce035dfd..5a67952a 100644
--- a/projects/mdb-angular-ui-kit/collapse/collapse.directive.ts
+++ b/projects/mdb-angular-ui-kit/collapse/collapse.directive.ts
@@ -13,10 +13,10 @@ import { take } from 'rxjs/operators';
 const TRANSITION_TIME = 350;
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbCollapse]',
-    exportAs: 'mdbCollapse',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbCollapse]',
+  exportAs: 'mdbCollapse',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbCollapseDirective {
diff --git a/projects/mdb-angular-ui-kit/dropdown/dropdown-menu.directive.ts b/projects/mdb-angular-ui-kit/dropdown/dropdown-menu.directive.ts
index 85f071bc..7ee58e7a 100644
--- a/projects/mdb-angular-ui-kit/dropdown/dropdown-menu.directive.ts
+++ b/projects/mdb-angular-ui-kit/dropdown/dropdown-menu.directive.ts
@@ -3,10 +3,10 @@ import { Directive, ElementRef, EventEmitter, Input, Output, Renderer2 } from '@
 export type MdbDropdownMenuPositionClass = 'dropdown-menu-end';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbDropdownMenu]',
-    exportAs: 'mdbDropdownMenu',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbDropdownMenu]',
+  exportAs: 'mdbDropdownMenu',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbDropdownMenuDirective {
diff --git a/projects/mdb-angular-ui-kit/dropdown/dropdown-toggle.directive.ts b/projects/mdb-angular-ui-kit/dropdown/dropdown-toggle.directive.ts
index 81a3f7fa..99b17219 100644
--- a/projects/mdb-angular-ui-kit/dropdown/dropdown-toggle.directive.ts
+++ b/projects/mdb-angular-ui-kit/dropdown/dropdown-toggle.directive.ts
@@ -1,9 +1,9 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-    selector: '[mdbDropdownToggle]',
-    exportAs: 'mdbDropdownToggle',
-    standalone: false
+  selector: '[mdbDropdownToggle]',
+  exportAs: 'mdbDropdownToggle',
+  standalone: false,
 })
 export class MdbDropdownToggleDirective {
   constructor() {}
diff --git a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts
index 6eb46c3f..64a97517 100644
--- a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts
@@ -339,8 +339,8 @@ describe('MDB Dropdown', () => {
 });
 
 @Component({
-    selector: 'mdb-dropdown-test',
-    template: `
+  selector: 'mdb-dropdown-test',
+  template: `
     <div
       mdbDropdown
       class="dropdown"
@@ -361,7 +361,7 @@ describe('MDB Dropdown', () => {
       </ul>
     </div>
   `,
-    standalone: false
+  standalone: false,
 })
 class TestDropdownComponent {
   closeOnOutsideClick = true;
diff --git a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts
index f880bee9..77c082e9 100644
--- a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts
+++ b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts
@@ -35,19 +35,19 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 export type MdbDropdownPositionClass = 'dropdown' | 'dropup' | 'dropstart' | 'dropend';
 
 @Component({
-    // eslint-disable-next-line @angular-eslint/component-selector
-    selector: '[mdbDropdown]',
-    templateUrl: 'dropdown.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    animations: [
-        trigger('fade', [
-            state('visible', style({ opacity: 1 })),
-            state('hidden', style({ opacity: 0 })),
-            transition('visible => hidden', animate('150ms linear')),
-            transition('hidden => visible', [style({ opacity: 0 }), animate('150ms linear')]),
-        ]),
-    ],
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[mdbDropdown]',
+  templateUrl: 'dropdown.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('fade', [
+      state('visible', style({ opacity: 1 })),
+      state('hidden', style({ opacity: 0 })),
+      transition('visible => hidden', animate('150ms linear')),
+      transition('hidden => visible', [style({ opacity: 0 }), animate('150ms linear')]),
+    ]),
+  ],
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
diff --git a/projects/mdb-angular-ui-kit/forms/form-control.component.ts b/projects/mdb-angular-ui-kit/forms/form-control.component.ts
index 86ce4724..a9f89b2c 100644
--- a/projects/mdb-angular-ui-kit/forms/form-control.component.ts
+++ b/projects/mdb-angular-ui-kit/forms/form-control.component.ts
@@ -17,10 +17,10 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-    selector: 'mdb-form-control',
-    templateUrl: './form-control.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false
+  selector: 'mdb-form-control',
+  templateUrl: './form-control.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MdbFormControlComponent implements AfterContentInit, OnDestroy {
   @ViewChild('notchLeading', { static: true }) _notchLeading: ElementRef;
diff --git a/projects/mdb-angular-ui-kit/forms/form-control.spec.ts b/projects/mdb-angular-ui-kit/forms/form-control.spec.ts
index 4029fc1d..552b4830 100644
--- a/projects/mdb-angular-ui-kit/forms/form-control.spec.ts
+++ b/projects/mdb-angular-ui-kit/forms/form-control.spec.ts
@@ -72,8 +72,8 @@ const basicTemplate = `
 `;
 
 @Component({
-    template: basicTemplate,
-    standalone: false
+  template: basicTemplate,
+  standalone: false,
 })
 class BasicFormControlComponent {}
 
@@ -84,7 +84,7 @@ const withoutLabelTemplate = `
 `;
 
 @Component({
-    template: withoutLabelTemplate,
-    standalone: false
+  template: withoutLabelTemplate,
+  standalone: false,
 })
 class WithoutLabelComponent {}
diff --git a/projects/mdb-angular-ui-kit/forms/input.directive.ts b/projects/mdb-angular-ui-kit/forms/input.directive.ts
index bb2902c3..bdc0280f 100644
--- a/projects/mdb-angular-ui-kit/forms/input.directive.ts
+++ b/projects/mdb-angular-ui-kit/forms/input.directive.ts
@@ -19,11 +19,11 @@ import { MdbAbstractFormControl } from './form-control';
 import { AutofillEvent, AutofillMonitor } from '@angular/cdk/text-field';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbInput]',
-    exportAs: 'mdbInput',
-    providers: [{ provide: MdbAbstractFormControl, useExisting: MdbInputDirective }],
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbInput]',
+  exportAs: 'mdbInput',
+  providers: [{ provide: MdbAbstractFormControl, useExisting: MdbInputDirective }],
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbInputDirective
diff --git a/projects/mdb-angular-ui-kit/forms/input.spec.ts b/projects/mdb-angular-ui-kit/forms/input.spec.ts
index bf52230e..0193f64d 100644
--- a/projects/mdb-angular-ui-kit/forms/input.spec.ts
+++ b/projects/mdb-angular-ui-kit/forms/input.spec.ts
@@ -38,9 +38,9 @@ const basicTemplate = `
 `;
 
 @Component({
-    selector: 'mdb-input-test',
-    template: basicTemplate,
-    standalone: false
+  selector: 'mdb-input-test',
+  template: basicTemplate,
+  standalone: false,
 })
 class BasicInputComponent {
   disabled = false;
diff --git a/projects/mdb-angular-ui-kit/forms/label.directive.ts b/projects/mdb-angular-ui-kit/forms/label.directive.ts
index 85e6467b..c277cda2 100644
--- a/projects/mdb-angular-ui-kit/forms/label.directive.ts
+++ b/projects/mdb-angular-ui-kit/forms/label.directive.ts
@@ -1,10 +1,10 @@
 import { Directive, ElementRef } from '@angular/core';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbLabel]',
-    exportAs: 'mdbLabel',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbLabel]',
+  exportAs: 'mdbLabel',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbLabelDirective {
diff --git a/projects/mdb-angular-ui-kit/modal/modal-container.component.ts b/projects/mdb-angular-ui-kit/modal/modal-container.component.ts
index 656ec0ce..a292a252 100644
--- a/projects/mdb-angular-ui-kit/modal/modal-container.component.ts
+++ b/projects/mdb-angular-ui-kit/modal/modal-container.component.ts
@@ -28,10 +28,10 @@ const NON_INVASIVE_CLASS = 'modal-non-invasive-open';
 const NON_INVASIVE_SHOW_CLASS = 'modal-non-invasive-show';
 
 @Component({
-    selector: 'mdb-modal-container',
-    templateUrl: 'modal-container.component.html',
-    changeDetection: ChangeDetectionStrategy.Default,
-    standalone: false
+  selector: 'mdb-modal-container',
+  templateUrl: 'modal-container.component.html',
+  changeDetection: ChangeDetectionStrategy.Default,
+  standalone: false,
 })
 export class MdbModalContainerComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(CdkPortalOutlet, { static: true }) _portalOutlet: CdkPortalOutlet;
diff --git a/projects/mdb-angular-ui-kit/modal/modal.service.ts b/projects/mdb-angular-ui-kit/modal/modal.service.ts
index 396ed15b..d951023d 100644
--- a/projects/mdb-angular-ui-kit/modal/modal.service.ts
+++ b/projects/mdb-angular-ui-kit/modal/modal.service.ts
@@ -8,6 +8,7 @@ import {
   Injector,
   StaticProvider,
   TemplateRef,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { filter, take } from 'rxjs/operators';
@@ -63,6 +64,9 @@ export class MdbModalService {
     const portal = new ComponentPortal(MdbModalContainerComponent, null, this._injector, this._cfr);
     const containerRef = overlayRef.attach(portal);
     containerRef.instance._config = config;
+
+    containerRef.changeDetectorRef.detectChanges();
+
     return containerRef.instance;
   }
 
diff --git a/projects/mdb-angular-ui-kit/modal/modal.spec.ts b/projects/mdb-angular-ui-kit/modal/modal.spec.ts
index 617635a5..7f67a9c0 100644
--- a/projects/mdb-angular-ui-kit/modal/modal.spec.ts
+++ b/projects/mdb-angular-ui-kit/modal/modal.spec.ts
@@ -7,7 +7,7 @@ import { Component, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 @Component({
-    template: `
+  template: `
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
       <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
@@ -27,8 +27,8 @@ import { BrowserModule } from '@angular/platform-browser';
       <button type="button" class="btn btn-primary">Save changes</button>
     </div>
   `,
-    providers: [MdbModalService],
-    standalone: false
+  providers: [MdbModalService],
+  standalone: false,
 })
 class BasicModalComponent {
   constructor(public modal: MdbModalService) {}
diff --git a/projects/mdb-angular-ui-kit/package.json b/projects/mdb-angular-ui-kit/package.json
index 03d3bbff..ed6ff277 100644
--- a/projects/mdb-angular-ui-kit/package.json
+++ b/projects/mdb-angular-ui-kit/package.json
@@ -4,7 +4,7 @@
   "homepage": "https://mdbootstrap.com/docs/b5/angular/",
   "author": "MDBootstrap",
   "license": "MIT",
-  "version": "7.1.0",
+  "version": "8.0.0",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",
diff --git a/projects/mdb-angular-ui-kit/popover/popover.component.ts b/projects/mdb-angular-ui-kit/popover/popover.component.ts
index 9a9b9f32..c3bdfab0 100644
--- a/projects/mdb-angular-ui-kit/popover/popover.component.ts
+++ b/projects/mdb-angular-ui-kit/popover/popover.component.ts
@@ -9,18 +9,18 @@ import {
 import { trigger, style, animate, transition, state, AnimationEvent } from '@angular/animations';
 import { Subject } from 'rxjs';
 @Component({
-    selector: 'mdb-popover',
-    templateUrl: 'popover.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    animations: [
-        trigger('fade', [
-            state('visible', style({ opacity: 1 })),
-            state('hidden', style({ opacity: 0 })),
-            transition('visible <=> hidden', animate('150ms linear')),
-            transition(':enter', animate('150ms linear')),
-        ]),
-    ],
-    standalone: false
+  selector: 'mdb-popover',
+  templateUrl: 'popover.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('fade', [
+      state('visible', style({ opacity: 1 })),
+      state('hidden', style({ opacity: 0 })),
+      transition('visible <=> hidden', animate('150ms linear')),
+      transition(':enter', animate('150ms linear')),
+    ]),
+  ],
+  standalone: false,
 })
 export class MdbPopoverComponent {
   @Input({ transform: booleanAttribute }) animation: boolean;
diff --git a/projects/mdb-angular-ui-kit/popover/popover.directive.spec.ts b/projects/mdb-angular-ui-kit/popover/popover.directive.spec.ts
index 22859f20..a7f091ed 100644
--- a/projects/mdb-angular-ui-kit/popover/popover.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/popover/popover.directive.spec.ts
@@ -182,8 +182,8 @@ describe('MDB Popover', () => {
 });
 
 @Component({
-    selector: 'mdb-test-tooltip',
-    template: ` <button
+  selector: 'mdb-test-tooltip',
+  template: ` <button
     [trigger]="testTrigger"
     [mdbPopover]="testMdbPopover"
     [mdbPopoverTitle]="testMdbPopoverTitle"
@@ -192,7 +192,7 @@ describe('MDB Popover', () => {
   >
     MDB Button
   </button>`,
-    standalone: false
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class TestPopoverComponent {
@@ -204,26 +204,26 @@ class TestPopoverComponent {
 }
 
 @Component({
-    selector: 'mdb-test-popover2',
-    template: ` <button mdbPopover="testMdbPopover" trigger="click">MDB Button</button>`,
-    standalone: false
+  selector: 'mdb-test-popover2',
+  template: ` <button mdbPopover="testMdbPopover" trigger="click">MDB Button</button>`,
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class TestPopoverComponent2 {}
 
 @Component({
-    selector: 'mdb-test-popover2',
-    template: ` <button mdbPopover="testMdbPopover" popoverDisabled="true" trigger="click">
+  selector: 'mdb-test-popover2',
+  template: ` <button mdbPopover="testMdbPopover" popoverDisabled="true" trigger="click">
     MDB Button
   </button>`,
-    standalone: false
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class TestPopoverComponent3 {}
 
 @Component({
-    selector: 'mdb-test-popover4',
-    template: `<button
+  selector: 'mdb-test-popover4',
+  template: `<button
       type="button"
       class="btn btn-lg btn-danger"
       [mdbPopover]="template"
@@ -235,7 +235,7 @@ class TestPopoverComponent3 {}
     <ng-template #template let-person="person"
       >Current user: {{ person.name }} {{ person.surname }}</ng-template
     >`,
-    standalone: false
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class TestPopoverComponent4 {}
diff --git a/projects/mdb-angular-ui-kit/popover/popover.directive.ts b/projects/mdb-angular-ui-kit/popover/popover.directive.ts
index 92365616..e76db104 100644
--- a/projects/mdb-angular-ui-kit/popover/popover.directive.ts
+++ b/projects/mdb-angular-ui-kit/popover/popover.directive.ts
@@ -25,10 +25,10 @@ import { first, takeUntil } from 'rxjs/operators';
 import { MdbPopoverPosition } from './popover.types';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbPopover]',
-    exportAs: 'mdbPopover',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbPopover]',
+  exportAs: 'mdbPopover',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbPopoverDirective implements OnInit, OnDestroy {
diff --git a/projects/mdb-angular-ui-kit/radio/radio-button.directive.ts b/projects/mdb-angular-ui-kit/radio/radio-button.directive.ts
index 5a3f125c..a311fcf9 100644
--- a/projects/mdb-angular-ui-kit/radio/radio-button.directive.ts
+++ b/projects/mdb-angular-ui-kit/radio/radio-button.directive.ts
@@ -2,9 +2,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbRadio]',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbRadio]',
+  standalone: false,
 })
 export class MdbRadioDirective {
   @Input()
diff --git a/projects/mdb-angular-ui-kit/radio/radio-group.directive.spec.ts b/projects/mdb-angular-ui-kit/radio/radio-group.directive.spec.ts
index b4e636a0..95dce45a 100644
--- a/projects/mdb-angular-ui-kit/radio/radio-group.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/radio/radio-group.directive.spec.ts
@@ -65,9 +65,9 @@ const basicTemplate = `
 `;
 
 @Component({
-    selector: 'mdb-radio-group-test',
-    template: basicTemplate,
-    standalone: false
+  selector: 'mdb-radio-group-test',
+  template: basicTemplate,
+  standalone: false,
 })
 class BasicRadioGroupComponent {
   checked = false;
diff --git a/projects/mdb-angular-ui-kit/radio/radio-group.directive.ts b/projects/mdb-angular-ui-kit/radio/radio-group.directive.ts
index b352110a..fb1bf8fd 100644
--- a/projects/mdb-angular-ui-kit/radio/radio-group.directive.ts
+++ b/projects/mdb-angular-ui-kit/radio/radio-group.directive.ts
@@ -14,16 +14,15 @@ import { MdbRadioDirective } from './radio-button.directive';
 
 export const MDB_RADIO_GROUP_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
-  // eslint-disable-next-line no-use-before-define, @typescript-eslint/no-use-before-define
   useExisting: forwardRef(() => MdbRadioGroupDirective),
   multi: true,
 };
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbRadioGroup]',
-    providers: [MDB_RADIO_GROUP_VALUE_ACCESSOR],
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbRadioGroup]',
+  providers: [MDB_RADIO_GROUP_VALUE_ACCESSOR],
+  standalone: false,
 })
 export class MdbRadioGroupDirective implements ControlValueAccessor, AfterContentInit, OnDestroy {
   @ContentChildren(MdbRadioDirective, { descendants: true }) radios: QueryList<MdbRadioDirective>;
diff --git a/projects/mdb-angular-ui-kit/radio/radio.directive.spec.ts b/projects/mdb-angular-ui-kit/radio/radio.directive.spec.ts
index 7111ea20..6ba75e5c 100644
--- a/projects/mdb-angular-ui-kit/radio/radio.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/radio/radio.directive.spec.ts
@@ -62,9 +62,9 @@ const basicTemplate = `
 `;
 
 @Component({
-    selector: 'mdb-radio-test',
-    template: basicTemplate,
-    standalone: false
+  selector: 'mdb-radio-test',
+  template: basicTemplate,
+  standalone: false,
 })
 class BasicRadioComponent {
   checked = false;
diff --git a/projects/mdb-angular-ui-kit/range/range.component.spec.ts b/projects/mdb-angular-ui-kit/range/range.component.spec.ts
index bc225bd6..99d20f5d 100644
--- a/projects/mdb-angular-ui-kit/range/range.component.spec.ts
+++ b/projects/mdb-angular-ui-kit/range/range.component.spec.ts
@@ -12,6 +12,7 @@ const template = `
 @Component({
   selector: 'mdb-range-test',
   template,
+  standalone: false,
 })
 class TestRangeComponent implements OnInit {
   @ViewChild(MdbRangeComponent) _range: MdbRangeComponent;
diff --git a/projects/mdb-angular-ui-kit/range/range.component.ts b/projects/mdb-angular-ui-kit/range/range.component.ts
index f650de15..b1f1f024 100644
--- a/projects/mdb-angular-ui-kit/range/range.component.ts
+++ b/projects/mdb-angular-ui-kit/range/range.component.ts
@@ -16,16 +16,15 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 export const RANGE_VALUE_ACCESOR: any = {
   provide: NG_VALUE_ACCESSOR,
-  // eslint-disable-next-line no-use-before-define, @typescript-eslint/no-use-before-define
   useExisting: forwardRef(() => MdbRangeComponent),
   multi: true,
 };
 @Component({
-    selector: 'mdb-range',
-    templateUrl: 'range.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [RANGE_VALUE_ACCESOR],
-    standalone: false
+  selector: 'mdb-range',
+  templateUrl: 'range.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [RANGE_VALUE_ACCESOR],
+  standalone: false,
 })
 export class MdbRangeComponent implements ControlValueAccessor, AfterViewInit {
   @ViewChild('input') input: ElementRef;
diff --git a/projects/mdb-angular-ui-kit/ripple/ripple-utils.ts b/projects/mdb-angular-ui-kit/ripple/ripple-utils.ts
index 69f732d0..bf148847 100644
--- a/projects/mdb-angular-ui-kit/ripple/ripple-utils.ts
+++ b/projects/mdb-angular-ui-kit/ripple/ripple-utils.ts
@@ -5,7 +5,6 @@ export function durationToMsNumber(time: string): number {
 }
 
 export function colorToRGB(color: any): number[] {
-  // eslint-disable-next-line no-shadow,@typescript-eslint/no-shadow
   function hexToRgb(color: any): any {
     const HEX_COLOR_LENGTH = 7;
     const IS_SHORT_HEX = color.length < HEX_COLOR_LENGTH;
@@ -19,7 +18,6 @@ export function colorToRGB(color: any): number[] {
     ];
   }
 
-  // eslint-disable-next-line no-shadow,@typescript-eslint/no-shadow
   function namedColorsToRgba(color: any): any {
     const tempElem = document.body.appendChild(document.createElement('fictum'));
     const flag = 'rgb(1, 2, 3)';
@@ -36,7 +34,6 @@ export function colorToRGB(color: any): number[] {
     return color;
   }
 
-  // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
   function rgbaToRgb(color: any): any {
     color = color.match(/[.\d]+/g).map((a) => +Number(a));
     color.length = 3;
diff --git a/projects/mdb-angular-ui-kit/ripple/ripple.directive.spec.ts b/projects/mdb-angular-ui-kit/ripple/ripple.directive.spec.ts
index 530ca0fe..6045bf52 100644
--- a/projects/mdb-angular-ui-kit/ripple/ripple.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/ripple/ripple.directive.spec.ts
@@ -19,6 +19,7 @@ const template = `
 @Component({
   selector: 'mdb-ripple-test',
   template,
+  standalone: false,
 })
 class TestRippleComponent {
   rippleCentered = true;
diff --git a/projects/mdb-angular-ui-kit/ripple/ripple.directive.ts b/projects/mdb-angular-ui-kit/ripple/ripple.directive.ts
index c48eedfd..e9270fe0 100644
--- a/projects/mdb-angular-ui-kit/ripple/ripple.directive.ts
+++ b/projects/mdb-angular-ui-kit/ripple/ripple.directive.ts
@@ -18,10 +18,10 @@ const BOOTSTRAP_COLORS = [
 ];
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbRipple]',
-    exportAs: 'mdbRipple',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbRipple]',
+  exportAs: 'mdbRipple',
+  standalone: false,
 })
 export class MdbRippleDirective {
   @Input()
diff --git a/projects/mdb-angular-ui-kit/scrollspy/scrollspy-element.directive.ts b/projects/mdb-angular-ui-kit/scrollspy/scrollspy-element.directive.ts
index dad12104..9e429947 100644
--- a/projects/mdb-angular-ui-kit/scrollspy/scrollspy-element.directive.ts
+++ b/projects/mdb-angular-ui-kit/scrollspy/scrollspy-element.directive.ts
@@ -12,9 +12,9 @@ import { MdbScrollspyService } from './scrollspy.service';
 import { DOCUMENT } from '@angular/common';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbScrollspyElement]',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbScrollspyElement]',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class MdbScrollspyElementDirective implements OnInit, AfterViewInit {
diff --git a/projects/mdb-angular-ui-kit/scrollspy/scrollspy-link.directive.ts b/projects/mdb-angular-ui-kit/scrollspy/scrollspy-link.directive.ts
index 202efdae..ee55601b 100644
--- a/projects/mdb-angular-ui-kit/scrollspy/scrollspy-link.directive.ts
+++ b/projects/mdb-angular-ui-kit/scrollspy/scrollspy-link.directive.ts
@@ -10,9 +10,9 @@ import {
 import { DOCUMENT } from '@angular/common';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbScrollspyLink]',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbScrollspyLink]',
+  standalone: false,
 })
 export class MdbScrollspyLinkDirective implements OnInit {
   @Input()
diff --git a/projects/mdb-angular-ui-kit/scrollspy/scrollspy-window.directive.ts b/projects/mdb-angular-ui-kit/scrollspy/scrollspy-window.directive.ts
index c200219e..bdf2778f 100644
--- a/projects/mdb-angular-ui-kit/scrollspy/scrollspy-window.directive.ts
+++ b/projects/mdb-angular-ui-kit/scrollspy/scrollspy-window.directive.ts
@@ -12,9 +12,9 @@ import { DOCUMENT } from '@angular/common';
 import { MdbScrollspyService } from './scrollspy.service';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbScrollspyWindow]',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbScrollspyWindow]',
+  standalone: false,
 })
 export class MdbScrollspyWindowDirective implements OnInit, AfterViewInit {
   private id: string;
diff --git a/projects/mdb-angular-ui-kit/scrollspy/scrollspy.directive.ts b/projects/mdb-angular-ui-kit/scrollspy/scrollspy.directive.ts
index 69a89ee5..868557a7 100644
--- a/projects/mdb-angular-ui-kit/scrollspy/scrollspy.directive.ts
+++ b/projects/mdb-angular-ui-kit/scrollspy/scrollspy.directive.ts
@@ -21,10 +21,10 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { isPlatformBrowser } from '@angular/common';
 
 @Component({
-    // eslint-disable-next-line @angular-eslint/component-selector
-    selector: '[mdbScrollspy]',
-    template: '<ng-content></ng-content>',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: '[mdbScrollspy]',
+  template: '<ng-content></ng-content>',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbScrollspyDirective implements OnInit, AfterContentInit, OnDestroy {
diff --git a/projects/mdb-angular-ui-kit/tabs/tab-content.directive.ts b/projects/mdb-angular-ui-kit/tabs/tab-content.directive.ts
index ed121cc7..f8e91973 100644
--- a/projects/mdb-angular-ui-kit/tabs/tab-content.directive.ts
+++ b/projects/mdb-angular-ui-kit/tabs/tab-content.directive.ts
@@ -3,10 +3,10 @@ import { Directive, InjectionToken, TemplateRef } from '@angular/core';
 export const MDB_TAB_CONTENT = new InjectionToken<MdbTabContentDirective>('MdbTabContentDirective');
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbTabContent]',
-    providers: [{ provide: MDB_TAB_CONTENT, useExisting: MdbTabContentDirective }],
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbTabContent]',
+  providers: [{ provide: MDB_TAB_CONTENT, useExisting: MdbTabContentDirective }],
+  standalone: false,
 })
 export class MdbTabContentDirective {
   constructor(public template: TemplateRef<any>) {}
diff --git a/projects/mdb-angular-ui-kit/tabs/tab-outlet.directive.ts b/projects/mdb-angular-ui-kit/tabs/tab-outlet.directive.ts
index a28779d9..351adf1e 100644
--- a/projects/mdb-angular-ui-kit/tabs/tab-outlet.directive.ts
+++ b/projects/mdb-angular-ui-kit/tabs/tab-outlet.directive.ts
@@ -14,9 +14,9 @@ import { takeUntil } from 'rxjs/operators';
 import { MdbTabComponent } from './tab.component';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbTabPortalOutlet]',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbTabPortalOutlet]',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class MdbTabPortalOutlet extends CdkPortalOutlet implements OnInit, OnDestroy {
diff --git a/projects/mdb-angular-ui-kit/tabs/tab-title.directive.ts b/projects/mdb-angular-ui-kit/tabs/tab-title.directive.ts
index 25cad73d..a30be04b 100644
--- a/projects/mdb-angular-ui-kit/tabs/tab-title.directive.ts
+++ b/projects/mdb-angular-ui-kit/tabs/tab-title.directive.ts
@@ -3,10 +3,10 @@ import { Directive, InjectionToken, TemplateRef } from '@angular/core';
 export const MDB_TAB_TITLE = new InjectionToken<MdbTabTitleDirective>('MdbTabTitleDirective');
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbTabTitle]',
-    providers: [{ provide: MDB_TAB_TITLE, useExisting: MdbTabTitleDirective }],
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbTabTitle]',
+  providers: [{ provide: MDB_TAB_TITLE, useExisting: MdbTabTitleDirective }],
+  standalone: false,
 })
 export class MdbTabTitleDirective {
   constructor(public template: TemplateRef<any>) {}
diff --git a/projects/mdb-angular-ui-kit/tabs/tab.component.ts b/projects/mdb-angular-ui-kit/tabs/tab.component.ts
index 230bcb2f..581a8427 100644
--- a/projects/mdb-angular-ui-kit/tabs/tab.component.ts
+++ b/projects/mdb-angular-ui-kit/tabs/tab.component.ts
@@ -17,9 +17,9 @@ const SHOW_TRANSITION_DELAY = 150; // Time of transition taken from styles
 const TRANSITION_PADDING = 5; // Value from standard added via executeAfterTransition function
 
 @Component({
-    selector: 'mdb-tab',
-    templateUrl: './tab.component.html',
-    standalone: false
+  selector: 'mdb-tab',
+  templateUrl: './tab.component.html',
+  standalone: false,
 })
 export class MdbTabComponent implements OnInit {
   @ContentChild(MDB_TAB_CONTENT, { read: TemplateRef, static: true })
diff --git a/projects/mdb-angular-ui-kit/tabs/tabs.component.ts b/projects/mdb-angular-ui-kit/tabs/tabs.component.ts
index 19589c7a..ed922aeb 100644
--- a/projects/mdb-angular-ui-kit/tabs/tabs.component.ts
+++ b/projects/mdb-angular-ui-kit/tabs/tabs.component.ts
@@ -20,9 +20,9 @@ export class MdbTabChange {
 }
 
 @Component({
-    selector: 'mdb-tabs',
-    templateUrl: './tabs.component.html',
-    standalone: false
+  selector: 'mdb-tabs',
+  templateUrl: './tabs.component.html',
+  standalone: false,
 })
 export class MdbTabsComponent implements AfterContentInit, OnDestroy {
   @ContentChildren(MdbTabComponent) tabs: QueryList<MdbTabComponent>;
diff --git a/projects/mdb-angular-ui-kit/tabs/tabs.spec.ts b/projects/mdb-angular-ui-kit/tabs/tabs.spec.ts
index 43f70255..3b9eb2af 100644
--- a/projects/mdb-angular-ui-kit/tabs/tabs.spec.ts
+++ b/projects/mdb-angular-ui-kit/tabs/tabs.spec.ts
@@ -22,8 +22,8 @@ const tabsTemplate = `
 `;
 
 @Component({
-    template: tabsTemplate,
-    standalone: false
+  template: tabsTemplate,
+  standalone: false,
 })
 export class TabsTestComponent {
   pills = false;
diff --git a/projects/mdb-angular-ui-kit/tooltip/tooltip.component.ts b/projects/mdb-angular-ui-kit/tooltip/tooltip.component.ts
index 3e9089c0..2d09ecac 100644
--- a/projects/mdb-angular-ui-kit/tooltip/tooltip.component.ts
+++ b/projects/mdb-angular-ui-kit/tooltip/tooltip.component.ts
@@ -8,18 +8,18 @@ import {
 import { trigger, style, animate, transition, state, AnimationEvent } from '@angular/animations';
 import { Subject } from 'rxjs';
 @Component({
-    selector: 'mdb-tooltip',
-    templateUrl: 'tooltip.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    animations: [
-        trigger('fade', [
-            state('visible', style({ opacity: 1 })),
-            state('hidden', style({ opacity: 0 })),
-            transition('visible => hidden', animate('150ms linear')),
-            transition(':enter', animate('150ms linear')),
-        ]),
-    ],
-    standalone: false
+  selector: 'mdb-tooltip',
+  templateUrl: 'tooltip.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('fade', [
+      state('visible', style({ opacity: 1 })),
+      state('hidden', style({ opacity: 0 })),
+      transition('visible => hidden', animate('150ms linear')),
+      transition(':enter', animate('150ms linear')),
+    ]),
+  ],
+  standalone: false,
 })
 export class MdbTooltipComponent {
   @Input() title: string;
diff --git a/projects/mdb-angular-ui-kit/tooltip/tooltip.directive.spec.ts b/projects/mdb-angular-ui-kit/tooltip/tooltip.directive.spec.ts
index 6f3050c9..3e4c063b 100644
--- a/projects/mdb-angular-ui-kit/tooltip/tooltip.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/tooltip/tooltip.directive.spec.ts
@@ -152,8 +152,8 @@ describe('MDB Tooltip', () => {
 });
 
 @Component({
-    selector: 'mdb-test-tooltip',
-    template: ` <button
+  selector: 'mdb-test-tooltip',
+  template: ` <button
     [trigger]="testTrigger"
     [mdbTooltip]="testMdbTooltip"
     [placement]="testPlacement"
@@ -161,7 +161,7 @@ describe('MDB Tooltip', () => {
   >
     MDB Button
   </button>`,
-    standalone: false
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class TestTooltipComponent {
@@ -172,19 +172,19 @@ class TestTooltipComponent {
 }
 
 @Component({
-    selector: 'mdb-test-tooltip2',
-    template: ` <button mdbTooltip="testMdbTooltip" trigger="click">MDB Button</button>`,
-    standalone: false
+  selector: 'mdb-test-tooltip2',
+  template: ` <button mdbTooltip="testMdbTooltip" trigger="click">MDB Button</button>`,
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class TestTooltipComponent2 {}
 
 @Component({
-    selector: 'mdb-test-tooltip2',
-    template: ` <button mdbTooltip="testMdbTooltip" tooltipDisabled="true" trigger="click">
+  selector: 'mdb-test-tooltip2',
+  template: ` <button mdbTooltip="testMdbTooltip" tooltipDisabled="true" trigger="click">
     MDB Button
   </button>`,
-    standalone: false
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 class TestTooltipComponent3 {}
diff --git a/projects/mdb-angular-ui-kit/tooltip/tooltip.directive.ts b/projects/mdb-angular-ui-kit/tooltip/tooltip.directive.ts
index 206676ed..265e3bd3 100644
--- a/projects/mdb-angular-ui-kit/tooltip/tooltip.directive.ts
+++ b/projects/mdb-angular-ui-kit/tooltip/tooltip.directive.ts
@@ -22,10 +22,10 @@ import { fromEvent, Subject } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbTooltip]',
-    exportAs: 'mdbTooltip',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbTooltip]',
+  exportAs: 'mdbTooltip',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbTooltipDirective implements OnInit, OnDestroy {
@@ -37,7 +37,7 @@ export class MdbTooltipDirective implements OnInit, OnDestroy {
   @Input() trigger = 'hover focus';
   @Input() delayShow = 0;
   @Input() delayHide = 0;
-  @Input() offset = 0;
+  @Input() offset = 6;
 
   @Output() tooltipShow: EventEmitter<MdbTooltipDirective> = new EventEmitter();
   @Output() tooltipShown: EventEmitter<MdbTooltipDirective> = new EventEmitter();
diff --git a/projects/mdb-angular-ui-kit/validation/error.directive.ts b/projects/mdb-angular-ui-kit/validation/error.directive.ts
index 8101fe61..ad7c17ea 100644
--- a/projects/mdb-angular-ui-kit/validation/error.directive.ts
+++ b/projects/mdb-angular-ui-kit/validation/error.directive.ts
@@ -13,9 +13,9 @@ import { takeUntil } from 'rxjs/operators';
 let defaultIdNumber = 0;
 
 @Component({
-    selector: 'mdb-error',
-    template: '<ng-content></ng-content>',
-    standalone: false
+  selector: 'mdb-error',
+  template: '<ng-content></ng-content>',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbErrorDirective implements OnInit, OnDestroy {
diff --git a/projects/mdb-angular-ui-kit/validation/success.directive.ts b/projects/mdb-angular-ui-kit/validation/success.directive.ts
index 3db7fc92..0eeeacc5 100644
--- a/projects/mdb-angular-ui-kit/validation/success.directive.ts
+++ b/projects/mdb-angular-ui-kit/validation/success.directive.ts
@@ -13,9 +13,9 @@ import { takeUntil } from 'rxjs/operators';
 let defaultIdNumber = 0;
 
 @Component({
-    selector: 'mdb-success',
-    template: '<ng-content></ng-content>',
-    standalone: false
+  selector: 'mdb-success',
+  template: '<ng-content></ng-content>',
+  standalone: false,
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbSuccessDirective implements OnInit, OnDestroy {
diff --git a/projects/mdb-angular-ui-kit/validation/validate.directive.spec.ts b/projects/mdb-angular-ui-kit/validation/validate.directive.spec.ts
index 3f9e57e8..eb24d105 100644
--- a/projects/mdb-angular-ui-kit/validation/validate.directive.spec.ts
+++ b/projects/mdb-angular-ui-kit/validation/validate.directive.spec.ts
@@ -9,6 +9,7 @@ const template = `
 @Component({
   selector: 'mdb-collapse-test',
   template,
+  standalone: false,
 })
 class TestValidateComponent {
   success = true;
diff --git a/projects/mdb-angular-ui-kit/validation/validate.directive.ts b/projects/mdb-angular-ui-kit/validation/validate.directive.ts
index 1e302574..41d649b8 100644
--- a/projects/mdb-angular-ui-kit/validation/validate.directive.ts
+++ b/projects/mdb-angular-ui-kit/validation/validate.directive.ts
@@ -2,9 +2,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
 
 @Directive({
-    // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: '[mdbValidate]',
-    standalone: false
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[mdbValidate]',
+  standalone: false,
 })
 export class MdbValidateDirective implements OnInit {
   private _validate = true;