Fix Bug 1453479 - more dark theme updates

system-addon/content-src/components/Base/_Base.scss

@@ -90,6 +90,10 @@ main {
 
     &:hover,
     &:focus {
+      background-color: var(--newtab-element-hover-color);
+    }
+
+    &:active {
       background-color: var(--newtab-element-active-color);
     }
   }

system-addon/content-src/components/Card/_Card.scss

@@ -18,7 +18,7 @@
 
   .card {
     border-radius: $border-radius;
-    box-shadow: $shadow-secondary;
+    box-shadow: var(--newtab-card-shadow);
     height: 100%;
   }
 
@@ -131,6 +131,7 @@
 
   .card-title {
     font-size: 14px;
+    font-weight: 600;
     line-height: $card-text-line-height;
     margin: 0 0 $card-title-margin;
     word-wrap: break-word;

system-addon/content-src/components/CollapsibleSection/_CollapsibleSection.scss

@@ -73,7 +73,7 @@
   }
 
   &.active {
-    background: var(--newtab-element-active-color);
+    background: var(--newtab-element-hover-color);
     border-radius: 4px;
 
     .section-top-bar {
@@ -103,7 +103,7 @@
     }
 
     a {
-      color: var(--newtab-link-secondary-color);
+      color: var(--newtab-link-primary-color);
       font-weight: bold;
       padding-left: 3px;
     }

system-addon/content-src/components/ContextMenu/_ContextMenu.scss

@@ -1,5 +1,5 @@
 .context-menu {
-  background: var(--newtab-background-color);
+  background: var(--newtab-contextmenu-background-color);
   border-radius: $context-menu-border-radius;
   box-shadow: $context-menu-shadow;
   display: block;
@@ -35,6 +35,10 @@
         white-space: nowrap;
 
         &:-moz-any(:focus, :hover) {
+          background: var(--newtab-element-hover-color);
+        }
+
+        &:active {
           background: var(--newtab-element-active-color);
         }
 

system-addon/content-src/components/Search/_Search.scss

@@ -1,6 +1,4 @@
 .search-wrapper {
-  $search-border-radius: 3px;
-  $search-focus-color: $blue-60;
   $search-height: 35px;
   $search-input-left-label-width: 35px;
   $search-button-width: 36px;
@@ -13,17 +11,13 @@
   cursor: default;
   display: flex;
   height: $search-height;
-  // The extra 1px is to account for the box-shadow being outside of the element
-  // instead of inside. It needs to be like that to not overlap the inner background
-  // color of the hover state of the submit button.
-  margin: 1px 1px $section-spacing;
+  margin-bottom: $section-spacing;
   position: relative;
   width: 100%;
 
   input {
-    background: var(--newtab-search-background-color);
+    background: var(--newtab-textbox-background-color);
     border: solid 1px var(--newtab-search-border-color);
-    border-radius: $search-border-radius;
     box-shadow: $shadow-secondary, 0 0 0 1px $black-15;
     font-size: 15px;
     padding: 0;
@@ -38,7 +32,8 @@
 
   &:active input,
   input:focus {
-    box-shadow: 0 0 0 $os-search-focus-shadow-radius $search-focus-color;
+    border: $input-border-active;
+    box-shadow: var(--newtab-textbox-focus-boxshadow);
   }
 
   .search-label {
@@ -83,13 +78,12 @@
   // Adjust the style of the contentSearchUI-generated table
   // sass-lint:disable-block class-name-format
   .contentSearchSuggestionTable {
-    background-color: var(--newtab-modal-color);
     border: 0;
     box-shadow: $context-menu-shadow;
     transform: translateY(3px);
 
     .contentSearchHeader {
-      background-color: var(--newtab-background-color);
+      background-color: var(--newtab-search-dropdown-header-color);
       color: var(--newtab-text-secondary-color);
     }
 
@@ -103,9 +97,34 @@
       color: var(--newtab-text-primary-color);
     }
 
+    .contentSearchSuggestionsContainer {
+      background-color: var(--newtab-search-dropdown-color);
+    }
+
+    .contentSearchSuggestionRow {
+      &.selected {
+        background: var(--newtab-element-hover-color);
+        color: var(--newtab-text-primary-color);
+
+        &:active {
+          background: var(--newtab-element-active-color);
+        }
+
+        .historyIcon {
+          fill: var(--newtab-icon-secondary-color);
+        }
+      }
+    }
+
+    .contentSearchOneOffsTable {
+      .contentSearchSuggestionsContainer {
+        background-color: var(--newtab-search-dropdown-header-color);
+      }
+    }
+
     .contentSearchSettingsButton {
       &:hover {
-        background: var(--newtab-element-active-color);
+        background: var(--newtab-element-hover-color);
         color: var(--newtab-text-primary-color);
       }
     }

system-addon/content-src/components/TopSites/_TopSites.scss

@@ -104,7 +104,7 @@ $half-base-gutter: $base-gutter / 2;
 
   .tile { // sass-lint:disable-block property-sort-order
     border-radius: $top-sites-border-radius;
-    box-shadow: inset $inner-box-shadow, $shadow-secondary;
+    box-shadow: inset $inner-box-shadow, var(--newtab-card-shadow);
     height: $top-sites-size;
     position: relative;
     width: $top-sites-size;
@@ -406,9 +406,8 @@ $half-base-gutter: $base-gutter / 2;
 
     input {
       &[type='text'] {
-        background-color: var(--newtab-textbox-color);
+        background-color: var(--newtab-textbox-background-color);
         border: $input-border;
-        border-radius: 2px;
         margin: 8px 0;
         padding: 0 8px;
         height: 32px;
@@ -417,7 +416,7 @@ $half-base-gutter: $base-gutter / 2;
 
         &:focus {
           border: $input-border-active;
-          box-shadow: $input-focus-boxshadow;
+          box-shadow: var(--newtab-textbox-focus-boxshadow);
         }
 
         &[disabled] {

system-addon/content-src/components/Topics/_Topics.scss

@@ -33,10 +33,12 @@
 
   .topic-link {
     color: var(--newtab-link-secondary-color);
+    font-weight: bold;
   }
 
   .topic-read-more {
     color: var(--newtab-link-secondary-color);
+    font-weight: bold;
 
     @media (min-width: $break-point-large) {
       // This is floating to accomodate a very large number of topics and/or

system-addon/content-src/styles/_activity-stream.scss

@@ -116,6 +116,13 @@ a {
   }
 }
 
+input {
+  &[type='text'],
+  &[type='search'] {
+    border-radius: $border-radius;
+  }
+}
+
 // Make sure snippets show up above other UI elements
 #snippets-container { // sass-lint:disable-line no-ids
   z-index: 1;

system-addon/content-src/styles/_theme.scss

@@ -1,3 +1,8 @@
+@mixin textbox-focus($color) {
+  --newtab-textbox-focus-color: $color;
+  --newtab-textbox-focus-boxshadow: 0 0 0 1px $color, 0 0 0 4px rgba($color, 0.3); // sass-lint:disable-line no-color-literals
+}
+
 // Default theme
 body {
   // General styles
@@ -6,7 +11,8 @@ body {
   --newtab-border-secondary-color: $grey-30;
   --newtab-button-primary-color: $blue-60;
   --newtab-button-secondary-color: inherit;
-  --newtab-element-active-color: $grey-20;
+  --newtab-element-active-color: $grey-30-60;
+  --newtab-element-hover-color: $grey-20;
   --newtab-icon-primary-color: $grey-90-80;
   --newtab-icon-secondary-color: $grey-90-60;
   --newtab-icon-tertiary-color: $grey-30;
@@ -16,10 +22,12 @@ body {
   --newtab-text-conditional-color: $grey-60;
   --newtab-text-primary-color: $grey-90;
   --newtab-text-secondary-color: $grey-50;
+  --newtab-textbox-background-color: $white;
   --newtab-textbox-border: $grey-90-20;
-  --newtab-textbox-color: inherit;
+  @include textbox-focus($blue-60); // sass-lint:disable-line mixins-before-declarations
 
   // Context menu
+  --newtab-contextmenu-background-color: $grey-10;
   --newtab-contextmenu-button-color: $white;
 
   // Modal + overlay
@@ -32,17 +40,19 @@ body {
   --newtab-section-active-contextmenu-color: $grey-90;
 
   // Search
-  --newtab-search-background-color: $white;
   --newtab-search-border-color: transparent;
+  --newtab-search-dropdown-color: $white;
+  --newtab-search-dropdown-header-color: $grey-10;
   --newtab-search-icon-color: $grey-90-40;
 
   // Top Sites
   --newtab-topsites-label-color: inherit;
 
   // Cards
-  --newtab-card-background-color: $white;
   --newtab-card-active-outline-color: $grey-30;
+  --newtab-card-background-color: $white;
   --newtab-card-hairline-color: $black-10;
+  --newtab-card-shadow: 0 1px 4px 0 $grey-90-10;
 }
 
 // Dark theme
@@ -50,10 +60,11 @@ body {
   // General styles
   --newtab-background-color: $grey-80;
   --newtab-border-primary-color: $grey-10-80;
-  --newtab-border-secondary-color: $grey-10-20;
+  --newtab-border-secondary-color: $grey-10-10;
   --newtab-button-primary-color: $blue-60;
   --newtab-button-secondary-color: $grey-70;
-  --newtab-element-active-color: $grey-60;
+  --newtab-element-active-color: $grey-10-20;
+  --newtab-element-hover-color: $grey-10-10;
   --newtab-icon-primary-color: $grey-10-80;
   --newtab-icon-secondary-color: $grey-10-40;
   --newtab-icon-tertiary-color: $grey-10-20;
@@ -63,15 +74,17 @@ body {
   --newtab-text-conditional-color: $grey-10;
   --newtab-text-primary-color: $grey-10;
   --newtab-text-secondary-color: $grey-10-40;
-  --newtab-textbox-border: $grey-10-40;
-  --newtab-textbox-color: $grey-80;
+  --newtab-textbox-background-color: $grey-70;
+  --newtab-textbox-border: $grey-10-20;
+  @include textbox-focus($blue-40); // sass-lint:disable-line mixins-before-declarations
 
   // Context menu
+  --newtab-contextmenu-background-color: $grey-60;
   --newtab-contextmenu-button-color: $grey-80;
 
   // Modal + overlay
-  --newtab-modal-color: $grey-90;
-  --newtab-overlay-color: $grey-80;
+  --newtab-modal-color: $grey-80;
+  --newtab-overlay-color: $grey-90;
 
   // Sections
   --newtab-section-header-text-color: $grey-10-80;
@@ -79,27 +92,28 @@ body {
   --newtab-section-active-contextmenu-color: $white;
 
   // Search
-  --newtab-search-background-color: $grey-60;
   --newtab-search-border-color: $grey-10-20;
+  --newtab-search-dropdown-color: $grey-70;
+  --newtab-search-dropdown-header-color: $grey-60;
   --newtab-search-icon-color: $grey-10-60;
 
   // Top Sites
   --newtab-topsites-label-color: $grey-10-80;
 
   // Cards
-  --newtab-card-background-color: $grey-90;
   --newtab-card-active-outline-color: $grey-60;
-  --newtab-card-hairline-color: $grey-10-20;
+  --newtab-card-background-color: $grey-70;
+  --newtab-card-hairline-color: $grey-10-10;
+  --newtab-card-shadow: 0 1px 8px 0 $grey-90-20;
 }
 
 // scss variables related to the theme.
 $border-primary: 1px solid var(--newtab-border-primary-color);
 $border-secondary: 1px solid var(--newtab-border-secondary-color);
 $shadow-primary: 0 0 0 5px var(--newtab-card-active-outline-color);
-$shadow-secondary: 0 1px 4px 0 $grey-90-10;
+$shadow-secondary: 0 1px 4px 0 $grey-90-20;
 $input-border: solid 1px var(--newtab-textbox-border);
-$input-border-active: solid 1px $blue-50;
+$input-border-active: solid 1px var(--newtab-textbox-focus-color);
 $input-error-border: solid 1px $red-60;
 $input-error-boxshadow: 0 0 0 1px $red-60, 0 0 0 4px rgba($red-60, 0.3);
-$input-focus-boxshadow: 0 0 0 1px $blue-50, 0 0 0 4px rgba($blue-50, 0.3);
 $inner-box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color);

system-addon/content-src/styles/_variables.scss

@@ -18,11 +18,13 @@ $red-60: #D70022;
 $yellow-50: #FFE900;
 
 // Photon opacity from http://design.firefox.com/photon/visuals/color.html#opacity
+$grey-10-10: rgba($grey-10, 0.1);
 $grey-10-20: rgba($grey-10, 0.2);
 $grey-10-40: rgba($grey-10, 0.4);
 $grey-10-60: rgba($grey-10, 0.6);
 $grey-10-80: rgba($grey-10, 0.8);
 $grey-20-60: rgba($grey-20, 0.6);
+$grey-30-60: rgba($grey-30, 0.6);
 $grey-90-10: rgba($grey-90, 0.1);
 $grey-90-20: rgba($grey-90, 0.2);
 $grey-90-30: rgba($grey-90, 0.3);

system-addon/content-src/styles/activity-stream-linux.scss

@@ -3,6 +3,5 @@
 $os-infopanel-arrow-height: 10px;
 $os-infopanel-arrow-offset-end: 6px;
 $os-infopanel-arrow-width: 20px;
-$os-search-focus-shadow-radius: 3px;
 
 @import './activity-stream';

system-addon/content-src/styles/activity-stream-mac.scss

@@ -3,6 +3,5 @@
 $os-infopanel-arrow-height: 10px;
 $os-infopanel-arrow-offset-end: 7px;
 $os-infopanel-arrow-width: 18px;
-$os-search-focus-shadow-radius: 3px;
 
 @import './activity-stream';

system-addon/content-src/styles/activity-stream-windows.scss

@@ -3,6 +3,5 @@
 $os-infopanel-arrow-height: 10px;
 $os-infopanel-arrow-offset-end: 6px;
 $os-infopanel-arrow-width: 20px;
-$os-search-focus-shadow-radius: 1px;
 
 @import './activity-stream';