components icon indicating copy to clipboard operation
components copied to clipboard

docs-bug(ALL): Add Styling Instructions

Open thatcort opened this issue 8 months ago • 4 comments

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

thatcort avatar Oct 25 '23 18:10 thatcort

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

mmalerba avatar Oct 31 '23 19:10 mmalerba

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.

thatcort avatar Nov 01 '23 02:11 thatcort

👍 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.

minimalism avatar Nov 10 '23 12:11 minimalism

@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.

Taras-R avatar Feb 06 '24 07:02 Taras-R