angular - 如何理解码件的 Angular Material 主题中使用了哪些颜色？

Question

我们在项目中使用 Angular Material https://material.angular.io/ 。它允许定义自定义颜色主题 https://material.angular.io/guide/theming 。我们也是一名设计师，想要用正确的颜色绘制 UI Kit(例如不同状态下的输入)。可以通过 Angular-Material 定义的调色板看起来像蓝色原色的调色板:

$my-accent: (
  50 : #e1f2fb,
  100 : #b4dff6,
  200 : #83caf0,
  300 : #51b4ea,
  400 : #2ba4e6,
  500 : #0694e1,
  600 : #058cdd,
  700 : #0481d9,
  800 : #0377d5,
  900 : #0265cd,
  A100 : #f5f9ff,
  A200 : #c2dcff,
  A400 : #8fbfff,
  A700 : #75b0ff,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);

但是，如果我们查看他们网站上的选项卡

尚不清楚上面调色板中的哪些颜色用于下划线、文本、用户单击选项卡时的效果等。

是否可以以某种方式创建具有正确颜色的 UI 套件？或者我们必须调试 html 来映射与定义的调色板一起使用的颜色？也许我们应该尝试覆盖全局所有颜色，但这看起来很困难且耗时。

Answer 1

在这个答案的最后，我展示了源代码，以准确查找调色板中使用的色调，但您实际上不需要担心它。

您可以选择将三个主题中的哪一个与组件的 color 属性一起使用，这实际上是您应该做出的唯一决定。组件设计者将准确选择适合组件的哪一部分的色调。他们希望您设计整个主题来覆盖颜色的原因是，组件的所有部分都具有相同的相对色调，他们不希望您仅覆盖组件的一个部分。

您链接的指南 ( https://material.angular.io/guide/theming ) 描述了如何在特定范围内覆盖整个项目或单个组件的主题:

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); } 

---

我对源代码做了一些挖掘，发现了定义调色板的函数:https://github.com/angular/components/blob/master/src/material/core/theming/_theming.scss

您可以看到默认值为500，较亮的是100，较暗的是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;
}

他们通常会使用此函数将颜色导入到组件中:

/// 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));
}

例如，突出显示的选项卡颜色在此处导入: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);
  }
}

因此墨迹栏将是主题的默认颜色 (500)(primary、accent 或 warn)。