$gray-xxxのようなBootstrapのグレー系変数を上書き。

前回のコミットではdarken($light, 20%)のような書き方で数段のグレー系を表現していたが、先に$gray-xxx変数を設定し、以降のグレーは$gray-xxxの変数を使うようにした。

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -12,6 +12,17 @@ $warning: #ffa32b !default;
 $danger: #ff0a54 !default;
 $light: #e4e7ea !default;
 $dark: #343a40 !default;
+$gray-50: lighten($light, 7%) !default;
+$gray-100: lighten($light, 4%) !default;
+$gray-200: $light !default;
+$gray-300: darken($light, 5%) !default;
+$gray-400: darken($light, 20%) !default;
+$gray-500: darken($light, 30%) !default;
+$gray-600: lighten($dark, 10%) !default;
+$gray-700: lighten($dark, 5%) !default;
+$gray-800: $dark !default;
+$gray-900: darken($dark, 5%) !default;
+$red: #ff0a54 !default;
 
 //== Typography
 //

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -8,15 +8,15 @@ $bgcolor-list-active: $primary !default;
 $bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 $color-table: $color-global !default;
 $bgcolor-table: null !default;
-$border-color-table: $light !default;
+$border-color-table: $gray-200 !default;
 $color-table-hover: $color-table !default;
 $bgcolor-table-hover: rgba(black, 0.075) !default;
 $bgcolor-sidebar-list-group: $bgcolor-list !default;
-$color-tags: darken($light, 30%) !default;
-$bgcolor-tags: $light !default;
+$color-tags: $gray-500 !default;
+$bgcolor-tags: $gray-200 !default;
 
 // override bootstrap variables
-$border-color: $light;
+$border-color: $gray-200;
 $table-color: $color-table;
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
@@ -72,28 +72,28 @@ $table-hover-bg: $bgcolor-table-hover;
   .dropdown-with-icon {
     .dropdown-toggle {
       color: white;
-      background-color: rgba(lighten($dark, 10%), 0.7);
+      background-color: rgba($gray-600, 0.7);
       box-shadow: unset;
       &:focus {
         color: white;
-        background-color: rgba(lighten($dark, 10%), 0.7);
+        background-color: rgba($gray-600, 0.7);
       }
     }
     i {
       color: darken(white, 30%);
-      background-color: rgba(lighten($dark, 5%), 0.7);
+      background-color: rgba($gray-700, 0.7);
     }
   }
 
   .input-group {
     .input-group-text {
       color: darken(white, 30%);
-      background-color: rgba(lighten($dark, 5%), 0.7);
+      background-color: rgba($gray-700, 0.7);
     }
 
     .form-control {
       color: white;
-      background-color: rgba(lighten($dark, 10%), 0.7);
+      background-color: rgba($gray-600, 0.7);
       box-shadow: unset;
 
       &::placeholder {
@@ -134,7 +134,7 @@ $table-hover-bg: $bgcolor-table-hover;
 
 .grw-drawer-toggler {
   @extend .btn-light;
-  color: darken($light, 30%);
+  color: $gray-500;
 }
 
 /*
@@ -176,7 +176,7 @@ $table-hover-bg: $bgcolor-table-hover;
 
 .wiki {
   h1 {
-    border-color: darken($border-color-theme, 10%);
+    border-color: $border-color-theme;
   }
   h2 {
     border-color: $border-color-theme;

src/client/styles/scss/theme/_apply-colors.scss

@@ -3,16 +3,16 @@
 //
 
 // determine optional variables
-$border-image-navbar: linear-gradient(to right, #ccc 0%, #ccc 100%) !default;
+$border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
 $bgcolor-search-top-dropdown: $secondary !default;
 $bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
 $text-shadow-sidebar-nav-item-active: 1px 1px 2px $primary !default;
-$bgcolor-inline-code: #f0f0f0 !default;
-$color-inline-code: #c7254e !default;
-$bordercolor-inline-code: #ccc8c8 !default;
-$bordercolor-nav-tabs: #dee2e6 !default;
-$bordercolor-nav-tabs-hover: #e9ecef #e9ecef $bordercolor-nav-tabs !default;
-$color-nav-tabs-link-active: #495057 !default;
+$bgcolor-inline-code: $gray-100 !default;
+$color-inline-code: darken($red, 15%) !default;
+$bordercolor-inline-code: $gray-400 !default;
+$bordercolor-nav-tabs: $gray-300 !default;
+$bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
+$color-nav-tabs-link-active: $gray-600 !default;
 $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
 
 // override bootstrap variables
@@ -264,7 +264,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
  */
 .admin-page {
   span.slider {
-    background-color: #ccc;
+    background-color: $gray-300;
 
     &:before {
       background-color: white;

src/client/styles/scss/theme/default.scss

@@ -20,8 +20,8 @@ html[light] {
 
   // Background colors
   $bgcolor-global: white;
-  $bgcolor-inline-code: lighten($light, 4%); //optional
-  $bgcolor-card: lighten($light, 7%);
+  $bgcolor-inline-code: $gray-100; //optional
+  $bgcolor-card: $gray-50;
 
   // Font colors
   $color-global: #112744;
@@ -31,8 +31,8 @@ html[light] {
   $color-link-hover: lighten($color-link, 20%);
   $color-link-wiki: $color-link;
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
-  $color-link-nabvar: darken($light, 30%);
-  $color-inline-code: darken($danger, 15%); // optional
+  $color-link-nabvar: $gray-500;
+  $color-inline-code: darken($red, 15%); // optional
 
   // List Group colors
   // $color-list: $color-global; // optional
@@ -51,7 +51,7 @@ html[light] {
   // $bgcolor-table-hover: #; // optional
 
   // Navbar
-  $bgcolor-navbar: darken($dark, 5%);
+  $bgcolor-navbar: $gray-900;
   $bgcolor-search-top-dropdown: $accent;
   $border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);
 
@@ -61,7 +61,7 @@ html[light] {
 
   // Sidebar
   $bgcolor-sidebar: $primary;
-  $bgcolor-sidebar-nav-item-active: rgba(#000000, 0.37); // optional
+  $bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
   $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
   $color-resize-button: $color-reversal;
@@ -70,9 +70,9 @@ html[light] {
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
   // Sidebar contents
   $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: lighten($light, 4%);
+  $bgcolor-sidebar-context: $gray-100;
   // Sidebar list group
-  $bgcolor-sidebar-list-group: lighten($light, 7%); // optional
+  $bgcolor-sidebar-list-group: $gray-50; // optional
 
   // Subnavigation
   // $bgcolor-subnav: #fafafa; // optional
@@ -90,8 +90,8 @@ html[light] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: darken($light, 10%);
-  $bordercolor-inline-code: darken($light, 20%); // optional
+  $border-color-theme: $gray-400;
+  $bordercolor-inline-code: $gray-400; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;