@udixio/theme 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +202 -0
- package/index.cjs.js +3226 -0
- package/index.d.ts +1 -0
- package/index.esm.js +3170 -0
- package/package.json +17 -0
- package/src/index.d.ts +1 -0
- package/src/lib/API.d.ts +13 -0
- package/src/lib/app.container.d.ts +5 -0
- package/src/lib/app.module.d.ts +2 -0
- package/src/lib/color/color.api.d.ts +38 -0
- package/src/lib/color/color.manager.d.ts +23 -0
- package/src/lib/color/color.module.d.ts +2 -0
- package/src/lib/color/color.utils.d.ts +7 -0
- package/src/lib/color/configurable-color.d.ts +30 -0
- package/src/lib/color/default-color.d.ts +2 -0
- package/src/lib/color/index.d.ts +5 -0
- package/src/lib/config/config.interface.d.ts +13 -0
- package/src/lib/config/config.module.d.ts +2 -0
- package/src/lib/config/config.service.d.ts +12 -0
- package/src/lib/config/index.d.ts +3 -0
- package/src/lib/index.d.ts +12 -0
- package/src/lib/main.d.ts +7 -0
- package/src/lib/material-color-utilities/contrastCurve.d.ts +46 -0
- package/src/lib/material-color-utilities/dynamic_color.d.ts +199 -0
- package/src/lib/material-color-utilities/hct_solver.d.ts +146 -0
- package/src/lib/material-color-utilities/htc.d.ts +107 -0
- package/src/lib/material-color-utilities/index.d.ts +3 -0
- package/src/lib/material-color-utilities/toneDeltaPair.d.ts +69 -0
- package/src/lib/plugin/index.d.ts +3 -0
- package/src/lib/plugin/plugin.module.d.ts +2 -0
- package/src/lib/plugin/pluginAbstract.d.ts +18 -0
- package/src/lib/plugin/pluginApi.d.ts +8 -0
- package/src/lib/plugins/font/font.plugin.d.ts +49 -0
- package/src/lib/plugins/font/index.d.ts +1 -0
- package/src/lib/plugins/tailwind/file.d.ts +4 -0
- package/src/lib/plugins/tailwind/index.d.ts +3 -0
- package/src/lib/plugins/tailwind/main.d.ts +2 -0
- package/src/lib/plugins/tailwind/plugins-tailwind/font.d.ts +3 -0
- package/src/lib/plugins/tailwind/plugins-tailwind/index.d.ts +2 -0
- package/src/lib/plugins/tailwind/plugins-tailwind/state.d.ts +2 -0
- package/src/lib/plugins/tailwind/plugins-tailwind/themer.d.ts +10 -0
- package/src/lib/plugins/tailwind/tailwind.plugin.d.ts +18 -0
- package/src/lib/theme/index.d.ts +7 -0
- package/src/lib/theme/scheme.d.ts +19 -0
- package/src/lib/theme/scheme.manager.d.ts +30 -0
- package/src/lib/theme/theme.api.d.ts +22 -0
- package/src/lib/theme/theme.module.d.ts +2 -0
- package/src/lib/theme/variant.d.ts +35 -0
- package/src/lib/theme/variant.manager.d.ts +13 -0
- package/src/lib/theme/variants/expressive.variant.d.ts +2 -0
- package/src/lib/theme/variants/index.d.ts +4 -0
- package/src/lib/theme/variants/neutral.variant.d.ts +2 -0
- package/src/lib/theme/variants/tonal-spot.variant.d.ts +2 -0
- package/src/lib/theme/variants/vibrant.variant.d.ts +2 -0
package/package.json
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@udixio/theme",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"main": "./index.cjs.js",
|
|
5
|
+
"module": "./index.esm.js",
|
|
6
|
+
"dependencies": {
|
|
7
|
+
"awilix": "^12.0.5",
|
|
8
|
+
"@material/material-color-utilities": "^0.3.0",
|
|
9
|
+
"replace-in-file": "^8.3.0",
|
|
10
|
+
"tailwindcss": "^4.1.11"
|
|
11
|
+
},
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/Udixio/UI.git"
|
|
15
|
+
},
|
|
16
|
+
"types": "./index.d.ts"
|
|
17
|
+
}
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './lib/index';
|
package/src/lib/API.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ColorApi } from './color';
|
|
2
|
+
import { ThemeApi } from './theme';
|
|
3
|
+
import { PluginApi } from './plugin/pluginApi';
|
|
4
|
+
export declare class API {
|
|
5
|
+
colors: ColorApi;
|
|
6
|
+
themes: ThemeApi;
|
|
7
|
+
plugins: PluginApi;
|
|
8
|
+
constructor({ colorApi, themeApi, pluginApi, }: {
|
|
9
|
+
colorApi: ColorApi;
|
|
10
|
+
themeApi: ThemeApi;
|
|
11
|
+
pluginApi: PluginApi;
|
|
12
|
+
});
|
|
13
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { AwilixContainer, BuildResolver, DisposableResolver } from 'awilix';
|
|
2
|
+
export type Module = Record<string, BuildResolver<any> & DisposableResolver<any>>;
|
|
3
|
+
export declare function importContainer(container: AwilixContainer, services: Module[]): AwilixContainer<any>;
|
|
4
|
+
declare const AppContainer: AwilixContainer<any>;
|
|
5
|
+
export default AppContainer;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { ColorOptions, ConfigurableColor } from './configurable-color';
|
|
2
|
+
import { ColorManager } from './color.manager';
|
|
3
|
+
import { DynamicColorKey } from './color.utils';
|
|
4
|
+
export type AddColors = {
|
|
5
|
+
colors?: Record<DynamicColorKey | string, (Partial<ColorOptions> & {
|
|
6
|
+
alias?: never;
|
|
7
|
+
}) | {
|
|
8
|
+
alias: string;
|
|
9
|
+
palette?: never;
|
|
10
|
+
tone?: never;
|
|
11
|
+
}>;
|
|
12
|
+
fromPalettes?: string[] | string;
|
|
13
|
+
};
|
|
14
|
+
export type AddColorsOptions = AddColors | ((colorService: ColorApi) => AddColors);
|
|
15
|
+
export declare class ColorApi {
|
|
16
|
+
private readonly colorManager;
|
|
17
|
+
constructor({ colorManager }: {
|
|
18
|
+
colorManager: ColorManager;
|
|
19
|
+
});
|
|
20
|
+
getColors(): ReadonlyMap<string, ConfigurableColor>;
|
|
21
|
+
addColor(key: string, color: (Partial<ColorOptions> & {
|
|
22
|
+
alias?: never;
|
|
23
|
+
}) | {
|
|
24
|
+
alias: string;
|
|
25
|
+
palette?: never;
|
|
26
|
+
tone?: never;
|
|
27
|
+
}): ConfigurableColor;
|
|
28
|
+
addColors(args: AddColorsOptions | AddColorsOptions[]): void;
|
|
29
|
+
getColor(key: DynamicColorKey | string): ConfigurableColor;
|
|
30
|
+
removeColor(key: string): boolean;
|
|
31
|
+
updateColor(key: string, newColor: (Partial<ColorOptions> & {
|
|
32
|
+
alias?: never;
|
|
33
|
+
}) | {
|
|
34
|
+
alias: string;
|
|
35
|
+
palette?: never;
|
|
36
|
+
tone?: never;
|
|
37
|
+
}): ConfigurableColor;
|
|
38
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { DynamicColor } from '../material-color-utilities';
|
|
2
|
+
import { Scheme, SchemeManager } from '../theme';
|
|
3
|
+
import { ColorOptions, ConfigurableColor } from './configurable-color';
|
|
4
|
+
import { ColorApi } from './color.api';
|
|
5
|
+
export declare const highestSurface: (s: Scheme, colorService: ColorManager | ColorApi) => DynamicColor;
|
|
6
|
+
export declare class ColorManager {
|
|
7
|
+
private colorMap;
|
|
8
|
+
private readonly schemeManager;
|
|
9
|
+
constructor({ schemeManager }: {
|
|
10
|
+
schemeManager: SchemeManager;
|
|
11
|
+
});
|
|
12
|
+
createOrUpdate(key: string, args: (Partial<ColorOptions> & {
|
|
13
|
+
alias?: never;
|
|
14
|
+
}) | {
|
|
15
|
+
alias: string;
|
|
16
|
+
palette?: never;
|
|
17
|
+
tone?: never;
|
|
18
|
+
}): ConfigurableColor;
|
|
19
|
+
remove(key: string): boolean;
|
|
20
|
+
get(key: string): ConfigurableColor;
|
|
21
|
+
getAll(): ReadonlyMap<string, ConfigurableColor>;
|
|
22
|
+
addFromPalette(key: string): void;
|
|
23
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TonalPalette } from '@material/material-color-utilities';
|
|
2
|
+
import { ContrastCurve } from '../material-color-utilities/contrastCurve';
|
|
3
|
+
export type DynamicColorKey = 'background' | 'onBackground' | 'surface' | 'surfaceDim' | 'surfaceBright' | 'surfaceContainerLowest' | 'surfaceContainerLow' | 'surfaceContainer' | 'surfaceContainerHigh' | 'surfaceContainerHighest' | 'onSurface' | 'surfaceVariant' | 'onSurfaceVariant' | 'inverseSurface' | 'inverseOnSurface' | 'outline' | 'outlineVariant' | 'surfaceTint' | 'primary' | 'primaryDim' | 'onPrimary' | 'primaryContainer' | 'onPrimaryContainer' | 'inversePrimary' | 'secondary' | 'secondaryDim' | 'onSecondary' | 'secondaryContainer' | 'onSecondaryContainer' | 'tertiary' | 'tertiaryDim' | 'onTertiary' | 'tertiaryContainer' | 'onTertiaryContainer' | 'error' | 'errorDim' | 'onError' | 'errorContainer' | 'onErrorContainer' | 'primaryFixed' | 'primaryFixedDim' | 'onPrimaryFixed' | 'onPrimaryFixedVariant' | 'secondaryFixed' | 'secondaryFixedDim' | 'onSecondaryFixed' | 'onSecondaryFixedVariant' | 'tertiaryFixed' | 'tertiaryFixedDim' | 'onTertiaryFixed' | 'onTertiaryFixedVariant';
|
|
4
|
+
export declare function getCurve(defaultContrast: number): ContrastCurve;
|
|
5
|
+
export declare function tMaxC(palette: TonalPalette, lowerBound?: number, upperBound?: number, chromaMultiplier?: number): number;
|
|
6
|
+
export declare function tMinC(palette: TonalPalette, lowerBound?: number, upperBound?: number): number;
|
|
7
|
+
export declare function findBestToneForChroma(hue: number, chroma: number, tone: number, byDecreasingTone: boolean): number;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { SchemeManager } from '../theme';
|
|
2
|
+
import { DynamicColor, FromPaletteOptions } from '../material-color-utilities';
|
|
3
|
+
import { ColorManager } from './color.manager';
|
|
4
|
+
export type ColorOptions = ((FromPaletteOptions & {
|
|
5
|
+
alias?: string;
|
|
6
|
+
}) | (Partial<FromPaletteOptions> & {
|
|
7
|
+
alias: string;
|
|
8
|
+
palette?: never;
|
|
9
|
+
})) & {
|
|
10
|
+
name: string;
|
|
11
|
+
};
|
|
12
|
+
export declare class ConfigurableColor {
|
|
13
|
+
private option;
|
|
14
|
+
private schemeService;
|
|
15
|
+
private colorService;
|
|
16
|
+
private dynamicColor;
|
|
17
|
+
constructor(option: ColorOptions, schemeService: SchemeManager, colorService: ColorManager);
|
|
18
|
+
update(args: Partial<ColorOptions & {
|
|
19
|
+
name: string;
|
|
20
|
+
}>): void;
|
|
21
|
+
getHex(): string;
|
|
22
|
+
getArgb(): number;
|
|
23
|
+
getRgb(): {
|
|
24
|
+
r: number;
|
|
25
|
+
g: number;
|
|
26
|
+
b: number;
|
|
27
|
+
};
|
|
28
|
+
getName(): string;
|
|
29
|
+
getMaterialColor(): DynamicColor;
|
|
30
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { AddColorsOptions } from '../color';
|
|
2
|
+
import { Variant } from '../theme';
|
|
3
|
+
import { PluginAbstract } from '../plugin';
|
|
4
|
+
export interface ConfigInterface {
|
|
5
|
+
sourceColor: string;
|
|
6
|
+
contrastLevel?: number;
|
|
7
|
+
isDark?: boolean;
|
|
8
|
+
variant?: Variant;
|
|
9
|
+
colors?: AddColorsOptions | AddColorsOptions[];
|
|
10
|
+
useDefaultColors?: boolean;
|
|
11
|
+
palettes?: Record<string, string>;
|
|
12
|
+
plugins?: PluginAbstract<any, any>[];
|
|
13
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ConfigInterface } from './config.interface';
|
|
2
|
+
import { API } from '../API';
|
|
3
|
+
export declare function defineConfig(configObject: ConfigInterface): ConfigInterface;
|
|
4
|
+
export declare class ConfigService {
|
|
5
|
+
configPath: string;
|
|
6
|
+
private readonly api;
|
|
7
|
+
constructor({ api }: {
|
|
8
|
+
api: API;
|
|
9
|
+
});
|
|
10
|
+
loadConfig(config?: ConfigInterface): void;
|
|
11
|
+
private getConfig;
|
|
12
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export { default as AppContainer } from './app.container';
|
|
2
|
+
export * from './app.container';
|
|
3
|
+
export * from './app.module';
|
|
4
|
+
export * from './API';
|
|
5
|
+
export * from './color';
|
|
6
|
+
export * from './config';
|
|
7
|
+
export * from './main';
|
|
8
|
+
export * from './material-color-utilities';
|
|
9
|
+
export * from './plugin';
|
|
10
|
+
export * from './plugins/font';
|
|
11
|
+
export * from './plugins/tailwind';
|
|
12
|
+
export * from './theme';
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google LLC
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
/**
|
|
18
|
+
* A class containing a value that changes with the contrast level.
|
|
19
|
+
*
|
|
20
|
+
* Usually represents the contrast requirements for a dynamic color on its
|
|
21
|
+
* background. The four values correspond to values for contrast levels -1.0,
|
|
22
|
+
* 0.0, 0.5, and 1.0, respectively.
|
|
23
|
+
*/
|
|
24
|
+
export declare class ContrastCurve {
|
|
25
|
+
readonly low: number;
|
|
26
|
+
readonly normal: number;
|
|
27
|
+
readonly medium: number;
|
|
28
|
+
readonly high: number;
|
|
29
|
+
/**
|
|
30
|
+
* Creates a `ContrastCurve` object.
|
|
31
|
+
*
|
|
32
|
+
* @param low Value for contrast level -1.0
|
|
33
|
+
* @param normal Value for contrast level 0.0
|
|
34
|
+
* @param medium Value for contrast level 0.5
|
|
35
|
+
* @param high Value for contrast level 1.0
|
|
36
|
+
*/
|
|
37
|
+
constructor(low: number, normal: number, medium: number, high: number);
|
|
38
|
+
/**
|
|
39
|
+
* Returns the value at a given contrast level.
|
|
40
|
+
*
|
|
41
|
+
* @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0
|
|
42
|
+
* is the lowest; 1.0 is the highest.
|
|
43
|
+
* @return The value. For contrast ratios, a number between 1.0 and 21.0.
|
|
44
|
+
*/
|
|
45
|
+
get(contrastLevel: number): number;
|
|
46
|
+
}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2022 Google LLC
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
import { TonalPalette } from '@material/material-color-utilities';
|
|
18
|
+
import { ContrastCurve } from './contrastCurve';
|
|
19
|
+
import { ToneDeltaPair } from './toneDeltaPair';
|
|
20
|
+
import { Scheme } from '../theme/scheme';
|
|
21
|
+
import { Hct } from './htc';
|
|
22
|
+
/**
|
|
23
|
+
* @param name The name of the dynamic color. Defaults to empty.
|
|
24
|
+
* @param palette Function that provides a TonalPalette given DynamicScheme. A
|
|
25
|
+
* TonalPalette is defined by a hue and chroma, so this replaces the need to
|
|
26
|
+
* specify hue/chroma. By providing a tonal palette, when contrast
|
|
27
|
+
* adjustments are made, intended chroma can be preserved.
|
|
28
|
+
* @param tone Function that provides a tone given DynamicScheme. When not
|
|
29
|
+
* provided, the tone is same as the background tone or 50, when no
|
|
30
|
+
* background is provided.
|
|
31
|
+
* @param chromaMultiplier A factor that multiplies the chroma for this color.
|
|
32
|
+
* Default to 1.
|
|
33
|
+
* @param isBackground Whether this dynamic color is a background, with some
|
|
34
|
+
* other color as the foreground. Defaults to false.
|
|
35
|
+
* @param background The background of the dynamic color (as a function of a
|
|
36
|
+
* `DynamicScheme`), if it exists.
|
|
37
|
+
* @param secondBackground A second background of the dynamic color (as a
|
|
38
|
+
* function of a `DynamicScheme`), if it exists.
|
|
39
|
+
* @param contrastCurve A `ContrastCurve` object specifying how its contrast
|
|
40
|
+
* against its background should behave in various contrast levels options.
|
|
41
|
+
* Must used together with `background`. When not provided or resolved as
|
|
42
|
+
* undefined, the contrast curve is calculated based on other constraints.
|
|
43
|
+
* @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta
|
|
44
|
+
* constraint between two colors. One of them must be the color being
|
|
45
|
+
* constructed. When not provided or resolved as undefined, the tone is
|
|
46
|
+
* calculated based on other constraints.
|
|
47
|
+
*/
|
|
48
|
+
export interface FromPaletteOptions {
|
|
49
|
+
name?: string;
|
|
50
|
+
palette: (scheme: Scheme) => TonalPalette;
|
|
51
|
+
tone?: (scheme: Scheme) => number;
|
|
52
|
+
chromaMultiplier?: (scheme: Scheme) => number;
|
|
53
|
+
isBackground?: boolean;
|
|
54
|
+
background?: (scheme: Scheme) => DynamicColor | undefined;
|
|
55
|
+
secondBackground?: (scheme: Scheme) => DynamicColor | undefined;
|
|
56
|
+
contrastCurve?: (scheme: Scheme) => ContrastCurve | undefined;
|
|
57
|
+
toneDeltaPair?: (scheme: Scheme) => ToneDeltaPair | undefined;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Returns a new DynamicColor that is the same as the original color, but with
|
|
61
|
+
* the extended dynamic color's constraints for the given spec version.
|
|
62
|
+
*
|
|
63
|
+
* @param originlColor The original color.
|
|
64
|
+
* @param specVersion The spec version to extend.
|
|
65
|
+
* @param extendedColor The color with the values to extend.
|
|
66
|
+
*/
|
|
67
|
+
export declare function extendSpecVersion(originlColor: DynamicColor, extendedColor: DynamicColor): DynamicColor;
|
|
68
|
+
/**
|
|
69
|
+
* A color that adjusts itself based on UI state provided by DynamicScheme.
|
|
70
|
+
*
|
|
71
|
+
* Colors without backgrounds do not change tone when contrast changes. Colors
|
|
72
|
+
* with backgrounds become closer to their background as contrast lowers, and
|
|
73
|
+
* further when contrast increases.
|
|
74
|
+
*
|
|
75
|
+
* Prefer static constructors. They require either a hexcode, a palette and
|
|
76
|
+
* tone, or a hue and chroma. Optionally, they can provide a background
|
|
77
|
+
* DynamicColor.
|
|
78
|
+
*/
|
|
79
|
+
export declare class DynamicColor {
|
|
80
|
+
readonly name: string;
|
|
81
|
+
readonly palette: (scheme: Scheme) => TonalPalette;
|
|
82
|
+
readonly tone: (scheme: Scheme) => number;
|
|
83
|
+
readonly isBackground: boolean;
|
|
84
|
+
readonly chromaMultiplier?: ((scheme: Scheme) => number) | undefined;
|
|
85
|
+
readonly background?: ((scheme: Scheme) => DynamicColor | undefined) | undefined;
|
|
86
|
+
readonly secondBackground?: ((scheme: Scheme) => DynamicColor | undefined) | undefined;
|
|
87
|
+
readonly contrastCurve?: ((scheme: Scheme) => ContrastCurve | undefined) | undefined;
|
|
88
|
+
readonly toneDeltaPair?: ((scheme: Scheme) => ToneDeltaPair | undefined) | undefined;
|
|
89
|
+
private readonly hctCache;
|
|
90
|
+
/**
|
|
91
|
+
* The base constructor for DynamicColor.
|
|
92
|
+
*
|
|
93
|
+
* _Strongly_ prefer using one of the convenience constructors. This class is
|
|
94
|
+
* arguably too flexible to ensure it can support any scenario. Functional
|
|
95
|
+
* arguments allow overriding without risks that come with subclasses.
|
|
96
|
+
*
|
|
97
|
+
* For example, the default behavior of adjust tone at max contrast
|
|
98
|
+
* to be at a 7.0 ratio with its background is principled and
|
|
99
|
+
* matches accessibility guidance. That does not mean it's the desired
|
|
100
|
+
* approach for _every_ design system, and every color pairing,
|
|
101
|
+
* always, in every case.
|
|
102
|
+
*
|
|
103
|
+
* @param name The name of the dynamic color. Defaults to empty.
|
|
104
|
+
* @param palette Function that provides a TonalPalette given DynamicScheme. A
|
|
105
|
+
* TonalPalette is defined by a hue and chroma, so this replaces the need
|
|
106
|
+
* to specify hue/chroma. By providing a tonal palette, when contrast
|
|
107
|
+
* adjustments are made, intended chroma can be preserved.
|
|
108
|
+
* @param tone Function that provides a tone, given a DynamicScheme.
|
|
109
|
+
* @param isBackground Whether this dynamic color is a background, with some
|
|
110
|
+
* other color as the foreground. Defaults to false.
|
|
111
|
+
* @param chromaMultiplier A factor that multiplies the chroma for this color.
|
|
112
|
+
* @param background The background of the dynamic color (as a function of a
|
|
113
|
+
* `DynamicScheme`), if it exists.
|
|
114
|
+
* @param secondBackground A second background of the dynamic color (as a
|
|
115
|
+
* function of a `DynamicScheme`), if it exists.
|
|
116
|
+
* @param contrastCurve A `ContrastCurve` object specifying how its contrast
|
|
117
|
+
* against its background should behave in various contrast levels
|
|
118
|
+
* options.
|
|
119
|
+
* @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta
|
|
120
|
+
* constraint between two colors. One of them must be the color being
|
|
121
|
+
* constructed.
|
|
122
|
+
*/
|
|
123
|
+
constructor(name: string, palette: (scheme: Scheme) => TonalPalette, tone: (scheme: Scheme) => number, isBackground: boolean, chromaMultiplier?: ((scheme: Scheme) => number) | undefined, background?: ((scheme: Scheme) => DynamicColor | undefined) | undefined, secondBackground?: ((scheme: Scheme) => DynamicColor | undefined) | undefined, contrastCurve?: ((scheme: Scheme) => ContrastCurve | undefined) | undefined, toneDeltaPair?: ((scheme: Scheme) => ToneDeltaPair | undefined) | undefined);
|
|
124
|
+
/**
|
|
125
|
+
* Create a DynamicColor defined by a TonalPalette and HCT tone.
|
|
126
|
+
*
|
|
127
|
+
* @param args Functions with DynamicScheme as input. Must provide a palette
|
|
128
|
+
* and tone. May provide a background DynamicColor and ToneDeltaPair.
|
|
129
|
+
*/
|
|
130
|
+
static fromPalette(args: FromPaletteOptions): DynamicColor;
|
|
131
|
+
static getInitialToneFromBackground(background?: (scheme: Scheme) => DynamicColor | undefined): (scheme: Scheme) => number;
|
|
132
|
+
/**
|
|
133
|
+
* Given a background tone, finds a foreground tone, while ensuring they reach
|
|
134
|
+
* a contrast ratio that is as close to [ratio] as possible.
|
|
135
|
+
*
|
|
136
|
+
* @param bgTone Tone in HCT. Range is 0 to 100, undefined behavior when it
|
|
137
|
+
* falls outside that range.
|
|
138
|
+
* @param ratio The contrast ratio desired between bgTone and the return
|
|
139
|
+
* value.
|
|
140
|
+
*/
|
|
141
|
+
static foregroundTone(bgTone: number, ratio: number): number;
|
|
142
|
+
/**
|
|
143
|
+
* Returns whether [tone] prefers a light foreground.
|
|
144
|
+
*
|
|
145
|
+
* People prefer white foregrounds on ~T60-70. Observed over time, and also
|
|
146
|
+
* by Andrew Somers during research for APCA.
|
|
147
|
+
*
|
|
148
|
+
* T60 used as to create the smallest discontinuity possible when skipping
|
|
149
|
+
* down to T49 in order to ensure light foregrounds.
|
|
150
|
+
* Since `tertiaryContainer` in dark monochrome scheme requires a tone of
|
|
151
|
+
* 60, it should not be adjusted. Therefore, 60 is excluded here.
|
|
152
|
+
*/
|
|
153
|
+
static tonePrefersLightForeground(tone: number): boolean;
|
|
154
|
+
/**
|
|
155
|
+
* Returns whether [tone] can reach a contrast ratio of 4.5 with a lighter
|
|
156
|
+
* color.
|
|
157
|
+
*/
|
|
158
|
+
static toneAllowsLightForeground(tone: number): boolean;
|
|
159
|
+
/**
|
|
160
|
+
* Adjusts a tone such that white has 4.5 contrast, if the tone is
|
|
161
|
+
* reasonably close to supporting it.
|
|
162
|
+
*/
|
|
163
|
+
static enableLightForeground(tone: number): number;
|
|
164
|
+
/**
|
|
165
|
+
* Returns a deep copy of this DynamicColor.
|
|
166
|
+
*/
|
|
167
|
+
clone(): DynamicColor;
|
|
168
|
+
/**
|
|
169
|
+
* Clears the cache of HCT values for this color. For testing or debugging
|
|
170
|
+
* purposes.
|
|
171
|
+
*/
|
|
172
|
+
clearCache(): void;
|
|
173
|
+
/**
|
|
174
|
+
* Returns a ARGB integer (i.e. a hex code).
|
|
175
|
+
*
|
|
176
|
+
* @param scheme Defines the conditions of the user interface, for example,
|
|
177
|
+
* whether or not it is dark mode or light mode, and what the desired
|
|
178
|
+
* contrast level is.
|
|
179
|
+
*/
|
|
180
|
+
getArgb(scheme: Scheme): number;
|
|
181
|
+
/**
|
|
182
|
+
* Returns a color, expressed in the HCT color space, that this
|
|
183
|
+
* DynamicColor is under the conditions in scheme.
|
|
184
|
+
*
|
|
185
|
+
* @param scheme Defines the conditions of the user interface, for example,
|
|
186
|
+
* whether or not it is dark mode or light mode, and what the desired
|
|
187
|
+
* contrast level is.
|
|
188
|
+
*/
|
|
189
|
+
getHct(scheme: Scheme): Hct;
|
|
190
|
+
/**
|
|
191
|
+
* Returns a tone, T in the HCT color space, that this DynamicColor is under
|
|
192
|
+
* the conditions in scheme.
|
|
193
|
+
*
|
|
194
|
+
* @param scheme Defines the conditions of the user interface, for example,
|
|
195
|
+
* whether or not it is dark mode or light mode, and what the desired
|
|
196
|
+
* contrast level is.
|
|
197
|
+
*/
|
|
198
|
+
getTone(scheme: Scheme): number;
|
|
199
|
+
}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2021 Google LLC
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
import { Cam16 } from '@material/material-color-utilities';
|
|
18
|
+
/**
|
|
19
|
+
* A class that solves the HCT equation.
|
|
20
|
+
*/
|
|
21
|
+
export declare class HctSolver {
|
|
22
|
+
static SCALED_DISCOUNT_FROM_LINRGB: number[][];
|
|
23
|
+
static LINRGB_FROM_SCALED_DISCOUNT: number[][];
|
|
24
|
+
static Y_FROM_LINRGB: number[];
|
|
25
|
+
static CRITICAL_PLANES: number[];
|
|
26
|
+
/**
|
|
27
|
+
* Finds an sRGB color with the given hue, chroma, and L*, if
|
|
28
|
+
* possible.
|
|
29
|
+
*
|
|
30
|
+
* @param hueDegrees The desired hue, in degrees.
|
|
31
|
+
* @param chroma The desired chroma.
|
|
32
|
+
* @param lstar The desired L*.
|
|
33
|
+
* @return A hexadecimal representing the sRGB color. The color
|
|
34
|
+
* has sufficiently close hue, chroma, and L* to the desired
|
|
35
|
+
* values, if possible; otherwise, the hue and L* will be
|
|
36
|
+
* sufficiently close, and chroma will be maximized.
|
|
37
|
+
*/
|
|
38
|
+
static solveToInt(hueDegrees: number, chroma: number, lstar: number): number;
|
|
39
|
+
/**
|
|
40
|
+
* Finds an sRGB color with the given hue, chroma, and L*, if
|
|
41
|
+
* possible.
|
|
42
|
+
*
|
|
43
|
+
* @param hueDegrees The desired hue, in degrees.
|
|
44
|
+
* @param chroma The desired chroma.
|
|
45
|
+
* @param lstar The desired L*.
|
|
46
|
+
* @return An CAM16 object representing the sRGB color. The color
|
|
47
|
+
* has sufficiently close hue, chroma, and L* to the desired
|
|
48
|
+
* values, if possible; otherwise, the hue and L* will be
|
|
49
|
+
* sufficiently close, and chroma will be maximized.
|
|
50
|
+
*/
|
|
51
|
+
static solveToCam(hueDegrees: number, chroma: number, lstar: number): Cam16;
|
|
52
|
+
/**
|
|
53
|
+
* Sanitizes a small enough angle in radians.
|
|
54
|
+
*
|
|
55
|
+
* @param angle An angle in radians; must not deviate too much
|
|
56
|
+
* from 0.
|
|
57
|
+
* @return A coterminal angle between 0 and 2pi.
|
|
58
|
+
*/
|
|
59
|
+
private static sanitizeRadians;
|
|
60
|
+
/**
|
|
61
|
+
* Delinearizes an RGB component, returning a floating-point
|
|
62
|
+
* number.
|
|
63
|
+
*
|
|
64
|
+
* @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
|
|
65
|
+
* linear R/G/B channel
|
|
66
|
+
* @return 0.0 <= output <= 255.0, color channel converted to
|
|
67
|
+
* regular RGB space
|
|
68
|
+
*/
|
|
69
|
+
private static trueDelinearized;
|
|
70
|
+
private static chromaticAdaptation;
|
|
71
|
+
/**
|
|
72
|
+
* Returns the hue of a linear RGB color in CAM16.
|
|
73
|
+
*
|
|
74
|
+
* @param linrgb The linear RGB coordinates of a color.
|
|
75
|
+
* @return The hue of the color in CAM16, in radians.
|
|
76
|
+
*/
|
|
77
|
+
private static hueOf;
|
|
78
|
+
private static areInCyclicOrder;
|
|
79
|
+
/**
|
|
80
|
+
* Solves the lerp equation.
|
|
81
|
+
*
|
|
82
|
+
* @param source The starting number.
|
|
83
|
+
* @param mid The number in the middle.
|
|
84
|
+
* @param target The ending number.
|
|
85
|
+
* @return A number t such that lerp(source, target, t) = mid.
|
|
86
|
+
*/
|
|
87
|
+
private static intercept;
|
|
88
|
+
private static lerpPoint;
|
|
89
|
+
/**
|
|
90
|
+
* Intersects a segment with a plane.
|
|
91
|
+
*
|
|
92
|
+
* @param source The coordinates of point A.
|
|
93
|
+
* @param coordinate The R-, G-, or B-coordinate of the plane.
|
|
94
|
+
* @param target The coordinates of point B.
|
|
95
|
+
* @param axis The axis the plane is perpendicular with. (0: R, 1:
|
|
96
|
+
* G, 2: B)
|
|
97
|
+
* @return The intersection point of the segment AB with the plane
|
|
98
|
+
* R=coordinate, G=coordinate, or B=coordinate
|
|
99
|
+
*/
|
|
100
|
+
private static setCoordinate;
|
|
101
|
+
private static isBounded;
|
|
102
|
+
/**
|
|
103
|
+
* Returns the nth possible vertex of the polygonal intersection.
|
|
104
|
+
*
|
|
105
|
+
* @param y The Y value of the plane.
|
|
106
|
+
* @param n The zero-based index of the point. 0 <= n <= 11.
|
|
107
|
+
* @return The nth possible vertex of the polygonal intersection
|
|
108
|
+
* of the y plane and the RGB cube, in linear RGB coordinates, if
|
|
109
|
+
* it exists. If this possible vertex lies outside of the cube,
|
|
110
|
+
* [-1.0, -1.0, -1.0] is returned.
|
|
111
|
+
*/
|
|
112
|
+
private static nthVertex;
|
|
113
|
+
/**
|
|
114
|
+
* Finds the segment containing the desired color.
|
|
115
|
+
*
|
|
116
|
+
* @param y The Y value of the color.
|
|
117
|
+
* @param targetHue The hue of the color.
|
|
118
|
+
* @return A list of two sets of linear RGB coordinates, each
|
|
119
|
+
* corresponding to an endpoint of the segment containing the
|
|
120
|
+
* desired color.
|
|
121
|
+
*/
|
|
122
|
+
private static bisectToSegment;
|
|
123
|
+
private static midpoint;
|
|
124
|
+
private static criticalPlaneBelow;
|
|
125
|
+
private static criticalPlaneAbove;
|
|
126
|
+
/**
|
|
127
|
+
* Finds a color with the given Y and hue on the boundary of the
|
|
128
|
+
* cube.
|
|
129
|
+
*
|
|
130
|
+
* @param y The Y value of the color.
|
|
131
|
+
* @param targetHue The hue of the color.
|
|
132
|
+
* @return The desired color, in linear RGB coordinates.
|
|
133
|
+
*/
|
|
134
|
+
private static bisectToLimit;
|
|
135
|
+
private static inverseChromaticAdaptation;
|
|
136
|
+
/**
|
|
137
|
+
* Finds a color with the given hue, chroma, and Y.
|
|
138
|
+
*
|
|
139
|
+
* @param hueRadians The desired hue in radians.
|
|
140
|
+
* @param chroma The desired chroma.
|
|
141
|
+
* @param y The desired Y.
|
|
142
|
+
* @return The desired color as a hexadecimal integer, if found; 0
|
|
143
|
+
* otherwise.
|
|
144
|
+
*/
|
|
145
|
+
private static findResultByJ;
|
|
146
|
+
}
|