From f6c6f47ded9ec9f53020cf9b80e4eb07aeb68ae4 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 12:54:55 +0800
Subject: [PATCH] fix #50

---
 src/components/tree-view.scss | 37 ++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 33a1a4a..00adfa3 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -4,13 +4,22 @@
  * Author: eidng8
  */
 
-$g8-tree-bg: #ccc !default;
-$g8-tree-fg: #333 !default;
+$g8-tree__bg: #cccccc !default;
+$g8-tree__fg: #333333 !default;
+$g8-tree__bg--highlight: lighten($g8-tree__bg, 10%) !default;
+$g8-tree__bg--highlight--secondary: darken($g8-tree__bg, 20%) !default;
+$g8-tree__fg--inverse: darken($g8-tree__bg, 20%) !default;
+$g8-tree__bg--inverse: darken($g8-tree__fg, 5%) !default;
+$g8-tree__bg--highlight--inverse: lighten($g8-tree__bg--inverse, 10%) !default;
+$g8-tree__bg--highlight--secondary--inverse: lighten(
+  $g8-tree__bg--inverse,
+  20%
+) !default;
 
 .g8-tree__view {
   margin: 0;
   padding: 0;
-  color: $g8-tree-fg;
+  color: $g8-tree__fg;
   text-align: left;
   user-select: none;
 
@@ -39,7 +48,7 @@ $g8-tree-fg: #333 !default;
 
   &:before {
     content: ' ';
-    background: $g8-tree-bg;
+    background: $g8-tree__bg;
     border-radius: 4px;
     display: block;
     position: absolute;
@@ -52,7 +61,7 @@ $g8-tree-fg: #333 !default;
   &:hover,
   &:focus {
     &:before {
-      background: darken($g8-tree-bg, 20%);
+      background: $g8-tree__bg--highlight--secondary;
     }
   }
 
@@ -111,14 +120,14 @@ $g8-tree-fg: #333 !default;
   font-weight: normal;
   max-width: 6rem;
   border-radius: 0.2rem;
-  background: $g8-tree-bg;
+  background: $g8-tree__bg;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
 
   &:hover,
   &:focus {
-    background: darken($g8-tree-bg, 20%);
+    background: $g8-tree__bg--highlight--secondary;
   }
 }
 
@@ -135,39 +144,39 @@ $g8-tree-fg: #333 !default;
 .g8-tree--highlight-hover .g8-tree__node__entry {
   &:hover,
   &:focus {
-    background: lighten($g8-tree-bg, 10%);
+    background: $g8-tree__bg--highlight;
   }
 }
 
 .g8-tree__view.g8-tree--dark {
-  color: darken($g8-tree-bg, 20%);
+  color: $g8-tree__fg--inverse;
 
   .g8-tree__checker {
     &:before {
-      background: lighten($g8-tree-fg, 10%);
+      background: $g8-tree__bg--inverse;
     }
 
     &:hover,
     &:focus {
       &:before {
-        background: lighten($g8-tree-fg, 20%);
+        background: $g8-tree__bg--highlight--secondary--inverse;
       }
     }
   }
 
   .g8-tree__node__entry__tags__tag {
-    background: lighten($g8-tree-fg, 5%);
+    background: $g8-tree__bg--inverse;
 
     &:hover,
     &:focus {
-      background: lighten($g8-tree-fg, 10%);
+      background: $g8-tree__bg--highlight--secondary--inverse;
     }
   }
 
   &.g8-tree--highlight-hover .g8-tree__node__entry {
     &:hover,
     &:focus {
-      background: lighten($g8-tree-fg, 10%);
+      background: $g8-tree__bg--highlight--inverse;
     }
   }
 }