Update DynamicScheme API for TypeScript.

PiperOrigin-RevId: 621211598

make_schemes.md

@@ -304,6 +304,7 @@ Hct hct = materialDynamicColors.primary().getHct(scheme);
 ###### TypeScript
 
 ```typescript
+const argb = scheme.primary;
 const argb = MaterialDynamicColors.primary.getArgb(scheme);
 const hct = MaterialDynamicColors.primary.getHct(scheme);
 ```

typescript/dynamiccolor/dynamic_color.ts

@@ -18,10 +18,10 @@
 import {Contrast} from '../contrast/contrast.js';
 import {Hct} from '../hct/hct.js';
 import {TonalPalette} from '../palettes/tonal_palette.js';
-import {DynamicScheme} from '../scheme/dynamic_scheme.js';
 import * as math from '../utils/math_utils.js';
 
 import {ContrastCurve} from './contrast_curve.js';
+import {DynamicScheme} from './dynamic_scheme.js';
 import {ToneDeltaPair} from './tone_delta_pair.js';
 
 /**

typescript/dynamiccolor/dynamic_color_test.ts

@@ -21,7 +21,6 @@ import {Contrast} from '../contrast/contrast.js';
 import {ContrastCurve} from '../dynamiccolor/contrast_curve.js';
 import {MaterialDynamicColors} from '../dynamiccolor/material_dynamic_colors.js';
 import {Hct} from '../hct/hct.js';
-import {DynamicScheme} from '../scheme/dynamic_scheme.js';
 import {SchemeContent} from '../scheme/scheme_content.js';
 import {SchemeExpressive} from '../scheme/scheme_expressive.js';
 import {SchemeFidelity} from '../scheme/scheme_fidelity.js';
@@ -31,6 +30,8 @@ import {SchemeTonalSpot} from '../scheme/scheme_tonal_spot.js';
 import {SchemeVibrant} from '../scheme/scheme_vibrant.js';
 import * as colorUtils from '../utils/color_utils.js';
 
+import {DynamicScheme} from './dynamic_scheme.js';
+
 const seedColors = [
   Hct.fromInt(0xFFFF0000),
   Hct.fromInt(0xFFFFFF00),

typescript/scheme/dynamic_scheme.ts → typescript/dynamiccolor/dynamic_scheme.ts

@@ -19,6 +19,8 @@ import {Hct} from '../hct/hct.js';
 import {TonalPalette} from '../palettes/tonal_palette.js';
 import * as math from '../utils/math_utils.js';
 
+import {DynamicColor} from './dynamic_color.js';
+import {MaterialDynamicColors} from './material_dynamic_colors.js';
 import {Variant} from './variant.js';
 
 /**
@@ -171,4 +173,229 @@ export class DynamicScheme {
     // rotation found using the arrays.
     return sourceHue;
   }
-}
+
+
+  getArgb(dynamicColor: DynamicColor): number {
+    return dynamicColor.getArgb(this);
+  }
+
+  getHct(dynamicColor: DynamicColor): Hct {
+    return dynamicColor.getHct(this);
+  }
+
+  get primaryPaletteKeyColor(): number {
+    return this.getArgb(MaterialDynamicColors.primaryPaletteKeyColor);
+  }
+
+  get secondaryPaletteKeyColor(): number {
+    return this.getArgb(MaterialDynamicColors.secondaryPaletteKeyColor);
+  }
+
+  get tertiaryPaletteKeyColor(): number {
+    return this.getArgb(MaterialDynamicColors.tertiaryPaletteKeyColor);
+  }
+
+  get neutralPaletteKeyColor(): number {
+    return this.getArgb(MaterialDynamicColors.neutralPaletteKeyColor);
+  }
+
+  get neutralVariantPaletteKeyColor(): number {
+    return this.getArgb(MaterialDynamicColors.neutralVariantPaletteKeyColor);
+  }
+
+  get background(): number {
+    return this.getArgb(MaterialDynamicColors.background);
+  }
+
+  get onBackground(): number {
+    return this.getArgb(MaterialDynamicColors.onBackground);
+  }
+
+  get surface(): number {
+    return this.getArgb(MaterialDynamicColors.surface);
+  }
+
+  get surfaceDim(): number {
+    return this.getArgb(MaterialDynamicColors.surfaceDim);
+  }
+
+  get surfaceBright(): number {
+    return this.getArgb(MaterialDynamicColors.surfaceBright);
+  }
+
+  get surfaceContainerLowest(): number {
+    return this.getArgb(MaterialDynamicColors.surfaceContainerLowest);
+  }
+
+  get surfaceContainerLow(): number {
+    return this.getArgb(MaterialDynamicColors.surfaceContainerLow);
+  }
+
+  get surfaceContainer(): number {
+    return this.getArgb(MaterialDynamicColors.surfaceContainer);
+  }
+
+  get surfaceContainerHigh(): number {
+    return this.getArgb(MaterialDynamicColors.surfaceContainerHigh);
+  }
+
+  get surfaceContainerHighest(): number {
+    return this.getArgb(MaterialDynamicColors.surfaceContainerHighest);
+  }
+
+  get onSurface(): number {
+    return this.getArgb(MaterialDynamicColors.onSurface);
+  }
+
+  get surfaceVariant(): number {
+    return this.getArgb(MaterialDynamicColors.surfaceVariant);
+  }
+
+  get onSurfaceVariant(): number {
+    return this.getArgb(MaterialDynamicColors.onSurfaceVariant);
+  }
+
+  get inverseSurface(): number {
+    return this.getArgb(MaterialDynamicColors.inverseSurface);
+  }
+
+  get inverseOnSurface(): number {
+    return this.getArgb(MaterialDynamicColors.inverseOnSurface);
+  }
+
+  get outline(): number {
+    return this.getArgb(MaterialDynamicColors.outline);
+  }
+
+  get outlineVariant(): number {
+    return this.getArgb(MaterialDynamicColors.outlineVariant);
+  }
+
+  get shadow(): number {
+    return this.getArgb(MaterialDynamicColors.shadow);
+  }
+
+  get scrim(): number {
+    return this.getArgb(MaterialDynamicColors.scrim);
+  }
+
+  get surfaceTint(): number {
+    return this.getArgb(MaterialDynamicColors.surfaceTint);
+  }
+
+  get primary(): number {
+    return this.getArgb(MaterialDynamicColors.primary);
+  }
+
+  get onPrimary(): number {
+    return this.getArgb(MaterialDynamicColors.onPrimary);
+  }
+
+  get primaryContainer(): number {
+    return this.getArgb(MaterialDynamicColors.primaryContainer);
+  }
+
+  get onPrimaryContainer(): number {
+    return this.getArgb(MaterialDynamicColors.onPrimaryContainer);
+  }
+
+  get inversePrimary(): number {
+    return this.getArgb(MaterialDynamicColors.inversePrimary);
+  }
+
+  get secondary(): number {
+    return this.getArgb(MaterialDynamicColors.secondary);
+  }
+
+  get onSecondary(): number {
+    return this.getArgb(MaterialDynamicColors.onSecondary);
+  }
+
+  get secondaryContainer(): number {
+    return this.getArgb(MaterialDynamicColors.secondaryContainer);
+  }
+
+  get onSecondaryContainer(): number {
+    return this.getArgb(MaterialDynamicColors.onSecondaryContainer);
+  }
+
+  get tertiary(): number {
+    return this.getArgb(MaterialDynamicColors.tertiary);
+  }
+
+  get onTertiary(): number {
+    return this.getArgb(MaterialDynamicColors.onTertiary);
+  }
+
+  get tertiaryContainer(): number {
+    return this.getArgb(MaterialDynamicColors.tertiaryContainer);
+  }
+
+  get onTertiaryContainer(): number {
+    return this.getArgb(MaterialDynamicColors.onTertiaryContainer);
+  }
+
+  get error(): number {
+    return this.getArgb(MaterialDynamicColors.error);
+  }
+
+  get onError(): number {
+    return this.getArgb(MaterialDynamicColors.onError);
+  }
+
+  get errorContainer(): number {
+    return this.getArgb(MaterialDynamicColors.errorContainer);
+  }
+
+  get onErrorContainer(): number {
+    return this.getArgb(MaterialDynamicColors.onErrorContainer);
+  }
+
+  get primaryFixed(): number {
+    return this.getArgb(MaterialDynamicColors.primaryFixed);
+  }
+
+  get primaryFixedDim(): number {
+    return this.getArgb(MaterialDynamicColors.primaryFixedDim);
+  }
+
+  get onPrimaryFixed(): number {
+    return this.getArgb(MaterialDynamicColors.onPrimaryFixed);
+  }
+
+  get onPrimaryFixedVariant(): number {
+    return this.getArgb(MaterialDynamicColors.onPrimaryFixedVariant);
+  }
+
+  get secondaryFixed(): number {
+    return this.getArgb(MaterialDynamicColors.secondaryFixed);
+  }
+
+  get secondaryFixedDim(): number {
+    return this.getArgb(MaterialDynamicColors.secondaryFixedDim);
+  }
+
+  get onSecondaryFixed(): number {
+    return this.getArgb(MaterialDynamicColors.onSecondaryFixed);
+  }
+
+  get onSecondaryFixedVariant(): number {
+    return this.getArgb(MaterialDynamicColors.onSecondaryFixedVariant);
+  }
+
+  get tertiaryFixed(): number {
+    return this.getArgb(MaterialDynamicColors.tertiaryFixed);
+  }
+
+  get tertiaryFixedDim(): number {
+    return this.getArgb(MaterialDynamicColors.tertiaryFixedDim);
+  }
+
+  get onTertiaryFixed(): number {
+    return this.getArgb(MaterialDynamicColors.onTertiaryFixed);
+  }
+
+  get onTertiaryFixedVariant(): number {
+    return this.getArgb(MaterialDynamicColors.onTertiaryFixedVariant);
+  }
+}

typescript/dynamiccolor/fixed_dynamic_color_test.ts

@@ -57,6 +57,27 @@ describe('fixed colors', () => {
         .toBeCloseTo(30.0, 0);
   });
 
+  it('fixed ARGB colors in non-monochrome schemes', () => {
+    const scheme = new SchemeTonalSpot(
+        Hct.fromInt(0xFFFF0000),
+        true,
+        0.0,
+    );
+
+    expect(scheme.primaryFixed).toBe(0xFFFFDAD4);
+    expect(scheme.primaryFixedDim).toBe(0xFFFFB4A8);
+    expect(scheme.onPrimaryFixed).toBe(0xFF3A0905);
+    expect(scheme.onPrimaryFixedVariant).toBe(0xFF73342A);
+    expect(scheme.secondaryFixed).toBe(0xFFFFDAD4);
+    expect(scheme.secondaryFixedDim).toBe(0xFFE7BDB6);
+    expect(scheme.onSecondaryFixed).toBe(0xFF2C1512);
+    expect(scheme.onSecondaryFixedVariant).toBe(0xFF5D3F3B);
+    expect(scheme.tertiaryFixed).toBe(0xFFFBDFA6);
+    expect(scheme.tertiaryFixedDim).toBe(0xFFDEC48C);
+    expect(scheme.onTertiaryFixed).toBe(0xFF251A00);
+    expect(scheme.onTertiaryFixedVariant).toBe(0xFF564419);
+  });
+
   it('fixed colors in light monochrome schemes', () => {
     const scheme = new SchemeMonochrome(
         Hct.fromInt(0xFFFF0000),

typescript/dynamiccolor/material_dynamic_colors.ts

@@ -17,12 +17,12 @@
 
 import {DislikeAnalyzer} from '../dislike/dislike_analyzer.js';
 import {Hct} from '../hct/hct.js';
-import {DynamicScheme} from '../scheme/dynamic_scheme.js';
-import {Variant} from '../scheme/variant.js';
 
 import {ContrastCurve} from './contrast_curve.js';
 import {DynamicColor} from './dynamic_color.js';
+import {DynamicScheme} from './dynamic_scheme.js';
 import {ToneDeltaPair} from './tone_delta_pair.js';
+import {Variant} from './variant.js';
 
 function isFidelity(scheme: DynamicScheme): boolean {
   return scheme.variant === Variant.FIDELITY ||

typescript/index.ts

@@ -19,6 +19,7 @@ export * from './blend/blend.js';
 export * from './contrast/contrast.js';
 export * from './dislike/dislike_analyzer.js';
 export * from './dynamiccolor/dynamic_color.js';
+export * from './dynamiccolor/dynamic_scheme.js';
 export * from './dynamiccolor/material_dynamic_colors.js';
 export * from './hct/cam16.js';
 export * from './hct/hct.js';
@@ -29,7 +30,6 @@ export * from './quantize/quantizer_celebi.js';
 export * from './quantize/quantizer_map.js';
 export * from './quantize/quantizer_wsmeans.js';
 export * from './quantize/quantizer_wu.js';
-export * from './scheme/dynamic_scheme.js';
 export * from './scheme/scheme.js';
 export * from './scheme/scheme_android.js';
 export * from './scheme/scheme_content.js';

typescript/scheme/dynamic_scheme_test.ts

@@ -17,7 +17,7 @@
 
 import 'jasmine';
 
-import {DynamicScheme} from './dynamic_scheme.js';
+import {DynamicScheme} from '../dynamiccolor/dynamic_scheme.js';
 import {Hct} from '../hct/hct.js';
 
 describe('dynamic scheme test', () => {

typescript/scheme/scheme.ts

@@ -20,6 +20,11 @@
 import {CorePalette} from '../palettes/core_palette.js';
 
 /**
+ * DEPRECATED. The `Scheme` class is deprecated in favor of `DynamicScheme`.
+ * Please see
+ * https://github.com/material-foundation/material-color-utilities/blob/main/make_schemes.md
+ * for migration guidance.
+ *
  * Represents a Material color scheme, a mapping of color roles to colors.
  */
 export class Scheme {

typescript/scheme/scheme_content.ts

@@ -16,13 +16,12 @@
  */
 
 import {DislikeAnalyzer} from '../dislike/dislike_analyzer.js';
+import {DynamicScheme} from '../dynamiccolor/dynamic_scheme.js';
+import {Variant} from '../dynamiccolor/variant.js';
 import {Hct} from '../hct/hct.js';
 import {TonalPalette} from '../palettes/tonal_palette.js';
 import {TemperatureCache} from '../temperature/temperature_cache.js';
 
-import {DynamicScheme} from './dynamic_scheme.js';
-import {Variant} from './variant.js';
-
 /**
  * A scheme that places the source color in `Scheme.primaryContainer`.
  *

typescript/scheme/scheme_expressive.ts

@@ -15,13 +15,12 @@
  * limitations under the License.
  */
 
+import {DynamicScheme} from '../dynamiccolor/dynamic_scheme.js';
+import {Variant} from '../dynamiccolor/variant.js';
 import {Hct} from '../hct/hct.js';
 import {TonalPalette} from '../palettes/tonal_palette.js';
 import * as math from '../utils/math_utils.js';
 
-import {DynamicScheme} from './dynamic_scheme.js';
-import {Variant} from './variant.js';
-
 /**
  * A Dynamic Color theme that is intentionally detached from the source color.
  */