Calendar: add design token for font-weight of disabled days, correct font-size token #3015
Description
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:
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