feat(theming-material): use Hct as type of colors

Author: Char2sGu

packages/theming-material/src/hct-formatter.service.ts

@@ -0,0 +1,29 @@
+import { forwardRef, Injectable } from '@angular/core';
+import { Hct, hexFromArgb } from '@material/material-color-utilities';
+
+/**
+ * Service responsible for formatting HCT color values into strings, which will
+ * be used as theme token values.
+ * @remarks This is an abstract service, with a default implementation
+ * `HexStringTextHctFormatter`.
+ */
+@Injectable({
+  providedIn: 'root',
+  useExisting: forwardRef(() => HexStringTextHctFormatter),
+})
+export abstract class HctFormatter {
+  abstract format(value: Hct): string;
+}
+
+/**
+ * Implementation of `HctFormatter` that formats HCT color values into hex
+ * strings such as `#ffffff`.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class HexStringTextHctFormatter implements HctFormatter {
+  format(value: Hct): string {
+    return hexFromArgb(value.toInt());
+  }
+}

packages/theming-material/src/public-api.ts

@@ -1,5 +1,6 @@
+export * from './hct-formatter.service';
 export * from './image-seed-color-extractor.service';
 export * from './scheme';
-export * from './scheme-extended';
+export * from './scheme-static-color';
 export * from './typescale';
 export * from './typescale-standard';

packages/theming-material/src/scheme-static-color.ts

@@ -1,38 +1,40 @@
+import { inject } from '@angular/core';
 import {
   ThemeBuilder,
   ThemeBuilderContext,
   ThemeTokens,
 } from '@angularity/theming';
-import {
-  argbFromHex,
-  hexFromArgb,
-  TonalPalette,
-} from '@material/material-color-utilities';
+import { Hct, TonalPalette } from '@material/material-color-utilities';
 
+import { HctFormatter } from './hct-formatter.service';
 import { SchemeMode } from './scheme';
 
 export interface SchemeStaticColorBuilderConfig {
   name: string;
-  source: string;
+  source: Hct;
   mode: SchemeMode;
 }
 
 export class SchemeStaticColorBuilder
   implements ThemeBuilder<SchemeStaticColorBuilderConfig>
 {
+  protected hctFormatter = inject(HctFormatter);
+
   build(
     context: ThemeBuilderContext<SchemeStaticColorBuilderConfig>,
   ): ThemeTokens {
     const { name, config } = context;
-    const palette = TonalPalette.fromInt(argbFromHex(config.source));
+    const palette = TonalPalette.fromHct(config.source);
     const tones = this.getStaticColorTones(config.mode);
+    const format = (argb: number) =>
+      this.hctFormatter.format(Hct.fromInt(argb));
     return {
-      [`${name}-${config.name}`]: hexFromArgb(palette.tone(tones.color)),
-      [`${name}-on-${config.name}`]: hexFromArgb(palette.tone(tones.onColor)),
-      [`${name}-${config.name}-container`]: hexFromArgb(
+      [`${name}-${config.name}`]: format(palette.tone(tones.color)),
+      [`${name}-on-${config.name}`]: format(palette.tone(tones.onColor)),
+      [`${name}-${config.name}-container`]: format(
         palette.tone(tones.colorContainer),
       ),
-      [`${name}-on-${config.name}-container`]: hexFromArgb(
+      [`${name}-on-${config.name}-container`]: format(
         palette.tone(tones.onColorContainer),
       ),
     };

packages/theming-material/src/scheme.spec.ts

@@ -2,7 +2,7 @@
 
 import { TestBed } from '@angular/core/testing';
 import { provideTheme, ThemeTokenRegistry } from '@angularity/theming';
-import { SchemeVibrant } from '@material/material-color-utilities';
+import { Hct, SchemeVibrant } from '@material/material-color-utilities';
 import { withThemeBuilder } from 'packages/theming/src/builder-composition';
 
 import { provide } from '../../core/src/provide';
@@ -16,7 +16,7 @@ describe('SchemeBuilder', () => {
         provideTheme(
           withThemeBuilder('scheme', SchemeBuilder, {
             type: SchemeVibrant,
-            source: '#33bdff',
+            source: Hct.fromInt(0x33bdff),
             mode: SchemeMode.Light,
             contrast: SchemeContrastLevel.Standard,
           }),

packages/theming-material/src/scheme.ts

@@ -1,18 +1,18 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import {
   ThemeBuilder,
   ThemeBuilderContext,
   ThemeTokens,
 } from '@angularity/theming';
 import {
-  argbFromHex,
   DynamicColor,
   DynamicScheme,
   Hct,
-  hexFromArgb,
   MaterialDynamicColors,
 } from '@material/material-color-utilities';
 
+import { HctFormatter } from './hct-formatter.service';
+
 /**
  * Mode for Material color schemes.
  * @see `SchemeBuilder`
@@ -23,7 +23,8 @@ export enum SchemeMode {
 }
 
 /**
- * Common contrast level values for Material color schemes.
+ * Common contrast level values for Material color schemes. `Standard` should
+ * fit for most use cases.
  * @see `SchemeBuilder`
  */
 export enum SchemeContrastLevel {
@@ -69,8 +70,18 @@ export interface SchemeBuilderConfig {
    * The source/seed color to use for creating the color scheme. The generated
    * color scheme may deviate from this color at some extent, depending on the
    * chrome of the source color and the algorithm used by the `SchemeType`.
+   *
+   * @remarks `Hct` is the color representation from `material-color-utilities`,
+   * which consists of hue, chroma, and tone.
+   *
+   * @example
+   *  ```ts
+   *  import { Hct, argbFromHex } from '@material/material-color-utilities';
+   *  Hct.fromInt(0xc2e7ff)
+   *  Hct.fromInt(argbFromHex("#c2e7ff"))
+   *  ```
    */
-  source: string;
+  source: Hct;
 
   /**
    * The mode of the color scheme. Light or Dark.
@@ -91,21 +102,25 @@ export interface SchemeBuilderConfig {
  */
 @Injectable({ providedIn: 'root' })
 export class SchemeBuilder implements ThemeBuilder<SchemeBuilderConfig> {
+  protected hctFormatter = inject(HctFormatter);
+
   build(context: ThemeBuilderContext<SchemeBuilderConfig>): ThemeTokens {
     const scheme = this.getScheme(context.config);
     const tokens: ThemeTokens = {};
     for (const [k, v] of Object.entries(MaterialDynamicColors)) {
       if (!(v instanceof DynamicColor)) continue;
       const name = k.replace(/([a-z])([A-Z])/gu, '$1-$2').toLowerCase();
+      const color = v.getHct(scheme);
       const token = `${context.name}-${name}`;
-      tokens[token] = hexFromArgb(v.getArgb(scheme));
+      const value = this.hctFormatter.format(color);
+      tokens[token] = value;
     }
     return tokens;
   }
 
   protected getScheme(config: SchemeBuilderConfig): DynamicScheme {
     return new config.type(
-      Hct.fromInt(argbFromHex(config.source)),
+      config.source,
       config.mode === SchemeMode.Dark,
       config.contrast,
     );