angular / angular/components

docs(theming): theming guide is missing documentation on the accent hues (A200, A100, etc)

Open
#26,845 0 comments 0 reactions 0 assignees View on GitHub
area: theming docs P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Documentation Feedback

In your documentation when you talk about "palette" you say "These identifier numbers include 50, and then each 100 value between 100 and 900" and you give an example.
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
// ... continues to 900
contrast: (
50: rgba(black, 0.87),
100: rgba(black, 0.87),
200: rgba(black, 0.87),
300: white,
// ... continues to 900
)
);

But later when you talk about theme when you define the primary color OK no problem because you are using a value consistent with your declaration in the palette ($my-primary: mat.define-palette(mat.$indigo-palette, 500)).
But for the accent color there is a problem because the values ​​no longer match your palette declaration (define-palette(mat.$pink-palette, A200, A100, A400)) -> what about A200, A100, A400 ?

Moreover why you need to declare in each palette "accent" values if in you theme you declare an accent color with all the hues from 50 to 900 ?

This problem has consequences in the code if you want to manage the light and dark theme with the "new" declaration model (with color in the map).
If you declare a palette without Axxx and try to inject it in the map at the 'color'/'background'
level you obtain "color: null is not a color" error.
Moreover you can't use SASS custom properties "var(--xxxxxx)" in the palette to manage foreground and bacground !!

### Affected documentation page

https://material.angular.io/guide/theming

Contributor guide

Open the contributing guide

Research direction

Start with the affected theming guide at material.angular.io/guide/theming and compare its palette and accent-color examples. Document the A200, A100, and A400 hues, explain why accent values are declared separately, and clarify the reported color-map and Sass custom-property behavior; the guide should answer these questions without the reported ambiguity.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, sass
Domain
documentation, frontend
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.