Fix thumbnail bg shading collision.

tropy · Mar 23, 2017 · f6416b6 · f6416b6
1 parent c70f6b1
commit f6416b6
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 47 deletions.
diff --git a/src/stylesheets/themes/_dark.scss b/src/stylesheets/themes/_dark.scss
@@ -1,8 +1,10 @@
+// sass-lint:disable no-color-literals
+
+
 //
 // Dark theme
 // --------------------------------------------------
 
-
 @import "light"; // dev only
 
 $theme: "dark";
@@ -29,17 +31,18 @@ $brand-primary-60:       $blue-60;
 // Grays
 // --------------------------------------------------
 
-$shade-0: #000;
-$shade-1: #212121; // 87% Border search field
-$shade-2: #292929; // 84% Inactive tab
-$shade-3: #2f2f2f; // 82% Body
-$shade-4: #333;    // 80% Sidebar bg, panel bg
-$shade-5: #404040; // 75% Active state bg/border, slider track
-$shade-6: #555;    // Panel heading color, slider range
-$shade-7: #777;    // Icon color, sidebar headings
-$shade-8: #999;    // Softened text
-$shade-9: #bbb;    // Text color, active icon
-$shade-10: #fff;
+$shade-0:           #000;
+$shade-1:           #212121;              // 87% Border search field
+$shade-2:           #292929;              // 84% Inactive tab
+$shade-3:           #2f2f2f;              // 82% Body
+$shade-4:           #333;                 // 80% Sidebar bg, panel bg
+$shade-5:           #404040;              // 75% Active state bg/border, slider track
+$shade-5-lighten-5: lighten(#404040, 5%); // 70% Thumbnail bg
+$shade-6:           #555;                 // Panel heading color, slider range
+$shade-7:           #777;                 // Icon color, sidebar headings
+$shade-8:           #999;                 // Softened text
+$shade-9:           #bbb;                 // Text color, active icon
+$shade-10:          #fff;
 
 
 // Scaffolding
@@ -179,8 +182,8 @@ $drag-preview-opacity:           0.64; // Ok
 $drag-preview-thumbnail-opacity: 1; // Ok
 
 // Thumbnail
-$thumbnail-color: rgba($icon-color, 0.6); // Ok
-$thumbnail-bg:    $shade-5; // Shading collision with active state
+$thumbnail-color: rgba($icon-color, 0.5); // Ok
+$thumbnail-bg:    $shade-5-lighten-5; // Ok
 
 // Progress bar
 $progress-bar-bg:       $shade-2; // Ok

diff --git a/src/stylesheets/themes/_light.scss b/src/stylesheets/themes/_light.scss
@@ -39,44 +39,46 @@ $brand-primary-darken-4: $blue-darken-4;
 // --------------------------------------------------
 
 :root {
-  #{--shade-0}:    #fff;            // Body
-  #{--shade-1}:    #f6f6f6;         // Sidbar bg, panel bg
-  #{--shade-2}:    #e6e6e6;         // Inactive tab
-  #{--shade-3}:    #ddd;            // Active state bg/border
-  #{--shade-4}:    #ccc;            // Slider track
-
-  #{--shade-5}:    #777;            // Icon color
-  #{--shade-5-60}: rgba(#777, 0.6);
-
-  #{--shade-6}:    #555;            // Sidebar active icon
-  #{--shade-7}:    #444;            // Softened text
-  #{--shade-8}:    #222;            // Text color, active icon
-
-  #{--shade-9}:    #000;            // Black
-  #{--shade-9-10}: rgba(#000, 0.1);
-  #{--shade-9-20}: rgba(#000, 0.2);
-  #{--shade-9-60}: rgba(#000, 0.6);
+  #{--shade-0}:          #fff;             // Body
+  #{--shade-1}:          #f6f6f6;          // Sidbar bg, panel bg
+  #{--shade-2}:          #e6e6e6;          // Inactive tab
+  #{--shade-3}:          #ddd;             // Active state bg/border
+  #{--shade-3-darken-5}: darken(#ddd, 5%); // Thumbnail bg
+  #{--shade-4}:          #ccc;             // Slider track
+
+  #{--shade-5}:          #777;             // Icon color
+  #{--shade-5-50}:       rgba(#777, 0.5);
+
+  #{--shade-6}:          #555;             // Sidebar active icon
+  #{--shade-7}:          #444;             // Softened text
+  #{--shade-8}:          #222;             // Text color, active icon
+
+  #{--shade-9}:          #000;             // Black
+  #{--shade-9-10}:       rgba(#000, 0.1);
+  #{--shade-9-20}:       rgba(#000, 0.2);
+  #{--shade-9-60}:       rgba(#000, 0.6);
 }
 
 $transparent: var(--transparent);
 
-$shade-0:     var(--shade-0);
-$shade-1:     var(--shade-1);
-$shade-2:     var(--shade-2);
-$shade-3:     var(--shade-3);
-$shade-4:     var(--shade-4);
+$shade-0:           var(--shade-0);
+$shade-1:           var(--shade-1);
+$shade-2:           var(--shade-2);
+$shade-3:           var(--shade-3);
+$shade-3-lighten-5: var(--shade-3-darken-5);
+$shade-4:           var(--shade-4);
 
-$shade-5:     var(--shade-5);
-$shade-5-60:  var(--shade-5-60);
+$shade-5:           var(--shade-5);
+$shade-5-50:        var(--shade-5-50);
 
-$shade-6:     var(--shade-6);
-$shade-7:     var(--shade-7);
-$shade-8:     var(--shade-8);
+$shade-6:           var(--shade-6);
+$shade-7:           var(--shade-7);
+$shade-8:           var(--shade-8);
 
-$shade-9:     var(--shade-9);
-$shade-9-10:  var(--shade-9-10);
-$shade-9-20:  var(--shade-9-20);
-$shade-9-60:  var(--shade-9-60);
+$shade-9:           var(--shade-9);
+$shade-9-10:        var(--shade-9-10);
+$shade-9-20:        var(--shade-9-20);
+$shade-9-60:        var(--shade-9-60);
 
 
 // Scaffolding
@@ -239,8 +241,8 @@ $drag-preview-opacity:           0.8;
 $drag-preview-thumbnail-opacity: 0.8;
 
 // Thumbnail
-$thumbnail-color: $shade-5-60;
-$thumbnail-bg:    $shade-3; // Shading collision with active state
+$thumbnail-color: $shade-5-50;
+$thumbnail-bg:    $shade-3-lighten-5;
 
 // Progress bar
 $progress-bar-bg:       $shade-3;