From b19543410f4843caca9efda9351ecb2daa2e685c Mon Sep 17 00:00:00 2001
From: FarrukhSaleemAbs <150852743+FarrukhSaleemAbs@users.noreply.github.com>
Date: Mon, 22 Jan 2024 01:44:40 -0800
Subject: [PATCH] added css variables

---
 src/elements/Button/Button.module.css         | 26 +++++++++----------
 src/form/Calendar/Calendar.module.css         |  2 +-
 .../CalendarDays/CalendarDays.module.css      |  8 +++---
 src/utils/Theme/themes/dark.ts                |  4 +++
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/elements/Button/Button.module.css b/src/elements/Button/Button.module.css
index 6aa3d287..00b23099 100644
--- a/src/elements/Button/Button.module.css
+++ b/src/elements/Button/Button.module.css
@@ -33,32 +33,32 @@
     color: var(--button-background);
 
     &.default {
-      background: #ff4d87;
-      border-color: #ff4d87;
+      background: var(--pink-200);
+      border-color: var(--pink-200);
 
       &:hover {
-        background: #ff4d87;
+        background: var(--pink-200);
         border-color: none;
       }
     }
 
     &.primaryDates {
-      background: #281e21;
-      border-color: #281e21;
+      background: var(--pink-100);
+      border-color: var(--pink-100);
 
       &:hover {
-        background: #281e21;
-        border-color: #281e21;
+        background: var(--pink-100);
+        border-color: var(--pink-100);
       }
     }
 
     &.primary {
-      background: #ff4d87;
-      border-color: #ff4d87;
+      background: var(--pink-200);
+      border-color: var(--pink-200);
 
       &:hover {
-        background: #ff4d87;
-        border-color: #ff4d87;
+        background: var(--pink-200);
+        border-color: var(--pink-200);
       }
     }
   }
@@ -196,10 +196,10 @@
     border: solid 1px transparent;
 
     &.default {
-      color: #707070;
+      color: var(--gray-100);
 
       &:hover {
-        color: #707070;
+        color: var(--gray-100);
       }
     }
 
diff --git a/src/form/Calendar/Calendar.module.css b/src/form/Calendar/Calendar.module.css
index 41d2edf6..1d249cec 100644
--- a/src/form/Calendar/Calendar.module.css
+++ b/src/form/Calendar/Calendar.module.css
@@ -5,7 +5,7 @@
     justify-content: space-between;
     margin-bottom: var(--spacing-sm);
     padding-left: var(--spacing-md);
-    padding-right: 36px;
+    padding-right: 16px;
   }
   overflow: hidden;
 }
diff --git a/src/form/Calendar/CalendarDays/CalendarDays.module.css b/src/form/Calendar/CalendarDays/CalendarDays.module.css
index c960ef14..04485257 100644
--- a/src/form/Calendar/CalendarDays/CalendarDays.module.css
+++ b/src/form/Calendar/CalendarDays/CalendarDays.module.css
@@ -17,22 +17,22 @@
 
     &.startRangeDate {
       border-radius: 50%;
-      background-color: #ff4d87;
+      background-color: var(--pink-200);
       color: var(--black);
     }
 
     &.endRangeDate {
       border-radius: 50%;
-      background-color: #ff4d87;
+      background-color: var(--pink-200);
       color: var(--black);
     }
 
     &.startRangeDate:hover {
-      background-color: #ff4d87;
+      background-color: var(--pink-200);
     }
 
     &.endRangeDate:hover {
-      background-color: #ff4d87;
+      background-color: var(--pink-200);
     }
   }
 }
diff --git a/src/utils/Theme/themes/dark.ts b/src/utils/Theme/themes/dark.ts
index 47414cbb..020f6650 100644
--- a/src/utils/Theme/themes/dark.ts
+++ b/src/utils/Theme/themes/dark.ts
@@ -110,6 +110,10 @@ export const darkColors: Colors = {
     700: 'rgba(0, 0, 0, 0.07)',
     800: 'rgba(0, 0, 0, 0.08)',
     900: 'rgba(0, 0, 0, 0.09)'
+  },
+  pink: {
+    100: '#281e21',
+    200: '#ff4d87'
   }
 };