feat: add CSS variable for caption font size

[7PH]

Context

With default CSS and parameters and when using dropdown and buttons caption layout, the calendar width changes when cycling through the different months with default locale

This may be seen as an issue for two reasons:

• This shifts layout when interacting with the calendar. E.g. when clicking multiples times on "go to next month", it can happen that the "go to previous month" button shifts to the right and the next click is on "go to previous month" instead (reproducible in documentation page)
• This makes the calendar less elegant when using the calendar in a dropdown or with a different background than the page

Reproduce

This can be reproduced on the currently deployed documentation website, in the example using caption layout "dropdown-buttons": https://react-day-picker.js.org/basics/navigation#choosing-a-caption-layout

import React from 'react';
import { DayPicker } from 'react-day-picker';

export default function App() {
  return (
    <DayPicker captionLayout="dropdown-buttons" fromYear={2015} toYear={2025} />
  );
}

Analysis

With the recent addition of month/year navigation using both dropdowns and buttons and default locales and CSS variables, it happens for specifics months (February, September, November, December) that the width of .rdp-caption becomes larger than .rdp-table because these months have longer names.

Solution

I reduced the font-size so that the worst-case scenario (September) fits with dropdown-buttons caption layout. This also works for the other EU locales I've tested (fr, it, es, de). I also changed the font size from % to pixels, because the table width is always --rdp-cell-size times 7 and --rdp-cell-size is in pixels. I though it made sense to add this into a variable, because if someone wants to change the cell size to something smaller, he will have to change the caption font size as well. Waiting for your thoughts on this.

After:

[gpbl]

Hey thanks, good one!