fix(color): adjust color scheme for some elements

- icons, buttons, nav-items, tabs, pills, inputs

Author: adorade

themes/boodark/css/theme-nord.css

@@ -45,8 +45,8 @@ input {
     // }
   }
 
-  &[type=checkbox]:not(.form-check-input:not(.form-check-input)),
-  &[type=radio]:not(.form-check-input:not(.form-check-input)) {
+  &[type=checkbox]:not(.form-check-input),
+  &[type=radio]:not(.form-check-input) {
     width: $form-check-input-width;
     height: $form-check-input-width;
     margin-top: ($line-height-base - $form-check-input-width) * .75;
@@ -105,15 +105,53 @@ input {
     }
   }
 
-  &[type=file]::file-selector-button {
-    @extend .btn-dark;
-    border-width: 1px;
-    border-style: solid;
+  &[type=file] {
+    // display: block;
+    // width: 100%;
+    display: inline-block;
+    width: auto;
+    padding: $input-padding-y $input-padding-x;
+    font-family: $input-font-family;
+    @include font-size($input-font-size);
+    font-weight: $input-font-weight;
+    line-height: $input-line-height;
+    color: $input-color;
+    background-color: $input-bg;
+    background-clip: padding-box;
+    border: $input-border-width solid $input-border-color;
+    appearance: none; // Fix appearance for date inputs in Safari
+
+    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+    @include border-radius($input-border-radius, 0);
+
+    @include box-shadow($input-box-shadow);
+    @include transition($input-transition);
+
+    &::file-selector-button {
+      padding: $input-padding-y $input-padding-x;
+      margin: (-$input-padding-y) (-$input-padding-x);
+      margin-inline-end: $input-padding-x;
+      color: $form-file-button-color;
+      @include gradient-bg($form-file-button-bg);
+      pointer-events: none;
+      border-color: inherit;
+      border-style: solid;
+      border-width: 0;
+      border-inline-end-width: $input-border-width;
+      border-radius: 0;
+      @include transition($btn-transition);
+    }
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $pma-blue !important;
-    border-color: $pma-blue !important;
+    background-color: $form-file-button-hover-bg;
+    color: color-contrast($form-file-button-hover-bg);
+  }
+}
+
+.form-control {
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    color: color-contrast($form-file-button-hover-bg);
   }
 }
 

themes/boodark/css/theme-nord.css.map

@@ -7,3 +7,11 @@
 .nav-tabs {
   background-color: $nav-tabs-bg;
 }
+
+.nav-pills {
+  .nav-link.active {
+    .icon {
+      filter: brightness(0) invert(0);
+    }
+  }
+}

themes/boodark/css/theme-orange.css

@@ -13,8 +13,23 @@
 .navbar-light {
   .navbar-nav {
     .nav-item.active {
-      color: $component-active-color;
-      background-color: $component-active-bg;
+      @include button-variant($component-active-bg, $component-active-bg);
+      color: var(--bs-btn-color);
+      background-color: var(--bs-btn-bg);
+      border-top-left-radius: $nav-item-border-radius;
+      border-top-right-radius: $nav-item-border-radius;
+
+      &:first-child {
+        border-top-left-radius: 0;
+      }
+
+      .nav-link {
+        color: var(--bs-btn-color);
+      }
+
+      .icon {
+        filter: brightness(0) invert(0);
+      }
     }
   }
 }

themes/boodark/css/theme-orange.css.map

@@ -82,12 +82,13 @@ $pma-color-scheme: $pma-cyan;
 
 // PMA Base Style
 // -----------------------------------------------------------------------------
+$pma-primary:                 $pma-color-scheme;
 $pma-body-color:              $white;
 $pma-body-bg:                 $pma-gray-900;
 $pma-component-bg:            $pma-gray-800;
 $pma-component-hover-bg:      $pma-gray-600;
-$pma-component-active-color:  $white;
-$pma-component-active-bg:     $pma-blue;
+$pma-component-active-color:  $black;
+$pma-component-active-bg:     $pma-primary;
 $pma-table-bg:                $pma-gray-700;
 $pma-form-border-color:       $pma-gray-900;
 $pma-selected-bg:             $pma-gray-700;
@@ -96,14 +97,15 @@ $pma-fieldset-bg:             $pma-gray-600;
 $pma-border-color:            $pma-gray-600;
 $pma-disable-color:           $pma-gray-500;
 $pma-cond-border-color:       $black;
-$pma-button-color:            $pma-color-scheme;
-$pma-link-color:              $pma-color-scheme;
+$pma-button-color:            $pma-primary;
+$pma-link-color:              $pma-primary;
 $pma-link-hover-color:        $pma-red;
 $pma-custom-color:            $pma-orange;
 
 // Bootstrap variables
 // -----------------------------------------------------------------------------
 // Color system
+$primary:                     $pma-primary;
 $secondary:                   $pma-gray-700;
 $light:                       $pma-gray-800;
 // Options
@@ -148,17 +150,23 @@ $input-group-addon-bg:        $pma-component-bg;
 $form-check-input-border:     1px solid rgba($pma-body-color, .4);
 $form-select-indicator-color: $pma-body-color;
 $form-switch-color:           rgba($pma-body-color, .75);
+$form-file-button-color:      color-contrast($pma-gray-900);
+$form-file-button-bg:         $pma-gray-900;
+$form-file-button-hover-bg:   $pma-primary;
 // Form validation
 // Z-index master list
-// Navs
+// Nav Tabs
 $nav-tabs-bg:                       rgba($pma-body-bg, .5);
 $nav-tabs-border-color:             rgba($pma-body-bg, .5);
 $nav-tabs-border-width:             0;
 $nav-tabs-link-hover-border-color:  transparent;
 $nav-tabs-link-active-color:        $pma-component-active-color;
 $nav-tabs-link-active-bg:           $pma-component-active-bg;
 $nav-tabs-link-active-border-color: rgba($pma-body-bg, .5);
+// Nav Pills
 $nav-pills-bg:                      $pma-body-bg;
+$nav-pills-link-active-color:       $pma-component-active-color;
+$nav-pills-link-active-bg:          $pma-component-active-bg;
 // Navbar
 $navbar-light-color:                $white;
 $navbar-light-hover-color:          rgba($white, .65);
@@ -178,6 +186,7 @@ $navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://w
 $navbar-dark-toggler-border-color:  rgba($white, .1);
 $navbar-dark-brand-color:           $navbar-dark-active-color;
 $navbar-dark-brand-hover-color:     $navbar-dark-active-color;
+$nav-item-border-radius:            .375rem;
 // Dropdowns
 $dropdown-color:              $pma-body-color;
 $dropdown-bg:                 $pma-body-bg;
@@ -207,6 +216,7 @@ $accordion-bg:                  $pma-component-bg;
 $accordion-button-bg:           darken($pma-component-bg, 2.5%);
 $accordion-button-active-bg:    darken($pma-component-bg, 3.5%);
 $accordion-button-active-color: $pma-body-color;
+$accordion-border-color:        $pma-form-border-color;
 // Tooltips
 // Popovers
 // Toasts