added css variables

reaviz · Jan 22, 2024 · b195434 · b195434
1 parent 93c03e7
commit b195434
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'
   }
 };