📝(docs) archive calendar-central-design change

Archive completed OpenSpec change with all artifacts:
- proposal.md: Initial design requirements
- design.md: Architecture decisions
- specs/: calendar-theme and scheduler-toolbar specifications
- tasks.md: 34/34 tasks completed

Sync delta specs to main specs:
- openspec/specs/calendar-theme/spec.md
- openspec/specs/scheduler-toolbar/spec.md

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Panchout
2026-01-28 12:56:18 +01:00
parent 9e7c6fbff1
commit 92bea3fd96
8 changed files with 632 additions and 0 deletions

View File

@@ -0,0 +1,113 @@
## ADDED Requirements
### Requirement: Variables CSS Cunningham
Le thème DOIT remapper les variables CSS d'EventCalendar (`--ec-*`) vers les tokens Cunningham (`--c--globals--*`).
#### Scenario: Couleurs de base appliquées
- **WHEN** le calendrier est rendu
- **THEN** le fond utilise `--c--globals--colors--gray-000`
- **AND** les bordures utilisent `--c--globals--colors--gray-100`
- **AND** le texte utilise `--c--globals--colors--gray-800`
#### Scenario: Dark mode automatique
- **WHEN** le système est en dark mode
- **THEN** les couleurs s'adaptent automatiquement via les tokens Cunningham
---
### Requirement: Style du jour actuel
Le jour actuel DOIT être affiché avec un encadré fin autour du numéro, sans fond coloré.
#### Scenario: Header du jour actuel
- **WHEN** un jour est le jour actuel
- **THEN** le numéro du jour est entouré d'une bordure fine (1px)
- **AND** la bordure a un border-radius de 4px
- **AND** le fond de la colonne header reste transparent
---
### Requirement: Style des événements
Les événements DOIVENT avoir un style épuré avec coins arrondis.
#### Scenario: Apparence d'un événement
- **WHEN** un événement est affiché dans la grille
- **THEN** il a un border-radius de 6px
- **AND** il n'a pas de box-shadow
- **AND** le titre est en font-weight 600 (semi-bold)
- **AND** l'horaire est en font-weight 400 avec légère opacité
#### Scenario: Couleur d'un événement
- **WHEN** un événement appartient à un calendrier
- **THEN** il prend la couleur de ce calendrier en fond
- **AND** le texte est blanc
---
### Requirement: Style du now indicator
L'indicateur de l'heure actuelle DOIT utiliser la couleur brand.
#### Scenario: Apparence du now indicator
- **WHEN** l'heure actuelle est visible dans la vue
- **THEN** une ligne horizontale avec un point est affichée
- **AND** la couleur est `--c--globals--colors--brand-500`
---
### Requirement: Style de la sidebar heures
La sidebar affichant les heures DOIT avoir un style discret.
#### Scenario: Apparence des labels d'heure
- **WHEN** la sidebar des heures est affichée
- **THEN** la font-size est réduite (0.75rem)
- **AND** la couleur est `--c--globals--colors--gray-500`
---
### Requirement: Toolbar native masquée
La toolbar native d'EventCalendar DOIT être masquée.
#### Scenario: Toolbar native invisible
- **WHEN** le calendrier est rendu
- **THEN** l'élément `.ec-toolbar` a `display: none`
---
### Requirement: Lignes de grille simplifiées
Les lignes de grille DOIVENT afficher uniquement les heures pleines.
#### Scenario: Pas de lignes intermédiaires
- **WHEN** la vue semaine ou jour est affichée
- **THEN** seules les lignes horaires (chaque heure) sont visibles
- **AND** les lignes intermédiaires (30 min) sont masquées
---
### Requirement: Header unifié
Le header (en-têtes de colonnes + section all-day) DOIT avoir un aspect unifié.
#### Scenario: Pas de bordures internes
- **WHEN** le header est affiché
- **THEN** les éléments `.ec-col-head` et `.ec-all-day` n'ont pas de bordures
- **AND** les `.ec-day` dans `.ec-all-day` n'ont pas de bordure droite
#### Scenario: Sidebar header masquée
- **WHEN** le header est affiché
- **THEN** le texte du timezone dans `.ec-sidebar` du header est invisible
---
### Requirement: Bordure de grille
La grille du body DOIT avoir une bordure en bas et à droite.
#### Scenario: Bordures de la grille
- **WHEN** la grille du calendrier est affichée
- **THEN** `.ec-grid` dans `.ec-body` a une bordure bottom et right

