feat(theming): simplified color palette change

affects: @datepicker-react/styled

Author: tresko

docs/THEME_PROPS.md

@@ -4,6 +4,20 @@
 fontFamily?: ResponsiveValue<FontFamilyProperty>
 daySize?: number | (number | null)[] | undefined
 
+colors: {
+  primaryColor: string ('#00aeef'),
+  silverCloud: string ('#929598'),
+  charcoal: string ('#001217'),
+  darcula: string ('#343132'),
+  mud: string ('#58595B'),
+  greey: string ('#808285'),
+  graci: string ('#BCBEC0'),
+  white: string ('#ffffff'),
+  accessibility: string ('#009fef'),
+  selectedDay: string ('#71c9ed'),
+  selectedDayHover: string ('#39beef'),
+  normalDayHover: string ('#e6e7e8'),
+}
 
 closeColor?: ResponsiveValue<ColorProperty>
 closeHoverColor?: ResponsiveValue<ColorProperty>

packages/styled/src/components/Close/Close.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import styled from 'styled-components'
+import React, {useContext} from 'react'
+import styled, {ThemeContext} from 'styled-components'
 import {
   color,
   ColorProps,
@@ -18,6 +18,7 @@ import CloseIcon from '../../icons/CloseIcon'
 import {CloseTheme} from '../../@types/theme'
 import useThemeProps from '../../hooks/useThemeProps'
 import globalStyles from '../../globalStyles'
+import getThemeProp from '../../utils/getThemeProp'
 
 interface TextProps
   extends ColorProps,
@@ -68,11 +69,12 @@ interface CloseProps {
 }
 
 function Close({onClick, rtl, closeText}: CloseProps) {
+  const themeContext = useContext(ThemeContext)
   const theme: CloseTheme = useThemeProps({
     fontFamily: globalStyles.fontFamily,
     closeMargin: rtl ? '1px 16px 0 0' : '1px 0 0 16px',
-    closeColor: '#929598',
-    closeHoverColor: '#343132',
+    closeColor: getThemeProp('silverCloud', globalStyles.colors.silverCloud, themeContext),
+    closeHoverColor: getThemeProp('darcula', globalStyles.colors.darcula, themeContext),
     closeFontSize: '12px',
     closeFontWeight: 600,
   })

packages/styled/src/components/DateRangeInput/DateRangeInput.stories.tsx

@@ -294,3 +294,28 @@ storiesOf('DateRangeInput', module)
       />
     </ThemeProvider>
   ))
+  .add('Theming', () => (
+    <ThemeProvider
+      theme={{
+        reactDatepicker: {
+          fontFamily: 'system-ui, -apple-system',
+          colors: {
+            accessibility: '#D80249',
+            selectedDay: '#f7518b',
+            selectedDayHover: '#F75D95',
+            primaryColor: '#d8366f',
+          },
+        },
+      }}
+    >
+      <App
+        rtl={boolean('rtl', false)}
+        vertical={boolean('vertical', false)}
+        exactMinBookingDays={boolean('exactMinBookingDays', false)}
+        showResetDates={boolean('showResetDates', true)}
+        showClose={boolean('showClose', true)}
+        showSelectedDates={boolean('showSelectedDates', true)}
+        displayFormat={text('displayFormat', 'MM/DD/YYYY')}
+      />
+    </ThemeProvider>
+  ))

packages/styled/src/components/DateRangeInput/DateRangeInput.tsx

@@ -1,5 +1,5 @@
-import React, {useRef, useEffect} from 'react'
-import styled, {css} from 'styled-components'
+import React, {useRef, useEffect, useContext} from 'react'
+import styled, {css, ThemeContext} from 'styled-components'
 import {
   opacity,
   OpacityProps,
@@ -31,6 +31,8 @@ import Datepicker from '../Datepicker'
 // eslint-disable-next-line import/no-unresolved
 import {DateRangeInputTheme} from '../../@types/theme'
 import useThemeProps from '../../hooks/useThemeProps'
+import getThemeProp from '../../utils/getThemeProp'
+import globalStyles from '../../globalStyles'
 
 interface RtlProps {
   rtl: boolean
@@ -152,14 +154,15 @@ function DateRangeInput({
   placement = 'bottom',
 }: DateRangeInputProps) {
   const datepickerWrapperRef = useRef<HTMLDivElement>(null)
+  const themeContext = useContext(ThemeContext)
   const theme: DateRangeInputTheme = useThemeProps({
     dateRangeBackground: 'transparent',
     dateRangeGridTemplateColumns: vertical ? '1fr 24px 1fr' : '194px 39px 194px',
     dateRangeBorder: '0',
     dateRangeBorderRadius: '0',
     dateRangeArrowIconWidth: '15px',
     dateRangeArrowIconHeight: '12px',
-    dateRangeArrowIconColor: '#BCBEC0',
+    dateRangeArrowIconColor: getThemeProp('graci', globalStyles.colors.graci, themeContext),
     dateRangeArrowIconOpacity: 1,
     dateRangeStartDateInputPadding: vertical ? (rtl ? '0 32px 0 8px' : '0 8px 0 32px') : '0 44px',
     dateRangeEndDateInputPadding: vertical ? (rtl ? '0 32px 0 8px' : '0 8px 0 32px') : '0 44px',