Update Date color and text specs for MD3.

src/Date/Calendar.tsx

@@ -100,6 +100,9 @@ function Calendar(
   const theme = useTheme()
 
   const selectColor = useMemo<string>(() => {
+    if (theme.isV3) {
+      return theme.colors.primaryContainer
+    }
     if (theme.dark) {
       return darkenBy(Color(theme.colors.primary), 0.1).hex()
     }

src/Date/CalendarHeader.tsx

@@ -53,7 +53,6 @@ function CalendarHeader({
               onPress={onPrev}
             />
           </View>
-
           <View
             style={[
               styles.buttonWrapper,

src/Date/DatePickerModalContent.tsx

@@ -11,7 +11,6 @@ import Calendar, {
 } from './Calendar'
 
 import AnimatedCrossView from './AnimatedCrossView'
-
 import DatePickerModalHeader from './DatePickerModalHeader'
 import DatePickerModalContentHeader, {
   HeaderPickProps,
@@ -86,7 +85,6 @@ export function DatePickerModalContent(
     startYear,
     endYear,
   } = props
-
   const anyProps = props as any
 
   // use local state to add only onConfirm state changes
@@ -164,11 +162,10 @@ export function DatePickerModalContent(
           endLabel={props.endLabel}
           uppercase={props.uppercase ?? true}
           locale={locale}
-          editIcon={props.editIcon}
+          editIcon={props?.editIcon}
           calendarIcon={props.calendarIcon}
         />
       </DatePickerModalHeaderBackground>
-
       <AnimatedCrossView
         collapsed={collapsed}
         calendar={

src/Date/DatePickerModalContentHeader.tsx

@@ -58,23 +58,26 @@ export default function DatePickerModalContentHeader(
     mode,
     moreLabel,
     uppercase,
-    editIcon = 'pencil',
-    calendarIcon = 'calendar',
+    editIcon,
+    calendarIcon,
   } = props
   const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
+  const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
   const allowEditing = mode !== 'multiple'
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyLarge
+    ? theme.fonts.labelMedium
     : (theme as any as MD2Theme).fonts.medium
 
   return (
-    <View style={[styles.header]}>
+    <View style={styles.header}>
       <View>
-        <Text style={[styles.label, { color, ...textFont }]}>
+        <Text
+          style={[styles.label, { color: supportingTextColor, ...textFont }]}
+        >
           {uppercase ? label.toUpperCase() : label}
         </Text>
         <View style={styles.headerContentContainer}>
@@ -96,13 +99,21 @@ export default function DatePickerModalContentHeader(
       <View style={styles.fill} />
       {allowEditing ? (
         <IconButton
-          icon={collapsed ? editIcon : calendarIcon}
+          icon={
+            collapsed
+              ? editIcon ?? theme.isV3
+                ? 'pencil-outline'
+                : 'pencil'
+              : calendarIcon ?? theme.isV3
+              ? 'calendar-blank'
+              : 'calendar'
+          }
           accessibilityLabel={
             collapsed
               ? getTranslation(props.locale, 'typeInDate')
               : getTranslation(props.locale, 'pickDateFromCalendar')
           }
-          iconColor={color}
+          iconColor={theme.isV3 ? theme.colors.onSurface : color}
           onPress={onToggle}
         />
       ) : null}
@@ -116,8 +127,13 @@ export function HeaderContentSingle({
   color,
   locale,
 }: HeaderContentProps & { color: string }) {
+  const theme = useTheme()
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = state.date ? color : lighterColor
+  const dateColor = state.date
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
 
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -140,9 +156,14 @@ export function HeaderContentMulti({
   color,
   locale,
 }: HeaderContentProps & { color: string; moreLabel: string | undefined }) {
+  const theme = useTheme()
   const dateCount = state.dates?.length || 0
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = dateCount ? color : lighterColor
+  const dateColor = dateCount
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
 
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -174,6 +195,7 @@ export function HeaderContentRange({
   endLabel = 'End',
   color,
 }: HeaderContentProps & { color: string }) {
+  const theme = useTheme()
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
       month: 'short',
@@ -182,8 +204,16 @@ export function HeaderContentRange({
   }, [locale])
 
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const startColor = state.startDate ? color : lighterColor
-  const endColor = state.endDate ? color : lighterColor
+  const startColor = state.startDate
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
+  const endColor = state.endDate
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
 
   return (
     <>
@@ -226,7 +256,6 @@ const styles = StyleSheet.create({
     marginTop: -3,
     marginLeft: 3,
   },
-
   headerSeparator: {
     color: 'rgba(255,255,255,1)',
     fontSize: 25,

src/Date/DatePickerModalHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Animated, StyleSheet } from 'react-native'
-import { Appbar, Button } from 'react-native-paper'
+import { Appbar, Button, useTheme } from 'react-native-paper'
 
 import { useHeaderTextColor } from '../utils'
 import { getTranslation } from '../translations/utils'
@@ -20,6 +20,7 @@ export interface DatePickerModalHeaderProps {
 export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
+  const theme = useTheme()
   const { disableSafeTop, locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
@@ -29,6 +30,7 @@ export default function DatePickerModalHeader(
     <Animated.View
       style={[
         styles.animated,
+        // eslint-disable-next-line react-native/no-inline-styles
         {
           paddingTop: disableSafeTop ? 0 : insets.top,
           paddingLeft: insets.left,
@@ -47,7 +49,7 @@ export default function DatePickerModalHeader(
         <Appbar.Content title={''} />
         <Button
           color={color}
-          textColor={color}
+          textColor={theme.isV3 ? theme.colors.primary : color}
           onPress={props.onSave}
           disabled={props.saveLabelDisabled ?? false}
           uppercase={props.uppercase ?? true}
@@ -90,6 +92,5 @@ const styles = StyleSheet.create({
   appbarHeader: {
     elevation: 0,
     backgroundColor: 'transparent',
-    // alignItems:'center'
   },
 })

src/Date/Day.tsx

@@ -47,17 +47,27 @@ function Day(props: {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
 
-  const borderColor =
-    selected || (inRange && theme.dark)
-      ? textColorOnPrimary
-      : theme.dark
-      ? '#fff'
-      : '#000'
+  const borderColor = theme.isV3
+    ? theme.colors.primary
+    : selected || (inRange && theme.dark)
+    ? textColorOnPrimary
+    : theme.dark
+    ? '#fff'
+    : '#000'
+
   const textColor =
-    selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
+    theme.isV3 && selected
+      ? theme.colors.onPrimary
+      : theme.isV3 && inRange && theme.dark
+      ? theme.colors.onPrimaryContainer
+      : selected || (inRange && theme.dark)
+      ? textColorOnPrimary
+      : theme.isV3
+      ? theme.colors.onSurface
+      : undefined
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.bodySmall
     : (theme as any as MD2Theme).fonts.medium
 
   return (
@@ -68,7 +78,6 @@ function Day(props: {
         rightCrop={rightCrop}
         selectColor={selectColor}
       />
-
       <TouchableRipple
         testID={`react-native-paper-dates-day-${year}-${month}-${day}`}
         disabled={disabled}
@@ -89,7 +98,12 @@ function Day(props: {
         >
           <Text
             style={[
-              textColor ? { color: textColor } : undefined,
+              textColor
+                ? {
+                    color:
+                      theme.isV3 && isToday ? theme.colors.primary : textColor,
+                  }
+                : undefined,
               { ...textFont },
             ]}
             selectable={false}

src/Date/DayName.tsx

@@ -6,12 +6,18 @@ function DayName({ label }: { label: string }) {
   const theme = useTheme()
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.bodySmall
     : (theme as any as MD2Theme).fonts.medium
 
   return (
     <View style={styles.dayName}>
-      <Text style={[styles.dayNameLabel, { ...textFont }]} selectable={false}>
+      <Text
+        style={[
+          styles.dayNameLabel,
+          { ...textFont, color: theme.colors.onSurface },
+        ]}
+        selectable={false}
+      >
         {label}
       </Text>
     </View>

src/Date/Month.tsx

@@ -251,7 +251,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
   ])
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.titleSmall
     : (theme as any as MD2Theme).fonts.medium
 
   return (
@@ -288,21 +288,36 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             ]}
           >
             <Text
-              style={[styles.monthLabel, { ...textFont }]}
+              style={[
+                styles.monthLabel,
+                {
+                  ...textFont,
+                  color: theme.isV3
+                    ? theme.colors.onSurfaceVariant
+                    : theme.colors.onSurface,
+                },
+              ]}
               selectable={false}
             >
               {monthName} {year}
             </Text>
             <View style={isHorizontal ? styles.opacity1 : styles.opacity0}>
               <IconButton
                 onPress={isHorizontal ? () => onPressYear(year) : undefined}
-                icon={selectingYear ? 'chevron-up' : 'chevron-down'}
+                icon={
+                  selectingYear
+                    ? theme.isV3
+                      ? 'menu-up'
+                      : 'chevron-up'
+                    : theme.isV3
+                    ? 'menu-down'
+                    : 'chevron-down'
+                }
               />
             </View>
           </View>
         </TouchableRipple>
       </View>
-
       {grid.map(({ weekIndex, generatedDays }) => (
         <View style={styles.week} key={weekIndex}>
           {generatedDays
@@ -350,9 +365,7 @@ const styles = StyleSheet.create({
     marginBottom: weekMargin,
     height: daySize,
   },
-
   month: {},
-
   monthHeader: {
     height: montHeaderHeight,
     justifyContent: 'center',

src/Date/YearPicker.tsx

@@ -96,7 +96,14 @@ function YearPure({
           <Text
             style={[
               styles.yearLabel,
-              selected ? styles.selectedYear : null,
+              selected
+                ? // eslint-disable-next-line react-native/no-inline-styles
+                  { color: theme.isV3 ? theme.colors.onPrimary : '#fff' }
+                : {
+                    color: theme.isV3
+                      ? theme.colors.onSurfaceVariant
+                      : undefined,
+                  },
               { ...textFont },
             ]}
             selectable={false}
@@ -127,7 +134,6 @@ const styles = StyleSheet.create({
     height: ITEM_HEIGHT,
     justifyContent: 'center',
   },
-  selectedYear: { color: '#fff' },
   yearButton: {
     borderRadius: 46 / 2,
     overflow: 'hidden',