/* Surcharge globale des couleurs sémantiques du thème Radzen (primary/success/
warning/danger) par la palette --fufy-* — voir docs/DESIGN_SYSTEM.md §3.2.
Chargé sur TOUTES les pages (lien global dans App.razor), donc tout
RadzenButton/RadzenBadge/RadzenAlert/etc. utilisant
ButtonStyle="ButtonStyle.Success" (ou Primary/Warning/Danger) hérite
automatiquement des nouvelles couleurs, sans rien changer page par page.
Correspondance (valeurs vérifiées dans le thème réellement actif de l'app,
node_modules/radzen.blazor .../css/standard-base.css — "Standard" est le
seul thème clair sélectionnable dans UserAccount.razor, les options
"Material" y sont commentées) :
--rz-primary #1151f3 -> --fufy-teal #00CDD8
--rz-success #009b51 -> --fufy-lime #C7DE00
--rz-warning #ffae11 -> --fufy-warning #FFD652 (nouveau token, pas issu
du Figma home)
--rz-danger #f31155 -> --fufy-pink #F969A0
!important sur chaque déclaration : nécessaire, pas une habitude prise à la
légère. UserAccount.razor (ChangeTheme) peut changer de thème Radzen à
l'exécution via window.setRadzenTheme (MainLayout.js), qui ajoute un
À LA FIN du à ce moment-là — après ce
fichier, donc après ce override, quel que soit l'ordre initial des
dans App.razor. Sans !important, le thème Radzen fraîchement injecté
regagnerait la cascade et écraserait silencieusement ces couleurs au
premier changement de thème. */
:root {
/* Nouveau token de marque, pas dans home-tokens.css : cette couleur ne
vient pas de la maquette Figma de la home (qui n'a pas de nuance
"warning"), elle sert uniquement à cette surcharge du thème Radzen. */
--fufy-warning: #FFD652;
}
:root {
--rz-primary: var(--fufy-teal, #00CDD8) !important;
--rz-primary-light: color-mix(in srgb, var(--fufy-teal, #00CDD8) 82%, white) !important;
--rz-primary-lighter: color-mix(in srgb, var(--fufy-teal, #00CDD8) 16%, transparent) !important;
--rz-primary-dark: color-mix(in srgb, var(--fufy-teal, #00CDD8) 85%, black) !important;
--rz-primary-darker: color-mix(in srgb, var(--fufy-teal, #00CDD8) 72%, black) !important;
/* Blanc partout (base/light/dark/darker) : c'était déjà le comportement
d'origine de Radzen sur les 4 couleurs sémantiques (--rz-on-* valait
#ffffff dans standard-base.css, quel que soit le thème clair/sombre),
gardé volontairement tel quel malgré des couleurs de fond plus claires
que les teintes Radzen d'origine (--fufy-lime/--fufy-warning) — voir
docs/DESIGN_SYSTEM.md §3.2. */
--rz-on-primary: var(--fufy-white, #ffffff) !important;
--rz-on-primary-light: var(--fufy-white, #ffffff) !important;
--rz-on-primary-lighter: var(--fufy-teal, #00CDD8) !important;
--rz-on-primary-dark: var(--fufy-white, #ffffff) !important;
--rz-on-primary-darker: var(--fufy-white, #ffffff) !important;
--rz-success: var(--fufy-lime, #C7DE00) !important;
--rz-success-light: color-mix(in srgb, var(--fufy-lime, #C7DE00) 82%, white) !important;
--rz-success-lighter: color-mix(in srgb, var(--fufy-lime, #C7DE00) 16%, transparent) !important;
--rz-success-dark: color-mix(in srgb, var(--fufy-lime, #C7DE00) 85%, black) !important;
--rz-success-darker: color-mix(in srgb, var(--fufy-lime, #C7DE00) 72%, black) !important;
--rz-on-success: var(--fufy-white, #ffffff) !important;
--rz-on-success-light: var(--fufy-white, #ffffff) !important;
--rz-on-success-lighter: var(--fufy-lime, #C7DE00) !important;
--rz-on-success-dark: var(--fufy-white, #ffffff) !important;
--rz-on-success-darker: var(--fufy-white, #ffffff) !important;
--rz-warning: var(--fufy-warning, #FFD652) !important;
--rz-warning-light: color-mix(in srgb, var(--fufy-warning, #FFD652) 82%, white) !important;
--rz-warning-lighter: color-mix(in srgb, var(--fufy-warning, #FFD652) 16%, transparent) !important;
--rz-warning-dark: color-mix(in srgb, var(--fufy-warning, #FFD652) 85%, black) !important;
--rz-warning-darker: color-mix(in srgb, var(--fufy-warning, #FFD652) 72%, black) !important;
--rz-on-warning: var(--fufy-white, #ffffff) !important;
--rz-on-warning-light: var(--fufy-white, #ffffff) !important;
--rz-on-warning-lighter: var(--fufy-warning, #FFD652) !important;
--rz-on-warning-dark: var(--fufy-white, #ffffff) !important;
--rz-on-warning-darker: var(--fufy-white, #ffffff) !important;
--rz-danger: var(--fufy-pink, #F969A0) !important;
--rz-danger-light: color-mix(in srgb, var(--fufy-pink, #F969A0) 82%, white) !important;
--rz-danger-lighter: color-mix(in srgb, var(--fufy-pink, #F969A0) 16%, transparent) !important;
--rz-danger-dark: color-mix(in srgb, var(--fufy-pink, #F969A0) 85%, black) !important;
--rz-danger-darker: color-mix(in srgb, var(--fufy-pink, #F969A0) 72%, black) !important;
--rz-on-danger: var(--fufy-white, #ffffff) !important;
--rz-on-danger-light: var(--fufy-white, #ffffff) !important;
--rz-on-danger-lighter: var(--fufy-pink, #F969A0) !important;
--rz-on-danger-dark: var(--fufy-white, #ffffff) !important;
--rz-on-danger-darker: var(--fufy-white, #ffffff) !important;
/* Radzen a déjà une animation d'ouverture pour .rz-dialog (voir
standard-base.css : --rz-dialog-transition, consommée par
@keyframes rz-dialog-open-opacity/-scale sur .rz-dialog.rz-open) --
juste beaucoup trop rapide (0.1s) pour vraiment se voir. Rallongée et
adoucie ici (une seule variable à changer, s'applique à tous les
RadzenDialog de l'app sans dupliquer les keyframes). */
--rz-dialog-transition: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Fermeture des RadzenDialog : contrairement à l'ouverture, Radzen ne
prévoit PAS d'animation de sortie pour .rz-dialog (seuls les dialogs
"side" -- .rz-dialog-side-position-* -- ont des keyframes -close en plus
de leurs -open ; le dialog centré n'a que l'ouverture). Sans mécanisme
côté Radzen pour retarder le démontage, ces classes sont posées
manuellement en JS juste avant d'appeler DialogService.Close() (voir
closeDialogAnimated dans DialogAnimations.js et son usage via
DialogServiceExtensions.CloseAnimated dans chaque dialog de
UserAccountPage) : elles n'ont d'effet que le temps très court avant que
Blazor ne retire l'élément du DOM. */
.rz-dialog-mask {
transition: opacity 0.2s ease;
}
.rz-dialog {
transition: opacity 0.2s ease, transform 0.2s ease;
}
.rz-dialog-mask-closing {
opacity: 0 !important;
}
.rz-dialog-closing {
opacity: 0 !important;
transform: scale(0.95);
}