Merge pull request #7269 from weseek/fix/apply-colors-dark

fix: apply-colors-dark

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -15,9 +15,9 @@
   $bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
   $color-table: var(--color-table,white);
   $bgcolor-table: var(--bgcolor-table,#343a40);
-  $border-color-table: var(--border-color-table,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
+  $border-color-table: var(--border-color-table,lighten(#343a40, 7.5%));
   $color-table-hover: var(--color-table-hover,rgba(white, 0.075));
-  $bgcolor-table-hover: var(--bgcolor-table-hover,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
+  $bgcolor-table-hover: var(--bgcolor-table-hover,lighten(#343a40, 7.5%));
   $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
   $color-tags: var(--color-tags,#949494);
   $bgcolor-tags: var(--bgcolor-tags,var(--dark));
@@ -27,7 +27,7 @@
   $bgcolor-dropdown: var(--bgcolor-dropdown,var(--bgcolor-global));
   $color-dropdown-link: var(--color-dropdown-link,var(--color-global));
   $color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--light));
-  $bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,var(--primary));
+  $bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,hsl.lighten(var(--bgcolor-global), 15%));
   $color-dropdown-link-active: var(--color-dropdown-link-active,var(--light));
   $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
 
@@ -105,17 +105,24 @@
     background-color: hsl.darken(var(--bgcolor-global),5%);
   }
 
+  .rbt-input-multi .rbt-input-main {
+    color: black;
+  }
   /*
   * Table
   */
   .table {
     @extend .table-dark;
+    thead th {
+      vertical-align: bottom;
+      border-bottom: 2px solid #d6dadf;
+    }
   }
 
   /*
   * Card
   */
-  .card:not([class*=‘bg-’]):not(.well):not(.card-disabled) {
+  .card:not([class*='bg-']):not(.well):not(.card-disabled) {
     @extend .bg-dark;
   }
 
@@ -246,7 +253,6 @@
     @include mixins-buttons.button-svg-icon-variant($dark, $dark);
     color: $gray-400;
     box-shadow: none !important;
-
   }
 
   /*
@@ -521,6 +527,10 @@
     }
   }
 
+  mark.rbt-highlight-text {
+    color: var(--color-global);
+  }
+
   /*
   * GROWI popular tags
   */

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -84,7 +84,7 @@
   * card
   */
   .card.card-disabled {
-    background-color: var(--background-color);
+    background-color: var(--bgcolor-global);
     border-color: $gray-200;
   }
 

packages/app/src/styles/theme/_apply-colors.scss

@@ -187,6 +187,9 @@ ul.pagination {
   .search-typeahead {
     background-color: hsl.alpha(var(--bgcolor-global),10%);
   }
+  input.form-control {
+    border: none;
+  }
 }
 
 .grw-sidebar {
@@ -375,14 +378,6 @@ ul.pagination {
   }
 }
 
-.grw-page-accessories-modal {
-  .modal-header {
-    .close {
-      color: var(--secondary);
-    }
-  }
-}
-
 /*
  * cards
  */
@@ -693,3 +688,10 @@ Emoji picker modal
 .emoji-picker-modal {
   background-color: transparent !important;
 }
+
+/*
+* revision-history-diff
+*/
+.revision-history-diff {
+  background-color: white;
+}

packages/app/src/styles/theme/_hsl-reboot-bootstrap-theme-colors.scss

@@ -12,12 +12,6 @@ $hsl-colors: (
 @each $color, $value in $hsl-colors {
   .bg-#{$color} {
     background-color: $value !important;
-    a,
-    button {
-      @include hover-focus() {
-        background-color: hsl.darken($value, 10%) !important;
-      }
-    }
   }
 }
 

packages/preset-themes/src/styles/future.scss

@@ -19,6 +19,8 @@
 
   // Background colors
   --bgcolor-global: var(--themecolor);
+  --bgcolor-global-hs: var(--themecolor-hs);
+  --bgcolor-global-l: var(--themecolor-l);
   --bgcolor-inline-code: #1f1f22; //optional
   --bgcolor-card: #{hsl.darken(var(--themecolor), 5%)};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 60%)};
@@ -49,7 +51,7 @@
   // Table colors
   // --color-table: #; // optional
   --bgcolor-table: #{hsl.darken(var(--themecolor), 3%)}; // optional
-  // --border-color-table: #; // optional
+  --border-color-table: #{hsl.lighten(var(--themecolor), 10%)};; // optional
   // --color-table-hover: #; // optional
   // --bgcolor-table-hover: #; // optional
 
@@ -133,9 +135,4 @@
       color: white;
     }
   }
-
-  pre {
-    color: #95abba;
-    background-color: #1f1f22;
-  }
 }

packages/preset-themes/src/styles/halloween.scss

@@ -134,9 +134,4 @@ $bordercolor: #7e0d7e;
   .table {
     color: var(--color-global);
   }
-
-  pre {
-    color: #edba4a;
-    background: black;
-  }
 }