feat(datepicker): add dark mode

freenowtech · Aug 28, 2023 · 9ea2bd4 · 9ea2bd4
1 parent 8ecff16
commit 9ea2bd4
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/src/components/Datepicker/Datepicker.tsx b/src/components/Datepicker/Datepicker.tsx
@@ -26,15 +26,15 @@ const DatepickerContainer = styled.div`
     box-shadow: 0 0 0.5rem 0.1875rem rgba(0, 0, 0, 0.08);
 
     position: relative;
-    background: ${getSemanticValue('background-surface-neutral-default')};
+    background: ${getSemanticValue('background-page-elevation-1')};
 
     &::before {
         content: '';
         position: absolute;
         transform: rotate(45deg);
         width: 1.25rem;
         height: 1.25rem;
-        background: ${getSemanticValue('background-surface-neutral-default')};
+        background: ${getSemanticValue('background-page-elevation-1')};
         box-shadow: -0.25rem -0.25rem 0.5rem -0.125rem rgba(0, 0, 0, 0.08);
     }
 

diff --git a/src/components/Datepicker/Day/DayButton.tsx b/src/components/Datepicker/Day/DayButton.tsx
@@ -33,6 +33,10 @@ const getColor = ({ isSelected, isSelectedStartOrEnd, isWithinHoverRange, disabl
             color: ${getSemanticValue('foreground-disabled')};
             box-shadow: 0 0 0 0.0625rem ${getSemanticValue('border-disabled')};
             background: ${getSemanticValue('background-element-neutral-default')};
+
+            &:hover {
+                cursor: not-allowed;
+            }
         `;
     }
 
@@ -42,6 +46,7 @@ const getColor = ({ isSelected, isSelectedStartOrEnd, isWithinHoverRange, disabl
 
         &:hover {
             cursor: pointer;
+            color: ${getSemanticValue('foreground-on-background-neutral')};
             background: ${getSemanticValue('background-element-neutral-emphasized')};
         }
     `;

diff --git a/src/essentials/Colors/Colors.ts b/src/essentials/Colors/Colors.ts
@@ -8,6 +8,7 @@ export const Colors = {
         primary: {
             1100: 'hsl(211, 100%, 6%)',
             900: 'hsl(211, 100%, 12%)',
+            750: 'hsl(210, 30%, 25%)',
             550: 'hsl(210, 16%, 46%)',
             350: 'hsl(213, 14%, 66%)',
             200: 'hsl(210, 14%, 80%)',
@@ -242,9 +243,9 @@ export const SemanticColorsDarkSchema = {
     background: {
         page: {
             default: Colors.blue.primary[900],
-            'elevation-1': Colors.blue.primary[550],
-            'elevation-2': Colors.blue.primary[350],
-            'elevation-3': Colors.blue.primary[200]
+            'elevation-1': Colors.blue.primary[750],
+            'elevation-2': Colors.blue.primary[550],
+            'elevation-3': Colors.blue.primary[350]
         },
         element: {
             primary: {
@@ -255,6 +256,11 @@ export const SemanticColorsDarkSchema = {
                 faded: Colors.transparent, // page color
                 default: Colors.blue.primary[550]
             },
+            accent: {
+                faded: Colors.blue.secondary[1000],
+                default: Colors.blue.secondary[900],
+                emphasized: Colors.blue.secondary[900]
+            },
             info: {
                 default: Colors.blue.secondary[900],
                 emphasized: Colors.blue.secondary[1000]
@@ -273,6 +279,10 @@ export const SemanticColorsDarkSchema = {
         neutral: {
             default: Colors.white
         },
+        accent: {
+            faded: Colors.blue.secondary[350],
+            default: Colors.blue.secondary[350]
+        },
         info: {
             default: Colors.blue.secondary[900]
         },

diff --git a/src/essentials/Colors/RedesignedColors.ts b/src/essentials/Colors/RedesignedColors.ts
@@ -254,6 +254,11 @@ export const SemanticColorsDarkSchema = {
                 default: Colors.neutral[900],
                 emphasized: Colors.white
             },
+            accent: {
+                faded: Colors.primary[1000],
+                default: Colors.primary[900],
+                emphasized: Colors.primary[350]
+            },
             info: {
                 default: Colors.neutral[350],
                 emphasized: Colors.neutral[550]
@@ -269,13 +274,17 @@ export const SemanticColorsDarkSchema = {
         neutral: {
             default: Colors.neutral[200]
         },
-        danger: {
-            default: Colors.red[900]
-        },
         focus: Colors.neutral[550],
         disabled: Colors.neutral[550],
+        accent: {
+            faded: Colors.primary[350],
+            default: Colors.primary[350]
+        },
         info: {
             default: Colors.neutral[550]
+        },
+        danger: {
+            default: Colors.red[900]
         }
     },
     shadow: {