@udixio/theme 1.3.1 → 2.1.0
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/CHANGELOG.md +23 -2
- package/dist/API.d.ts +7 -4
- package/dist/API.d.ts.map +1 -1
- package/dist/app.container.d.ts +1 -2
- package/dist/app.container.d.ts.map +1 -1
- package/dist/bin.cjs +1 -1
- package/dist/bin.js +1 -1
- package/dist/browser.cjs +23 -18
- package/dist/browser.js +34 -29
- package/dist/color/color.api.d.ts +16 -31
- package/dist/color/color.api.d.ts.map +1 -1
- package/dist/color/color.d.ts +100 -0
- package/dist/color/color.d.ts.map +1 -0
- package/dist/color/color.manager.d.ts +9 -18
- package/dist/color/color.manager.d.ts.map +1 -1
- package/dist/color/color.utils.d.ts +14 -3
- package/dist/color/color.utils.d.ts.map +1 -1
- package/dist/color/default-color.d.ts +5 -1
- package/dist/color/default-color.d.ts.map +1 -1
- package/dist/color/index.d.ts +1 -1
- package/dist/color/index.d.ts.map +1 -1
- package/dist/config/config.interface.d.ts +4 -4
- package/dist/config/config.interface.d.ts.map +1 -1
- package/dist/context/context.d.ts +41 -0
- package/dist/context/context.d.ts.map +1 -0
- package/dist/context/context.module.d.ts +3 -0
- package/dist/context/context.module.d.ts.map +1 -0
- package/dist/context/index.d.ts +3 -0
- package/dist/context/index.d.ts.map +1 -0
- package/dist/font.plugin-5Xpo-ntw.js +228 -0
- package/dist/font.plugin-FPU_gL1Y.cjs +227 -0
- package/dist/index.d.ts +6 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/{load-from-path-Bo1kCfh9.js → load-from-path-CBnO8ESw.js} +1 -1
- package/dist/{load-from-path-DoZnR1-p.cjs → load-from-path-kuofMGN3.cjs} +2 -2
- package/dist/loader/loader.d.ts +1 -1
- package/dist/loader/loader.d.ts.map +1 -1
- package/dist/loader-BzsrGBu-.cjs +3905 -0
- package/dist/loader-CoayTlSl.js +3906 -0
- package/dist/material-color-utilities/dynamic_color.d.ts +0 -22
- package/dist/material-color-utilities/dynamic_color.d.ts.map +1 -1
- package/dist/material-color-utilities/toneDeltaPair.d.ts +8 -8
- package/dist/material-color-utilities/toneDeltaPair.d.ts.map +1 -1
- package/dist/node.cjs +24 -19
- package/dist/node.js +36 -31
- package/dist/palette/index.d.ts +4 -0
- package/dist/palette/index.d.ts.map +1 -0
- package/dist/palette/palette.api.d.ts +13 -0
- package/dist/palette/palette.api.d.ts.map +1 -0
- package/dist/palette/palette.d.ts +33 -0
- package/dist/palette/palette.d.ts.map +1 -0
- package/dist/palette/palette.manager.d.ts +20 -0
- package/dist/palette/palette.manager.d.ts.map +1 -0
- package/dist/palette/palette.module.d.ts +3 -0
- package/dist/palette/palette.module.d.ts.map +1 -0
- package/dist/plugins/font/font.plugin.d.ts +1 -1
- package/dist/plugins/font/font.plugin.d.ts.map +1 -1
- package/dist/variant/index.d.ts +3 -0
- package/dist/variant/index.d.ts.map +1 -0
- package/dist/variant/variant.d.ts +31 -0
- package/dist/variant/variant.d.ts.map +1 -0
- package/dist/variant/variants/expressive.variant.d.ts +2 -0
- package/dist/variant/variants/expressive.variant.d.ts.map +1 -0
- package/dist/{theme → variant}/variants/index.d.ts +1 -1
- package/dist/variant/variants/index.d.ts.map +1 -0
- package/dist/variant/variants/neutral.variant.d.ts.map +1 -0
- package/dist/variant/variants/tonal-spot.variant.d.ts.map +1 -0
- package/dist/variant/variants/udixio.variant.d.ts +3 -0
- package/dist/variant/variants/udixio.variant.d.ts.map +1 -0
- package/dist/variant/variants/vibrant.variant.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/API.ts +12 -5
- package/src/app.container.ts +22 -11
- package/src/bootstrap.ts +1 -1
- package/src/color/color.api.ts +189 -47
- package/src/color/color.manager.ts +34 -189
- package/src/color/color.ts +295 -0
- package/src/color/color.utils.ts +48 -3
- package/src/color/default-color.ts +390 -425
- package/src/color/index.ts +1 -1
- package/src/config/config.interface.ts +5 -4
- package/src/context/context.module.ts +7 -0
- package/src/context/context.ts +169 -0
- package/src/context/index.ts +2 -0
- package/src/index.ts +6 -4
- package/src/loader/loader.ts +11 -24
- package/src/material-color-utilities/dynamic_color.ts +25 -34
- package/src/material-color-utilities/toneDeltaPair.ts +44 -41
- package/src/palette/index.ts +3 -0
- package/src/palette/palette.api.ts +43 -0
- package/src/palette/palette.manager.ts +74 -0
- package/src/palette/palette.module.ts +9 -0
- package/src/palette/palette.ts +206 -0
- package/src/plugins/font/font.plugin.ts +1 -1
- package/src/variant/index.ts +2 -0
- package/src/variant/variant.ts +84 -0
- package/src/{theme → variant}/variants/expressive.variant.ts +33 -29
- package/src/{theme → variant}/variants/index.ts +2 -2
- package/src/variant/variants/neutral.variant.ts +47 -0
- package/src/variant/variants/tonal-spot.variant.ts +37 -0
- package/src/variant/variants/udixio.variant.ts +846 -0
- package/src/{theme → variant}/variants/vibrant.variant.ts +23 -22
- package/dist/color/configurable-color.d.ts +0 -31
- package/dist/color/configurable-color.d.ts.map +0 -1
- package/dist/define-config-BasMdCqD.js +0 -430
- package/dist/define-config-CKSsLMnc.cjs +0 -429
- package/dist/loader-C8_TyOuS.js +0 -2698
- package/dist/loader-R7hccp8_.cjs +0 -2697
- package/dist/theme/index.d.ts +0 -8
- package/dist/theme/index.d.ts.map +0 -1
- package/dist/theme/scheme.d.ts +0 -20
- package/dist/theme/scheme.d.ts.map +0 -1
- package/dist/theme/scheme.manager.d.ts +0 -31
- package/dist/theme/scheme.manager.d.ts.map +0 -1
- package/dist/theme/theme.api.d.ts +0 -24
- package/dist/theme/theme.api.d.ts.map +0 -1
- package/dist/theme/theme.module.d.ts +0 -3
- package/dist/theme/theme.module.d.ts.map +0 -1
- package/dist/theme/variant.d.ts +0 -36
- package/dist/theme/variant.d.ts.map +0 -1
- package/dist/theme/variant.manager.d.ts +0 -14
- package/dist/theme/variant.manager.d.ts.map +0 -1
- package/dist/theme/variants/expressive.variant.d.ts +0 -3
- package/dist/theme/variants/expressive.variant.d.ts.map +0 -1
- package/dist/theme/variants/fidelity.variant.d.ts +0 -3
- package/dist/theme/variants/fidelity.variant.d.ts.map +0 -1
- package/dist/theme/variants/index.d.ts.map +0 -1
- package/dist/theme/variants/neutral.variant.d.ts.map +0 -1
- package/dist/theme/variants/tonal-spot.variant.d.ts.map +0 -1
- package/dist/theme/variants/vibrant.variant.d.ts.map +0 -1
- package/src/color/configurable-color.ts +0 -67
- package/src/theme/index.ts +0 -7
- package/src/theme/scheme.manager.ts +0 -100
- package/src/theme/scheme.ts +0 -66
- package/src/theme/theme.api.ts +0 -82
- package/src/theme/theme.module.ts +0 -11
- package/src/theme/variant.manager.ts +0 -58
- package/src/theme/variant.ts +0 -53
- package/src/theme/variants/fidelity.variant.ts +0 -38
- package/src/theme/variants/neutral.variant.ts +0 -45
- package/src/theme/variants/tonal-spot.variant.ts +0 -35
- /package/dist/{theme → variant}/variants/neutral.variant.d.ts +0 -0
- /package/dist/{theme → variant}/variants/tonal-spot.variant.d.ts +0 -0
- /package/dist/{theme → variant}/variants/vibrant.variant.d.ts +0 -0
|
@@ -0,0 +1,3905 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
4
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
+
const awilix = require("awilix");
|
|
6
|
+
const materialColorUtilities = require("@material/material-color-utilities");
|
|
7
|
+
class API {
|
|
8
|
+
constructor({
|
|
9
|
+
colorApi,
|
|
10
|
+
pluginApi,
|
|
11
|
+
context,
|
|
12
|
+
paletteApi
|
|
13
|
+
}) {
|
|
14
|
+
__publicField(this, "colors");
|
|
15
|
+
__publicField(this, "plugins");
|
|
16
|
+
__publicField(this, "context");
|
|
17
|
+
__publicField(this, "palettes");
|
|
18
|
+
colorApi.api = this;
|
|
19
|
+
this.context = context;
|
|
20
|
+
this.plugins = pluginApi;
|
|
21
|
+
this.colors = colorApi;
|
|
22
|
+
this.palettes = paletteApi;
|
|
23
|
+
}
|
|
24
|
+
async load() {
|
|
25
|
+
return this.plugins.loadPlugins();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* @license
|
|
30
|
+
* Copyright 2021 Google LLC
|
|
31
|
+
*
|
|
32
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
33
|
+
* you may not use this file except in compliance with the License.
|
|
34
|
+
* You may obtain a copy of the License at
|
|
35
|
+
*
|
|
36
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
37
|
+
*
|
|
38
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
39
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
40
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
41
|
+
* See the License for the specific language governing permissions and
|
|
42
|
+
* limitations under the License.
|
|
43
|
+
*/
|
|
44
|
+
const _HctSolver = class _HctSolver {
|
|
45
|
+
/**
|
|
46
|
+
* Finds an sRGB color with the given hue, chroma, and L*, if
|
|
47
|
+
* possible.
|
|
48
|
+
*
|
|
49
|
+
* @param hueDegrees The desired hue, in degrees.
|
|
50
|
+
* @param chroma The desired chroma.
|
|
51
|
+
* @param lstar The desired L*.
|
|
52
|
+
* @return A hexadecimal representing the sRGB color. The color
|
|
53
|
+
* has sufficiently close hue, chroma, and L* to the desired
|
|
54
|
+
* values, if possible; otherwise, the hue and L* will be
|
|
55
|
+
* sufficiently close, and chroma will be maximized.
|
|
56
|
+
*/
|
|
57
|
+
static solveToInt(hueDegrees, chroma, lstar) {
|
|
58
|
+
if (chroma < 1e-4 || lstar < 1e-4 || lstar > 99.9999) {
|
|
59
|
+
return materialColorUtilities.argbFromLstar(lstar);
|
|
60
|
+
}
|
|
61
|
+
hueDegrees = materialColorUtilities.sanitizeDegreesDouble(hueDegrees);
|
|
62
|
+
const hueRadians = hueDegrees / 180 * Math.PI;
|
|
63
|
+
const y = materialColorUtilities.yFromLstar(lstar);
|
|
64
|
+
const exactAnswer = _HctSolver.findResultByJ(hueRadians, chroma, y);
|
|
65
|
+
if (exactAnswer !== 0) {
|
|
66
|
+
return exactAnswer;
|
|
67
|
+
}
|
|
68
|
+
const linrgb = _HctSolver.bisectToLimit(y, hueRadians);
|
|
69
|
+
return materialColorUtilities.argbFromLinrgb(linrgb);
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Finds an sRGB color with the given hue, chroma, and L*, if
|
|
73
|
+
* possible.
|
|
74
|
+
*
|
|
75
|
+
* @param hueDegrees The desired hue, in degrees.
|
|
76
|
+
* @param chroma The desired chroma.
|
|
77
|
+
* @param lstar The desired L*.
|
|
78
|
+
* @return An CAM16 object representing the sRGB color. The color
|
|
79
|
+
* has sufficiently close hue, chroma, and L* to the desired
|
|
80
|
+
* values, if possible; otherwise, the hue and L* will be
|
|
81
|
+
* sufficiently close, and chroma will be maximized.
|
|
82
|
+
*/
|
|
83
|
+
static solveToCam(hueDegrees, chroma, lstar) {
|
|
84
|
+
return materialColorUtilities.Cam16.fromInt(_HctSolver.solveToInt(hueDegrees, chroma, lstar));
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Sanitizes a small enough angle in radians.
|
|
88
|
+
*
|
|
89
|
+
* @param angle An angle in radians; must not deviate too much
|
|
90
|
+
* from 0.
|
|
91
|
+
* @return A coterminal angle between 0 and 2pi.
|
|
92
|
+
*/
|
|
93
|
+
static sanitizeRadians(angle) {
|
|
94
|
+
return (angle + Math.PI * 8) % (Math.PI * 2);
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Delinearizes an RGB component, returning a floating-point
|
|
98
|
+
* number.
|
|
99
|
+
*
|
|
100
|
+
* @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
|
|
101
|
+
* linear R/G/B channel
|
|
102
|
+
* @return 0.0 <= output <= 255.0, color channel converted to
|
|
103
|
+
* regular RGB space
|
|
104
|
+
*/
|
|
105
|
+
static trueDelinearized(rgbComponent) {
|
|
106
|
+
const normalized = rgbComponent / 100;
|
|
107
|
+
let delinearized = 0;
|
|
108
|
+
if (normalized <= 31308e-7) {
|
|
109
|
+
delinearized = normalized * 12.92;
|
|
110
|
+
} else {
|
|
111
|
+
delinearized = 1.055 * Math.pow(normalized, 1 / 2.4) - 0.055;
|
|
112
|
+
}
|
|
113
|
+
return delinearized * 255;
|
|
114
|
+
}
|
|
115
|
+
static chromaticAdaptation(component) {
|
|
116
|
+
const af = Math.pow(Math.abs(component), 0.42);
|
|
117
|
+
return materialColorUtilities.signum(component) * 400 * af / (af + 27.13);
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Returns the hue of a linear RGB color in CAM16.
|
|
121
|
+
*
|
|
122
|
+
* @param linrgb The linear RGB coordinates of a color.
|
|
123
|
+
* @return The hue of the color in CAM16, in radians.
|
|
124
|
+
*/
|
|
125
|
+
static hueOf(linrgb) {
|
|
126
|
+
const scaledDiscount = materialColorUtilities.matrixMultiply(
|
|
127
|
+
linrgb,
|
|
128
|
+
_HctSolver.SCALED_DISCOUNT_FROM_LINRGB
|
|
129
|
+
);
|
|
130
|
+
const rA = _HctSolver.chromaticAdaptation(scaledDiscount[0]);
|
|
131
|
+
const gA = _HctSolver.chromaticAdaptation(scaledDiscount[1]);
|
|
132
|
+
const bA = _HctSolver.chromaticAdaptation(scaledDiscount[2]);
|
|
133
|
+
const a = (11 * rA + -12 * gA + bA) / 11;
|
|
134
|
+
const b = (rA + gA - 2 * bA) / 9;
|
|
135
|
+
return Math.atan2(b, a);
|
|
136
|
+
}
|
|
137
|
+
static areInCyclicOrder(a, b, c) {
|
|
138
|
+
const deltaAB = _HctSolver.sanitizeRadians(b - a);
|
|
139
|
+
const deltaAC = _HctSolver.sanitizeRadians(c - a);
|
|
140
|
+
return deltaAB < deltaAC;
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* Solves the lerp equation.
|
|
144
|
+
*
|
|
145
|
+
* @param source The starting number.
|
|
146
|
+
* @param mid The number in the middle.
|
|
147
|
+
* @param target The ending number.
|
|
148
|
+
* @return A number t such that lerp(source, target, t) = mid.
|
|
149
|
+
*/
|
|
150
|
+
static intercept(source, mid, target) {
|
|
151
|
+
return (mid - source) / (target - source);
|
|
152
|
+
}
|
|
153
|
+
static lerpPoint(source, t, target) {
|
|
154
|
+
return [
|
|
155
|
+
source[0] + (target[0] - source[0]) * t,
|
|
156
|
+
source[1] + (target[1] - source[1]) * t,
|
|
157
|
+
source[2] + (target[2] - source[2]) * t
|
|
158
|
+
];
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* Intersects a segment with a plane.
|
|
162
|
+
*
|
|
163
|
+
* @param source The coordinates of point A.
|
|
164
|
+
* @param coordinate The R-, G-, or B-coordinate of the plane.
|
|
165
|
+
* @param target The coordinates of point B.
|
|
166
|
+
* @param axis The axis the plane is perpendicular with. (0: R, 1:
|
|
167
|
+
* G, 2: B)
|
|
168
|
+
* @return The intersection point of the segment AB with the plane
|
|
169
|
+
* R=coordinate, G=coordinate, or B=coordinate
|
|
170
|
+
*/
|
|
171
|
+
static setCoordinate(source, coordinate, target, axis) {
|
|
172
|
+
const t = _HctSolver.intercept(source[axis], coordinate, target[axis]);
|
|
173
|
+
return _HctSolver.lerpPoint(source, t, target);
|
|
174
|
+
}
|
|
175
|
+
static isBounded(x) {
|
|
176
|
+
return 0 <= x && x <= 100;
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* Returns the nth possible vertex of the polygonal intersection.
|
|
180
|
+
*
|
|
181
|
+
* @param y The Y value of the plane.
|
|
182
|
+
* @param n The zero-based index of the point. 0 <= n <= 11.
|
|
183
|
+
* @return The nth possible vertex of the polygonal intersection
|
|
184
|
+
* of the y plane and the RGB cube, in linear RGB coordinates, if
|
|
185
|
+
* it exists. If this possible vertex lies outside of the cube,
|
|
186
|
+
* [-1.0, -1.0, -1.0] is returned.
|
|
187
|
+
*/
|
|
188
|
+
static nthVertex(y, n) {
|
|
189
|
+
const kR = _HctSolver.Y_FROM_LINRGB[0];
|
|
190
|
+
const kG = _HctSolver.Y_FROM_LINRGB[1];
|
|
191
|
+
const kB = _HctSolver.Y_FROM_LINRGB[2];
|
|
192
|
+
const coordA = n % 4 <= 1 ? 0 : 100;
|
|
193
|
+
const coordB = n % 2 === 0 ? 0 : 100;
|
|
194
|
+
if (n < 4) {
|
|
195
|
+
const g = coordA;
|
|
196
|
+
const b = coordB;
|
|
197
|
+
const r = (y - g * kG - b * kB) / kR;
|
|
198
|
+
if (_HctSolver.isBounded(r)) {
|
|
199
|
+
return [r, g, b];
|
|
200
|
+
} else {
|
|
201
|
+
return [-1, -1, -1];
|
|
202
|
+
}
|
|
203
|
+
} else if (n < 8) {
|
|
204
|
+
const b = coordA;
|
|
205
|
+
const r = coordB;
|
|
206
|
+
const g = (y - r * kR - b * kB) / kG;
|
|
207
|
+
if (_HctSolver.isBounded(g)) {
|
|
208
|
+
return [r, g, b];
|
|
209
|
+
} else {
|
|
210
|
+
return [-1, -1, -1];
|
|
211
|
+
}
|
|
212
|
+
} else {
|
|
213
|
+
const r = coordA;
|
|
214
|
+
const g = coordB;
|
|
215
|
+
const b = (y - r * kR - g * kG) / kB;
|
|
216
|
+
if (_HctSolver.isBounded(b)) {
|
|
217
|
+
return [r, g, b];
|
|
218
|
+
} else {
|
|
219
|
+
return [-1, -1, -1];
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
/**
|
|
224
|
+
* Finds the segment containing the desired color.
|
|
225
|
+
*
|
|
226
|
+
* @param y The Y value of the color.
|
|
227
|
+
* @param targetHue The hue of the color.
|
|
228
|
+
* @return A list of two sets of linear RGB coordinates, each
|
|
229
|
+
* corresponding to an endpoint of the segment containing the
|
|
230
|
+
* desired color.
|
|
231
|
+
*/
|
|
232
|
+
static bisectToSegment(y, targetHue) {
|
|
233
|
+
let left = [-1, -1, -1];
|
|
234
|
+
let right = left;
|
|
235
|
+
let leftHue = 0;
|
|
236
|
+
let rightHue = 0;
|
|
237
|
+
let initialized = false;
|
|
238
|
+
let uncut = true;
|
|
239
|
+
for (let n = 0; n < 12; n++) {
|
|
240
|
+
const mid = _HctSolver.nthVertex(y, n);
|
|
241
|
+
if (mid[0] < 0) {
|
|
242
|
+
continue;
|
|
243
|
+
}
|
|
244
|
+
const midHue = _HctSolver.hueOf(mid);
|
|
245
|
+
if (!initialized) {
|
|
246
|
+
left = mid;
|
|
247
|
+
right = mid;
|
|
248
|
+
leftHue = midHue;
|
|
249
|
+
rightHue = midHue;
|
|
250
|
+
initialized = true;
|
|
251
|
+
continue;
|
|
252
|
+
}
|
|
253
|
+
if (uncut || _HctSolver.areInCyclicOrder(leftHue, midHue, rightHue)) {
|
|
254
|
+
uncut = false;
|
|
255
|
+
if (_HctSolver.areInCyclicOrder(leftHue, targetHue, midHue)) {
|
|
256
|
+
right = mid;
|
|
257
|
+
rightHue = midHue;
|
|
258
|
+
} else {
|
|
259
|
+
left = mid;
|
|
260
|
+
leftHue = midHue;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
return [left, right];
|
|
265
|
+
}
|
|
266
|
+
static midpoint(a, b) {
|
|
267
|
+
return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2, (a[2] + b[2]) / 2];
|
|
268
|
+
}
|
|
269
|
+
static criticalPlaneBelow(x) {
|
|
270
|
+
return Math.floor(x - 0.5);
|
|
271
|
+
}
|
|
272
|
+
static criticalPlaneAbove(x) {
|
|
273
|
+
return Math.ceil(x - 0.5);
|
|
274
|
+
}
|
|
275
|
+
/**
|
|
276
|
+
* Finds a color with the given Y and hue on the boundary of the
|
|
277
|
+
* cube.
|
|
278
|
+
*
|
|
279
|
+
* @param y The Y value of the color.
|
|
280
|
+
* @param targetHue The hue of the color.
|
|
281
|
+
* @return The desired color, in linear RGB coordinates.
|
|
282
|
+
*/
|
|
283
|
+
static bisectToLimit(y, targetHue) {
|
|
284
|
+
const segment = _HctSolver.bisectToSegment(y, targetHue);
|
|
285
|
+
let left = segment[0];
|
|
286
|
+
let leftHue = _HctSolver.hueOf(left);
|
|
287
|
+
let right = segment[1];
|
|
288
|
+
for (let axis = 0; axis < 3; axis++) {
|
|
289
|
+
if (left[axis] !== right[axis]) {
|
|
290
|
+
let lPlane = -1;
|
|
291
|
+
let rPlane = 255;
|
|
292
|
+
if (left[axis] < right[axis]) {
|
|
293
|
+
lPlane = _HctSolver.criticalPlaneBelow(
|
|
294
|
+
_HctSolver.trueDelinearized(left[axis])
|
|
295
|
+
);
|
|
296
|
+
rPlane = _HctSolver.criticalPlaneAbove(
|
|
297
|
+
_HctSolver.trueDelinearized(right[axis])
|
|
298
|
+
);
|
|
299
|
+
} else {
|
|
300
|
+
lPlane = _HctSolver.criticalPlaneAbove(
|
|
301
|
+
_HctSolver.trueDelinearized(left[axis])
|
|
302
|
+
);
|
|
303
|
+
rPlane = _HctSolver.criticalPlaneBelow(
|
|
304
|
+
_HctSolver.trueDelinearized(right[axis])
|
|
305
|
+
);
|
|
306
|
+
}
|
|
307
|
+
for (let i = 0; i < 8; i++) {
|
|
308
|
+
if (Math.abs(rPlane - lPlane) <= 1) {
|
|
309
|
+
break;
|
|
310
|
+
} else {
|
|
311
|
+
const mPlane = Math.floor((lPlane + rPlane) / 2);
|
|
312
|
+
const midPlaneCoordinate = _HctSolver.CRITICAL_PLANES[mPlane];
|
|
313
|
+
const mid = _HctSolver.setCoordinate(
|
|
314
|
+
left,
|
|
315
|
+
midPlaneCoordinate,
|
|
316
|
+
right,
|
|
317
|
+
axis
|
|
318
|
+
);
|
|
319
|
+
const midHue = _HctSolver.hueOf(mid);
|
|
320
|
+
if (_HctSolver.areInCyclicOrder(leftHue, targetHue, midHue)) {
|
|
321
|
+
right = mid;
|
|
322
|
+
rPlane = mPlane;
|
|
323
|
+
} else {
|
|
324
|
+
left = mid;
|
|
325
|
+
leftHue = midHue;
|
|
326
|
+
lPlane = mPlane;
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
return _HctSolver.midpoint(left, right);
|
|
333
|
+
}
|
|
334
|
+
static inverseChromaticAdaptation(adapted) {
|
|
335
|
+
const adaptedAbs = Math.abs(adapted);
|
|
336
|
+
const base = Math.max(0, 27.13 * adaptedAbs / (400 - adaptedAbs));
|
|
337
|
+
return materialColorUtilities.signum(adapted) * Math.pow(base, 1 / 0.42);
|
|
338
|
+
}
|
|
339
|
+
/**
|
|
340
|
+
* Finds a color with the given hue, chroma, and Y.
|
|
341
|
+
*
|
|
342
|
+
* @param hueRadians The desired hue in radians.
|
|
343
|
+
* @param chroma The desired chroma.
|
|
344
|
+
* @param y The desired Y.
|
|
345
|
+
* @return The desired color as a hexadecimal integer, if found; 0
|
|
346
|
+
* otherwise.
|
|
347
|
+
*/
|
|
348
|
+
static findResultByJ(hueRadians, chroma, y) {
|
|
349
|
+
let j = Math.sqrt(y) * 11;
|
|
350
|
+
const viewingConditions = materialColorUtilities.ViewingConditions.DEFAULT;
|
|
351
|
+
const tInnerCoeff = 1 / Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73);
|
|
352
|
+
const eHue = 0.25 * (Math.cos(hueRadians + 2) + 3.8);
|
|
353
|
+
const p1 = eHue * (5e4 / 13) * viewingConditions.nc * viewingConditions.ncb;
|
|
354
|
+
const hSin = Math.sin(hueRadians);
|
|
355
|
+
const hCos = Math.cos(hueRadians);
|
|
356
|
+
for (let iterationRound = 0; iterationRound < 5; iterationRound++) {
|
|
357
|
+
const jNormalized = j / 100;
|
|
358
|
+
const alpha = chroma === 0 || j === 0 ? 0 : chroma / Math.sqrt(jNormalized);
|
|
359
|
+
const t = Math.pow(alpha * tInnerCoeff, 1 / 0.9);
|
|
360
|
+
const ac = viewingConditions.aw * Math.pow(jNormalized, 1 / viewingConditions.c / viewingConditions.z);
|
|
361
|
+
const p2 = ac / viewingConditions.nbb;
|
|
362
|
+
const gamma = 23 * (p2 + 0.305) * t / (23 * p1 + 11 * t * hCos + 108 * t * hSin);
|
|
363
|
+
const a = gamma * hCos;
|
|
364
|
+
const b = gamma * hSin;
|
|
365
|
+
const rA = (460 * p2 + 451 * a + 288 * b) / 1403;
|
|
366
|
+
const gA = (460 * p2 - 891 * a - 261 * b) / 1403;
|
|
367
|
+
const bA = (460 * p2 - 220 * a - 6300 * b) / 1403;
|
|
368
|
+
const rCScaled = _HctSolver.inverseChromaticAdaptation(rA);
|
|
369
|
+
const gCScaled = _HctSolver.inverseChromaticAdaptation(gA);
|
|
370
|
+
const bCScaled = _HctSolver.inverseChromaticAdaptation(bA);
|
|
371
|
+
const linrgb = materialColorUtilities.matrixMultiply(
|
|
372
|
+
[rCScaled, gCScaled, bCScaled],
|
|
373
|
+
_HctSolver.LINRGB_FROM_SCALED_DISCOUNT
|
|
374
|
+
);
|
|
375
|
+
if (linrgb[0] < 0 || linrgb[1] < 0 || linrgb[2] < 0) {
|
|
376
|
+
return 0;
|
|
377
|
+
}
|
|
378
|
+
const kR = _HctSolver.Y_FROM_LINRGB[0];
|
|
379
|
+
const kG = _HctSolver.Y_FROM_LINRGB[1];
|
|
380
|
+
const kB = _HctSolver.Y_FROM_LINRGB[2];
|
|
381
|
+
const fnj = kR * linrgb[0] + kG * linrgb[1] + kB * linrgb[2];
|
|
382
|
+
if (fnj <= 0) {
|
|
383
|
+
return 0;
|
|
384
|
+
}
|
|
385
|
+
if (iterationRound === 4 || Math.abs(fnj - y) < 2e-3) {
|
|
386
|
+
if (linrgb[0] > 100.01 || linrgb[1] > 100.01 || linrgb[2] > 100.01) {
|
|
387
|
+
return 0;
|
|
388
|
+
}
|
|
389
|
+
return materialColorUtilities.argbFromLinrgb(linrgb);
|
|
390
|
+
}
|
|
391
|
+
j = j - (fnj - y) * j / (2 * fnj);
|
|
392
|
+
}
|
|
393
|
+
return 0;
|
|
394
|
+
}
|
|
395
|
+
};
|
|
396
|
+
__publicField(_HctSolver, "SCALED_DISCOUNT_FROM_LINRGB", [
|
|
397
|
+
[0.001200833568784504, 0.002389694492170889, 2795742885861124e-19],
|
|
398
|
+
[5891086651375999e-19, 0.0029785502573438758, 3270666104008398e-19],
|
|
399
|
+
[10146692491640572e-20, 5364214359186694e-19, 0.0032979401770712076]
|
|
400
|
+
]);
|
|
401
|
+
__publicField(_HctSolver, "LINRGB_FROM_SCALED_DISCOUNT", [
|
|
402
|
+
[1373.2198709594231, -1100.4251190754821, -7.278681089101213],
|
|
403
|
+
[-271.815969077903, 559.6580465940733, -32.46047482791194],
|
|
404
|
+
[1.9622899599665666, -57.173814538844006, 308.7233197812385]
|
|
405
|
+
]);
|
|
406
|
+
__publicField(_HctSolver, "Y_FROM_LINRGB", [0.2126, 0.7152, 0.0722]);
|
|
407
|
+
__publicField(_HctSolver, "CRITICAL_PLANES", [
|
|
408
|
+
0.015176349177441876,
|
|
409
|
+
0.045529047532325624,
|
|
410
|
+
0.07588174588720938,
|
|
411
|
+
0.10623444424209313,
|
|
412
|
+
0.13658714259697685,
|
|
413
|
+
0.16693984095186062,
|
|
414
|
+
0.19729253930674434,
|
|
415
|
+
0.2276452376616281,
|
|
416
|
+
0.2579979360165119,
|
|
417
|
+
0.28835063437139563,
|
|
418
|
+
0.3188300904430532,
|
|
419
|
+
0.350925934958123,
|
|
420
|
+
0.3848314933096426,
|
|
421
|
+
0.42057480301049466,
|
|
422
|
+
0.458183274052838,
|
|
423
|
+
0.4976837250274023,
|
|
424
|
+
0.5391024159806381,
|
|
425
|
+
0.5824650784040898,
|
|
426
|
+
0.6277969426914107,
|
|
427
|
+
0.6751227633498623,
|
|
428
|
+
0.7244668422128921,
|
|
429
|
+
0.775853049866786,
|
|
430
|
+
0.829304845476233,
|
|
431
|
+
0.8848452951698498,
|
|
432
|
+
0.942497089126609,
|
|
433
|
+
1.0022825574869039,
|
|
434
|
+
1.0642236851973577,
|
|
435
|
+
1.1283421258858297,
|
|
436
|
+
1.1946592148522128,
|
|
437
|
+
1.2631959812511864,
|
|
438
|
+
1.3339731595349034,
|
|
439
|
+
1.407011200216447,
|
|
440
|
+
1.4823302800086415,
|
|
441
|
+
1.5599503113873272,
|
|
442
|
+
1.6398909516233677,
|
|
443
|
+
1.7221716113234105,
|
|
444
|
+
1.8068114625156377,
|
|
445
|
+
1.8938294463134073,
|
|
446
|
+
1.9832442801866852,
|
|
447
|
+
2.075074464868551,
|
|
448
|
+
2.1693382909216234,
|
|
449
|
+
2.2660538449872063,
|
|
450
|
+
2.36523901573795,
|
|
451
|
+
2.4669114995532007,
|
|
452
|
+
2.5710888059345764,
|
|
453
|
+
2.6777882626779785,
|
|
454
|
+
2.7870270208169257,
|
|
455
|
+
2.898822059350997,
|
|
456
|
+
3.0131901897720907,
|
|
457
|
+
3.1301480604002863,
|
|
458
|
+
3.2497121605402226,
|
|
459
|
+
3.3718988244681087,
|
|
460
|
+
3.4967242352587946,
|
|
461
|
+
3.624204428461639,
|
|
462
|
+
3.754355295633311,
|
|
463
|
+
3.887192587735158,
|
|
464
|
+
4.022731918402185,
|
|
465
|
+
4.160988767090289,
|
|
466
|
+
4.301978482107941,
|
|
467
|
+
4.445716283538092,
|
|
468
|
+
4.592217266055746,
|
|
469
|
+
4.741496401646282,
|
|
470
|
+
4.893568542229298,
|
|
471
|
+
5.048448422192488,
|
|
472
|
+
5.20615066083972,
|
|
473
|
+
5.3666897647573375,
|
|
474
|
+
5.5300801301023865,
|
|
475
|
+
5.696336044816294,
|
|
476
|
+
5.865471690767354,
|
|
477
|
+
6.037501145825082,
|
|
478
|
+
6.212438385869475,
|
|
479
|
+
6.390297286737924,
|
|
480
|
+
6.571091626112461,
|
|
481
|
+
6.7548350853498045,
|
|
482
|
+
6.941541251256611,
|
|
483
|
+
7.131223617812143,
|
|
484
|
+
7.323895587840543,
|
|
485
|
+
7.5195704746346665,
|
|
486
|
+
7.7182615035334345,
|
|
487
|
+
7.919981813454504,
|
|
488
|
+
8.124744458384042,
|
|
489
|
+
8.332562408825165,
|
|
490
|
+
8.543448553206703,
|
|
491
|
+
8.757415699253682,
|
|
492
|
+
8.974476575321063,
|
|
493
|
+
9.194643831691977,
|
|
494
|
+
9.417930041841839,
|
|
495
|
+
9.644347703669503,
|
|
496
|
+
9.873909240696694,
|
|
497
|
+
10.106627003236781,
|
|
498
|
+
10.342513269534024,
|
|
499
|
+
10.58158024687427,
|
|
500
|
+
10.8238400726681,
|
|
501
|
+
11.069304815507364,
|
|
502
|
+
11.317986476196008,
|
|
503
|
+
11.569896988756009,
|
|
504
|
+
11.825048221409341,
|
|
505
|
+
12.083451977536606,
|
|
506
|
+
12.345119996613247,
|
|
507
|
+
12.610063955123938,
|
|
508
|
+
12.878295467455942,
|
|
509
|
+
13.149826086772048,
|
|
510
|
+
13.42466730586372,
|
|
511
|
+
13.702830557985108,
|
|
512
|
+
13.984327217668513,
|
|
513
|
+
14.269168601521828,
|
|
514
|
+
14.55736596900856,
|
|
515
|
+
14.848930523210871,
|
|
516
|
+
15.143873411576273,
|
|
517
|
+
15.44220572664832,
|
|
518
|
+
15.743938506781891,
|
|
519
|
+
16.04908273684337,
|
|
520
|
+
16.35764934889634,
|
|
521
|
+
16.66964922287304,
|
|
522
|
+
16.985093187232053,
|
|
523
|
+
17.30399201960269,
|
|
524
|
+
17.62635644741625,
|
|
525
|
+
17.95219714852476,
|
|
526
|
+
18.281524751807332,
|
|
527
|
+
18.614349837764564,
|
|
528
|
+
18.95068293910138,
|
|
529
|
+
19.290534541298456,
|
|
530
|
+
19.633915083172692,
|
|
531
|
+
19.98083495742689,
|
|
532
|
+
20.331304511189067,
|
|
533
|
+
20.685334046541502,
|
|
534
|
+
21.042933821039977,
|
|
535
|
+
21.404114048223256,
|
|
536
|
+
21.76888489811322,
|
|
537
|
+
22.137256497705877,
|
|
538
|
+
22.50923893145328,
|
|
539
|
+
22.884842241736916,
|
|
540
|
+
23.264076429332462,
|
|
541
|
+
23.6469514538663,
|
|
542
|
+
24.033477234264016,
|
|
543
|
+
24.42366364919083,
|
|
544
|
+
24.817520537484558,
|
|
545
|
+
25.21505769858089,
|
|
546
|
+
25.61628489293138,
|
|
547
|
+
26.021211842414342,
|
|
548
|
+
26.429848230738664,
|
|
549
|
+
26.842203703840827,
|
|
550
|
+
27.258287870275353,
|
|
551
|
+
27.678110301598522,
|
|
552
|
+
28.10168053274597,
|
|
553
|
+
28.529008062403893,
|
|
554
|
+
28.96010235337422,
|
|
555
|
+
29.39497283293396,
|
|
556
|
+
29.83362889318845,
|
|
557
|
+
30.276079891419332,
|
|
558
|
+
30.722335150426627,
|
|
559
|
+
31.172403958865512,
|
|
560
|
+
31.62629557157785,
|
|
561
|
+
32.08401920991837,
|
|
562
|
+
32.54558406207592,
|
|
563
|
+
33.010999283389665,
|
|
564
|
+
33.4802739966603,
|
|
565
|
+
33.953417292456834,
|
|
566
|
+
34.430438229418264,
|
|
567
|
+
34.911345834551085,
|
|
568
|
+
35.39614910352207,
|
|
569
|
+
35.88485700094671,
|
|
570
|
+
36.37747846067349,
|
|
571
|
+
36.87402238606382,
|
|
572
|
+
37.37449765026789,
|
|
573
|
+
37.87891309649659,
|
|
574
|
+
38.38727753828926,
|
|
575
|
+
38.89959975977785,
|
|
576
|
+
39.41588851594697,
|
|
577
|
+
39.93615253289054,
|
|
578
|
+
40.460400508064545,
|
|
579
|
+
40.98864111053629,
|
|
580
|
+
41.520882981230194,
|
|
581
|
+
42.05713473317016,
|
|
582
|
+
42.597404951718396,
|
|
583
|
+
43.141702194811224,
|
|
584
|
+
43.6900349931913,
|
|
585
|
+
44.24241185063697,
|
|
586
|
+
44.798841244188324,
|
|
587
|
+
45.35933162437017,
|
|
588
|
+
45.92389141541209,
|
|
589
|
+
46.49252901546552,
|
|
590
|
+
47.065252796817916,
|
|
591
|
+
47.64207110610409,
|
|
592
|
+
48.22299226451468,
|
|
593
|
+
48.808024568002054,
|
|
594
|
+
49.3971762874833,
|
|
595
|
+
49.9904556690408,
|
|
596
|
+
50.587870934119984,
|
|
597
|
+
51.189430279724725,
|
|
598
|
+
51.79514187861014,
|
|
599
|
+
52.40501387947288,
|
|
600
|
+
53.0190544071392,
|
|
601
|
+
53.637271562750364,
|
|
602
|
+
54.259673423945976,
|
|
603
|
+
54.88626804504493,
|
|
604
|
+
55.517063457223934,
|
|
605
|
+
56.15206766869424,
|
|
606
|
+
56.79128866487574,
|
|
607
|
+
57.43473440856916,
|
|
608
|
+
58.08241284012621,
|
|
609
|
+
58.734331877617365,
|
|
610
|
+
59.39049941699807,
|
|
611
|
+
60.05092333227251,
|
|
612
|
+
60.715611475655585,
|
|
613
|
+
61.38457167773311,
|
|
614
|
+
62.057811747619894,
|
|
615
|
+
62.7353394731159,
|
|
616
|
+
63.417162620860914,
|
|
617
|
+
64.10328893648692,
|
|
618
|
+
64.79372614476921,
|
|
619
|
+
65.48848194977529,
|
|
620
|
+
66.18756403501224,
|
|
621
|
+
66.89098006357258,
|
|
622
|
+
67.59873767827808,
|
|
623
|
+
68.31084450182222,
|
|
624
|
+
69.02730813691093,
|
|
625
|
+
69.74813616640164,
|
|
626
|
+
70.47333615344107,
|
|
627
|
+
71.20291564160104,
|
|
628
|
+
71.93688215501312,
|
|
629
|
+
72.67524319850172,
|
|
630
|
+
73.41800625771542,
|
|
631
|
+
74.16517879925733,
|
|
632
|
+
74.9167682708136,
|
|
633
|
+
75.67278210128072,
|
|
634
|
+
76.43322770089146,
|
|
635
|
+
77.1981124613393,
|
|
636
|
+
77.96744375590167,
|
|
637
|
+
78.74122893956174,
|
|
638
|
+
79.51947534912904,
|
|
639
|
+
80.30219030335869,
|
|
640
|
+
81.08938110306934,
|
|
641
|
+
81.88105503125999,
|
|
642
|
+
82.67721935322541,
|
|
643
|
+
83.4778813166706,
|
|
644
|
+
84.28304815182372,
|
|
645
|
+
85.09272707154808,
|
|
646
|
+
85.90692527145302,
|
|
647
|
+
86.72564993000343,
|
|
648
|
+
87.54890820862819,
|
|
649
|
+
88.3767072518277,
|
|
650
|
+
89.2090541872801,
|
|
651
|
+
90.04595612594655,
|
|
652
|
+
90.88742016217518,
|
|
653
|
+
91.73345337380438,
|
|
654
|
+
92.58406282226491,
|
|
655
|
+
93.43925555268066,
|
|
656
|
+
94.29903859396902,
|
|
657
|
+
95.16341895893969,
|
|
658
|
+
96.03240364439274,
|
|
659
|
+
96.9059996312159,
|
|
660
|
+
97.78421388448044,
|
|
661
|
+
98.6670533535366,
|
|
662
|
+
99.55452497210776
|
|
663
|
+
]);
|
|
664
|
+
let HctSolver = _HctSolver;
|
|
665
|
+
/**
|
|
666
|
+
* @license
|
|
667
|
+
* Copyright 2021 Google LLC
|
|
668
|
+
*
|
|
669
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
670
|
+
* you may not use this file except in compliance with the License.
|
|
671
|
+
* You may obtain a copy of the License at
|
|
672
|
+
*
|
|
673
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
674
|
+
*
|
|
675
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
676
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
677
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
678
|
+
* See the License for the specific language governing permissions and
|
|
679
|
+
* limitations under the License.
|
|
680
|
+
*/
|
|
681
|
+
class Hct {
|
|
682
|
+
constructor(argb) {
|
|
683
|
+
/**
|
|
684
|
+
* @param hue 0 <= hue < 360; invalid values are corrected.
|
|
685
|
+
* @param chroma 0 <= chroma < ?; Informally, colorfulness. The color
|
|
686
|
+
* returned may be lower than the requested chroma. Chroma has a different
|
|
687
|
+
* maximum for any given hue and tone.
|
|
688
|
+
* @param tone 0 <= tone <= 100; invalid values are corrected.
|
|
689
|
+
* @return HCT representation of a color in default viewing conditions.
|
|
690
|
+
*/
|
|
691
|
+
__publicField(this, "internalHue");
|
|
692
|
+
__publicField(this, "internalChroma");
|
|
693
|
+
__publicField(this, "internalTone");
|
|
694
|
+
this.argb = argb;
|
|
695
|
+
const cam = materialColorUtilities.Cam16.fromInt(argb);
|
|
696
|
+
this.internalHue = cam.hue;
|
|
697
|
+
this.internalChroma = cam.chroma;
|
|
698
|
+
this.internalTone = materialColorUtilities.lstarFromArgb(argb);
|
|
699
|
+
this.argb = argb;
|
|
700
|
+
}
|
|
701
|
+
/**
|
|
702
|
+
* A number, in degrees, representing ex. red, orange, yellow, etc.
|
|
703
|
+
* Ranges from 0 <= hue < 360.
|
|
704
|
+
*/
|
|
705
|
+
get hue() {
|
|
706
|
+
return this.internalHue;
|
|
707
|
+
}
|
|
708
|
+
/**
|
|
709
|
+
* @param newHue 0 <= newHue < 360; invalid values are corrected.
|
|
710
|
+
* Chroma may decrease because chroma has a different maximum for any given
|
|
711
|
+
* hue and tone.
|
|
712
|
+
*/
|
|
713
|
+
set hue(newHue) {
|
|
714
|
+
this.setInternalState(
|
|
715
|
+
HctSolver.solveToInt(newHue, this.internalChroma, this.internalTone)
|
|
716
|
+
);
|
|
717
|
+
}
|
|
718
|
+
get chroma() {
|
|
719
|
+
return this.internalChroma;
|
|
720
|
+
}
|
|
721
|
+
/**
|
|
722
|
+
* @param newChroma 0 <= newChroma < ?
|
|
723
|
+
* Chroma may decrease because chroma has a different maximum for any given
|
|
724
|
+
* hue and tone.
|
|
725
|
+
*/
|
|
726
|
+
set chroma(newChroma) {
|
|
727
|
+
this.setInternalState(
|
|
728
|
+
HctSolver.solveToInt(this.internalHue, newChroma, this.internalTone)
|
|
729
|
+
);
|
|
730
|
+
}
|
|
731
|
+
/** Lightness. Ranges from 0 to 100. */
|
|
732
|
+
get tone() {
|
|
733
|
+
return this.internalTone;
|
|
734
|
+
}
|
|
735
|
+
/**
|
|
736
|
+
* @param newTone 0 <= newTone <= 100; invalid valids are corrected.
|
|
737
|
+
* Chroma may decrease because chroma has a different maximum for any given
|
|
738
|
+
* hue and tone.
|
|
739
|
+
*/
|
|
740
|
+
set tone(newTone) {
|
|
741
|
+
this.setInternalState(
|
|
742
|
+
HctSolver.solveToInt(this.internalHue, this.internalChroma, newTone)
|
|
743
|
+
);
|
|
744
|
+
}
|
|
745
|
+
static from(hue, chroma, tone) {
|
|
746
|
+
return new Hct(HctSolver.solveToInt(hue, chroma, tone));
|
|
747
|
+
}
|
|
748
|
+
/**
|
|
749
|
+
* @param argb ARGB representation of a color.
|
|
750
|
+
* @return HCT representation of a color in default viewing conditions
|
|
751
|
+
*/
|
|
752
|
+
static fromInt(argb) {
|
|
753
|
+
return new Hct(argb);
|
|
754
|
+
}
|
|
755
|
+
static isBlue(hue) {
|
|
756
|
+
return hue >= 250 && hue < 270;
|
|
757
|
+
}
|
|
758
|
+
static isYellow(hue) {
|
|
759
|
+
return hue >= 105 && hue < 125;
|
|
760
|
+
}
|
|
761
|
+
static isCyan(hue) {
|
|
762
|
+
return hue >= 170 && hue < 207;
|
|
763
|
+
}
|
|
764
|
+
toInt() {
|
|
765
|
+
return this.argb;
|
|
766
|
+
}
|
|
767
|
+
/** Sets a property of the Hct object. */
|
|
768
|
+
setValue(propertyName, value) {
|
|
769
|
+
this[propertyName] = value;
|
|
770
|
+
}
|
|
771
|
+
toString() {
|
|
772
|
+
return `HCT(${this.hue.toFixed(0)}, ${this.chroma.toFixed(0)}, ${this.tone.toFixed(
|
|
773
|
+
0
|
|
774
|
+
)})`;
|
|
775
|
+
}
|
|
776
|
+
/**
|
|
777
|
+
* Translates a color into different [ViewingConditions].
|
|
778
|
+
*
|
|
779
|
+
* Colors change appearance. They look different with lights on versus off,
|
|
780
|
+
* the same color, as in hex code, on white looks different when on black.
|
|
781
|
+
* This is called color relativity, most famously explicated by Josef Albers
|
|
782
|
+
* in Interaction of Color.
|
|
783
|
+
*
|
|
784
|
+
* In color science, color appearance models can account for this and
|
|
785
|
+
* calculate the appearance of a color in different settings. HCT is based on
|
|
786
|
+
* CAM16, a color appearance model, and uses it to make these calculations.
|
|
787
|
+
*
|
|
788
|
+
* See [ViewingConditions.make] for parameters affecting color appearance.
|
|
789
|
+
*/
|
|
790
|
+
inViewingConditions(vc) {
|
|
791
|
+
const cam = materialColorUtilities.Cam16.fromInt(this.toInt());
|
|
792
|
+
const viewedInVc = cam.xyzInViewingConditions(vc);
|
|
793
|
+
const recastInVc = materialColorUtilities.Cam16.fromXyzInViewingConditions(
|
|
794
|
+
viewedInVc[0],
|
|
795
|
+
viewedInVc[1],
|
|
796
|
+
viewedInVc[2],
|
|
797
|
+
materialColorUtilities.ViewingConditions.make()
|
|
798
|
+
);
|
|
799
|
+
const recastHct = Hct.from(
|
|
800
|
+
recastInVc.hue,
|
|
801
|
+
recastInVc.chroma,
|
|
802
|
+
materialColorUtilities.lstarFromY(viewedInVc[1])
|
|
803
|
+
);
|
|
804
|
+
return recastHct;
|
|
805
|
+
}
|
|
806
|
+
setInternalState(argb) {
|
|
807
|
+
const cam = materialColorUtilities.Cam16.fromInt(argb);
|
|
808
|
+
this.internalHue = cam.hue;
|
|
809
|
+
this.internalChroma = cam.chroma;
|
|
810
|
+
this.internalTone = materialColorUtilities.lstarFromArgb(argb);
|
|
811
|
+
this.argb = argb;
|
|
812
|
+
}
|
|
813
|
+
}
|
|
814
|
+
/**
|
|
815
|
+
* @license
|
|
816
|
+
* Copyright 2023 Google LLC
|
|
817
|
+
*
|
|
818
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
819
|
+
* you may not use this file except in compliance with the License.
|
|
820
|
+
* You may obtain a copy of the License at
|
|
821
|
+
*
|
|
822
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
823
|
+
*
|
|
824
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
825
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
826
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
827
|
+
* See the License for the specific language governing permissions and
|
|
828
|
+
* limitations under the License.
|
|
829
|
+
*/
|
|
830
|
+
class ContrastCurve {
|
|
831
|
+
/**
|
|
832
|
+
* Creates a `ContrastCurve` object.
|
|
833
|
+
*
|
|
834
|
+
* @param low Value for contrast level -1.0
|
|
835
|
+
* @param normal Value for contrast level 0.0
|
|
836
|
+
* @param medium Value for contrast level 0.5
|
|
837
|
+
* @param high Value for contrast level 1.0
|
|
838
|
+
*/
|
|
839
|
+
constructor(low, normal, medium, high) {
|
|
840
|
+
this.low = low;
|
|
841
|
+
this.normal = normal;
|
|
842
|
+
this.medium = medium;
|
|
843
|
+
this.high = high;
|
|
844
|
+
}
|
|
845
|
+
/**
|
|
846
|
+
* Returns the value at a given contrast level.
|
|
847
|
+
*
|
|
848
|
+
* @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0
|
|
849
|
+
* is the lowest; 1.0 is the highest.
|
|
850
|
+
* @return The value. For contrast ratios, a number between 1.0 and 21.0.
|
|
851
|
+
*/
|
|
852
|
+
get(contrastLevel) {
|
|
853
|
+
if (contrastLevel <= -1) {
|
|
854
|
+
return this.low;
|
|
855
|
+
} else if (contrastLevel < 0) {
|
|
856
|
+
return materialColorUtilities.lerp(this.low, this.normal, (contrastLevel - -1) / 1);
|
|
857
|
+
} else if (contrastLevel < 0.5) {
|
|
858
|
+
return materialColorUtilities.lerp(this.normal, this.medium, (contrastLevel - 0) / 0.5);
|
|
859
|
+
} else if (contrastLevel < 1) {
|
|
860
|
+
return materialColorUtilities.lerp(this.medium, this.high, (contrastLevel - 0.5) / 0.5);
|
|
861
|
+
} else {
|
|
862
|
+
return this.high;
|
|
863
|
+
}
|
|
864
|
+
}
|
|
865
|
+
}
|
|
866
|
+
function getCurve(defaultContrast) {
|
|
867
|
+
if (defaultContrast === 1.5) {
|
|
868
|
+
return new ContrastCurve(1.5, 1.5, 3, 4.5);
|
|
869
|
+
} else if (defaultContrast === 3) {
|
|
870
|
+
return new ContrastCurve(3, 3, 4.5, 7);
|
|
871
|
+
} else if (defaultContrast === 4.5) {
|
|
872
|
+
return new ContrastCurve(4.5, 4.5, 7, 11);
|
|
873
|
+
} else if (defaultContrast === 6) {
|
|
874
|
+
return new ContrastCurve(6, 6, 7, 11);
|
|
875
|
+
} else if (defaultContrast === 7) {
|
|
876
|
+
return new ContrastCurve(7, 7, 11, 21);
|
|
877
|
+
} else if (defaultContrast === 9) {
|
|
878
|
+
return new ContrastCurve(9, 9, 11, 21);
|
|
879
|
+
} else if (defaultContrast === 11) {
|
|
880
|
+
return new ContrastCurve(11, 11, 21, 21);
|
|
881
|
+
} else if (defaultContrast === 21) {
|
|
882
|
+
return new ContrastCurve(21, 21, 21, 21);
|
|
883
|
+
} else {
|
|
884
|
+
return new ContrastCurve(defaultContrast, defaultContrast, 7, 21);
|
|
885
|
+
}
|
|
886
|
+
}
|
|
887
|
+
function tMaxC(palette, lowerBound = 0, upperBound = 100, chromaMultiplier = 1) {
|
|
888
|
+
const answer = findBestToneForChroma(
|
|
889
|
+
palette.hue,
|
|
890
|
+
palette.chroma * chromaMultiplier,
|
|
891
|
+
100,
|
|
892
|
+
true
|
|
893
|
+
);
|
|
894
|
+
return materialColorUtilities.clampDouble(lowerBound, upperBound, answer);
|
|
895
|
+
}
|
|
896
|
+
function tMinC(palette, lowerBound = 0, upperBound = 100) {
|
|
897
|
+
const answer = findBestToneForChroma(palette.hue, palette.chroma, 0, false);
|
|
898
|
+
return materialColorUtilities.clampDouble(lowerBound, upperBound, answer);
|
|
899
|
+
}
|
|
900
|
+
function findBestToneForChroma(hue, chroma, tone, byDecreasingTone) {
|
|
901
|
+
let answer = tone;
|
|
902
|
+
let bestCandidate = Hct.from(hue, chroma, answer);
|
|
903
|
+
while (bestCandidate.chroma < chroma) {
|
|
904
|
+
if (tone < 0 || tone > 100) {
|
|
905
|
+
break;
|
|
906
|
+
}
|
|
907
|
+
tone += byDecreasingTone ? -1 : 1;
|
|
908
|
+
const newCandidate = Hct.from(hue, chroma, tone);
|
|
909
|
+
if (bestCandidate.chroma < newCandidate.chroma) {
|
|
910
|
+
bestCandidate = newCandidate;
|
|
911
|
+
answer = tone;
|
|
912
|
+
}
|
|
913
|
+
}
|
|
914
|
+
return answer;
|
|
915
|
+
}
|
|
916
|
+
function calculateToneAdjustmentPercentage(toneA, toneB, desiredRatio) {
|
|
917
|
+
const currentRatio = materialColorUtilities.Contrast.ratioOfTones(toneA, toneB);
|
|
918
|
+
if (currentRatio >= desiredRatio) {
|
|
919
|
+
return 0;
|
|
920
|
+
}
|
|
921
|
+
const lighterTone = materialColorUtilities.Contrast.lighter(toneA, desiredRatio);
|
|
922
|
+
const darkerTone = materialColorUtilities.Contrast.darker(toneA, desiredRatio);
|
|
923
|
+
if (lighterTone !== -1 && toneB < lighterTone) {
|
|
924
|
+
const percentageToAdjust = (toneB - lighterTone) / (toneA - lighterTone);
|
|
925
|
+
return materialColorUtilities.clampDouble(0, 1, percentageToAdjust);
|
|
926
|
+
}
|
|
927
|
+
if (darkerTone !== -1 && toneB > darkerTone) {
|
|
928
|
+
const percentageToAdjust = (toneB - darkerTone) / (toneA - darkerTone);
|
|
929
|
+
return materialColorUtilities.clampDouble(0, 1, percentageToAdjust);
|
|
930
|
+
}
|
|
931
|
+
return 0;
|
|
932
|
+
}
|
|
933
|
+
/**
|
|
934
|
+
* @license
|
|
935
|
+
* Copyright 2022 Google LLC
|
|
936
|
+
*
|
|
937
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
938
|
+
* you may not use this file except in compliance with the License.
|
|
939
|
+
* You may obtain a copy of the License at
|
|
940
|
+
*
|
|
941
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
942
|
+
*
|
|
943
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
944
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
945
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
946
|
+
* See the License for the specific language governing permissions and
|
|
947
|
+
* limitations under the License.
|
|
948
|
+
*/
|
|
949
|
+
class DynamicColor {
|
|
950
|
+
/**
|
|
951
|
+
* The base constructor for DynamicColor.
|
|
952
|
+
*
|
|
953
|
+
* _Strongly_ prefer using one of the convenience constructors. This class is
|
|
954
|
+
* arguably too flexible to ensure it can support any scenario. Functional
|
|
955
|
+
* arguments allow overriding without risks that come with subclasses.
|
|
956
|
+
*
|
|
957
|
+
* For example, the default behavior of adjust tone at max contrast
|
|
958
|
+
* to be at a 7.0 ratio with its background is principled and
|
|
959
|
+
* matches accessibility guidance. That does not mean it's the desired
|
|
960
|
+
* approach for _every_ design system, and every color pairing,
|
|
961
|
+
* always, in every case.
|
|
962
|
+
*
|
|
963
|
+
* @param name The name of the dynamic color. Defaults to empty.
|
|
964
|
+
* @param palette Function that provides a TonalPalette given DynamicScheme. A
|
|
965
|
+
* TonalPalette is defined by a hue and chroma, so this replaces the need
|
|
966
|
+
* to specify hue/chroma. By providing a tonal palette, when contrast
|
|
967
|
+
* adjustments are made, intended chroma can be preserved.
|
|
968
|
+
* @param tone Function that provides a tone, given a DynamicScheme.
|
|
969
|
+
* @param isBackground Whether this dynamic color is a background, with some
|
|
970
|
+
* other color as the foreground. Defaults to false.
|
|
971
|
+
* @param chromaMultiplier A factor that multiplies the chroma for this color.
|
|
972
|
+
* @param background The background of the dynamic color (as a function of a
|
|
973
|
+
* `DynamicScheme`), if it exists.
|
|
974
|
+
* @param secondBackground A second background of the dynamic color (as a
|
|
975
|
+
* function of a `DynamicScheme`), if it exists.
|
|
976
|
+
* @param contrastCurve A `ContrastCurve` object specifying how its contrast
|
|
977
|
+
* against its background should behave in various contrast levels
|
|
978
|
+
* options.
|
|
979
|
+
* @param adjustTone A `AdjustTone` object specifying a tone delta
|
|
980
|
+
* constraint between two colors. One of them must be the color being
|
|
981
|
+
* constructed.
|
|
982
|
+
*/
|
|
983
|
+
constructor(name, palette, tone, isBackground, chromaMultiplier, background, secondBackground, contrastCurve, adjustTone) {
|
|
984
|
+
this.name = name;
|
|
985
|
+
this.palette = palette;
|
|
986
|
+
this.tone = tone;
|
|
987
|
+
this.isBackground = isBackground;
|
|
988
|
+
this.chromaMultiplier = chromaMultiplier;
|
|
989
|
+
this.background = background;
|
|
990
|
+
this.secondBackground = secondBackground;
|
|
991
|
+
this.contrastCurve = contrastCurve;
|
|
992
|
+
this.adjustTone = adjustTone;
|
|
993
|
+
if (!background && secondBackground) {
|
|
994
|
+
throw new Error(
|
|
995
|
+
`Color ${name} has secondBackgrounddefined, but background is not defined.`
|
|
996
|
+
);
|
|
997
|
+
}
|
|
998
|
+
if (!background && contrastCurve) {
|
|
999
|
+
throw new Error(
|
|
1000
|
+
`Color ${name} has contrastCurvedefined, but background is not defined.`
|
|
1001
|
+
);
|
|
1002
|
+
}
|
|
1003
|
+
if (background && !contrastCurve) {
|
|
1004
|
+
throw new Error(
|
|
1005
|
+
`Color ${name} has backgrounddefined, but contrastCurve is not defined.`
|
|
1006
|
+
);
|
|
1007
|
+
}
|
|
1008
|
+
}
|
|
1009
|
+
/**
|
|
1010
|
+
* Create a DynamicColor defined by a TonalPalette and HCT tone.
|
|
1011
|
+
*
|
|
1012
|
+
* @param args Functions with DynamicScheme as input. Must provide a palette
|
|
1013
|
+
* and tone. May provide a background DynamicColor and ToneDeltaPair.
|
|
1014
|
+
*/
|
|
1015
|
+
static fromPalette(args) {
|
|
1016
|
+
return new DynamicColor(
|
|
1017
|
+
args.name ?? "",
|
|
1018
|
+
args.palette,
|
|
1019
|
+
args.tone ?? (() => DynamicColor.getInitialToneFromBackground(args.background)),
|
|
1020
|
+
args.isBackground ?? false,
|
|
1021
|
+
args.chromaMultiplier,
|
|
1022
|
+
args.background,
|
|
1023
|
+
args.secondBackground,
|
|
1024
|
+
args.contrastCurve,
|
|
1025
|
+
args.adjustTone
|
|
1026
|
+
);
|
|
1027
|
+
}
|
|
1028
|
+
// static getInitialToneFromBackground(
|
|
1029
|
+
// background?: () => Color | undefined,
|
|
1030
|
+
// ): number {
|
|
1031
|
+
// if (background === undefined) {
|
|
1032
|
+
// return 50;
|
|
1033
|
+
// }
|
|
1034
|
+
// return (background() ? background()!.getTone() : 50);
|
|
1035
|
+
// }
|
|
1036
|
+
/**
|
|
1037
|
+
* Given a background tone, finds a foreground tone, while ensuring they reach
|
|
1038
|
+
* a contrast ratio that is as close to [ratio] as possible.
|
|
1039
|
+
*
|
|
1040
|
+
* @param bgTone Tone in HCT. Range is 0 to 100, undefined behavior when it
|
|
1041
|
+
* falls outside that range.
|
|
1042
|
+
* @param ratio The contrast ratio desired between bgTone and the return
|
|
1043
|
+
* value.
|
|
1044
|
+
*/
|
|
1045
|
+
static foregroundTone(bgTone, ratio) {
|
|
1046
|
+
const lighterTone = materialColorUtilities.Contrast.lighterUnsafe(bgTone, ratio);
|
|
1047
|
+
const darkerTone = materialColorUtilities.Contrast.darkerUnsafe(bgTone, ratio);
|
|
1048
|
+
const lighterRatio = materialColorUtilities.Contrast.ratioOfTones(lighterTone, bgTone);
|
|
1049
|
+
const darkerRatio = materialColorUtilities.Contrast.ratioOfTones(darkerTone, bgTone);
|
|
1050
|
+
const preferLighter = DynamicColor.tonePrefersLightForeground(bgTone);
|
|
1051
|
+
if (preferLighter) {
|
|
1052
|
+
const negligibleDifference = Math.abs(lighterRatio - darkerRatio) < 0.1 && lighterRatio < ratio && darkerRatio < ratio;
|
|
1053
|
+
return lighterRatio >= ratio || lighterRatio >= darkerRatio || negligibleDifference ? lighterTone : darkerTone;
|
|
1054
|
+
} else {
|
|
1055
|
+
return darkerRatio >= ratio || darkerRatio >= lighterRatio ? darkerTone : lighterTone;
|
|
1056
|
+
}
|
|
1057
|
+
}
|
|
1058
|
+
/**
|
|
1059
|
+
* Returns whether [tone] prefers a light foreground.
|
|
1060
|
+
*
|
|
1061
|
+
* People prefer white foregrounds on ~T60-70. Observed over time, and also
|
|
1062
|
+
* by Andrew Somers during research for APCA.
|
|
1063
|
+
*
|
|
1064
|
+
* T60 used as to create the smallest discontinuity possible when skipping
|
|
1065
|
+
* down to T49 in order to ensure light foregrounds.
|
|
1066
|
+
* Since `tertiaryContainer` in dark monochrome scheme requires a tone of
|
|
1067
|
+
* 60, it should not be adjusted. Therefore, 60 is excluded here.
|
|
1068
|
+
*/
|
|
1069
|
+
static tonePrefersLightForeground(tone) {
|
|
1070
|
+
return Math.round(tone) < 60;
|
|
1071
|
+
}
|
|
1072
|
+
/**
|
|
1073
|
+
* Returns whether [tone] can reach a contrast ratio of 4.5 with a lighter
|
|
1074
|
+
* color.
|
|
1075
|
+
*/
|
|
1076
|
+
static toneAllowsLightForeground(tone) {
|
|
1077
|
+
return Math.round(tone) <= 49;
|
|
1078
|
+
}
|
|
1079
|
+
/**
|
|
1080
|
+
* Adjusts a tone such that white has 4.5 contrast, if the tone is
|
|
1081
|
+
* reasonably close to supporting it.
|
|
1082
|
+
*/
|
|
1083
|
+
static enableLightForeground(tone) {
|
|
1084
|
+
if (DynamicColor.tonePrefersLightForeground(tone) && !DynamicColor.toneAllowsLightForeground(tone)) {
|
|
1085
|
+
return 49;
|
|
1086
|
+
}
|
|
1087
|
+
return tone;
|
|
1088
|
+
}
|
|
1089
|
+
/**
|
|
1090
|
+
* Returns a deep copy of this DynamicColor.
|
|
1091
|
+
*/
|
|
1092
|
+
clone() {
|
|
1093
|
+
return DynamicColor.fromPalette({
|
|
1094
|
+
name: this.name,
|
|
1095
|
+
palette: this.palette,
|
|
1096
|
+
tone: this.tone,
|
|
1097
|
+
isBackground: this.isBackground,
|
|
1098
|
+
chromaMultiplier: this.chromaMultiplier,
|
|
1099
|
+
background: this.background,
|
|
1100
|
+
secondBackground: this.secondBackground,
|
|
1101
|
+
contrastCurve: this.contrastCurve,
|
|
1102
|
+
adjustTone: this.adjustTone
|
|
1103
|
+
});
|
|
1104
|
+
}
|
|
1105
|
+
/**
|
|
1106
|
+
* Returns a ARGB integer (i.e. a hex code).
|
|
1107
|
+
*
|
|
1108
|
+
* @param scheme Defines the conditions of the user interface, for example,
|
|
1109
|
+
* whether or not it is dark mode or light mode, and what the desired
|
|
1110
|
+
* contrast level is.
|
|
1111
|
+
*/
|
|
1112
|
+
getArgb(scheme) {
|
|
1113
|
+
return this.getHct(scheme).toInt();
|
|
1114
|
+
}
|
|
1115
|
+
/**
|
|
1116
|
+
* Returns a color, expressed in the HCT color space, that this
|
|
1117
|
+
* DynamicColor is under the conditions in scheme.
|
|
1118
|
+
*
|
|
1119
|
+
* @param scheme Defines the conditions of the user interface, for example,
|
|
1120
|
+
* whether or not it is dark mode or light mode, and what the desired
|
|
1121
|
+
* contrast level is.
|
|
1122
|
+
*/
|
|
1123
|
+
getHct(scheme) {
|
|
1124
|
+
const palette = this.palette(scheme);
|
|
1125
|
+
const tone = this.getTone(scheme);
|
|
1126
|
+
const hue = palette.hue;
|
|
1127
|
+
const chroma = palette.chroma * (this.chromaMultiplier ? this.chromaMultiplier(scheme) : 1);
|
|
1128
|
+
return Hct.from(hue, chroma, tone);
|
|
1129
|
+
}
|
|
1130
|
+
/**
|
|
1131
|
+
* Returns a tone, T in the HCT color space, that this DynamicColor is under
|
|
1132
|
+
* the conditions in scheme.
|
|
1133
|
+
*
|
|
1134
|
+
* @param scheme Defines the conditions of the user interface, for example,
|
|
1135
|
+
* whether or not it is dark mode or light mode, and what the desired
|
|
1136
|
+
* contrast level is.
|
|
1137
|
+
*/
|
|
1138
|
+
getTone(scheme) {
|
|
1139
|
+
const adjustTone = this.adjustTone ? this.adjustTone(scheme) : void 0;
|
|
1140
|
+
if (adjustTone) {
|
|
1141
|
+
return adjustTone({ scheme, dynamicColor: this });
|
|
1142
|
+
} else {
|
|
1143
|
+
let answer = this.tone(scheme);
|
|
1144
|
+
if (this.background == void 0 || this.background(scheme) === void 0 || this.contrastCurve == void 0 || this.contrastCurve(scheme) === void 0) {
|
|
1145
|
+
return answer;
|
|
1146
|
+
}
|
|
1147
|
+
const bgTone = this.background(scheme).getTone(scheme);
|
|
1148
|
+
const desiredRatio = this.contrastCurve(scheme).get(
|
|
1149
|
+
scheme.contrastLevel
|
|
1150
|
+
);
|
|
1151
|
+
answer = materialColorUtilities.Contrast.ratioOfTones(bgTone, answer) >= desiredRatio && scheme.contrastLevel >= 0 ? answer : DynamicColor.foregroundTone(bgTone, desiredRatio);
|
|
1152
|
+
if (this.isBackground && !this.name.endsWith("_fixed_dim")) {
|
|
1153
|
+
if (answer >= 57) {
|
|
1154
|
+
answer = materialColorUtilities.clampDouble(65, 100, answer);
|
|
1155
|
+
} else {
|
|
1156
|
+
answer = materialColorUtilities.clampDouble(0, 49, answer);
|
|
1157
|
+
}
|
|
1158
|
+
}
|
|
1159
|
+
if (this.secondBackground == void 0 || this.secondBackground(scheme) === void 0) {
|
|
1160
|
+
return answer;
|
|
1161
|
+
}
|
|
1162
|
+
const [bg1, bg2] = [this.background, this.secondBackground];
|
|
1163
|
+
const [bgTone1, bgTone2] = [
|
|
1164
|
+
bg1(scheme).getTone(scheme),
|
|
1165
|
+
bg2(scheme).getTone(scheme)
|
|
1166
|
+
];
|
|
1167
|
+
const [upper, lower] = [
|
|
1168
|
+
Math.max(bgTone1, bgTone2),
|
|
1169
|
+
Math.min(bgTone1, bgTone2)
|
|
1170
|
+
];
|
|
1171
|
+
if (materialColorUtilities.Contrast.ratioOfTones(upper, answer) >= desiredRatio && materialColorUtilities.Contrast.ratioOfTones(lower, answer) >= desiredRatio) {
|
|
1172
|
+
return answer;
|
|
1173
|
+
}
|
|
1174
|
+
const lightOption = materialColorUtilities.Contrast.lighter(upper, desiredRatio);
|
|
1175
|
+
const darkOption = materialColorUtilities.Contrast.darker(lower, desiredRatio);
|
|
1176
|
+
const availables = [];
|
|
1177
|
+
if (lightOption !== -1) availables.push(lightOption);
|
|
1178
|
+
if (darkOption !== -1) availables.push(darkOption);
|
|
1179
|
+
const prefersLight = DynamicColor.tonePrefersLightForeground(bgTone1) || DynamicColor.tonePrefersLightForeground(bgTone2);
|
|
1180
|
+
if (prefersLight) {
|
|
1181
|
+
return lightOption < 0 ? 100 : lightOption;
|
|
1182
|
+
}
|
|
1183
|
+
if (availables.length === 1) {
|
|
1184
|
+
return availables[0];
|
|
1185
|
+
}
|
|
1186
|
+
return darkOption < 0 ? 0 : darkOption;
|
|
1187
|
+
}
|
|
1188
|
+
}
|
|
1189
|
+
}
|
|
1190
|
+
/**
|
|
1191
|
+
* @license
|
|
1192
|
+
* Copyright 2023 Google LLC
|
|
1193
|
+
*
|
|
1194
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
1195
|
+
* you may not use this file except in compliance with the License.
|
|
1196
|
+
* You may obtain a copy of the License at
|
|
1197
|
+
*
|
|
1198
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
1199
|
+
*
|
|
1200
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
1201
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
1202
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
1203
|
+
* See the License for the specific language governing permissions and
|
|
1204
|
+
* limitations under the License.
|
|
1205
|
+
*/
|
|
1206
|
+
class ToneDeltaPair {
|
|
1207
|
+
/**
|
|
1208
|
+
* Documents a constraint in tone distance between two DynamicColors.
|
|
1209
|
+
*
|
|
1210
|
+
* The polarity is an adjective that describes "A", compared to "B".
|
|
1211
|
+
*
|
|
1212
|
+
* For instance, ToneDeltaPair(A, B, 15, 'darker', 'exact') states that
|
|
1213
|
+
* A's tone should be exactly 15 darker than B's.
|
|
1214
|
+
*
|
|
1215
|
+
* 'relative_darker' and 'relative_lighter' describes the tone adjustment
|
|
1216
|
+
* relative to the surface color trend (white in light mode; black in dark
|
|
1217
|
+
* mode). For instance, ToneDeltaPair(A, B, 10, 'relative_lighter',
|
|
1218
|
+
* 'farther') states that A should be at least 10 lighter than B in light
|
|
1219
|
+
* mode, and at least 10 darker than B in dark mode.
|
|
1220
|
+
*
|
|
1221
|
+
* @param roleA The first role in a pair.
|
|
1222
|
+
* @param roleB The second role in a pair.
|
|
1223
|
+
* @param delta Required difference between tones. Absolute value, negative
|
|
1224
|
+
* values have undefined behavior.
|
|
1225
|
+
* @param polarity The relative relation between tones of roleA and roleB,
|
|
1226
|
+
* as described above.
|
|
1227
|
+
* @param constraint How to fulfill the tone delta pair constraint.
|
|
1228
|
+
* @param stayTogether Whether these two roles should stay on the same side
|
|
1229
|
+
* of the "awkward zone" (T50-59). This is necessary for certain cases where
|
|
1230
|
+
* one role has two backgrounds.
|
|
1231
|
+
*/
|
|
1232
|
+
constructor(roleA, roleB, delta, polarity, stayTogether, constraint) {
|
|
1233
|
+
this.roleA = roleA;
|
|
1234
|
+
this.roleB = roleB;
|
|
1235
|
+
this.delta = delta;
|
|
1236
|
+
this.polarity = polarity;
|
|
1237
|
+
this.stayTogether = stayTogether;
|
|
1238
|
+
this.constraint = constraint;
|
|
1239
|
+
this.constraint = constraint ?? "exact";
|
|
1240
|
+
}
|
|
1241
|
+
adjustedTone({ context: ctx, color }) {
|
|
1242
|
+
const roleA = this.roleA;
|
|
1243
|
+
const roleB = this.roleB;
|
|
1244
|
+
const polarity = this.polarity;
|
|
1245
|
+
const constraint = this.constraint;
|
|
1246
|
+
const absoluteDelta = polarity === "darker" || polarity === "relative_lighter" && ctx.isDark || polarity === "relative_darker" && !ctx.isDark ? -this.delta : this.delta;
|
|
1247
|
+
const amRoleA = color.name === roleA.name;
|
|
1248
|
+
const selfRole = amRoleA ? roleA : roleB;
|
|
1249
|
+
const refRole = amRoleA ? roleB : roleA;
|
|
1250
|
+
if (!(selfRole instanceof ColorFromPalette)) {
|
|
1251
|
+
throw new Error("selfRole is not a ColorFromPalette");
|
|
1252
|
+
}
|
|
1253
|
+
let selfTone = selfRole.options.tone;
|
|
1254
|
+
const refTone = refRole.getTone();
|
|
1255
|
+
const relativeDelta = absoluteDelta * (amRoleA ? 1 : -1);
|
|
1256
|
+
if (constraint === "exact") {
|
|
1257
|
+
selfTone = materialColorUtilities.clampDouble(0, 100, refTone + relativeDelta);
|
|
1258
|
+
} else if (constraint === "nearer") {
|
|
1259
|
+
if (relativeDelta > 0) {
|
|
1260
|
+
selfTone = materialColorUtilities.clampDouble(
|
|
1261
|
+
0,
|
|
1262
|
+
100,
|
|
1263
|
+
materialColorUtilities.clampDouble(refTone, refTone + relativeDelta, selfTone)
|
|
1264
|
+
);
|
|
1265
|
+
} else {
|
|
1266
|
+
selfTone = materialColorUtilities.clampDouble(
|
|
1267
|
+
0,
|
|
1268
|
+
100,
|
|
1269
|
+
materialColorUtilities.clampDouble(refTone + relativeDelta, refTone, selfTone)
|
|
1270
|
+
);
|
|
1271
|
+
}
|
|
1272
|
+
} else if (constraint === "farther") {
|
|
1273
|
+
if (relativeDelta > 0) {
|
|
1274
|
+
selfTone = materialColorUtilities.clampDouble(refTone + relativeDelta, 100, selfTone);
|
|
1275
|
+
} else {
|
|
1276
|
+
selfTone = materialColorUtilities.clampDouble(0, refTone + relativeDelta, selfTone);
|
|
1277
|
+
}
|
|
1278
|
+
}
|
|
1279
|
+
if (color instanceof ColorFromPalette) {
|
|
1280
|
+
if (color.options.background && color.options.contrastCurve) {
|
|
1281
|
+
const background = color.options.background;
|
|
1282
|
+
const contrastCurve = color.options.contrastCurve;
|
|
1283
|
+
if (background && contrastCurve) {
|
|
1284
|
+
const bgTone = background.getTone();
|
|
1285
|
+
const selfContrast = contrastCurve.get(ctx.contrastLevel);
|
|
1286
|
+
selfTone = materialColorUtilities.Contrast.ratioOfTones(bgTone, selfTone) >= selfContrast && ctx.contrastLevel >= 0 ? selfTone : materialColorUtilities.DynamicColor.foregroundTone(bgTone, selfContrast);
|
|
1287
|
+
}
|
|
1288
|
+
}
|
|
1289
|
+
if (color.options.isBackground && !color.name.endsWith("_fixed_dim")) {
|
|
1290
|
+
if (selfTone >= 57) {
|
|
1291
|
+
selfTone = materialColorUtilities.clampDouble(65, 100, selfTone);
|
|
1292
|
+
} else {
|
|
1293
|
+
selfTone = materialColorUtilities.clampDouble(0, 49, selfTone);
|
|
1294
|
+
}
|
|
1295
|
+
}
|
|
1296
|
+
}
|
|
1297
|
+
return selfTone;
|
|
1298
|
+
}
|
|
1299
|
+
}
|
|
1300
|
+
const toneDeltaPair = (...params) => {
|
|
1301
|
+
return (args) => new ToneDeltaPair(...params).adjustedTone(args);
|
|
1302
|
+
};
|
|
1303
|
+
function argbToRgb(argb) {
|
|
1304
|
+
return {
|
|
1305
|
+
r: argb >> 16 & 255,
|
|
1306
|
+
g: argb >> 8 & 255,
|
|
1307
|
+
b: argb & 255
|
|
1308
|
+
};
|
|
1309
|
+
}
|
|
1310
|
+
function getInitialToneFromBackground(background) {
|
|
1311
|
+
if (background === void 0) {
|
|
1312
|
+
return 50;
|
|
1313
|
+
}
|
|
1314
|
+
return background.getTone();
|
|
1315
|
+
}
|
|
1316
|
+
class Color {
|
|
1317
|
+
constructor(name) {
|
|
1318
|
+
this.name = name;
|
|
1319
|
+
}
|
|
1320
|
+
static maxChroma(hue, tone = 50) {
|
|
1321
|
+
return Hct.from(hue, 200, tone).chroma;
|
|
1322
|
+
}
|
|
1323
|
+
getHex() {
|
|
1324
|
+
return materialColorUtilities.hexFromArgb(this.getArgb());
|
|
1325
|
+
}
|
|
1326
|
+
getArgb() {
|
|
1327
|
+
return this.getHct().toInt();
|
|
1328
|
+
}
|
|
1329
|
+
getRgb() {
|
|
1330
|
+
return argbToRgb(this.getArgb());
|
|
1331
|
+
}
|
|
1332
|
+
getTone() {
|
|
1333
|
+
return this.getHct().tone;
|
|
1334
|
+
}
|
|
1335
|
+
}
|
|
1336
|
+
class ColorAlias extends Color {
|
|
1337
|
+
constructor(name, as, colorService) {
|
|
1338
|
+
super(name);
|
|
1339
|
+
this.as = as;
|
|
1340
|
+
this.colorService = colorService;
|
|
1341
|
+
}
|
|
1342
|
+
getHct() {
|
|
1343
|
+
return this.colorService.get(this.as).getHct();
|
|
1344
|
+
}
|
|
1345
|
+
color() {
|
|
1346
|
+
return this.colorService.get(this.as);
|
|
1347
|
+
}
|
|
1348
|
+
}
|
|
1349
|
+
class ColorFromHex extends Color {
|
|
1350
|
+
constructor(name, _hex) {
|
|
1351
|
+
super(name);
|
|
1352
|
+
this._hex = _hex;
|
|
1353
|
+
this._hex = _hex;
|
|
1354
|
+
}
|
|
1355
|
+
getHct() {
|
|
1356
|
+
return Hct.fromInt(materialColorUtilities.argbFromHex(this.getHex()));
|
|
1357
|
+
}
|
|
1358
|
+
getHex() {
|
|
1359
|
+
return this._hex;
|
|
1360
|
+
}
|
|
1361
|
+
setHex(hex) {
|
|
1362
|
+
this._hex = hex;
|
|
1363
|
+
}
|
|
1364
|
+
}
|
|
1365
|
+
class ColorFromPalette extends Color {
|
|
1366
|
+
constructor(name, _options, context) {
|
|
1367
|
+
super(name);
|
|
1368
|
+
this._options = _options;
|
|
1369
|
+
this.context = context;
|
|
1370
|
+
this.validateOption();
|
|
1371
|
+
}
|
|
1372
|
+
get options() {
|
|
1373
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
1374
|
+
const options = {
|
|
1375
|
+
...this._options,
|
|
1376
|
+
palette: this._options.palette(),
|
|
1377
|
+
tone: (_b = (_a = this._options).tone) == null ? void 0 : _b.call(_a),
|
|
1378
|
+
chromaMultiplier: (_d = (_c = this._options).chromaMultiplier) == null ? void 0 : _d.call(_c),
|
|
1379
|
+
background: (_f = (_e = this._options).background) == null ? void 0 : _f.call(_e),
|
|
1380
|
+
secondBackground: (_h = (_g = this._options).secondBackground) == null ? void 0 : _h.call(_g),
|
|
1381
|
+
contrastCurve: (_j = (_i = this._options).contrastCurve) == null ? void 0 : _j.call(_i),
|
|
1382
|
+
adjustTone: (_l = (_k = this._options).adjustTone) == null ? void 0 : _l.call(_k)
|
|
1383
|
+
};
|
|
1384
|
+
return {
|
|
1385
|
+
...options,
|
|
1386
|
+
chromaMultiplier: options.chromaMultiplier ?? 1,
|
|
1387
|
+
tone: options.tone ?? getInitialToneFromBackground(options.background)
|
|
1388
|
+
};
|
|
1389
|
+
}
|
|
1390
|
+
update(args) {
|
|
1391
|
+
this._options = { ...this._options, ...args };
|
|
1392
|
+
this.validateOption();
|
|
1393
|
+
}
|
|
1394
|
+
validateOption() {
|
|
1395
|
+
const option = this._options;
|
|
1396
|
+
if ("palette" in option) {
|
|
1397
|
+
if (!option.background && option.secondBackground) {
|
|
1398
|
+
throw new Error(
|
|
1399
|
+
`Color ${this.name} has secondBackground defined, but background is not defined.`
|
|
1400
|
+
);
|
|
1401
|
+
}
|
|
1402
|
+
if (!option.background && option.contrastCurve) {
|
|
1403
|
+
throw new Error(
|
|
1404
|
+
`Color ${this.name} has contrastCurve defined, but background is not defined.`
|
|
1405
|
+
);
|
|
1406
|
+
}
|
|
1407
|
+
if (option.background && !option.contrastCurve) {
|
|
1408
|
+
throw new Error(
|
|
1409
|
+
`Color ${this.name} has background defined, but contrastCurve is not defined.`
|
|
1410
|
+
);
|
|
1411
|
+
}
|
|
1412
|
+
}
|
|
1413
|
+
}
|
|
1414
|
+
getHct() {
|
|
1415
|
+
const option = this.options;
|
|
1416
|
+
const palette = option.palette;
|
|
1417
|
+
const tone = this.getTone();
|
|
1418
|
+
const hue = palette.hue;
|
|
1419
|
+
const chroma = palette.chroma * option.chromaMultiplier;
|
|
1420
|
+
return Hct.from(hue, chroma, tone);
|
|
1421
|
+
}
|
|
1422
|
+
getTone() {
|
|
1423
|
+
const context = this.context;
|
|
1424
|
+
const options = this.options;
|
|
1425
|
+
const adjustTone = options.adjustTone;
|
|
1426
|
+
if (adjustTone) {
|
|
1427
|
+
return adjustTone({ context, color: this });
|
|
1428
|
+
} else {
|
|
1429
|
+
let answer = options.tone;
|
|
1430
|
+
if (!options.background || !options.contrastCurve) {
|
|
1431
|
+
return answer;
|
|
1432
|
+
}
|
|
1433
|
+
const bgTone = options.background.getTone();
|
|
1434
|
+
const desiredRatio = options.contrastCurve.get(context.contrastLevel);
|
|
1435
|
+
answer = materialColorUtilities.Contrast.ratioOfTones(bgTone, answer) >= desiredRatio && context.contrastLevel >= 0 ? answer : DynamicColor.foregroundTone(bgTone, desiredRatio);
|
|
1436
|
+
if (options.isBackground && !this.name.endsWith("_fixed_dim")) {
|
|
1437
|
+
if (answer >= 57) {
|
|
1438
|
+
answer = materialColorUtilities.clampDouble(65, 100, answer);
|
|
1439
|
+
} else {
|
|
1440
|
+
answer = materialColorUtilities.clampDouble(0, 49, answer);
|
|
1441
|
+
}
|
|
1442
|
+
}
|
|
1443
|
+
if (!options.secondBackground) {
|
|
1444
|
+
return answer;
|
|
1445
|
+
}
|
|
1446
|
+
const [bg1, bg2] = [options.background, options.secondBackground];
|
|
1447
|
+
const [bgTone1, bgTone2] = [bg1.getTone(), bg2.getTone()];
|
|
1448
|
+
const [upper, lower] = [
|
|
1449
|
+
Math.max(bgTone1, bgTone2),
|
|
1450
|
+
Math.min(bgTone1, bgTone2)
|
|
1451
|
+
];
|
|
1452
|
+
if (materialColorUtilities.Contrast.ratioOfTones(upper, answer) >= desiredRatio && materialColorUtilities.Contrast.ratioOfTones(lower, answer) >= desiredRatio) {
|
|
1453
|
+
return answer;
|
|
1454
|
+
}
|
|
1455
|
+
const lightOption = materialColorUtilities.Contrast.lighter(upper, desiredRatio);
|
|
1456
|
+
const darkOption = materialColorUtilities.Contrast.darker(lower, desiredRatio);
|
|
1457
|
+
const availables = [];
|
|
1458
|
+
if (lightOption !== -1) availables.push(lightOption);
|
|
1459
|
+
if (darkOption !== -1) availables.push(darkOption);
|
|
1460
|
+
const prefersLight = DynamicColor.tonePrefersLightForeground(bgTone1) || DynamicColor.tonePrefersLightForeground(bgTone2);
|
|
1461
|
+
if (prefersLight) {
|
|
1462
|
+
return lightOption < 0 ? 100 : lightOption;
|
|
1463
|
+
}
|
|
1464
|
+
if (availables.length === 1) {
|
|
1465
|
+
return availables[0];
|
|
1466
|
+
}
|
|
1467
|
+
return darkOption < 0 ? 0 : darkOption;
|
|
1468
|
+
}
|
|
1469
|
+
}
|
|
1470
|
+
}
|
|
1471
|
+
const highestSurface$1 = (context, colorService) => {
|
|
1472
|
+
if (colorService instanceof ColorApi) {
|
|
1473
|
+
return context.isDark ? colorService.get("surfaceBright") : colorService.get("surfaceDim");
|
|
1474
|
+
} else {
|
|
1475
|
+
return context.isDark ? colorService.get("surfaceBright") : colorService.get("surfaceDim");
|
|
1476
|
+
}
|
|
1477
|
+
};
|
|
1478
|
+
const defaultColors = ({
|
|
1479
|
+
colors,
|
|
1480
|
+
context: c,
|
|
1481
|
+
palettes
|
|
1482
|
+
}) => {
|
|
1483
|
+
const getColor = (key) => {
|
|
1484
|
+
return colors.get(key);
|
|
1485
|
+
};
|
|
1486
|
+
return {
|
|
1487
|
+
////////////////////////////////////////////////////////////////
|
|
1488
|
+
// Surfaces [S] //
|
|
1489
|
+
////////////////////////////////////////////////////////////////
|
|
1490
|
+
surface: {
|
|
1491
|
+
palette: () => palettes.get("neutral"),
|
|
1492
|
+
tone: () => {
|
|
1493
|
+
if (c.isDark) {
|
|
1494
|
+
return 4;
|
|
1495
|
+
} else {
|
|
1496
|
+
if (Hct.isYellow(palettes.get("neutral").hue)) {
|
|
1497
|
+
return 99;
|
|
1498
|
+
} else if (c.variant.name === "vibrant") {
|
|
1499
|
+
return 97;
|
|
1500
|
+
} else {
|
|
1501
|
+
return 98;
|
|
1502
|
+
}
|
|
1503
|
+
}
|
|
1504
|
+
},
|
|
1505
|
+
isBackground: true
|
|
1506
|
+
},
|
|
1507
|
+
surfaceDim: {
|
|
1508
|
+
palette: () => palettes.get("neutral"),
|
|
1509
|
+
tone: () => {
|
|
1510
|
+
if (c.isDark) {
|
|
1511
|
+
return 4;
|
|
1512
|
+
} else {
|
|
1513
|
+
if (Hct.isYellow(palettes.get("neutral").hue)) {
|
|
1514
|
+
return 90;
|
|
1515
|
+
} else if (c.variant.name === "vibrant") {
|
|
1516
|
+
return 85;
|
|
1517
|
+
} else {
|
|
1518
|
+
return 87;
|
|
1519
|
+
}
|
|
1520
|
+
}
|
|
1521
|
+
},
|
|
1522
|
+
isBackground: true,
|
|
1523
|
+
chromaMultiplier: () => {
|
|
1524
|
+
if (!c.isDark) {
|
|
1525
|
+
if (c.variant.name === "neutral") {
|
|
1526
|
+
return 2.5;
|
|
1527
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1528
|
+
return 1.7;
|
|
1529
|
+
} else if (c.variant.name === "expressive") {
|
|
1530
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? 2.7 : 1.75;
|
|
1531
|
+
} else if (c.variant.name === "vibrant") {
|
|
1532
|
+
return 1.36;
|
|
1533
|
+
}
|
|
1534
|
+
}
|
|
1535
|
+
return 1;
|
|
1536
|
+
}
|
|
1537
|
+
},
|
|
1538
|
+
surfaceBright: {
|
|
1539
|
+
palette: () => palettes.get("neutral"),
|
|
1540
|
+
tone: () => {
|
|
1541
|
+
if (c.isDark) {
|
|
1542
|
+
return 18;
|
|
1543
|
+
} else {
|
|
1544
|
+
if (Hct.isYellow(palettes.get("neutral").hue)) {
|
|
1545
|
+
return 99;
|
|
1546
|
+
} else if (c.variant.name === "vibrant") {
|
|
1547
|
+
return 97;
|
|
1548
|
+
} else {
|
|
1549
|
+
return 98;
|
|
1550
|
+
}
|
|
1551
|
+
}
|
|
1552
|
+
},
|
|
1553
|
+
isBackground: true,
|
|
1554
|
+
chromaMultiplier: () => {
|
|
1555
|
+
if (c.isDark) {
|
|
1556
|
+
if (c.variant.name === "neutral") {
|
|
1557
|
+
return 2.5;
|
|
1558
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1559
|
+
return 1.7;
|
|
1560
|
+
} else if (c.variant.name === "expressive") {
|
|
1561
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? 2.7 : 1.75;
|
|
1562
|
+
} else if (c.variant.name === "vibrant") {
|
|
1563
|
+
return 1.36;
|
|
1564
|
+
}
|
|
1565
|
+
}
|
|
1566
|
+
return 1;
|
|
1567
|
+
}
|
|
1568
|
+
},
|
|
1569
|
+
surfaceContainerLowest: {
|
|
1570
|
+
palette: () => palettes.get("neutral"),
|
|
1571
|
+
tone: () => c.isDark ? 0 : 100,
|
|
1572
|
+
isBackground: true
|
|
1573
|
+
},
|
|
1574
|
+
surfaceContainerLow: {
|
|
1575
|
+
palette: () => palettes.get("neutral"),
|
|
1576
|
+
tone: () => {
|
|
1577
|
+
if (c.isDark) {
|
|
1578
|
+
return 6;
|
|
1579
|
+
} else {
|
|
1580
|
+
if (Hct.isYellow(palettes.get("neutral").hue)) {
|
|
1581
|
+
return 98;
|
|
1582
|
+
} else if (c.variant.name === "vibrant") {
|
|
1583
|
+
return 95;
|
|
1584
|
+
} else {
|
|
1585
|
+
return 96;
|
|
1586
|
+
}
|
|
1587
|
+
}
|
|
1588
|
+
},
|
|
1589
|
+
isBackground: true,
|
|
1590
|
+
chromaMultiplier: () => {
|
|
1591
|
+
if (c.variant.name === "neutral") {
|
|
1592
|
+
return 1.3;
|
|
1593
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1594
|
+
return 1.25;
|
|
1595
|
+
} else if (c.variant.name === "expressive") {
|
|
1596
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? 1.3 : 1.15;
|
|
1597
|
+
} else if (c.variant.name === "vibrant") {
|
|
1598
|
+
return 1.08;
|
|
1599
|
+
}
|
|
1600
|
+
return 1;
|
|
1601
|
+
}
|
|
1602
|
+
},
|
|
1603
|
+
surfaceContainer: {
|
|
1604
|
+
palette: () => palettes.get("neutral"),
|
|
1605
|
+
tone: () => {
|
|
1606
|
+
if (c.isDark) {
|
|
1607
|
+
return 9;
|
|
1608
|
+
} else {
|
|
1609
|
+
if (Hct.isYellow(palettes.get("neutral").hue)) {
|
|
1610
|
+
return 96;
|
|
1611
|
+
} else if (c.variant.name === "vibrant") {
|
|
1612
|
+
return 92;
|
|
1613
|
+
} else {
|
|
1614
|
+
return 94;
|
|
1615
|
+
}
|
|
1616
|
+
}
|
|
1617
|
+
},
|
|
1618
|
+
isBackground: true,
|
|
1619
|
+
chromaMultiplier: () => {
|
|
1620
|
+
if (c.variant.name === "neutral") {
|
|
1621
|
+
return 1.6;
|
|
1622
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1623
|
+
return 1.4;
|
|
1624
|
+
} else if (c.variant.name === "expressive") {
|
|
1625
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? 1.6 : 1.3;
|
|
1626
|
+
} else if (c.variant.name === "vibrant") {
|
|
1627
|
+
return 1.15;
|
|
1628
|
+
}
|
|
1629
|
+
return 1;
|
|
1630
|
+
}
|
|
1631
|
+
},
|
|
1632
|
+
surfaceContainerHigh: {
|
|
1633
|
+
palette: () => palettes.get("neutral"),
|
|
1634
|
+
tone: () => {
|
|
1635
|
+
if (c.isDark) {
|
|
1636
|
+
return 12;
|
|
1637
|
+
} else {
|
|
1638
|
+
if (Hct.isYellow(palettes.get("neutral").hue)) {
|
|
1639
|
+
return 94;
|
|
1640
|
+
} else if (c.variant.name === "vibrant") {
|
|
1641
|
+
return 90;
|
|
1642
|
+
} else {
|
|
1643
|
+
return 92;
|
|
1644
|
+
}
|
|
1645
|
+
}
|
|
1646
|
+
},
|
|
1647
|
+
isBackground: true,
|
|
1648
|
+
chromaMultiplier: () => {
|
|
1649
|
+
if (c.variant.name === "neutral") {
|
|
1650
|
+
return 1.9;
|
|
1651
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1652
|
+
return 1.5;
|
|
1653
|
+
} else if (c.variant.name === "expressive") {
|
|
1654
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? 1.95 : 1.45;
|
|
1655
|
+
} else if (c.variant.name === "vibrant") {
|
|
1656
|
+
return 1.22;
|
|
1657
|
+
}
|
|
1658
|
+
return 1;
|
|
1659
|
+
}
|
|
1660
|
+
},
|
|
1661
|
+
surfaceContainerHighest: {
|
|
1662
|
+
palette: () => palettes.get("neutral"),
|
|
1663
|
+
tone: () => {
|
|
1664
|
+
if (c.isDark) {
|
|
1665
|
+
return 15;
|
|
1666
|
+
} else {
|
|
1667
|
+
if (Hct.isYellow(palettes.get("neutral").hue)) {
|
|
1668
|
+
return 92;
|
|
1669
|
+
} else if (c.variant.name === "vibrant") {
|
|
1670
|
+
return 88;
|
|
1671
|
+
} else {
|
|
1672
|
+
return 90;
|
|
1673
|
+
}
|
|
1674
|
+
}
|
|
1675
|
+
},
|
|
1676
|
+
isBackground: true,
|
|
1677
|
+
chromaMultiplier: () => {
|
|
1678
|
+
if (c.variant.name === "neutral") {
|
|
1679
|
+
return 2.2;
|
|
1680
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1681
|
+
return 1.7;
|
|
1682
|
+
} else if (c.variant.name === "expressive") {
|
|
1683
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? 2.3 : 1.6;
|
|
1684
|
+
} else if (c.variant.name === "vibrant") {
|
|
1685
|
+
return 1.29;
|
|
1686
|
+
} else {
|
|
1687
|
+
return 1;
|
|
1688
|
+
}
|
|
1689
|
+
}
|
|
1690
|
+
},
|
|
1691
|
+
onSurface: {
|
|
1692
|
+
palette: () => palettes.get("neutral"),
|
|
1693
|
+
tone: () => {
|
|
1694
|
+
if (c.variant.name === "vibrant") {
|
|
1695
|
+
return tMaxC(palettes.get("neutral"), 0, 100, 1.1);
|
|
1696
|
+
} else {
|
|
1697
|
+
return getInitialToneFromBackground(highestSurface$1(c, colors));
|
|
1698
|
+
}
|
|
1699
|
+
},
|
|
1700
|
+
chromaMultiplier: () => {
|
|
1701
|
+
if (c.variant.name === "neutral") {
|
|
1702
|
+
return 2.2;
|
|
1703
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1704
|
+
return 1.7;
|
|
1705
|
+
} else if (c.variant.name === "expressive") {
|
|
1706
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? c.isDark ? 3 : 2.3 : 1.6;
|
|
1707
|
+
}
|
|
1708
|
+
return 1;
|
|
1709
|
+
},
|
|
1710
|
+
background: () => highestSurface$1(c, colors),
|
|
1711
|
+
contrastCurve: () => c.isDark ? getCurve(11) : getCurve(9)
|
|
1712
|
+
},
|
|
1713
|
+
onSurfaceVariant: {
|
|
1714
|
+
palette: () => palettes.get("neutralVariant"),
|
|
1715
|
+
chromaMultiplier: () => {
|
|
1716
|
+
if (c.variant.name === "neutral") {
|
|
1717
|
+
return 2.2;
|
|
1718
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1719
|
+
return 1.7;
|
|
1720
|
+
} else if (c.variant.name === "expressive") {
|
|
1721
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? c.isDark ? 3 : 2.3 : 1.6;
|
|
1722
|
+
}
|
|
1723
|
+
return 1;
|
|
1724
|
+
},
|
|
1725
|
+
background: () => highestSurface$1(c, colors),
|
|
1726
|
+
contrastCurve: () => c.isDark ? getCurve(6) : getCurve(4.5)
|
|
1727
|
+
},
|
|
1728
|
+
outline: {
|
|
1729
|
+
palette: () => palettes.get("neutralVariant"),
|
|
1730
|
+
chromaMultiplier: () => {
|
|
1731
|
+
if (c.variant.name === "neutral") {
|
|
1732
|
+
return 2.2;
|
|
1733
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1734
|
+
return 1.7;
|
|
1735
|
+
} else if (c.variant.name === "expressive") {
|
|
1736
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? c.isDark ? 3 : 2.3 : 1.6;
|
|
1737
|
+
}
|
|
1738
|
+
return 1;
|
|
1739
|
+
},
|
|
1740
|
+
background: () => highestSurface$1(c, colors),
|
|
1741
|
+
contrastCurve: () => getCurve(3)
|
|
1742
|
+
},
|
|
1743
|
+
outlineVariant: {
|
|
1744
|
+
palette: () => palettes.get("neutralVariant"),
|
|
1745
|
+
chromaMultiplier: () => {
|
|
1746
|
+
if (c.variant.name === "neutral") {
|
|
1747
|
+
return 2.2;
|
|
1748
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1749
|
+
return 1.7;
|
|
1750
|
+
} else if (c.variant.name === "expressive") {
|
|
1751
|
+
return Hct.isYellow(palettes.get("neutral").hue) ? c.isDark ? 3 : 2.3 : 1.6;
|
|
1752
|
+
}
|
|
1753
|
+
return 1;
|
|
1754
|
+
},
|
|
1755
|
+
background: () => highestSurface$1(c, colors),
|
|
1756
|
+
contrastCurve: () => getCurve(1.5)
|
|
1757
|
+
},
|
|
1758
|
+
inverseSurface: {
|
|
1759
|
+
palette: () => palettes.get("neutral"),
|
|
1760
|
+
tone: () => c.isDark ? 98 : 4,
|
|
1761
|
+
isBackground: true
|
|
1762
|
+
},
|
|
1763
|
+
inverseOnSurface: {
|
|
1764
|
+
palette: () => palettes.get("neutral"),
|
|
1765
|
+
tone: () => c.isDark ? 20 : 95,
|
|
1766
|
+
background: () => colors.get("inverseSurface"),
|
|
1767
|
+
contrastCurve: () => getCurve(7)
|
|
1768
|
+
},
|
|
1769
|
+
////////////////////////////////////////////////////////////////
|
|
1770
|
+
// Primaries [P] //
|
|
1771
|
+
////////////////////////////////////////////////////////////////
|
|
1772
|
+
primary: {
|
|
1773
|
+
palette: () => palettes.get("primary"),
|
|
1774
|
+
tone: () => {
|
|
1775
|
+
if (c.variant.name === "neutral") {
|
|
1776
|
+
return c.isDark ? 80 : 40;
|
|
1777
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1778
|
+
if (c.isDark) {
|
|
1779
|
+
return 80;
|
|
1780
|
+
} else {
|
|
1781
|
+
return tMaxC(palettes.get("primary"));
|
|
1782
|
+
}
|
|
1783
|
+
} else if (c.variant.name === "expressive") {
|
|
1784
|
+
return tMaxC(
|
|
1785
|
+
palettes.get("primary"),
|
|
1786
|
+
0,
|
|
1787
|
+
Hct.isYellow(palettes.get("primary").hue) ? 25 : Hct.isCyan(palettes.get("primary").hue) ? 88 : 98
|
|
1788
|
+
);
|
|
1789
|
+
} else {
|
|
1790
|
+
return tMaxC(
|
|
1791
|
+
palettes.get("primary"),
|
|
1792
|
+
0,
|
|
1793
|
+
Hct.isCyan(palettes.get("primary").hue) ? 88 : 98
|
|
1794
|
+
);
|
|
1795
|
+
}
|
|
1796
|
+
},
|
|
1797
|
+
isBackground: true,
|
|
1798
|
+
background: () => highestSurface$1(c, colors),
|
|
1799
|
+
contrastCurve: () => getCurve(4.5),
|
|
1800
|
+
adjustTone: () => toneDeltaPair(
|
|
1801
|
+
colors.get("primaryContainer"),
|
|
1802
|
+
colors.get("primary"),
|
|
1803
|
+
5,
|
|
1804
|
+
"relative_lighter",
|
|
1805
|
+
true,
|
|
1806
|
+
"farther"
|
|
1807
|
+
)
|
|
1808
|
+
},
|
|
1809
|
+
primaryDim: {
|
|
1810
|
+
palette: () => palettes.get("primary"),
|
|
1811
|
+
tone: () => {
|
|
1812
|
+
if (c.variant.name === "neutral") {
|
|
1813
|
+
return 85;
|
|
1814
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1815
|
+
return tMaxC(palettes.get("primary"), 0, 90);
|
|
1816
|
+
} else {
|
|
1817
|
+
return tMaxC(palettes.get("primary"));
|
|
1818
|
+
}
|
|
1819
|
+
},
|
|
1820
|
+
isBackground: true,
|
|
1821
|
+
background: () => getColor("surfaceContainerHigh"),
|
|
1822
|
+
contrastCurve: () => getCurve(4.5),
|
|
1823
|
+
adjustTone: () => toneDeltaPair(
|
|
1824
|
+
colors.get("primaryDim"),
|
|
1825
|
+
colors.get("primary"),
|
|
1826
|
+
5,
|
|
1827
|
+
"darker",
|
|
1828
|
+
true,
|
|
1829
|
+
"farther"
|
|
1830
|
+
)
|
|
1831
|
+
},
|
|
1832
|
+
onPrimary: {
|
|
1833
|
+
palette: () => palettes.get("primary"),
|
|
1834
|
+
background: () => colors.get("primary"),
|
|
1835
|
+
contrastCurve: () => getCurve(6)
|
|
1836
|
+
},
|
|
1837
|
+
primaryContainer: {
|
|
1838
|
+
palette: () => palettes.get("primary"),
|
|
1839
|
+
tone: () => {
|
|
1840
|
+
if (c.variant.name === "neutral") {
|
|
1841
|
+
return c.isDark ? 30 : 90;
|
|
1842
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
1843
|
+
return c.isDark ? tMinC(palettes.get("primary"), 35, 93) : tMaxC(palettes.get("primary"), 0, 90);
|
|
1844
|
+
} else if (c.variant.name === "expressive") {
|
|
1845
|
+
return c.isDark ? tMaxC(palettes.get("primary"), 30, 93) : tMaxC(
|
|
1846
|
+
palettes.get("primary"),
|
|
1847
|
+
78,
|
|
1848
|
+
Hct.isCyan(palettes.get("primary").hue) ? 88 : 90
|
|
1849
|
+
);
|
|
1850
|
+
}
|
|
1851
|
+
return c.isDark ? tMinC(palettes.get("primary"), 66, 93) : tMaxC(
|
|
1852
|
+
palettes.get("primary"),
|
|
1853
|
+
66,
|
|
1854
|
+
Hct.isCyan(palettes.get("primary").hue) ? 88 : 93
|
|
1855
|
+
);
|
|
1856
|
+
},
|
|
1857
|
+
isBackground: true,
|
|
1858
|
+
background: () => highestSurface$1(c, colors),
|
|
1859
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
1860
|
+
},
|
|
1861
|
+
onPrimaryContainer: {
|
|
1862
|
+
palette: () => palettes.get("primary"),
|
|
1863
|
+
background: () => colors.get("primaryContainer"),
|
|
1864
|
+
contrastCurve: () => getCurve(6)
|
|
1865
|
+
},
|
|
1866
|
+
primaryFixed: {
|
|
1867
|
+
palette: () => palettes.get("primary"),
|
|
1868
|
+
tone: () => {
|
|
1869
|
+
return c.temp(
|
|
1870
|
+
{
|
|
1871
|
+
isDark: false,
|
|
1872
|
+
contrastLevel: 0
|
|
1873
|
+
},
|
|
1874
|
+
() => {
|
|
1875
|
+
const color = getColor("primaryContainer");
|
|
1876
|
+
return color.getTone();
|
|
1877
|
+
}
|
|
1878
|
+
);
|
|
1879
|
+
},
|
|
1880
|
+
isBackground: true,
|
|
1881
|
+
background: () => highestSurface$1(c, colors),
|
|
1882
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
1883
|
+
},
|
|
1884
|
+
primaryFixedDim: {
|
|
1885
|
+
palette: () => palettes.get("primary"),
|
|
1886
|
+
tone: () => colors.get("primaryFixed").getTone(),
|
|
1887
|
+
isBackground: true,
|
|
1888
|
+
adjustTone: () => toneDeltaPair(
|
|
1889
|
+
getColor("primaryFixedDim"),
|
|
1890
|
+
getColor("primaryFixed"),
|
|
1891
|
+
5,
|
|
1892
|
+
"darker",
|
|
1893
|
+
true,
|
|
1894
|
+
"exact"
|
|
1895
|
+
)
|
|
1896
|
+
},
|
|
1897
|
+
onPrimaryFixed: {
|
|
1898
|
+
palette: () => palettes.get("primary"),
|
|
1899
|
+
background: () => colors.get("primaryFixedDim"),
|
|
1900
|
+
contrastCurve: () => getCurve(7)
|
|
1901
|
+
},
|
|
1902
|
+
onPrimaryFixedVariant: {
|
|
1903
|
+
palette: () => palettes.get("primary"),
|
|
1904
|
+
background: () => colors.get("primaryFixedDim"),
|
|
1905
|
+
contrastCurve: () => getCurve(4.5)
|
|
1906
|
+
},
|
|
1907
|
+
inversePrimary: {
|
|
1908
|
+
palette: () => palettes.get("primary"),
|
|
1909
|
+
tone: () => tMaxC(palettes.get("primary")),
|
|
1910
|
+
background: () => colors.get("inverseSurface"),
|
|
1911
|
+
contrastCurve: () => getCurve(6)
|
|
1912
|
+
},
|
|
1913
|
+
////////////////////////////////////////////////////////////////
|
|
1914
|
+
// Secondaries [Q] //
|
|
1915
|
+
////////////////////////////////////////////////////////////////
|
|
1916
|
+
secondary: {
|
|
1917
|
+
palette: () => palettes.get("secondary"),
|
|
1918
|
+
tone: () => {
|
|
1919
|
+
if (c.variant.name === "neutral") {
|
|
1920
|
+
return c.isDark ? tMinC(palettes.get("secondary"), 0, 98) : tMaxC(palettes.get("secondary"));
|
|
1921
|
+
} else if (c.variant.name === "vibrant") {
|
|
1922
|
+
return tMaxC(palettes.get("secondary"), 0, c.isDark ? 90 : 98);
|
|
1923
|
+
} else {
|
|
1924
|
+
return c.isDark ? 80 : tMaxC(palettes.get("secondary"));
|
|
1925
|
+
}
|
|
1926
|
+
},
|
|
1927
|
+
isBackground: true,
|
|
1928
|
+
background: () => highestSurface$1(c, colors),
|
|
1929
|
+
contrastCurve: () => getCurve(4.5),
|
|
1930
|
+
adjustTone: () => toneDeltaPair(
|
|
1931
|
+
getColor("secondaryContainer"),
|
|
1932
|
+
getColor("secondary"),
|
|
1933
|
+
5,
|
|
1934
|
+
"relative_lighter",
|
|
1935
|
+
true,
|
|
1936
|
+
"farther"
|
|
1937
|
+
)
|
|
1938
|
+
},
|
|
1939
|
+
secondaryDim: {
|
|
1940
|
+
palette: () => palettes.get("secondary"),
|
|
1941
|
+
tone: () => {
|
|
1942
|
+
if (c.variant.name === "neutral") {
|
|
1943
|
+
return 85;
|
|
1944
|
+
} else {
|
|
1945
|
+
return tMaxC(palettes.get("secondary"), 0, 90);
|
|
1946
|
+
}
|
|
1947
|
+
},
|
|
1948
|
+
isBackground: true,
|
|
1949
|
+
background: () => getColor("surfaceContainerHigh"),
|
|
1950
|
+
contrastCurve: () => getCurve(4.5),
|
|
1951
|
+
adjustTone: () => toneDeltaPair(
|
|
1952
|
+
getColor("secondaryDim"),
|
|
1953
|
+
getColor("secondary"),
|
|
1954
|
+
5,
|
|
1955
|
+
"darker",
|
|
1956
|
+
true,
|
|
1957
|
+
"farther"
|
|
1958
|
+
)
|
|
1959
|
+
},
|
|
1960
|
+
onSecondary: {
|
|
1961
|
+
palette: () => palettes.get("secondary"),
|
|
1962
|
+
background: () => getColor("secondary"),
|
|
1963
|
+
contrastCurve: () => getCurve(6)
|
|
1964
|
+
},
|
|
1965
|
+
secondaryContainer: {
|
|
1966
|
+
palette: () => palettes.get("secondary"),
|
|
1967
|
+
tone: () => {
|
|
1968
|
+
if (c.variant.name === "vibrant") {
|
|
1969
|
+
return c.isDark ? tMinC(palettes.get("secondary"), 30, 40) : tMaxC(palettes.get("secondary"), 84, 90);
|
|
1970
|
+
} else if (c.variant.name === "expressive") {
|
|
1971
|
+
return c.isDark ? 15 : tMaxC(palettes.get("secondary"), 90, 95);
|
|
1972
|
+
} else {
|
|
1973
|
+
return c.isDark ? 25 : 90;
|
|
1974
|
+
}
|
|
1975
|
+
},
|
|
1976
|
+
isBackground: true,
|
|
1977
|
+
background: () => highestSurface$1(c, colors),
|
|
1978
|
+
adjustTone: () => void 0,
|
|
1979
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
1980
|
+
},
|
|
1981
|
+
onSecondaryContainer: {
|
|
1982
|
+
palette: () => palettes.get("secondary"),
|
|
1983
|
+
background: () => getColor("secondaryContainer"),
|
|
1984
|
+
contrastCurve: () => getCurve(6)
|
|
1985
|
+
},
|
|
1986
|
+
secondaryFixed: {
|
|
1987
|
+
palette: () => palettes.get("secondary"),
|
|
1988
|
+
tone: () => {
|
|
1989
|
+
return c.temp(
|
|
1990
|
+
{
|
|
1991
|
+
isDark: false,
|
|
1992
|
+
contrastLevel: 0
|
|
1993
|
+
},
|
|
1994
|
+
() => {
|
|
1995
|
+
const color = getColor("secondaryContainer");
|
|
1996
|
+
return color.getTone();
|
|
1997
|
+
}
|
|
1998
|
+
);
|
|
1999
|
+
},
|
|
2000
|
+
isBackground: true,
|
|
2001
|
+
background: () => highestSurface$1(c, colors),
|
|
2002
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
2003
|
+
},
|
|
2004
|
+
secondaryFixedDim: {
|
|
2005
|
+
palette: () => palettes.get("secondary"),
|
|
2006
|
+
tone: () => getColor("secondaryFixed").getTone(),
|
|
2007
|
+
isBackground: true,
|
|
2008
|
+
adjustTone: () => toneDeltaPair(
|
|
2009
|
+
getColor("secondaryFixedDim"),
|
|
2010
|
+
getColor("secondaryFixed"),
|
|
2011
|
+
5,
|
|
2012
|
+
"darker",
|
|
2013
|
+
true,
|
|
2014
|
+
"exact"
|
|
2015
|
+
)
|
|
2016
|
+
},
|
|
2017
|
+
onSecondaryFixed: {
|
|
2018
|
+
palette: () => palettes.get("secondary"),
|
|
2019
|
+
background: () => getColor("secondaryFixedDim"),
|
|
2020
|
+
contrastCurve: () => getCurve(7)
|
|
2021
|
+
},
|
|
2022
|
+
onSecondaryFixedVariant: {
|
|
2023
|
+
palette: () => palettes.get("secondary"),
|
|
2024
|
+
background: () => getColor("secondaryFixedDim"),
|
|
2025
|
+
contrastCurve: () => getCurve(4.5)
|
|
2026
|
+
},
|
|
2027
|
+
////////////////////////////////////////////////////////////////
|
|
2028
|
+
// Tertiaries [T] //
|
|
2029
|
+
////////////////////////////////////////////////////////////////
|
|
2030
|
+
tertiary: {
|
|
2031
|
+
palette: () => palettes.get("tertiary"),
|
|
2032
|
+
tone: () => {
|
|
2033
|
+
if (c.variant.name === "expressive" || c.variant.name === "vibrant") {
|
|
2034
|
+
return tMaxC(
|
|
2035
|
+
palettes.get("tertiary"),
|
|
2036
|
+
0,
|
|
2037
|
+
Hct.isCyan(palettes.get("tertiary").hue) ? 88 : c.isDark ? 98 : 100
|
|
2038
|
+
);
|
|
2039
|
+
} else {
|
|
2040
|
+
return c.isDark ? tMaxC(palettes.get("tertiary"), 0, 98) : tMaxC(palettes.get("tertiary"));
|
|
2041
|
+
}
|
|
2042
|
+
},
|
|
2043
|
+
isBackground: true,
|
|
2044
|
+
background: () => highestSurface$1(c, colors),
|
|
2045
|
+
contrastCurve: () => getCurve(4.5),
|
|
2046
|
+
adjustTone: () => toneDeltaPair(
|
|
2047
|
+
getColor("tertiaryContainer"),
|
|
2048
|
+
getColor("tertiary"),
|
|
2049
|
+
5,
|
|
2050
|
+
"relative_lighter",
|
|
2051
|
+
true,
|
|
2052
|
+
"farther"
|
|
2053
|
+
)
|
|
2054
|
+
},
|
|
2055
|
+
tertiaryDim: {
|
|
2056
|
+
palette: () => palettes.get("tertiary"),
|
|
2057
|
+
tone: () => {
|
|
2058
|
+
if (c.variant.name === "tonalSpot") {
|
|
2059
|
+
return tMaxC(palettes.get("tertiary"), 0, 90);
|
|
2060
|
+
} else {
|
|
2061
|
+
return tMaxC(palettes.get("tertiary"));
|
|
2062
|
+
}
|
|
2063
|
+
},
|
|
2064
|
+
isBackground: true,
|
|
2065
|
+
background: () => getColor("surfaceContainerHigh"),
|
|
2066
|
+
contrastCurve: () => getCurve(4.5),
|
|
2067
|
+
adjustTone: () => toneDeltaPair(
|
|
2068
|
+
getColor("tertiaryDim"),
|
|
2069
|
+
getColor("tertiary"),
|
|
2070
|
+
5,
|
|
2071
|
+
"darker",
|
|
2072
|
+
true,
|
|
2073
|
+
"farther"
|
|
2074
|
+
)
|
|
2075
|
+
},
|
|
2076
|
+
onTertiary: {
|
|
2077
|
+
palette: () => palettes.get("tertiary"),
|
|
2078
|
+
background: () => getColor("tertiary"),
|
|
2079
|
+
contrastCurve: () => getCurve(6)
|
|
2080
|
+
},
|
|
2081
|
+
tertiaryContainer: {
|
|
2082
|
+
palette: () => palettes.get("tertiary"),
|
|
2083
|
+
tone: () => {
|
|
2084
|
+
if (c.variant.name === "neutral") {
|
|
2085
|
+
return c.isDark ? tMaxC(palettes.get("tertiary"), 0, 93) : tMaxC(palettes.get("tertiary"), 0, 96);
|
|
2086
|
+
} else if (c.variant.name === "tonalSpot") {
|
|
2087
|
+
return tMaxC(palettes.get("tertiary"), 0, c.isDark ? 93 : 100);
|
|
2088
|
+
} else if (c.variant.name === "expressive") {
|
|
2089
|
+
return tMaxC(
|
|
2090
|
+
palettes.get("tertiary"),
|
|
2091
|
+
75,
|
|
2092
|
+
Hct.isCyan(palettes.get("tertiary").hue) ? 88 : c.isDark ? 93 : 100
|
|
2093
|
+
);
|
|
2094
|
+
} else {
|
|
2095
|
+
return c.isDark ? tMaxC(palettes.get("tertiary"), 0, 93) : tMaxC(palettes.get("tertiary"), 72, 100);
|
|
2096
|
+
}
|
|
2097
|
+
},
|
|
2098
|
+
isBackground: true,
|
|
2099
|
+
background: () => highestSurface$1(c, colors),
|
|
2100
|
+
adjustTone: () => void 0,
|
|
2101
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
2102
|
+
},
|
|
2103
|
+
onTertiaryContainer: {
|
|
2104
|
+
palette: () => palettes.get("tertiary"),
|
|
2105
|
+
background: () => getColor("tertiaryContainer"),
|
|
2106
|
+
contrastCurve: () => getCurve(6)
|
|
2107
|
+
},
|
|
2108
|
+
tertiaryFixed: {
|
|
2109
|
+
palette: () => palettes.get("tertiary"),
|
|
2110
|
+
tone: () => {
|
|
2111
|
+
return c.temp(
|
|
2112
|
+
{
|
|
2113
|
+
isDark: false,
|
|
2114
|
+
contrastLevel: 0
|
|
2115
|
+
},
|
|
2116
|
+
() => {
|
|
2117
|
+
const color = getColor("tertiaryContainer");
|
|
2118
|
+
return color.getTone();
|
|
2119
|
+
}
|
|
2120
|
+
);
|
|
2121
|
+
},
|
|
2122
|
+
isBackground: true,
|
|
2123
|
+
background: () => highestSurface$1(c, colors),
|
|
2124
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
2125
|
+
},
|
|
2126
|
+
tertiaryFixedDim: {
|
|
2127
|
+
palette: () => palettes.get("tertiary"),
|
|
2128
|
+
tone: () => getColor("tertiaryFixed").getTone(),
|
|
2129
|
+
isBackground: true,
|
|
2130
|
+
adjustTone: () => toneDeltaPair(
|
|
2131
|
+
getColor("tertiaryFixedDim"),
|
|
2132
|
+
getColor("tertiaryFixed"),
|
|
2133
|
+
5,
|
|
2134
|
+
"darker",
|
|
2135
|
+
true,
|
|
2136
|
+
"exact"
|
|
2137
|
+
)
|
|
2138
|
+
},
|
|
2139
|
+
onTertiaryFixed: {
|
|
2140
|
+
palette: () => palettes.get("tertiary"),
|
|
2141
|
+
background: () => getColor("tertiaryFixedDim"),
|
|
2142
|
+
contrastCurve: () => getCurve(7)
|
|
2143
|
+
},
|
|
2144
|
+
onTertiaryFixedVariant: {
|
|
2145
|
+
palette: () => palettes.get("tertiary"),
|
|
2146
|
+
background: () => getColor("tertiaryFixedDim"),
|
|
2147
|
+
contrastCurve: () => getCurve(4.5)
|
|
2148
|
+
},
|
|
2149
|
+
////////////////////////////////////////////////////////////////
|
|
2150
|
+
// Errors [E] //
|
|
2151
|
+
////////////////////////////////////////////////////////////////
|
|
2152
|
+
error: {
|
|
2153
|
+
palette: () => palettes.get("error"),
|
|
2154
|
+
tone: () => {
|
|
2155
|
+
return c.isDark ? tMinC(palettes.get("error"), 0, 98) : tMaxC(palettes.get("error"));
|
|
2156
|
+
},
|
|
2157
|
+
isBackground: true,
|
|
2158
|
+
background: () => highestSurface$1(c, colors),
|
|
2159
|
+
contrastCurve: () => getCurve(4.5),
|
|
2160
|
+
adjustTone: () => toneDeltaPair(
|
|
2161
|
+
colors.get("errorContainer"),
|
|
2162
|
+
colors.get("error"),
|
|
2163
|
+
5,
|
|
2164
|
+
"relative_lighter",
|
|
2165
|
+
true,
|
|
2166
|
+
"farther"
|
|
2167
|
+
)
|
|
2168
|
+
},
|
|
2169
|
+
errorDim: {
|
|
2170
|
+
palette: () => palettes.get("error"),
|
|
2171
|
+
tone: () => tMinC(palettes.get("error")),
|
|
2172
|
+
isBackground: true,
|
|
2173
|
+
background: () => getColor("surfaceContainerHigh"),
|
|
2174
|
+
contrastCurve: () => getCurve(4.5),
|
|
2175
|
+
adjustTone: () => toneDeltaPair(
|
|
2176
|
+
getColor("errorDim"),
|
|
2177
|
+
getColor("error"),
|
|
2178
|
+
5,
|
|
2179
|
+
"darker",
|
|
2180
|
+
true,
|
|
2181
|
+
"farther"
|
|
2182
|
+
)
|
|
2183
|
+
},
|
|
2184
|
+
onError: {
|
|
2185
|
+
palette: () => palettes.get("error"),
|
|
2186
|
+
background: () => colors.get("error"),
|
|
2187
|
+
contrastCurve: () => getCurve(6)
|
|
2188
|
+
},
|
|
2189
|
+
errorContainer: {
|
|
2190
|
+
palette: () => palettes.get("error"),
|
|
2191
|
+
tone: () => {
|
|
2192
|
+
return c.isDark ? tMinC(palettes.get("error"), 30, 93) : tMaxC(palettes.get("error"), 0, 90);
|
|
2193
|
+
},
|
|
2194
|
+
isBackground: true,
|
|
2195
|
+
background: () => highestSurface$1(c, colors),
|
|
2196
|
+
adjustTone: () => void 0,
|
|
2197
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
2198
|
+
},
|
|
2199
|
+
onErrorContainer: {
|
|
2200
|
+
palette: () => palettes.get("error"),
|
|
2201
|
+
background: () => colors.get("errorContainer"),
|
|
2202
|
+
contrastCurve: () => getCurve(4.5)
|
|
2203
|
+
},
|
|
2204
|
+
/////////////////////////////////////////////////////////////////
|
|
2205
|
+
// Remapped Colors //
|
|
2206
|
+
/////////////////////////////////////////////////////////////////
|
|
2207
|
+
surfaceVariant: {
|
|
2208
|
+
alias: "surfaceContainerHighest"
|
|
2209
|
+
},
|
|
2210
|
+
surfaceTint: {
|
|
2211
|
+
alias: "primary"
|
|
2212
|
+
},
|
|
2213
|
+
background: {
|
|
2214
|
+
alias: "surface"
|
|
2215
|
+
},
|
|
2216
|
+
onBackground: {
|
|
2217
|
+
alias: "onSurface"
|
|
2218
|
+
}
|
|
2219
|
+
};
|
|
2220
|
+
};
|
|
2221
|
+
function capitalizeFirstLetter(string) {
|
|
2222
|
+
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
2223
|
+
}
|
|
2224
|
+
class ColorApi {
|
|
2225
|
+
constructor({
|
|
2226
|
+
colorManager,
|
|
2227
|
+
context
|
|
2228
|
+
}) {
|
|
2229
|
+
__publicField(this, "colorManager");
|
|
2230
|
+
__publicField(this, "context");
|
|
2231
|
+
__publicField(this, "api");
|
|
2232
|
+
this.context = context;
|
|
2233
|
+
this.colorManager = colorManager;
|
|
2234
|
+
this.context.onUpdate((changed) => {
|
|
2235
|
+
if (changed.includes("variant")) {
|
|
2236
|
+
this.colorManager.clear();
|
|
2237
|
+
this.addColors(this.context.variant.colors);
|
|
2238
|
+
}
|
|
2239
|
+
});
|
|
2240
|
+
}
|
|
2241
|
+
getAll() {
|
|
2242
|
+
return this.colorManager.getAll();
|
|
2243
|
+
}
|
|
2244
|
+
addColor(key, color) {
|
|
2245
|
+
return this.colorManager.createOrUpdate(key, color);
|
|
2246
|
+
}
|
|
2247
|
+
addColors(args) {
|
|
2248
|
+
if (!this.api)
|
|
2249
|
+
throw new Error(
|
|
2250
|
+
"The API is not initialized. Please call bootstrap() before calling addColors()."
|
|
2251
|
+
);
|
|
2252
|
+
if (typeof args === "function") {
|
|
2253
|
+
args = args(this.api);
|
|
2254
|
+
}
|
|
2255
|
+
if (args) {
|
|
2256
|
+
Object.entries(args).forEach(([name, colorOption]) => {
|
|
2257
|
+
this.addColor(name, colorOption);
|
|
2258
|
+
});
|
|
2259
|
+
}
|
|
2260
|
+
}
|
|
2261
|
+
get(key) {
|
|
2262
|
+
return this.colorManager.get(key);
|
|
2263
|
+
}
|
|
2264
|
+
remove(key) {
|
|
2265
|
+
return this.colorManager.remove(key);
|
|
2266
|
+
}
|
|
2267
|
+
update(key, newColor) {
|
|
2268
|
+
return this.colorManager.createOrUpdate(key, newColor);
|
|
2269
|
+
}
|
|
2270
|
+
addFromCustomPalette(key) {
|
|
2271
|
+
if (this.context.variant.colorsFromCustomPalette) {
|
|
2272
|
+
return this.addColors(this.context.variant.colorsFromCustomPalette(key));
|
|
2273
|
+
}
|
|
2274
|
+
const colorKey = key;
|
|
2275
|
+
const colorDimKey = colorKey + "Dim";
|
|
2276
|
+
const ColorKey = capitalizeFirstLetter(key);
|
|
2277
|
+
const onColorKey = "on" + ColorKey;
|
|
2278
|
+
const colorContainerKey = colorKey + "Container";
|
|
2279
|
+
const onColorContainerKey = "on" + ColorKey + "Container";
|
|
2280
|
+
const colorFixedKey = colorKey + "Fixed";
|
|
2281
|
+
const colorFixedDimKey = colorKey + "FixedDim";
|
|
2282
|
+
const onColorFixedKey = "on" + ColorKey + "Fixed";
|
|
2283
|
+
const onColorFixedVariantKey = "on" + ColorKey + "FixedVariant";
|
|
2284
|
+
const colors = ({ palettes, colors: colors2, context: ctx }) => ({
|
|
2285
|
+
[colorKey]: {
|
|
2286
|
+
palette: () => palettes.get(colorKey),
|
|
2287
|
+
tone: () => {
|
|
2288
|
+
if (ctx.variant.name === "neutral") {
|
|
2289
|
+
return ctx.isDark ? tMinC(palettes.get(colorKey), 0, 98) : tMaxC(palettes.get(colorKey));
|
|
2290
|
+
} else if (ctx.variant.name === "vibrant") {
|
|
2291
|
+
return tMaxC(palettes.get(colorKey), 0, ctx.isDark ? 90 : 98);
|
|
2292
|
+
} else {
|
|
2293
|
+
return ctx.isDark ? 80 : tMaxC(palettes.get(colorKey));
|
|
2294
|
+
}
|
|
2295
|
+
},
|
|
2296
|
+
isBackground: true,
|
|
2297
|
+
background: () => highestSurface$1(ctx, this),
|
|
2298
|
+
contrastCurve: () => getCurve(4.5),
|
|
2299
|
+
adjustTone: () => toneDeltaPair(
|
|
2300
|
+
colors2.get(colorContainerKey),
|
|
2301
|
+
colors2.get(colorKey),
|
|
2302
|
+
5,
|
|
2303
|
+
"relative_lighter",
|
|
2304
|
+
true,
|
|
2305
|
+
"farther"
|
|
2306
|
+
)
|
|
2307
|
+
},
|
|
2308
|
+
[colorDimKey]: {
|
|
2309
|
+
palette: () => palettes.get(colorKey),
|
|
2310
|
+
tone: () => {
|
|
2311
|
+
if (ctx.variant.name === "neutral") {
|
|
2312
|
+
return 85;
|
|
2313
|
+
} else {
|
|
2314
|
+
return tMaxC(palettes.get(colorKey), 0, 90);
|
|
2315
|
+
}
|
|
2316
|
+
},
|
|
2317
|
+
isBackground: true,
|
|
2318
|
+
background: () => this.get("surfaceContainerHigh"),
|
|
2319
|
+
contrastCurve: () => getCurve(4.5),
|
|
2320
|
+
adjustTone: () => toneDeltaPair(
|
|
2321
|
+
this.get(colorDimKey),
|
|
2322
|
+
this.get(colorKey),
|
|
2323
|
+
5,
|
|
2324
|
+
"darker",
|
|
2325
|
+
true,
|
|
2326
|
+
"farther"
|
|
2327
|
+
)
|
|
2328
|
+
},
|
|
2329
|
+
[onColorKey]: {
|
|
2330
|
+
palette: () => palettes.get(colorKey),
|
|
2331
|
+
background: () => this.get(colorKey),
|
|
2332
|
+
contrastCurve: () => getCurve(6)
|
|
2333
|
+
},
|
|
2334
|
+
[colorContainerKey]: {
|
|
2335
|
+
palette: () => palettes.get(colorKey),
|
|
2336
|
+
tone: () => {
|
|
2337
|
+
if (ctx.variant.name === "vibrant") {
|
|
2338
|
+
return ctx.isDark ? tMinC(palettes.get(colorKey), 30, 40) : tMaxC(palettes.get(colorKey), 84, 90);
|
|
2339
|
+
} else if (ctx.variant.name === "expressive") {
|
|
2340
|
+
return ctx.isDark ? 15 : tMaxC(palettes.get(colorKey), 90, 95);
|
|
2341
|
+
} else {
|
|
2342
|
+
return ctx.isDark ? 25 : 90;
|
|
2343
|
+
}
|
|
2344
|
+
},
|
|
2345
|
+
isBackground: true,
|
|
2346
|
+
background: () => highestSurface$1(ctx, this),
|
|
2347
|
+
adjustTone: () => void 0,
|
|
2348
|
+
contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
2349
|
+
},
|
|
2350
|
+
[onColorContainerKey]: {
|
|
2351
|
+
palette: () => palettes.get(colorKey),
|
|
2352
|
+
background: () => this.get(colorContainerKey),
|
|
2353
|
+
contrastCurve: () => getCurve(6)
|
|
2354
|
+
},
|
|
2355
|
+
[colorFixedKey]: {
|
|
2356
|
+
palette: () => palettes.get(colorKey),
|
|
2357
|
+
tone: () => {
|
|
2358
|
+
return ctx.temp({ isDark: false, contrastLevel: 0 }, () => {
|
|
2359
|
+
const color = this.get(colorContainerKey);
|
|
2360
|
+
return color.getTone();
|
|
2361
|
+
});
|
|
2362
|
+
},
|
|
2363
|
+
isBackground: true,
|
|
2364
|
+
background: () => highestSurface$1(ctx, this),
|
|
2365
|
+
contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
2366
|
+
},
|
|
2367
|
+
[colorFixedDimKey]: {
|
|
2368
|
+
palette: () => palettes.get(colorKey),
|
|
2369
|
+
tone: () => this.get(colorFixedKey).getTone(),
|
|
2370
|
+
isBackground: true,
|
|
2371
|
+
adjustTone: () => toneDeltaPair(
|
|
2372
|
+
this.get(colorFixedDimKey),
|
|
2373
|
+
this.get(colorFixedKey),
|
|
2374
|
+
5,
|
|
2375
|
+
"darker",
|
|
2376
|
+
true,
|
|
2377
|
+
"exact"
|
|
2378
|
+
)
|
|
2379
|
+
},
|
|
2380
|
+
[onColorFixedKey]: {
|
|
2381
|
+
palette: () => palettes.get(colorKey),
|
|
2382
|
+
background: () => this.get(colorFixedDimKey),
|
|
2383
|
+
contrastCurve: () => getCurve(7)
|
|
2384
|
+
},
|
|
2385
|
+
[onColorFixedVariantKey]: {
|
|
2386
|
+
palette: () => palettes.get(colorKey),
|
|
2387
|
+
background: () => this.get(colorFixedDimKey),
|
|
2388
|
+
contrastCurve: () => getCurve(4.5)
|
|
2389
|
+
}
|
|
2390
|
+
});
|
|
2391
|
+
this.addColors(colors);
|
|
2392
|
+
}
|
|
2393
|
+
}
|
|
2394
|
+
class ColorManager {
|
|
2395
|
+
constructor(args) {
|
|
2396
|
+
__publicField(this, "colorMap", /* @__PURE__ */ new Map());
|
|
2397
|
+
__publicField(this, "context");
|
|
2398
|
+
this.context = args.context;
|
|
2399
|
+
}
|
|
2400
|
+
createOrUpdate(key, args) {
|
|
2401
|
+
let colorEntity = this.colorMap.get(key);
|
|
2402
|
+
if ("alias" in args) {
|
|
2403
|
+
colorEntity = new ColorAlias(key, args.alias, this);
|
|
2404
|
+
} else if ("hex" in args) {
|
|
2405
|
+
colorEntity = new ColorFromHex(key, args.hex);
|
|
2406
|
+
} else {
|
|
2407
|
+
try {
|
|
2408
|
+
if (colorEntity instanceof ColorFromPalette) {
|
|
2409
|
+
colorEntity.update(args);
|
|
2410
|
+
} else {
|
|
2411
|
+
colorEntity = new ColorFromPalette(key, args, this.context);
|
|
2412
|
+
}
|
|
2413
|
+
} catch (e) {
|
|
2414
|
+
console.error(e);
|
|
2415
|
+
throw new Error(`Invalid color options provided for ${key}`);
|
|
2416
|
+
}
|
|
2417
|
+
}
|
|
2418
|
+
this.colorMap.set(key, colorEntity);
|
|
2419
|
+
return colorEntity;
|
|
2420
|
+
}
|
|
2421
|
+
remove(key) {
|
|
2422
|
+
return this.colorMap.delete(key);
|
|
2423
|
+
}
|
|
2424
|
+
clear() {
|
|
2425
|
+
this.colorMap.clear();
|
|
2426
|
+
}
|
|
2427
|
+
get(key) {
|
|
2428
|
+
const colorEntity = this.colorMap.get(key);
|
|
2429
|
+
if (colorEntity) {
|
|
2430
|
+
return colorEntity;
|
|
2431
|
+
} else {
|
|
2432
|
+
throw new Error(`Color ${key} does not exist`);
|
|
2433
|
+
}
|
|
2434
|
+
}
|
|
2435
|
+
getAll() {
|
|
2436
|
+
return this.colorMap;
|
|
2437
|
+
}
|
|
2438
|
+
}
|
|
2439
|
+
const ColorModule = {
|
|
2440
|
+
colorManager: awilix.asClass(ColorManager).singleton(),
|
|
2441
|
+
colorApi: awilix.asClass(ColorApi).singleton()
|
|
2442
|
+
};
|
|
2443
|
+
const AppModule = {
|
|
2444
|
+
api: awilix.asClass(API).singleton()
|
|
2445
|
+
};
|
|
2446
|
+
class PluginApi {
|
|
2447
|
+
constructor() {
|
|
2448
|
+
__publicField(this, "plugins", /* @__PURE__ */ new Map());
|
|
2449
|
+
}
|
|
2450
|
+
addPlugin(plugin) {
|
|
2451
|
+
this.plugins.set(plugin.name, plugin);
|
|
2452
|
+
}
|
|
2453
|
+
initPlugins(api) {
|
|
2454
|
+
const plugins = new Map(this.plugins);
|
|
2455
|
+
let size = 0;
|
|
2456
|
+
this.plugins = /* @__PURE__ */ new Map();
|
|
2457
|
+
do {
|
|
2458
|
+
size = plugins.size;
|
|
2459
|
+
plugins.forEach((plugin, key) => {
|
|
2460
|
+
const deps = plugin.dependencies.filter(
|
|
2461
|
+
(dep) => !this.plugins.has(new dep().name)
|
|
2462
|
+
);
|
|
2463
|
+
if (deps.length === 0) {
|
|
2464
|
+
this.plugins.set(plugin.name, plugin.init(api));
|
|
2465
|
+
plugins.delete(key);
|
|
2466
|
+
}
|
|
2467
|
+
});
|
|
2468
|
+
} while (plugins.size != 0 && plugins.size < size);
|
|
2469
|
+
if (plugins.size > 0)
|
|
2470
|
+
throw new Error(
|
|
2471
|
+
"Some plugins couldn't be loaded due to missing dependencies: " + Array.from(plugins.keys())
|
|
2472
|
+
);
|
|
2473
|
+
}
|
|
2474
|
+
async loadPlugins() {
|
|
2475
|
+
var _a, _b;
|
|
2476
|
+
for (const plugin of this.plugins.values()) {
|
|
2477
|
+
await ((_b = (_a = plugin.getInstance()).onLoad) == null ? void 0 : _b.call(_a));
|
|
2478
|
+
}
|
|
2479
|
+
}
|
|
2480
|
+
getPlugin(plugin) {
|
|
2481
|
+
const pluginInstance = this.plugins.get(new plugin().name);
|
|
2482
|
+
if (!pluginInstance) throw new Error(`Plugin ${plugin.name} not found`);
|
|
2483
|
+
return pluginInstance;
|
|
2484
|
+
}
|
|
2485
|
+
}
|
|
2486
|
+
const PluginModule = {
|
|
2487
|
+
pluginApi: awilix.asClass(PluginApi).singleton()
|
|
2488
|
+
};
|
|
2489
|
+
class Context {
|
|
2490
|
+
constructor() {
|
|
2491
|
+
__publicField(this, "_options");
|
|
2492
|
+
__publicField(this, "_temOptions", null);
|
|
2493
|
+
__publicField(this, "updateCallbacks", []);
|
|
2494
|
+
this.onUpdate((changed) => {
|
|
2495
|
+
if (changed.includes("variant")) {
|
|
2496
|
+
this.variant.init(this);
|
|
2497
|
+
}
|
|
2498
|
+
});
|
|
2499
|
+
}
|
|
2500
|
+
/**
|
|
2501
|
+
* Runs the provided callback with a proxied Context and records which Context
|
|
2502
|
+
* properties (getters) were accessed during its execution.
|
|
2503
|
+
*
|
|
2504
|
+
* This helps determine dependencies of the callback on the Context.
|
|
2505
|
+
*
|
|
2506
|
+
* Example usage:
|
|
2507
|
+
* const { result, dependencies } = Context.trackDependencies(ctx, (c) => cb(c));
|
|
2508
|
+
*/
|
|
2509
|
+
static trackDependencies(context, callback) {
|
|
2510
|
+
const dependencies = /* @__PURE__ */ new Set();
|
|
2511
|
+
const isGetterOnContext = (prop) => {
|
|
2512
|
+
if (typeof prop !== "string") return false;
|
|
2513
|
+
const desc = Object.getOwnPropertyDescriptor(Context.prototype, prop);
|
|
2514
|
+
return !!desc && typeof desc.get === "function";
|
|
2515
|
+
};
|
|
2516
|
+
const proxy = new Proxy(context, {
|
|
2517
|
+
get(target, prop, receiver) {
|
|
2518
|
+
if (isGetterOnContext(prop)) {
|
|
2519
|
+
dependencies.add(prop);
|
|
2520
|
+
}
|
|
2521
|
+
return Reflect.get(target, prop, receiver);
|
|
2522
|
+
}
|
|
2523
|
+
});
|
|
2524
|
+
const result = callback(proxy);
|
|
2525
|
+
return { result, dependencies: Array.from(dependencies) };
|
|
2526
|
+
}
|
|
2527
|
+
set(options) {
|
|
2528
|
+
if (this._options) {
|
|
2529
|
+
console.error(this._options);
|
|
2530
|
+
throw new Error("Options already set");
|
|
2531
|
+
}
|
|
2532
|
+
if (typeof options.sourceColor === "string") {
|
|
2533
|
+
options.sourceColor = Hct.fromInt(materialColorUtilities.argbFromHex(options.sourceColor));
|
|
2534
|
+
}
|
|
2535
|
+
const changed = [];
|
|
2536
|
+
for (const key of Object.keys(options)) {
|
|
2537
|
+
changed.push(key);
|
|
2538
|
+
}
|
|
2539
|
+
this._options = options;
|
|
2540
|
+
if (changed.length > 0) {
|
|
2541
|
+
this.updateCallbacks.forEach((callback) => callback(changed));
|
|
2542
|
+
}
|
|
2543
|
+
}
|
|
2544
|
+
update(args) {
|
|
2545
|
+
const options = this._options;
|
|
2546
|
+
if (!options) {
|
|
2547
|
+
throw new Error("Options not found");
|
|
2548
|
+
}
|
|
2549
|
+
if (typeof args.sourceColor === "string") {
|
|
2550
|
+
args.sourceColor = Hct.fromInt(materialColorUtilities.argbFromHex(args.sourceColor));
|
|
2551
|
+
}
|
|
2552
|
+
const changed = [];
|
|
2553
|
+
for (const key of Object.keys(args)) {
|
|
2554
|
+
if (args[key] !== options[key]) {
|
|
2555
|
+
changed.push(key);
|
|
2556
|
+
}
|
|
2557
|
+
}
|
|
2558
|
+
this._options = {
|
|
2559
|
+
...options,
|
|
2560
|
+
...args
|
|
2561
|
+
};
|
|
2562
|
+
if (changed.length > 0) {
|
|
2563
|
+
this.updateCallbacks.forEach((callback) => callback(changed));
|
|
2564
|
+
}
|
|
2565
|
+
}
|
|
2566
|
+
getOptions() {
|
|
2567
|
+
let options;
|
|
2568
|
+
if (this._temOptions) {
|
|
2569
|
+
options = this._temOptions;
|
|
2570
|
+
} else {
|
|
2571
|
+
options = this._options;
|
|
2572
|
+
}
|
|
2573
|
+
if (!options) {
|
|
2574
|
+
throw new Error("Options not found");
|
|
2575
|
+
}
|
|
2576
|
+
return options;
|
|
2577
|
+
}
|
|
2578
|
+
set darkMode(isDark) {
|
|
2579
|
+
this.update({ isDark });
|
|
2580
|
+
}
|
|
2581
|
+
get isDark() {
|
|
2582
|
+
return this.getOptions().isDark;
|
|
2583
|
+
}
|
|
2584
|
+
set contrastLevel(contrastLevel) {
|
|
2585
|
+
this.update({ contrastLevel });
|
|
2586
|
+
}
|
|
2587
|
+
get contrastLevel() {
|
|
2588
|
+
return this.getOptions().contrastLevel;
|
|
2589
|
+
}
|
|
2590
|
+
set sourceColor(sourceColor) {
|
|
2591
|
+
this.update({ sourceColor });
|
|
2592
|
+
}
|
|
2593
|
+
get sourceColor() {
|
|
2594
|
+
let sourceColor = this.getOptions().sourceColor;
|
|
2595
|
+
if (typeof sourceColor === "string") {
|
|
2596
|
+
sourceColor = Hct.fromInt(materialColorUtilities.argbFromHex(sourceColor));
|
|
2597
|
+
}
|
|
2598
|
+
return sourceColor;
|
|
2599
|
+
}
|
|
2600
|
+
set variant(variant2) {
|
|
2601
|
+
this.update({ variant: variant2 });
|
|
2602
|
+
}
|
|
2603
|
+
get variant() {
|
|
2604
|
+
return this.getOptions().variant;
|
|
2605
|
+
}
|
|
2606
|
+
temp(args, callback) {
|
|
2607
|
+
const previousOptions = this.getOptions();
|
|
2608
|
+
this._temOptions = {
|
|
2609
|
+
...previousOptions,
|
|
2610
|
+
...args
|
|
2611
|
+
};
|
|
2612
|
+
const result = callback();
|
|
2613
|
+
this._temOptions = null;
|
|
2614
|
+
return result;
|
|
2615
|
+
}
|
|
2616
|
+
onUpdate(callback) {
|
|
2617
|
+
this.updateCallbacks.push(callback);
|
|
2618
|
+
}
|
|
2619
|
+
}
|
|
2620
|
+
const ContextModule = {
|
|
2621
|
+
context: awilix.asClass(Context).singleton()
|
|
2622
|
+
};
|
|
2623
|
+
class Palette {
|
|
2624
|
+
constructor(name, callback, context) {
|
|
2625
|
+
__publicField(this, "cache", /* @__PURE__ */ new Map());
|
|
2626
|
+
__publicField(this, "hueCache", null);
|
|
2627
|
+
__publicField(this, "chromaCache", null);
|
|
2628
|
+
__publicField(this, "dependencies", null);
|
|
2629
|
+
this.name = name;
|
|
2630
|
+
this.callback = callback;
|
|
2631
|
+
this.context = context;
|
|
2632
|
+
this.update([]);
|
|
2633
|
+
}
|
|
2634
|
+
static fromVariant(name, color, ctx) {
|
|
2635
|
+
const callback = (context) => {
|
|
2636
|
+
return context.variant.customPalettes(context, color);
|
|
2637
|
+
};
|
|
2638
|
+
return new Palette(name, callback, ctx);
|
|
2639
|
+
}
|
|
2640
|
+
update(change) {
|
|
2641
|
+
let result = null;
|
|
2642
|
+
if (this.dependencies == null) {
|
|
2643
|
+
const trackDependencies = Context.trackDependencies(
|
|
2644
|
+
this.context,
|
|
2645
|
+
(ctx) => this.callback(ctx)
|
|
2646
|
+
);
|
|
2647
|
+
this.dependencies = trackDependencies.dependencies;
|
|
2648
|
+
result = trackDependencies.result;
|
|
2649
|
+
} else if (change.length > 0 && change.some((c) => {
|
|
2650
|
+
var _a;
|
|
2651
|
+
return (_a = this.dependencies) == null ? void 0 : _a.includes(c);
|
|
2652
|
+
})) {
|
|
2653
|
+
result = this.callback(this.context);
|
|
2654
|
+
}
|
|
2655
|
+
if (result && (this.hueCache !== result.hue || this.chromaCache !== result.chroma)) {
|
|
2656
|
+
this.clearCache();
|
|
2657
|
+
this.hueCache = result.hue;
|
|
2658
|
+
this.chromaCache = result.chroma;
|
|
2659
|
+
}
|
|
2660
|
+
}
|
|
2661
|
+
clearCache() {
|
|
2662
|
+
this.cache.clear();
|
|
2663
|
+
this.hueCache = null;
|
|
2664
|
+
this.chromaCache = null;
|
|
2665
|
+
}
|
|
2666
|
+
/**
|
|
2667
|
+
* @param tone HCT tone, measured from 0 to 100.
|
|
2668
|
+
* @return ARGB representation of a color with that tone.
|
|
2669
|
+
*/
|
|
2670
|
+
tone(tone) {
|
|
2671
|
+
const hue = this.hueCache;
|
|
2672
|
+
const chroma = this.chromaCache;
|
|
2673
|
+
if (hue == null || chroma == null)
|
|
2674
|
+
throw new Error("Palette must be updated before using tone");
|
|
2675
|
+
let argb = this.cache.get(tone);
|
|
2676
|
+
if (argb === void 0) {
|
|
2677
|
+
if (tone == 99 && Hct.isYellow(hue)) {
|
|
2678
|
+
argb = this.averageArgb(this.tone(98), this.tone(100));
|
|
2679
|
+
} else {
|
|
2680
|
+
argb = Hct.from(hue, chroma, tone).toInt();
|
|
2681
|
+
}
|
|
2682
|
+
this.cache.set(tone, argb);
|
|
2683
|
+
}
|
|
2684
|
+
return argb;
|
|
2685
|
+
}
|
|
2686
|
+
/**
|
|
2687
|
+
* @param tone HCT tone.
|
|
2688
|
+
* @return HCT representation of a color with that tone.
|
|
2689
|
+
*/
|
|
2690
|
+
getHct(tone) {
|
|
2691
|
+
return Hct.fromInt(this.tone(tone));
|
|
2692
|
+
}
|
|
2693
|
+
get hue() {
|
|
2694
|
+
const hue = this.hueCache;
|
|
2695
|
+
if (hue == null) {
|
|
2696
|
+
throw new Error(`Palette ${this.name} must be updated before using hue`);
|
|
2697
|
+
}
|
|
2698
|
+
return hue;
|
|
2699
|
+
}
|
|
2700
|
+
get chroma() {
|
|
2701
|
+
const chroma = this.chromaCache;
|
|
2702
|
+
if (chroma == null) {
|
|
2703
|
+
throw new Error(`Palette ${this.name} must be updated before using hue`);
|
|
2704
|
+
}
|
|
2705
|
+
return chroma;
|
|
2706
|
+
}
|
|
2707
|
+
averageArgb(argb1, argb2) {
|
|
2708
|
+
const red1 = argb1 >>> 16 & 255;
|
|
2709
|
+
const green1 = argb1 >>> 8 & 255;
|
|
2710
|
+
const blue1 = argb1 & 255;
|
|
2711
|
+
const red2 = argb2 >>> 16 & 255;
|
|
2712
|
+
const green2 = argb2 >>> 8 & 255;
|
|
2713
|
+
const blue2 = argb2 & 255;
|
|
2714
|
+
const red = Math.round((red1 + red2) / 2);
|
|
2715
|
+
const green = Math.round((green1 + green2) / 2);
|
|
2716
|
+
const blue = Math.round((blue1 + blue2) / 2);
|
|
2717
|
+
return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255) >>> 0;
|
|
2718
|
+
}
|
|
2719
|
+
}
|
|
2720
|
+
class PaletteApi {
|
|
2721
|
+
constructor({ paletteManager }) {
|
|
2722
|
+
__publicField(this, "paletteManager");
|
|
2723
|
+
this.paletteManager = paletteManager;
|
|
2724
|
+
}
|
|
2725
|
+
add(args) {
|
|
2726
|
+
Object.entries(args).forEach(([key, callback]) => {
|
|
2727
|
+
if (typeof callback === "string") {
|
|
2728
|
+
this.paletteManager.addCustomPalette(
|
|
2729
|
+
key,
|
|
2730
|
+
Hct.fromInt(materialColorUtilities.argbFromHex(callback))
|
|
2731
|
+
);
|
|
2732
|
+
} else {
|
|
2733
|
+
this.paletteManager.add(key, callback);
|
|
2734
|
+
}
|
|
2735
|
+
});
|
|
2736
|
+
}
|
|
2737
|
+
get(key) {
|
|
2738
|
+
return this.paletteManager.get(key);
|
|
2739
|
+
}
|
|
2740
|
+
getAll() {
|
|
2741
|
+
return this.paletteManager.palettes;
|
|
2742
|
+
}
|
|
2743
|
+
}
|
|
2744
|
+
class PaletteManager {
|
|
2745
|
+
constructor(args) {
|
|
2746
|
+
__publicField(this, "_palettes", {});
|
|
2747
|
+
__publicField(this, "context");
|
|
2748
|
+
__publicField(this, "colorApi");
|
|
2749
|
+
this.colorApi = args.colorApi;
|
|
2750
|
+
this.context = args.context;
|
|
2751
|
+
this.context.onUpdate(
|
|
2752
|
+
(changed) => Object.entries(this.palettes).forEach(([key, value]) => {
|
|
2753
|
+
value.update(changed);
|
|
2754
|
+
})
|
|
2755
|
+
);
|
|
2756
|
+
}
|
|
2757
|
+
get palettes() {
|
|
2758
|
+
return {
|
|
2759
|
+
...this.context.variant.palettes,
|
|
2760
|
+
...this._palettes
|
|
2761
|
+
};
|
|
2762
|
+
}
|
|
2763
|
+
addCustomPalette(key, color) {
|
|
2764
|
+
const palette = Palette.fromVariant(key, color, this.context);
|
|
2765
|
+
this.add(key, palette);
|
|
2766
|
+
this.colorApi.addFromCustomPalette(key);
|
|
2767
|
+
}
|
|
2768
|
+
add(key, palette) {
|
|
2769
|
+
if (this._palettes["key"]) {
|
|
2770
|
+
throw new Error(`Palette with key ${key} already exists`);
|
|
2771
|
+
}
|
|
2772
|
+
if (!(palette instanceof Palette))
|
|
2773
|
+
palette = new Palette(key, palette, this.context);
|
|
2774
|
+
this.set(key, palette);
|
|
2775
|
+
}
|
|
2776
|
+
get(key) {
|
|
2777
|
+
const palette = this.palettes[key];
|
|
2778
|
+
if (!palette) {
|
|
2779
|
+
throw new Error(`Palette ${key} not found`);
|
|
2780
|
+
}
|
|
2781
|
+
return palette;
|
|
2782
|
+
}
|
|
2783
|
+
set(key, palette) {
|
|
2784
|
+
this._palettes[key] = palette;
|
|
2785
|
+
}
|
|
2786
|
+
update(key, args) {
|
|
2787
|
+
if (!this.palettes["key"]) {
|
|
2788
|
+
throw new Error(`Palette with key ${key} not found`);
|
|
2789
|
+
}
|
|
2790
|
+
if (!(args instanceof Palette)) {
|
|
2791
|
+
args = new Palette(key, args, this.context);
|
|
2792
|
+
}
|
|
2793
|
+
this.set(key, args);
|
|
2794
|
+
}
|
|
2795
|
+
}
|
|
2796
|
+
const PaletteModule = {
|
|
2797
|
+
paletteApi: awilix.asClass(PaletteApi).singleton(),
|
|
2798
|
+
paletteManager: awilix.asClass(PaletteManager).singleton()
|
|
2799
|
+
};
|
|
2800
|
+
const AppContainer = () => {
|
|
2801
|
+
function registerModule(...modules) {
|
|
2802
|
+
modules.forEach((module2) => {
|
|
2803
|
+
Object.entries(module2).forEach(([name, moduleClass]) => {
|
|
2804
|
+
container.register(name, moduleClass);
|
|
2805
|
+
});
|
|
2806
|
+
});
|
|
2807
|
+
return AppContainer;
|
|
2808
|
+
}
|
|
2809
|
+
const container = awilix.createContainer({
|
|
2810
|
+
injectionMode: awilix.InjectionMode.PROXY
|
|
2811
|
+
});
|
|
2812
|
+
registerModule(
|
|
2813
|
+
AppModule,
|
|
2814
|
+
PluginModule,
|
|
2815
|
+
ColorModule,
|
|
2816
|
+
PaletteModule,
|
|
2817
|
+
ContextModule
|
|
2818
|
+
);
|
|
2819
|
+
return container;
|
|
2820
|
+
};
|
|
2821
|
+
function bootstrap() {
|
|
2822
|
+
return AppContainer().resolve("api");
|
|
2823
|
+
}
|
|
2824
|
+
const getPiecewiseHue = (sourceColor, hueBreakpoints, hues) => {
|
|
2825
|
+
const size = Math.min(hueBreakpoints.length - 1, hues.length);
|
|
2826
|
+
const sourceHue = sourceColor.hue;
|
|
2827
|
+
for (let i = 0; i < size; i++) {
|
|
2828
|
+
if (sourceHue >= hueBreakpoints[i] && sourceHue < hueBreakpoints[i + 1]) {
|
|
2829
|
+
return materialColorUtilities.sanitizeDegreesDouble(hues[i]);
|
|
2830
|
+
}
|
|
2831
|
+
}
|
|
2832
|
+
return sourceHue;
|
|
2833
|
+
};
|
|
2834
|
+
const getRotatedHue = (sourceColor, hueBreakpoints, rotations) => {
|
|
2835
|
+
let rotation = getPiecewiseHue(sourceColor, hueBreakpoints, rotations);
|
|
2836
|
+
if (Math.min(hueBreakpoints.length - 1, rotations.length) <= 0) {
|
|
2837
|
+
rotation = 0;
|
|
2838
|
+
}
|
|
2839
|
+
return materialColorUtilities.sanitizeDegreesDouble(sourceColor.hue + rotation);
|
|
2840
|
+
};
|
|
2841
|
+
class Variant {
|
|
2842
|
+
constructor(options) {
|
|
2843
|
+
__publicField(this, "_palettes");
|
|
2844
|
+
__publicField(this, "customPalettes");
|
|
2845
|
+
__publicField(this, "colorsFromCustomPalette");
|
|
2846
|
+
__publicField(this, "colors");
|
|
2847
|
+
__publicField(this, "name");
|
|
2848
|
+
__publicField(this, "context");
|
|
2849
|
+
this.options = options;
|
|
2850
|
+
this.customPalettes = options.customPalettes;
|
|
2851
|
+
this.colors = options.colors || {};
|
|
2852
|
+
this.name = options.name;
|
|
2853
|
+
this.colorsFromCustomPalette = options.colorsFromCustomPalette;
|
|
2854
|
+
}
|
|
2855
|
+
get palettes() {
|
|
2856
|
+
if (!this._palettes) {
|
|
2857
|
+
throw new Error("Variant not initialized");
|
|
2858
|
+
}
|
|
2859
|
+
return this._palettes;
|
|
2860
|
+
}
|
|
2861
|
+
init(context) {
|
|
2862
|
+
if (this.context) return;
|
|
2863
|
+
this.context = context;
|
|
2864
|
+
this._palettes = Object.entries(this.options.palettes).reduce(
|
|
2865
|
+
(acc, [key, callback]) => ({
|
|
2866
|
+
...acc,
|
|
2867
|
+
[key]: new Palette(key, callback, context)
|
|
2868
|
+
}),
|
|
2869
|
+
{}
|
|
2870
|
+
);
|
|
2871
|
+
}
|
|
2872
|
+
}
|
|
2873
|
+
const variant = (args) => new Variant(args);
|
|
2874
|
+
const getExpressiveNeutralHue = (sourceColor) => {
|
|
2875
|
+
const hue = getRotatedHue(
|
|
2876
|
+
sourceColor,
|
|
2877
|
+
[0, 71, 124, 253, 278, 300, 360],
|
|
2878
|
+
[10, 0, 10, 0, 10, 0]
|
|
2879
|
+
);
|
|
2880
|
+
return hue;
|
|
2881
|
+
};
|
|
2882
|
+
const getExpressiveNeutralChroma = (sourceColor, isDark) => {
|
|
2883
|
+
const neutralHue = getExpressiveNeutralHue(sourceColor);
|
|
2884
|
+
return isDark ? Hct.isYellow(neutralHue) ? 6 : 14 : 18;
|
|
2885
|
+
};
|
|
2886
|
+
const expressiveVariant = variant({
|
|
2887
|
+
name: "expressive",
|
|
2888
|
+
palettes: {
|
|
2889
|
+
primary: ({ sourceColor, isDark }) => ({
|
|
2890
|
+
hue: sourceColor.hue,
|
|
2891
|
+
chroma: isDark ? 36 : 48
|
|
2892
|
+
}),
|
|
2893
|
+
secondary: ({ sourceColor, isDark }) => ({
|
|
2894
|
+
hue: getRotatedHue(
|
|
2895
|
+
sourceColor,
|
|
2896
|
+
[0, 105, 140, 204, 253, 278, 300, 333, 360],
|
|
2897
|
+
[-160, 155, -100, 96, -96, -156, -165, -160]
|
|
2898
|
+
),
|
|
2899
|
+
chroma: isDark ? 16 : 24
|
|
2900
|
+
}),
|
|
2901
|
+
tertiary: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
2902
|
+
getRotatedHue(
|
|
2903
|
+
sourceColor,
|
|
2904
|
+
[0, 105, 140, 204, 253, 278, 300, 333, 360],
|
|
2905
|
+
[-165, 160, -105, 101, -101, -160, -170, -165]
|
|
2906
|
+
),
|
|
2907
|
+
48
|
|
2908
|
+
),
|
|
2909
|
+
neutral: ({ sourceColor, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
2910
|
+
getExpressiveNeutralHue(sourceColor),
|
|
2911
|
+
getExpressiveNeutralChroma(sourceColor, isDark)
|
|
2912
|
+
),
|
|
2913
|
+
neutralVariant: ({ sourceColor, isDark }) => {
|
|
2914
|
+
const expressiveNeutralHue = getExpressiveNeutralHue(sourceColor);
|
|
2915
|
+
const expressiveNeutralChroma = getExpressiveNeutralChroma(
|
|
2916
|
+
sourceColor,
|
|
2917
|
+
isDark
|
|
2918
|
+
);
|
|
2919
|
+
return materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
2920
|
+
expressiveNeutralHue,
|
|
2921
|
+
expressiveNeutralChroma * (expressiveNeutralHue >= 105 && expressiveNeutralHue < 125 ? 1.6 : 2.3)
|
|
2922
|
+
);
|
|
2923
|
+
},
|
|
2924
|
+
error: ({ sourceColor }) => {
|
|
2925
|
+
const errorHue = getPiecewiseHue(
|
|
2926
|
+
sourceColor,
|
|
2927
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
2928
|
+
[12, 22, 32, 12, 22, 32, 22, 12]
|
|
2929
|
+
);
|
|
2930
|
+
return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 64);
|
|
2931
|
+
}
|
|
2932
|
+
},
|
|
2933
|
+
customPalettes: ({ isDark }, color) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
2934
|
+
getRotatedHue(
|
|
2935
|
+
color,
|
|
2936
|
+
[0, 105, 140, 204, 253, 278, 300, 333, 360],
|
|
2937
|
+
[-160, 155, -100, 96, -96, -156, -165, -160]
|
|
2938
|
+
),
|
|
2939
|
+
isDark ? 16 : 24
|
|
2940
|
+
),
|
|
2941
|
+
colors: defaultColors
|
|
2942
|
+
});
|
|
2943
|
+
const neutralVariant = variant({
|
|
2944
|
+
name: "neutral",
|
|
2945
|
+
palettes: {
|
|
2946
|
+
primary: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
2947
|
+
sourceColor.hue,
|
|
2948
|
+
Hct.isBlue(sourceColor.hue) ? 12 : 8
|
|
2949
|
+
),
|
|
2950
|
+
secondary: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
2951
|
+
sourceColor.hue,
|
|
2952
|
+
Hct.isBlue(sourceColor.hue) ? 6 : 4
|
|
2953
|
+
),
|
|
2954
|
+
tertiary: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
2955
|
+
getRotatedHue(
|
|
2956
|
+
sourceColor,
|
|
2957
|
+
[0, 38, 105, 161, 204, 278, 333, 360],
|
|
2958
|
+
[-32, 26, 10, -39, 24, -15, -32]
|
|
2959
|
+
),
|
|
2960
|
+
20
|
|
2961
|
+
),
|
|
2962
|
+
neutral: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColor.hue, 1.4),
|
|
2963
|
+
neutralVariant: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColor.hue, 1.4 * 2.2),
|
|
2964
|
+
error: ({ sourceColor }) => {
|
|
2965
|
+
const errorHue = getPiecewiseHue(
|
|
2966
|
+
sourceColor,
|
|
2967
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
2968
|
+
[12, 22, 32, 12, 22, 32, 22, 12]
|
|
2969
|
+
);
|
|
2970
|
+
return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 50);
|
|
2971
|
+
}
|
|
2972
|
+
},
|
|
2973
|
+
customPalettes: (_, colorHct) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
2974
|
+
colorHct.hue,
|
|
2975
|
+
Hct.isBlue(colorHct.hue) ? 6 : 4
|
|
2976
|
+
),
|
|
2977
|
+
colors: defaultColors
|
|
2978
|
+
});
|
|
2979
|
+
const tonalSpotVariant = variant({
|
|
2980
|
+
name: "tonalSpot",
|
|
2981
|
+
palettes: {
|
|
2982
|
+
primary: ({ sourceColor, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColor.hue, isDark ? 26 : 32),
|
|
2983
|
+
secondary: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColor.hue, 16),
|
|
2984
|
+
tertiary: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
2985
|
+
getRotatedHue(
|
|
2986
|
+
sourceColor,
|
|
2987
|
+
[0, 20, 71, 161, 333, 360],
|
|
2988
|
+
[-40, 48, -32, 40, -32]
|
|
2989
|
+
),
|
|
2990
|
+
28
|
|
2991
|
+
),
|
|
2992
|
+
neutral: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColor.hue, 5),
|
|
2993
|
+
neutralVariant: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColor.hue, 5 * 1.7),
|
|
2994
|
+
error: ({ sourceColor }) => {
|
|
2995
|
+
const errorHue = getPiecewiseHue(
|
|
2996
|
+
sourceColor,
|
|
2997
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
2998
|
+
[12, 22, 32, 12, 22, 32, 22, 12]
|
|
2999
|
+
);
|
|
3000
|
+
return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 60);
|
|
3001
|
+
}
|
|
3002
|
+
},
|
|
3003
|
+
customPalettes: (_, colorHct) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, 16),
|
|
3004
|
+
colors: defaultColors
|
|
3005
|
+
});
|
|
3006
|
+
const getVibrantNeutralHue = (sourceColor) => {
|
|
3007
|
+
return getRotatedHue(
|
|
3008
|
+
sourceColor,
|
|
3009
|
+
[0, 38, 105, 140, 333, 360],
|
|
3010
|
+
[-14, 10, -14, 10, -14]
|
|
3011
|
+
);
|
|
3012
|
+
};
|
|
3013
|
+
const getVibrantNeutralChroma = (sourceColor) => {
|
|
3014
|
+
return 28;
|
|
3015
|
+
};
|
|
3016
|
+
const vibrantVariant = variant({
|
|
3017
|
+
name: "vibrant",
|
|
3018
|
+
palettes: {
|
|
3019
|
+
primary: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColor.hue, 74),
|
|
3020
|
+
secondary: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
3021
|
+
getRotatedHue(
|
|
3022
|
+
sourceColor,
|
|
3023
|
+
[0, 38, 105, 140, 333, 360],
|
|
3024
|
+
[-14, 10, -14, 10, -14]
|
|
3025
|
+
),
|
|
3026
|
+
56
|
|
3027
|
+
),
|
|
3028
|
+
tertiary: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
3029
|
+
getRotatedHue(
|
|
3030
|
+
sourceColor,
|
|
3031
|
+
[0, 38, 71, 105, 140, 161, 253, 333, 360],
|
|
3032
|
+
[-72, 35, 24, -24, 62, 50, 62, -72]
|
|
3033
|
+
),
|
|
3034
|
+
56
|
|
3035
|
+
),
|
|
3036
|
+
neutral: ({ sourceColor }) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
3037
|
+
getVibrantNeutralHue(sourceColor),
|
|
3038
|
+
getVibrantNeutralChroma()
|
|
3039
|
+
),
|
|
3040
|
+
neutralVariant: ({ sourceColor }) => {
|
|
3041
|
+
const vibrantNeutralHue = getVibrantNeutralHue(sourceColor);
|
|
3042
|
+
const vibrantNeutralChroma = getVibrantNeutralChroma();
|
|
3043
|
+
return materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
3044
|
+
vibrantNeutralHue,
|
|
3045
|
+
vibrantNeutralChroma * 1.29
|
|
3046
|
+
);
|
|
3047
|
+
},
|
|
3048
|
+
error: ({ sourceColor }) => {
|
|
3049
|
+
const errorHue = getPiecewiseHue(
|
|
3050
|
+
sourceColor,
|
|
3051
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
3052
|
+
[12, 22, 32, 12, 22, 32, 22, 12]
|
|
3053
|
+
);
|
|
3054
|
+
return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 80);
|
|
3055
|
+
}
|
|
3056
|
+
},
|
|
3057
|
+
customPalettes: (_, colorHct) => materialColorUtilities.TonalPalette.fromHueAndChroma(
|
|
3058
|
+
getRotatedHue(
|
|
3059
|
+
colorHct,
|
|
3060
|
+
[0, 38, 105, 140, 333, 360],
|
|
3061
|
+
[-14, 10, -14, 10, -14]
|
|
3062
|
+
),
|
|
3063
|
+
56
|
|
3064
|
+
),
|
|
3065
|
+
colors: defaultColors
|
|
3066
|
+
});
|
|
3067
|
+
const surfaceContainerToneDelta = 2.5;
|
|
3068
|
+
const inverseTone = (tone) => {
|
|
3069
|
+
return 100 - tone;
|
|
3070
|
+
};
|
|
3071
|
+
const surfaceContainerTone = (layer, api) => {
|
|
3072
|
+
const t = surfaceContainerToneDelta * layer * (1 + api.context.contrastLevel);
|
|
3073
|
+
if (api.context.isDark) {
|
|
3074
|
+
return t * 1.5;
|
|
3075
|
+
} else {
|
|
3076
|
+
if (Hct.isYellow(api.palettes.get("neutral").hue)) {
|
|
3077
|
+
return 100 - t - surfaceContainerToneDelta;
|
|
3078
|
+
}
|
|
3079
|
+
return 100 - t;
|
|
3080
|
+
}
|
|
3081
|
+
};
|
|
3082
|
+
const highestSurface = (context, colorService) => {
|
|
3083
|
+
if (colorService instanceof ColorApi) {
|
|
3084
|
+
return colorService.get("surface");
|
|
3085
|
+
} else {
|
|
3086
|
+
return colorService.get("surface");
|
|
3087
|
+
}
|
|
3088
|
+
};
|
|
3089
|
+
const udixioVariant = variant({
|
|
3090
|
+
name: "udixio",
|
|
3091
|
+
palettes: {
|
|
3092
|
+
primary: ({ sourceColor }) => ({
|
|
3093
|
+
hue: sourceColor.hue,
|
|
3094
|
+
chroma: sourceColor.chroma
|
|
3095
|
+
}),
|
|
3096
|
+
secondary: ({ sourceColor }) => ({
|
|
3097
|
+
hue: sourceColor.hue,
|
|
3098
|
+
chroma: sourceColor.chroma / 1.4
|
|
3099
|
+
}),
|
|
3100
|
+
tertiary: ({ sourceColor }) => ({
|
|
3101
|
+
hue: getRotatedHue(
|
|
3102
|
+
sourceColor,
|
|
3103
|
+
[0, 20, 71, 161, 333, 360],
|
|
3104
|
+
[-40, 48, -32, 40, -32]
|
|
3105
|
+
),
|
|
3106
|
+
chroma: sourceColor.chroma
|
|
3107
|
+
}),
|
|
3108
|
+
neutral: ({ sourceColor }) => {
|
|
3109
|
+
return {
|
|
3110
|
+
hue: sourceColor.hue,
|
|
3111
|
+
chroma: 5
|
|
3112
|
+
};
|
|
3113
|
+
},
|
|
3114
|
+
neutralVariant: ({ sourceColor }) => {
|
|
3115
|
+
const neutral = 5;
|
|
3116
|
+
return {
|
|
3117
|
+
hue: sourceColor.hue,
|
|
3118
|
+
chroma: neutral * 1.7
|
|
3119
|
+
};
|
|
3120
|
+
},
|
|
3121
|
+
error: ({ sourceColor }) => {
|
|
3122
|
+
const errorHue = getPiecewiseHue(
|
|
3123
|
+
sourceColor,
|
|
3124
|
+
[0, 3, 13, 23, 33, 43, 153, 273, 360],
|
|
3125
|
+
[12, 22, 32, 12, 22, 32, 22, 12]
|
|
3126
|
+
);
|
|
3127
|
+
return {
|
|
3128
|
+
hue: errorHue,
|
|
3129
|
+
chroma: 60
|
|
3130
|
+
};
|
|
3131
|
+
}
|
|
3132
|
+
},
|
|
3133
|
+
customPalettes: ({ sourceColor }, colorHct) => ({
|
|
3134
|
+
hue: colorHct.hue,
|
|
3135
|
+
chroma: sourceColor.chroma
|
|
3136
|
+
}),
|
|
3137
|
+
colorsFromCustomPalette: (key) => {
|
|
3138
|
+
const colorKey = key;
|
|
3139
|
+
const ColorKey = capitalizeFirstLetter(key);
|
|
3140
|
+
const onColorKey = "on" + ColorKey;
|
|
3141
|
+
const colorContainerKey = colorKey + "Container";
|
|
3142
|
+
const onColorContainerKey = "on" + ColorKey + "Container";
|
|
3143
|
+
const colors = ({ palettes, colors: colors2, context: ctx }) => ({
|
|
3144
|
+
[colorKey]: {
|
|
3145
|
+
palette: () => palettes.get(colorKey),
|
|
3146
|
+
tone: () => {
|
|
3147
|
+
if (ctx.variant.name === "neutral") {
|
|
3148
|
+
return ctx.isDark ? tMinC(palettes.get(colorKey), 0, 98) : tMaxC(palettes.get(colorKey));
|
|
3149
|
+
} else if (ctx.variant.name === "vibrant") {
|
|
3150
|
+
return tMaxC(palettes.get(colorKey), 0, ctx.isDark ? 90 : 98);
|
|
3151
|
+
} else {
|
|
3152
|
+
return ctx.isDark ? 80 : tMaxC(palettes.get(colorKey));
|
|
3153
|
+
}
|
|
3154
|
+
},
|
|
3155
|
+
isBackground: true,
|
|
3156
|
+
background: () => highestSurface(ctx, colors2),
|
|
3157
|
+
contrastCurve: () => getCurve(4.5),
|
|
3158
|
+
adjustTone: () => toneDeltaPair(
|
|
3159
|
+
colors2.get(colorContainerKey),
|
|
3160
|
+
colors2.get(colorKey),
|
|
3161
|
+
5,
|
|
3162
|
+
"relative_lighter",
|
|
3163
|
+
true,
|
|
3164
|
+
"farther"
|
|
3165
|
+
)
|
|
3166
|
+
},
|
|
3167
|
+
// [colorDimKey]: {
|
|
3168
|
+
// palette: () => palettes.get(colorKey),
|
|
3169
|
+
// tone: () => {
|
|
3170
|
+
// if (ctx.variant.name === 'neutral') {
|
|
3171
|
+
// return 85;
|
|
3172
|
+
// } else {
|
|
3173
|
+
// return tMaxC(palettes.get(colorKey), 0, 90);
|
|
3174
|
+
// }
|
|
3175
|
+
// },
|
|
3176
|
+
// isBackground: true,
|
|
3177
|
+
// background: () => colors.get('surfaceContainerHigh'),
|
|
3178
|
+
// contrastCurve: () => getCurve(4.5),
|
|
3179
|
+
// adjustTone: () =>
|
|
3180
|
+
// toneDeltaPair(
|
|
3181
|
+
// colors.get(colorDimKey),
|
|
3182
|
+
// colors.get(colorKey),
|
|
3183
|
+
// 5,
|
|
3184
|
+
// 'darker',
|
|
3185
|
+
// true,
|
|
3186
|
+
// 'farther',
|
|
3187
|
+
// ),
|
|
3188
|
+
// },
|
|
3189
|
+
[onColorKey]: {
|
|
3190
|
+
palette: () => palettes.get(colorKey),
|
|
3191
|
+
background: () => colors2.get(colorKey),
|
|
3192
|
+
contrastCurve: () => getCurve(6)
|
|
3193
|
+
},
|
|
3194
|
+
[colorContainerKey]: {
|
|
3195
|
+
palette: () => palettes.get(colorKey),
|
|
3196
|
+
tone: () => {
|
|
3197
|
+
if (ctx.variant.name === "vibrant") {
|
|
3198
|
+
return ctx.isDark ? tMinC(palettes.get(colorKey), 30, 40) : tMaxC(palettes.get(colorKey), 84, 90);
|
|
3199
|
+
} else if (ctx.variant.name === "expressive") {
|
|
3200
|
+
return ctx.isDark ? 15 : tMaxC(palettes.get(colorKey), 90, 95);
|
|
3201
|
+
} else {
|
|
3202
|
+
return ctx.isDark ? 25 : 90;
|
|
3203
|
+
}
|
|
3204
|
+
},
|
|
3205
|
+
isBackground: true,
|
|
3206
|
+
background: () => highestSurface(ctx, colors2),
|
|
3207
|
+
adjustTone: () => void 0,
|
|
3208
|
+
contrastCurve: () => ctx.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3209
|
+
},
|
|
3210
|
+
[onColorContainerKey]: {
|
|
3211
|
+
palette: () => palettes.get(colorKey),
|
|
3212
|
+
background: () => colors2.get(colorContainerKey),
|
|
3213
|
+
contrastCurve: () => getCurve(6)
|
|
3214
|
+
}
|
|
3215
|
+
// [colorFixedKey]: {
|
|
3216
|
+
// palette: () => palettes.get(colorKey),
|
|
3217
|
+
// tone: () => {
|
|
3218
|
+
// return ctx.temp({ isDark: false, contrastLevel: 0 }, () => {
|
|
3219
|
+
// const color = colors.get(colorContainerKey);
|
|
3220
|
+
// return color.getTone();
|
|
3221
|
+
// });
|
|
3222
|
+
// },
|
|
3223
|
+
// isBackground: true,
|
|
3224
|
+
// background: () => highestSurface(ctx, colors),
|
|
3225
|
+
// contrastCurve: () =>
|
|
3226
|
+
// ctx.contrastLevel > 0 ? getCurve(1.5) : undefined,
|
|
3227
|
+
// },
|
|
3228
|
+
// [colorFixedDimKey]: {
|
|
3229
|
+
// palette: () => palettes.get(colorKey),
|
|
3230
|
+
// tone: () => colors.get(colorFixedKey).getTone(),
|
|
3231
|
+
// isBackground: true,
|
|
3232
|
+
// adjustTone: () =>
|
|
3233
|
+
// toneDeltaPair(
|
|
3234
|
+
// colors.get(colorFixedDimKey),
|
|
3235
|
+
// colors.get(colorFixedKey),
|
|
3236
|
+
// 5,
|
|
3237
|
+
// 'darker',
|
|
3238
|
+
// true,
|
|
3239
|
+
// 'exact',
|
|
3240
|
+
// ),
|
|
3241
|
+
// },
|
|
3242
|
+
// [onColorFixedKey]: {
|
|
3243
|
+
// palette: () => palettes.get(colorKey),
|
|
3244
|
+
// background: () => this.get(colorFixedDimKey),
|
|
3245
|
+
// contrastCurve: () => getCurve(7),
|
|
3246
|
+
// },
|
|
3247
|
+
// [onColorFixedVariantKey]: {
|
|
3248
|
+
// palette: () => palettes.get(colorKey),
|
|
3249
|
+
// background: () => colors.get(colorFixedDimKey),
|
|
3250
|
+
// contrastCurve: () => getCurve(4.5),
|
|
3251
|
+
// },
|
|
3252
|
+
});
|
|
3253
|
+
return colors;
|
|
3254
|
+
},
|
|
3255
|
+
colors: ({ colors, context: c, palettes }) => {
|
|
3256
|
+
const getColor = (key) => {
|
|
3257
|
+
return colors.get(key);
|
|
3258
|
+
};
|
|
3259
|
+
return {
|
|
3260
|
+
////////////////////////////////////////////////////////////////
|
|
3261
|
+
// Surfaces [S] //
|
|
3262
|
+
////////////////////////////////////////////////////////////////
|
|
3263
|
+
surface: {
|
|
3264
|
+
palette: () => palettes.get("neutral"),
|
|
3265
|
+
tone: () => {
|
|
3266
|
+
if (c.isDark) {
|
|
3267
|
+
return 2;
|
|
3268
|
+
} else {
|
|
3269
|
+
return 99;
|
|
3270
|
+
}
|
|
3271
|
+
},
|
|
3272
|
+
isBackground: true
|
|
3273
|
+
},
|
|
3274
|
+
// surfaceDim: {
|
|
3275
|
+
// palette: () => palettes.get('neutral'),
|
|
3276
|
+
// tone: () => {
|
|
3277
|
+
// if (c.isDark) {
|
|
3278
|
+
// return 4;
|
|
3279
|
+
// } else {
|
|
3280
|
+
// if (Hct.isYellow(palettes.get('neutral').hue)) {
|
|
3281
|
+
// return 90;
|
|
3282
|
+
// } else if (c.variant.name === 'vibrant') {
|
|
3283
|
+
// return 85;
|
|
3284
|
+
// } else {
|
|
3285
|
+
// return 87;
|
|
3286
|
+
// }
|
|
3287
|
+
// }
|
|
3288
|
+
// },
|
|
3289
|
+
// isBackground: true,
|
|
3290
|
+
// chromaMultiplier: () => {
|
|
3291
|
+
// if (!c.isDark) {
|
|
3292
|
+
// if (c.variant.name === 'neutral') {
|
|
3293
|
+
// return 2.5;
|
|
3294
|
+
// } else if (c.variant.name === 'tonalSpot') {
|
|
3295
|
+
// return 1.7;
|
|
3296
|
+
// } else if (c.variant.name === 'expressive') {
|
|
3297
|
+
// return Hct.isYellow(palettes.get('neutral').hue) ? 2.7 : 1.75;
|
|
3298
|
+
// } else if (c.variant.name === 'vibrant') {
|
|
3299
|
+
// return 1.36;
|
|
3300
|
+
// }
|
|
3301
|
+
// }
|
|
3302
|
+
// return 1;
|
|
3303
|
+
// },
|
|
3304
|
+
// },
|
|
3305
|
+
// surfaceBright: {
|
|
3306
|
+
// palette: () => palettes.get('neutral'),
|
|
3307
|
+
// tone: () => {
|
|
3308
|
+
// if (c.isDark) {
|
|
3309
|
+
// return 18;
|
|
3310
|
+
// } else {
|
|
3311
|
+
// if (Hct.isYellow(palettes.get('neutral').hue)) {
|
|
3312
|
+
// return 99;
|
|
3313
|
+
// } else if (c.variant.name === 'vibrant') {
|
|
3314
|
+
// return 97;
|
|
3315
|
+
// } else {
|
|
3316
|
+
// return 98;
|
|
3317
|
+
// }
|
|
3318
|
+
// }
|
|
3319
|
+
// },
|
|
3320
|
+
// isBackground: true,
|
|
3321
|
+
// chromaMultiplier: () => {
|
|
3322
|
+
// if (c.isDark) {
|
|
3323
|
+
// if (c.variant.name === 'neutral') {
|
|
3324
|
+
// return 2.5;
|
|
3325
|
+
// } else if (c.variant.name === 'tonalSpot') {
|
|
3326
|
+
// return 1.7;
|
|
3327
|
+
// } else if (c.variant.name === 'expressive') {
|
|
3328
|
+
// return Hct.isYellow(palettes.get('neutral').hue) ? 2.7 : 1.75;
|
|
3329
|
+
// } else if (c.variant.name === 'vibrant') {
|
|
3330
|
+
// return 1.36;
|
|
3331
|
+
// }
|
|
3332
|
+
// }
|
|
3333
|
+
// return 1;
|
|
3334
|
+
// },
|
|
3335
|
+
// },
|
|
3336
|
+
surfaceContainerLowest: {
|
|
3337
|
+
palette: () => palettes.get("neutral"),
|
|
3338
|
+
tone: () => surfaceContainerTone(0, { palettes, context: c }),
|
|
3339
|
+
isBackground: true
|
|
3340
|
+
},
|
|
3341
|
+
surfaceContainerLow: {
|
|
3342
|
+
palette: () => palettes.get("neutral"),
|
|
3343
|
+
tone: () => surfaceContainerTone(1, { palettes, context: c }),
|
|
3344
|
+
isBackground: true,
|
|
3345
|
+
chromaMultiplier: () => {
|
|
3346
|
+
return 1.25;
|
|
3347
|
+
}
|
|
3348
|
+
},
|
|
3349
|
+
surfaceContainer: {
|
|
3350
|
+
palette: () => palettes.get("neutral"),
|
|
3351
|
+
tone: () => surfaceContainerTone(2, { palettes, context: c }),
|
|
3352
|
+
isBackground: true,
|
|
3353
|
+
chromaMultiplier: () => {
|
|
3354
|
+
return 1.4;
|
|
3355
|
+
}
|
|
3356
|
+
},
|
|
3357
|
+
surfaceContainerHigh: {
|
|
3358
|
+
palette: () => palettes.get("neutral"),
|
|
3359
|
+
tone: () => surfaceContainerTone(3, { palettes, context: c }),
|
|
3360
|
+
isBackground: true,
|
|
3361
|
+
chromaMultiplier: () => {
|
|
3362
|
+
return 1.5;
|
|
3363
|
+
}
|
|
3364
|
+
},
|
|
3365
|
+
surfaceContainerHighest: {
|
|
3366
|
+
palette: () => palettes.get("neutral"),
|
|
3367
|
+
tone: () => surfaceContainerTone(4, { palettes, context: c }),
|
|
3368
|
+
isBackground: true,
|
|
3369
|
+
chromaMultiplier: () => {
|
|
3370
|
+
return 1.7;
|
|
3371
|
+
}
|
|
3372
|
+
},
|
|
3373
|
+
onSurface: {
|
|
3374
|
+
palette: () => palettes.get("neutral"),
|
|
3375
|
+
tone: () => {
|
|
3376
|
+
return getInitialToneFromBackground(highestSurface(c, colors));
|
|
3377
|
+
},
|
|
3378
|
+
chromaMultiplier: () => {
|
|
3379
|
+
return 1.7;
|
|
3380
|
+
},
|
|
3381
|
+
background: () => highestSurface(c, colors),
|
|
3382
|
+
contrastCurve: () => c.isDark ? getCurve(11) : getCurve(9)
|
|
3383
|
+
},
|
|
3384
|
+
onSurfaceVariant: {
|
|
3385
|
+
palette: () => palettes.get("neutralVariant"),
|
|
3386
|
+
chromaMultiplier: () => {
|
|
3387
|
+
return 1.7;
|
|
3388
|
+
},
|
|
3389
|
+
background: () => highestSurface(c, colors),
|
|
3390
|
+
contrastCurve: () => c.isDark ? getCurve(6) : getCurve(4.5)
|
|
3391
|
+
},
|
|
3392
|
+
outline: {
|
|
3393
|
+
palette: () => palettes.get("neutralVariant"),
|
|
3394
|
+
chromaMultiplier: () => {
|
|
3395
|
+
return 1.7;
|
|
3396
|
+
},
|
|
3397
|
+
background: () => highestSurface(c, colors),
|
|
3398
|
+
contrastCurve: () => getCurve(3)
|
|
3399
|
+
},
|
|
3400
|
+
outlineVariant: {
|
|
3401
|
+
palette: () => palettes.get("neutralVariant"),
|
|
3402
|
+
chromaMultiplier: () => {
|
|
3403
|
+
return 1.7;
|
|
3404
|
+
},
|
|
3405
|
+
background: () => highestSurface(c, colors),
|
|
3406
|
+
contrastCurve: () => getCurve(1.5)
|
|
3407
|
+
},
|
|
3408
|
+
inverseSurface: {
|
|
3409
|
+
palette: () => palettes.get("neutral"),
|
|
3410
|
+
tone: () => 100 - colors.get("surface").getTone(),
|
|
3411
|
+
isBackground: true
|
|
3412
|
+
},
|
|
3413
|
+
inverseOnSurface: {
|
|
3414
|
+
palette: () => palettes.get("neutral"),
|
|
3415
|
+
tone: () => c.isDark ? 20 : 95,
|
|
3416
|
+
background: () => colors.get("inverseSurface"),
|
|
3417
|
+
contrastCurve: () => getCurve(7)
|
|
3418
|
+
},
|
|
3419
|
+
////////////////////////////////////////////////////////////////
|
|
3420
|
+
// Primaries [P] //
|
|
3421
|
+
////////////////////////////////////////////////////////////////
|
|
3422
|
+
primary: {
|
|
3423
|
+
palette: () => palettes.get("primary"),
|
|
3424
|
+
tone: () => {
|
|
3425
|
+
return c.sourceColor.tone;
|
|
3426
|
+
},
|
|
3427
|
+
isBackground: true,
|
|
3428
|
+
background: () => highestSurface(c, colors),
|
|
3429
|
+
contrastCurve: () => getCurve(4.5),
|
|
3430
|
+
adjustTone: () => () => {
|
|
3431
|
+
const surfaceTone = colors.get("surface").getTone();
|
|
3432
|
+
const primaryTone = colors.get("primary").options.tone;
|
|
3433
|
+
let selfTone = primaryTone;
|
|
3434
|
+
if (materialColorUtilities.Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
|
|
3435
|
+
const ratio = calculateToneAdjustmentPercentage(
|
|
3436
|
+
surfaceTone,
|
|
3437
|
+
selfTone,
|
|
3438
|
+
3
|
|
3439
|
+
);
|
|
3440
|
+
const inverseT = inverseTone(primaryTone);
|
|
3441
|
+
selfTone = selfTone + (inverseT - selfTone) * ratio;
|
|
3442
|
+
}
|
|
3443
|
+
return selfTone;
|
|
3444
|
+
}
|
|
3445
|
+
},
|
|
3446
|
+
// primaryDim: {
|
|
3447
|
+
// palette: () => palettes.get('primary'),
|
|
3448
|
+
// tone: () => {
|
|
3449
|
+
// if (c.variant.name === 'neutral') {
|
|
3450
|
+
// return 85;
|
|
3451
|
+
// } else if (c.variant.name === 'tonalSpot') {
|
|
3452
|
+
// return tMaxC(palettes.get('primary'), 0, 90);
|
|
3453
|
+
// } else {
|
|
3454
|
+
// return tMaxC(palettes.get('primary'));
|
|
3455
|
+
// }
|
|
3456
|
+
// },
|
|
3457
|
+
// isBackground: true,
|
|
3458
|
+
// background: () => getColor('surfaceContainerHigh'),
|
|
3459
|
+
// contrastCurve: () => getCurve(4.5),
|
|
3460
|
+
// adjustTone: () =>
|
|
3461
|
+
// toneDeltaPair(
|
|
3462
|
+
// colors.get('primaryDim'),
|
|
3463
|
+
// colors.get('primary'),
|
|
3464
|
+
// 5,
|
|
3465
|
+
// 'darker',
|
|
3466
|
+
// true,
|
|
3467
|
+
// 'farther',
|
|
3468
|
+
// ),
|
|
3469
|
+
// },
|
|
3470
|
+
onPrimary: {
|
|
3471
|
+
palette: () => palettes.get("primary"),
|
|
3472
|
+
background: () => colors.get("primary"),
|
|
3473
|
+
contrastCurve: () => getCurve(6)
|
|
3474
|
+
},
|
|
3475
|
+
primaryContainer: {
|
|
3476
|
+
palette: () => palettes.get("primary"),
|
|
3477
|
+
tone: () => {
|
|
3478
|
+
return c.isDark ? tMinC(palettes.get("primary"), 35, 93) : tMaxC(palettes.get("primary"), 0, 90);
|
|
3479
|
+
},
|
|
3480
|
+
isBackground: true,
|
|
3481
|
+
background: () => highestSurface(c, colors),
|
|
3482
|
+
adjustTone: () => c.variant.name == "fidelity" ? toneDeltaPair(
|
|
3483
|
+
colors.get("primary"),
|
|
3484
|
+
colors.get("primaryContainer"),
|
|
3485
|
+
15,
|
|
3486
|
+
"relative_darker",
|
|
3487
|
+
true,
|
|
3488
|
+
"farther"
|
|
3489
|
+
) : void 0,
|
|
3490
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3491
|
+
},
|
|
3492
|
+
onPrimaryContainer: {
|
|
3493
|
+
palette: () => palettes.get("primary"),
|
|
3494
|
+
background: () => colors.get("primaryContainer"),
|
|
3495
|
+
contrastCurve: () => getCurve(6)
|
|
3496
|
+
},
|
|
3497
|
+
// primaryFixed: {
|
|
3498
|
+
// palette: () => palettes.get('primary'),
|
|
3499
|
+
// tone: () => {
|
|
3500
|
+
// return c.temp(
|
|
3501
|
+
// {
|
|
3502
|
+
// isDark: false,
|
|
3503
|
+
// contrastLevel: 0,
|
|
3504
|
+
// },
|
|
3505
|
+
// () => {
|
|
3506
|
+
// const color = getColor('primaryContainer');
|
|
3507
|
+
// return color.getTone();
|
|
3508
|
+
// },
|
|
3509
|
+
// );
|
|
3510
|
+
// },
|
|
3511
|
+
// isBackground: true,
|
|
3512
|
+
// background: () => highestSurface(c, colors),
|
|
3513
|
+
// contrastCurve: () => (c.contrastLevel > 0 ? getCurve(1.5) : undefined),
|
|
3514
|
+
// },
|
|
3515
|
+
// primaryFixedDim: {
|
|
3516
|
+
// palette: () => palettes.get('primary'),
|
|
3517
|
+
// tone: () => colors.get('primaryFixed').getTone(),
|
|
3518
|
+
// isBackground: true,
|
|
3519
|
+
// adjustTone: () =>
|
|
3520
|
+
// toneDeltaPair(
|
|
3521
|
+
// getColor('primaryFixedDim'),
|
|
3522
|
+
// getColor('primaryFixed'),
|
|
3523
|
+
// 5,
|
|
3524
|
+
// 'darker',
|
|
3525
|
+
// true,
|
|
3526
|
+
// 'exact',
|
|
3527
|
+
// ),
|
|
3528
|
+
// },
|
|
3529
|
+
// onPrimaryFixed: {
|
|
3530
|
+
// palette: () => palettes.get('primary'),
|
|
3531
|
+
// background: () => colors.get('primaryFixedDim'),
|
|
3532
|
+
// contrastCurve: () => getCurve(7),
|
|
3533
|
+
// },
|
|
3534
|
+
// onPrimaryFixedVariant: {
|
|
3535
|
+
// palette: () => palettes.get('primary'),
|
|
3536
|
+
// background: () => colors.get('primaryFixedDim'),
|
|
3537
|
+
// contrastCurve: () => getCurve(4.5),
|
|
3538
|
+
// },
|
|
3539
|
+
inversePrimary: {
|
|
3540
|
+
palette: () => palettes.get("primary"),
|
|
3541
|
+
tone: () => tMaxC(palettes.get("primary")),
|
|
3542
|
+
background: () => colors.get("inverseSurface"),
|
|
3543
|
+
contrastCurve: () => getCurve(6)
|
|
3544
|
+
},
|
|
3545
|
+
////////////////////////////////////////////////////////////////
|
|
3546
|
+
// Secondaries [Q] //
|
|
3547
|
+
////////////////////////////////////////////////////////////////
|
|
3548
|
+
secondary: {
|
|
3549
|
+
palette: () => palettes.get("secondary"),
|
|
3550
|
+
tone: () => {
|
|
3551
|
+
return c.isDark ? 80 : tMaxC(palettes.get("secondary"));
|
|
3552
|
+
},
|
|
3553
|
+
isBackground: true,
|
|
3554
|
+
background: () => highestSurface(c, colors),
|
|
3555
|
+
contrastCurve: () => getCurve(4.5),
|
|
3556
|
+
adjustTone: () => toneDeltaPair(
|
|
3557
|
+
getColor("secondaryContainer"),
|
|
3558
|
+
getColor("secondary"),
|
|
3559
|
+
5,
|
|
3560
|
+
"relative_lighter",
|
|
3561
|
+
true,
|
|
3562
|
+
"farther"
|
|
3563
|
+
)
|
|
3564
|
+
},
|
|
3565
|
+
// secondaryDim: {
|
|
3566
|
+
// palette: () => palettes.get('secondary'),
|
|
3567
|
+
// tone: () => {
|
|
3568
|
+
// if (c.variant.name === 'neutral') {
|
|
3569
|
+
// return 85;
|
|
3570
|
+
// } else {
|
|
3571
|
+
// return tMaxC(palettes.get('secondary'), 0, 90);
|
|
3572
|
+
// }
|
|
3573
|
+
// },
|
|
3574
|
+
// isBackground: true,
|
|
3575
|
+
// background: () => getColor('surfaceContainerHigh'),
|
|
3576
|
+
// contrastCurve: () => getCurve(4.5),
|
|
3577
|
+
// adjustTone: () =>
|
|
3578
|
+
// toneDeltaPair(
|
|
3579
|
+
// getColor('secondaryDim'),
|
|
3580
|
+
// getColor('secondary'),
|
|
3581
|
+
// 5,
|
|
3582
|
+
// 'darker',
|
|
3583
|
+
// true,
|
|
3584
|
+
// 'farther',
|
|
3585
|
+
// ),
|
|
3586
|
+
// },
|
|
3587
|
+
onSecondary: {
|
|
3588
|
+
palette: () => palettes.get("secondary"),
|
|
3589
|
+
background: () => getColor("secondary"),
|
|
3590
|
+
contrastCurve: () => getCurve(6)
|
|
3591
|
+
},
|
|
3592
|
+
secondaryContainer: {
|
|
3593
|
+
palette: () => palettes.get("secondary"),
|
|
3594
|
+
tone: () => {
|
|
3595
|
+
return c.isDark ? 25 : 90;
|
|
3596
|
+
},
|
|
3597
|
+
isBackground: true,
|
|
3598
|
+
background: () => highestSurface(c, colors),
|
|
3599
|
+
adjustTone: () => void 0,
|
|
3600
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3601
|
+
},
|
|
3602
|
+
onSecondaryContainer: {
|
|
3603
|
+
palette: () => palettes.get("secondary"),
|
|
3604
|
+
background: () => getColor("secondaryContainer"),
|
|
3605
|
+
contrastCurve: () => getCurve(6)
|
|
3606
|
+
},
|
|
3607
|
+
// secondaryFixed: {
|
|
3608
|
+
// palette: () => palettes.get('secondary'),
|
|
3609
|
+
// tone: () => {
|
|
3610
|
+
// return c.temp(
|
|
3611
|
+
// {
|
|
3612
|
+
// isDark: false,
|
|
3613
|
+
// contrastLevel: 0,
|
|
3614
|
+
// },
|
|
3615
|
+
// () => {
|
|
3616
|
+
// const color = getColor('secondaryContainer');
|
|
3617
|
+
// return color.getTone();
|
|
3618
|
+
// },
|
|
3619
|
+
// );
|
|
3620
|
+
// },
|
|
3621
|
+
// isBackground: true,
|
|
3622
|
+
// background: () => highestSurface(c, colors),
|
|
3623
|
+
// contrastCurve: () => (c.contrastLevel > 0 ? getCurve(1.5) : undefined),
|
|
3624
|
+
// },
|
|
3625
|
+
// secondaryFixedDim: {
|
|
3626
|
+
// palette: () => palettes.get('secondary'),
|
|
3627
|
+
// tone: () => getColor('secondaryFixed').getTone(),
|
|
3628
|
+
// isBackground: true,
|
|
3629
|
+
// adjustTone: () =>
|
|
3630
|
+
// toneDeltaPair(
|
|
3631
|
+
// getColor('secondaryFixedDim'),
|
|
3632
|
+
// getColor('secondaryFixed'),
|
|
3633
|
+
// 5,
|
|
3634
|
+
// 'darker',
|
|
3635
|
+
// true,
|
|
3636
|
+
// 'exact',
|
|
3637
|
+
// ),
|
|
3638
|
+
// },
|
|
3639
|
+
// onSecondaryFixed: {
|
|
3640
|
+
// palette: () => palettes.get('secondary'),
|
|
3641
|
+
// background: () => getColor('secondaryFixedDim'),
|
|
3642
|
+
// contrastCurve: () => getCurve(7),
|
|
3643
|
+
// },
|
|
3644
|
+
// onSecondaryFixedVariant: {
|
|
3645
|
+
// palette: () => palettes.get('secondary'),
|
|
3646
|
+
// background: () => getColor('secondaryFixedDim'),
|
|
3647
|
+
// contrastCurve: () => getCurve(4.5),
|
|
3648
|
+
// },
|
|
3649
|
+
////////////////////////////////////////////////////////////////
|
|
3650
|
+
// Tertiaries [T] //
|
|
3651
|
+
////////////////////////////////////////////////////////////////
|
|
3652
|
+
tertiary: {
|
|
3653
|
+
palette: () => palettes.get("tertiary"),
|
|
3654
|
+
tone: () => {
|
|
3655
|
+
return c.isDark ? tMaxC(palettes.get("tertiary"), 0, 98) : tMaxC(palettes.get("tertiary"));
|
|
3656
|
+
},
|
|
3657
|
+
isBackground: true,
|
|
3658
|
+
background: () => highestSurface(c, colors),
|
|
3659
|
+
contrastCurve: () => getCurve(4.5),
|
|
3660
|
+
adjustTone: () => toneDeltaPair(
|
|
3661
|
+
getColor("tertiaryContainer"),
|
|
3662
|
+
getColor("tertiary"),
|
|
3663
|
+
5,
|
|
3664
|
+
"relative_lighter",
|
|
3665
|
+
true,
|
|
3666
|
+
"farther"
|
|
3667
|
+
)
|
|
3668
|
+
},
|
|
3669
|
+
// tertiaryDim: {
|
|
3670
|
+
// palette: () => palettes.get('tertiary'),
|
|
3671
|
+
// tone: () => {
|
|
3672
|
+
// if (c.variant.name === 'tonalSpot') {
|
|
3673
|
+
// return tMaxC(palettes.get('tertiary'), 0, 90);
|
|
3674
|
+
// } else {
|
|
3675
|
+
// return tMaxC(palettes.get('tertiary'));
|
|
3676
|
+
// }
|
|
3677
|
+
// },
|
|
3678
|
+
// isBackground: true,
|
|
3679
|
+
// background: () => getColor('surfaceContainerHigh'),
|
|
3680
|
+
// contrastCurve: () => getCurve(4.5),
|
|
3681
|
+
// adjustTone: () =>
|
|
3682
|
+
// toneDeltaPair(
|
|
3683
|
+
// getColor('tertiaryDim'),
|
|
3684
|
+
// getColor('tertiary'),
|
|
3685
|
+
// 5,
|
|
3686
|
+
// 'darker',
|
|
3687
|
+
// true,
|
|
3688
|
+
// 'farther',
|
|
3689
|
+
// ),
|
|
3690
|
+
// },
|
|
3691
|
+
onTertiary: {
|
|
3692
|
+
palette: () => palettes.get("tertiary"),
|
|
3693
|
+
background: () => getColor("tertiary"),
|
|
3694
|
+
contrastCurve: () => getCurve(6)
|
|
3695
|
+
},
|
|
3696
|
+
tertiaryContainer: {
|
|
3697
|
+
palette: () => palettes.get("tertiary"),
|
|
3698
|
+
tone: () => {
|
|
3699
|
+
return tMaxC(palettes.get("tertiary"), 0, c.isDark ? 93 : 100);
|
|
3700
|
+
},
|
|
3701
|
+
isBackground: true,
|
|
3702
|
+
background: () => highestSurface(c, colors),
|
|
3703
|
+
adjustTone: () => void 0,
|
|
3704
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3705
|
+
},
|
|
3706
|
+
onTertiaryContainer: {
|
|
3707
|
+
palette: () => palettes.get("tertiary"),
|
|
3708
|
+
background: () => getColor("tertiaryContainer"),
|
|
3709
|
+
contrastCurve: () => getCurve(6)
|
|
3710
|
+
},
|
|
3711
|
+
// tertiaryFixed: {
|
|
3712
|
+
// palette: () => palettes.get('tertiary'),
|
|
3713
|
+
// tone: () => {
|
|
3714
|
+
// return c.temp(
|
|
3715
|
+
// {
|
|
3716
|
+
// isDark: false,
|
|
3717
|
+
// contrastLevel: 0,
|
|
3718
|
+
// },
|
|
3719
|
+
// () => {
|
|
3720
|
+
// const color = getColor('tertiaryContainer');
|
|
3721
|
+
// return color.getTone();
|
|
3722
|
+
// },
|
|
3723
|
+
// );
|
|
3724
|
+
// },
|
|
3725
|
+
// isBackground: true,
|
|
3726
|
+
// background: () => highestSurface(c, colors),
|
|
3727
|
+
// contrastCurve: () => (c.contrastLevel > 0 ? getCurve(1.5) : undefined),
|
|
3728
|
+
// },
|
|
3729
|
+
// tertiaryFixedDim: {
|
|
3730
|
+
// palette: () => palettes.get('tertiary'),
|
|
3731
|
+
// tone: () => getColor('tertiaryFixed').getTone(),
|
|
3732
|
+
// isBackground: true,
|
|
3733
|
+
// adjustTone: () =>
|
|
3734
|
+
// toneDeltaPair(
|
|
3735
|
+
// getColor('tertiaryFixedDim'),
|
|
3736
|
+
// getColor('tertiaryFixed'),
|
|
3737
|
+
// 5,
|
|
3738
|
+
// 'darker',
|
|
3739
|
+
// true,
|
|
3740
|
+
// 'exact',
|
|
3741
|
+
// ),
|
|
3742
|
+
// },
|
|
3743
|
+
// onTertiaryFixed: {
|
|
3744
|
+
// palette: () => palettes.get('tertiary'),
|
|
3745
|
+
// background: () => getColor('tertiaryFixedDim'),
|
|
3746
|
+
// contrastCurve: () => getCurve(7),
|
|
3747
|
+
// },
|
|
3748
|
+
// onTertiaryFixedVariant: {
|
|
3749
|
+
// palette: () => palettes.get('tertiary'),
|
|
3750
|
+
// background: () => getColor('tertiaryFixedDim'),
|
|
3751
|
+
// contrastCurve: () => getCurve(4.5),
|
|
3752
|
+
// },
|
|
3753
|
+
////////////////////////////////////////////////////////////////
|
|
3754
|
+
// Errors [E] //
|
|
3755
|
+
////////////////////////////////////////////////////////////////
|
|
3756
|
+
error: {
|
|
3757
|
+
palette: () => palettes.get("error"),
|
|
3758
|
+
tone: () => {
|
|
3759
|
+
return c.isDark ? tMinC(palettes.get("error"), 0, 98) : tMaxC(palettes.get("error"));
|
|
3760
|
+
},
|
|
3761
|
+
isBackground: true,
|
|
3762
|
+
background: () => highestSurface(c, colors),
|
|
3763
|
+
contrastCurve: () => getCurve(4.5),
|
|
3764
|
+
adjustTone: () => toneDeltaPair(
|
|
3765
|
+
colors.get("errorContainer"),
|
|
3766
|
+
colors.get("error"),
|
|
3767
|
+
5,
|
|
3768
|
+
"relative_lighter",
|
|
3769
|
+
true,
|
|
3770
|
+
"farther"
|
|
3771
|
+
)
|
|
3772
|
+
},
|
|
3773
|
+
// errorDim: {
|
|
3774
|
+
// palette: () => palettes.get('error'),
|
|
3775
|
+
// tone: () => tMinC(palettes.get('error')),
|
|
3776
|
+
// isBackground: true,
|
|
3777
|
+
// background: () => getColor('surfaceContainerHigh'),
|
|
3778
|
+
// contrastCurve: () => getCurve(4.5),
|
|
3779
|
+
// adjustTone: () =>
|
|
3780
|
+
// toneDeltaPair(
|
|
3781
|
+
// getColor('errorDim'),
|
|
3782
|
+
// getColor('error'),
|
|
3783
|
+
// 5,
|
|
3784
|
+
// 'darker',
|
|
3785
|
+
// true,
|
|
3786
|
+
// 'farther',
|
|
3787
|
+
// ),
|
|
3788
|
+
// },
|
|
3789
|
+
onError: {
|
|
3790
|
+
palette: () => palettes.get("error"),
|
|
3791
|
+
background: () => colors.get("error"),
|
|
3792
|
+
contrastCurve: () => getCurve(6)
|
|
3793
|
+
},
|
|
3794
|
+
errorContainer: {
|
|
3795
|
+
palette: () => palettes.get("error"),
|
|
3796
|
+
tone: () => {
|
|
3797
|
+
return c.isDark ? tMinC(palettes.get("error"), 30, 93) : tMaxC(palettes.get("error"), 0, 90);
|
|
3798
|
+
},
|
|
3799
|
+
isBackground: true,
|
|
3800
|
+
background: () => highestSurface(c, colors),
|
|
3801
|
+
adjustTone: () => void 0,
|
|
3802
|
+
contrastCurve: () => c.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3803
|
+
},
|
|
3804
|
+
onErrorContainer: {
|
|
3805
|
+
palette: () => palettes.get("error"),
|
|
3806
|
+
background: () => colors.get("errorContainer"),
|
|
3807
|
+
contrastCurve: () => getCurve(4.5)
|
|
3808
|
+
},
|
|
3809
|
+
/////////////////////////////////////////////////////////////////
|
|
3810
|
+
// Remapped Colors //
|
|
3811
|
+
/////////////////////////////////////////////////////////////////
|
|
3812
|
+
surfaceVariant: {
|
|
3813
|
+
alias: "surfaceContainerHighest"
|
|
3814
|
+
},
|
|
3815
|
+
surfaceTint: {
|
|
3816
|
+
alias: "primary"
|
|
3817
|
+
},
|
|
3818
|
+
background: {
|
|
3819
|
+
alias: "surface"
|
|
3820
|
+
},
|
|
3821
|
+
onBackground: {
|
|
3822
|
+
alias: "onSurface"
|
|
3823
|
+
}
|
|
3824
|
+
};
|
|
3825
|
+
}
|
|
3826
|
+
});
|
|
3827
|
+
const Variants = {
|
|
3828
|
+
Expressive: expressiveVariant,
|
|
3829
|
+
Neutral: neutralVariant,
|
|
3830
|
+
TonalSpot: tonalSpotVariant,
|
|
3831
|
+
Vibrant: vibrantVariant,
|
|
3832
|
+
Udixio: udixioVariant
|
|
3833
|
+
};
|
|
3834
|
+
const loader = async (config, load = true) => {
|
|
3835
|
+
const api = bootstrap();
|
|
3836
|
+
const init = () => {
|
|
3837
|
+
const {
|
|
3838
|
+
sourceColor,
|
|
3839
|
+
contrastLevel = 0,
|
|
3840
|
+
isDark = false,
|
|
3841
|
+
variant: variant2 = Variants.TonalSpot,
|
|
3842
|
+
palettes,
|
|
3843
|
+
colors,
|
|
3844
|
+
plugins
|
|
3845
|
+
} = config;
|
|
3846
|
+
api.context.set({
|
|
3847
|
+
contrastLevel,
|
|
3848
|
+
isDark,
|
|
3849
|
+
sourceColor,
|
|
3850
|
+
variant: variant2
|
|
3851
|
+
});
|
|
3852
|
+
if (palettes) {
|
|
3853
|
+
api.palettes.add(palettes);
|
|
3854
|
+
}
|
|
3855
|
+
if (colors) {
|
|
3856
|
+
api.colors.addColors(colors);
|
|
3857
|
+
}
|
|
3858
|
+
if (plugins) {
|
|
3859
|
+
plugins.forEach((plugin) => {
|
|
3860
|
+
api.plugins.addPlugin(plugin);
|
|
3861
|
+
});
|
|
3862
|
+
api.plugins.initPlugins(api);
|
|
3863
|
+
}
|
|
3864
|
+
};
|
|
3865
|
+
init();
|
|
3866
|
+
if (load) {
|
|
3867
|
+
await api.load();
|
|
3868
|
+
}
|
|
3869
|
+
return api;
|
|
3870
|
+
};
|
|
3871
|
+
exports.API = API;
|
|
3872
|
+
exports.AppContainer = AppContainer;
|
|
3873
|
+
exports.AppModule = AppModule;
|
|
3874
|
+
exports.Color = Color;
|
|
3875
|
+
exports.ColorAlias = ColorAlias;
|
|
3876
|
+
exports.ColorApi = ColorApi;
|
|
3877
|
+
exports.ColorFromHex = ColorFromHex;
|
|
3878
|
+
exports.ColorFromPalette = ColorFromPalette;
|
|
3879
|
+
exports.ColorManager = ColorManager;
|
|
3880
|
+
exports.ColorModule = ColorModule;
|
|
3881
|
+
exports.Context = Context;
|
|
3882
|
+
exports.ContextModule = ContextModule;
|
|
3883
|
+
exports.ContrastCurve = ContrastCurve;
|
|
3884
|
+
exports.DynamicColor = DynamicColor;
|
|
3885
|
+
exports.Palette = Palette;
|
|
3886
|
+
exports.PaletteApi = PaletteApi;
|
|
3887
|
+
exports.PaletteModule = PaletteModule;
|
|
3888
|
+
exports.PluginApi = PluginApi;
|
|
3889
|
+
exports.PluginModule = PluginModule;
|
|
3890
|
+
exports.Variant = Variant;
|
|
3891
|
+
exports.Variants = Variants;
|
|
3892
|
+
exports.bootstrap = bootstrap;
|
|
3893
|
+
exports.capitalizeFirstLetter = capitalizeFirstLetter;
|
|
3894
|
+
exports.defaultColors = defaultColors;
|
|
3895
|
+
exports.expressiveVariant = expressiveVariant;
|
|
3896
|
+
exports.getInitialToneFromBackground = getInitialToneFromBackground;
|
|
3897
|
+
exports.getPiecewiseHue = getPiecewiseHue;
|
|
3898
|
+
exports.getRotatedHue = getRotatedHue;
|
|
3899
|
+
exports.highestSurface = highestSurface$1;
|
|
3900
|
+
exports.loader = loader;
|
|
3901
|
+
exports.neutralVariant = neutralVariant;
|
|
3902
|
+
exports.tonalSpotVariant = tonalSpotVariant;
|
|
3903
|
+
exports.toneDeltaPair = toneDeltaPair;
|
|
3904
|
+
exports.variant = variant;
|
|
3905
|
+
exports.vibrantVariant = vibrantVariant;
|