マテリアルデザイン 3 のカラースキームを Material Color Utilities で作る

npm i @material/material-color-utilities

import {
  Blend,
  Hct,
  MaterialDynamicColors,
  SchemeContent,
  SchemeExpressive,
  SchemeFidelity,
  SchemeMonochrome,
  SchemeNeutral,
  SchemeTonalSpot,
  SchemeVibrant,
  argbFromHex,
  hexFromArgb,
} from '@material/material-color-utilities';

type Role = M3Colors['roles'][number];
type Additions = { name: string; color: `#${string}`; isHarmonize: boolean }[];
type Scheme = keyof M3Colors['schemeClasses'];

class M3Colors {
  private source: `#${string}`;

  private sourceArgb: number;

  private sourceHct: Hct;

  private additions: Additions;

  private scheme: Scheme;

  private contrastLevel: number;

  /**
   * マテリアルデザイン3の色
   * @param source - 原色
   * @param additions - 追加色
   * @param scheme - 使用するスキーム
   * @param contrastLevel - コントラストレベル 最小は-1 最大は1 デフォルトは0
   */
  constructor(
    source: `#${string}`,
    additions: Additions = [],
    scheme: Scheme = 'SchemeTonalSpot',
    contrastLevel: number = 0.0,
  ) {
    const hexRegEx = /^#[0-9A-F]{6}$/i;
    if (!hexRegEx.test(source)) {
      throw new Error(`Invalid color value: ${source}`);
    }
    const invalidAddition = additions.find(
      (addition) => !hexRegEx.test(addition.color),
    );
    if (invalidAddition) {
      throw new Error(
        `Invalid additional color value: ${invalidAddition.color}`,
      );
    }
    if (contrastLevel < -1.0 || contrastLevel > 1.0) {
      throw new Error(
        `Invalid contrastLevel value: ${contrastLevel}. It should be between -1.0 and 1.0 inclusive.`,
      );
    }
    this.source = source;
    this.sourceArgb = argbFromHex(this.source);
    this.sourceHct = Hct.fromInt(this.sourceArgb);
    this.additions = additions;
    this.scheme = scheme;
    this.contrastLevel = contrastLevel;
  }

  /**
   * 取得する色
   */
  private roles = [
    'surface',
    'surfaceContainer',
    'onSurface',
    'primary',
    'primaryContainer',
  ] satisfies Exclude<
    keyof typeof MaterialDynamicColors,
    | 'contentAccentToneDelta'
    | 'highestSurface'
    | 'primaryPaletteKeyColor'
    | 'secondaryPaletteKeyColor'
    | 'tertiaryPaletteKeyColor'
    | 'neutralPaletteKeyColor'
    | 'neutralVariantPaletteKeyColor'
    | 'prototype'
  >[];

  /**
   * 使用可能なスキームの一覧
   * SchemeFruitSaladとSchemeRainbowは0.2.7では使用不可
   * https://github.com/material-foundation/material-color-utilities/commit/f9bda5647a2ab8e489faa251ac7841524b58a6ae
   */
  private schemeClasses = {
    SchemeContent,
    SchemeExpressive,
    SchemeFidelity,
    SchemeMonochrome,
    SchemeNeutral,
    SchemeVibrant,
    SchemeTonalSpot,
  };

  /**
   * 使用するスキームのインスタンスを作成
   * @param sourceHct - 原色（追加色の場合は追加色）のHCT色空間
   * @param isDark - ダークモード用はtrue ライトモード用はfalse
   * @returns スキーム
   */
  private getScheme(sourceHct: Hct, isDark: boolean) {
    const SchemeClass = this.schemeClasses[this.scheme];
    return new SchemeClass(sourceHct, isDark, this.contrastLevel);
  }

  /**
   * 原色に基づくベースラインのカラースキームを生成
   * https://m3.material.io/styles/color/advanced/adjust-existing-colors#c6810874-a320-4684-8df6-3869887ea49c
   * @returns ライトモード用とダークモード用のオブジェクト
   */
  private generateBaselineColors() {
    const lightScheme = this.getScheme(this.sourceHct, false);
    const darkScheme = this.getScheme(this.sourceHct, true);
    return this.roles.reduce(
      (acc, cur) => {
        acc.light[cur] = hexFromArgb(
          MaterialDynamicColors[cur].getArgb(lightScheme),
        );
        acc.dark[cur] = hexFromArgb(
          MaterialDynamicColors[cur].getArgb(darkScheme),
        );
        return acc;
      },
      { light: {}, dark: {} } as {
        light: Record<Role, string>;
        dark: Record<Role, string>;
      },
    );
  }

