Design System

Calendar

Anatomy

1. header
2. arrow-button
3. weekdays
4. day-container
5. day-number
6. day-dot

Structure

calendar	gap	`--spacing-stack-04`
arrow-button	height	`--size-square-05`
	weight	`--size-square-05`

header gap --spacing-inline-03

day-container	gap	`--spacing-inline-02`
	gap	`--spacing-stack-02`

Color

arrow-button	background-color	`--color-interactive-alternative-default`
arrow-button:pressed	background-color	`--color-interactive-alternative-pressed`
day-container	background-color	`--color-interactive-alternative-default`
day-container:pressed	background-color	`--color-interactive-alternative-pressed`
day-container:active	background-color	`--color-interactive-main-default`
day-number	color	`--color-content-primary`
day-number:active	color	`--color-content-primary-inverse`
day-dot	background-color	`--color-interactive-main-default`
day-dot:active	background-color	`--color-content-primary-inverse`

Typography

header	properties class (mixin)	`--type-style-title`
	text-align	`center`