fix(Datepicker): change backdrop color (#932)

kronostechnologies · Jul 8, 2024 · 882c11e · 882c11e
1 parent 3c6b5d1
commit 882c11e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -203,7 +203,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -594,7 +594,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -987,7 +987,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -1380,7 +1380,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -1801,7 +1801,7 @@ input + .c1 {
 }
 
 .c6 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c6 .react-datepicker__portal .react-datepicker__day-name {
@@ -2210,7 +2210,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -2768,7 +2768,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -4062,7 +4062,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -5344,7 +5344,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {

diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
@@ -155,7 +155,7 @@ const Container = styled.div<{ isMobile: boolean, theme: ResolvedTheme }>`
     }
 
     .react-datepicker__portal {
-        background-color: ${({ theme }) => theme.component['datepicker-background-color']};
+        background-color: ${({ theme }) => theme.component['datepicker-backdrop-color']};
 
         .react-datepicker__day-name {
             font-size: 1rem;

diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts
@@ -104,6 +104,7 @@ export type AliasTokens =
     | 'color-background-selected'
     | 'color-background-selected-hover'
     | 'color-backdrop-background'
+    | 'color-backdrop-background-subtle'
     /**
      * BORDER
      */
@@ -344,6 +345,7 @@ export const defaultAliasTokens: AliasTokenMap = {
      * Use for the screen overlay that appears with modal dialogs
      */
     'color-backdrop-background': 'transparent-dark-75',
+    'color-backdrop-background-subtle': 'transparent-dark-50',
 
     /**
      * BORDER

diff --git a/packages/react/src/themes/tokens/component/datepicker-tokens.ts b/packages/react/src/themes/tokens/component/datepicker-tokens.ts
@@ -18,7 +18,8 @@ export type DatepickerTokens =
     | 'datepicker-day-selected-text-color'
     | 'datepicker-day-today-text-color'
     | 'datepicker-header-background-color'
-    | 'datepicker-background-color';
+    | 'datepicker-background-color'
+    | 'datepicker-backdrop-color';
 
 export type DatepickerTokenValue = AliasTokens | RefTokens;
 
@@ -30,6 +31,7 @@ export const defaultDatepickerTokens: DatepickerTokenMap = {
     'datepicker-background-color': 'color-background-overlay',
     'datepicker-border-color': 'color-border-overlay',
     'datepicker-box-shadow-color': 'color-box-shadow',
+    'datepicker-backdrop-color': 'color-backdrop-background-subtle',
 
     'datepicker-header-background-color': 'transparent-100',