  /**
   * 追加色のカラースキームを生成
   * https://m3.material.io/styles/color/advanced/define-new-colors
   * @returns ライトモード用とダークモード用のオブジェクト
   */
  private generateAdditionalColors() {
    return this.additions.reduce(
      (acc, cur) => {
        const additionalColor = cur.isHarmonize
          ? Blend.harmonize(argbFromHex(cur.color), this.sourceArgb)
          : argbFromHex(cur.color);
        const additionalHct = Hct.fromInt(additionalColor);
        const lightScheme = this.getScheme(additionalHct, false);
        const darkScheme = this.getScheme(additionalHct, true);
        const onAddition = `on${cur.name.charAt(0).toUpperCase() + cur.name.slice(1).toLowerCase()}`;
        const additionalRoles: {
          role: string;
          similar:
            | 'primary'
            | 'onPrimary'
            | 'primaryContainer'
            | 'onPrimaryContainer';
        }[] = [
          { role: cur.name, similar: 'primary' },
          { role: onAddition, similar: 'onPrimary' },
          { role: `${cur.name}Container`, similar: 'primaryContainer' },
          { role: `${onAddition}Container`, similar: 'onPrimaryContainer' },
        ];
        return additionalRoles.reduce((currentAcc, { role, similar }) => {
          const modifiedAcc = { ...currentAcc };
          modifiedAcc.light[role] = hexFromArgb(
            MaterialDynamicColors[similar].getArgb(lightScheme),
          );
          modifiedAcc.dark[role] = hexFromArgb(
            MaterialDynamicColors[similar].getArgb(darkScheme),
          );
          return modifiedAcc;
        }, acc);
      },
      { light: {}, dark: {} } as {
        light: Record<string, string>;
        dark: Record<string, string>;
      },
    );
  }

  /**
   * ベースラインのカラースキームと追加色のカラースキームを結合
   */
  get token() {
    const colors = this.generateBaselineColors();
    if (this.additions.length) {
      const additionalColors = this.generateAdditionalColors();
      colors.light = { ...colors.light, ...additionalColors.light };
      colors.dark = { ...colors.dark, ...additionalColors.dark };
    }
    return colors;
  }
}

const m3Colors = new M3Colors('#ff0000', [
  { name: 'success', color: '#0000ff', isHarmonize: true },
]);
console.log(m3Colors.token);

{
  light: {
    surface: '#fff8f6',
    surfaceContainer: '#fceae7',
    onSurface: '#231918',
    primary: '#904b40',
    primaryContainer: '#ffdad4',
    success: '#64558f',
    onSuccess: '#ffffff',
    successContainer: '#e8ddff',
    onSuccessContainer: '#1f1047'
  },
  dark: {
    surface: '#1a1110',
    surfaceContainer: '#271d1c',
    onSurface: '#f1dfdc',
    primary: '#ffb4a8',
    primaryContainer: '#73342a',
    success: '#cebdfe',
    onSuccess: '#35275e',
    successContainer: '#4c3e76',
    onSuccessContainer: '#e8ddff'
  }
}

constructor(
  // 他は省略
  scheme: Scheme = 'SchemeTonalSpot',
) {
  this.scheme = scheme;
}

// SchemeNeutralに変更する例
const m3Colors = new M3Colors('#ff0000', [], 'SchemeNeutral');

// 第4引数でコントラストレベルを変更します
const m3Colors = new M3Colors('#ff0000', [], 'SchemeTonalSpot', 0.5);

Blend.harmonize(argbFromHex(cur.color), this.sourceArgb);

// isHarmonizeをtrueにしているためsuccess系の色は調和します
const m3Colors = new M3Colors('#ff0000', [
  { name: 'success', color: '#0000ff', isHarmonize: true },
]);