Merge pull request #41 from adorade/v1-dev

New color scheme

README.md

@@ -58,7 +58,7 @@ To build the theme or customize it with your preferences you must have **Node**,
 1. Open your command-line and navigate to your projects folder
 2. Clone this repo locally: `git clone https://github.com/adorade/boodark .`
 3. Install project dependecies: `yarn install`
-4. Do any modifications you want
+4. Do any modifications you want (eg. change color scheme)
 5. Compile `scss` files to `css`
 
     ```sh
@@ -70,6 +70,34 @@ To build the theme or customize it with your preferences you must have **Node**,
 
 6. Theme files are in `themes/boodark`.
 
+## Color Scheme
+
+BooDark has several color schemes: _cyan_ (default), _teal_, _nord_ and _orange_. There is currently no way to change the color scheme in GUI.
+
+**How to change color scheme?**
+
+Option 1. Edit `scss/_variables.scss` (see [Building](#building))
+
+```scss
+// Theme color scheme
+// Values: "cyan", "teal", "nord", "orange"
+// Default: "cyan"
+// Set this value for the desired color scheme
+// Change cyan
+$color-scheme: cyan !default;
+// to nord
+$color-scheme: nord !default;
+
+// then run `yarn run build`
+```
+
+Option 2. Replace the CSS files. For example:
+
+```sh
+mv themes/boodark/css/theme.css themes/boodark/css/theme-cyan.css
+mv themes/boodark/css/theme-nord.css themes/boodark/css/theme.css
+```
+
 ## Bugs and feature requests
 
 Have a bug or a feature request? Please search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/adorade/boodark/issues/new).

themes/boodark/scss/_common.scss

@@ -468,7 +468,7 @@ div#tablestatistics table {
 
   .dropdown-toggle {
     &::after {
-      color: $pma-cyan;
+      color: $pma-link-color;
     }
   }
 }
@@ -1473,7 +1473,7 @@ input#auto_increment_opt {
       background: none;
 
       &:hover {
-        color: $pma-cyan;
+        color: $pma-link-color;
         cursor: pointer;
       }
     }
@@ -1713,7 +1713,7 @@ table.show_create {
   background: rgba($pma-body-bg, .8);
   height: 100%;
   z-index: 999;
-  color: $pma-cyan;
+  color: $pma-link-color;
   font-size: 30pt;
   text-align: center;
   padding-top: 20%;

themes/boodark/scss/_forms.scss

@@ -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/scss/_icons.scss

@@ -3,7 +3,7 @@
 // Icons
 
 // Icon Colors
-$svg-color:     $pma-link-color;          // #0dcaf0, $pma-cyan
+$svg-color:     $pma-link-color;          // #0dcaf0, default color scheme: cyan
 $disable-color: $pma-disable-color;       // #adb5bd
 $ajax-color:    $pma-body-color;          // #fff
 $green-color:   $pma-green;               // #198754

themes/boodark/scss/_list-group.scss

@@ -0,0 +1,14 @@
+// List group
+
+#li_select_theme {
+  form::after {
+    padding-top: 0.325rem;
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    content: "Scheme: #{$color-scheme} / Version: #{$pma-theme-version}";
+    color: $pma-link-color;
+
+    @include media-breakpoint-up(lg) {
+      padding-top: 0;
+    }
+  }
+}

themes/boodark/scss/_nav.scss

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

themes/boodark/scss/_navbar.scss

@@ -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/scss/_variables.scss

@@ -2,6 +2,9 @@
 // Variables
 // =============================================================================
 
+// Theme version
+$pma-theme-version: "1.0.4-dev";
+
 // PMA color system
 // -----------------------------------------------------------------------------
 $white:             #fff;
@@ -34,6 +37,7 @@ $pma-yellow:        #ffc107;
 $pma-green:         #198754;
 $pma-teal:          #20c997;
 $pma-cyan:          #0dcaf0;
+$pma-nord:          #88c0d0;
 
 // Theme Colors
 $pma-theme-colors: (
@@ -57,17 +61,34 @@ $pma-theme-colors: (
   "yellow":   $pma-yellow,
   "green":    $pma-green,
   "teal":     $pma-teal,
-  "cyan":     $pma-cyan
+  "cyan":     $pma-cyan,
+  "nord":     $pma-nord
 );
 
+// Theme color scheme
+// Values: "cyan", "teal", "nord", "orange"
+// Default: "cyan"
+// Set this value for the desired color scheme
+$color-scheme: cyan !default;
+$pma-color-scheme: $pma-cyan;
+
+@if $color-scheme == teal {
+  $pma-color-scheme: $pma-teal;
+} @else if $color-scheme == nord {
+  $pma-color-scheme: $pma-nord;
+} @else if $color-scheme == orange {
+  $pma-color-scheme: $pma-orange;
+}
+
 // 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;
@@ -76,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-cyan;
-$pma-link-color:              $pma-cyan;
+$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
@@ -128,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);
@@ -158,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;
@@ -187,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

themes/boodark/scss/theme-nord.scss

@@ -0,0 +1,6 @@
+// stylelint-disable no-invalid-position-at-import-rule
+// Theme: boodark - color scheme nord
+
+$color-scheme: nord;
+
+@import "theme";

themes/boodark/scss/theme-orange.scss

@@ -0,0 +1,6 @@
+// stylelint-disable no-invalid-position-at-import-rule
+// Theme: boodark - color scheme orange
+
+$color-scheme: orange;
+
+@import "theme";

themes/boodark/scss/theme-teal.scss

@@ -0,0 +1,6 @@
+// stylelint-disable no-invalid-position-at-import-rule
+// Theme: boodark - color scheme teal
+
+$color-scheme: teal;
+
+@import "theme";

themes/boodark/scss/theme.scss

@@ -27,7 +27,7 @@
 @import "breadcrumb";
 // @import "pagination";
 // @import "alert";
-// @import "list-group";
+@import "list-group";
 @import "modal";
 @import "console";
 @import "settings";