From: Alfonso Martínez <almartin@redhat.com>
Date: Wed, 14 Oct 2020 11:29:35 +0000 (+0200)
Subject: mgr/dashboard: set 'vendor/variables' SASS module as the single source of truth
X-Git-Tag: v16.1.0~818^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=79321d44615e551a9ee81b477e757002ff32d33d;p=ceph.git

mgr/dashboard: set 'vendor/variables' SASS module as the single source of truth

Fixes: https://tracker.ceph.com/issues/46869
Signed-off-by: Alfonso Martínez <almartin@redhat.com>
---

diff --git a/doc/dev/developer_guide/dash-devel.rst b/doc/dev/developer_guide/dash-devel.rst
index 29a84f683d3d..6c9fa1fb8ea2 100644
--- a/doc/dev/developer_guide/dash-devel.rst
+++ b/doc/dev/developer_guide/dash-devel.rst
@@ -795,11 +795,11 @@ to add the file replacements manually to the angular.json file
 Nevertheless you should stick to the suggested naming scheme because it makes
 it easier for you to use glob expressions once it's supported in the future.
 
-To change the variable defaults you can overwrite them in the file
-``./frontend/src/vendor.variables.scss``. Just reassign the variable you want
-to change, for example ``$color-primary: teal;``
+To change the variable defaults or add your own ones you can overwrite them in
+``./frontend/src/styles/vendor/_variables.scss``.
+Just reassign the variable you want to change, for example ``$color-primary: teal;``
 To overwrite or extend the default CSS, you can add your own styles in
