docs(theming): add docs about the tokens / CSS variables used for theming

[ChrTall]

Documentation Feedback

When following the guide theming-your-components I can succesfully create a partial scss file to theme my custom implementation of a Card component that should be styled like the Material Card.
For the background I access:
$background-palette: map-get($color-config, background); $background-color: mat.get-color-from-palette($background-palette, background); $background-card-color: mat.get-color-from-palette($background-palette, card);
So far when the user switches to a dark theme the background color changes like in material cards.
However the border of outlined material cards has a CSS Variable value for its color.
On light themes the value is #e0e0e0 for me. On Dark Themes it is #595959.
The Variable is: --mdc-outlined-card-outline-color
It would be nice if the docs could explain how I can apply these border color values to my component via the sass theming api / partial _my-comp.component-theme.scss file.

Affected documentation page

https://material.angular.io/guide/theming-your-components

[ctaepper]

we recently switched from legacy components to the mdc components and find it very hard to apply custom styles without any documentation about css variables.

From a documentation point of view, Ionicframework Docs do a good job in showing what can be customized

[amysorto]

With the addition of #29363, the theming guide will be updated. As well as each component page will have documentation on how to override styles, here is a preview for menu: https://next.material.angular.io/components/menu/styling.

[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.}