From 74962b97cf28cd1b930062985aa738a372c3070c Mon Sep 17 00:00:00 2001
From: pritam <pritam.sinha@cleartax.in>
Date: Tue, 20 Oct 2020 14:08:15 +0530
Subject: [PATCH] feat: added fallback colors for css var

---
 src/components/Common/navbar.css | 10 ++++++++++
 tailwind.config.js               | 22 +++++++++++-----------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/Common/navbar.css b/src/components/Common/navbar.css
index 9aa8717..4666b46 100644
--- a/src/components/Common/navbar.css
+++ b/src/components/Common/navbar.css
@@ -10,6 +10,10 @@
 .lil-dropdown:hover:after {
     content: '';
     transform: rotate(45deg);
+    /* for IE */
+    border-top: 2px solid #CFD4DD;
+    border-left: 2px solid #CFD4DD;
+    /*  */
     border-top: 2px solid var(--grey-400);
     border-left: 2px solid var(--grey-400);
     bottom: -10px;
@@ -17,6 +21,9 @@
     @apply lil-block lil-absolute lil-bg-white lil-z-40 lil-h-4 lil-w-4;
 }
 .lil-dropdown .lil-dropdown-menu {
+    /* for IE */
+    box-shadow: 0px 1px 2px 3px #CFD4DD;
+    /*  */
     box-shadow: 0px 1px 2px 3px var(--grey-400);
     width: 350px;
     @apply lil-absolute lil-hidden lil-pt-1 lil-rounded-lg lil-mt-1 lil-p-4;
@@ -25,6 +32,9 @@
     @apply lil-block lil-z-30 lil-bg-white;
 }
 .lil-dropdown:hover .lil-dropdown-full-menu {
+    /* for IE */
+    box-shadow: 0px 1px 2px 3px #CFD4DD;
+    /*  */
     box-shadow: 0px 1px 2px 3px var(--grey-400);
     left: 0.5rem;
     right: 0.5rem;
diff --git a/tailwind.config.js b/tailwind.config.js
index aec6582..6217aa9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -57,17 +57,17 @@ module.exports = {
         500: "#4B2D18",
       },
       grey: {
-        100: "var(--grey-100)",
-        150: "var(--grey-150)",
-        200: "var(--grey-200)",
-        250: "var(--grey-250)",
-        300: "var(--grey-300)",
-        350: "var(--grey-350)",
-        400: "var(--grey-400)",
-        450: "var(--grey-450)",
-        500: "var(--grey-500)",
-        550: "var(--grey-550)",
-        600: "var(--grey-600)",
+        100: "var(--grey-100, #FAFAFA)",
+        150: "var(--grey-150, #F5F5F5)",
+        200: "var(--grey-200, #FAFBFF)",
+        250: "var(--grey-250, #EEEEEE)",
+        300: "var(--grey-300, #E0E0E0)",
+        350: "var(--grey-350, #D6D6D6)",
+        400: "var(--grey-400, #CFD4DD)",
+        450: "var(--grey-450, #ADB1BB)",
+        500: "var(--grey-500, #8B8F99)",
+        550: "var(--grey-550, #686D77)",
+        600: "var(--grey-600, #23282E)",
       },
       yellow: {
         100: "#FEF6DC",