-``./frontend/src/vendor.overrides.scss``.
+``./frontend/src/styles/vendor/_style-overrides.scss``.
 
 I18N
 ----
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss
index 6a3121191987..3334f06182d6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 // Angular2-Tree Component
 ::ng-deep cd-cephfs-directories tree-root {
@@ -8,10 +8,10 @@
 }
 
 .quota-origin {
-  color: bd.$primary;
+  color: vv.$primary;
   cursor: pointer;
 
   &:hover {
-    color: bd.$gray-900;
+    color: vv.$gray-900;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
index 7638196c49dc..9db9ddc95f64 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 p {
   font-family: monospace;
@@ -27,19 +27,19 @@ p {
   }
 
   .err {
-    color: bd.$danger;
+    color: vv.$danger;
   }
 
   .warn {
-    color: bd.$warning;
+    color: vv.$warning;
   }
 
   .info {
-    color: bd.$info;
+    color: vv.$info;
   }
 
   .debug {
-    color: bd.$gray-700;
+    color: vv.$gray-700;
   }
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss
index 23560b00427c..64e7a9822e22 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss
@@ -1,5 +1,4 @@
 @use './src/styles/chart-tooltip';
-@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 $canvas-width: 100%;
 $canvas-height: 100%;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
index fe26f5db0312..8b45a05a2afa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 cd-info-card {
   padding: 0 0.5vw;
@@ -27,7 +27,7 @@ cd-info-card {
 }
 
 .card-text-error {
-  color: bd.$danger;
+  color: vv.$danger;
   display: inline;
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
index 2e366a87d065..43cbe18ffcf0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .info-card-popover-cluster-status {
   max-height: 20vh;
@@ -12,31 +12,31 @@
   }
 }
 
-@media (max-width: bd.$screen-lg-max) {
+@media (max-width: vv.$screen-lg-max) {
   .info-card-popover-cluster-status {
     max-width: 31vw;
   }
 }
 
-@media (max-width: bd.$screen-md-max) {
+@media (max-width: vv.$screen-md-max) {
   .info-card-popover-cluster-status {
     max-width: 46vw;
   }
 }
-@media (max-width: bd.$screen-sm-max) {
+@media (max-width: vv.$screen-sm-max) {
   .info-card-popover-cluster-status {
     max-width: 83vw;
   }
 }
 
 .info-card-content-clickable {
-  border: 1px solid bd.$gray-200;
+  border: 1px solid vv.$gray-200;
   border-radius: 3px;
   cursor: pointer;
   padding: 7px;
 }
 
 .info-card-content-clickable:hover {
-  background-color: bd.$gray-200;
-  border-color: bd.$gray-400;
+  background-color: vv.$gray-200;
+  border-color: vv.$gray-400;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
index a0c5d1ce87db..897d09a9a4b9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 @use './src/styles/defaults/mixins';
 
 $card-font-min-width: 320px;
@@ -13,7 +13,7 @@ $card-font-max-size: 21px;
     $card-font-min-size,
     $card-font-max-size
   );
-  border: 0.5px solid bd.$gray-300;
+  border: 0.5px solid vv.$gray-300;
   border-radius: 3px;
   height: 100%;
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss
index 7a3906e4750a..709e8aeb2428 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss
@@ -1,19 +1,19 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 ::ng-deep cd-pool-list {
   .pg-clean {
-    color: bd.$success;
+    color: vv.$success;
   }
 
   .pg-working {
-    color: bd.$primary;
+    color: vv.$primary;
   }
 
   .pg-warning {
-    color: bd.$warning;
+    color: vv.$warning;
   }
 
   .pg-unknown {
-    color: bd.$danger;
+    color: vv.$danger;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
index 4b7dbed62fba..25df0569e2b2 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 ::ng-deep cd-login-password-form {
   h4 {
@@ -9,16 +9,16 @@
   .btn-password:focus,
   .form-control,
   .form-control:focus {
-    background-color: bd.$gray-800;
-    color: bd.$white;
+    background-color: vv.$gray-800;
+    color: vv.$white;
   }
 
   .form-control::placeholder {
-    color: bd.$gray-500;
+    color: vv.$gray-500;
   }
 
   .btn-password:focus {
-    outline-color: bd.$primary;
+    outline-color: vv.$primary;
   }
 
   button.btn:not(:first-child) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
index 486b1785072f..0fdc3c6ba327 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
@@ -1,17 +1,17 @@
 @use 'sass:map';
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
-$dark-secondary: darken(bd.$secondary, 4%);
+$dark-secondary: darken(vv.$secondary, 4%);
 
 ::ng-deep cd-login {
   .form-group {
     background-color: $dark-secondary;
-    border-left: 4px solid bd.$white;
+    border-left: 4px solid vv.$white;
     height: auto;
     margin-bottom: 2rem;
 
     &:focus-within {
-      border-left: 4px solid map.get(bd.$theme-colors, 'accent');
+      border-left: 4px solid map.get(vv.$theme-colors, 'accent');
     }
   }
 
@@ -22,17 +22,17 @@ $dark-secondary: darken(bd.$secondary, 4%);
     background-color: $dark-secondary;
     border: 0;
     box-shadow: none;
-    color: bd.$body-color-bright;
+    color: vv.$body-color-bright;
     filter: none;
     outline: none;
   }
 
   .placeholder {
-    color: bd.$gray-600;
+    color: vv.$gray-600;
   }
 
   .btn-password:focus {
-    outline-color: bd.$primary;
+    outline-color: vv.$primary;
   }
 }
 
@@ -40,7 +40,7 @@ $dark-secondary: darken(bd.$secondary, 4%);
 @keyframes autofill {
   to {
     background-color: $dark-secondary;
-    color: bd.$body-color-bright;
+    color: vv.$body-color-bright;
   }
 }
 
@@ -49,6 +49,6 @@ input:-webkit-autofill {
   animation-name: autofill;
   border-radius: 0;
   box-shadow: 0 0 0 1000px $dark-secondary inset;
-  -webkit-text-fill-color: bd.$body-color-bright;
+  -webkit-text-fill-color: vv.$body-color-bright;
   transition-property: none;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss
index 606d10a6d9db..2ec160998582 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss
@@ -1,9 +1,9 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .fa {
   font-size: large;
 
   &.fa-square-o {
-    color: bd.$gray-400;
+    color: vv.$gray-400;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
index 43645d73cac8..f55ae8d0c513 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
@@ -1,11 +1,11 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 ::ng-deep cd-login-layout .login {
-  background-color: bd.$secondary;
+  background-color: vv.$secondary;
   background-image: url('../../../../assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
-  color: bd.$body-color-bright;
+  color: vv.$body-color-bright;
 
   header {
     position: absolute;
@@ -17,7 +17,7 @@
 
         li a {
           &:hover {
-            background-color: bd.$primary;
+            background-color: vv.$primary;
           }
         }
       }
@@ -36,10 +36,10 @@
   }
 
   a {
-    color: bd.$fg-color-over-dark-bg;
+    color: vv.$fg-color-over-dark-bg;
 
     &:hover {
-      color: bd.$fg-hover-color-over-dark-bg;
+      color: vv.$fg-hover-color-over-dark-bg;
     }
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
index 44e07b322e82..1c3947873e21 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
@@ -1,7 +1,7 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .dashboard {
-  background-color: bd.$gray-200;
+  background-color: vv.$gray-200;
   margin: 0;
   padding: 0;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
index cd11eb1e82d2..78c7fe550d57 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
@@ -1,12 +1,12 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .about-container {
-  background-color: bd.$secondary;
+  background-color: vv.$secondary;
   background-image: url('../../../../assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
-  color: bd.$white;
-  text-shadow: 1px 1px bd.$secondary;
+  color: vv.$white;
+  text-shadow: 1px 1px vv.$secondary;
 }
 
 .product-versions {
@@ -22,7 +22,7 @@
 }
 
 .modal-header .close {
-  color: bd.$white;
+  color: vv.$white;
   font-size: 2em;
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index 288bc1e9729f..f559abbf2b95 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 /* ---------------------------------------------------
     NAVBAR STYLE
@@ -6,16 +6,16 @@
 
 ::ng-deep cd-navigation .cd-navbar-top {
   .cd-navbar-brand {
-    background: bd.$secondary;
-    border-top: 4px solid bd.$primary;
+    background: vv.$secondary;
+    border-top: 4px solid vv.$primary;
 
     &.isPwdDisplayed {
-      top: bd.$top-notification-height;
+      top: vv.$top-notification-height;
     }
 
     .navbar-brand,
     .navbar-brand:hover {
-      color: bd.$gray-200;
+      color: vv.$gray-200;
       height: auto;
       padding: 0;
     }
@@ -33,7 +33,7 @@
       }
 
       .fa-navicon {
-        color: bd.$gray-200;
+        color: vv.$gray-200;
       }
     }
 
@@ -42,8 +42,8 @@
     }
 
     .cd-navbar-utility > .active > a {
-      background-color: bd.$primary;
-      color: bd.$gray-200;
+      background-color: vv.$primary;
+      color: vv.$gray-200;
     }
 
     .cd-navbar-utility > li > .open > a,
@@ -51,14 +51,14 @@
     .cd-navbar-utility > li > .open > a:hover {
       background-color: transparent;
       border-color: transparent;
-      color: bd.$gray-200;
+      color: vv.$gray-200;
     }
   }
 
   .navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
   .navbar-nav > li > .cd-navbar > a,
   .navbar-nav > li > a {
-    color: bd.$gray-200;
+    color: vv.$gray-200;
     display: block;
     line-height: 1;
     padding: 13.5px 18px !important;
@@ -68,7 +68,7 @@
 
   .navbar-nav .nav-link,
   .navbar-nav .nav-link:hover {
-    color: bd.$gray-200;
+    color: vv.$gray-200;
   }
 
   .navbar-nav > li > .cd-navbar > [ngbDropdown] > a:hover,
@@ -76,7 +76,7 @@
   .navbar-nav > li > .cd-navbar > a:hover,
   .navbar-nav > li > a:hover,
   .navbar-nav > li:hover {
-    background-color: bd.$primary;
+    background-color: vv.$primary;
   }
 
   .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
@@ -90,10 +90,10 @@
   .navbar-nav > .open > a:hover {
     background-color: transparent;
     border-color: transparent;
-    color: bd.$gray-200;
+    color: vv.$gray-200;
   }
 
-  @media (min-width: bd.$screen-md-min) {
+  @media (min-width: vv.$screen-md-min) {
     .cd-navbar-utility {
       border-bottom: 0;
       font-size: 1.1rem;
@@ -103,7 +103,7 @@
     }
   }
 
-  @media (max-width: bd.$screen-sm-max) {
+  @media (max-width: vv.$screen-sm-max) {
     .navbar-nav {
       margin: 0;
 
@@ -112,24 +112,24 @@
       }
 
       .open .dropdown-menu {
-        background-color: bd.$primary;
+        background-color: vv.$primary;
         border: 0;
         padding-bottom: 0;
         padding-top: 0;
       }
 
       .open .dropdown-menu > li > a {
-        color: bd.$gray-200;
+        color: vv.$gray-200;
         padding: 5px 15px 5px 35px;
       }
 
       .open .dropdown-menu > .active > a {
-        background-color: bd.$primary;
+        background-color: vv.$primary;
       }
     }
 
     .navbar-nav > li > a:hover {
-      background-color: bd.$primary;
+      background-color: vv.$primary;
     }
   }
 }
@@ -143,9 +143,9 @@ $sidebar-width: 200px;
 .cd-navbar-primary .active > a,
 .cd-navbar-primary > .active > a:focus,
 .cd-navbar-primary > .active > a:hover {
-  background-color: bd.$primary !important;
+  background-color: vv.$primary !important;
   border: 0 !important;
-  color: bd.$gray-200 !important;
+  color: vv.$gray-200 !important;
 }
 
 .wrapper {
@@ -153,13 +153,13 @@ $sidebar-width: 200px;
   width: 100%;
 
   #sidebar {
-    background: bd.$secondary;
+    background: vv.$secondary;
     bottom: 0;
-    color: bd.$white;
+    color: vv.$white;
     left: 0;
     overflow-y: auto;
     position: fixed;
-    top: bd.$navbar-height;
+    top: vv.$navbar-height;
     transition: all 0.3s;
     width: $sidebar-width;
     z-index: 999;
@@ -175,12 +175,12 @@ $sidebar-width: 200px;
       }
 
       p {
-        color: bd.$white;
+        color: vv.$white;
         padding: 10px;
       }
 
       li a {
-        color: bd.$white;
+        color: vv.$white;
         display: block;
         font-size: 1.1em;
         padding: 10px;
@@ -189,8 +189,8 @@ $sidebar-width: 200px;
         text-decoration: none;
 
         &:hover {
-          background: bd.$primary;
-          color: bd.$white;
+          background: vv.$primary;
+          color: vv.$white;
         }
 
         > .badge {
@@ -200,7 +200,7 @@ $sidebar-width: 200px;
 
       li.active > a,
       li > a a[aria-expanded='true'] {
-        color: bd.$white;
+        color: vv.$white;
       }
     }
   }
@@ -224,7 +224,7 @@ $sidebar-width: 200px;
   }
 
   ul ul a {
-    background: lighten(bd.$secondary, 10);
+    background: lighten(vv.$secondary, 10);
     font-size: 0.9em !important;
     padding-left: 40px !important;
   }
@@ -246,7 +246,7 @@ $sidebar-width: 200px;
   bottom: 0;
   position: absolute;
   right: 0;
-  top: bd.$navbar-height;
+  top: vv.$navbar-height;
   transition: all 0.3s;
   width: calc(100% - #{$sidebar-width});
 
@@ -262,19 +262,19 @@ $sidebar-width: 200px;
 @for $i from 1 through 2 {
   :host.top-notification-#{$i} {
     .cd-navbar-top .cd-navbar-brand {
-      top: bd.$top-notification-height * $i;
+      top: vv.$top-notification-height * $i;
     }
 
     #sidebar {
-      top: bd.$navbar-height + bd.$top-notification-height * $i;
+      top: vv.$navbar-height + vv.$top-notification-height * $i;
     }
 
     #content {
-      top: bd.$navbar-height + bd.$top-notification-height * $i;
+      top: vv.$navbar-height + vv.$top-notification-height * $i;
     }
 
     cd-notifications-sidebar {
-      top: bd.$navbar-height + bd.$top-notification-height * $i + 10px;
+      top: vv.$navbar-height + vv.$top-notification-height * $i + 10px;
     }
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
index 22ebd0ecf057..5729f7625991 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
@@ -1,17 +1,17 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .running i {
-  color: bd.$primary;
+  color: vv.$primary;
 }
 
 .running:hover i {
-  color: bd.$white;
+  color: vv.$white;
 }
 
 a {
   .dot {
-    background-color: bd.$primary;
-    border: 2px solid bd.$secondary;
+    background-color: vv.$primary;
+    border: 2px solid vv.$secondary;
     border-radius: 50%;
     height: 11px;
     position: absolute;
@@ -21,7 +21,7 @@ a {
   }
 
   &:hover .dot {
-    background-color: bd.$white;
-    border-color: bd.$primary;
+    background-color: vv.$white;
+    border-color: vv.$primary;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
index 5266834303cd..861b607cb774 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
@@ -1,7 +1,7 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 i {
-  color: bd.$primary;
+  color: vv.$primary;
   cursor: pointer;
   padding-left: 4px;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
index 52bb484f2a5e..8bbb3b95feca 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
@@ -1,11 +1,11 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 :host {
   bottom: 10px;
   max-width: 90vw;
   position: fixed;
   right: -350px;
-  top: bd.$navbar-height + 10px;
+  top: vv.$navbar-height + 10px;
 
   transition: all 0.6s;
 
@@ -31,14 +31,14 @@ ngx-simplebar {
 }
 
 .separator {
-  background-color: bd.$gray-200;
-  color: bd.$gray-600;
+  background-color: vv.$gray-200;
+  color: vv.$gray-600;
   font-size: 1rem;
   padding: 5px 12px;
 }
 
 .btn-link .fa-trash-o {
-  color: bd.$black;
+  color: vv.$black;
 }
 
 table {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss
index aae5de5e9681..e1271c5e4202 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss
@@ -1,7 +1,7 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .badge-remove {
-  color: bd.$white;
+  color: vv.$white;
 }
 
 i.fa-pencil {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss
index 252b44cd6cb9..ce38728f7a44 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss
@@ -1,13 +1,13 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .select-menu-item {
-  border-bottom: 1px solid bd.$datatable-divider-color;
+  border-bottom: 1px solid vv.$datatable-divider-color;
   cursor: pointer;
   display: block;
   font-size: 1rem;
 
   &:hover {
-    background-color: bd.$gray-200;
+    background-color: vv.$gray-200;
   }
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss
index e0cd3e55b0d1..ef97d15d14da 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss
@@ -1,11 +1,11 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .bg-info {
-  background-color: bd.$primary !important;
+  background-color: vv.$primary !important;
 }
 
 .bg-freespace {
-  background-color: bd.$gray-400 !important;
+  background-color: vv.$gray-400 !important;
 }
 
 .progress {
@@ -18,7 +18,7 @@
   }
 
   span {
-    color: bd.$black;
+    color: vv.$black;
     display: block;
     font-weight: normal;
     position: absolute;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index b19c25391781..bde26288494d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -1,8 +1,8 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 @use './src/styles/defaults/mixins';
 
 @mixin row-details-icon {
-  color: bd.$gray-900;
+  color: vv.$gray-900;
   font-family: 'ForkAwesome', sans-serif;
   font-size: 1rem;
   line-height: 1;
@@ -12,7 +12,7 @@
   margin-bottom: 25px;
 
   .separator {
-    border-left: 1px solid bd.$datatable-divider-color;
+    border-left: 1px solid vv.$datatable-divider-color;
     display: inline-block;
     height: 30px;
     margin-left: 5px;
@@ -21,7 +21,7 @@
   }
 
   .widget-toolbar {
-    border-left: 1px solid bd.$datatable-divider-color;
+    border-left: 1px solid vv.$datatable-divider-color;
     float: right;
     padding: 0 8px;
 
@@ -37,8 +37,8 @@
 }
 
 .dataTables_header {
-  background-color: bd.$gray-100;
-  border: 1px solid bd.$gray-400;
+  background-color: vv.$gray-100;
+  border: 1px solid vv.$gray-400;
   border-bottom: 0;
   padding: 5px;
   position: relative;
@@ -52,7 +52,7 @@
   }
 
   .input-group {
-    border-left: 1px solid bd.$datatable-divider-color;
+    border-left: 1px solid vv.$datatable-divider-color;
     float: right;
     max-width: 250px;
     padding-left: 8px;
@@ -75,13 +75,13 @@
     padding: 0 8px;
 
     .badge-remove {
-      color: bd.$white;
+      color: vv.$white;
     }
   }
 }
 
 ::ng-deep cd-table .cd-datatable {
-  border: 1px solid bd.$gray-400;
+  border: 1px solid vv.$gray-400;
   margin-bottom: 0;
   max-width: none !important;
 
@@ -94,10 +94,10 @@
     width: 100%;
 
     .container {
-      background-color: bd.$primary;
+      background-color: vv.$primary;
 
       .bar {
-        background-color: bd.$primary;
+        background-color: vv.$primary;
         height: 100%;
         left: 0;
         overflow: hidden;
@@ -107,7 +107,7 @@
 
       .bar::before {
         animation: progress-loading 3s linear infinite;
-        background-color: bd.$primary;
+        background-color: vv.$primary;
         content: '';
         display: block;
         height: 100%;
@@ -120,14 +120,14 @@
 
   .datatable-header {
     background-clip: padding-box;
-    background-color: bd.$gray-100;
-    background-image: linear-gradient(to bottom, bd.$gray-100 0, bd.$gray-200 100%);
+    background-color: vv.$gray-100;
+    background-image: linear-gradient(to bottom, vv.$gray-100 0, vv.$gray-200 100%);
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
 
     .sort-asc,
     .sort-desc {
-      color: bd.$primary;
+      color: vv.$primary;
     }
 
     .datatable-header-cell {
@@ -175,7 +175,7 @@
     margin-bottom: -6px;
 
     .empty-row {
-      background-color: lighten(bd.$primary, 45%);
+      background-color: lighten(vv.$primary, 45%);
       font-style: italic;
       font-weight: bold;
       padding-bottom: 5px;
@@ -185,23 +185,23 @@
 
     .datatable-body-row {
       &.clickable:hover .datatable-row-group {
-        background-color: lighten(bd.$primary, 45%);
+        background-color: lighten(vv.$primary, 45%);
         transition-duration: 0.3s;
         transition-property: background;
         transition-timing-function: linear;
       }
 
       &.datatable-row-even {
-        background-color: bd.$white;
+        background-color: vv.$white;
       }
 
       &.datatable-row-odd {
-        background-color: bd.$gray-100;
+        background-color: vv.$gray-100;
       }
 
       &.active,
       &.active:hover {
-        background-color: lighten(bd.$primary, 35%);
+        background-color: lighten(vv.$primary, 35%);
       }
 
       .datatable-body-cell {
@@ -219,7 +219,7 @@
     }
 
     .datatable-row-detail {
-      border-bottom: 2px solid bd.$gray-400;
+      border-bottom: 2px solid vv.$gray-400;
       overflow-y: visible !important;
       padding: 20px;
     }
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
index 47d09ae24f2d..29e1f1cc6a89 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .chart-container {
   cursor: pointer;
@@ -12,9 +12,9 @@ canvas {
 }
 
 .chartjs-tooltip {
-  background: rgba(bd.$black, 0.7);
+  background: rgba(vv.$black, 0.7);
   border-radius: 3px;
-  color: bd.$white;
+  color: vv.$white;
   font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
   opacity: 0;
   pointer-events: none;
@@ -41,7 +41,7 @@ canvas {
 }
 
 .chartjs-tooltip::after {
-  border-color: bd.$black transparent transparent transparent;
+  border-color: vv.$black transparent transparent transparent;
   border-style: solid;
   border-width: 5px;
   content: ' ';
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
index ac5a6bbeec90..576320f5badf 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
@@ -1,8 +1,8 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 /* Basics */
 html {
-  background-color: bd.$body-bg;
+  background-color: vv.$body-bg;
 }
 
 html,
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss
index a0590861c52b..13cb91d7136f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 /* Reset checkbox success color */
 .was-validated .custom-control-input:valid,
@@ -27,12 +27,12 @@
 
 /* Buttons */
 .btn-light {
-  background-color: bd.$white;
-  border-color: bd.$gray-400 !important;
+  background-color: vv.$white;
+  border-color: vv.$gray-400 !important;
 
   &:hover {
-    background-color: bd.$gray-300;
-    border-color: bd.$gray-600 !important;
+    background-color: vv.$gray-300;
+    border-color: vv.$gray-600 !important;
   }
 }
 
@@ -55,8 +55,8 @@
 }
 
 .btn-primary .badge {
-  background-color: bd.$gray-200;
-  color: bd.$primary;
+  background-color: vv.$gray-200;
+  color: vv.$primary;
 }
 
 .btn-group > .btn > i.fa,
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss
index 1b8e3f3bed7b..ee0704211158 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 /* Dropdown */
 .dropdown-menu {
@@ -20,13 +20,13 @@
 }
 
 .dropdown-menu > .active > a {
-  background-color: bd.$primary;
-  color: bd.$gray-200;
+  background-color: vv.$primary;
+  color: vv.$gray-200;
 
   &,
   &:hover,
   &:focus {
-    background-color: darken(bd.$primary, 10);
+    background-color: darken(vv.$primary, 10);
   }
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
index dccdfbbc311a..cac201a96a6f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
@@ -1,8 +1,8 @@
-@use '../defaults/bootstrap-defaults' as bd;
+@use '../vendor/variables' as vv;
 
 /* Forms */
 .required::after {
-  color: bd.$danger;
+  color: vv.$danger;
   content: '*';
   font-size: 1.167rem;
   padding-left: 4px;
@@ -17,8 +17,8 @@
   display: table-cell;
 
   &:focus {
-    border-color: rgba(bd.$primary, 0.8);
-    box-shadow: inset 0 1px 1px rgba(bd.$black, 0.75), 0 0 8px 2px rgba(bd.$primary, 0.5);
+    border-color: rgba(vv.$primary, 0.8);
+    box-shadow: inset 0 1px 1px rgba(vv.$black, 0.75), 0 0 8px 2px rgba(vv.$primary, 0.5);
     outline: 0;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss
index ebc002383ebf..e4074c92cf5a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss
@@ -1,6 +1,6 @@
-@use '../defaults/bootstrap-defaults' as bd;
+@use '../vendor/variables' as vv;
 
 /* Grid */
 .container-fluid {
-  padding: 0 bd.$grid-gutter-width;
+  padding: 0 vv.$grid-gutter-width;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss
index 15a6d15f55ba..2bad31f40512 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss
@@ -1,5 +1,5 @@
-@use '../defaults/bootstrap-defaults' as bd;
+@use '../vendor/variables' as vv;
 
 .nav-tabs {
-  margin-bottom: bd.$nav-tabs-margin-bottom;
+  margin-bottom: vv.$nav-tabs-margin-bottom;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss
index e5a6a01d77a6..ac2487cbb817 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 #toast-container {
   margin-top: 2vw;
@@ -7,7 +7,7 @@
     margin-top: 2.5vw;
   }
 
-  @media (max-width: bd.$screen-md-max) {
+  @media (max-width: vv.$screen-md-max) {
     margin-top: 9vw;
   }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
index 52cc443b982b..4f40aa73971c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@@ -1,5 +1,3 @@
-@use '../vendor/variables';
-
 // Color system
 
 $white: #fff !default;
@@ -17,62 +15,66 @@ $black: #000 !default;
 $blue: #007bff !default;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
-$pink: #a94442;
-$red: #ef5c55;
+$pink: #a94442 !default;
+$red: #ef5c55 !default;
 $orange: #fd7e14 !default;
-$yellow: #ffc200;
-$green: #0b0;
+$yellow: #ffc200 !default;
+$green: #0b0 !default;
 $teal: #20c997 !default;
 $cyan: #17a2b8 !default;
 
-$primary: #2b99a8;
-$secondary: #374249;
-$success: $green;
-$info: $primary;
-$warning: $yellow;
-$danger: $red;
-$light: $gray-100;
-$dark: #777;
+$primary: #2b99a8 !default;
+$secondary: #374249 !default;
+$success: $green !default;
+$info: $primary !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: #777 !default;
+
+// Extra theme colors.
+$accent: $red !default;
+$warning-dark: $orange !default;
 
-$fg-color-over-dark-bg: $white;
-$fg-hover-color-over-dark-bg: $gray-500;
+$fg-color-over-dark-bg: $white !default;
+$fg-hover-color-over-dark-bg: $gray-500 !default;
 
 $theme-colors: (
-  'accent': #ef5c55,
-  'warning-dark': $orange
-);
+  'accent': $accent,
+  'warning-dark': $warning-dark
+) !default;
 
 // Body
 
-$body-color-bright: $light;
-$body-bg: $white;
-$body-color: $gray-900;
+$body-color-bright: $light !default;
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
 
 // Typography
 
 $font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
 
 // Card
 
-$card-cap-bg: $gray-100;
+$card-cap-bg: $gray-100 !default;
 
 // Grid
 
-$grid-gutter-width: 30px;
+$grid-gutter-width: 30px !default;
 
 // Table
 
-$datatable-divider-color: rgba($black, 0.09);
+$datatable-divider-color: rgba($black, 0.09) !default;
 
 // Navs
 
-$nav-tabs-margin-bottom: 1rem;
+$nav-tabs-margin-bottom: 1rem !default;
 
 // Tooltips
 
-$tooltip-color: $white;
-$tooltip-bg: $body-color;
+$tooltip-color: $white !default;
+$tooltip-bg: $body-color !default;
 
 // Misc
 
@@ -81,10 +83,10 @@ $screen-md-min: 768px !default;
 $screen-lg-min: 992px !default;
 $screen-xl-min: 1200px !default;
 
-$screen-xs-max: calc(#{$screen-sm-min} - 1px);
-$screen-sm-max: calc(#{$screen-md-min} - 1px);
-$screen-md-max: calc(#{$screen-lg-min} - 1px);
-$screen-lg-max: calc(#{$screen-xl-min} - 1px);
+$screen-xs-max: calc(#{$screen-sm-min} - 1px) !default;
+$screen-sm-max: calc(#{$screen-md-min} - 1px) !default;
+$screen-md-max: calc(#{$screen-lg-min} - 1px) !default;
+$screen-lg-max: calc(#{$screen-xl-min} - 1px) !default;
 
-$navbar-height: 43px;
-$top-notification-height: 37.6px;
+$navbar-height: 43px !default;
+$top-notification-height: 37.6px !default;
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss
index 98a20db9fc24..ef08983f7ec3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss
@@ -1,5 +1,4 @@
-@use '../vendor';
+@forward '../vendor';
 
-@forward 'bootstrap-defaults';
 @forward 'functions';
 @forward 'mixins';
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss
index d0f6aee913a1..87c070731b7d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss
@@ -1,17 +1,16 @@
-@use '../vendor/variables';
-@use 'bootstrap-defaults' as bd;
+@use '../vendor/variables' as vv;
 @use 'functions';
 
 @mixin table-cell {
   border: 0;
-  border-bottom: 1px solid bd.$gray-400;
-  border-left: 1px solid bd.$gray-400;
+  border-bottom: 1px solid vv.$gray-400;
+  border-left: 1px solid vv.$gray-400;
   padding: 5px;
 }
 
 @mixin hf {
-  background-color: bd.$gray-200;
-  border-bottom: 1px solid bd.$gray-400;
+  background-color: vv.$gray-200;
+  border-bottom: 1px solid vv.$gray-400;
 }
 
 @mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) {
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss
index 0d73747bcc12..182e69f31553 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss
@@ -1,2 +1,2 @@
-@use 'style-overrides';
-@use 'variables';
+@forward 'style-overrides';
+@forward 'variables';
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
index cb697f0ed41d..2fbea9824ac2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
@@ -1 +1,4 @@
-/* Vendor specific scss */
+/* Vendor specific scss
+
+Custom styles, third-party libraries, frameworks, design systems, ...
+*/
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
index 4d011a9aaa6b..1df7a90845c1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
@@ -1 +1,17 @@
-/* Vendor specific variables */
+/* Vendor specific variables
+
+Example:
+$my-accent-color: #a18fff
+*/
+
+/* Bootstrap variables that are already defined can be overridden using configuration:
+https://sass-lang.com/documentation/at-rules/forward#configuring-modules
+
+Example:
+@forward '../defaults/bootstrap-defaults' with (
+  $theme-colors: (
+    'accent': $my-accent-color
+  )
+);
+*/
+@forward '../defaults/bootstrap-defaults';