@materialx/material-color-utilities
Version:
Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and creating tones of colors; all in a new color space.
1,217 lines • 90.3 kB
TypeScript
//#region ../../../node_modules/@material/material-color-utilities/dist/index.d.ts
//#region src/blend/blend.d.ts
/**
* @license
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Functions for blending in HCT and CAM16.
*/
declare class Blend {
/**
* Blend the design color's HCT hue towards the key color's HCT
* hue, in a way that leaves the original color recognizable and
* recognizably shifted towards the key color.
*
* @param designColor ARGB representation of an arbitrary color.
* @param sourceColor ARGB representation of the main theme color.
* @return The design color with a hue shifted towards the
* system's color, a slightly warmer/cooler variant of the design
* color's hue.
*/
static harmonize(designColor: number, sourceColor: number): number;
/**
* Blends hue from one color into another. The chroma and tone of
* the original color are maintained.
*
* @param from ARGB representation of color
* @param to ARGB representation of color
* @param amount how much blending to perform; 0.0 >= and <= 1.0
* @return from, with a hue blended towards to. Chroma and tone
* are constant.
*/
static hctHue(from: number, to: number, amount: number): number;
/**
* Blend in CAM16-UCS space.
*
* @param from ARGB representation of color
* @param to ARGB representation of color
* @param amount how much blending to perform; 0.0 >= and <= 1.0
* @return from, blended towards to. Hue, chroma, and tone will
* change.
*/
static cam16Ucs(from: number, to: number, amount: number): number;
}
//#endregion
//#region src/contrast/contrast.d.ts
/**
* @license
* Copyright 2022 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Utility methods for calculating contrast given two colors, or calculating a
* color given one color and a contrast ratio.
*
* Contrast ratio is calculated using XYZ's Y. When linearized to match human
* perception, Y becomes HCT's tone and L*a*b*'s' L*. Informally, this is the
* lightness of a color.
*
* Methods refer to tone, T in the the HCT color space.
* Tone is equivalent to L* in the L*a*b* color space, or L in the LCH color
* space.
*/
declare class Contrast {
/**
* Returns a contrast ratio, which ranges from 1 to 21.
*
* @param toneA Tone between 0 and 100. Values outside will be clamped.
* @param toneB Tone between 0 and 100. Values outside will be clamped.
*/
static ratioOfTones(toneA: number, toneB: number): number;
static ratioOfYs(y1: number, y2: number): number;
/**
* Returns a tone >= tone parameter that ensures ratio parameter.
* Return value is between 0 and 100.
* Returns -1 if ratio cannot be achieved with tone parameter.
*
* @param tone Tone return value must contrast with.
* Range is 0 to 100. Invalid values will result in -1 being returned.
* @param ratio Contrast ratio of return value and tone.
* Range is 1 to 21, invalid values have undefined behavior.
*/
static lighter(tone: number, ratio: number): number;
/**
* Returns a tone <= tone parameter that ensures ratio parameter.
* Return value is between 0 and 100.
* Returns -1 if ratio cannot be achieved with tone parameter.
*
* @param tone Tone return value must contrast with.
* Range is 0 to 100. Invalid values will result in -1 being returned.
* @param ratio Contrast ratio of return value and tone.
* Range is 1 to 21, invalid values have undefined behavior.
*/
static darker(tone: number, ratio: number): number;
/**
* Returns a tone >= tone parameter that ensures ratio parameter.
* Return value is between 0 and 100.
* Returns 100 if ratio cannot be achieved with tone parameter.
*
* This method is unsafe because the returned value is guaranteed to be in
* bounds for tone, i.e. between 0 and 100. However, that value may not reach
* the ratio with tone. For example, there is no color lighter than T100.
*
* @param tone Tone return value must contrast with.
* Range is 0 to 100. Invalid values will result in 100 being returned.
* @param ratio Desired contrast ratio of return value and tone parameter.
* Range is 1 to 21, invalid values have undefined behavior.
*/
static lighterUnsafe(tone: number, ratio: number): number;
/**
* Returns a tone >= tone parameter that ensures ratio parameter.
* Return value is between 0 and 100.
* Returns 100 if ratio cannot be achieved with tone parameter.
*
* This method is unsafe because the returned value is guaranteed to be in
* bounds for tone, i.e. between 0 and 100. However, that value may not reach
* the [ratio with [tone]. For example, there is no color darker than T0.
*
* @param tone Tone return value must contrast with.
* Range is 0 to 100. Invalid values will result in 0 being returned.
* @param ratio Desired contrast ratio of return value and tone parameter.
* Range is 1 to 21, invalid values have undefined behavior.
*/
static darkerUnsafe(tone: number, ratio: number): number;
}
//#endregion
//#region src/hct/viewing_conditions.d.ts
/**
* @license
* Copyright 2021 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* In traditional color spaces, a color can be identified solely by the
* observer's measurement of the color. Color appearance models such as CAM16
* also use information about the environment where the color was
* observed, known as the viewing conditions.
*
* For example, white under the traditional assumption of a midday sun white
* point is accurately measured as a slightly chromatic blue by CAM16. (roughly,
* hue 203, chroma 3, lightness 100)
*
* This class caches intermediate values of the CAM16 conversion process that
* depend only on viewing conditions, enabling speed ups.
*/
declare class ViewingConditions {
n: number;
aw: number;
nbb: number;
ncb: number;
c: number;
nc: number;
rgbD: number[];
fl: number;
fLRoot: number;
z: number;
/** sRGB-like viewing conditions. */
static DEFAULT: ViewingConditions;
/**
* Create ViewingConditions from a simple, physically relevant, set of
* parameters.
*
* @param whitePoint White point, measured in the XYZ color space.
* default = D65, or sunny day afternoon
* @param adaptingLuminance The luminance of the adapting field. Informally,
* how bright it is in the room where the color is viewed. Can be
* calculated from lux by multiplying lux by 0.0586. default = 11.72,
* or 200 lux.
* @param backgroundLstar The lightness of the area surrounding the color.
* measured by L* in L*a*b*. default = 50.0
* @param surround A general description of the lighting surrounding the
* color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
* dimly light room, like watching TV at home at night. 2.0 means there
* is no difference between the lighting on the color and around it.
* default = 2.0
* @param discountingIlluminant Whether the eye accounts for the tint of the
* ambient lighting, such as knowing an apple is still red in green light.
* default = false, the eye does not perform this process on
* self-luminous objects like displays.
*/
static make(whitePoint?: number[], adaptingLuminance?: number, backgroundLstar?: number, surround?: number, discountingIlluminant?: boolean): ViewingConditions;
/**
* Parameters are intermediate values of the CAM16 conversion process. Their
* names are shorthand for technical color science terminology, this class
* would not benefit from documenting them individually. A brief overview
* is available in the CAM16 specification, and a complete overview requires
* a color science textbook, such as Fairchild's Color Appearance Models.
*/
private constructor();
}
//#endregion
//#region src/hct/hct.d.ts
/**
* HCT, hue, chroma, and tone. A color system that provides a perceptually
* accurate color measurement system that can also accurately render what colors
* will appear as in different lighting environments.
*/
declare class Hct {
private argb;
/**
* @param hue 0 <= hue < 360; invalid values are corrected.
* @param chroma 0 <= chroma < ?; Informally, colorfulness. The color
* returned may be lower than the requested chroma. Chroma has a different
* maximum for any given hue and tone.
* @param tone 0 <= tone <= 100; invalid values are corrected.
* @return HCT representation of a color in default viewing conditions.
*/
internalHue: number;
internalChroma: number;
internalTone: number;
static from(hue: number, chroma: number, tone: number): Hct;
/**
* @param argb ARGB representation of a color.
* @return HCT representation of a color in default viewing conditions
*/
static fromInt(argb: number): Hct;
toInt(): number;
/**
* A number, in degrees, representing ex. red, orange, yellow, etc.
* Ranges from 0 <= hue < 360.
*/
get hue(): number;
/**
* @param newHue 0 <= newHue < 360; invalid values are corrected.
* Chroma may decrease because chroma has a different maximum for any given
* hue and tone.
*/
set hue(newHue: number);
get chroma(): number;
/**
* @param newChroma 0 <= newChroma < ?
* Chroma may decrease because chroma has a different maximum for any given
* hue and tone.
*/
set chroma(newChroma: number);
/** Lightness. Ranges from 0 to 100. */
get tone(): number;
/**
* @param newTone 0 <= newTone <= 100; invalid valids are corrected.
* Chroma may decrease because chroma has a different maximum for any given
* hue and tone.
*/
set tone(newTone: number);
/** Sets a property of the Hct object. */
setValue(propertyName: string, value: number): void;
toString(): string;
static isBlue(hue: number): boolean;
static isYellow(hue: number): boolean;
static isCyan(hue: number): boolean;
private constructor();
private setInternalState;
/**
* Translates a color into different [ViewingConditions].
*
* Colors change appearance. They look different with lights on versus off,
* the same color, as in hex code, on white looks different when on black.
* This is called color relativity, most famously explicated by Josef Albers
* in Interaction of Color.
*
* In color science, color appearance models can account for this and
* calculate the appearance of a color in different settings. HCT is based on
* CAM16, a color appearance model, and uses it to make these calculations.
*
* See [ViewingConditions.make] for parameters affecting color appearance.
*/
inViewingConditions(vc: ViewingConditions): Hct;
}
//#endregion
//#region src/dislike/dislike_analyzer.d.ts
/**
* Check and/or fix universally disliked colors.
* Color science studies of color preference indicate universal distaste for
* dark yellow-greens, and also show this is correlated to distate for
* biological waste and rotting food.
*
* See Palmer and Schloss, 2010 or Schloss and Palmer's Chapter 21 in Handbook
* of Color Psychology (2015).
*/
declare class DislikeAnalyzer {
/**
* Returns true if a color is disliked.
*
* @param hct A color to be judged.
* @return Whether the color is disliked.
*
* Disliked is defined as a dark yellow-green that is not neutral.
*/
static isDisliked(hct: Hct): boolean;
/**
* If a color is disliked, lighten it to make it likable.
*
* @param hct A color to be judged.
* @return A new color if the original color is disliked, or the original
* color if it is acceptable.
*/
static fixIfDisliked(hct: Hct): Hct;
}
//#endregion
//#region src/palettes/tonal_palette.d.ts
/**
* A convenience class for retrieving colors that are constant in hue and
* chroma, but vary in tone.
*/
declare class TonalPalette {
readonly hue: number;
readonly chroma: number;
readonly keyColor: Hct;
private readonly cache;
/**
* @param argb ARGB representation of a color
* @return Tones matching that color's hue and chroma.
*/
static fromInt(argb: number): TonalPalette;
/**
* @param hct Hct
* @return Tones matching that color's hue and chroma.
*/
static fromHct(hct: Hct): TonalPalette;
/**
* @param hue HCT hue
* @param chroma HCT chroma
* @return Tones matching hue and chroma.
*/
static fromHueAndChroma(hue: number, chroma: number): TonalPalette;
private constructor();
/**
* @param tone HCT tone, measured from 0 to 100.
* @return ARGB representation of a color with that tone.
*/
tone(tone: number): number;
/**
* @param tone HCT tone.
* @return HCT representation of a color with that tone.
*/
getHct(tone: number): Hct;
private averageArgb;
}
//#endregion
//#region src/dynamiccolor/contrast_curve.d.ts
/**
* @license
* Copyright 2023 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* A class containing a value that changes with the contrast level.
*
* Usually represents the contrast requirements for a dynamic color on its
* background. The four values correspond to values for contrast levels -1.0,
* 0.0, 0.5, and 1.0, respectively.
*/
declare class ContrastCurve {
readonly low: number;
readonly normal: number;
readonly medium: number;
readonly high: number;
/**
* Creates a `ContrastCurve` object.
*
* @param low Value for contrast level -1.0
* @param normal Value for contrast level 0.0
* @param medium Value for contrast level 0.5
* @param high Value for contrast level 1.0
*/
constructor(low: number, normal: number, medium: number, high: number);
/**
* Returns the value at a given contrast level.
*
* @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0
* is the lowest; 1.0 is the highest.
* @return The value. For contrast ratios, a number between 1.0 and 21.0.
*/
get(contrastLevel: number): number;
}
//#endregion
//#region src/dynamiccolor/material_dynamic_colors.d.ts
/**
* DynamicColors for the colors in the Material Design system.
*/
declare class MaterialDynamicColors {
static contentAccentToneDelta: number;
private static readonly colorSpec;
highestSurface(s: DynamicScheme): DynamicColor;
primaryPaletteKeyColor(): DynamicColor;
secondaryPaletteKeyColor(): DynamicColor;
tertiaryPaletteKeyColor(): DynamicColor;
neutralPaletteKeyColor(): DynamicColor;
neutralVariantPaletteKeyColor(): DynamicColor;
errorPaletteKeyColor(): DynamicColor;
background(): DynamicColor;
onBackground(): DynamicColor;
surface(): DynamicColor;
surfaceDim(): DynamicColor;
surfaceBright(): DynamicColor;
surfaceContainerLowest(): DynamicColor;
surfaceContainerLow(): DynamicColor;
surfaceContainer(): DynamicColor;
surfaceContainerHigh(): DynamicColor;
surfaceContainerHighest(): DynamicColor;
onSurface(): DynamicColor;
surfaceVariant(): DynamicColor;
onSurfaceVariant(): DynamicColor;
outline(): DynamicColor;
outlineVariant(): DynamicColor;
inverseSurface(): DynamicColor;
inverseOnSurface(): DynamicColor;
shadow(): DynamicColor;
scrim(): DynamicColor;
surfaceTint(): DynamicColor;
primary(): DynamicColor;
primaryDim(): DynamicColor;
onPrimary(): DynamicColor;
primaryContainer(): DynamicColor;
onPrimaryContainer(): DynamicColor;
inversePrimary(): DynamicColor;
primaryFixed(): DynamicColor;
primaryFixedDim(): DynamicColor;
onPrimaryFixed(): DynamicColor;
onPrimaryFixedVariant(): DynamicColor;
secondary(): DynamicColor;
secondaryDim(): DynamicColor;
onSecondary(): DynamicColor;
secondaryContainer(): DynamicColor;
onSecondaryContainer(): DynamicColor;
secondaryFixed(): DynamicColor;
secondaryFixedDim(): DynamicColor;
onSecondaryFixed(): DynamicColor;
onSecondaryFixedVariant(): DynamicColor;
tertiary(): DynamicColor;
tertiaryDim(): DynamicColor;
onTertiary(): DynamicColor;
tertiaryContainer(): DynamicColor;
onTertiaryContainer(): DynamicColor;
tertiaryFixed(): DynamicColor;
tertiaryFixedDim(): DynamicColor;
onTertiaryFixed(): DynamicColor;
onTertiaryFixedVariant(): DynamicColor;
error(): DynamicColor;
errorDim(): DynamicColor;
onError(): DynamicColor;
errorContainer(): DynamicColor;
onErrorContainer(): DynamicColor;
allDynamicColors: DynamicColor[];
/** @deprecated Use highestSurface() instead. */
static highestSurface(s: DynamicScheme): DynamicColor;
/** @deprecated Use primaryPaletteKeyColor() instead. */
static primaryPaletteKeyColor: DynamicColor;
/** @deprecated Use secondaryPaletteKeyColor() instead. */
static secondaryPaletteKeyColor: DynamicColor;
/** @deprecated Use tertiaryPaletteKeyColor() instead. */
static tertiaryPaletteKeyColor: DynamicColor;
/** @deprecated Use neutralPaletteKeyColor() instead. */
static neutralPaletteKeyColor: DynamicColor;
/** @deprecated Use neutralVariantPaletteKeyColor() instead. */
static neutralVariantPaletteKeyColor: DynamicColor;
/** @deprecated Use background() instead. */
static background: DynamicColor;
/** @deprecated Use background() instead. */
static onBackground: DynamicColor;
/** @deprecated Use surface() instead. */
static surface: DynamicColor;
/** @deprecated Use surfaceDim() instead. */
static surfaceDim: DynamicColor;
/** @deprecated Use surfaceBright() instead. */
static surfaceBright: DynamicColor;
/** @deprecated Use surfaceContainerLowest() instead. */
static surfaceContainerLowest: DynamicColor;
/** @deprecated Use surfaceContainerLow() instead. */
static surfaceContainerLow: DynamicColor;
/** @deprecated Use surfaceContainer() instead. */
static surfaceContainer: DynamicColor;
/** @deprecated Use surfaceContainerHigh() instead. */
static surfaceContainerHigh: DynamicColor;
/** @deprecated Use surfaceContainerHighest() instead. */
static surfaceContainerHighest: DynamicColor;
/** @deprecated Use onSurface() instead. */
static onSurface: DynamicColor;
/** @deprecated Use surfaceVariant() instead. */
static surfaceVariant: DynamicColor;
/** @deprecated Use onSurfaceVariant() instead. */
static onSurfaceVariant: DynamicColor;
/** @deprecated Use inverseSurface() instead. */
static inverseSurface: DynamicColor;
/** @deprecated Use inverseOnSurface() instead. */
static inverseOnSurface: DynamicColor;
/** @deprecated Use outline() instead. */
static outline: DynamicColor;
/** @deprecated Use outlineVariant() instead. */
static outlineVariant: DynamicColor;
/** @deprecated Use shadow() instead. */
static shadow: DynamicColor;
/** @deprecated Use scrim() instead. */
static scrim: DynamicColor;
/** @deprecated Use surfaceTint() instead. */
static surfaceTint: DynamicColor;
/** @deprecated Use primary() instead. */
static primary: DynamicColor;
/** @deprecated Use onPrimary() instead. */
static onPrimary: DynamicColor;
/** @deprecated Use primaryContainer() instead. */
static primaryContainer: DynamicColor;
/** @deprecated Use onPrimaryContainer() instead. */
static onPrimaryContainer: DynamicColor;
/** @deprecated Use inversePrimary() instead. */
static inversePrimary: DynamicColor;
/** @deprecated Use secondary() instead. */
static secondary: DynamicColor;
/** @deprecated Use onSecondary() instead. */
static onSecondary: DynamicColor;
/** @deprecated Use secondaryContainer() instead. */
static secondaryContainer: DynamicColor;
/** @deprecated Use onSecondaryContainer() instead. */
static onSecondaryContainer: DynamicColor;
/** @deprecated Use tertiary() instead. */
static tertiary: DynamicColor;
/** @deprecated Use onTertiary() instead. */
static onTertiary: DynamicColor;
/** @deprecated Use tertiaryContainer() instead. */
static tertiaryContainer: DynamicColor;
/** @deprecated Use onTertiaryContainer() instead. */
static onTertiaryContainer: DynamicColor;
/** @deprecated Use error() instead. */
static error: DynamicColor;
/** @deprecated Use onError() instead. */
static onError: DynamicColor;
/** @deprecated Use errorContainer() instead. */
static errorContainer: DynamicColor;
/** @deprecated Use onErrorContainer() instead. */
static onErrorContainer: DynamicColor;
/** @deprecated Use primaryFixed() instead. */
static primaryFixed: DynamicColor;
/** @deprecated Use primaryFixedDim() instead. */
static primaryFixedDim: DynamicColor;
/** @deprecated Use onPrimaryFixed() instead. */
static onPrimaryFixed: DynamicColor;
/** @deprecated Use onPrimaryFixedVariant() instead. */
static onPrimaryFixedVariant: DynamicColor;
/** @deprecated Use secondaryFixed() instead. */
static secondaryFixed: DynamicColor;
/** @deprecated Use secondaryFixedDim() instead. */
static secondaryFixedDim: DynamicColor;
/** @deprecated Use onSecondaryFixed() instead. */
static onSecondaryFixed: DynamicColor;
/** @deprecated Use onSecondaryFixedVariant() instead. */
static onSecondaryFixedVariant: DynamicColor;
/** @deprecated Use tertiaryFixed() instead. */
static tertiaryFixed: DynamicColor;
/** @deprecated Use tertiaryFixedDim() instead. */
static tertiaryFixedDim: DynamicColor;
/** @deprecated Use onTertiaryFixed() instead. */
static onTertiaryFixed: DynamicColor;
/** @deprecated Use onTertiaryFixedVariant() instead. */
static onTertiaryFixedVariant: DynamicColor;
}
//#endregion
//#region src/dynamiccolor/variant.d.ts
/**
* @license
* Copyright 2022 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* Set of themes supported by Dynamic Color.
* Instantiate the corresponding subclass, ex. SchemeTonalSpot, to create
* colors corresponding to the theme.
*/
declare enum Variant {
MONOCHROME = 0,
NEUTRAL = 1,
TONAL_SPOT = 2,
VIBRANT = 3,
EXPRESSIVE = 4,
FIDELITY = 5,
CONTENT = 6,
RAINBOW = 7,
FRUIT_SALAD = 8,
}
//#endregion
//#region src/dynamiccolor/spec_version.d.ts
declare enum SpecVersion {
SPEC_2021 = "2021",
SPEC_2025 = "2025",
}
//#endregion
//#region src/dynamiccolor/platform.d.ts
/**
* The platform on which this scheme is intended to be used. Only used in the
* 2025 spec.
*/
declare enum Platform {
PHONE = 0,
WATCH = 1,
}
//#endregion
//#region src/dynamiccolor/dynamic_scheme.d.ts
/**
* @param sourceColorArgb The source color of the theme as an ARGB 32-bit
* integer.
* @param variant The variant, or style, of the theme.
* @param contrastLevel Value from -1 to 1. -1 represents minimum contrast, 0
* represents standard (i.e. the design as spec'd), and 1 represents maximum
* contrast.
* @param isDark Whether the scheme is in dark mode or light mode.
* @param platform The platform on which this scheme is intended to be used.
* @param specVersion The version of the design spec that this scheme is based
* on.
* @param primaryPalette Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually
* colorful.
* @param secondaryPalette Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually
* less colorful.
* @param tertiaryPalette Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually a
* different hue from primary and colorful.
* @param neutralPalette Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually
* not colorful at all, intended for background & surface colors.
* @param neutralVariantPalette Given a tone, produces a color. Hue and chroma
* of the color are specified in the design specification of the variant.
* Usually not colorful, but slightly more colorful than Neutral. Intended
* for backgrounds & surfaces.
*/
interface DynamicSchemeOptions {
sourceColorHct: Hct;
variant: Variant;
isDark: boolean;
contrastLevel?: number;
platform?: Platform;
specVersion?: SpecVersion;
primaryPalette?: TonalPalette;
secondaryPalette?: TonalPalette;
tertiaryPalette?: TonalPalette;
neutralPalette?: TonalPalette;
neutralVariantPalette?: TonalPalette;
errorPalette?: TonalPalette;
}
/**
* @param sourceColorArgb The source color of the theme as an ARGB 32-bit
* integer.
* @param variant The variant, or style, of the theme.
* @param contrastLevel Value from -1 to 1. -1 represents minimum contrast, 0
* represents standard (i.e. the design as spec'd), and 1 represents maximum
* contrast.
* @param isDark Whether the scheme is in dark mode or light mode.
* @param platform The platform on which this scheme is intended to be used.
* @param specVersion The version of the design spec that this scheme is based
* on.
* @param primaryPalette Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually
* colorful.
* @param secondaryPalette Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually
* less colorful.
* @param tertiaryPalette Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually a
* different hue from primary and colorful.
* @param neutralPalette Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually
* not colorful at all, intended for background & surface colors.
* @param neutralVariantPalette Given a tone, produces a color. Hue and chroma
* of the color are specified in the design specification of the variant.
* Usually not colorful, but slightly more colorful than Neutral. Intended
* for backgrounds & surfaces.
*/
type DynamicSchemeFromOptions = DynamicSchemeRoles & {
sourceColorHct?: Hct;
contrastLevel?: number;
isDark: boolean;
variant?: Variant;
platform?: Platform;
specVersion?: SpecVersion;
};
type DynamicSchemeColorRole<ColorRoleName extends string, PaletteName extends string = `${ColorRoleName}Palette`, PaletteKeyColorname extends string = `${PaletteName}KeyColor`> = ({ [K in PaletteKeyColorname]?: undefined } & { [K in PaletteName]?: TonalPalette }) | ({ [K in PaletteName]?: undefined } & { [K in PaletteKeyColorname]?: Hct });
type DynamicSchemeRoles = DynamicSchemeColorRole<"primary"> & DynamicSchemeColorRole<"secondary"> & DynamicSchemeColorRole<"tertiary"> & DynamicSchemeColorRole<"neutral"> & DynamicSchemeColorRole<"neutralVariant"> & DynamicSchemeColorRole<"error">;
/**
* Constructed by a set of values representing the current UI state (such as
* whether or not its dark theme, what the theme style is, etc.), and
* provides a set of TonalPalettes that can create colors that fit in
* with the theme style. Used by DynamicColor to resolve into a color.
*/
declare class DynamicScheme {
static readonly DEFAULT_SPEC_VERSION: SpecVersion;
static readonly DEFAULT_PLATFORM: Platform;
/**
* The source color of the theme as an HCT color.
*/
readonly sourceColorHct: Hct;
/** The source color of the theme as an ARGB 32-bit integer. */
readonly sourceColorArgb: number;
/** The variant, or style, of the theme. */
readonly variant: Variant;
/**
* Value from -1 to 1. -1 represents minimum contrast. 0 represents standard
* (i.e. the design as spec'd), and 1 represents maximum contrast.
*/
readonly contrastLevel: number;
/** Whether the scheme is in dark mode or light mode. */
readonly isDark: boolean;
/** The platform on which this scheme is intended to be used. */
readonly platform: Platform;
/** The version of the design spec that this scheme is based on. */
readonly specVersion: SpecVersion;
/**
* Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually
* colorful.
*/
readonly primaryPalette: TonalPalette;
/**
* Given a tone, produces a color. Hue and chroma of
* the color are specified in the design specification of the variant. Usually
* less colorful.
*/
readonly secondaryPalette: TonalPalette;
/**
* Given a tone, produces a color. Hue and chroma of
* the color are specified in the design specification of the variant. Usually
* a different hue from primary and colorful.
*/
readonly tertiaryPalette: TonalPalette;
/**
* Given a tone, produces a color. Hue and chroma of the
* color are specified in the design specification of the variant. Usually not
* colorful at all, intended for background & surface colors.
*/
readonly neutralPalette: TonalPalette;
/**
* Given a tone, produces a color. Hue and chroma
* of the color are specified in the design specification of the variant.
* Usually not colorful, but slightly more colorful than Neutral. Intended for
* backgrounds & surfaces.
*/
readonly neutralVariantPalette: TonalPalette;
/**
* Given a tone, produces a reddish, colorful, color.
*/
readonly errorPalette: TonalPalette;
readonly colors: MaterialDynamicColors;
constructor({
sourceColorHct,
isDark,
contrastLevel,
variant,
specVersion,
platform,
primaryPalette,
secondaryPalette,
tertiaryPalette,
neutralPalette,
neutralVariantPalette,
errorPalette
}: DynamicSchemeOptions);
static from({
sourceColorHct,
isDark,
contrastLevel,
variant,
specVersion,
platform,
primaryPalette,
secondaryPalette,
tertiaryPalette,
neutralPalette,
neutralVariantPalette,
errorPalette,
primaryPaletteKeyColor,
secondaryPaletteKeyColor,
tertiaryPaletteKeyColor,
neutralPaletteKeyColor,
neutralVariantPaletteKeyColor,
errorPaletteKeyColor
}: DynamicSchemeFromOptions): DynamicScheme;
toString(): string;
/**
* Returns a new hue based on a piecewise function and input color hue.
*
* For example, for the following function:
* result = 26 if 0 <= hue < 101
* result = 39 if 101 <= hue < 210
* result = 28 if 210 <= hue < 360
*
* call the function as:
*
* const hueBreakpoints = [0, 101, 210, 360];
* const hues = [26, 39, 28];
* const result = scheme.piecewise(hue, hueBreakpoints, hues);
*
* @param sourceColorHct The input value.
* @param hueBreakpoints The breakpoints, in sorted order. No default lower or
* upper bounds are assumed.
* @param hues The hues that should be applied when source color's hue is >=
* the same index in hueBrakpoints array, and < the hue at the next index
* in hueBrakpoints array. Otherwise, the source color's hue is returned.
*/
static getPiecewiseHue(sourceColorHct: Hct, hueBreakpoints: number[], hues: number[]): number;
/**
* Returns a shifted hue based on a piecewise function and input color hue.
*
* For example, for the following function:
* result = hue + 26 if 0 <= hue < 101
* result = hue - 39 if 101 <= hue < 210
* result = hue + 28 if 210 <= hue < 360
*
* call the function as:
*
* const hueBreakpoints = [0, 101, 210, 360];
* const hues = [26, -39, 28];
* const result = scheme.getRotatedHue(hue, hueBreakpoints, hues);
*
* @param sourceColorHct the source color of the theme, in HCT.
* @param hueBreakpoints The "breakpoints", i.e. the hues at which a rotation
* should be apply. No default lower or upper bounds are assumed.
* @param rotations The rotation that should be applied when source color's
* hue is >= the same index in hues array, and < the hue at the next
* index in hues array. Otherwise, the source color's hue is returned.
*/
static getRotatedHue(sourceColorHct: Hct, hueBreakpoints: number[], rotations: number[]): number;
getArgb(dynamicColor: DynamicColor): number;
getHct(dynamicColor: DynamicColor): Hct;
get primaryPaletteKeyColor(): number;
get secondaryPaletteKeyColor(): number;
get tertiaryPaletteKeyColor(): number;
get neutralPaletteKeyColor(): number;
get neutralVariantPaletteKeyColor(): number;
get errorPaletteKeyColor(): number;
get background(): number;
get onBackground(): number;
get surface(): number;
get surfaceDim(): number;
get surfaceBright(): number;
get surfaceContainerLowest(): number;
get surfaceContainerLow(): number;
get surfaceContainer(): number;
get surfaceContainerHigh(): number;
get surfaceContainerHighest(): number;
get onSurface(): number;
get surfaceVariant(): number;
get onSurfaceVariant(): number;
get inverseSurface(): number;
get inverseOnSurface(): number;
get outline(): number;
get outlineVariant(): number;
get shadow(): number;
get scrim(): number;
get surfaceTint(): number;
get primary(): number;
get primaryDim(): number;
get onPrimary(): number;
get primaryContainer(): number;
get onPrimaryContainer(): number;
get primaryFixed(): number;
get primaryFixedDim(): number;
get onPrimaryFixed(): number;
get onPrimaryFixedVariant(): number;
get inversePrimary(): number;
get secondary(): number;
get secondaryDim(): number;
get onSecondary(): number;
get secondaryContainer(): number;
get onSecondaryContainer(): number;
get secondaryFixed(): number;
get secondaryFixedDim(): number;
get onSecondaryFixed(): number;
get onSecondaryFixedVariant(): number;
get tertiary(): number;
get tertiaryDim(): number;
get onTertiary(): number;
get tertiaryContainer(): number;
get onTertiaryContainer(): number;
get tertiaryFixed(): number;
get tertiaryFixedDim(): number;
get onTertiaryFixed(): number;
get onTertiaryFixedVariant(): number;
get error(): number;
get errorDim(): number;
get onError(): number;
get errorContainer(): number;
get onErrorContainer(): number;
}
//#endregion
//#region src/dynamiccolor/tone_delta_pair.d.ts
/**
* Describes the different in tone between colors.
*
* nearer and farther are deprecated. Use DeltaConstraint instead.
*/
type TonePolarity = "darker" | "lighter" | "nearer" | "farther" | "relative_darker" | "relative_lighter";
/**
* Describes how to fulfill a tone delta pair constraint.
*/
type DeltaConstraint = "exact" | "nearer" | "farther";
/**
* Documents a constraint between two DynamicColors, in which their tones must
* have a certain distance from each other.
*
* Prefer a DynamicColor with a background, this is for special cases when
* designers want tonal distance, literally contrast, between two colors that
* don't have a background / foreground relationship or a contrast guarantee.
*/
declare class ToneDeltaPair {
readonly roleA: DynamicColor;
readonly roleB: DynamicColor;
readonly delta: number;
readonly polarity: TonePolarity;
readonly stayTogether: boolean;
readonly constraint?: DeltaConstraint | undefined;
/**
* Documents a constraint in tone distance between two DynamicColors.
*
* The polarity is an adjective that describes "A", compared to "B".
*
* For instance, ToneDeltaPair(A, B, 15, 'darker', 'exact') states that
* A's tone should be exactly 15 darker than B's.
*
* 'relative_darker' and 'relative_lighter' describes the tone adjustment
* relative to the surface color trend (white in light mode; black in dark
* mode). For instance, ToneDeltaPair(A, B, 10, 'relative_lighter',
* 'farther') states that A should be at least 10 lighter than B in light
* mode, and at least 10 darker than B in dark mode.
*
* @param roleA The first role in a pair.
* @param roleB The second role in a pair.
* @param delta Required difference between tones. Absolute value, negative
* values have undefined behavior.
* @param polarity The relative relation between tones of roleA and roleB,
* as described above.
* @param constraint How to fulfill the tone delta pair constraint.
* @param stayTogether Whether these two roles should stay on the same side
* of the "awkward zone" (T50-59). This is necessary for certain cases where
* one role has two backgrounds.
*/
constructor(roleA: DynamicColor, roleB: DynamicColor, delta: number, polarity: TonePolarity, stayTogether: boolean, constraint?: DeltaConstraint | undefined);
}
//#endregion
//#region src/dynamiccolor/dynamic_color.d.ts
/**
* @param name The name of the dynamic color. Defaults to empty.
* @param palette Function that provides a TonalPalette given DynamicScheme. A
* TonalPalette is defined by a hue and chroma, so this replaces the need to
* specify hue/chroma. By providing a tonal palette, when contrast
* adjustments are made, intended chroma can be preserved.
* @param tone Function that provides a tone given DynamicScheme. When not
* provided, the tone is same as the background tone or 50, when no
* background is provided.
* @param chromaMultiplier A factor that multiplies the chroma for this color.
* Default to 1.
* @param isBackground Whether this dynamic color is a background, with some
* other color as the foreground. Defaults to false.
* @param background The background of the dynamic color (as a function of a
* `DynamicScheme`), if it exists.
* @param secondBackground A second background of the dynamic color (as a
* function of a `DynamicScheme`), if it exists.
* @param contrastCurve A `ContrastCurve` object specifying how its contrast
* against its background should behave in various contrast levels options.
* Must used together with `background`. When not provided or resolved as
* undefined, the contrast curve is calculated based on other constraints.
* @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta
* constraint between two colors. One of them must be the color being
* constructed. When not provided or resolved as undefined, the tone is
* calculated based on other constraints.
*/
interface FromPaletteOptions {
name?: string;
palette: (scheme: DynamicScheme) => TonalPalette;
tone?: (scheme: DynamicScheme) => number;
chromaMultiplier?: (scheme: DynamicScheme) => number;
isBackground?: boolean;
background?: (scheme: DynamicScheme) => DynamicColor | undefined;
secondBackground?: (scheme: DynamicScheme) => DynamicColor | undefined;
contrastCurve?: (scheme: DynamicScheme) => ContrastCurve | undefined;
toneDeltaPair?: (scheme: DynamicScheme) => ToneDeltaPair | undefined;
}
/**
* Returns a new DynamicColor that is the same as the original color, but with
* the extended dynamic color's constraints for the given spec version.
*
* @param originlColor The original color.
* @param specVersion The spec version to extend.
* @param extendedColor The color with the values to extend.
*/
declare function extendSpecVersion(originlColor: DynamicColor, specVersion: SpecVersion, extendedColor: DynamicColor): DynamicColor;
/**
* A color that adjusts itself based on UI state provided by DynamicScheme.
*
* Colors without backgrounds do not change tone when contrast changes. Colors
* with backgrounds become closer to their background as contrast lowers, and
* further when contrast increases.
*
* Prefer static constructors. They require either a hexcode, a palette and
* tone, or a hue and chroma. Optionally, they can provide a background
* DynamicColor.
*/
declare class DynamicColor {
readonly name: string;
readonly palette: (scheme: DynamicScheme) => TonalPalette;
readonly tone: (scheme: DynamicScheme) => number;
readonly isBackground: boolean;
readonly chromaMultiplier?: ((scheme: DynamicScheme) => number) | undefined;
readonly background?: ((scheme: DynamicScheme) => DynamicColor | undefined) | undefined;
readonly secondBackground?: ((scheme: DynamicScheme) => DynamicColor | undefined) | undefined;
readonly contrastCurve?: ((scheme: DynamicScheme) => ContrastCurve | undefined) | undefined;
readonly toneDeltaPair?: ((scheme: DynamicScheme) => ToneDeltaPair | undefined) | undefined;
private readonly hctCache;
/**
* Create a DynamicColor defined by a TonalPalette and HCT tone.
*
* @param args Functions with DynamicScheme as input. Must provide a palette
* and tone. May provide a background DynamicColor and ToneDeltaPair.
*/
static fromPalette(args: FromPaletteOptions): DynamicColor;
static getInitialToneFromBackground(background?: (scheme: DynamicScheme) => DynamicColor | undefined): (scheme: DynamicScheme) => number;
/**
* The base constructor for DynamicColor.
*
* _Strongly_ prefer using one of the convenience constructors. This class is
* arguably too flexible to ensure it can support any scenario. Functional
* arguments allow overriding without risks that come with subclasses.
*
* For example, the default behavior of adjust tone at max contrast
* to be at a 7.0 ratio with its background is principled and
* matches accessibility guidance. That does not mean it's the desired
* approach for _every_ design system, and every color pairing,
* always, in every case.
*
* @param name The name of the dynamic color. Defaults to empty.
* @param palette Function that provides a TonalPalette given DynamicScheme. A
* TonalPalette is defined by a hue and chroma, so this replaces the need
* to specify hue/chroma. By providing a tonal palette, when contrast
* adjustments are made, intended chroma can be preserved.
* @param tone Function that provides a tone, given a DynamicScheme.
* @param isBackground Whether this dynamic color is a background, with some
* other color as the foreground. Defaults to false.
* @param chromaMultiplier A factor that multiplies the chroma for this color.
* @param background The background of the dynamic color (as a function of a
* `DynamicScheme`), if it exists.
* @param secondBackground A second background of the dynamic color (as a
* function of a `DynamicScheme`), if it exists.
* @param contrastCurve A `ContrastCurve` object specifying how its contrast
* against its background should behave in various contrast levels
* options.
* @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta
* constraint between two colors. One of them must be the color being
* constructed.
*/
constructor(name: string, palette: (scheme: DynamicScheme) => TonalPalette, tone: (scheme: DynamicScheme) => number, isBackground: boolean, chromaMultiplier?: ((scheme: DynamicScheme) => number) | undefined, background?: ((scheme: DynamicScheme) => DynamicColor | undefined) | undefined, secondBackground?: ((scheme: DynamicScheme) => DynamicColor | undefined) | undefined, contrastCurve?: ((scheme: DynamicScheme) => ContrastCurve | undefined) | undefined, toneDeltaPair?: ((scheme: DynamicScheme) => ToneDeltaPair | undefined) | undefined);
/**
* Returns a deep copy of this DynamicColor.
*/
clone(): DynamicColor;
/**
* Clears the cache of HCT values for this color. For testing or debugging
* purposes.
*/
clearCache(): void;
/**
* Returns a ARGB integer (i.e. a hex code).
*
* @param scheme Defines the conditions of the user interface, for example,
* whether or not it is dark mode or light mode, and what the desired
* contrast level is.
*/
getArgb(scheme: DynamicScheme): number;
/**
* Returns a color, expressed in the HCT color space, that this
* DynamicColor is under the conditions in scheme.
*
* @param scheme Defines the conditions of the user interface, for example,
* whether or not it is dark mode or light mode, and what the desired
* contrast level is.
*/
getHct(scheme: DynamicScheme): Hct;
/**
* Returns a tone, T in the HCT color space, that this DynamicColor is under
* the conditions in scheme.
*
* @param scheme Defines the conditions of the user interface, for example,
* whether or not it is dark mode or light mode, and what the desired
* contrast level is.
*/
getTone(scheme: DynamicScheme): number;
/**
* Given a background tone, finds a foreground tone, while ensuring they reach
* a contrast ratio that is as close to [ratio] as possible.
*
* @param bgTone Tone in HCT. Range is 0 to 100, undefined behavior when it
* falls outside that range.
* @param ratio The contrast ratio desired between bgTone and the return
* value.
*/
static foregroundTone(bgTone: number, ratio: number): number;
/**
* Returns whether [tone] prefers a light foreground.
*
* People prefer white foregrounds on ~T60-70. Observed over time, and also
* by Andrew Somers during research for APCA.
*
* T60 used as to create the smallest discontinuity possible when skipping
* down to T49 in order to ensure light foregrounds.
* Since `tertiaryContainer` in dark monochrome scheme requires a tone of
* 60, it should not be adjusted. Therefore, 60 is excluded here.
*/
static tonePrefersLightForeground(tone: number): boolean;
/**
* Returns whether [tone] can reach a contrast ratio of 4.5 with a lighter
* color.
*/
static toneAllowsLightForeground(tone: number): boolean;
/**
* Adjusts a tone such that white has 4.5 contrast, if the tone is
* reasonably close to supporting it.
*/
static enableLightForeground(tone: number): number;
}
//#endregion
//#region src/hct/cam16.d.ts
/**
* CAM16, a color appearance model. Colors are not just defined by their hex
* code, but rather, a hex code and viewing conditions.
*
* CAM16 instances also have coordinates in the CAM16-UCS space, called J*, a*,
* b*, or jstar, astar, bstar in code. CAM16-UCS is included in the CAM16
* specification, and should be used when measuring distances between colors.
*
* In traditional color spaces, a color can be identified solely by the
* observer's measurement of the color. Color appearance models such as CAM16
* also use information about the environment where the color was
* observed, known as the viewing conditions.
*
* For example, white under the traditional assumption of a midday sun white
* point is accurately measured as a slightly chromatic blue by CAM16. (roughly,
* hue 203, chroma 3, lightness 100)
*/
declare class Cam16 {
readonly hue: number;
readonly chroma: number;
readonly j: number;
readonly q: number;
readonly m: number;
readonly s: number;
readonly jstar: number;
readonly astar: number;
readonly bstar: number;
/**
* All of the CAM16 dimensions can be calculated from 3 of the dimensions, in
* the following combinations:
* - {j or q} and {c, m, or s} and hue
* - jstar, astar, bstar
* Prefer using a static method that constructs from 3 of those dimensions.
* This constructor is intended for those methods to use to return all
* possible dimensions.
*
* @param hue
* @param chroma informally, colorfulness / color intensity. like saturation
* in HSL, except perceptually accurate.
* @param j lightness
* @param q brightness; ratio of lightness to white point's lightness
* @param m colorfulness
* @param s saturation; ratio of chroma to white point's chroma
* @param jstar CAM16-UCS J coordinate
* @param astar CAM16-UCS a co