Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ALL): Shadow tokens (M3) in components could use system shadows #29724

Open
zygarios opened this issue Sep 12, 2024 · 0 comments
Open

feat(ALL): Shadow tokens (M3) in components could use system shadows #29724

zygarios opened this issue Sep 12, 2024 · 0 comments
Labels
area: core Issues related to the framework runtime feature This issue represents a new feature or feature request rather than a bug or bug fix P4 A relatively minor issue that is not relevant to core functions

Comments

@zygarios
Copy link

Feature Description

Currently, many shadow-related tokens in components are hardcoded directly. Since we now have global elevation shadows, it would be great if these components used those system shadows instead. Interestingly, the values are exactly the same.

Use Case

If I want to change shadows, it would be better to do it systemically for all components like this.

For example, instead of:

--mat-select-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);

Should be:
--mat-select-container-elevation-shadow: var(--mat-app-elevation-shadow-level-2);

This change will make it easier to manage and customize shadows globally. This should apply to all shadow tokens, such as:

--mat-select-container-elevation-shadow
--mat-autocomplete-container-elevation-shadow
--mat-dialog-container-elevation-shadow
--mdc-protected-button-container-elevation-shadow
--mdc-protected-button-disabled-container-elevation-shadow
--mdc-protected-button-focus-container-elevation-shadow
--mdc-protected-button-hover-container-elevation-shadow
--mdc-protected-button-pressed-container-elevation-shadow
--mdc-extended-fab-container-elevation-shadow
--mdc-extended-fab-focus-container-elevation-shadow
--mdc-extended-fab-hover-container-elevation-shadow
--mdc-extended-fab-pressed-container-elevation-shadow
--mdc-fab-container-elevation-shadow
--mdc-fab-focus-container-elevation-shadow
--mdc-fab-hover-container-elevation-shadow
--mdc-fab-pressed-container-elevation-shadow
--mdc-fab-small-container-elevation-shadow
--mdc-fab-small-focus-container-elevation-shadow
--mdc-fab-small-hover-container-elevation-shadow
--mdc-fab-small-pressed-container-elevation-shadow
--mat-datepicker-calendar-container-elevation-shadow
--mat-datepicker-calendar-container-touch-elevation-shadow
--mat-sidenav-container-elevation-shadow

@zygarios zygarios added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Sep 12, 2024
@zygarios zygarios changed the title feat(ALL): Shadow tokens in components could use system shadows feat(ALL): Shadow tokens (M3) in components could use system shadows Sep 12, 2024
@crisbeto crisbeto added P4 A relatively minor issue that is not relevant to core functions area: core Issues related to the framework runtime and removed needs triage This issue needs to be triaged by the team labels Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: core Issues related to the framework runtime feature This issue represents a new feature or feature request rather than a bug or bug fix P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

No branches or pull requests

2 participants