如何理解 colors 在組件的 angular 材料主題中使用了什么？

Question

我們在項目https://material.angular.io/ 上使用 angular-material 。 它允許定義自定義顏色主題https://material.angular.io/guide/theming 。 我們也是一位設計師，他想用正確的 colors 來繪制 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,
  )
);

但是，如果我們查看他們網站上的標簽

目前尚不清楚上面托盤中的 colors 用於下划線、文本、用戶單擊選項卡時的效果等。

是否有可能以某種方式使用正確的 colors 創建 UI Kit？ 或者我們必須調試 html 到 map colors 與定義的調色板一起使用？ 可能我們應該嘗試全局覆蓋所有 colors，但這看起來很難且耗時。

Answer 1

在這個答案的最后，我展示了源代碼以准確地找到調色板中使用了哪些色調，但你真的不需要擔心它。

您可以選擇三個主題中的哪一個與組件的color屬性一起使用，這實際上是您應該做出的唯一決定。 組件設計人員將准確選擇適合組件的哪一部分的色調。 他們希望您設計整個主題來覆蓋顏色的原因是組件的所有部分都具有相同的相對色調，他們不希望您只覆蓋組件的一部分。

您鏈接的指南 ( https://material.angular.io/guide/theming ) 描述了如何覆蓋整個項目或單個組件的主題，以及在特定的 scope 中：

您可以使用 Angular Material 的 Sass mixins 在您的應用程序中的特定 scope 中自定義組件 styles。 包含 Sass mixin 的 CSS 規則聲明決定了它的 scope。下面的示例顯示了如何自定義標有 .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); }

---

我對源代碼做了一些挖掘，找到了在這里定義調色板的 function： 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;
}

他們通常會使用這個 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));
}

例如，突出顯示的選項卡顏色在此處導入： 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 ）。