- add content color to android schemes

- add content color to score
- add core palette public methods for all schemes
- add palette token set (applyTheme)
- add brightness suffix (applyTheme)

PiperOrigin-RevId: 454055065

Author: Material Eng

typescript/scheme/scheme.ts

@@ -163,7 +163,10 @@ export class Scheme {
     return Scheme.darkFromCorePalette(CorePalette.contentOf(argb));
   }
 
-  private static lightFromCorePalette(core: CorePalette): Scheme {
+  /**
+   * Light scheme from core palette
+   */
+  static lightFromCorePalette(core: CorePalette): Scheme {
     return new Scheme({
       primary: core.a1.tone(40),
       onPrimary: core.a1.tone(100),
@@ -195,7 +198,10 @@ export class Scheme {
     });
   }
 
-  private static darkFromCorePalette(core: CorePalette): Scheme {
+  /**
+   * Dark scheme from core palette
+   */
+  static darkFromCorePalette(core: CorePalette): Scheme {
     return new Scheme({
       primary: core.a1.tone(80),
       onPrimary: core.a1.tone(20),

typescript/scheme/scheme_android.ts

@@ -127,6 +127,40 @@ export class SchemeAndroid {
    */
   static light(argb: number): SchemeAndroid {
     const core = CorePalette.of(argb);
+    return SchemeAndroid.lightFromCorePalette(core);
+  }
+
+  /**
+   * @param argb ARGB representation of a color.
+   * @return Dark Material color scheme, based on the color's hue.
+   */
+  static dark(argb: number): SchemeAndroid {
+    const core = CorePalette.of(argb);
+    return SchemeAndroid.darkFromCorePalette(core);
+  }
+
+  /**
+   * @param argb ARGB representation of a color.
+   * @return Light Android color scheme, based on the color's hue.
+   */
+  static lightContent(argb: number): SchemeAndroid {
+    const core = CorePalette.contentOf(argb);
+    return SchemeAndroid.lightFromCorePalette(core);
+  }
+
+  /**
+   * @param argb ARGB representation of a color.
+   * @return Dark Android color scheme, based on the color's hue.
+   */
+  static darkContent(argb: number): SchemeAndroid {
+    const core = CorePalette.contentOf(argb);
+    return SchemeAndroid.darkFromCorePalette(core);
+  }
+
+  /**
+   * Light scheme from core palette
+   */
+  static lightFromCorePalette(core: CorePalette): SchemeAndroid {
     return new SchemeAndroid({
       colorAccentPrimary: core.a1.tone(90),
       colorAccentPrimaryVariant: core.a1.tone(40),
@@ -157,11 +191,9 @@ export class SchemeAndroid {
   }
 
   /**
-   * @param argb ARGB representation of a color.
-   * @return Dark Material color scheme, based on the color's hue.
+   * Dark scheme from core palette
    */
-  static dark(argb: number): SchemeAndroid {
-    const core = CorePalette.of(argb);
+  static darkFromCorePalette(core: CorePalette): SchemeAndroid {
     return new SchemeAndroid({
       colorAccentPrimary: core.a1.tone(90),
       colorAccentPrimaryVariant: core.a1.tone(70),
@@ -218,4 +250,8 @@ export class SchemeAndroid {
     volumeBackground: number,
     scrim: number
   }) {}
+
+  toJSON() {
+    return {...this.props};
+  }
 }

typescript/score/score.ts

@@ -50,7 +50,8 @@ export class Score {
    *     were not suitable for a theme, a default fallback color will be
    *     provided, Google Blue.
    */
-  static score(colorsToPopulation: Map<number, number>): number[] {
+  static score(colorsToPopulation: Map<number, number>, contentColor = false):
+      number[] {
     // Determine the total count of all colors.
     let populationSum = 0;
     for (const population of colorsToPopulation.values()) {
@@ -106,7 +107,9 @@ export class Score {
 
     // Remove colors that are unsuitable, ex. very dark or unchromatic colors.
     // Also, remove colors that are very similar in hue.
-    const filteredColors = Score.filter(colorsToExcitedProportion, colorsToCam);
+    const filteredColors = contentColor ?
+        Score.filterContent(colorsToCam) :
+        Score.filter(colorsToExcitedProportion, colorsToCam);
     const dedupedColorsToScore = new Map<number, number>();
     for (const color of filteredColors) {
       let duplicateHue = false;
@@ -156,4 +159,8 @@ export class Score {
     }
     return filtered;
   }
+
+  private static filterContent(colorsToCam: Map<number, Cam16>): number[] {
+    return Array.from(colorsToCam.keys());
+  }
 }

typescript/utils/theme_utils.ts

@@ -154,13 +154,38 @@ export function customColor(
 export function applyTheme(theme: Theme, options?: {
   dark?: boolean,
   target?: HTMLElement,
+  brightnessSuffix?: boolean,
+  paletteTones?: number[],
 }) {
   const target = options?.target || document.body;
   const isDark = options?.dark ?? false;
   const scheme = isDark ? theme.schemes.dark : theme.schemes.light;
+  setSchemeProperties(target, scheme);
+  if (options?.brightnessSuffix) {
+    setSchemeProperties(target, theme.schemes.dark, '-dark');
+    setSchemeProperties(target, theme.schemes.light, '-light');
+  }
+  if (options?.paletteTones) {
+    const tones = options?.paletteTones ?? [];
+    for (const [key, palette] of Object.entries(theme.palettes)) {
+      const paletteKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+      for (const tone of tones) {
+        const token = `--md-ref-palette-${paletteKey}-${paletteKey}${tone}`;
+        const color = hexFromArgb(palette.tone(tone));
+        target.style.setProperty(token, color);
+      }
+    }
+  }
+}
+
+function setSchemeProperties(
+    target: HTMLElement,
+    scheme: Scheme,
+    suffix: string = '',
+) {
   for (const [key, value] of Object.entries(scheme.toJSON())) {
-    const token = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    const token = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
     const color = hexFromArgb(value);
-    target.style.setProperty(`--md-sys-color-${token}`, color);
+    target.style.setProperty(`--md-sys-color-${token}${suffix}`, color);
   }
-}
+}