Skip to content

feat(theming): Mixins for reading component style tokens #30083

Open
@martinboue

Description

@martinboue

Feature Description

Mixins to get values from a component theme that takes a token as parameter, for example:

p {
   color: @include mat.button-get(text-label-text-color);
}

it would generate:

p {
   color: var(--mdc-outlined-button-label-text-color, var(--mat-sys-primary)); // <== Actual value used for text-button
}

Ideally, we would have as many mixins as there are components (+core) and we could use the same tokens as the mat.<component>-overrides mixins.

The mat.<component>-get mixin name is a proposal, open to suggestions.

Use Case

I have a custom component and I want to apply the same style as a material component. I also want to make sure that they are always in sync when I change my theme.

For example, I want to have a text <p> with the same font color as my mat-button next to it.

For now, I need to rely on private CSS variables to do that, which is not ideal for maintainability.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/corefeatureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions