From: Enno Gotthold <egotthold@suse.de>
Date: Tue, 4 Aug 2020 14:58:38 +0000 (+0200)
Subject: mgr/dashboard: SCSS: Replaced usage of baseclass with specific
X-Git-Tag: v17.0.0~1508^2~1
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=04d03c4a1fc20b95c28ac43afb2a994bbabfae73;p=ceph.git

mgr/dashboard: SCSS: Replaced usage of baseclass with specific

The SCSS class cd-col-form-label is the specific and correct class to use. Previously sometimes the class col-form-label was used.

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

Signed-off-by: Enno Gotthold <egotthold@suse.de>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.scss
index c38279ab0494d..e69de29bb2d1d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.scss
@@ -1,3 +0,0 @@
-.invalid-feedback {
-  display: block;
-}
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 b1da0a7b0f4ec..95a3298fbe4d2 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
@@ -8,7 +8,7 @@
 }
 
 .quota-origin {
-  color: bd.$color-brand-teal;
+  color: bd.$primary;
   cursor: pointer;
 
   &:hover {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
index f0e49476b76f5..404cccdca50f9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
@@ -51,9 +51,10 @@
 <ng-template #logFiltersTpl>
   <div class="form-inline">
     <div class="form-group">
-      <label class="col-form-label"
+      <label for="logs-priority"
              i18n>Priority:</label>
-      <select class="form-control custom-select"
+      <select id="logs-priority"
+              class="form-control custom-select"
               [(ngModel)]="priority"
               (ngModelChange)="filterLogs()">
         <option *ngFor="let prio of prioritys"
@@ -62,7 +63,7 @@
     </div>
 
     <div class="form-group">
-      <label class="col-form-label"
+      <label for="logs-keyword"
              i18n>Keyword:</label>
       <div class="input-group">
         <div class="input-group-prepend">
@@ -72,6 +73,7 @@
         </div>
 
         <input class="form-control"
+               id="logs-keyword"
                type="text"
                [(ngModel)]="search"
                (keyup)="filterLogs()">
@@ -87,10 +89,11 @@
     </div>
 
     <div class="form-group">
-      <label class="col-form-label"
+      <label for="logs-date"
              i18n>Date:</label>
       <div class="input-group">
         <input class="form-control"
+               id="logs-date"
                placeholder="YYYY-MM-DD"
                ngbDatepicker
                #d="ngbDatepicker"
@@ -108,13 +111,12 @@
     </div>
 
     <div class="form-group">
-      <label class="col-form-label"
-             i18n>Time range:</label>
+      <label i18n>Time range:</label>
       <ngb-timepicker [spinners]="false"
                       [(ngModel)]="startTime"
                       (ngModelChange)="filterLogs()"></ngb-timepicker>
 
-      <span class="middle">&nbsp;&mdash;&nbsp;</span>
+      <span>&nbsp;&mdash;&nbsp;</span>
 
       <ngb-timepicker [spinners]="false"
                       [(ngModel)]="endTime"
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 dc9a049602043..a12196c2f198a 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
@@ -42,7 +42,3 @@ p {
 ::ng-deep ngb-timepicker input.ngb-tp-input {
   width: 3.5rem !important;
 }
-
-.middle {
-  padding-top: 7px;
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
index aef2f59679f02..de235b58b6d3b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html
@@ -12,7 +12,7 @@
              *ngFor="let moduleOption of moduleOptions | keyvalue">
 
           <!-- Field label -->
-          <label class="col-form-label col-sm-5"
+          <label class="cd-col-form-label"
                  for="{{ moduleOption.value.name }}">
             {{ moduleOption.value.name }}
             <cd-helper *ngIf="moduleOption.value.long_desc || moduleOption.value.desc">
@@ -22,7 +22,7 @@
 
           <!-- Field control -->
           <!-- bool -->
-          <div class="col-sm-7"
+          <div class="cd-col-form-input"
                *ngIf="moduleOption.value.type === 'bool'">
             <div class="custom-control custom-checkbox">
               <input id="{{ moduleOption.value.name }}"
@@ -35,7 +35,7 @@
           </div>
 
           <!-- addr|str|uuid -->
-          <div class="col-sm-7"
+          <div class="cd-col-form-input"
                *ngIf="['addr', 'str', 'uuid'].includes(moduleOption.value.type)">
             <input id="{{ moduleOption.value.name }}"
                    class="form-control"
@@ -60,7 +60,7 @@
           </div>
 
           <!-- uint|int|size|secs -->
-          <div class="col-sm-7"
+          <div class="cd-col-form-input"
                *ngIf="['uint', 'int', 'size', 'secs'].includes(moduleOption.value.type)">
             <input id="{{ moduleOption.value.name }}"
                    class="form-control"
@@ -83,7 +83,7 @@
           </div>
 
           <!-- float -->
-          <div class="col-sm-7"
+          <div class="cd-col-form-input"
                *ngIf="moduleOption.value.type === 'float'">
             <input id="{{ moduleOption.value.name }}"
                    class="form-control"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index af298a9e5b168..8fc15333ae9f4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -542,6 +542,6 @@ export class OsdListComponent extends ListWithDetails implements OnInit {
   }
 
   configurePgScrubAction() {
-    this.bsModalRef = this.modalService.show(OsdPgScrubModalComponent, { size: 'lg' });
+    this.bsModalRef = this.modalService.show(OsdPgScrubModalComponent, undefined, { size: 'lg' });
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
index 0bc4fef593433..726159778a0a2 100755
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-recv-speed-modal/osd-recv-speed-modal.component.html
@@ -9,10 +9,10 @@
       <div class="modal-body">
         <!-- Priority -->
         <div class="form-group row">
-          <label class="col-form-label col-sm-6 required"
+          <label class="cd-col-form-label required"
                  for="priority"
                  i18n>Priority</label>
-          <div class="col-sm-6">
+          <div class="cd-col-form-input">
             <select class="form-control custom-select"
                     formControlName="priority"
                     id="priority"
@@ -30,7 +30,7 @@
 
         <!-- Customize priority -->
         <div class="form-group row">
-          <div class="offset-sm-6 col-sm-6">
+          <div class="cd-col-form-offset">
             <div class="custom-control custom-checkbox">
               <input formControlName="customizePriority"
                      class="custom-control-input"
@@ -48,14 +48,14 @@
         <!-- Priority values -->
         <div class="form-group row"
              *ngFor="let attr of priorityAttrs | keyvalue">
-          <label class="col-form-label col-sm-6"
+          <label class="cd-col-form-label"
                  [for]="attr.key">
             <span [ngClass]="{'required': osdRecvSpeedForm.getValue('customizePriority')}">
               {{ attr.value.text }}
             </span>
             <cd-helper *ngIf="attr.value.desc">{{ attr.value.desc }}</cd-helper>
           </label>
-          <div class="col-sm-6">
+          <div class="cd-col-form-input">
             <input class="form-control"
                    type="number"
                    [id]="attr.key"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.html
index 9e67bbb6e1be2..34b47b3083609 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-reweight-modal/osd-reweight-modal.component.html
@@ -7,8 +7,8 @@
       <div class="modal-body">
         <div class="row">
           <label for="weight"
-                 class="col-sm-2 col-form-label">Weight</label>
-          <div class="col-sm-10">
+                 class="cd-col-form-label">Weight</label>
+          <div class="cd-col-form-input">
             <input id="weight"
                    class="form-control"
                    type="number"
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 4680dafe4026d..004400d97e835 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
@@ -29,13 +29,13 @@
 }
 
 .info-card-content-clickable {
-  border: 1px solid bd.$color-shade-gray;
+  border: 1px solid bd.$gray-200;
   border-radius: 3px;
   cursor: pointer;
   padding: 7px;
 }
 
 .info-card-content-clickable:hover {
-  background-color: bd.$color-light-shade-gray;
-  border-color: bd.$color-light-gray;
+  background-color: bd.$gray-200;
+  border-color: bd.$gray-400;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.html
index 526b3e9d74e96..2f12d51280dca 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.html
@@ -1,4 +1,4 @@
-<div class="card"
+<div class="card shadow-sm"
      [ngClass]="cardClass">
   <div class="card-body d-flex align-items-center justify-content-center">
     <h5 class="card-title m-4">
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 bc83d8b2865ff..3d78d0bb5609f 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
@@ -15,7 +15,6 @@ $card-font-max-size: 21px;
   );
   border: 0.5px solid bd.$gray-300;
   border-radius: 3px;
-  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/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 27d1a024e9c18..4b7dbed62fba2 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 +1,27 @@
 @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.$gray-800;
+    color: bd.$white;
+  }
+
+  .form-control::placeholder {
+    color: bd.$gray-500;
+  }
+
+  .btn-password:focus {
+    outline-color: bd.$primary;
+  }
+
+  button.btn:not(:first-child) {
+    margin-left: 5px;
+  }
+}
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 bdf354352d251..486b1785072f7 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,19 +1,17 @@
-@use "sass:map";
+@use 'sass:map';
 @use './src/styles/defaults/bootstrap-defaults' as bd;
 
+$dark-secondary: darken(bd.$secondary, 4%);
+
 ::ng-deep cd-login {
   .form-group {
-    background-color: bd.$color-password-toggle-bg;
-    border-left: 4px solid bd.$color-solid-white;
+    background-color: $dark-secondary;
+    border-left: 4px solid bd.$white;
     height: auto;
     margin-bottom: 2rem;
 
     &:focus-within {
-      border-left: 4px solid map.get(bd.$theme-colors, "accent");
-    }
-
-    .invalid-feedback {
-      display: inline;
+      border-left: 4px solid map.get(bd.$theme-colors, 'accent');
     }
   }
 
@@ -21,28 +19,28 @@
   .btn-password:focus,
   .form-control,
   .form-control:focus {
-    background-color: bd.$color-password-toggle-bg;
+    background-color: $dark-secondary;
     border: 0;
     box-shadow: none;
-    color: bd.$color-password-toggle-text;
+    color: bd.$body-color-bright;
     filter: none;
     outline: none;
   }
 
   .placeholder {
-    color: bd.$color-password-toggle-placeholder-text;
+    color: bd.$gray-600;
   }
 
   .btn-password:focus {
-    outline-color: bd.$color-password-toggle-focus;
+    outline-color: bd.$primary;
   }
 }
 
 // This will override the colors applied by chrome
 @keyframes autofill {
   to {
-    background-color: bd.$color-password-toggle-bg;
-    color: bd.$color-password-toggle-text;
+    background-color: $dark-secondary;
+    color: bd.$body-color-bright;
   }
 }
 
@@ -50,7 +48,7 @@ input:-webkit-autofill {
   animation-fill-mode: both;
   animation-name: autofill;
   border-radius: 0;
-  box-shadow: 0 0 0 1000px bd.$color-password-toggle-bg inset;
-  -webkit-text-fill-color: bd.$color-password-toggle-text;
+  box-shadow: 0 0 0 1000px $dark-secondary inset;
+  -webkit-text-fill-color: bd.$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 1ba7b731ffba9..606d10a6d9dbd 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
@@ -2,6 +2,7 @@
 
 .fa {
   font-size: large;
+
   &.fa-square-o {
     color: bd.$gray-400;
   }
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 8604f68ff4737..0b5d5568cd0b7 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
@@ -6,8 +6,8 @@
 
 ::ng-deep .cd-navbar-top {
   .cd-navbar-brand {
-    background: bd.$color-navbar-bg;
-    border-top: 4px solid bd.$color-nav-top-bar;
+    background: bd.$secondary;
+    border-top: 4px solid bd.$primary;
 
     &.isPwdDisplayed {
       top: bd.$top-notification-height;
@@ -15,7 +15,7 @@
 
     .navbar-brand,
     .navbar-brand:hover {
-      color: bd.$color-navbar-brand;
+      color: bd.$gray-200;
       height: auto;
       padding: 0;
     }
@@ -33,7 +33,7 @@
       }
 
       .fa-navicon {
-        color: bd.$color-nav-toggle-bar;
+        color: bd.$gray-200;
       }
     }
 
@@ -42,8 +42,8 @@
     }
 
     .cd-navbar-utility > .active > a {
-      background-color: bd.$color-nav-links-hover;
-      color: bd.$color-nav-links;
+      background-color: bd.$primary;
+      color: bd.$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.$color-nav-links;
+      color: bd.$gray-200;
     }
   }
 
   .navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
   .navbar-nav > li > .cd-navbar > a,
   .navbar-nav > li > a {
-    color: bd.$color-nav-links;
+    color: bd.$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.$color-nav-links;
+    color: bd.$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.$color-nav-links-hover;
+    background-color: bd.$primary;
   }
 
   .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
@@ -90,7 +90,7 @@
   .navbar-nav > .open > a:hover {
     background-color: transparent;
     border-color: transparent;
-    color: bd.$color-nav-links;
+    color: bd.$gray-200;
   }
 
   @media (min-width: bd.$screen-md-min) {
@@ -112,24 +112,24 @@
       }
 
       .open .dropdown-menu {
-        background-color: bd.$color-nav-open-bg;
+        background-color: bd.$primary;
         border: 0;
         padding-bottom: 0;
         padding-top: 0;
       }
 
       .open .dropdown-menu > li > a {
-        color: bd.$color-nav-links;
+        color: bd.$gray-200;
         padding: 5px 15px 5px 35px;
       }
 
       .open .dropdown-menu > .active > a {
-        background-color: bd.$color-nav-active-link-bg;
+        background-color: bd.$primary;
       }
     }
 
     .navbar-nav > li > a:hover {
-      background-color: bd.$color-nav-active-link-bg;
+      background-color: bd.$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.$color-nav-links-hover !important;
+  background-color: bd.$primary !important;
   border: 0 !important;
-  color: bd.$color-nav-links !important;
+  color: bd.$gray-200 !important;
 }
 
 .wrapper {
@@ -153,7 +153,7 @@ $sidebar-width: 200px;
   width: 100%;
 
   #sidebar {
-    background: bd.$color-navbar-bg;
+    background: bd.$secondary;
     bottom: 0;
     color: bd.$white;
     left: 0;
@@ -189,7 +189,7 @@ $sidebar-width: 200px;
         text-decoration: none;
 
         &:hover {
-          background: bd.$color-primary;
+          background: bd.$primary;
           color: bd.$white;
         }
 
@@ -224,7 +224,7 @@ $sidebar-width: 200px;
   }
 
   ul ul a {
-    background: lighten(bd.$color-navbar-bg, 10);
+    background: lighten(bd.$secondary, 10);
     font-size: 0.9em !important;
     padding-left: 40px !important;
   }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.html
index 0d18853601e5f..0b0f87957a93e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/config-option/config-option.component.html
@@ -2,7 +2,7 @@
   <div *ngFor="let option of options; let last = last">
     <div class="form-group row pt-2"
          *ngIf="option.type === 'bool'">
-      <label class="col-form-label col-6"
+      <label class="cd-col-form-label"
              [for]="option.name">
         <b>{{ option.text }}</b>
         <br>
@@ -13,7 +13,7 @@
         </span>
       </label>
 
-      <div class="col-6">
+      <div class="cd-col-form-input">
         <div class="custom-control custom-checkbox">
           <input class="custom-control-input"
                  type="checkbox"
@@ -27,7 +27,7 @@
 
     <div class="form-group row pt-2"
          *ngIf="option.type !== 'bool'">
-      <label class="col-6 col-form-label"
+      <label class="cd-col-form-label"
              [for]="option.name">{{ option.text }}
         <br>
         <span class="text-muted">
@@ -36,7 +36,7 @@
             {{ option.long_desc }}</cd-helper>
         </span>
       </label>
-      <div class="col-6">
+      <div class="cd-col-form-input">
         <div class="input-group">
           <input class="form-control"
                  [type]="option.additionalTypeInfo.inputType"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
index d6ac94af42aa4..6968a1fd488ad 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.html
@@ -18,10 +18,10 @@
 
 <ng-container *ngIf="grafanaExist && dashboardExist">
   <div class="row">
-    <div class="col-12">
+    <div class="col">
       <div class="form-inline timepicker">
         <label for="timepicker"
-               class="ml-1 my-1 col-form-label"
+               class="ml-1 my-1"
                i18n>Grafana Time Picker</label>
 
         <select id="timepicker"
@@ -45,7 +45,7 @@
   </div>
 
   <div class="row">
-    <div class="col-12">
+    <div class="col">
       <div class="grafana-container">
         <iframe #iframe
                 id="iframe"
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 3d34340a6af8e..fb7f8ef3a34d3 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
@@ -27,8 +27,8 @@ ngx-simplebar {
 }
 
 .separator {
-  background-color: bd.$color-popover-seperator-bg;
-  color: bd.$color-popover-seperator-text;
+  background-color: bd.$gray-200;
+  color: bd.$gray-600;
   font-size: 1rem;
   padding: 5px 12px;
 }
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 e0a60af896a92..c4a5c38d672a0 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,7 +1,7 @@
 <div class="container-fluid">
   <div class="row">
-    <div class="col-12">
-      <div class="float-right d-inline-flex">
+    <div class="col d-flex justify-content-end">
+      <form class="form-inline">
         <label for="refreshInterval"
                class="col-form-label my-0 mx-2"
                i18n>Refresh</label>
@@ -13,7 +13,7 @@
           <option *ngFor="let key of intervalKeys"
                   [value]="intervalList[key]">{{ key }}</option>
         </select>
-      </div>
+      </form>
     </div>
   </div>
 </div>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html
index 955f4f4e0bdca..190944311bed9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.html
@@ -11,7 +11,7 @@
              (keyup)="$event.keyCode == 13 ? selectOption() : updateFilter()"
              class="form-control text-center" />
       <ng-container *ngFor="let error of Object.keys(messages.customValidations)">
-        <span class="invalid-feedback text-center"
+        <span class="invalid-feedback text-center d-block"
               *ngIf="form.showError('filter', formDir) && filter.hasError(error)">
           {{ messages.customValidations[error] }}
         </span>
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 6adfb0e3e1130..252b44cd6cb90 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;
 
 .select-menu-item {
-  border-bottom: 1px solid bd.$color-transparent;
+  border-bottom: 1px solid bd.$datatable-divider-color;
   cursor: pointer;
   display: block;
   font-size: 1rem;
 
   &:hover {
-    background-color: bd.$color-whitesmoke-gray;
+    background-color: bd.$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 735667d5dd410..e0cd3e55b0d18 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
@@ -5,7 +5,7 @@
 }
 
 .bg-freespace {
-  background-color: bd.$gray-500 !important;
+  background-color: bd.$gray-400 !important;
 }
 
 .progress {
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 e102a91872e5a..fa954ad5de260 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
@@ -12,7 +12,7 @@
   margin-bottom: 25px;
 
   .separator {
-    border-left: 1px solid bd.$color-table-seperator-border;
+    border-left: 1px solid bd.$datatable-divider-color;
     display: inline-block;
     height: 30px;
     margin-left: 5px;
@@ -21,7 +21,7 @@
   }
 
   .widget-toolbar {
-    border-left: 1px solid bd.$color-table-seperator-border;
+    border-left: 1px solid bd.$datatable-divider-color;
     float: right;
     padding: 0 8px;
 
@@ -37,8 +37,8 @@
 }
 
 .dataTables_header {
-  background-color: bd.$color-table-header-bg;
-  border: 1px solid bd.$color-table-header-border;
+  background-color: bd.$gray-100;
+  border: 1px solid bd.$gray-400;
   border-bottom: 0;
   padding: 5px;
   position: relative;
@@ -48,7 +48,7 @@
   }
 
   ::ng-deep .table-filters {
-    border-left: 1px solid bd.$color-table-seperator-border;
+    border-left: 1px solid bd.$datatable-divider-color;
     float: right;
     padding-left: 8px;
   }
@@ -62,7 +62,7 @@
   }
 
   .input-group {
-    border-left: 1px solid bd.$color-table-input-border;
+    border-left: 1px solid bd.$datatable-divider-color;
     float: right;
     max-width: 250px;
     padding-left: 8px;
@@ -87,7 +87,7 @@
 }
 
 ::ng-deep .cd-datatable {
-  border: 1px solid bd.$color-table-header-border;
+  border: 1px solid bd.$gray-400;
   margin-bottom: 0;
   max-width: none !important;
 
@@ -100,10 +100,10 @@
     width: 100%;
 
     .container {
-      background-color: bd.$color-table-active-row;
+      background-color: bd.$primary;
 
       .bar {
-        background-color: bd.$color-table-active-row;
+        background-color: bd.$primary;
         height: 100%;
         left: 0;
         overflow: hidden;
@@ -113,7 +113,7 @@
 
       .bar::before {
         animation: progress-loading 3s linear infinite;
-        background-color: bd.$color-table-progress-bar-active;
+        background-color: bd.$primary;
         content: '';
         display: block;
         height: 100%;
@@ -126,18 +126,14 @@
 
   .datatable-header {
     background-clip: padding-box;
-    background-color: bd.$color-table-datatable-header;
-    background-image: linear-gradient(
-      to bottom,
-      bd.$color-table-gradient-1 0,
-      bd.$color-table-gradient-2 100%
-    );
+    background-color: bd.$gray-100;
+    background-image: linear-gradient(to bottom, bd.$gray-100 0, bd.$gray-200 100%);
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
 
     .sort-asc,
     .sort-desc {
-      color: bd.$color-table-sort;
+      color: bd.$primary;
     }
 
     .datatable-header-cell {
@@ -185,7 +181,7 @@
     margin-bottom: -6px;
 
     .empty-row {
-      background-color: bd.$color-table-empty-row;
+      background-color: lighten(bd.$primary, 45%);
       font-style: italic;
       font-weight: bold;
       padding-bottom: 5px;
@@ -195,23 +191,23 @@
 
     .datatable-body-row {
       &.clickable:hover .datatable-row-group {
-        background-color: bd.$color-table-hover-row;
+        background-color: lighten(bd.$primary, 45%);
         transition-duration: 0.3s;
         transition-property: background;
         transition-timing-function: linear;
       }
 
       &.datatable-row-even {
-        background-color: bd.$color-table-even-row-bg;
+        background-color: bd.$white;
       }
 
       &.datatable-row-odd {
-        background-color: bd.$color-table-odd-row-bg;
+        background-color: bd.$gray-100;
       }
 
       &.active,
       &.active:hover {
-        background-color: bd.$color-table-active-row-hover;
+        background-color: lighten(bd.$primary, 35%);
       }
 
       .datatable-body-cell {
@@ -229,7 +225,7 @@
     }
 
     .datatable-row-detail {
-      border-bottom: 2px solid bd.$color-table-header-border;
+      border-bottom: 2px solid bd.$gray-400;
       overflow-y: visible !important;
       padding: 20px;
     }
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index f2576ea1c8c54..392f8227a925b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -31,14 +31,7 @@ $popover-max-width: 350px;
   padding-top: 5em;
 }
 
-.cd-header,
-legend {
-  @extend .pb-1;
-  @extend .mt-4;
-  @extend .mb-4;
-  @extend .border-bottom;
-}
-
+// TODO: Replace (cd-)col-form-label with something more generic.
 @include media-breakpoint-up(sm) {
   .col-form-label {
     text-align: right;
@@ -49,34 +42,6 @@ legend {
   font-weight: 700;
 }
 
-// Firefox is adding a white background-coor in these components
-cd-submit-button {
-  background-color: transparent !important;
-}
-
-// All '.fa' icons will have fixed width
-.fa {
-  @extend .fa-fw;
-}
-
-pre {
-  @extend .card;
-  @extend .bg-light;
-  @extend .p-2;
-  // @extend my-2;
-}
-
-bfv-messages {
-  display: none;
-}
-
-// Display error message in 'input-group' form fields.
-// https://github.com/twbs/bootstrap/issues/23454
-// https://github.com/adrianhurt/play-bootstrap/issues/118
-.form-group.has-error .invalid-feedback {
-  display: block;
-}
-
 //Displaying the password strength
 .password-strength-level {
   flex: 100%;
@@ -106,7 +71,7 @@ bfv-messages {
   }
 
   .very-strong {
-    background: darken($success, 30%);
+    background: darken($success, 15%);
     width: 100%;
   }
 }
@@ -137,19 +102,23 @@ tree-root {
 
 // Other
 tags-input .tags {
-  border-radius: 4px;
   border: 1px solid $gray-400;
+  border-radius: 4px;
   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 151661002d7cb..47d09ae24f2d5 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
@@ -12,7 +12,7 @@ canvas {
 }
 
 .chartjs-tooltip {
-  background: rgba(bd.$black, .7);
+  background: rgba(bd.$black, 0.7);
   border-radius: 3px;
   color: bd.$white;
   font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
index ff315bf121682..29cc23c814d8e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss
@@ -89,3 +89,22 @@ cd-about {
     @extend .col-8;
   }
 }
+
+.cd-header,
+legend {
+  @extend .pb-1;
+  @extend .mt-4;
+  @extend .mb-4;
+  @extend .border-bottom;
+}
+
+// All '.fa' icons will have fixed width
+.fa {
+  @extend .fa-fw;
+}
+
+pre {
+  @extend .card;
+  @extend .bg-light;
+  @extend .p-2;
+}
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 bef1fa56ba355..59c7cfcb60bc4 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
@@ -20,13 +20,16 @@ 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 57ea2defade33..a0590861c52b7 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
@@ -64,3 +64,7 @@
   /** Add space between icon and text */
   margin-right: 5px;
 }
+
+.card-footer button.btn:not(:first-child) {
+  margin-left: 5px;
+}
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 524aa3885b070..dccdfbbc311af 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,9 +1,8 @@
-@use "sass:map";
 @use '../defaults/bootstrap-defaults' as bd;
 
 /* Forms */
 .required::after {
-  color: map.get(bd.$theme-colors, "accent");
+  color: bd.$danger;
   content: '*';
   font-size: 1.167rem;
   padding-left: 4px;
@@ -19,8 +18,7 @@
 
   &:focus {
     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);
+    box-shadow: inset 0 1px 1px rgba(bd.$black, 0.75), 0 0 8px 2px rgba(bd.$primary, 0.5);
     outline: 0;
   }
 }
@@ -67,3 +65,7 @@ cd-modal {
     @extend .offset-lg-4;
   }
 }
+
+.invalid-feedback {
+  display: block;
+}
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 393902a9108af..ebc002383ebf3 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,90 +1,6 @@
 @use '../defaults/bootstrap-defaults' as bd;
 
 /* Grid */
-.container,
 .container-fluid {
-  padding-left: 30px !important;
-  padding-right: 30px !important;
-}
-
-.row {
-  margin-left: -30px;
-  margin-right: -30px;
-}
-
-.col-lg-1,
-.col-lg-10,
-.col-lg-11,
-.col-lg-12,
-.col-lg-2,
-.col-lg-3,
-.col-lg-4,
-.col-lg-5,
-.col-lg-6,
-.col-lg-7,
-.col-lg-8,
-.col-lg-9,
-.col-md-1,
-.col-md-10,
-.col-md-11,
-.col-md-12,
-.col-md-2,
-.col-md-3,
-.col-md-4,
-.col-md-5,
-.col-md-6,
-.col-md-7,
-.col-md-8,
-.col-md-9,
-.col-sm-1,
-.col-sm-10,
-.col-sm-11,
-.col-sm-12,
-.col-sm-2,
-.col-sm-3,
-.col-sm-4,
-.col-sm-5,
-.col-sm-6,
-.col-sm-7,
-.col-sm-8,
-.col-sm-9,
-.col-1,
-.col-10,
-.col-11,
-.col-12,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9 {
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-tags-input .tags {
-  border: 1px solid bd.$color-tags-border;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px bd.$color-tags-box-shadow;
-}
-
-.card-header {
-  font-size: 1.3em;
-}
-
-.disabled {
-  pointer-events: none;
-}
-
-.clickable,
-a {
-  cursor: pointer;
-}
-
-:invalid .has-error-btn,
-:invalid .has-error-btn:disabled:hover {
-  background-color: bd.$color-error-btn-bg;
-  border-color: bd.$color-error-btn-border;
+  padding: 0 bd.$grid-gutter-width;
 }
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 b7f76077557b1..1cbab1ac87276 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 @@
 .toast-message > ul {
-  padding-left: 1rem;
   margin: 0;
+  padding-left: 1rem;
 }
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 d48fcb33941cc..b00aaa0195cea 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
@@ -2,40 +2,40 @@
 
 // Color system
 
-$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;
+$white: #fff !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: #000 !default;
+
+$blue: #007bff !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #a94442;
+$red: #ef5c55;
+$orange: #fd7e14 !default;
+$yellow: #ffc200;
+$green: #0b0;
+$teal: #20c997 !default;
+$cyan: #17a2b8 !default;
+
+$primary: #2b99a8;
 $secondary: #374249;
-$success:   $green;
-$info:      $primary;
-$warning:   $yellow;
-$danger:    $red;
-$light:     $gray-100;
-$dark:      #777777;
+$success: $green;
+$info: $primary;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: #777;
 
 $theme-colors: (
-  "accent": $red
+  'accent': #ef5c55
 );
 
 // Body
@@ -47,7 +47,7 @@ $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';
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
 // Card
 
@@ -57,14 +57,18 @@ $card-cap-bg: $gray-100;
 
 $grid-gutter-width: 30px;
 
+// Table
+
+$datatable-divider-color: rgba($black, 0.09);
+
 // Navs
 
 $nav-tabs-margin-bottom: 1rem;
 
 // Tooltips
 
-$tooltip-color:                     $white;
-$tooltip-bg:                        $body-color;
+$tooltip-color: $white;
+$tooltip-bg: $body-color;
 
 // Misc
 
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 37d076ab20f82..d0f6aee913a13 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,17 @@
 @use '../vendor/variables';
-@use 'bootstrap-defaults';
+@use 'bootstrap-defaults' as bd;
 @use 'functions';
 
 @mixin table-cell {
   border: 0;
-  border-bottom: 1px solid bootstrap-defaults.$color-light-gray;
-  border-left: 1px solid bootstrap-defaults.$color-light-gray;
+  border-bottom: 1px solid bd.$gray-400;
+  border-left: 1px solid bd.$gray-400;
   padding: 5px;
 }
 
 @mixin hf {
-  background-color: bootstrap-defaults.$color-whitesmoke-gray;
-  border-bottom: 1px solid bootstrap-defaults.$color-light-gray;
+  background-color: bd.$gray-200;
+  border-bottom: 1px solid bd.$gray-400;
 }
 
 @mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) {