bug(mat-dialog): default Dialog backdrop color is hardcoded black 32% instead of using mat-sys-scrim
Personne n'a encore pris cette issue.
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
Description
Not sure if this is a bug or intentional, please advise
The default Angular Material behavior when opening a Dialog is to add a 32% opacity black scrim for the overlay. This is not in any way customizable and instead is hardcoded in the Angular CDK overlay implementation: https://github.com/angular/components/blob/501d6744b377e1ef7d1cf7e86edcc0eedbf755e7/src/cdk/overlay/_index.scss#L9
Since there is an existing mat-sys-scrim token for this exact purpose I recommend it be used for customization purposes and for the ability to account for light and dark themes.
Reproduction
https://material.angular.dev/components/dialog/overview
Expected Behavior
mat-sys-scrim token is used for scrims
Actual Behavior
Hardcoded 32% opacity black value is used for the scrim
Environment
- Angular: v22
- CDK/Material: v22
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par le style du backdrop référencé dans src/cdk/overlay/_index.scss et examinez la reproduction de la vue d’ensemble des dialogs d’Angular Material. Suivez la façon dont l’overlay du dialog reçoit son style de scrim et vérifiez si le token mat-sys-scrim existant y est disponible. Le travail est terminé lorsque le scrim par défaut utilise mat-sys-scrim tout en conservant le comportement attendu du dialog dans les thèmes clair et sombre.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, scss, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 68/100