From: Enno Gotthold <egotthold@suse.de>
Date: Mon, 29 Jun 2020 11:46:06 +0000 (+0200)
Subject: mgr/dashboard: SCSS cleanup
X-Git-Tag: v16.1.0~1476^2~2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=cdae818b5f3bbde64e039c62b41bba4605c939ce;p=ceph.git

mgr/dashboard: SCSS cleanup

Removes unnecessary variables and uses already existing bootstrap variables instead.

Also we removed uneffective SCSS, as well as moved the Navtabs SCSS code into a module Bootstrap style

Last but not least we cleaned up toast & tooltip SCSS.

Fixes: https://tracker.ceph.com/issues/46382

Signed-off-by: Sebastian Krah <skrah@suse.com>
Signed-off-by: Enno Gotthold <egotthold@suse.de>
---

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 040c588dc8656..b1da0a7b0f4ec 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
@@ -12,6 +12,6 @@
   cursor: pointer;
 
   &:hover {
-    color: bd.$color-gray13;
+    color: bd.$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 d916170dc9764..dc9a049602043 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
@@ -27,15 +27,15 @@ p {
   }
 
   .err {
-    color: bd.$color-pink;
+    color: bd.$danger;
   }
 
   .warn {
-    color: bd.$color-bright-yellow;
+    color: bd.$warning;
   }
 
   .info {
-    color: bd.$color-brand-teal;
+    color: bd.$info;
   }
 }
 
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 c89a4c1541da5..f5afb8b968ef4 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
@@ -27,7 +27,7 @@ cd-info-card {
 }
 
 .card-text-error {
-  color: bd.$color-solid-red;
+  color: bd.$danger;
   display: inline;
 }
 
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 d1426d61bf8a5..bc83d8b2865ff 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
@@ -13,9 +13,9 @@ $card-font-max-size: 21px;
     $card-font-min-size,
     $card-font-max-size
   );
-  border: 0.5px solid bd.$color-info-card-border;
+  border: 0.5px solid bd.$gray-300;
   border-radius: 3px;
