@poupe/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.
200 lines • 6.92 kB
JavaScript
/**
* @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.
*/
import { CorePalette } from '../palettes/core_palette.js';
/**
* Represents an Android 12 color scheme, a mapping of color roles to colors.
*/
export class SchemeAndroid {
get colorAccentPrimary() {
return this.props.colorAccentPrimary;
}
get colorAccentPrimaryVariant() {
return this.props.colorAccentPrimaryVariant;
}
get colorAccentSecondary() {
return this.props.colorAccentSecondary;
}
get colorAccentSecondaryVariant() {
return this.props.colorAccentSecondaryVariant;
}
get colorAccentTertiary() {
return this.props.colorAccentTertiary;
}
get colorAccentTertiaryVariant() {
return this.props.colorAccentTertiaryVariant;
}
get textColorPrimary() {
return this.props.textColorPrimary;
}
get textColorSecondary() {
return this.props.textColorSecondary;
}
get textColorTertiary() {
return this.props.textColorTertiary;
}
get textColorPrimaryInverse() {
return this.props.textColorPrimaryInverse;
}
get textColorSecondaryInverse() {
return this.props.textColorSecondaryInverse;
}
get textColorTertiaryInverse() {
return this.props.textColorTertiaryInverse;
}
get colorBackground() {
return this.props.colorBackground;
}
get colorBackgroundFloating() {
return this.props.colorBackgroundFloating;
}
get colorSurface() {
return this.props.colorSurface;
}
get colorSurfaceVariant() {
return this.props.colorSurfaceVariant;
}
get colorSurfaceHighlight() {
return this.props.colorSurfaceHighlight;
}
get surfaceHeader() {
return this.props.surfaceHeader;
}
get underSurface() {
return this.props.underSurface;
}
get offState() {
return this.props.offState;
}
get accentSurface() {
return this.props.accentSurface;
}
get textPrimaryOnAccent() {
return this.props.textPrimaryOnAccent;
}
get textSecondaryOnAccent() {
return this.props.textSecondaryOnAccent;
}
get volumeBackground() {
return this.props.volumeBackground;
}
get scrim() {
return this.props.scrim;
}
/**
* @param argb ARGB representation of a color.
* @return Light Material color scheme, based on the color's hue.
*/
static light(argb) {
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) {
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) {
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) {
const core = CorePalette.contentOf(argb);
return SchemeAndroid.darkFromCorePalette(core);
}
/**
* Light scheme from core palette
*/
static lightFromCorePalette(core) {
return new SchemeAndroid({
colorAccentPrimary: core.a1.tone(90),
colorAccentPrimaryVariant: core.a1.tone(40),
colorAccentSecondary: core.a2.tone(90),
colorAccentSecondaryVariant: core.a2.tone(40),
colorAccentTertiary: core.a3.tone(90),
colorAccentTertiaryVariant: core.a3.tone(40),
textColorPrimary: core.n1.tone(10),
textColorSecondary: core.n2.tone(30),
textColorTertiary: core.n2.tone(50),
textColorPrimaryInverse: core.n1.tone(95),
textColorSecondaryInverse: core.n1.tone(80),
textColorTertiaryInverse: core.n1.tone(60),
colorBackground: core.n1.tone(95),
colorBackgroundFloating: core.n1.tone(98),
colorSurface: core.n1.tone(98),
colorSurfaceVariant: core.n1.tone(90),
colorSurfaceHighlight: core.n1.tone(100),
surfaceHeader: core.n1.tone(90),
underSurface: core.n1.tone(0),
offState: core.n1.tone(20),
accentSurface: core.a2.tone(95),
textPrimaryOnAccent: core.n1.tone(10),
textSecondaryOnAccent: core.n2.tone(30),
volumeBackground: core.n1.tone(25),
scrim: core.n1.tone(80),
});
}
/**
* Dark scheme from core palette
*/
static darkFromCorePalette(core) {
return new SchemeAndroid({
colorAccentPrimary: core.a1.tone(90),
colorAccentPrimaryVariant: core.a1.tone(70),
colorAccentSecondary: core.a2.tone(90),
colorAccentSecondaryVariant: core.a2.tone(70),
colorAccentTertiary: core.a3.tone(90),
colorAccentTertiaryVariant: core.a3.tone(70),
textColorPrimary: core.n1.tone(95),
textColorSecondary: core.n2.tone(80),
textColorTertiary: core.n2.tone(60),
textColorPrimaryInverse: core.n1.tone(10),
textColorSecondaryInverse: core.n1.tone(30),
textColorTertiaryInverse: core.n1.tone(50),
colorBackground: core.n1.tone(10),
colorBackgroundFloating: core.n1.tone(10),
colorSurface: core.n1.tone(20),
colorSurfaceVariant: core.n1.tone(30),
colorSurfaceHighlight: core.n1.tone(35),
surfaceHeader: core.n1.tone(30),
underSurface: core.n1.tone(0),
offState: core.n1.tone(20),
accentSurface: core.a2.tone(95),
textPrimaryOnAccent: core.n1.tone(10),
textSecondaryOnAccent: core.n2.tone(30),
volumeBackground: core.n1.tone(25),
scrim: core.n1.tone(80),
});
}
constructor(props) {
this.props = props;
}
toJSON() {
return { ...this.props };
}
}
//# sourceMappingURL=scheme_android.js.map