fix(theming): select date border

affects: @datepicker-react/styled

Author: tresko

docs/THEME_PROPS.md

@@ -19,6 +19,7 @@ selectDateDateFontSize?: ResponsiveValue<FontSizeProperty<TLengthStyledSystem>>
 selectDateDateFontWeight?: ResponsiveValue<FontWeightProperty>
 selectDateDatePadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
 selectDatePadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
+selectDateBorderColor?: string
 
 resetDatesIconColor?: string
 resetDatesIconHeight?: string

package.json

@@ -54,7 +54,7 @@
     "@storybook/addon-links": "^5.1.9",
     "@storybook/addon-viewport": "^5.1.9",
     "@storybook/addons": "^5.1.9",
-    "@storybook/react": "^5.1.8",
+    "@storybook/react": "^5.1.9",
     "@testing-library/react": "^8.0.1",
     "@types/jest": "^24.0.15",
     "@types/react": "^16.8.22",

packages/styled/src/@types/theme.d.ts

@@ -50,6 +50,7 @@ export interface SelectDateTheme extends CommonTheme {
   selectDateDateFontWeight?: ResponsiveValue<FontWeightProperty>
   selectDateDatePadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
   selectDatePadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
+  selectDateBorderColor?: string
 }
 
 export interface ResetDatesTheme extends CommonTheme {

packages/styled/src/components/SelectedDate/SelectedDate.tsx

@@ -9,6 +9,7 @@ import Box from '../Box'
 
 interface StyledDateProps {
   isActive: boolean
+  selectDateBorderColor: string
 }
 const StyledDate = styled(Text)<StyledDateProps>`
   position: relative;
@@ -24,11 +25,11 @@ const StyledDate = styled(Text)<StyledDateProps>`
     z-index: 1;
   }
 
-  ${({isActive}) =>
+  ${({isActive, selectDateBorderColor}) =>
     isActive &&
     css`
       &:after {
-        background: #00aeef;
+        background: ${selectDateBorderColor};
       }
     `}
 `
@@ -50,6 +51,7 @@ function SelectDate({title, isActive, date, vertical}: SelectDateProps) {
     selectDateDateFontSize: vertical ? '16px' : '24px',
     selectDateDateFontWeight: 500,
     selectDateDatePadding: '0 0 15px',
+    selectDateBorderColor: globalStyles.colors.primaryColor,
     selectDatePadding: '0',
   })
 
@@ -73,6 +75,8 @@ function SelectDate({title, isActive, date, vertical}: SelectDateProps) {
         fontFamily={theme.fontFamily}
         p={theme.selectDateDatePadding}
         isActive={isActive}
+        // @ts-ignore
+        selectDateBorderColor={theme.selectDateBorderColor}
       >
         {date}
       </StyledDate>

packages/styled/src/globalStyles.ts

@@ -1,6 +1,7 @@
 export default {
   fontFamily: 'Montserrat, sans-serif',
   colors: {
+    primaryColor: '#00aeef',
     silverCloud: '#929598',
     charcoal: '#001217',
     darcula: '#343132',