Calendar: add design token for font-weight of disabled days, correct font-size token

[jeffreylauwers]

Big change

I worked on the Figma component for the Calendar component of Utrecht. I'm missing several design tokens for the design choices I have in mind. So I created a whole new setup:

• Figma Schetsboek - Proposal
• Design Tokens
• More context in GitHub Discussion for Calendar

Small changes

Font-weight for disabled state

If it's not possible to adjust the component to this whole new setup, adding the following design token would help a lot already:

utrecht.calendar.table.days-item-day.disabled.font-weight

This ensures that a disabled 'day' can have a specific font-weight. To differentiate the disabled days from the days that can be selected. Because the Calendar component uses a lot of design tokens from the Button (subtle), currently the default and disabled state of a 'day' will have a bold font-weight if this design decision is made for the Button (subtle). That is true for the Start and Voorbeeld themes.

• https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-calendar--docs
• https://github.com/nl-design-system/utrecht/blob/main/components/calendar/src/tokens.json
• https://github.com/nl-design-system/utrecht/blob/main/components/calendar/src/_mixin.scss
• Figma Schetsboek - Notes
• Figma bibliotheek - Start thema: Calendar

Font-size fix?

Looking at the mixin I'm guessing design token utrecht.calendar.navigation.label.min-inline-size should be utrecht.calendar.navigation.label.font-size instead.

Visually hidden text
The 'Icon Only' buttons have visually hidden text. Small thing, but 2 of those start with a capital letter and the other two don't.

• Vorig jaar
• Vorige maand
• volgende maand
• volgend jaar