we are using angular-material on the project 
It is not clear what colors from the pallete above being used for underline, for text, for effects when user click on the tab, etc.
Is it possible somehow to create UI Kit with right colors? Or we have to debug html to map colors used with pallette defined? Possibly we should try to override all the colors globally, but that looks hard and time consuming variant.
CodePudding user response：
At the end of this answer I show the source code to find exactly which hues are used from the palette, but you really don't need to worry about it.
You can choose which of the three themes to use with the color property of the component, and that's really the only decision you're supposed to make. The component designers will choose exactly which hue is appropriate for which piece of the component. The reason they want you to design an entire theme to override colours is so that all pieces of a component have the same relative hues, they don't want you overriding only one piece of a component.
The guide that you linked (https://material.angular.io/guide/theming) describes how to override the theme for an entire project or a single component, and within a specific scope:
You can use Angular Material's Sass mixins to customize component styles within a specific scope in your application. The CSS rule declaration in which you include a Sass mixin determines its scope. The example below shows how to customize the color of all buttons inside elements marked with the .my-special-section CSS class.
@use '@angular/material' as mat; .my-special-section { $special-primary: mat.define-palette(mat.$orange-palette); $special-accent: mat.define-palette(mat.$brown-palette); $special-theme: mat.define-dark-theme(( color: (primary: $special-primary, accent: $special-accent), )); @include mat.button-color($special-theme); }
I did a bit of digging through the source code and found the function that defines palettes here: https://github.com/angular/components/blob/master/src/material/core/theming/_theming.scss
You can see the default value is 500, lighter is 100, and darker is 700
/// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
/// of the Material Design hues.
/// @param {Map} $base-palette Map of hue keys to color values for the basis for this palette.
/// @param {String | Number} $default Default hue for this palette.
/// @param {String | Number} $lighter "lighter" hue for this palette.
/// @param {String | Number} $darker "darker" hue for this palette.
/// @param {String | Number} $text "text" hue for this palette.
/// @returns {Map} A complete Angular Material theming palette.
@function define-palette($base-palette, $default: 500, $lighter: 100, $darker: 700,
$text: $default) {
$result: map.merge($base-palette, (
default: _get-color-from-palette($base-palette, $default),
lighter: _get-color-from-palette($base-palette, $lighter),
darker: _get-color-from-palette($base-palette, $darker),
text: _get-color-from-palette($base-palette, $text),
default-contrast: get-contrast-color-from-palette($base-palette, $default),
lighter-contrast: get-contrast-color-from-palette($base-palette, $lighter),
darker-contrast: get-contrast-color-from-palette($base-palette, $darker)
));
// For each hue in the palette, add a "-contrast" color to the map.
@each $hue, $color in $base-palette {
$result: map.merge($result, (
'#{$hue}-contrast': get-contrast-color-from-palette($base-palette, $hue)
));
}
@return $result;
}
They will generally import a color into the component using this function:
/// Gets a color from a theme palette (the output of mat-palette).
/// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
/// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
///
/// @param {Map} $palette The palette from which to extract a color.
/// @param {String | Number} $hue The hue from the palette to use. If this is a value between 0
// and 1, it will be treated as opacity.
/// @param {Number} $opacity The alpha channel value for the color.
/// @returns {Color} The color for the given palette, hue, and opacity.
@function get-color-from-palette($palette, $hue: default, $opacity: null) {
// If hueKey is a number between zero and one, then it actually contains an
// opacity value, so recall this function with the default hue and that given opacity.
@if meta.type-of($hue) == number and $hue >= 0 and $hue <= 1 {
@return get-color-from-palette($palette, default, $hue);
}
// We cast the $hue to a string, because some hues starting with a number, like `700-contrast`,
// might be inferred as numbers by Sass. Casting them to string fixes the map lookup.
$color: if(map.has-key($palette, $hue), map.get($palette, $hue), map.get($palette, $hue ''));
@if (meta.type-of($color) != color) {
// If the $color resolved to something different from a color (e.g. a CSS variable),
// we can't apply the opacity anyway so we return the value as is, otherwise Sass can
// throw an error or output something invalid.
@return $color;
}
@return rgba($color, if($opacity == null, opacity($color), $opacity));
}
For example the highlighted tab color is imported here: https://github.com/angular/components/blob/master/src/material/tabs/_tabs-theme.scss
.mat-tab-group, .mat-tab-nav-bar {
$theme-colors: (
primary: $primary,
accent: $accent,
warn: $warn
);
@each $name, $color in $theme-colors {
// Set the foreground color of the tabs
&.mat-#{$name} {
@include _label-focus-color($color);
@include _ink-bar-color($color);
// Override ink bar when background color is the same
&.mat-background-#{$name} {
> .mat-tab-header, > .mat-tab-link-container {
@include _ink-bar-color($color, default-contrast);
}
}
}
}
@mixin _ink-bar-color($color, $hue: default) {
.mat-ink-bar {
background-color: theming.get-color-from-palette($color, $hue);
}
}
So the ink bar will be the default (500) color of the theme (primary, accent, or warn).