docs-bug(ALL): Add Styling Instructions

[thatcort]

Documentation Feedback

Please add instructions for how to theme and style the components. As a start, please describe the CSS properties that apply to each component, what they do, and their default values. Please describe how styles are inherited from theming (or not) and how to best customize them.

Affected documentation page

ALL

[mmalerba]

We have a separate guide page that describes how to theme our components: https://material.angular.io/guide/theming. If you are referring to the CSS variables, we are still in the process of refactoring the components to use CSS variables generated from MDC's design tokens. We will add further documentation about how to customize these once we have finished the refactoring and they are stable

[thatcort]

Hi @mmalerba, I've read the theming doc and it is helpful but incomplete. It doesn't describe all the themable options nor how to theme individual components. The relationship between the theme values and the CSS variables is also unclear. Each component has a lot of states (focus, hover, pressed...), but I don't see these documented anywhere either. All of this makes it difficult to customize how components appear.

[minimalism]

👍 It seems some aspects of theming are well-documented while others are missing. After exhausting the documentation, I've been digging through the repository trying to find out how to change container-color for form-field but as far as I can tell, this is not explained anywhere.

[Taras-R]

@mmalerba i think it's a correct place to ask since you mentioned already design tokens implementation. Is there any chance you can give us some hint when can we expect it to be released? Highly anticipated feature by angular devs since v.17 release. Anyway wish you luck and inspiration in the work, thanks.

[martinboue]

I also find the documentation incomplete on how to style each components with Material 3.

IMO the component page (example: https://material.angular.io/components/button) lacks at least:

• Color variants for that component. It can be found here but it should also be in the component page.
• CSS variables for that component. Nowhere to be found right now, the fastest way is to inspect the element in your browser, look for the property you want to change and hope it's a variable and not hardcoded.
• Mixins and their parameters. It should descript each mixin (-theme, -color, -typography, -density, and -base) with its parameters.

Is that what you also wanted @thatcort ? Please complete if needed.

[thatcort]

@martinboue That's a good list. Only thing I'd add to it is:

• A list of states the component can be in and the CSS variables associated with each

[martinboue]

With Angular Material v19 this issue needs some update. Here are the things I think the documentation lacks;

• Color variants for that component and the default one. It could be found here on v18 but I think it should be in the component page.
• CSS variables for that component. Nowhere to be found right now, the fastest way is to inspect the element in your browser, look for the property you want to change and hope it's a variable and not hardcoded.
  • => RESOLVED by the new STYLING tab on each component (example: https://material.angular.io/components/button/styling)
• Mixins and their parameters.
  • Components mixins (examples: mat.button-theme, mat.button-color, mat.button-typography, ...)
  • Global mixins (examples: mat.get-theme-color, mat.define-theme, mat.core, mat.theme, mat.elevation-classes, mat.app-background, ...)
• A list of states the component can be in and the CSS variables associated with each
  • IMO it would be great to have a 2 new filters, just like the 'Filter by type', in the STYLING tab :
    • Filter by appearance: filled, outlined, ...
    • Filter by state: active, disabled, focus, hover, ...

[amysorto]

I am closing this issue since the docs now has a Styling tab for each component with more information and our theming guide has been updated. For additional docs feedback, please open a new issue. Thank you so much!

[martinboue]

• Mixins and their parameters.
  • Components mixins (examples: mat.button-theme, mat.button-color, mat.button-typography, ...)
  • Global mixins (examples: mat.get-theme-color, mat.define-theme, mat.core, mat.theme, mat.elevation-classes, mat.app-background, ...)

I have created a doc issue about this: #30240

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}