From abd1fd3efb4746092688058ba4b6130c01b8a81d Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Sat, 25 Sep 2021 18:18:58 +0530
Subject: [PATCH] fixed dark theme color

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/atoms/badge/NotificationBadge.scss    |  1 -
 .../molecules/room-selector/RoomSelector.scss |  2 +-
 src/index.scss                                | 30 +++++++++++--------
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/app/atoms/badge/NotificationBadge.scss b/src/app/atoms/badge/NotificationBadge.scss
index c672b11..1c93f96 100644
--- a/src/app/atoms/badge/NotificationBadge.scss
+++ b/src/app/atoms/badge/NotificationBadge.scss
@@ -13,7 +13,6 @@
 
   &--alert {
     background-color: var(--bg-positive);
-    & .text { color: white }
   }
 
   &:empty {
diff --git a/src/app/molecules/room-selector/RoomSelector.scss b/src/app/molecules/room-selector/RoomSelector.scss
index e4dce0b..4419c07 100644
--- a/src/app/molecules/room-selector/RoomSelector.scss
+++ b/src/app/molecules/room-selector/RoomSelector.scss
@@ -70,7 +70,7 @@
     @extend .room-selector-flexItem;
     margin: 0 var(--sp-extra-tight);
 
-    color: var(--tc-surface-normal);
+    color: var(--tc-surface-normal-low);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
diff --git a/src/index.scss b/src/index.scss
index 77261e5..f565170 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -37,6 +37,7 @@
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: #000000;
   --tc-surface-normal: rgba(0, 0, 0, 68%);
+  --tc-surface-normal-low: rgba(0, 0, 0, 60%);
   --tc-surface-low: rgba(0, 0, 0, 38%);
   
   --tc-primary-high: #ffffff;
@@ -56,7 +57,7 @@
   --tc-danger-low: rgba(240, 71, 71, 60%);
 
   --tc-code: #e62498;
-
+  --tc-link: hsl(213deg 76% 56%);
   --tc-tooltip: white;
   --tc-badge: white;
 
@@ -167,32 +168,34 @@
 .dark-theme,
 .butter-theme {
   /* background color | --bg-[background type]: value */
-  --bg-surface: hsl(208, 8%, 20%);
-  --bg-surface-transparent: hsla(208, 8%, 20%, 0);
-  --bg-surface-low: hsl(208, 8%, 16%);
-  --bg-surface-low-transparent: hsla(208, 8%, 16%, 0);
+  --bg-surface: hsl(208, 8%, 16%);
+  --bg-surface-transparent: hsla(208, 8%, 16%, 0);
+  --bg-surface-low: hsl(208, 8%, 12%);
+  --bg-surface-low-transparent: hsla(208, 8%, 12%, 0);
   --bg-surface-hover: rgba(255, 255, 255, 3%);
   --bg-surface-active: rgba(255, 255, 255, 5%);
   --bg-surface-border: rgba(0, 0, 0, 20%);
 
-  --bg-primary: rgb(59, 119, 191);
-  --bg-primary-hover: rgba(59, 119, 191, 80%);
-  --bg-primary-active: rgba(59, 119, 191, 70%);
-  --bg-primary-border: rgba(59, 119, 191, 38%);
+  --bg-primary: rgb(42, 98, 166);
+  --bg-primary-hover: rgba(42, 98, 166, 80%);
+  --bg-primary-active: rgba(42, 98, 166, 70%);
+  --bg-primary-border: rgba(42, 98, 166, 38%);
 
   --bg-tooltip: #000;
   --bg-badge: hsl(0, 0%, 75%);
 
   /* text color | --tc-[background type]-[priority]: value */
-  --tc-surface-high: rgba(255, 255, 255, 94%);
-  --tc-surface-normal: rgba(255, 255, 255, 74%);
-  --tc-surface-low: rgba(255, 255, 255, 38%);
+  --tc-surface-high: rgba(255, 255, 255, 98%);
+  --tc-surface-normal: rgba(255, 255, 255, 84%);
+  --tc-surface-normal-low: rgba(255, 255, 255, 60%);
+  --tc-surface-low: rgba(255, 255, 255, 48%);
   
   --tc-primary-high: #ffffff;
   --tc-primary-normal: rgba(255, 255, 255, 0.68);
   --tc-primary-low: rgba(255, 255, 255, 0.4);
 
   --tc-code: #e565b1;
+  --tc-link: hsl(213deg 94% 73%);
   --tc-badge: black;
 
   /* system icons | --ic-[background type]-[priority]: value */
@@ -226,6 +229,7 @@
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: rgb(255, 251, 222, 94%);
   --tc-surface-normal: rgba(255, 251, 222, 74%);
+  --tc-surface-normal-low: rgba(255, 251, 222, 60%); 
   --tc-surface-low: rgba(255, 251, 222, 38%);
 
 
@@ -257,7 +261,7 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 a {
-  color: var(--bg-primary);
+  color: var(--tc-link);
   text-decoration: none;
 }
 b {