-  box-shadow: 0 1px 1px bd.$color-shadow-gray;
+  box-shadow: 0 1px 1px rgba(3, 3, 3, 0.175);
   height: 100%;
 
   .card-body {
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 168b878e6cb8e..2fc086ab56a0f 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,17 +1,17 @@
 @use './src/styles/defaults/bootstrap-defaults' as bd;
 
 ::ng-deep .pg-clean {
-  color: bd.$color-bright-green;
+  color: bd.$success;
 }
 
 ::ng-deep .pg-working {
-  color: bd.$color-primary;
+  color: bd.$primary;
 }
 
 ::ng-deep .pg-warning {
-  color: bd.$color-bright-yellow;
+  color: bd.$warning;
 }
 
 ::ng-deep .pg-unknown {
-  color: bd.$color-solid-red;
+  color: bd.$danger;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html
index 14c9fc2fee359..bc821fba7c8ef 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html
@@ -146,7 +146,7 @@
             <div class="btn-group"
                  dropdown>
               <button type="button"
-                      class="btn btn-secondary"
+                      class="btn btn-accent"
                       [disabled]="!keysSelection.hasSingleSelection"
                       (click)="showKeyModal()">
                 <i [ngClass]="[icons.show]"></i>
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 a141e275f88f4..27d1a024e9c18 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,27 +1 @@
 @use './src/styles/defaults/bootstrap-defaults' as bd;
-
-::ng-deep cd-login-password-form {
-  h4 {
-    margin: 0 0 30px;
-  }
-
-  .btn-password,
-  .btn-password:focus,
-  .form-control,
-  .form-control:focus {
-    background-color: bd.$color-password-toggle-bg;
-    color: bd.$color-password-toggle-text;
-  }
-
-  .form-control::placeholder {
-    color: bd.$color-password-toggle-placeholder-text;
-  }
-
-  .btn-password:focus {
-    outline-color: bd.$color-password-toggle-focus;
-  }
-
-  button.btn:not(:first-child) {
-    margin-left: 5px;
-  }
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
index bb28c240e797f..72361ee7369f6 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
@@ -55,7 +55,7 @@
     </div>
 
     <input type="submit"
-           class="btn btn-secondary px-5 py-2"
+           class="btn btn-accent px-5 py-2"
            [disabled]="loginForm.invalid"
            value="Login"
            i18n-value>
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 85b3ac5534e85..bdf354352d251 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,3 +1,4 @@
+@use "sass:map";
 @use './src/styles/defaults/bootstrap-defaults' as bd;
 
 ::ng-deep cd-login {
@@ -8,7 +9,7 @@
     margin-bottom: 2rem;
 
     &:focus-within {
-      border-left: 4px solid bd.$color-accent;
+      border-left: 4px solid map.get(bd.$theme-colors, "accent");
     }
 
     .invalid-feedback {
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 1eeaca9149a08..1ba7b731ffba9 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,13 +1,8 @@
 @use './src/styles/defaults/bootstrap-defaults' as bd;
 
-thead {
-  background-color: bd.$color-table-header-bg;
-}
-
 .fa {
   font-size: large;
-
   &.fa-square-o {
-    color: bd.$color-light-gray;
+    color: bd.$gray-400;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html
index 389e8e1d5e22a..fd57176a4c79c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html
@@ -1,6 +1,6 @@
 <main class="login full-height">
   <header>
-    <nav class="navbar">
+    <nav class="navbar p-4">
       <a class="navbar-brand"></a>
       <div class="form-inline">
         <cd-language-selector></cd-language-selector>
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 222294ce3707e..cc6770b773327 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,25 +1,23 @@
 @use './src/styles/defaults/bootstrap-defaults' as bd;
 
 ::ng-deep .login {
-  background-color: bd.$color-login-row-bg;
+  background-color: bd.$secondary;
   background-image: url('../../../../assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
-  color: bd.$color-login-row-text;
+  color: bd.$body-color-bright;
 
   header {
     position: absolute;
     width: 100vw;
 
     .navbar {
-      padding: 1rem 2rem;
-
       .dropdown-menu {
         margin-top: 0.2rem;
 
         li a {
           &:hover {
-            background-color: bd.$color-brand-teal;
+            background-color: bd.$primary;
           }
         }
       }
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 3de3264f199f6..f193f2414200d 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;
 
 .dashboard {
-  background-color: bd.$color-whitesmoke-gray;
+  background-color: bd.$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 5a1c1f5785136..0d332b4e8be87 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;
 
 .about-container {
-  background-color: bd.$color-secondary;
+  background-color: bd.$secondary;
   background-image: url('../../../../assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
-  color: bd.$color-solid-white;
-  text-shadow: 1px 1px bd.$color-secondary;
+  color: bd.$white;
+  text-shadow: 1px 1px bd.$secondary;
 }
 
 .product-versions {
@@ -22,7 +22,7 @@
 }
 
 .modal-header .close {
-  color: bd.$color-solid-white;
+  color: bd.$white;
   font-size: 2em;
 }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
index 979fa9c2e85a6..733f7e67771c1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
@@ -1,5 +1,3 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
-
 .breadcrumb {
   background-color: transparent;
   border-radius: 0;
@@ -8,12 +6,7 @@
 }
 
 .breadcrumb > li + li::before {
-  color: bd.$color-breadcrumb;
   content: '\f101';
   font-family: 'ForkAwesome';
   padding: 0 5px 0 7px;
 }
-
-.breadcrumb > li > span {
-  color: bd.$color-breadcrumb;
-}
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 2f002db0ff75f..8604f68ff4737 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
@@ -155,7 +155,7 @@ $sidebar-width: 200px;
   #sidebar {
     background: bd.$color-navbar-bg;
     bottom: 0;
-    color: bd.$color-solid-white;
+    color: bd.$white;
     left: 0;
     overflow-y: auto;
     position: fixed;
@@ -175,12 +175,12 @@ $sidebar-width: 200px;
       }
 
       p {
-        color: bd.$color-solid-white;
+        color: bd.$white;
         padding: 10px;
       }
 
       li a {
-        color: bd.$color-solid-white;
+        color: bd.$white;
         display: block;
         font-size: 1.1em;
         padding: 10px;
@@ -190,7 +190,7 @@ $sidebar-width: 200px;
 
         &:hover {
           background: bd.$color-primary;
-          color: bd.$color-solid-white;
+          color: bd.$white;
         }
 
         > .badge {
@@ -200,7 +200,7 @@ $sidebar-width: 200px;
 
       li.active > a,
       li > a a[aria-expanded='true'] {
-        color: bd.$color-solid-white;
+        color: bd.$white;
       }
     }
   }
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 a4e2673f63b85..69efe41c70ad0 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,9 +1,9 @@
 @use './src/styles/defaults/bootstrap-defaults' as bd;
 
 .running i {
-  color: bd.$color-primary;
+  color: bd.$primary;
 }
 
 .running:hover i {
-  color: bd.$color-solid-white;
+  color: bd.$white;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.spec.ts
index 3223256e9b9b7..f677e0f25ef51 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component.spec.ts
@@ -17,7 +17,7 @@ export class MockModule {}
 
 @Component({
   template: `
-    <button type="button" class="btn btn-secondary" (click)="openCtrlDriven()">
+    <button type="button" class="btn btn-danger" (click)="openCtrlDriven()">
       <i class="fa fa-times"></i>Deletion Ctrl-Test
       <ng-template #ctrlDescription>
         The spinner is handled by the controller if you have use the modal as ViewChild in order to
@@ -25,7 +25,7 @@ export class MockModule {}
       </ng-template>
     </button>
 
-    <button type="button" class="btn btn-secondary" (click)="openModalDriven()">
+    <button type="button" class="btn btn-danger" (click)="openModalDriven()">
       <i class="fa fa-times"></i>Deletion Modal-Test
       <ng-template #modalDescription>
         The spinner is handled by the modal if your given deletion function returns a Observable.
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 fe48bea33a7ad..5266834303cd9 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;
 
 i {
-  color: bd.$color-helper-bg;
+  color: bd.$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 d6b5f639dea16..3d34340a6af8e 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
@@ -34,7 +34,7 @@ ngx-simplebar {
 }
 
 .btn-link .fa-trash-o {
-  color: bd.$color-black;
+  color: bd.$black;
 }
 
 table {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/refresh-selector/refresh-selector.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/refresh-selector/refresh-selector.component.html
index d28a3863ca603..e0a60af896a92 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/refresh-selector/refresh-selector.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/refresh-selector/refresh-selector.component.html
@@ -1,17 +1,19 @@
-<div class="row">
-  <div class="col-12">
-    <div class="float-right d-inline-flex">
-      <label for="refreshInterval"
-             class="col-form-label my-0 mx-2"
-             i18n>Refresh</label>
-      <select id="refreshInterval"
-              name="refreshInterval"
-              class="form-control custom-select"
-              (change)="changeRefreshInterval($event.target.value)"
-              [(ngModel)]="selectedInterval">
-        <option *ngFor="let key of intervalKeys"
-                [value]="intervalList[key]">{{ key }}</option>
-      </select>
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-12">
+      <div class="float-right d-inline-flex">
+        <label for="refreshInterval"
+               class="col-form-label my-0 mx-2"
+               i18n>Refresh</label>
+        <select id="refreshInterval"
+                name="refreshInterval"
+                class="form-control custom-select"
+                (change)="changeRefreshInterval($event.target.value)"
+                [(ngModel)]="selectedInterval">
+          <option *ngFor="let key of intervalKeys"
+                  [value]="intervalList[key]">{{ key }}</option>
+        </select>
+      </div>
     </div>
   </div>
 </div>
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 f6306f6700ddd..aae5de5e9681c 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;
 
 .badge-remove {
-  color: bd.$color-solid-white;
+  color: bd.$white;
 }
 
 i.fa-pencil {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/submit-button/submit-button.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/submit-button/submit-button.component.html
index 03c92acfd8148..77d6c5440a57c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/submit-button/submit-button.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/submit-button/submit-button.component.html
@@ -1,5 +1,5 @@
 <button [type]="type"
-        class="btn btn-secondary tc_submitButton"
+        class="btn btn-accent tc_submitButton"
         [ngClass]="btnClass"
         [disabled]="loading || disabled"
         (click)="submit($event)">
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 80700d158504e..735667d5dd410 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;
 
 .bg-info {
-  background-color: bd.$color-progress-bar-info-bg !important;
+  background-color: bd.$primary !important;
 }
 
 .bg-freespace {
-  background-color: bd.$color-progress-bar-freespace-bg !important;
+  background-color: bd.$gray-500 !important;
 }
 
 .progress {
@@ -18,7 +18,7 @@
   }
 
   span {
-    color: bd.$color-progress-text;
+    color: bd.$black;
     display: block;
     font-weight: normal;
     position: absolute;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts
index f494ae19f555e..4638fb78b382e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-actions/table-actions.component.ts
@@ -20,7 +20,7 @@ export class TableActionsComponent implements OnInit {
   @Input()
   tableActions: CdTableAction[];
   @Input()
-  btnColor = 'secondary';
+  btnColor = 'accent';
 
   // Use this if you just want to display a drop down button,
   // labeled with the given text, with all actions in it.
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 6954c771453fc..f2576ea1c8c54 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -8,16 +8,6 @@
 $fa-font-path: '~fork-awesome/fonts';
 $font-family-icon: 'ForkAwesome';
 
-// Bootstrap
-$theme-colors: (
-  'primary': $color-primary,
-  'secondary': $color-accent,
-  'dark': $color-mild-gray
-);
-
-$font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
 $badge-font-size: 1rem;
 $form-feedback-font-size: 100%;
 $popover-max-width: 350px;
@@ -33,46 +23,14 @@ $popover-max-width: 350px;
 @import './src/styles/ceph-custom/forms';
 @import './src/styles/ceph-custom/grid';
 @import './src/styles/ceph-custom/icons';
+@import './src/styles/ceph-custom/navs';
+@import './src/styles/ceph-custom/toast';
 
 /* If javascript is disabled. */
 .noscript {
   padding-top: 5em;
 }
 
-.noscript p {
-  color: $color-noscript-text;
-}
-
-/* Card */
-.card-footer button.btn:not(:first-child) {
-  margin-left: 5px;
-}
-/* Modal dialog */
-.modal-footer button.btn:not(:first-child) {
-  margin-left: 5px;
-}
-
-.nav-tabs {
-  margin-bottom: 15px;
-}
-
-/* Block UI */
-.block-ui-wrapper {
-  background: $color-transparent-black !important;
-}
-
-.tooltip-inner {
-  background-color: $color-solid-white;
-  border: 1px solid $color-gray20;
-  color: $color-gray13;
-  font-size: 1.1em;
-}
-
-.toast-message > ul {
-  margin: 0;
-  padding-left: 1em;
-}
-
 .cd-header,
 legend {
   @extend .pb-1;
@@ -133,40 +91,40 @@ bfv-messages {
   }
 
   .weak {
-    background: $color-solid-red;
+    background: $danger;
     width: 25%;
   }
 
   .ok {
-    background: $color-bright-yellow;
+    background: $warning;
     width: 50%;
   }
 
   .strong {
-    background: $color-bright-green;
+    background: $success;
     width: 75%;
   }
 
   .very-strong {
-    background: $color-green;
+    background: darken($success, 30%);
     width: 100%;
   }
 }
 
 // Custom badges.
 .badge-hdd {
-  background-color: $color-blue-gray;
-  color: $color-solid-white;
+  background-color: $gray-600;
+  color: $white;
 }
 
 .badge-ssd {
-  background-color: $color-blue;
-  color: $color-solid-white;
+  background-color: $primary;
+  color: $white;
 }
 
 .badge-tab {
-  background-color: $color-light-shade-gray;
-  color: $color-solid-gray;
+  background-color: $gray-200;
+  color: $gray-700;
 }
 
 // angular-tree-component
@@ -176,3 +134,23 @@ tree-root {
     min-height: 1em;
   }
 }
+
+// Other
+tags-input .tags {
+  border-radius: 4px;
+  border: 1px solid $gray-400;
+  box-shadow: inset 0 1px 1px rgba($black, 0.09);
+}
+.card-header {
+  font-size: 1.3em;
+}
+.card-body h2:first-child {
+  margin-top: 0;
+}
+.disabled {
+  pointer-events: none;
+}
+.clickable,
+a {
+  cursor: pointer;
+}
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 d05bedee5c03d..151661002d7cb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
@@ -12,9 +12,9 @@ canvas {
 }
 
 .chartjs-tooltip {
-  background: bd.$color-chart-tooltip-bg;
+  background: rgba(bd.$black, .7);
   border-radius: 3px;
-  color: bd.$color-chat-tooltip-text;
+  color: bd.$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.$color-chart-tooltip-border transparent transparent transparent;
+  border-color: bd.$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 2de197a9e9258..bef1fa56ba355 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
@@ -2,7 +2,7 @@
 
 /* Basics */
 html {
-  background-color: bd.$color-app-bg;
+  background-color: bd.$body-bg;
 }
 
 html,
@@ -20,16 +20,13 @@ option {
 .full-height {
   height: 100vh;
 }
-
 .full-width {
   width: 100vw;
 }
-
 .vertical-align {
   align-items: center;
   display: flex;
 }
-
 .horizontal-align {
   display: flex;
   justify-content: center;
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 6e82857821fda..57ea2defade33 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
@@ -27,12 +27,12 @@
 
 /* Buttons */
 .btn-light {
-  background-color: bd.$color-solid-white;
-  border-color: bd.$color-input-border !important;
+  background-color: bd.$white;
+  border-color: bd.$gray-400 !important;
 
   &:hover {
-    background-color: bd.$color-soft-gray;
-    border-color: bd.$color-input-border-hover !important;
+    background-color: bd.$gray-300;
+    border-color: bd.$gray-600 !important;
   }
 }
 
@@ -55,8 +55,8 @@
 }
 
 .btn-primary .badge {
-  background-color: bd.$color-button-badge;
-  color: bd.$color-primary;
+  background-color: bd.$gray-200;
+  color: bd.$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 16c7ed750e4f2..1b8e3f3bed7b6 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
@@ -11,7 +11,6 @@
 }
 
 .dropdown-menu > li > a {
-  color: bd.$color-dropdown-menu;
   cursor: pointer;
 }
 
@@ -21,13 +20,13 @@
 }
 
 .dropdown-menu > .active > a {
-  background-color: bd.$color-dropdown-active-bg;
-  color: bd.$color-dropdown-active-text;
+  background-color: bd.$primary;
+  color: bd.$gray-200;
 
   &,
   &:hover,
   &:focus {
-    background-color: darken(bd.$color-dropdown-active-bg, 10);
+    background-color: darken(bd.$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 ad6cda1f95518..524aa3885b070 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,9 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use "sass:map";
+@use '../defaults/bootstrap-defaults' as bd;
 
 /* Forms */
 .required::after {
-  color: bd.$color-required-text;
+  color: map.get(bd.$theme-colors, "accent");
   content: '*';
   font-size: 1.167rem;
   padding-left: 4px;
@@ -17,9 +18,9 @@
   display: table-cell;
 
   &:focus {
-    border-color: bd.$color-primary-transparent;
-    box-shadow: inset 0 1px 1px bd.$color-transparent-black1,
-      0 0 8px 2px bd.$color-primary-transparent1;
+    border-color: rgba(bd.$primary, 0.8);
+    box-shadow: inset 0 1px 1px rgba(bd.$black, .75),
+      0 0 8px 2px rgba(bd.$primary, 0.5);
     outline: 0;
   }
 }
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
new file mode 100644
index 0000000000000..15a6d15f55ba0
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss
@@ -0,0 +1,5 @@
+@use '../defaults/bootstrap-defaults' as bd;
+
+.nav-tabs {
+  margin-bottom: bd.$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
new file mode 100644
index 0000000000000..b7f76077557b1
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss
@@ -0,0 +1,4 @@
+.toast-message > ul {
+  padding-left: 1rem;
+  margin: 0;
+}
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 cb2d966b65bda..d48fcb33941cc 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,8 +1,72 @@
 @use '../vendor/variables';
 
-// Bootstrap defaults
+// Color system
 
-$gray-900: #212529 !default;
+$white:     #ffffff !default;
+$gray-100:  #f8f9fa !default;
+$gray-200:  #e9ecef !default;
+$gray-300:  #dee2e6 !default;
+$gray-400:  #ced4da !default;
+$gray-500:  #adb5bd !default;
+$gray-600:  #6c757d !default;
+$gray-700:  #495057 !default;
+$gray-800:  #343a40 !default;
+$gray-900:  #212529 !default;
+$black:     #000000 !default;
+
+$blue:      #007bff !default;
+$indigo:    #6610f2 !default;
+$purple:    #6f42c1 !default;
+$pink:      #a94442;
+$red:       #ef5c55;
+$orange:    #fd7e14 !default;
+$yellow:    #ffc200;
+$green:     #00bb00;
+$teal:      #20c997 !default;
+$cyan:      #17a2b8 !default;
+
+$primary:   #2b99a8;
+$secondary: #374249;
+$success:   $green;
+$info:      $primary;
+$warning:   $yellow;
+$danger:    $red;
+$light:     $gray-100;
+$dark:      #777777;
+
+$theme-colors: (
+  "accent": $red
+);
+
+// Body
+
+$body-color-bright: $light;
+$body-bg: $white;
+$body-color: $gray-900;
+
+// 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';
+
+// Card
+
+$card-cap-bg: $gray-100;
+
+// Grid
+
+$grid-gutter-width: 30px;
+
+// Navs
+
+$nav-tabs-margin-bottom: 1rem;
+
+// Tooltips
+
+$tooltip-color:                     $white;
+$tooltip-bg:                        $body-color;
+
+// Misc
 
 $screen-sm-min: 576px !default;
 $screen-md-min: 768px !default;
@@ -14,146 +78,5 @@ $screen-sm-max: calc(#{$screen-md-min} - 1px);
 $screen-md-max: calc(#{$screen-lg-min} - 1px);
 $screen-lg-max: calc(#{$screen-xl-min} - 1px);
 
-$color-solid-red: #f00 !default;
-$color-pink: #a94442 !default;
-$color-light-red: #f2dede !default;
-
-// $color-orange: #ff6600 !default;
-
-$color-bright-yellow: #ffc200 !default;
-$color-light-yellow: #fff3cd !default;
-
-$color-bright-green: #0b0 !default;
-$color-green: #245e03 !default;
-
-$color-blue: #288cea !default;
-$color-light-blue: #d1ecf1 !default;
-$color-sky-blue: #afd9ee !default;
-
-$color-black: #000 !default;
-$color-transparent-black: rgba(0, 0, 0, 0.7) !default;
-$color-transparent-black1: rgba(0, 0, 0, 0.075) !default;
-$color-solid-gray: #555 !default;
-$color-dark-gray: #474544 !default;
-$color-gray: #808080 !default;
-$color-mild-gray: #777 !default;
-$color-blue-gray: #90949c !default;
-$color-grad-gray: #ededed !default;
-$color-shadow-gray: rgba(3, 3, 3, 0.175) !default;
-$color-light-gray: #d1d1d1 !default;
-$color-soft-gray: #ddd !default;
-$color-white-gray: #eee !default;
-$color-shade-gray: #efefef !default;
-$color-gray13: #212121;
-$color-gray20: #333 !default;
-$color-light-shade-gray: #f3f3f3 !default;
-$color-whitesmoke-gray: #f5f5f5 !default;
-$color-solid-white: #fff !default;
-$color-transparent: rgba(0, 0, 0, 0.09) !default;
-$color-input-border: #ced4da;
-$color-input-border-hover: #adadad;
-$color-brand-teal: #2b99a8 !default;
-$color-brand-gray: #374249 !default;
-$color-mirage-gray: #333e46 !default;
-
-$color-primary: $color-brand-teal !default;
-$color-secondary: $color-brand-gray !default;
-$color-accent: #ef5c55 !default;
-$color-primary-transparent: rgba($color-primary, 0.8);
-$color-primary-transparent1: rgba($color-primary, 0.5);
-
-$color-app-bg: $color-solid-white !default;
-// $color-bg-darken: $color-dark-gray !default;
-// $color-links: $color-primary !default;
-// $color-links-focus: $color-dark-gray !default;
-$color-breadcrumb: $color-dark-gray !default;
-// $color-button-text: $color-white-gray !default;
-$color-button: $color-primary !default;
-// $color-button-hover: darken($color-primary, 3) !default;
-// $color-button-border: darken($color-primary, 6) !default;
-$color-button-badge: $color-white-gray !default;
-$color-dropdown-menu: $color-dark-gray !default;
-$color-dropdown-active-text: $color-white-gray !default;
-$color-dropdown-active-bg: $color-primary !default;
-$color-progress-bar-info-bg: $color-primary !default;
-$color-progress-bar-freespace-bg: $color-light-gray !default;
-$color-progress-text: $color-black !default;
-$color-tags-border: $color-light-gray !default;
-$color-tags-box-shadow: $color-transparent !default;
-$color-error-btn-bg: $color-light-red !default;
-$color-error-btn-border: $color-pink !default;
-$color-noscript-text: $color-mild-gray !default;
-$color-required-text: $color-pink !default;
-
-/*Login*/
-$color-login-row-text: $color-solid-white !default;
-$color-login-row-bg: $color-secondary !default;
-$color-password-toggle-text: $color-solid-white !default;
-$color-password-toggle-placeholder-text: $color-blue-gray !default;
-$color-password-toggle-bg: $color-mirage-gray !default;
-$color-password-toggle-focus: $color-primary !default;
-// $color-login-active-row-bg: $color-light-yellow !default;
-// $color-login-active-row-text: $color-black !default;
-
-/*Landing Page*/
-
-/*InfoGroup*/
-// $color-info-group-underline: $color-whitesmoke-gray !default;
-
-/*InfoCard*/
-// $color-info-card-background: $color-whitesmoke-gray !default;
-$color-info-card-border: $color-soft-gray !default;
-
-/*Navigation*/
-$color-navbar-bg: $color-secondary !default;
-$color-navbar-brand: $color-white-gray !default;
-$color-nav-top-bar: $color-primary !default;
-$color-nav-bottom-bar: $color-primary !default;
-$color-nav-toggle-bar: $color-white-gray !default;
-$color-nav-toggle-shadow: $color-solid-white !default;
-$color-nav-collapse-border: $color-white-gray !default;
-$color-nav-open-bg: $color-primary !default;
-$color-nav-links: $color-white-gray !default;
-$color-nav-links-hover: $color-primary !default;
-$color-nav-active-link-bg: $color-primary !default;
-$color-nav-border-top-collapse: $color-white-gray !default;
-
 $navbar-height: 43px;
 $top-notification-height: 37.6px;
-
-/*Helper*/
-$color-helper-bg: $color-primary !default;
-
-/*Table*/
-$color-table-seperator-border: $color-transparent !default;
-$color-table-input-border: $color-transparent !default;
-$color-table-dropdown-bg: $color-whitesmoke-gray !default;
-$color-table-header-bg: $color-whitesmoke-gray !default;
-$color-table-header-border: $color-light-gray !default;
-$color-table-active-row: $color-sky-blue !default;
-$color-table-active-row-hover: $color-light-blue !default;
-// $color-table-progress-bar-bg: $color-sky-blue !default;
-$color-table-progress-bar-active: $color-primary !default;
-$color-table-gradient-1: $color-whitesmoke-gray !default;
-$color-table-gradient-2: $color-grad-gray !default;
-$color-table-sort: $color-primary !default;
-$color-table-empty-row: $color-light-yellow !default;
-$color-table-hover-row: $color-white-gray !default;
-$color-table-even-row-bg: $color-solid-white !default;
-$color-table-odd-row-bg: $color-whitesmoke-gray !default;
-$color-table-datatable-header: $color-whitesmoke-gray !default;
-
-/*Chart tooltip*/
-$color-chart-tooltip-bg: $color-transparent-black !default;
-$color-chat-tooltip-text: $color-solid-white !default;
-$color-chart-tooltip-border: $color-black !default;
-
-/*Popover*/
-$color-popover-seperator-text: $color-blue-gray !default;
-$color-popover-seperator-bg: $color-white-gray !default;
-$color-popover-message-text: $color-dark-gray !default;
-$color-popover-table-text: $color-dark-gray !default;
-$color-popover-date: $color-solid-gray !default;
-
-/*RGW user form*/
-$color-rgw-icon: $color-blue-gray !default;