View File

@@ -0,0 +1,115 @@
## ADDED Requirements
### Requirement: Layout de la toolbar
La toolbar DOIT afficher les éléments de navigation et de sélection de vue.
#### Scenario: Structure de la toolbar
- **WHEN** la toolbar est affichée
- **THEN** elle contient à gauche : bouton "Aujourd'hui", boutons de navigation (précédent/suivant)
- **AND** elle contient au centre : le titre de la période (ex: "janv. févr. 2026")
- **AND** elle contient à droite : un dropdown pour sélectionner la vue
---
### Requirement: Bouton Aujourd'hui
Le bouton "Aujourd'hui" DOIT permettre de revenir à la date du jour.
#### Scenario: Clic sur Aujourd'hui
- **WHEN** l'utilisateur clique sur "Aujourd'hui"
- **THEN** le calendrier navigue vers la date actuelle
- **AND** la vue reste inchangée
#### Scenario: Style du bouton
- **WHEN** le bouton "Aujourd'hui" est affiché
- **THEN** il a un style "pill" (bordure arrondie)
- **AND** il utilise les styles Cunningham
---
### Requirement: Navigation précédent/suivant
Les boutons de navigation DOIVENT permettre de naviguer dans le temps.
#### Scenario: Clic sur précédent
- **WHEN** l'utilisateur clique sur le bouton précédent (◀)
- **THEN** le calendrier navigue vers la période précédente
#### Scenario: Clic sur suivant
- **WHEN** l'utilisateur clique sur le bouton suivant (▶)
- **THEN** le calendrier navigue vers la période suivante
#### Scenario: Style des boutons de navigation
- **WHEN** les boutons de navigation sont affichés
- **THEN** ils sont des IconButtons avec flèches
- **AND** ils utilisent les styles Cunningham
---
### Requirement: Titre de la période
Le titre DOIT afficher la période actuellement visible.
#### Scenario: Affichage du titre
- **WHEN** la vue est en mode semaine ou jour
- **THEN** le titre affiche le mois et l'année (ex: "janv. févr. 2026")
#### Scenario: Mise à jour du titre
- **WHEN** l'utilisateur navigue vers une autre période
- **THEN** le titre se met à jour pour refléter la nouvelle période
---
### Requirement: Sélecteur de vue
Le dropdown DOIT permettre de changer de vue via un menu déroulant custom.
#### Scenario: Options disponibles
- **WHEN** l'utilisateur clique sur le bouton trigger
- **THEN** un menu déroulant s'ouvre avec les options : Jour, Semaine, Mois, Liste
- **AND** l'option sélectionnée est mise en évidence avec un checkmark
#### Scenario: Changement de vue
- **WHEN** l'utilisateur sélectionne une vue différente
- **THEN** le calendrier change pour afficher cette vue
- **AND** le menu se ferme
- **AND** le bouton trigger affiche la vue sélectionnée
#### Scenario: Vue par défaut
- **WHEN** le calendrier est chargé
- **THEN** la vue "Semaine" est sélectionnée par défaut
#### Scenario: Fermeture du menu
- **WHEN** l'utilisateur clique en dehors du menu
- **THEN** le menu se ferme
---
### Requirement: Accessibilité clavier
Le sélecteur de vue DOIT être accessible au clavier.
#### Scenario: Navigation clavier
- **WHEN** le menu est ouvert
- **THEN** les touches ArrowUp/ArrowDown permettent de naviguer entre les options
- **AND** la touche Enter sélectionne l'option focalisée
- **AND** la touche Escape ferme le menu
#### Scenario: Focus visible
- **WHEN** une option est focalisée par le clavier
- **THEN** elle a un style visuel distinct (outline)
---
### Requirement: Synchronisation avec le calendrier
La toolbar DOIT rester synchronisée avec l'état du calendrier.
#### Scenario: Sync après navigation
- **WHEN** le calendrier change de période (via drag ou autre)
- **THEN** le titre de la toolbar se met à jour
#### Scenario: Sync après changement de vue externe
- **WHEN** la vue du calendrier change par un autre moyen
- **THEN** le dropdown affiche la vue correcte