@xenknight/framework7 0.0.5 → 0.0.6
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/components/block/block-vars.less +6 -6
- package/components/button/button-vars.less +11 -10
- package/components/dialog/dialog-class.js +6 -3
- package/components/dialog/dialog-ios.less +10 -34
- package/components/dialog/dialog-md.less +2 -22
- package/components/dialog/dialog-rtl.css +1 -1
- package/components/dialog/dialog-vars.less +8 -10
- package/components/dialog/dialog.css +1 -1
- package/components/dialog/dialog.js +3 -3
- package/components/dialog/dialog.less +6 -25
- package/components/list/list-vars.less +7 -5
- package/components/list/list.less +1 -1
- package/components/notification/notification-class.js +6 -6
- package/components/notification/notification-ios.less +3 -8
- package/components/notification/notification-md.less +1 -20
- package/components/notification/notification-rtl.css +1 -1
- package/components/notification/notification-vars.less +13 -16
- package/components/notification/notification.css +1 -1
- package/components/notification/notification.less +13 -1
- package/components/popover/popover-class.js +21 -58
- package/components/popover/popover-ios.less +66 -2
- package/components/popover/popover-md.less +2 -27
- package/components/popover/popover-rtl.css +1 -1
- package/components/popover/popover-vars.less +2 -3
- package/components/popover/popover.css +1 -1
- package/components/popover/popover.d.ts +0 -2
- package/components/popover/popover.js +0 -1
- package/components/popover/popover.less +28 -50
- package/components/range/range-class.js +34 -27
- package/components/range/range-ios.less +60 -0
- package/components/range/range-md.less +67 -4
- package/components/range/range-rtl.css +1 -1
- package/components/range/range-vars.less +18 -13
- package/components/range/range.css +1 -1
- package/components/range/range.d.ts +3 -1
- package/components/range/range.less +11 -24
- package/components/swipeout/swipeout-ios.less +37 -0
- package/components/swipeout/swipeout-md.less +56 -0
- package/components/swipeout/swipeout-rtl.css +1 -1
- package/components/swipeout/swipeout-vars.less +13 -2
- package/components/swipeout/swipeout.css +1 -1
- package/components/swipeout/swipeout.js +99 -23
- package/components/swipeout/swipeout.less +20 -44
- package/components/toast/toast-class.js +2 -2
- package/components/toast/toast-ios.less +2 -0
- package/components/toast/toast-rtl.css +1 -1
- package/components/toast/toast-vars.less +2 -4
- package/components/toast/toast.css +1 -1
- package/components/toast/toast.less +1 -1
- package/framework7-bundle-rtl.css +417 -368
- package/framework7-bundle-rtl.min.css +4 -4
- package/framework7-bundle.css +417 -368
- package/framework7-bundle.esm.js +2 -2
- package/framework7-bundle.js +2446 -849
- package/framework7-bundle.js.map +1 -1
- package/framework7-bundle.less +2 -2
- package/framework7-bundle.min.css +4 -4
- package/framework7-bundle.min.js +3 -3
- package/framework7-bundle.min.js.map +1 -1
- package/framework7-lite-bundle.esm.js +2 -2
- package/framework7-lite.esm.js +2 -2
- package/framework7-rtl.css +27 -25
- package/framework7-rtl.min.css +3 -3
- package/framework7.css +27 -25
- package/framework7.esm.js +2 -2
- package/framework7.less +2 -2
- package/framework7.min.css +3 -3
- package/package.json +1 -1
- package/shared/get-support.d.ts +0 -6
- package/shared/get-support.js +1 -20
- package/shared/material-color-utils.js +2153 -679
- package/shared/material-colors.js +97 -17
- package/shared/utils.js +18 -6
package/framework7-bundle.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Framework7 0.0.
|
|
2
|
+
* Framework7 0.0.5
|
|
3
3
|
* Full featured mobile HTML framework for building iOS & Android apps
|
|
4
4
|
* https://framework7.io/
|
|
5
5
|
*
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
* Released under the MIT License
|
|
9
9
|
*
|
|
10
|
-
* Released on: December
|
|
10
|
+
* Released on: December 19, 2025
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
(function (global, factory) {
|
|
@@ -1533,14 +1533,11 @@
|
|
|
1533
1533
|
function clampDouble(min, max, input) {
|
|
1534
1534
|
return input < min ? min : input > max ? max : input;
|
|
1535
1535
|
}
|
|
1536
|
-
function
|
|
1536
|
+
function sanitizeDegreesInt(degrees) {
|
|
1537
1537
|
return (degrees %= 360) < 0 && (degrees += 360), degrees;
|
|
1538
1538
|
}
|
|
1539
|
-
function
|
|
1540
|
-
return
|
|
1541
|
-
}
|
|
1542
|
-
function differenceDegrees(a, b) {
|
|
1543
|
-
return 180 - Math.abs(Math.abs(a - b) - 180);
|
|
1539
|
+
function sanitizeDegreesDouble(degrees) {
|
|
1540
|
+
return (degrees %= 360) < 0 && (degrees += 360), degrees;
|
|
1544
1541
|
}
|
|
1545
1542
|
function matrixMultiply(row, matrix) {
|
|
1546
1543
|
return [row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2], row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2], row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2]];
|
|
@@ -1573,6 +1570,20 @@
|
|
|
1573
1570
|
function xyzFromArgb(argb) {
|
|
1574
1571
|
return matrixMultiply([linearized(redFromArgb(argb)), linearized(greenFromArgb(argb)), linearized(blueFromArgb(argb))], SRGB_TO_XYZ);
|
|
1575
1572
|
}
|
|
1573
|
+
function labFromArgb(argb) {
|
|
1574
|
+
const linearR = linearized(redFromArgb(argb)),
|
|
1575
|
+
linearG = linearized(greenFromArgb(argb)),
|
|
1576
|
+
linearB = linearized(blueFromArgb(argb)),
|
|
1577
|
+
matrix = SRGB_TO_XYZ,
|
|
1578
|
+
x = matrix[0][0] * linearR + matrix[0][1] * linearG + matrix[0][2] * linearB,
|
|
1579
|
+
y = matrix[1][0] * linearR + matrix[1][1] * linearG + matrix[1][2] * linearB,
|
|
1580
|
+
z = matrix[2][0] * linearR + matrix[2][1] * linearG + matrix[2][2] * linearB,
|
|
1581
|
+
yNormalized = y / WHITE_POINT_D65[1],
|
|
1582
|
+
zNormalized = z / WHITE_POINT_D65[2],
|
|
1583
|
+
fx = labF(x / WHITE_POINT_D65[0]),
|
|
1584
|
+
fy = labF(yNormalized);
|
|
1585
|
+
return [116 * fy - 16, 500 * (fx - fy), 200 * (fy - labF(zNormalized))];
|
|
1586
|
+
}
|
|
1576
1587
|
function argbFromLstar(lstar) {
|
|
1577
1588
|
const component = delinearized(yFromLstar(lstar));
|
|
1578
1589
|
return argbFromRgb(component, component, component);
|
|
@@ -1688,8 +1699,7 @@
|
|
|
1688
1699
|
b = (rA + gA - 2 * bA) / 9,
|
|
1689
1700
|
u = (20 * rA + 20 * gA + 21 * bA) / 20,
|
|
1690
1701
|
p2 = (40 * rA + 20 * gA + bA) / 20,
|
|
1691
|
-
|
|
1692
|
-
hue = atanDegrees < 0 ? atanDegrees + 360 : atanDegrees >= 360 ? atanDegrees - 360 : atanDegrees,
|
|
1702
|
+
hue = sanitizeDegreesDouble(180 * Math.atan2(b, a) / Math.PI),
|
|
1693
1703
|
hueRadians = hue * Math.PI / 180,
|
|
1694
1704
|
ac = p2 * viewingConditions.nbb,
|
|
1695
1705
|
j = 100 * Math.pow(ac / viewingConditions.aw, viewingConditions.c * viewingConditions.z),
|
|
@@ -2009,6 +2019,21 @@
|
|
|
2009
2019
|
set tone(newTone) {
|
|
2010
2020
|
this.setInternalState(HctSolver.solveToInt(this.internalHue, this.internalChroma, newTone));
|
|
2011
2021
|
}
|
|
2022
|
+
setValue(propertyName, value) {
|
|
2023
|
+
this[propertyName] = value;
|
|
2024
|
+
}
|
|
2025
|
+
toString() {
|
|
2026
|
+
return `HCT(${this.hue.toFixed(0)}, ${this.chroma.toFixed(0)}, ${this.tone.toFixed(0)})`;
|
|
2027
|
+
}
|
|
2028
|
+
static isBlue(hue) {
|
|
2029
|
+
return hue >= 250 && hue < 270;
|
|
2030
|
+
}
|
|
2031
|
+
static isYellow(hue) {
|
|
2032
|
+
return hue >= 105 && hue < 125;
|
|
2033
|
+
}
|
|
2034
|
+
static isCyan(hue) {
|
|
2035
|
+
return hue >= 170 && hue < 207;
|
|
2036
|
+
}
|
|
2012
2037
|
constructor(argb) {
|
|
2013
2038
|
this.argb = argb;
|
|
2014
2039
|
const cam = Cam16.fromInt(argb);
|
|
@@ -2024,33 +2049,6 @@
|
|
|
2024
2049
|
return Hct.from(recastInVc.hue, recastInVc.chroma, lstarFromY(viewedInVc[1]));
|
|
2025
2050
|
}
|
|
2026
2051
|
}
|
|
2027
|
-
class Blend {
|
|
2028
|
-
static harmonize(designColor, sourceColor) {
|
|
2029
|
-
const fromHct = Hct.fromInt(designColor),
|
|
2030
|
-
toHct = Hct.fromInt(sourceColor),
|
|
2031
|
-
differenceDegrees$1 = differenceDegrees(fromHct.hue, toHct.hue),
|
|
2032
|
-
rotationDegrees = Math.min(.5 * differenceDegrees$1, 15),
|
|
2033
|
-
outputHue = sanitizeDegreesDouble(fromHct.hue + rotationDegrees * rotationDirection(fromHct.hue, toHct.hue));
|
|
2034
|
-
return Hct.from(outputHue, fromHct.chroma, fromHct.tone).toInt();
|
|
2035
|
-
}
|
|
2036
|
-
static hctHue(from, to, amount) {
|
|
2037
|
-
const ucs = Blend.cam16Ucs(from, to, amount),
|
|
2038
|
-
ucsCam = Cam16.fromInt(ucs),
|
|
2039
|
-
fromCam = Cam16.fromInt(from);
|
|
2040
|
-
return Hct.from(ucsCam.hue, fromCam.chroma, lstarFromArgb(from)).toInt();
|
|
2041
|
-
}
|
|
2042
|
-
static cam16Ucs(from, to, amount) {
|
|
2043
|
-
const fromCam = Cam16.fromInt(from),
|
|
2044
|
-
toCam = Cam16.fromInt(to),
|
|
2045
|
-
fromJ = fromCam.jstar,
|
|
2046
|
-
fromA = fromCam.astar,
|
|
2047
|
-
fromB = fromCam.bstar,
|
|
2048
|
-
jstar = fromJ + (toCam.jstar - fromJ) * amount,
|
|
2049
|
-
astar = fromA + (toCam.astar - fromA) * amount,
|
|
2050
|
-
bstar = fromB + (toCam.bstar - fromB) * amount;
|
|
2051
|
-
return Cam16.fromUcs(jstar, astar, bstar).toInt();
|
|
2052
|
-
}
|
|
2053
|
-
}
|
|
2054
2052
|
class Contrast {
|
|
2055
2053
|
static ratioOfTones(toneA, toneB) {
|
|
2056
2054
|
return toneA = clampDouble(0, 100, toneA), toneB = clampDouble(0, 100, toneB), Contrast.ratioOfYs(yFromLstar(toneA), yFromLstar(toneB));
|
|
@@ -2099,66 +2097,77 @@
|
|
|
2099
2097
|
return DislikeAnalyzer.isDisliked(hct) ? Hct.from(hct.hue, hct.chroma, 70) : hct;
|
|
2100
2098
|
}
|
|
2101
2099
|
}
|
|
2100
|
+
function validateExtendedColor(originalColor, specVersion, extendedColor) {
|
|
2101
|
+
if (originalColor.name !== extendedColor.name) throw new Error(`Attempting to extend color ${originalColor.name} with color ${extendedColor.name} of different name for spec version ${specVersion}.`);
|
|
2102
|
+
if (originalColor.isBackground !== extendedColor.isBackground) throw new Error(`Attempting to extend color ${originalColor.name} as a ${originalColor.isBackground ? "background" : "foreground"} with color ${extendedColor.name} as a ${extendedColor.isBackground ? "background" : "foreground"} for spec version ${specVersion}.`);
|
|
2103
|
+
}
|
|
2104
|
+
function extendSpecVersion(originlColor, specVersion, extendedColor) {
|
|
2105
|
+
return validateExtendedColor(originlColor, specVersion, extendedColor), DynamicColor.fromPalette({
|
|
2106
|
+
name: originlColor.name,
|
|
2107
|
+
palette: s => s.specVersion === specVersion ? extendedColor.palette(s) : originlColor.palette(s),
|
|
2108
|
+
tone: s => s.specVersion === specVersion ? extendedColor.tone(s) : originlColor.tone(s),
|
|
2109
|
+
isBackground: originlColor.isBackground,
|
|
2110
|
+
chromaMultiplier: s => {
|
|
2111
|
+
const chromaMultiplier = s.specVersion === specVersion ? extendedColor.chromaMultiplier : originlColor.chromaMultiplier;
|
|
2112
|
+
return void 0 !== chromaMultiplier ? chromaMultiplier(s) : 1;
|
|
2113
|
+
},
|
|
2114
|
+
background: s => {
|
|
2115
|
+
const background = s.specVersion === specVersion ? extendedColor.background : originlColor.background;
|
|
2116
|
+
return void 0 !== background ? background(s) : void 0;
|
|
2117
|
+
},
|
|
2118
|
+
secondBackground: s => {
|
|
2119
|
+
const secondBackground = s.specVersion === specVersion ? extendedColor.secondBackground : originlColor.secondBackground;
|
|
2120
|
+
return void 0 !== secondBackground ? secondBackground(s) : void 0;
|
|
2121
|
+
},
|
|
2122
|
+
contrastCurve: s => {
|
|
2123
|
+
const contrastCurve = s.specVersion === specVersion ? extendedColor.contrastCurve : originlColor.contrastCurve;
|
|
2124
|
+
return void 0 !== contrastCurve ? contrastCurve(s) : void 0;
|
|
2125
|
+
},
|
|
2126
|
+
toneDeltaPair: s => {
|
|
2127
|
+
const toneDeltaPair = s.specVersion === specVersion ? extendedColor.toneDeltaPair : originlColor.toneDeltaPair;
|
|
2128
|
+
return void 0 !== toneDeltaPair ? toneDeltaPair(s) : void 0;
|
|
2129
|
+
}
|
|
2130
|
+
});
|
|
2131
|
+
}
|
|
2102
2132
|
class DynamicColor {
|
|
2103
2133
|
static fromPalette(args) {
|
|
2104
|
-
return new DynamicColor(args.name ?? "", args.palette, args.tone, args.isBackground ?? !1, args.background, args.secondBackground, args.contrastCurve, args.toneDeltaPair);
|
|
2134
|
+
return new DynamicColor(args.name ?? "", args.palette, args.tone ?? DynamicColor.getInitialToneFromBackground(args.background), args.isBackground ?? !1, args.chromaMultiplier, args.background, args.secondBackground, args.contrastCurve, args.toneDeltaPair);
|
|
2135
|
+
}
|
|
2136
|
+
static getInitialToneFromBackground(background) {
|
|
2137
|
+
return void 0 === background ? s => 50 : s => background(s) ? background(s).getTone(s) : 50;
|
|
2105
2138
|
}
|
|
2106
|
-
constructor(name, palette, tone, isBackground, background, secondBackground, contrastCurve, toneDeltaPair) {
|
|
2107
|
-
if (this.name = name, this.palette = palette, this.tone = tone, this.isBackground = isBackground, this.background = background, this.secondBackground = secondBackground, this.contrastCurve = contrastCurve, this.toneDeltaPair = toneDeltaPair, this.hctCache = new Map(), !background && secondBackground) throw new Error(`Color ${name} has secondBackgrounddefined, but background is not defined.`);
|
|
2139
|
+
constructor(name, palette, tone, isBackground, chromaMultiplier, background, secondBackground, contrastCurve, toneDeltaPair) {
|
|
2140
|
+
if (this.name = name, this.palette = palette, this.tone = tone, this.isBackground = isBackground, this.chromaMultiplier = chromaMultiplier, this.background = background, this.secondBackground = secondBackground, this.contrastCurve = contrastCurve, this.toneDeltaPair = toneDeltaPair, this.hctCache = new Map(), !background && secondBackground) throw new Error(`Color ${name} has secondBackgrounddefined, but background is not defined.`);
|
|
2108
2141
|
if (!background && contrastCurve) throw new Error(`Color ${name} has contrastCurvedefined, but background is not defined.`);
|
|
2109
2142
|
if (background && !contrastCurve) throw new Error(`Color ${name} has backgrounddefined, but contrastCurve is not defined.`);
|
|
2110
2143
|
}
|
|
2144
|
+
clone() {
|
|
2145
|
+
return DynamicColor.fromPalette({
|
|
2146
|
+
name: this.name,
|
|
2147
|
+
palette: this.palette,
|
|
2148
|
+
tone: this.tone,
|
|
2149
|
+
isBackground: this.isBackground,
|
|
2150
|
+
chromaMultiplier: this.chromaMultiplier,
|
|
2151
|
+
background: this.background,
|
|
2152
|
+
secondBackground: this.secondBackground,
|
|
2153
|
+
contrastCurve: this.contrastCurve,
|
|
2154
|
+
toneDeltaPair: this.toneDeltaPair
|
|
2155
|
+
});
|
|
2156
|
+
}
|
|
2157
|
+
clearCache() {
|
|
2158
|
+
this.hctCache.clear();
|
|
2159
|
+
}
|
|
2111
2160
|
getArgb(scheme) {
|
|
2112
2161
|
return this.getHct(scheme).toInt();
|
|
2113
2162
|
}
|
|
2114
2163
|
getHct(scheme) {
|
|
2115
2164
|
const cachedAnswer = this.hctCache.get(scheme);
|
|
2116
2165
|
if (null != cachedAnswer) return cachedAnswer;
|
|
2117
|
-
const
|
|
2118
|
-
answer = this.palette(scheme).getHct(tone);
|
|
2166
|
+
const answer = getSpec$1(scheme.specVersion).getHct(scheme, this);
|
|
2119
2167
|
return this.hctCache.size > 4 && this.hctCache.clear(), this.hctCache.set(scheme, answer), answer;
|
|
2120
2168
|
}
|
|
2121
2169
|
getTone(scheme) {
|
|
2122
|
-
|
|
2123
|
-
if (this.toneDeltaPair) {
|
|
2124
|
-
const toneDeltaPair = this.toneDeltaPair(scheme),
|
|
2125
|
-
roleA = toneDeltaPair.roleA,
|
|
2126
|
-
roleB = toneDeltaPair.roleB,
|
|
2127
|
-
delta = toneDeltaPair.delta,
|
|
2128
|
-
polarity = toneDeltaPair.polarity,
|
|
2129
|
-
stayTogether = toneDeltaPair.stayTogether,
|
|
2130
|
-
bgTone = this.background(scheme).getTone(scheme),
|
|
2131
|
-
aIsNearer = "nearer" === polarity || "lighter" === polarity && !scheme.isDark || "darker" === polarity && scheme.isDark,
|
|
2132
|
-
nearer = aIsNearer ? roleA : roleB,
|
|
2133
|
-
farther = aIsNearer ? roleB : roleA,
|
|
2134
|
-
amNearer = this.name === nearer.name,
|
|
2135
|
-
expansionDir = scheme.isDark ? 1 : -1,
|
|
2136
|
-
nContrast = nearer.contrastCurve.getContrast(scheme.contrastLevel),
|
|
2137
|
-
fContrast = farther.contrastCurve.getContrast(scheme.contrastLevel),
|
|
2138
|
-
nInitialTone = nearer.tone(scheme);
|
|
2139
|
-
let nTone = Contrast.ratioOfTones(bgTone, nInitialTone) >= nContrast ? nInitialTone : DynamicColor.foregroundTone(bgTone, nContrast);
|
|
2140
|
-
const fInitialTone = farther.tone(scheme);
|
|
2141
|
-
let fTone = Contrast.ratioOfTones(bgTone, fInitialTone) >= fContrast ? fInitialTone : DynamicColor.foregroundTone(bgTone, fContrast);
|
|
2142
|
-
return decreasingContrast && (nTone = DynamicColor.foregroundTone(bgTone, nContrast), fTone = DynamicColor.foregroundTone(bgTone, fContrast)), (fTone - nTone) * expansionDir >= delta || (fTone = clampDouble(0, 100, nTone + delta * expansionDir), (fTone - nTone) * expansionDir >= delta || (nTone = clampDouble(0, 100, fTone - delta * expansionDir))), 50 <= nTone && nTone < 60 ? expansionDir > 0 ? (nTone = 60, fTone = Math.max(fTone, nTone + delta * expansionDir)) : (nTone = 49, fTone = Math.min(fTone, nTone + delta * expansionDir)) : 50 <= fTone && fTone < 60 && (stayTogether ? expansionDir > 0 ? (nTone = 60, fTone = Math.max(fTone, nTone + delta * expansionDir)) : (nTone = 49, fTone = Math.min(fTone, nTone + delta * expansionDir)) : fTone = expansionDir > 0 ? 60 : 49), amNearer ? nTone : fTone;
|
|
2143
|
-
}
|
|
2144
|
-
{
|
|
2145
|
-
let answer = this.tone(scheme);
|
|
2146
|
-
if (null == this.background) return answer;
|
|
2147
|
-
const bgTone = this.background(scheme).getTone(scheme),
|
|
2148
|
-
desiredRatio = this.contrastCurve.getContrast(scheme.contrastLevel);
|
|
2149
|
-
if (Contrast.ratioOfTones(bgTone, answer) >= desiredRatio || (answer = DynamicColor.foregroundTone(bgTone, desiredRatio)), decreasingContrast && (answer = DynamicColor.foregroundTone(bgTone, desiredRatio)), this.isBackground && 50 <= answer && answer < 60 && (answer = Contrast.ratioOfTones(49, bgTone) >= desiredRatio ? 49 : 60), this.secondBackground) {
|
|
2150
|
-
const [bg1, bg2] = [this.background, this.secondBackground],
|
|
2151
|
-
[bgTone1, bgTone2] = [bg1(scheme).getTone(scheme), bg2(scheme).getTone(scheme)],
|
|
2152
|
-
[upper, lower] = [Math.max(bgTone1, bgTone2), Math.min(bgTone1, bgTone2)];
|
|
2153
|
-
if (Contrast.ratioOfTones(upper, answer) >= desiredRatio && Contrast.ratioOfTones(lower, answer) >= desiredRatio) return answer;
|
|
2154
|
-
const lightOption = Contrast.lighter(upper, desiredRatio),
|
|
2155
|
-
darkOption = Contrast.darker(lower, desiredRatio),
|
|
2156
|
-
availables = [];
|
|
2157
|
-
-1 !== lightOption && availables.push(lightOption), -1 !== darkOption && availables.push(darkOption);
|
|
2158
|
-
return DynamicColor.tonePrefersLightForeground(bgTone1) || DynamicColor.tonePrefersLightForeground(bgTone2) ? lightOption < 0 ? 100 : lightOption : 1 === availables.length ? availables[0] : darkOption < 0 ? 0 : darkOption;
|
|
2159
|
-
}
|
|
2160
|
-
return answer;
|
|
2161
|
-
}
|
|
2170
|
+
return getSpec$1(scheme.specVersion).getTone(scheme, this);
|
|
2162
2171
|
}
|
|
2163
2172
|
static foregroundTone(bgTone, ratio) {
|
|
2164
2173
|
const lighterTone = Contrast.lighterUnsafe(bgTone, ratio),
|
|
@@ -2181,23 +2190,309 @@
|
|
|
2181
2190
|
return DynamicColor.tonePrefersLightForeground(tone) && !DynamicColor.toneAllowsLightForeground(tone) ? 49 : tone;
|
|
2182
2191
|
}
|
|
2183
2192
|
}
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2193
|
+
class ColorCalculationDelegateImpl2021 {
|
|
2194
|
+
getHct(scheme, color) {
|
|
2195
|
+
const tone = color.getTone(scheme);
|
|
2196
|
+
return color.palette(scheme).getHct(tone);
|
|
2197
|
+
}
|
|
2198
|
+
getTone(scheme, color) {
|
|
2199
|
+
const decreasingContrast = scheme.contrastLevel < 0,
|
|
2200
|
+
toneDeltaPair = color.toneDeltaPair ? color.toneDeltaPair(scheme) : void 0;
|
|
2201
|
+
if (toneDeltaPair) {
|
|
2202
|
+
const roleA = toneDeltaPair.roleA,
|
|
2203
|
+
roleB = toneDeltaPair.roleB,
|
|
2204
|
+
delta = toneDeltaPair.delta,
|
|
2205
|
+
polarity = toneDeltaPair.polarity,
|
|
2206
|
+
stayTogether = toneDeltaPair.stayTogether,
|
|
2207
|
+
aIsNearer = "nearer" === polarity || "lighter" === polarity && !scheme.isDark || "darker" === polarity && scheme.isDark,
|
|
2208
|
+
nearer = aIsNearer ? roleA : roleB,
|
|
2209
|
+
farther = aIsNearer ? roleB : roleA,
|
|
2210
|
+
amNearer = color.name === nearer.name,
|
|
2211
|
+
expansionDir = scheme.isDark ? 1 : -1;
|
|
2212
|
+
let nTone = nearer.tone(scheme),
|
|
2213
|
+
fTone = farther.tone(scheme);
|
|
2214
|
+
if (color.background && nearer.contrastCurve && farther.contrastCurve) {
|
|
2215
|
+
const bg = color.background(scheme),
|
|
2216
|
+
nContrastCurve = nearer.contrastCurve(scheme),
|
|
2217
|
+
fContrastCurve = farther.contrastCurve(scheme);
|
|
2218
|
+
if (bg && nContrastCurve && fContrastCurve) {
|
|
2219
|
+
const bgTone = bg.getTone(scheme),
|
|
2220
|
+
nContrast = nContrastCurve.get(scheme.contrastLevel),
|
|
2221
|
+
fContrast = fContrastCurve.get(scheme.contrastLevel);
|
|
2222
|
+
Contrast.ratioOfTones(bgTone, nTone) < nContrast && (nTone = DynamicColor.foregroundTone(bgTone, nContrast)), Contrast.ratioOfTones(bgTone, fTone) < fContrast && (fTone = DynamicColor.foregroundTone(bgTone, fContrast)), decreasingContrast && (nTone = DynamicColor.foregroundTone(bgTone, nContrast), fTone = DynamicColor.foregroundTone(bgTone, fContrast));
|
|
2223
|
+
}
|
|
2224
|
+
}
|
|
2225
|
+
return (fTone - nTone) * expansionDir < delta && (fTone = clampDouble(0, 100, nTone + delta * expansionDir), (fTone - nTone) * expansionDir >= delta || (nTone = clampDouble(0, 100, fTone - delta * expansionDir))), 50 <= nTone && nTone < 60 ? expansionDir > 0 ? (nTone = 60, fTone = Math.max(fTone, nTone + delta * expansionDir)) : (nTone = 49, fTone = Math.min(fTone, nTone + delta * expansionDir)) : 50 <= fTone && fTone < 60 && (stayTogether ? expansionDir > 0 ? (nTone = 60, fTone = Math.max(fTone, nTone + delta * expansionDir)) : (nTone = 49, fTone = Math.min(fTone, nTone + delta * expansionDir)) : fTone = expansionDir > 0 ? 60 : 49), amNearer ? nTone : fTone;
|
|
2226
|
+
}
|
|
2227
|
+
{
|
|
2228
|
+
let answer = color.tone(scheme);
|
|
2229
|
+
if (null == color.background || void 0 === color.background(scheme) || null == color.contrastCurve || void 0 === color.contrastCurve(scheme)) return answer;
|
|
2230
|
+
const bgTone = color.background(scheme).getTone(scheme),
|
|
2231
|
+
desiredRatio = color.contrastCurve(scheme).get(scheme.contrastLevel);
|
|
2232
|
+
if (Contrast.ratioOfTones(bgTone, answer) >= desiredRatio || (answer = DynamicColor.foregroundTone(bgTone, desiredRatio)), decreasingContrast && (answer = DynamicColor.foregroundTone(bgTone, desiredRatio)), color.isBackground && 50 <= answer && answer < 60 && (answer = Contrast.ratioOfTones(49, bgTone) >= desiredRatio ? 49 : 60), null == color.secondBackground || void 0 === color.secondBackground(scheme)) return answer;
|
|
2233
|
+
const [bg1, bg2] = [color.background, color.secondBackground],
|
|
2234
|
+
[bgTone1, bgTone2] = [bg1(scheme).getTone(scheme), bg2(scheme).getTone(scheme)],
|
|
2235
|
+
[upper, lower] = [Math.max(bgTone1, bgTone2), Math.min(bgTone1, bgTone2)];
|
|
2236
|
+
if (Contrast.ratioOfTones(upper, answer) >= desiredRatio && Contrast.ratioOfTones(lower, answer) >= desiredRatio) return answer;
|
|
2237
|
+
const lightOption = Contrast.lighter(upper, desiredRatio),
|
|
2238
|
+
darkOption = Contrast.darker(lower, desiredRatio),
|
|
2239
|
+
availables = [];
|
|
2240
|
+
-1 !== lightOption && availables.push(lightOption), -1 !== darkOption && availables.push(darkOption);
|
|
2241
|
+
return DynamicColor.tonePrefersLightForeground(bgTone1) || DynamicColor.tonePrefersLightForeground(bgTone2) ? lightOption < 0 ? 100 : lightOption : 1 === availables.length ? availables[0] : darkOption < 0 ? 0 : darkOption;
|
|
2242
|
+
}
|
|
2243
|
+
}
|
|
2244
|
+
}
|
|
2245
|
+
class ColorCalculationDelegateImpl2025 {
|
|
2246
|
+
getHct(scheme, color) {
|
|
2247
|
+
const palette = color.palette(scheme),
|
|
2248
|
+
tone = color.getTone(scheme),
|
|
2249
|
+
hue = palette.hue,
|
|
2250
|
+
chroma = palette.chroma * (color.chromaMultiplier ? color.chromaMultiplier(scheme) : 1);
|
|
2251
|
+
return Hct.from(hue, chroma, tone);
|
|
2252
|
+
}
|
|
2253
|
+
getTone(scheme, color) {
|
|
2254
|
+
const toneDeltaPair = color.toneDeltaPair ? color.toneDeltaPair(scheme) : void 0;
|
|
2255
|
+
if (toneDeltaPair) {
|
|
2256
|
+
const roleA = toneDeltaPair.roleA,
|
|
2257
|
+
roleB = toneDeltaPair.roleB,
|
|
2258
|
+
polarity = toneDeltaPair.polarity,
|
|
2259
|
+
constraint = toneDeltaPair.constraint,
|
|
2260
|
+
absoluteDelta = "darker" === polarity || "relative_lighter" === polarity && scheme.isDark || "relative_darker" === polarity && !scheme.isDark ? -toneDeltaPair.delta : toneDeltaPair.delta,
|
|
2261
|
+
amRoleA = color.name === roleA.name,
|
|
2262
|
+
refRole = amRoleA ? roleB : roleA;
|
|
2263
|
+
let selfTone = (amRoleA ? roleA : roleB).tone(scheme),
|
|
2264
|
+
refTone = refRole.getTone(scheme);
|
|
2265
|
+
const relativeDelta = absoluteDelta * (amRoleA ? 1 : -1);
|
|
2266
|
+
if ("exact" === constraint ? selfTone = clampDouble(0, 100, refTone + relativeDelta) : "nearer" === constraint ? selfTone = clampDouble(0, 100, relativeDelta > 0 ? clampDouble(refTone, refTone + relativeDelta, selfTone) : clampDouble(refTone + relativeDelta, refTone, selfTone)) : "farther" === constraint && (selfTone = relativeDelta > 0 ? clampDouble(refTone + relativeDelta, 100, selfTone) : clampDouble(0, refTone + relativeDelta, selfTone)), color.background && color.contrastCurve) {
|
|
2267
|
+
const background = color.background(scheme),
|
|
2268
|
+
contrastCurve = color.contrastCurve(scheme);
|
|
2269
|
+
if (background && contrastCurve) {
|
|
2270
|
+
const bgTone = background.getTone(scheme),
|
|
2271
|
+
selfContrast = contrastCurve.get(scheme.contrastLevel);
|
|
2272
|
+
selfTone = Contrast.ratioOfTones(bgTone, selfTone) >= selfContrast && scheme.contrastLevel >= 0 ? selfTone : DynamicColor.foregroundTone(bgTone, selfContrast);
|
|
2273
|
+
}
|
|
2274
|
+
}
|
|
2275
|
+
return color.isBackground && !color.name.endsWith("_fixed_dim") && (selfTone = selfTone >= 57 ? clampDouble(65, 100, selfTone) : clampDouble(0, 49, selfTone)), selfTone;
|
|
2276
|
+
}
|
|
2277
|
+
{
|
|
2278
|
+
let answer = color.tone(scheme);
|
|
2279
|
+
if (null == color.background || void 0 === color.background(scheme) || null == color.contrastCurve || void 0 === color.contrastCurve(scheme)) return answer;
|
|
2280
|
+
const bgTone = color.background(scheme).getTone(scheme),
|
|
2281
|
+
desiredRatio = color.contrastCurve(scheme).get(scheme.contrastLevel);
|
|
2282
|
+
if (answer = Contrast.ratioOfTones(bgTone, answer) >= desiredRatio && scheme.contrastLevel >= 0 ? answer : DynamicColor.foregroundTone(bgTone, desiredRatio), color.isBackground && !color.name.endsWith("_fixed_dim") && (answer = answer >= 57 ? clampDouble(65, 100, answer) : clampDouble(0, 49, answer)), null == color.secondBackground || void 0 === color.secondBackground(scheme)) return answer;
|
|
2283
|
+
const [bg1, bg2] = [color.background, color.secondBackground],
|
|
2284
|
+
[bgTone1, bgTone2] = [bg1(scheme).getTone(scheme), bg2(scheme).getTone(scheme)],
|
|
2285
|
+
[upper, lower] = [Math.max(bgTone1, bgTone2), Math.min(bgTone1, bgTone2)];
|
|
2286
|
+
if (Contrast.ratioOfTones(upper, answer) >= desiredRatio && Contrast.ratioOfTones(lower, answer) >= desiredRatio) return answer;
|
|
2287
|
+
const lightOption = Contrast.lighter(upper, desiredRatio),
|
|
2288
|
+
darkOption = Contrast.darker(lower, desiredRatio),
|
|
2289
|
+
availables = [];
|
|
2290
|
+
-1 !== lightOption && availables.push(lightOption), -1 !== darkOption && availables.push(darkOption);
|
|
2291
|
+
return DynamicColor.tonePrefersLightForeground(bgTone1) || DynamicColor.tonePrefersLightForeground(bgTone2) ? lightOption < 0 ? 100 : lightOption : 1 === availables.length ? availables[0] : darkOption < 0 ? 0 : darkOption;
|
|
2292
|
+
}
|
|
2293
|
+
}
|
|
2294
|
+
}
|
|
2295
|
+
const spec2021$1 = new ColorCalculationDelegateImpl2021(),
|
|
2296
|
+
spec2025$1 = new ColorCalculationDelegateImpl2025();
|
|
2297
|
+
function getSpec$1(specVersion) {
|
|
2298
|
+
return "2025" === specVersion ? spec2025$1 : spec2021$1;
|
|
2299
|
+
}
|
|
2300
|
+
class TonalPalette {
|
|
2301
|
+
static fromInt(argb) {
|
|
2302
|
+
const hct = Hct.fromInt(argb);
|
|
2303
|
+
return TonalPalette.fromHct(hct);
|
|
2304
|
+
}
|
|
2305
|
+
static fromHct(hct) {
|
|
2306
|
+
return new TonalPalette(hct.hue, hct.chroma, hct);
|
|
2307
|
+
}
|
|
2308
|
+
static fromHueAndChroma(hue, chroma) {
|
|
2309
|
+
const keyColor = new KeyColor(hue, chroma).create();
|
|
2310
|
+
return new TonalPalette(hue, chroma, keyColor);
|
|
2311
|
+
}
|
|
2312
|
+
constructor(hue, chroma, keyColor) {
|
|
2313
|
+
this.hue = hue, this.chroma = chroma, this.keyColor = keyColor, this.cache = new Map();
|
|
2314
|
+
}
|
|
2315
|
+
tone(tone) {
|
|
2316
|
+
let argb = this.cache.get(tone);
|
|
2317
|
+
return void 0 === argb && (argb = 99 == tone && Hct.isYellow(this.hue) ? this.averageArgb(this.tone(98), this.tone(100)) : Hct.from(this.hue, this.chroma, tone).toInt(), this.cache.set(tone, argb)), argb;
|
|
2318
|
+
}
|
|
2319
|
+
getHct(tone) {
|
|
2320
|
+
return Hct.fromInt(this.tone(tone));
|
|
2321
|
+
}
|
|
2322
|
+
averageArgb(argb1, argb2) {
|
|
2323
|
+
const red1 = argb1 >>> 16 & 255,
|
|
2324
|
+
green1 = argb1 >>> 8 & 255,
|
|
2325
|
+
blue1 = 255 & argb1,
|
|
2326
|
+
red2 = argb2 >>> 16 & 255,
|
|
2327
|
+
green2 = argb2 >>> 8 & 255,
|
|
2328
|
+
blue2 = 255 & argb2;
|
|
2329
|
+
return (255 << 24 | (255 & Math.round((red1 + red2) / 2)) << 16 | (255 & Math.round((green1 + green2) / 2)) << 8 | 255 & Math.round((blue1 + blue2) / 2)) >>> 0;
|
|
2330
|
+
}
|
|
2331
|
+
}
|
|
2332
|
+
class KeyColor {
|
|
2333
|
+
constructor(hue, requestedChroma) {
|
|
2334
|
+
this.hue = hue, this.requestedChroma = requestedChroma, this.chromaCache = new Map(), this.maxChromaValue = 200;
|
|
2335
|
+
}
|
|
2336
|
+
create() {
|
|
2337
|
+
let lowerTone = 0,
|
|
2338
|
+
upperTone = 100;
|
|
2339
|
+
for (; lowerTone < upperTone;) {
|
|
2340
|
+
const midTone = Math.floor((lowerTone + upperTone) / 2),
|
|
2341
|
+
isAscending = this.maxChroma(midTone) < this.maxChroma(midTone + 1);
|
|
2342
|
+
if (this.maxChroma(midTone) >= this.requestedChroma - .01) {
|
|
2343
|
+
if (Math.abs(lowerTone - 50) < Math.abs(upperTone - 50)) upperTone = midTone;else {
|
|
2344
|
+
if (lowerTone === midTone) return Hct.from(this.hue, this.requestedChroma, lowerTone);
|
|
2345
|
+
lowerTone = midTone;
|
|
2346
|
+
}
|
|
2347
|
+
} else isAscending ? lowerTone = midTone + 1 : upperTone = midTone;
|
|
2348
|
+
}
|
|
2349
|
+
return Hct.from(this.hue, this.requestedChroma, lowerTone);
|
|
2350
|
+
}
|
|
2351
|
+
maxChroma(tone) {
|
|
2352
|
+
if (this.chromaCache.has(tone)) return this.chromaCache.get(tone);
|
|
2353
|
+
const chroma = Hct.from(this.hue, this.maxChromaValue, tone).chroma;
|
|
2354
|
+
return this.chromaCache.set(tone, chroma), chroma;
|
|
2355
|
+
}
|
|
2356
|
+
}
|
|
2357
|
+
class TemperatureCache {
|
|
2358
|
+
constructor(input) {
|
|
2359
|
+
this.input = input, this.hctsByTempCache = [], this.hctsByHueCache = [], this.tempsByHctCache = new Map(), this.inputRelativeTemperatureCache = -1, this.complementCache = null;
|
|
2360
|
+
}
|
|
2361
|
+
get hctsByTemp() {
|
|
2362
|
+
if (this.hctsByTempCache.length > 0) return this.hctsByTempCache;
|
|
2363
|
+
const hcts = this.hctsByHue.concat([this.input]),
|
|
2364
|
+
temperaturesByHct = this.tempsByHct;
|
|
2365
|
+
return hcts.sort((a, b) => temperaturesByHct.get(a) - temperaturesByHct.get(b)), this.hctsByTempCache = hcts, hcts;
|
|
2366
|
+
}
|
|
2367
|
+
get warmest() {
|
|
2368
|
+
return this.hctsByTemp[this.hctsByTemp.length - 1];
|
|
2369
|
+
}
|
|
2370
|
+
get coldest() {
|
|
2371
|
+
return this.hctsByTemp[0];
|
|
2372
|
+
}
|
|
2373
|
+
analogous(count, divisions) {
|
|
2374
|
+
if (count === void 0) {
|
|
2375
|
+
count = 5;
|
|
2376
|
+
}
|
|
2377
|
+
if (divisions === void 0) {
|
|
2378
|
+
divisions = 12;
|
|
2379
|
+
}
|
|
2380
|
+
const startHue = Math.round(this.input.hue),
|
|
2381
|
+
startHct = this.hctsByHue[startHue];
|
|
2382
|
+
let lastTemp = this.relativeTemperature(startHct);
|
|
2383
|
+
const allColors = [startHct];
|
|
2384
|
+
let absoluteTotalTempDelta = 0;
|
|
2385
|
+
for (let i = 0; i < 360; i++) {
|
|
2386
|
+
const hue = sanitizeDegreesInt(startHue + i),
|
|
2387
|
+
hct = this.hctsByHue[hue],
|
|
2388
|
+
temp = this.relativeTemperature(hct),
|
|
2389
|
+
tempDelta = Math.abs(temp - lastTemp);
|
|
2390
|
+
lastTemp = temp, absoluteTotalTempDelta += tempDelta;
|
|
2391
|
+
}
|
|
2392
|
+
let hueAddend = 1;
|
|
2393
|
+
const tempStep = absoluteTotalTempDelta / divisions;
|
|
2394
|
+
let totalTempDelta = 0;
|
|
2395
|
+
for (lastTemp = this.relativeTemperature(startHct); allColors.length < divisions;) {
|
|
2396
|
+
const hue = sanitizeDegreesInt(startHue + hueAddend),
|
|
2397
|
+
hct = this.hctsByHue[hue],
|
|
2398
|
+
temp = this.relativeTemperature(hct);
|
|
2399
|
+
totalTempDelta += Math.abs(temp - lastTemp);
|
|
2400
|
+
let indexSatisfied = totalTempDelta >= allColors.length * tempStep,
|
|
2401
|
+
indexAddend = 1;
|
|
2402
|
+
for (; indexSatisfied && allColors.length < divisions;) {
|
|
2403
|
+
allColors.push(hct);
|
|
2404
|
+
indexSatisfied = totalTempDelta >= (allColors.length + indexAddend) * tempStep, indexAddend++;
|
|
2405
|
+
}
|
|
2406
|
+
if (lastTemp = temp, hueAddend++, hueAddend > 360) {
|
|
2407
|
+
for (; allColors.length < divisions;) allColors.push(hct);
|
|
2408
|
+
break;
|
|
2409
|
+
}
|
|
2410
|
+
}
|
|
2411
|
+
const answers = [this.input],
|
|
2412
|
+
increaseHueCount = Math.floor((count - 1) / 2);
|
|
2413
|
+
for (let i = 1; i < increaseHueCount + 1; i++) {
|
|
2414
|
+
let index = 0 - i;
|
|
2415
|
+
for (; index < 0;) index = allColors.length + index;
|
|
2416
|
+
index >= allColors.length && (index %= allColors.length), answers.splice(0, 0, allColors[index]);
|
|
2417
|
+
}
|
|
2418
|
+
const decreaseHueCount = count - increaseHueCount - 1;
|
|
2419
|
+
for (let i = 1; i < decreaseHueCount + 1; i++) {
|
|
2420
|
+
let index = i;
|
|
2421
|
+
for (; index < 0;) index = allColors.length + index;
|
|
2422
|
+
index >= allColors.length && (index %= allColors.length), answers.push(allColors[index]);
|
|
2423
|
+
}
|
|
2424
|
+
return answers;
|
|
2425
|
+
}
|
|
2426
|
+
get complement() {
|
|
2427
|
+
if (null != this.complementCache) return this.complementCache;
|
|
2428
|
+
const coldestHue = this.coldest.hue,
|
|
2429
|
+
coldestTemp = this.tempsByHct.get(this.coldest),
|
|
2430
|
+
warmestHue = this.warmest.hue,
|
|
2431
|
+
range = this.tempsByHct.get(this.warmest) - coldestTemp,
|
|
2432
|
+
startHueIsColdestToWarmest = TemperatureCache.isBetween(this.input.hue, coldestHue, warmestHue),
|
|
2433
|
+
startHue = startHueIsColdestToWarmest ? warmestHue : coldestHue,
|
|
2434
|
+
endHue = startHueIsColdestToWarmest ? coldestHue : warmestHue;
|
|
2435
|
+
let smallestError = 1e3,
|
|
2436
|
+
answer = this.hctsByHue[Math.round(this.input.hue)];
|
|
2437
|
+
const complementRelativeTemp = 1 - this.inputRelativeTemperature;
|
|
2438
|
+
for (let hueAddend = 0; hueAddend <= 360; hueAddend += 1) {
|
|
2439
|
+
const hue = sanitizeDegreesDouble(startHue + 1 * hueAddend);
|
|
2440
|
+
if (!TemperatureCache.isBetween(hue, startHue, endHue)) continue;
|
|
2441
|
+
const possibleAnswer = this.hctsByHue[Math.round(hue)],
|
|
2442
|
+
relativeTemp = (this.tempsByHct.get(possibleAnswer) - coldestTemp) / range,
|
|
2443
|
+
error = Math.abs(complementRelativeTemp - relativeTemp);
|
|
2444
|
+
error < smallestError && (smallestError = error, answer = possibleAnswer);
|
|
2445
|
+
}
|
|
2446
|
+
return this.complementCache = answer, this.complementCache;
|
|
2447
|
+
}
|
|
2448
|
+
relativeTemperature(hct) {
|
|
2449
|
+
const range = this.tempsByHct.get(this.warmest) - this.tempsByHct.get(this.coldest),
|
|
2450
|
+
differenceFromColdest = this.tempsByHct.get(hct) - this.tempsByHct.get(this.coldest);
|
|
2451
|
+
return 0 === range ? .5 : differenceFromColdest / range;
|
|
2452
|
+
}
|
|
2453
|
+
get inputRelativeTemperature() {
|
|
2454
|
+
return this.inputRelativeTemperatureCache >= 0 || (this.inputRelativeTemperatureCache = this.relativeTemperature(this.input)), this.inputRelativeTemperatureCache;
|
|
2455
|
+
}
|
|
2456
|
+
get tempsByHct() {
|
|
2457
|
+
if (this.tempsByHctCache.size > 0) return this.tempsByHctCache;
|
|
2458
|
+
const allHcts = this.hctsByHue.concat([this.input]),
|
|
2459
|
+
temperaturesByHct = new Map();
|
|
2460
|
+
for (const e of allHcts) temperaturesByHct.set(e, TemperatureCache.rawTemperature(e));
|
|
2461
|
+
return this.tempsByHctCache = temperaturesByHct, temperaturesByHct;
|
|
2462
|
+
}
|
|
2463
|
+
get hctsByHue() {
|
|
2464
|
+
if (this.hctsByHueCache.length > 0) return this.hctsByHueCache;
|
|
2465
|
+
const hcts = [];
|
|
2466
|
+
for (let hue = 0; hue <= 360; hue += 1) {
|
|
2467
|
+
const colorAtHue = Hct.from(hue, this.input.chroma, this.input.tone);
|
|
2468
|
+
hcts.push(colorAtHue);
|
|
2469
|
+
}
|
|
2470
|
+
return this.hctsByHueCache = hcts, this.hctsByHueCache;
|
|
2471
|
+
}
|
|
2472
|
+
static isBetween(angle, a, b) {
|
|
2473
|
+
return a < b ? a <= angle && angle <= b : a <= angle || angle <= b;
|
|
2474
|
+
}
|
|
2475
|
+
static rawTemperature(color) {
|
|
2476
|
+
const lab = labFromArgb(color.toInt()),
|
|
2477
|
+
hue = sanitizeDegreesDouble(180 * Math.atan2(lab[2], lab[1]) / Math.PI),
|
|
2478
|
+
chroma = Math.sqrt(lab[1] * lab[1] + lab[2] * lab[2]);
|
|
2479
|
+
return .02 * Math.pow(chroma, 1.07) * Math.cos(sanitizeDegreesDouble(hue - 50) * Math.PI / 180) - .5;
|
|
2480
|
+
}
|
|
2481
|
+
}
|
|
2188
2482
|
class ContrastCurve {
|
|
2189
2483
|
constructor(low, normal, medium, high) {
|
|
2190
2484
|
this.low = low, this.normal = normal, this.medium = medium, this.high = high;
|
|
2191
2485
|
}
|
|
2192
|
-
|
|
2486
|
+
get(contrastLevel) {
|
|
2193
2487
|
return contrastLevel <= -1 ? this.low : contrastLevel < 0 ? lerp(this.low, this.normal, (contrastLevel - -1) / 1) : contrastLevel < .5 ? lerp(this.normal, this.medium, (contrastLevel - 0) / .5) : contrastLevel < 1 ? lerp(this.medium, this.high, (contrastLevel - .5) / .5) : this.high;
|
|
2194
2488
|
}
|
|
2195
2489
|
}
|
|
2196
2490
|
class ToneDeltaPair {
|
|
2197
|
-
constructor(roleA, roleB, delta, polarity, stayTogether) {
|
|
2198
|
-
this.roleA = roleA, this.roleB = roleB, this.delta = delta, this.polarity = polarity, this.stayTogether = stayTogether;
|
|
2491
|
+
constructor(roleA, roleB, delta, polarity, stayTogether, constraint) {
|
|
2492
|
+
this.roleA = roleA, this.roleB = roleB, this.delta = delta, this.polarity = polarity, this.stayTogether = stayTogether, this.constraint = constraint, this.constraint = constraint ?? "exact";
|
|
2199
2493
|
}
|
|
2200
2494
|
}
|
|
2495
|
+
var Variant;
|
|
2201
2496
|
function isFidelity(scheme) {
|
|
2202
2497
|
return scheme.variant === Variant.FIDELITY || scheme.variant === Variant.CONTENT;
|
|
2203
2498
|
}
|
|
@@ -2219,615 +2514,1839 @@
|
|
|
2219
2514
|
}
|
|
2220
2515
|
return answer;
|
|
2221
2516
|
}
|
|
2222
|
-
function
|
|
2223
|
-
|
|
2517
|
+
!function (Variant) {
|
|
2518
|
+
Variant[Variant.MONOCHROME = 0] = "MONOCHROME", Variant[Variant.NEUTRAL = 1] = "NEUTRAL", Variant[Variant.TONAL_SPOT = 2] = "TONAL_SPOT", Variant[Variant.VIBRANT = 3] = "VIBRANT", Variant[Variant.EXPRESSIVE = 4] = "EXPRESSIVE", Variant[Variant.FIDELITY = 5] = "FIDELITY", Variant[Variant.CONTENT = 6] = "CONTENT", Variant[Variant.RAINBOW = 7] = "RAINBOW", Variant[Variant.FRUIT_SALAD = 8] = "FRUIT_SALAD";
|
|
2519
|
+
}(Variant || (Variant = {}));
|
|
2520
|
+
class ColorSpecDelegateImpl2021 {
|
|
2521
|
+
primaryPaletteKeyColor() {
|
|
2522
|
+
return DynamicColor.fromPalette({
|
|
2523
|
+
name: "primary_palette_key_color",
|
|
2524
|
+
palette: s => s.primaryPalette,
|
|
2525
|
+
tone: s => s.primaryPalette.keyColor.tone
|
|
2526
|
+
});
|
|
2527
|
+
}
|
|
2528
|
+
secondaryPaletteKeyColor() {
|
|
2529
|
+
return DynamicColor.fromPalette({
|
|
2530
|
+
name: "secondary_palette_key_color",
|
|
2531
|
+
palette: s => s.secondaryPalette,
|
|
2532
|
+
tone: s => s.secondaryPalette.keyColor.tone
|
|
2533
|
+
});
|
|
2534
|
+
}
|
|
2535
|
+
tertiaryPaletteKeyColor() {
|
|
2536
|
+
return DynamicColor.fromPalette({
|
|
2537
|
+
name: "tertiary_palette_key_color",
|
|
2538
|
+
palette: s => s.tertiaryPalette,
|
|
2539
|
+
tone: s => s.tertiaryPalette.keyColor.tone
|
|
2540
|
+
});
|
|
2541
|
+
}
|
|
2542
|
+
neutralPaletteKeyColor() {
|
|
2543
|
+
return DynamicColor.fromPalette({
|
|
2544
|
+
name: "neutral_palette_key_color",
|
|
2545
|
+
palette: s => s.neutralPalette,
|
|
2546
|
+
tone: s => s.neutralPalette.keyColor.tone
|
|
2547
|
+
});
|
|
2548
|
+
}
|
|
2549
|
+
neutralVariantPaletteKeyColor() {
|
|
2550
|
+
return DynamicColor.fromPalette({
|
|
2551
|
+
name: "neutral_variant_palette_key_color",
|
|
2552
|
+
palette: s => s.neutralVariantPalette,
|
|
2553
|
+
tone: s => s.neutralVariantPalette.keyColor.tone
|
|
2554
|
+
});
|
|
2555
|
+
}
|
|
2556
|
+
errorPaletteKeyColor() {
|
|
2557
|
+
return DynamicColor.fromPalette({
|
|
2558
|
+
name: "error_palette_key_color",
|
|
2559
|
+
palette: s => s.errorPalette,
|
|
2560
|
+
tone: s => s.errorPalette.keyColor.tone
|
|
2561
|
+
});
|
|
2562
|
+
}
|
|
2563
|
+
background() {
|
|
2564
|
+
return DynamicColor.fromPalette({
|
|
2565
|
+
name: "background",
|
|
2566
|
+
palette: s => s.neutralPalette,
|
|
2567
|
+
tone: s => s.isDark ? 6 : 98,
|
|
2568
|
+
isBackground: !0
|
|
2569
|
+
});
|
|
2570
|
+
}
|
|
2571
|
+
onBackground() {
|
|
2572
|
+
return DynamicColor.fromPalette({
|
|
2573
|
+
name: "on_background",
|
|
2574
|
+
palette: s => s.neutralPalette,
|
|
2575
|
+
tone: s => s.isDark ? 90 : 10,
|
|
2576
|
+
background: s => this.background(),
|
|
2577
|
+
contrastCurve: s => new ContrastCurve(3, 3, 4.5, 7)
|
|
2578
|
+
});
|
|
2579
|
+
}
|
|
2580
|
+
surface() {
|
|
2581
|
+
return DynamicColor.fromPalette({
|
|
2582
|
+
name: "surface",
|
|
2583
|
+
palette: s => s.neutralPalette,
|
|
2584
|
+
tone: s => s.isDark ? 6 : 98,
|
|
2585
|
+
isBackground: !0
|
|
2586
|
+
});
|
|
2587
|
+
}
|
|
2588
|
+
surfaceDim() {
|
|
2589
|
+
return DynamicColor.fromPalette({
|
|
2590
|
+
name: "surface_dim",
|
|
2591
|
+
palette: s => s.neutralPalette,
|
|
2592
|
+
tone: s => s.isDark ? 6 : new ContrastCurve(87, 87, 80, 75).get(s.contrastLevel),
|
|
2593
|
+
isBackground: !0
|
|
2594
|
+
});
|
|
2595
|
+
}
|
|
2596
|
+
surfaceBright() {
|
|
2597
|
+
return DynamicColor.fromPalette({
|
|
2598
|
+
name: "surface_bright",
|
|
2599
|
+
palette: s => s.neutralPalette,
|
|
2600
|
+
tone: s => s.isDark ? new ContrastCurve(24, 24, 29, 34).get(s.contrastLevel) : 98,
|
|
2601
|
+
isBackground: !0
|
|
2602
|
+
});
|
|
2603
|
+
}
|
|
2604
|
+
surfaceContainerLowest() {
|
|
2605
|
+
return DynamicColor.fromPalette({
|
|
2606
|
+
name: "surface_container_lowest",
|
|
2607
|
+
palette: s => s.neutralPalette,
|
|
2608
|
+
tone: s => s.isDark ? new ContrastCurve(4, 4, 2, 0).get(s.contrastLevel) : 100,
|
|
2609
|
+
isBackground: !0
|
|
2610
|
+
});
|
|
2611
|
+
}
|
|
2612
|
+
surfaceContainerLow() {
|
|
2613
|
+
return DynamicColor.fromPalette({
|
|
2614
|
+
name: "surface_container_low",
|
|
2615
|
+
palette: s => s.neutralPalette,
|
|
2616
|
+
tone: s => s.isDark ? new ContrastCurve(10, 10, 11, 12).get(s.contrastLevel) : new ContrastCurve(96, 96, 96, 95).get(s.contrastLevel),
|
|
2617
|
+
isBackground: !0
|
|
2618
|
+
});
|
|
2619
|
+
}
|
|
2620
|
+
surfaceContainer() {
|
|
2621
|
+
return DynamicColor.fromPalette({
|
|
2622
|
+
name: "surface_container",
|
|
2623
|
+
palette: s => s.neutralPalette,
|
|
2624
|
+
tone: s => s.isDark ? new ContrastCurve(12, 12, 16, 20).get(s.contrastLevel) : new ContrastCurve(94, 94, 92, 90).get(s.contrastLevel),
|
|
2625
|
+
isBackground: !0
|
|
2626
|
+
});
|
|
2627
|
+
}
|
|
2628
|
+
surfaceContainerHigh() {
|
|
2629
|
+
return DynamicColor.fromPalette({
|
|
2630
|
+
name: "surface_container_high",
|
|
2631
|
+
palette: s => s.neutralPalette,
|
|
2632
|
+
tone: s => s.isDark ? new ContrastCurve(17, 17, 21, 25).get(s.contrastLevel) : new ContrastCurve(92, 92, 88, 85).get(s.contrastLevel),
|
|
2633
|
+
isBackground: !0
|
|
2634
|
+
});
|
|
2635
|
+
}
|
|
2636
|
+
surfaceContainerHighest() {
|
|
2637
|
+
return DynamicColor.fromPalette({
|
|
2638
|
+
name: "surface_container_highest",
|
|
2639
|
+
palette: s => s.neutralPalette,
|
|
2640
|
+
tone: s => s.isDark ? new ContrastCurve(22, 22, 26, 30).get(s.contrastLevel) : new ContrastCurve(90, 90, 84, 80).get(s.contrastLevel),
|
|
2641
|
+
isBackground: !0
|
|
2642
|
+
});
|
|
2643
|
+
}
|
|
2644
|
+
onSurface() {
|
|
2645
|
+
return DynamicColor.fromPalette({
|
|
2646
|
+
name: "on_surface",
|
|
2647
|
+
palette: s => s.neutralPalette,
|
|
2648
|
+
tone: s => s.isDark ? 90 : 10,
|
|
2649
|
+
background: s => this.highestSurface(s),
|
|
2650
|
+
contrastCurve: s => new ContrastCurve(4.5, 7, 11, 21)
|
|
2651
|
+
});
|
|
2652
|
+
}
|
|
2653
|
+
surfaceVariant() {
|
|
2654
|
+
return DynamicColor.fromPalette({
|
|
2655
|
+
name: "surface_variant",
|
|
2656
|
+
palette: s => s.neutralVariantPalette,
|
|
2657
|
+
tone: s => s.isDark ? 30 : 90,
|
|
2658
|
+
isBackground: !0
|
|
2659
|
+
});
|
|
2660
|
+
}
|
|
2661
|
+
onSurfaceVariant() {
|
|
2662
|
+
return DynamicColor.fromPalette({
|
|
2663
|
+
name: "on_surface_variant",
|
|
2664
|
+
palette: s => s.neutralVariantPalette,
|
|
2665
|
+
tone: s => s.isDark ? 80 : 30,
|
|
2666
|
+
background: s => this.highestSurface(s),
|
|
2667
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 11)
|
|
2668
|
+
});
|
|
2669
|
+
}
|
|
2670
|
+
inverseSurface() {
|
|
2671
|
+
return DynamicColor.fromPalette({
|
|
2672
|
+
name: "inverse_surface",
|
|
2673
|
+
palette: s => s.neutralPalette,
|
|
2674
|
+
tone: s => s.isDark ? 90 : 20,
|
|
2675
|
+
isBackground: !0
|
|
2676
|
+
});
|
|
2677
|
+
}
|
|
2678
|
+
inverseOnSurface() {
|
|
2679
|
+
return DynamicColor.fromPalette({
|
|
2680
|
+
name: "inverse_on_surface",
|
|
2681
|
+
palette: s => s.neutralPalette,
|
|
2682
|
+
tone: s => s.isDark ? 20 : 95,
|
|
2683
|
+
background: s => this.inverseSurface(),
|
|
2684
|
+
contrastCurve: s => new ContrastCurve(4.5, 7, 11, 21)
|
|
2685
|
+
});
|
|
2686
|
+
}
|
|
2687
|
+
outline() {
|
|
2688
|
+
return DynamicColor.fromPalette({
|
|
2689
|
+
name: "outline",
|
|
2690
|
+
palette: s => s.neutralVariantPalette,
|
|
2691
|
+
tone: s => s.isDark ? 60 : 50,
|
|
2692
|
+
background: s => this.highestSurface(s),
|
|
2693
|
+
contrastCurve: s => new ContrastCurve(1.5, 3, 4.5, 7)
|
|
2694
|
+
});
|
|
2695
|
+
}
|
|
2696
|
+
outlineVariant() {
|
|
2697
|
+
return DynamicColor.fromPalette({
|
|
2698
|
+
name: "outline_variant",
|
|
2699
|
+
palette: s => s.neutralVariantPalette,
|
|
2700
|
+
tone: s => s.isDark ? 30 : 80,
|
|
2701
|
+
background: s => this.highestSurface(s),
|
|
2702
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5)
|
|
2703
|
+
});
|
|
2704
|
+
}
|
|
2705
|
+
shadow() {
|
|
2706
|
+
return DynamicColor.fromPalette({
|
|
2707
|
+
name: "shadow",
|
|
2708
|
+
palette: s => s.neutralPalette,
|
|
2709
|
+
tone: s => 0
|
|
2710
|
+
});
|
|
2711
|
+
}
|
|
2712
|
+
scrim() {
|
|
2713
|
+
return DynamicColor.fromPalette({
|
|
2714
|
+
name: "scrim",
|
|
2715
|
+
palette: s => s.neutralPalette,
|
|
2716
|
+
tone: s => 0
|
|
2717
|
+
});
|
|
2718
|
+
}
|
|
2719
|
+
surfaceTint() {
|
|
2720
|
+
return DynamicColor.fromPalette({
|
|
2721
|
+
name: "surface_tint",
|
|
2722
|
+
palette: s => s.primaryPalette,
|
|
2723
|
+
tone: s => s.isDark ? 80 : 40,
|
|
2724
|
+
isBackground: !0
|
|
2725
|
+
});
|
|
2726
|
+
}
|
|
2727
|
+
primary() {
|
|
2728
|
+
return DynamicColor.fromPalette({
|
|
2729
|
+
name: "primary",
|
|
2730
|
+
palette: s => s.primaryPalette,
|
|
2731
|
+
tone: s => isMonochrome(s) ? s.isDark ? 100 : 0 : s.isDark ? 80 : 40,
|
|
2732
|
+
isBackground: !0,
|
|
2733
|
+
background: s => this.highestSurface(s),
|
|
2734
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 7),
|
|
2735
|
+
toneDeltaPair: s => new ToneDeltaPair(this.primaryContainer(), this.primary(), 10, "nearer", !1)
|
|
2736
|
+
});
|
|
2737
|
+
}
|
|
2738
|
+
primaryDim() {}
|
|
2739
|
+
onPrimary() {
|
|
2740
|
+
return DynamicColor.fromPalette({
|
|
2741
|
+
name: "on_primary",
|
|
2742
|
+
palette: s => s.primaryPalette,
|
|
2743
|
+
tone: s => isMonochrome(s) ? s.isDark ? 10 : 90 : s.isDark ? 20 : 100,
|
|
2744
|
+
background: s => this.primary(),
|
|
2745
|
+
contrastCurve: s => new ContrastCurve(4.5, 7, 11, 21)
|
|
2746
|
+
});
|
|
2747
|
+
}
|
|
2748
|
+
primaryContainer() {
|
|
2749
|
+
return DynamicColor.fromPalette({
|
|
2750
|
+
name: "primary_container",
|
|
2751
|
+
palette: s => s.primaryPalette,
|
|
2752
|
+
tone: s => isFidelity(s) ? s.sourceColorHct.tone : isMonochrome(s) ? s.isDark ? 85 : 25 : s.isDark ? 30 : 90,
|
|
2753
|
+
isBackground: !0,
|
|
2754
|
+
background: s => this.highestSurface(s),
|
|
2755
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
2756
|
+
toneDeltaPair: s => new ToneDeltaPair(this.primaryContainer(), this.primary(), 10, "nearer", !1)
|
|
2757
|
+
});
|
|
2758
|
+
}
|
|
2759
|
+
onPrimaryContainer() {
|
|
2760
|
+
return DynamicColor.fromPalette({
|
|
2761
|
+
name: "on_primary_container",
|
|
2762
|
+
palette: s => s.primaryPalette,
|
|
2763
|
+
tone: s => isFidelity(s) ? DynamicColor.foregroundTone(this.primaryContainer().tone(s), 4.5) : isMonochrome(s) ? s.isDark ? 0 : 100 : s.isDark ? 90 : 30,
|
|
2764
|
+
background: s => this.primaryContainer(),
|
|
2765
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 11)
|
|
2766
|
+
});
|
|
2767
|
+
}
|
|
2768
|
+
inversePrimary() {
|
|
2769
|
+
return DynamicColor.fromPalette({
|
|
2770
|
+
name: "inverse_primary",
|
|
2771
|
+
palette: s => s.primaryPalette,
|
|
2772
|
+
tone: s => s.isDark ? 40 : 80,
|
|
2773
|
+
background: s => this.inverseSurface(),
|
|
2774
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 7)
|
|
2775
|
+
});
|
|
2776
|
+
}
|
|
2777
|
+
secondary() {
|
|
2778
|
+
return DynamicColor.fromPalette({
|
|
2779
|
+
name: "secondary",
|
|
2780
|
+
palette: s => s.secondaryPalette,
|
|
2781
|
+
tone: s => s.isDark ? 80 : 40,
|
|
2782
|
+
isBackground: !0,
|
|
2783
|
+
background: s => this.highestSurface(s),
|
|
2784
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 7),
|
|
2785
|
+
toneDeltaPair: s => new ToneDeltaPair(this.secondaryContainer(), this.secondary(), 10, "nearer", !1)
|
|
2786
|
+
});
|
|
2787
|
+
}
|
|
2788
|
+
secondaryDim() {}
|
|
2789
|
+
onSecondary() {
|
|
2790
|
+
return DynamicColor.fromPalette({
|
|
2791
|
+
name: "on_secondary",
|
|
2792
|
+
palette: s => s.secondaryPalette,
|
|
2793
|
+
tone: s => isMonochrome(s) ? s.isDark ? 10 : 100 : s.isDark ? 20 : 100,
|
|
2794
|
+
background: s => this.secondary(),
|
|
2795
|
+
contrastCurve: s => new ContrastCurve(4.5, 7, 11, 21)
|
|
2796
|
+
});
|
|
2797
|
+
}
|
|
2798
|
+
secondaryContainer() {
|
|
2799
|
+
return DynamicColor.fromPalette({
|
|
2800
|
+
name: "secondary_container",
|
|
2801
|
+
palette: s => s.secondaryPalette,
|
|
2802
|
+
tone: s => {
|
|
2803
|
+
const initialTone = s.isDark ? 30 : 90;
|
|
2804
|
+
return isMonochrome(s) ? s.isDark ? 30 : 85 : isFidelity(s) ? findDesiredChromaByTone(s.secondaryPalette.hue, s.secondaryPalette.chroma, initialTone, !s.isDark) : initialTone;
|
|
2805
|
+
},
|
|
2806
|
+
isBackground: !0,
|
|
2807
|
+
background: s => this.highestSurface(s),
|
|
2808
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
2809
|
+
toneDeltaPair: s => new ToneDeltaPair(this.secondaryContainer(), this.secondary(), 10, "nearer", !1)
|
|
2810
|
+
});
|
|
2811
|
+
}
|
|
2812
|
+
onSecondaryContainer() {
|
|
2813
|
+
return DynamicColor.fromPalette({
|
|
2814
|
+
name: "on_secondary_container",
|
|
2815
|
+
palette: s => s.secondaryPalette,
|
|
2816
|
+
tone: s => isMonochrome(s) ? s.isDark ? 90 : 10 : isFidelity(s) ? DynamicColor.foregroundTone(this.secondaryContainer().tone(s), 4.5) : s.isDark ? 90 : 30,
|
|
2817
|
+
background: s => this.secondaryContainer(),
|
|
2818
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 11)
|
|
2819
|
+
});
|
|
2820
|
+
}
|
|
2821
|
+
tertiary() {
|
|
2822
|
+
return DynamicColor.fromPalette({
|
|
2823
|
+
name: "tertiary",
|
|
2824
|
+
palette: s => s.tertiaryPalette,
|
|
2825
|
+
tone: s => isMonochrome(s) ? s.isDark ? 90 : 25 : s.isDark ? 80 : 40,
|
|
2826
|
+
isBackground: !0,
|
|
2827
|
+
background: s => this.highestSurface(s),
|
|
2828
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 7),
|
|
2829
|
+
toneDeltaPair: s => new ToneDeltaPair(this.tertiaryContainer(), this.tertiary(), 10, "nearer", !1)
|
|
2830
|
+
});
|
|
2831
|
+
}
|
|
2832
|
+
tertiaryDim() {}
|
|
2833
|
+
onTertiary() {
|
|
2834
|
+
return DynamicColor.fromPalette({
|
|
2835
|
+
name: "on_tertiary",
|
|
2836
|
+
palette: s => s.tertiaryPalette,
|
|
2837
|
+
tone: s => isMonochrome(s) ? s.isDark ? 10 : 90 : s.isDark ? 20 : 100,
|
|
2838
|
+
background: s => this.tertiary(),
|
|
2839
|
+
contrastCurve: s => new ContrastCurve(4.5, 7, 11, 21)
|
|
2840
|
+
});
|
|
2841
|
+
}
|
|
2842
|
+
tertiaryContainer() {
|
|
2843
|
+
return DynamicColor.fromPalette({
|
|
2844
|
+
name: "tertiary_container",
|
|
2845
|
+
palette: s => s.tertiaryPalette,
|
|
2846
|
+
tone: s => {
|
|
2847
|
+
if (isMonochrome(s)) return s.isDark ? 60 : 49;
|
|
2848
|
+
if (!isFidelity(s)) return s.isDark ? 30 : 90;
|
|
2849
|
+
const proposedHct = s.tertiaryPalette.getHct(s.sourceColorHct.tone);
|
|
2850
|
+
return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
|
|
2851
|
+
},
|
|
2852
|
+
isBackground: !0,
|
|
2853
|
+
background: s => this.highestSurface(s),
|
|
2854
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
2855
|
+
toneDeltaPair: s => new ToneDeltaPair(this.tertiaryContainer(), this.tertiary(), 10, "nearer", !1)
|
|
2856
|
+
});
|
|
2857
|
+
}
|
|
2858
|
+
onTertiaryContainer() {
|
|
2859
|
+
return DynamicColor.fromPalette({
|
|
2860
|
+
name: "on_tertiary_container",
|
|
2861
|
+
palette: s => s.tertiaryPalette,
|
|
2862
|
+
tone: s => isMonochrome(s) ? s.isDark ? 0 : 100 : isFidelity(s) ? DynamicColor.foregroundTone(this.tertiaryContainer().tone(s), 4.5) : s.isDark ? 90 : 30,
|
|
2863
|
+
background: s => this.tertiaryContainer(),
|
|
2864
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 11)
|
|
2865
|
+
});
|
|
2866
|
+
}
|
|
2867
|
+
error() {
|
|
2868
|
+
return DynamicColor.fromPalette({
|
|
2869
|
+
name: "error",
|
|
2870
|
+
palette: s => s.errorPalette,
|
|
2871
|
+
tone: s => s.isDark ? 80 : 40,
|
|
2872
|
+
isBackground: !0,
|
|
2873
|
+
background: s => this.highestSurface(s),
|
|
2874
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 7),
|
|
2875
|
+
toneDeltaPair: s => new ToneDeltaPair(this.errorContainer(), this.error(), 10, "nearer", !1)
|
|
2876
|
+
});
|
|
2877
|
+
}
|
|
2878
|
+
errorDim() {}
|
|
2879
|
+
onError() {
|
|
2880
|
+
return DynamicColor.fromPalette({
|
|
2881
|
+
name: "on_error",
|
|
2882
|
+
palette: s => s.errorPalette,
|
|
2883
|
+
tone: s => s.isDark ? 20 : 100,
|
|
2884
|
+
background: s => this.error(),
|
|
2885
|
+
contrastCurve: s => new ContrastCurve(4.5, 7, 11, 21)
|
|
2886
|
+
});
|
|
2887
|
+
}
|
|
2888
|
+
errorContainer() {
|
|
2889
|
+
return DynamicColor.fromPalette({
|
|
2890
|
+
name: "error_container",
|
|
2891
|
+
palette: s => s.errorPalette,
|
|
2892
|
+
tone: s => s.isDark ? 30 : 90,
|
|
2893
|
+
isBackground: !0,
|
|
2894
|
+
background: s => this.highestSurface(s),
|
|
2895
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
2896
|
+
toneDeltaPair: s => new ToneDeltaPair(this.errorContainer(), this.error(), 10, "nearer", !1)
|
|
2897
|
+
});
|
|
2898
|
+
}
|
|
2899
|
+
onErrorContainer() {
|
|
2900
|
+
return DynamicColor.fromPalette({
|
|
2901
|
+
name: "on_error_container",
|
|
2902
|
+
palette: s => s.errorPalette,
|
|
2903
|
+
tone: s => isMonochrome(s) ? s.isDark ? 90 : 10 : s.isDark ? 90 : 30,
|
|
2904
|
+
background: s => this.errorContainer(),
|
|
2905
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 11)
|
|
2906
|
+
});
|
|
2907
|
+
}
|
|
2908
|
+
primaryFixed() {
|
|
2909
|
+
return DynamicColor.fromPalette({
|
|
2910
|
+
name: "primary_fixed",
|
|
2911
|
+
palette: s => s.primaryPalette,
|
|
2912
|
+
tone: s => isMonochrome(s) ? 40 : 90,
|
|
2913
|
+
isBackground: !0,
|
|
2914
|
+
background: s => this.highestSurface(s),
|
|
2915
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
2916
|
+
toneDeltaPair: s => new ToneDeltaPair(this.primaryFixed(), this.primaryFixedDim(), 10, "lighter", !0)
|
|
2917
|
+
});
|
|
2918
|
+
}
|
|
2919
|
+
primaryFixedDim() {
|
|
2920
|
+
return DynamicColor.fromPalette({
|
|
2921
|
+
name: "primary_fixed_dim",
|
|
2922
|
+
palette: s => s.primaryPalette,
|
|
2923
|
+
tone: s => isMonochrome(s) ? 30 : 80,
|
|
2924
|
+
isBackground: !0,
|
|
2925
|
+
background: s => this.highestSurface(s),
|
|
2926
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
2927
|
+
toneDeltaPair: s => new ToneDeltaPair(this.primaryFixed(), this.primaryFixedDim(), 10, "lighter", !0)
|
|
2928
|
+
});
|
|
2929
|
+
}
|
|
2930
|
+
onPrimaryFixed() {
|
|
2931
|
+
return DynamicColor.fromPalette({
|
|
2932
|
+
name: "on_primary_fixed",
|
|
2933
|
+
palette: s => s.primaryPalette,
|
|
2934
|
+
tone: s => isMonochrome(s) ? 100 : 10,
|
|
2935
|
+
background: s => this.primaryFixedDim(),
|
|
2936
|
+
secondBackground: s => this.primaryFixed(),
|
|
2937
|
+
contrastCurve: s => new ContrastCurve(4.5, 7, 11, 21)
|
|
2938
|
+
});
|
|
2939
|
+
}
|
|
2940
|
+
onPrimaryFixedVariant() {
|
|
2941
|
+
return DynamicColor.fromPalette({
|
|
2942
|
+
name: "on_primary_fixed_variant",
|
|
2943
|
+
palette: s => s.primaryPalette,
|
|
2944
|
+
tone: s => isMonochrome(s) ? 90 : 30,
|
|
2945
|
+
background: s => this.primaryFixedDim(),
|
|
2946
|
+
secondBackground: s => this.primaryFixed(),
|
|
2947
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 11)
|
|
2948
|
+
});
|
|
2949
|
+
}
|
|
2950
|
+
secondaryFixed() {
|
|
2951
|
+
return DynamicColor.fromPalette({
|
|
2952
|
+
name: "secondary_fixed",
|
|
2953
|
+
palette: s => s.secondaryPalette,
|
|
2954
|
+
tone: s => isMonochrome(s) ? 80 : 90,
|
|
2955
|
+
isBackground: !0,
|
|
2956
|
+
background: s => this.highestSurface(s),
|
|
2957
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
2958
|
+
toneDeltaPair: s => new ToneDeltaPair(this.secondaryFixed(), this.secondaryFixedDim(), 10, "lighter", !0)
|
|
2959
|
+
});
|
|
2960
|
+
}
|
|
2961
|
+
secondaryFixedDim() {
|
|
2962
|
+
return DynamicColor.fromPalette({
|
|
2963
|
+
name: "secondary_fixed_dim",
|
|
2964
|
+
palette: s => s.secondaryPalette,
|
|
2965
|
+
tone: s => isMonochrome(s) ? 70 : 80,
|
|
2966
|
+
isBackground: !0,
|
|
2967
|
+
background: s => this.highestSurface(s),
|
|
2968
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
2969
|
+
toneDeltaPair: s => new ToneDeltaPair(this.secondaryFixed(), this.secondaryFixedDim(), 10, "lighter", !0)
|
|
2970
|
+
});
|
|
2971
|
+
}
|
|
2972
|
+
onSecondaryFixed() {
|
|
2973
|
+
return DynamicColor.fromPalette({
|
|
2974
|
+
name: "on_secondary_fixed",
|
|
2975
|
+
palette: s => s.secondaryPalette,
|
|
2976
|
+
tone: s => 10,
|
|
2977
|
+
background: s => this.secondaryFixedDim(),
|
|
2978
|
+
secondBackground: s => this.secondaryFixed(),
|
|
2979
|
+
contrastCurve: s => new ContrastCurve(4.5, 7, 11, 21)
|
|
2980
|
+
});
|
|
2981
|
+
}
|
|
2982
|
+
onSecondaryFixedVariant() {
|
|
2983
|
+
return DynamicColor.fromPalette({
|
|
2984
|
+
name: "on_secondary_fixed_variant",
|
|
2985
|
+
palette: s => s.secondaryPalette,
|
|
2986
|
+
tone: s => isMonochrome(s) ? 25 : 30,
|
|
2987
|
+
background: s => this.secondaryFixedDim(),
|
|
2988
|
+
secondBackground: s => this.secondaryFixed(),
|
|
2989
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 11)
|
|
2990
|
+
});
|
|
2991
|
+
}
|
|
2992
|
+
tertiaryFixed() {
|
|
2993
|
+
return DynamicColor.fromPalette({
|
|
2994
|
+
name: "tertiary_fixed",
|
|
2995
|
+
palette: s => s.tertiaryPalette,
|
|
2996
|
+
tone: s => isMonochrome(s) ? 40 : 90,
|
|
2997
|
+
isBackground: !0,
|
|
2998
|
+
background: s => this.highestSurface(s),
|
|
2999
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
3000
|
+
toneDeltaPair: s => new ToneDeltaPair(this.tertiaryFixed(), this.tertiaryFixedDim(), 10, "lighter", !0)
|
|
3001
|
+
});
|
|
3002
|
+
}
|
|
3003
|
+
tertiaryFixedDim() {
|
|
3004
|
+
return DynamicColor.fromPalette({
|
|
3005
|
+
name: "tertiary_fixed_dim",
|
|
3006
|
+
palette: s => s.tertiaryPalette,
|
|
3007
|
+
tone: s => isMonochrome(s) ? 30 : 80,
|
|
3008
|
+
isBackground: !0,
|
|
3009
|
+
background: s => this.highestSurface(s),
|
|
3010
|
+
contrastCurve: s => new ContrastCurve(1, 1, 3, 4.5),
|
|
3011
|
+
toneDeltaPair: s => new ToneDeltaPair(this.tertiaryFixed(), this.tertiaryFixedDim(), 10, "lighter", !0)
|
|
3012
|
+
});
|
|
3013
|
+
}
|
|
3014
|
+
onTertiaryFixed() {
|
|
3015
|
+
return DynamicColor.fromPalette({
|
|
3016
|
+
name: "on_tertiary_fixed",
|
|
3017
|
+
palette: s => s.tertiaryPalette,
|
|
3018
|
+
tone: s => isMonochrome(s) ? 100 : 10,
|
|
3019
|
+
background: s => this.tertiaryFixedDim(),
|
|
3020
|
+
secondBackground: s => this.tertiaryFixed(),
|
|
3021
|
+
contrastCurve: s => new ContrastCurve(4.5, 7, 11, 21)
|
|
3022
|
+
});
|
|
3023
|
+
}
|
|
3024
|
+
onTertiaryFixedVariant() {
|
|
3025
|
+
return DynamicColor.fromPalette({
|
|
3026
|
+
name: "on_tertiary_fixed_variant",
|
|
3027
|
+
palette: s => s.tertiaryPalette,
|
|
3028
|
+
tone: s => isMonochrome(s) ? 90 : 30,
|
|
3029
|
+
background: s => this.tertiaryFixedDim(),
|
|
3030
|
+
secondBackground: s => this.tertiaryFixed(),
|
|
3031
|
+
contrastCurve: s => new ContrastCurve(3, 4.5, 7, 11)
|
|
3032
|
+
});
|
|
3033
|
+
}
|
|
3034
|
+
highestSurface(s) {
|
|
3035
|
+
return s.isDark ? this.surfaceBright() : this.surfaceDim();
|
|
3036
|
+
}
|
|
3037
|
+
}
|
|
3038
|
+
function tMaxC(palette, lowerBound, upperBound, chromaMultiplier) {
|
|
3039
|
+
if (lowerBound === void 0) {
|
|
3040
|
+
lowerBound = 0;
|
|
3041
|
+
}
|
|
3042
|
+
if (upperBound === void 0) {
|
|
3043
|
+
upperBound = 100;
|
|
3044
|
+
}
|
|
3045
|
+
if (chromaMultiplier === void 0) {
|
|
3046
|
+
chromaMultiplier = 1;
|
|
3047
|
+
}
|
|
3048
|
+
return clampDouble(lowerBound, upperBound, findBestToneForChroma(palette.hue, palette.chroma * chromaMultiplier, 100, !0));
|
|
3049
|
+
}
|
|
3050
|
+
function tMinC(palette, lowerBound, upperBound) {
|
|
3051
|
+
if (lowerBound === void 0) {
|
|
3052
|
+
lowerBound = 0;
|
|
3053
|
+
}
|
|
3054
|
+
if (upperBound === void 0) {
|
|
3055
|
+
upperBound = 100;
|
|
3056
|
+
}
|
|
3057
|
+
return clampDouble(lowerBound, upperBound, findBestToneForChroma(palette.hue, palette.chroma, 0, !1));
|
|
3058
|
+
}
|
|
3059
|
+
function findBestToneForChroma(hue, chroma, tone, byDecreasingTone) {
|
|
3060
|
+
let answer = tone,
|
|
3061
|
+
bestCandidate = Hct.from(hue, chroma, answer);
|
|
3062
|
+
for (; bestCandidate.chroma < chroma && !(tone < 0 || tone > 100);) {
|
|
3063
|
+
tone += byDecreasingTone ? -1 : 1;
|
|
3064
|
+
const newCandidate = Hct.from(hue, chroma, tone);
|
|
3065
|
+
bestCandidate.chroma < newCandidate.chroma && (bestCandidate = newCandidate, answer = tone);
|
|
3066
|
+
}
|
|
3067
|
+
return answer;
|
|
2224
3068
|
}
|
|
2225
|
-
function
|
|
2226
|
-
|
|
2227
|
-
|
|
3069
|
+
function getCurve(defaultContrast) {
|
|
3070
|
+
return 1.5 === defaultContrast ? new ContrastCurve(1.5, 1.5, 3, 5.5) : 3 === defaultContrast ? new ContrastCurve(3, 3, 4.5, 7) : 4.5 === defaultContrast ? new ContrastCurve(4.5, 4.5, 7, 11) : 6 === defaultContrast ? new ContrastCurve(6, 6, 7, 11) : 7 === defaultContrast ? new ContrastCurve(7, 7, 11, 21) : 9 === defaultContrast ? new ContrastCurve(9, 9, 11, 21) : 11 === defaultContrast ? new ContrastCurve(11, 11, 21, 21) : 21 === defaultContrast ? new ContrastCurve(21, 21, 21, 21) : new ContrastCurve(defaultContrast, defaultContrast, 7, 21);
|
|
3071
|
+
}
|
|
3072
|
+
class ColorSpecDelegateImpl2025 extends ColorSpecDelegateImpl2021 {
|
|
3073
|
+
surface() {
|
|
3074
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3075
|
+
name: "surface",
|
|
3076
|
+
palette: s => s.neutralPalette,
|
|
3077
|
+
tone: s => (super.surface().tone(s), "phone" === s.platform ? s.isDark ? 4 : Hct.isYellow(s.neutralPalette.hue) ? 99 : s.variant === Variant.VIBRANT ? 97 : 98 : 0),
|
|
3078
|
+
isBackground: !0
|
|
3079
|
+
});
|
|
3080
|
+
return extendSpecVersion(super.surface(), "2025", color2025);
|
|
3081
|
+
}
|
|
3082
|
+
surfaceDim() {
|
|
3083
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3084
|
+
name: "surface_dim",
|
|
3085
|
+
palette: s => s.neutralPalette,
|
|
3086
|
+
tone: s => s.isDark ? 4 : Hct.isYellow(s.neutralPalette.hue) ? 90 : s.variant === Variant.VIBRANT ? 85 : 87,
|
|
3087
|
+
isBackground: !0,
|
|
3088
|
+
chromaMultiplier: s => {
|
|
3089
|
+
if (!s.isDark) {
|
|
3090
|
+
if (s.variant === Variant.NEUTRAL) return 2.5;
|
|
3091
|
+
if (s.variant === Variant.TONAL_SPOT) return 1.7;
|
|
3092
|
+
if (s.variant === Variant.EXPRESSIVE) return Hct.isYellow(s.neutralPalette.hue) ? 2.7 : 1.75;
|
|
3093
|
+
if (s.variant === Variant.VIBRANT) return 1.36;
|
|
3094
|
+
}
|
|
3095
|
+
return 1;
|
|
3096
|
+
}
|
|
3097
|
+
});
|
|
3098
|
+
return extendSpecVersion(super.surfaceDim(), "2025", color2025);
|
|
3099
|
+
}
|
|
3100
|
+
surfaceBright() {
|
|
3101
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3102
|
+
name: "surface_bright",
|
|
3103
|
+
palette: s => s.neutralPalette,
|
|
3104
|
+
tone: s => s.isDark ? 18 : Hct.isYellow(s.neutralPalette.hue) ? 99 : s.variant === Variant.VIBRANT ? 97 : 98,
|
|
3105
|
+
isBackground: !0,
|
|
3106
|
+
chromaMultiplier: s => {
|
|
3107
|
+
if (s.isDark) {
|
|
3108
|
+
if (s.variant === Variant.NEUTRAL) return 2.5;
|
|
3109
|
+
if (s.variant === Variant.TONAL_SPOT) return 1.7;
|
|
3110
|
+
if (s.variant === Variant.EXPRESSIVE) return Hct.isYellow(s.neutralPalette.hue) ? 2.7 : 1.75;
|
|
3111
|
+
if (s.variant === Variant.VIBRANT) return 1.36;
|
|
3112
|
+
}
|
|
3113
|
+
return 1;
|
|
3114
|
+
}
|
|
3115
|
+
});
|
|
3116
|
+
return extendSpecVersion(super.surfaceBright(), "2025", color2025);
|
|
3117
|
+
}
|
|
3118
|
+
surfaceContainerLowest() {
|
|
3119
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3120
|
+
name: "surface_container_lowest",
|
|
3121
|
+
palette: s => s.neutralPalette,
|
|
3122
|
+
tone: s => s.isDark ? 0 : 100,
|
|
3123
|
+
isBackground: !0
|
|
3124
|
+
});
|
|
3125
|
+
return extendSpecVersion(super.surfaceContainerLowest(), "2025", color2025);
|
|
3126
|
+
}
|
|
3127
|
+
surfaceContainerLow() {
|
|
3128
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3129
|
+
name: "surface_container_low",
|
|
3130
|
+
palette: s => s.neutralPalette,
|
|
3131
|
+
tone: s => "phone" === s.platform ? s.isDark ? 6 : Hct.isYellow(s.neutralPalette.hue) ? 98 : s.variant === Variant.VIBRANT ? 95 : 96 : 15,
|
|
3132
|
+
isBackground: !0,
|
|
3133
|
+
chromaMultiplier: s => {
|
|
3134
|
+
if ("phone" === s.platform) {
|
|
3135
|
+
if (s.variant === Variant.NEUTRAL) return 1.3;
|
|
3136
|
+
if (s.variant === Variant.TONAL_SPOT) return 1.25;
|
|
3137
|
+
if (s.variant === Variant.EXPRESSIVE) return Hct.isYellow(s.neutralPalette.hue) ? 1.3 : 1.15;
|
|
3138
|
+
if (s.variant === Variant.VIBRANT) return 1.08;
|
|
3139
|
+
}
|
|
3140
|
+
return 1;
|
|
3141
|
+
}
|
|
3142
|
+
});
|
|
3143
|
+
return extendSpecVersion(super.surfaceContainerLow(), "2025", color2025);
|
|
3144
|
+
}
|
|
3145
|
+
surfaceContainer() {
|
|
3146
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3147
|
+
name: "surface_container",
|
|
3148
|
+
palette: s => s.neutralPalette,
|
|
3149
|
+
tone: s => "phone" === s.platform ? s.isDark ? 9 : Hct.isYellow(s.neutralPalette.hue) ? 96 : s.variant === Variant.VIBRANT ? 92 : 94 : 20,
|
|
3150
|
+
isBackground: !0,
|
|
3151
|
+
chromaMultiplier: s => {
|
|
3152
|
+
if ("phone" === s.platform) {
|
|
3153
|
+
if (s.variant === Variant.NEUTRAL) return 1.6;
|
|
3154
|
+
if (s.variant === Variant.TONAL_SPOT) return 1.4;
|
|
3155
|
+
if (s.variant === Variant.EXPRESSIVE) return Hct.isYellow(s.neutralPalette.hue) ? 1.6 : 1.3;
|
|
3156
|
+
if (s.variant === Variant.VIBRANT) return 1.15;
|
|
3157
|
+
}
|
|
3158
|
+
return 1;
|
|
3159
|
+
}
|
|
3160
|
+
});
|
|
3161
|
+
return extendSpecVersion(super.surfaceContainer(), "2025", color2025);
|
|
3162
|
+
}
|
|
3163
|
+
surfaceContainerHigh() {
|
|
3164
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3165
|
+
name: "surface_container_high",
|
|
3166
|
+
palette: s => s.neutralPalette,
|
|
3167
|
+
tone: s => "phone" === s.platform ? s.isDark ? 12 : Hct.isYellow(s.neutralPalette.hue) ? 94 : s.variant === Variant.VIBRANT ? 90 : 92 : 25,
|
|
3168
|
+
isBackground: !0,
|
|
3169
|
+
chromaMultiplier: s => {
|
|
3170
|
+
if ("phone" === s.platform) {
|
|
3171
|
+
if (s.variant === Variant.NEUTRAL) return 1.9;
|
|
3172
|
+
if (s.variant === Variant.TONAL_SPOT) return 1.5;
|
|
3173
|
+
if (s.variant === Variant.EXPRESSIVE) return Hct.isYellow(s.neutralPalette.hue) ? 1.95 : 1.45;
|
|
3174
|
+
if (s.variant === Variant.VIBRANT) return 1.22;
|
|
3175
|
+
}
|
|
3176
|
+
return 1;
|
|
3177
|
+
}
|
|
3178
|
+
});
|
|
3179
|
+
return extendSpecVersion(super.surfaceContainerHigh(), "2025", color2025);
|
|
3180
|
+
}
|
|
3181
|
+
surfaceContainerHighest() {
|
|
3182
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3183
|
+
name: "surface_container_highest",
|
|
3184
|
+
palette: s => s.neutralPalette,
|
|
3185
|
+
tone: s => s.isDark ? 15 : Hct.isYellow(s.neutralPalette.hue) ? 92 : s.variant === Variant.VIBRANT ? 88 : 90,
|
|
3186
|
+
isBackground: !0,
|
|
3187
|
+
chromaMultiplier: s => s.variant === Variant.NEUTRAL ? 2.2 : s.variant === Variant.TONAL_SPOT ? 1.7 : s.variant === Variant.EXPRESSIVE ? Hct.isYellow(s.neutralPalette.hue) ? 2.3 : 1.6 : s.variant === Variant.VIBRANT ? 1.29 : 1
|
|
3188
|
+
});
|
|
3189
|
+
return extendSpecVersion(super.surfaceContainerHighest(), "2025", color2025);
|
|
3190
|
+
}
|
|
3191
|
+
onSurface() {
|
|
3192
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3193
|
+
name: "on_surface",
|
|
3194
|
+
palette: s => s.neutralPalette,
|
|
3195
|
+
tone: s => s.variant === Variant.VIBRANT ? tMaxC(s.neutralPalette, 0, 100, 1.1) : DynamicColor.getInitialToneFromBackground(s => "phone" === s.platform ? this.highestSurface(s) : this.surfaceContainerHigh())(s),
|
|
3196
|
+
chromaMultiplier: s => {
|
|
3197
|
+
if ("phone" === s.platform) {
|
|
3198
|
+
if (s.variant === Variant.NEUTRAL) return 2.2;
|
|
3199
|
+
if (s.variant === Variant.TONAL_SPOT) return 1.7;
|
|
3200
|
+
if (s.variant === Variant.EXPRESSIVE) return Hct.isYellow(s.neutralPalette.hue) ? s.isDark ? 3 : 2.3 : 1.6;
|
|
3201
|
+
}
|
|
3202
|
+
return 1;
|
|
3203
|
+
},
|
|
3204
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : this.surfaceContainerHigh(),
|
|
3205
|
+
contrastCurve: s => s.isDark && "phone" === s.platform ? getCurve(11) : getCurve(9)
|
|
3206
|
+
});
|
|
3207
|
+
return extendSpecVersion(super.onSurface(), "2025", color2025);
|
|
3208
|
+
}
|
|
3209
|
+
onSurfaceVariant() {
|
|
3210
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3211
|
+
name: "on_surface_variant",
|
|
3212
|
+
palette: s => s.neutralPalette,
|
|
3213
|
+
chromaMultiplier: s => {
|
|
3214
|
+
if ("phone" === s.platform) {
|
|
3215
|
+
if (s.variant === Variant.NEUTRAL) return 2.2;
|
|
3216
|
+
if (s.variant === Variant.TONAL_SPOT) return 1.7;
|
|
3217
|
+
if (s.variant === Variant.EXPRESSIVE) return Hct.isYellow(s.neutralPalette.hue) ? s.isDark ? 3 : 2.3 : 1.6;
|
|
3218
|
+
}
|
|
3219
|
+
return 1;
|
|
3220
|
+
},
|
|
3221
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : this.surfaceContainerHigh(),
|
|
3222
|
+
contrastCurve: s => "phone" === s.platform ? s.isDark ? getCurve(6) : getCurve(4.5) : getCurve(7)
|
|
3223
|
+
});
|
|
3224
|
+
return extendSpecVersion(super.onSurfaceVariant(), "2025", color2025);
|
|
3225
|
+
}
|
|
3226
|
+
outline() {
|
|
3227
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3228
|
+
name: "outline",
|
|
3229
|
+
palette: s => s.neutralPalette,
|
|
3230
|
+
chromaMultiplier: s => {
|
|
3231
|
+
if ("phone" === s.platform) {
|
|
3232
|
+
if (s.variant === Variant.NEUTRAL) return 2.2;
|
|
3233
|
+
if (s.variant === Variant.TONAL_SPOT) return 1.7;
|
|
3234
|
+
if (s.variant === Variant.EXPRESSIVE) return Hct.isYellow(s.neutralPalette.hue) ? s.isDark ? 3 : 2.3 : 1.6;
|
|
3235
|
+
}
|
|
3236
|
+
return 1;
|
|
3237
|
+
},
|
|
3238
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : this.surfaceContainerHigh(),
|
|
3239
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(3) : getCurve(4.5)
|
|
3240
|
+
});
|
|
3241
|
+
return extendSpecVersion(super.outline(), "2025", color2025);
|
|
3242
|
+
}
|
|
3243
|
+
outlineVariant() {
|
|
3244
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3245
|
+
name: "outline_variant",
|
|
3246
|
+
palette: s => s.neutralPalette,
|
|
3247
|
+
chromaMultiplier: s => {
|
|
3248
|
+
if ("phone" === s.platform) {
|
|
3249
|
+
if (s.variant === Variant.NEUTRAL) return 2.2;
|
|
3250
|
+
if (s.variant === Variant.TONAL_SPOT) return 1.7;
|
|
3251
|
+
if (s.variant === Variant.EXPRESSIVE) return Hct.isYellow(s.neutralPalette.hue) ? s.isDark ? 3 : 2.3 : 1.6;
|
|
3252
|
+
}
|
|
3253
|
+
return 1;
|
|
3254
|
+
},
|
|
3255
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : this.surfaceContainerHigh(),
|
|
3256
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(1.5) : getCurve(3)
|
|
3257
|
+
});
|
|
3258
|
+
return extendSpecVersion(super.outlineVariant(), "2025", color2025);
|
|
3259
|
+
}
|
|
3260
|
+
inverseSurface() {
|
|
3261
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3262
|
+
name: "inverse_surface",
|
|
3263
|
+
palette: s => s.neutralPalette,
|
|
3264
|
+
tone: s => s.isDark ? 98 : 4,
|
|
3265
|
+
isBackground: !0
|
|
3266
|
+
});
|
|
3267
|
+
return extendSpecVersion(super.inverseSurface(), "2025", color2025);
|
|
3268
|
+
}
|
|
3269
|
+
inverseOnSurface() {
|
|
3270
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3271
|
+
name: "inverse_on_surface",
|
|
3272
|
+
palette: s => s.neutralPalette,
|
|
3273
|
+
background: s => this.inverseSurface(),
|
|
3274
|
+
contrastCurve: s => getCurve(7)
|
|
3275
|
+
});
|
|
3276
|
+
return extendSpecVersion(super.inverseOnSurface(), "2025", color2025);
|
|
3277
|
+
}
|
|
3278
|
+
primary() {
|
|
3279
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3280
|
+
name: "primary",
|
|
3281
|
+
palette: s => s.primaryPalette,
|
|
3282
|
+
tone: s => s.variant === Variant.NEUTRAL ? "phone" === s.platform ? s.isDark ? 80 : 40 : 90 : s.variant === Variant.TONAL_SPOT ? "phone" === s.platform ? s.isDark ? 80 : tMaxC(s.primaryPalette) : tMaxC(s.primaryPalette, 0, 90) : s.variant === Variant.EXPRESSIVE ? "phone" === s.platform ? tMaxC(s.primaryPalette, 0, Hct.isYellow(s.primaryPalette.hue) ? 25 : Hct.isCyan(s.primaryPalette.hue) ? 88 : 98) : tMaxC(s.primaryPalette) : "phone" === s.platform ? tMaxC(s.primaryPalette, 0, Hct.isCyan(s.primaryPalette.hue) ? 88 : 98) : tMaxC(s.primaryPalette),
|
|
3283
|
+
isBackground: !0,
|
|
3284
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : this.surfaceContainerHigh(),
|
|
3285
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(4.5) : getCurve(7),
|
|
3286
|
+
toneDeltaPair: s => "phone" === s.platform ? new ToneDeltaPair(this.primaryContainer(), this.primary(), 5, "relative_lighter", !0, "farther") : void 0
|
|
3287
|
+
});
|
|
3288
|
+
return extendSpecVersion(super.primary(), "2025", color2025);
|
|
3289
|
+
}
|
|
3290
|
+
primaryDim() {
|
|
3291
|
+
return DynamicColor.fromPalette({
|
|
3292
|
+
name: "primary_dim",
|
|
3293
|
+
palette: s => s.primaryPalette,
|
|
3294
|
+
tone: s => s.variant === Variant.NEUTRAL ? 85 : s.variant === Variant.TONAL_SPOT ? tMaxC(s.primaryPalette, 0, 90) : tMaxC(s.primaryPalette),
|
|
3295
|
+
isBackground: !0,
|
|
3296
|
+
background: s => this.surfaceContainerHigh(),
|
|
3297
|
+
contrastCurve: s => getCurve(4.5),
|
|
3298
|
+
toneDeltaPair: s => new ToneDeltaPair(this.primaryDim(), this.primary(), 5, "darker", !0, "farther")
|
|
3299
|
+
});
|
|
3300
|
+
}
|
|
3301
|
+
onPrimary() {
|
|
3302
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3303
|
+
name: "on_primary",
|
|
3304
|
+
palette: s => s.primaryPalette,
|
|
3305
|
+
background: s => "phone" === s.platform ? this.primary() : this.primaryDim(),
|
|
3306
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(6) : getCurve(7)
|
|
3307
|
+
});
|
|
3308
|
+
return extendSpecVersion(super.onPrimary(), "2025", color2025);
|
|
3309
|
+
}
|
|
3310
|
+
primaryContainer() {
|
|
3311
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3312
|
+
name: "primary_container",
|
|
3313
|
+
palette: s => s.primaryPalette,
|
|
3314
|
+
tone: s => "watch" === s.platform ? 30 : s.variant === Variant.NEUTRAL ? s.isDark ? 30 : 90 : s.variant === Variant.TONAL_SPOT ? s.isDark ? tMinC(s.primaryPalette, 35, 93) : tMaxC(s.primaryPalette, 0, 90) : s.variant === Variant.EXPRESSIVE ? s.isDark ? tMaxC(s.primaryPalette, 30, 93) : tMaxC(s.primaryPalette, 78, Hct.isCyan(s.primaryPalette.hue) ? 88 : 90) : s.isDark ? tMinC(s.primaryPalette, 66, 93) : tMaxC(s.primaryPalette, 66, Hct.isCyan(s.primaryPalette.hue) ? 88 : 93),
|
|
3315
|
+
isBackground: !0,
|
|
3316
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : void 0,
|
|
3317
|
+
toneDeltaPair: s => "phone" === s.platform ? void 0 : new ToneDeltaPair(this.primaryContainer(), this.primaryDim(), 10, "darker", !0, "farther"),
|
|
3318
|
+
contrastCurve: s => "phone" === s.platform && s.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3319
|
+
});
|
|
3320
|
+
return extendSpecVersion(super.primaryContainer(), "2025", color2025);
|
|
3321
|
+
}
|
|
3322
|
+
onPrimaryContainer() {
|
|
3323
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3324
|
+
name: "on_primary_container",
|
|
3325
|
+
palette: s => s.primaryPalette,
|
|
3326
|
+
background: s => this.primaryContainer(),
|
|
3327
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(6) : getCurve(7)
|
|
3328
|
+
});
|
|
3329
|
+
return extendSpecVersion(super.onPrimaryContainer(), "2025", color2025);
|
|
3330
|
+
}
|
|
3331
|
+
primaryFixed() {
|
|
3332
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3333
|
+
name: "primary_fixed",
|
|
3334
|
+
palette: s => s.primaryPalette,
|
|
3335
|
+
tone: s => {
|
|
3336
|
+
let tempS = Object.assign({}, s, {
|
|
3337
|
+
isDark: !1,
|
|
3338
|
+
contrastLevel: 0
|
|
3339
|
+
});
|
|
3340
|
+
return this.primaryContainer().getTone(tempS);
|
|
3341
|
+
},
|
|
3342
|
+
isBackground: !0,
|
|
3343
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : void 0,
|
|
3344
|
+
contrastCurve: s => "phone" === s.platform && s.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3345
|
+
});
|
|
3346
|
+
return extendSpecVersion(super.primaryFixed(), "2025", color2025);
|
|
3347
|
+
}
|
|
3348
|
+
primaryFixedDim() {
|
|
3349
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3350
|
+
name: "primary_fixed_dim",
|
|
3351
|
+
palette: s => s.primaryPalette,
|
|
3352
|
+
tone: s => this.primaryFixed().getTone(s),
|
|
3353
|
+
isBackground: !0,
|
|
3354
|
+
toneDeltaPair: s => new ToneDeltaPair(this.primaryFixedDim(), this.primaryFixed(), 5, "darker", !0, "exact")
|
|
3355
|
+
});
|
|
3356
|
+
return extendSpecVersion(super.primaryFixedDim(), "2025", color2025);
|
|
3357
|
+
}
|
|
3358
|
+
onPrimaryFixed() {
|
|
3359
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3360
|
+
name: "on_primary_fixed",
|
|
3361
|
+
palette: s => s.primaryPalette,
|
|
3362
|
+
background: s => this.primaryFixedDim(),
|
|
3363
|
+
contrastCurve: s => getCurve(7)
|
|
3364
|
+
});
|
|
3365
|
+
return extendSpecVersion(super.onPrimaryFixed(), "2025", color2025);
|
|
3366
|
+
}
|
|
3367
|
+
onPrimaryFixedVariant() {
|
|
3368
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3369
|
+
name: "on_primary_fixed_variant",
|
|
3370
|
+
palette: s => s.primaryPalette,
|
|
3371
|
+
background: s => this.primaryFixedDim(),
|
|
3372
|
+
contrastCurve: s => getCurve(4.5)
|
|
3373
|
+
});
|
|
3374
|
+
return extendSpecVersion(super.onPrimaryFixedVariant(), "2025", color2025);
|
|
3375
|
+
}
|
|
3376
|
+
inversePrimary() {
|
|
3377
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3378
|
+
name: "inverse_primary",
|
|
3379
|
+
palette: s => s.primaryPalette,
|
|
3380
|
+
tone: s => tMaxC(s.primaryPalette),
|
|
3381
|
+
background: s => this.inverseSurface(),
|
|
3382
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(6) : getCurve(7)
|
|
3383
|
+
});
|
|
3384
|
+
return extendSpecVersion(super.inversePrimary(), "2025", color2025);
|
|
3385
|
+
}
|
|
3386
|
+
secondary() {
|
|
3387
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3388
|
+
name: "secondary",
|
|
3389
|
+
palette: s => s.secondaryPalette,
|
|
3390
|
+
tone: s => "watch" === s.platform ? s.variant === Variant.NEUTRAL ? 90 : tMaxC(s.secondaryPalette, 0, 90) : s.variant === Variant.NEUTRAL ? s.isDark ? tMinC(s.secondaryPalette, 0, 98) : tMaxC(s.secondaryPalette) : s.variant === Variant.VIBRANT ? tMaxC(s.secondaryPalette, 0, s.isDark ? 90 : 98) : s.isDark ? 80 : tMaxC(s.secondaryPalette),
|
|
3391
|
+
isBackground: !0,
|
|
3392
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : this.surfaceContainerHigh(),
|
|
3393
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(4.5) : getCurve(7),
|
|
3394
|
+
toneDeltaPair: s => "phone" === s.platform ? new ToneDeltaPair(this.secondaryContainer(), this.secondary(), 5, "relative_lighter", !0, "farther") : void 0
|
|
3395
|
+
});
|
|
3396
|
+
return extendSpecVersion(super.secondary(), "2025", color2025);
|
|
3397
|
+
}
|
|
3398
|
+
secondaryDim() {
|
|
3399
|
+
return DynamicColor.fromPalette({
|
|
3400
|
+
name: "secondary_dim",
|
|
3401
|
+
palette: s => s.secondaryPalette,
|
|
3402
|
+
tone: s => s.variant === Variant.NEUTRAL ? 85 : tMaxC(s.secondaryPalette, 0, 90),
|
|
3403
|
+
isBackground: !0,
|
|
3404
|
+
background: s => this.surfaceContainerHigh(),
|
|
3405
|
+
contrastCurve: s => getCurve(4.5),
|
|
3406
|
+
toneDeltaPair: s => new ToneDeltaPair(this.secondaryDim(), this.secondary(), 5, "darker", !0, "farther")
|
|
3407
|
+
});
|
|
3408
|
+
}
|
|
3409
|
+
onSecondary() {
|
|
3410
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3411
|
+
name: "on_secondary",
|
|
3412
|
+
palette: s => s.secondaryPalette,
|
|
3413
|
+
background: s => "phone" === s.platform ? this.secondary() : this.secondaryDim(),
|
|
3414
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(6) : getCurve(7)
|
|
3415
|
+
});
|
|
3416
|
+
return extendSpecVersion(super.onSecondary(), "2025", color2025);
|
|
3417
|
+
}
|
|
3418
|
+
secondaryContainer() {
|
|
3419
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3420
|
+
name: "secondary_container",
|
|
3421
|
+
palette: s => s.secondaryPalette,
|
|
3422
|
+
tone: s => "watch" === s.platform ? 30 : s.variant === Variant.VIBRANT ? s.isDark ? tMinC(s.secondaryPalette, 30, 40) : tMaxC(s.secondaryPalette, 84, 90) : s.variant === Variant.EXPRESSIVE ? s.isDark ? 15 : tMaxC(s.secondaryPalette, 90, 95) : s.isDark ? 25 : 90,
|
|
3423
|
+
isBackground: !0,
|
|
3424
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : void 0,
|
|
3425
|
+
toneDeltaPair: s => "watch" === s.platform ? new ToneDeltaPair(this.secondaryContainer(), this.secondaryDim(), 10, "darker", !0, "farther") : void 0,
|
|
3426
|
+
contrastCurve: s => "phone" === s.platform && s.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3427
|
+
});
|
|
3428
|
+
return extendSpecVersion(super.secondaryContainer(), "2025", color2025);
|
|
3429
|
+
}
|
|
3430
|
+
onSecondaryContainer() {
|
|
3431
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3432
|
+
name: "on_secondary_container",
|
|
3433
|
+
palette: s => s.secondaryPalette,
|
|
3434
|
+
background: s => this.secondaryContainer(),
|
|
3435
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(6) : getCurve(7)
|
|
3436
|
+
});
|
|
3437
|
+
return extendSpecVersion(super.onSecondaryContainer(), "2025", color2025);
|
|
3438
|
+
}
|
|
3439
|
+
secondaryFixed() {
|
|
3440
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3441
|
+
name: "secondary_fixed",
|
|
3442
|
+
palette: s => s.secondaryPalette,
|
|
3443
|
+
tone: s => {
|
|
3444
|
+
let tempS = Object.assign({}, s, {
|
|
3445
|
+
isDark: !1,
|
|
3446
|
+
contrastLevel: 0
|
|
3447
|
+
});
|
|
3448
|
+
return this.secondaryContainer().getTone(tempS);
|
|
3449
|
+
},
|
|
3450
|
+
isBackground: !0,
|
|
3451
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : void 0,
|
|
3452
|
+
contrastCurve: s => "phone" === s.platform && s.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3453
|
+
});
|
|
3454
|
+
return extendSpecVersion(super.secondaryFixed(), "2025", color2025);
|
|
3455
|
+
}
|
|
3456
|
+
secondaryFixedDim() {
|
|
3457
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3458
|
+
name: "secondary_fixed_dim",
|
|
3459
|
+
palette: s => s.secondaryPalette,
|
|
3460
|
+
tone: s => this.secondaryFixed().getTone(s),
|
|
3461
|
+
isBackground: !0,
|
|
3462
|
+
toneDeltaPair: s => new ToneDeltaPair(this.secondaryFixedDim(), this.secondaryFixed(), 5, "darker", !0, "exact")
|
|
3463
|
+
});
|
|
3464
|
+
return extendSpecVersion(super.secondaryFixedDim(), "2025", color2025);
|
|
3465
|
+
}
|
|
3466
|
+
onSecondaryFixed() {
|
|
3467
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3468
|
+
name: "on_secondary_fixed",
|
|
3469
|
+
palette: s => s.secondaryPalette,
|
|
3470
|
+
background: s => this.secondaryFixedDim(),
|
|
3471
|
+
contrastCurve: s => getCurve(7)
|
|
3472
|
+
});
|
|
3473
|
+
return extendSpecVersion(super.onSecondaryFixed(), "2025", color2025);
|
|
3474
|
+
}
|
|
3475
|
+
onSecondaryFixedVariant() {
|
|
3476
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3477
|
+
name: "on_secondary_fixed_variant",
|
|
3478
|
+
palette: s => s.secondaryPalette,
|
|
3479
|
+
background: s => this.secondaryFixedDim(),
|
|
3480
|
+
contrastCurve: s => getCurve(4.5)
|
|
3481
|
+
});
|
|
3482
|
+
return extendSpecVersion(super.onSecondaryFixedVariant(), "2025", color2025);
|
|
3483
|
+
}
|
|
3484
|
+
tertiary() {
|
|
3485
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3486
|
+
name: "tertiary",
|
|
3487
|
+
palette: s => s.tertiaryPalette,
|
|
3488
|
+
tone: s => "watch" === s.platform ? s.variant === Variant.TONAL_SPOT ? tMaxC(s.tertiaryPalette, 0, 90) : tMaxC(s.tertiaryPalette) : s.variant === Variant.EXPRESSIVE || s.variant === Variant.VIBRANT ? tMaxC(s.tertiaryPalette, 0, Hct.isCyan(s.tertiaryPalette.hue) ? 88 : s.isDark ? 98 : 100) : s.isDark ? tMaxC(s.tertiaryPalette, 0, 98) : tMaxC(s.tertiaryPalette),
|
|
3489
|
+
isBackground: !0,
|
|
3490
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : this.surfaceContainerHigh(),
|
|
3491
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(4.5) : getCurve(7),
|
|
3492
|
+
toneDeltaPair: s => "phone" === s.platform ? new ToneDeltaPair(this.tertiaryContainer(), this.tertiary(), 5, "relative_lighter", !0, "farther") : void 0
|
|
3493
|
+
});
|
|
3494
|
+
return extendSpecVersion(super.tertiary(), "2025", color2025);
|
|
3495
|
+
}
|
|
3496
|
+
tertiaryDim() {
|
|
3497
|
+
return DynamicColor.fromPalette({
|
|
3498
|
+
name: "tertiary_dim",
|
|
3499
|
+
palette: s => s.tertiaryPalette,
|
|
3500
|
+
tone: s => s.variant === Variant.TONAL_SPOT ? tMaxC(s.tertiaryPalette, 0, 90) : tMaxC(s.tertiaryPalette),
|
|
3501
|
+
isBackground: !0,
|
|
3502
|
+
background: s => this.surfaceContainerHigh(),
|
|
3503
|
+
contrastCurve: s => getCurve(4.5),
|
|
3504
|
+
toneDeltaPair: s => new ToneDeltaPair(this.tertiaryDim(), this.tertiary(), 5, "darker", !0, "farther")
|
|
3505
|
+
});
|
|
3506
|
+
}
|
|
3507
|
+
onTertiary() {
|
|
3508
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3509
|
+
name: "on_tertiary",
|
|
3510
|
+
palette: s => s.tertiaryPalette,
|
|
3511
|
+
background: s => "phone" === s.platform ? this.tertiary() : this.tertiaryDim(),
|
|
3512
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(6) : getCurve(7)
|
|
3513
|
+
});
|
|
3514
|
+
return extendSpecVersion(super.onTertiary(), "2025", color2025);
|
|
3515
|
+
}
|
|
3516
|
+
tertiaryContainer() {
|
|
3517
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3518
|
+
name: "tertiary_container",
|
|
3519
|
+
palette: s => s.tertiaryPalette,
|
|
3520
|
+
tone: s => "watch" === s.platform ? s.variant === Variant.TONAL_SPOT ? tMaxC(s.tertiaryPalette, 0, 90) : tMaxC(s.tertiaryPalette) : s.variant === Variant.NEUTRAL ? s.isDark ? tMaxC(s.tertiaryPalette, 0, 93) : tMaxC(s.tertiaryPalette, 0, 96) : s.variant === Variant.TONAL_SPOT ? tMaxC(s.tertiaryPalette, 0, s.isDark ? 93 : 100) : s.variant === Variant.EXPRESSIVE ? tMaxC(s.tertiaryPalette, 75, Hct.isCyan(s.tertiaryPalette.hue) ? 88 : s.isDark ? 93 : 100) : s.isDark ? tMaxC(s.tertiaryPalette, 0, 93) : tMaxC(s.tertiaryPalette, 72, 100),
|
|
3521
|
+
isBackground: !0,
|
|
3522
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : void 0,
|
|
3523
|
+
toneDeltaPair: s => "watch" === s.platform ? new ToneDeltaPair(this.tertiaryContainer(), this.tertiaryDim(), 10, "darker", !0, "farther") : void 0,
|
|
3524
|
+
contrastCurve: s => "phone" === s.platform && s.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3525
|
+
});
|
|
3526
|
+
return extendSpecVersion(super.tertiaryContainer(), "2025", color2025);
|
|
3527
|
+
}
|
|
3528
|
+
onTertiaryContainer() {
|
|
3529
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3530
|
+
name: "on_tertiary_container",
|
|
3531
|
+
palette: s => s.tertiaryPalette,
|
|
3532
|
+
background: s => this.tertiaryContainer(),
|
|
3533
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(6) : getCurve(7)
|
|
3534
|
+
});
|
|
3535
|
+
return extendSpecVersion(super.onTertiaryContainer(), "2025", color2025);
|
|
3536
|
+
}
|
|
3537
|
+
tertiaryFixed() {
|
|
3538
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3539
|
+
name: "tertiary_fixed",
|
|
3540
|
+
palette: s => s.tertiaryPalette,
|
|
3541
|
+
tone: s => {
|
|
3542
|
+
let tempS = Object.assign({}, s, {
|
|
3543
|
+
isDark: !1,
|
|
3544
|
+
contrastLevel: 0
|
|
3545
|
+
});
|
|
3546
|
+
return this.tertiaryContainer().getTone(tempS);
|
|
3547
|
+
},
|
|
3548
|
+
isBackground: !0,
|
|
3549
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : void 0,
|
|
3550
|
+
contrastCurve: s => "phone" === s.platform && s.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3551
|
+
});
|
|
3552
|
+
return extendSpecVersion(super.tertiaryFixed(), "2025", color2025);
|
|
3553
|
+
}
|
|
3554
|
+
tertiaryFixedDim() {
|
|
3555
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3556
|
+
name: "tertiary_fixed_dim",
|
|
3557
|
+
palette: s => s.tertiaryPalette,
|
|
3558
|
+
tone: s => this.tertiaryFixed().getTone(s),
|
|
3559
|
+
isBackground: !0,
|
|
3560
|
+
toneDeltaPair: s => new ToneDeltaPair(this.tertiaryFixedDim(), this.tertiaryFixed(), 5, "darker", !0, "exact")
|
|
3561
|
+
});
|
|
3562
|
+
return extendSpecVersion(super.tertiaryFixedDim(), "2025", color2025);
|
|
3563
|
+
}
|
|
3564
|
+
onTertiaryFixed() {
|
|
3565
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3566
|
+
name: "on_tertiary_fixed",
|
|
3567
|
+
palette: s => s.tertiaryPalette,
|
|
3568
|
+
background: s => this.tertiaryFixedDim(),
|
|
3569
|
+
contrastCurve: s => getCurve(7)
|
|
3570
|
+
});
|
|
3571
|
+
return extendSpecVersion(super.onTertiaryFixed(), "2025", color2025);
|
|
3572
|
+
}
|
|
3573
|
+
onTertiaryFixedVariant() {
|
|
3574
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3575
|
+
name: "on_tertiary_fixed_variant",
|
|
3576
|
+
palette: s => s.tertiaryPalette,
|
|
3577
|
+
background: s => this.tertiaryFixedDim(),
|
|
3578
|
+
contrastCurve: s => getCurve(4.5)
|
|
3579
|
+
});
|
|
3580
|
+
return extendSpecVersion(super.onTertiaryFixedVariant(), "2025", color2025);
|
|
3581
|
+
}
|
|
3582
|
+
error() {
|
|
3583
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3584
|
+
name: "error",
|
|
3585
|
+
palette: s => s.errorPalette,
|
|
3586
|
+
tone: s => "phone" === s.platform ? s.isDark ? tMinC(s.errorPalette, 0, 98) : tMaxC(s.errorPalette) : tMinC(s.errorPalette),
|
|
3587
|
+
isBackground: !0,
|
|
3588
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : this.surfaceContainerHigh(),
|
|
3589
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(4.5) : getCurve(7),
|
|
3590
|
+
toneDeltaPair: s => "phone" === s.platform ? new ToneDeltaPair(this.errorContainer(), this.error(), 5, "relative_lighter", !0, "farther") : void 0
|
|
3591
|
+
});
|
|
3592
|
+
return extendSpecVersion(super.error(), "2025", color2025);
|
|
3593
|
+
}
|
|
3594
|
+
errorDim() {
|
|
3595
|
+
return DynamicColor.fromPalette({
|
|
3596
|
+
name: "error_dim",
|
|
3597
|
+
palette: s => s.errorPalette,
|
|
3598
|
+
tone: s => tMinC(s.errorPalette),
|
|
3599
|
+
isBackground: !0,
|
|
3600
|
+
background: s => this.surfaceContainerHigh(),
|
|
3601
|
+
contrastCurve: s => getCurve(4.5),
|
|
3602
|
+
toneDeltaPair: s => new ToneDeltaPair(this.errorDim(), this.error(), 5, "darker", !0, "farther")
|
|
3603
|
+
});
|
|
3604
|
+
}
|
|
3605
|
+
onError() {
|
|
3606
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3607
|
+
name: "on_error",
|
|
3608
|
+
palette: s => s.errorPalette,
|
|
3609
|
+
background: s => "phone" === s.platform ? this.error() : this.errorDim(),
|
|
3610
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(6) : getCurve(7)
|
|
3611
|
+
});
|
|
3612
|
+
return extendSpecVersion(super.onError(), "2025", color2025);
|
|
3613
|
+
}
|
|
3614
|
+
errorContainer() {
|
|
3615
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3616
|
+
name: "error_container",
|
|
3617
|
+
palette: s => s.errorPalette,
|
|
3618
|
+
tone: s => "watch" === s.platform ? 30 : s.isDark ? tMinC(s.errorPalette, 30, 93) : tMaxC(s.errorPalette, 0, 90),
|
|
3619
|
+
isBackground: !0,
|
|
3620
|
+
background: s => "phone" === s.platform ? this.highestSurface(s) : void 0,
|
|
3621
|
+
toneDeltaPair: s => "watch" === s.platform ? new ToneDeltaPair(this.errorContainer(), this.errorDim(), 10, "darker", !0, "farther") : void 0,
|
|
3622
|
+
contrastCurve: s => "phone" === s.platform && s.contrastLevel > 0 ? getCurve(1.5) : void 0
|
|
3623
|
+
});
|
|
3624
|
+
return extendSpecVersion(super.errorContainer(), "2025", color2025);
|
|
3625
|
+
}
|
|
3626
|
+
onErrorContainer() {
|
|
3627
|
+
const color2025 = DynamicColor.fromPalette({
|
|
3628
|
+
name: "on_error_container",
|
|
3629
|
+
palette: s => s.errorPalette,
|
|
3630
|
+
background: s => this.errorContainer(),
|
|
3631
|
+
contrastCurve: s => "phone" === s.platform ? getCurve(4.5) : getCurve(7)
|
|
3632
|
+
});
|
|
3633
|
+
return extendSpecVersion(super.onErrorContainer(), "2025", color2025);
|
|
3634
|
+
}
|
|
3635
|
+
surfaceVariant() {
|
|
3636
|
+
const color2025 = Object.assign(this.surfaceContainerHighest().clone(), {
|
|
3637
|
+
name: "surface_variant"
|
|
3638
|
+
});
|
|
3639
|
+
return extendSpecVersion(super.surfaceVariant(), "2025", color2025);
|
|
3640
|
+
}
|
|
3641
|
+
surfaceTint() {
|
|
3642
|
+
const color2025 = Object.assign(this.primary().clone(), {
|
|
3643
|
+
name: "surface_tint"
|
|
3644
|
+
});
|
|
3645
|
+
return extendSpecVersion(super.surfaceTint(), "2025", color2025);
|
|
3646
|
+
}
|
|
3647
|
+
background() {
|
|
3648
|
+
const color2025 = Object.assign(this.surface().clone(), {
|
|
3649
|
+
name: "background"
|
|
3650
|
+
});
|
|
3651
|
+
return extendSpecVersion(super.background(), "2025", color2025);
|
|
3652
|
+
}
|
|
3653
|
+
onBackground() {
|
|
3654
|
+
const color2025 = Object.assign(this.onSurface().clone(), {
|
|
3655
|
+
name: "on_background",
|
|
3656
|
+
tone: s => "watch" === s.platform ? 100 : this.onSurface().getTone(s)
|
|
3657
|
+
});
|
|
3658
|
+
return extendSpecVersion(super.onBackground(), "2025", color2025);
|
|
3659
|
+
}
|
|
2228
3660
|
}
|
|
2229
3661
|
class MaterialDynamicColors {
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
}
|
|
2233
|
-
}
|
|
2234
|
-
MaterialDynamicColors.contentAccentToneDelta = 15, MaterialDynamicColors.primaryPaletteKeyColor = DynamicColor.fromPalette({
|
|
2235
|
-
name: "primary_palette_key_color",
|
|
2236
|
-
palette: s => s.primaryPalette,
|
|
2237
|
-
tone: s => s.primaryPalette.keyColor.tone
|
|
2238
|
-
}), MaterialDynamicColors.secondaryPaletteKeyColor = DynamicColor.fromPalette({
|
|
2239
|
-
name: "secondary_palette_key_color",
|
|
2240
|
-
palette: s => s.secondaryPalette,
|
|
2241
|
-
tone: s => s.secondaryPalette.keyColor.tone
|
|
2242
|
-
}), MaterialDynamicColors.tertiaryPaletteKeyColor = DynamicColor.fromPalette({
|
|
2243
|
-
name: "tertiary_palette_key_color",
|
|
2244
|
-
palette: s => s.tertiaryPalette,
|
|
2245
|
-
tone: s => s.tertiaryPalette.keyColor.tone
|
|
2246
|
-
}), MaterialDynamicColors.neutralPaletteKeyColor = DynamicColor.fromPalette({
|
|
2247
|
-
name: "neutral_palette_key_color",
|
|
2248
|
-
palette: s => s.neutralPalette,
|
|
2249
|
-
tone: s => s.neutralPalette.keyColor.tone
|
|
2250
|
-
}), MaterialDynamicColors.neutralVariantPaletteKeyColor = DynamicColor.fromPalette({
|
|
2251
|
-
name: "neutral_variant_palette_key_color",
|
|
2252
|
-
palette: s => s.neutralVariantPalette,
|
|
2253
|
-
tone: s => s.neutralVariantPalette.keyColor.tone
|
|
2254
|
-
}), MaterialDynamicColors.background = DynamicColor.fromPalette({
|
|
2255
|
-
name: "background",
|
|
2256
|
-
palette: s => s.neutralPalette,
|
|
2257
|
-
tone: s => s.isDark ? 6 : 98,
|
|
2258
|
-
isBackground: !0
|
|
2259
|
-
}), MaterialDynamicColors.onBackground = DynamicColor.fromPalette({
|
|
2260
|
-
name: "on_background",
|
|
2261
|
-
palette: s => s.neutralPalette,
|
|
2262
|
-
tone: s => s.isDark ? 90 : 10,
|
|
2263
|
-
background: s => MaterialDynamicColors.background,
|
|
2264
|
-
contrastCurve: new ContrastCurve(3, 3, 4.5, 7)
|
|
2265
|
-
}), MaterialDynamicColors.surface = DynamicColor.fromPalette({
|
|
2266
|
-
name: "surface",
|
|
2267
|
-
palette: s => s.neutralPalette,
|
|
2268
|
-
tone: s => s.isDark ? 6 : 98,
|
|
2269
|
-
isBackground: !0
|
|
2270
|
-
}), MaterialDynamicColors.surfaceDim = DynamicColor.fromPalette({
|
|
2271
|
-
name: "surface_dim",
|
|
2272
|
-
palette: s => s.neutralPalette,
|
|
2273
|
-
tone: s => s.isDark ? 6 : 87,
|
|
2274
|
-
isBackground: !0
|
|
2275
|
-
}), MaterialDynamicColors.surfaceBright = DynamicColor.fromPalette({
|
|
2276
|
-
name: "surface_bright",
|
|
2277
|
-
palette: s => s.neutralPalette,
|
|
2278
|
-
tone: s => s.isDark ? 24 : 98,
|
|
2279
|
-
isBackground: !0
|
|
2280
|
-
}), MaterialDynamicColors.surfaceContainerLowest = DynamicColor.fromPalette({
|
|
2281
|
-
name: "surface_container_lowest",
|
|
2282
|
-
palette: s => s.neutralPalette,
|
|
2283
|
-
tone: s => s.isDark ? 4 : 100,
|
|
2284
|
-
isBackground: !0
|
|
2285
|
-
}), MaterialDynamicColors.surfaceContainerLow = DynamicColor.fromPalette({
|
|
2286
|
-
name: "surface_container_low",
|
|
2287
|
-
palette: s => s.neutralPalette,
|
|
2288
|
-
tone: s => s.isDark ? 10 : 96,
|
|
2289
|
-
isBackground: !0
|
|
2290
|
-
}), MaterialDynamicColors.surfaceContainer = DynamicColor.fromPalette({
|
|
2291
|
-
name: "surface_container",
|
|
2292
|
-
palette: s => s.neutralPalette,
|
|
2293
|
-
tone: s => s.isDark ? 12 : 94,
|
|
2294
|
-
isBackground: !0
|
|
2295
|
-
}), MaterialDynamicColors.surfaceContainerHigh = DynamicColor.fromPalette({
|
|
2296
|
-
name: "surface_container_high",
|
|
2297
|
-
palette: s => s.neutralPalette,
|
|
2298
|
-
tone: s => s.isDark ? 17 : 92,
|
|
2299
|
-
isBackground: !0
|
|
2300
|
-
}), MaterialDynamicColors.surfaceContainerHighest = DynamicColor.fromPalette({
|
|
2301
|
-
name: "surface_container_highest",
|
|
2302
|
-
palette: s => s.neutralPalette,
|
|
2303
|
-
tone: s => s.isDark ? 22 : 90,
|
|
2304
|
-
isBackground: !0
|
|
2305
|
-
}), MaterialDynamicColors.onSurface = DynamicColor.fromPalette({
|
|
2306
|
-
name: "on_surface",
|
|
2307
|
-
palette: s => s.neutralPalette,
|
|
2308
|
-
tone: s => s.isDark ? 90 : 10,
|
|
2309
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2310
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2311
|
-
}), MaterialDynamicColors.surfaceVariant = DynamicColor.fromPalette({
|
|
2312
|
-
name: "surface_variant",
|
|
2313
|
-
palette: s => s.neutralVariantPalette,
|
|
2314
|
-
tone: s => s.isDark ? 30 : 90,
|
|
2315
|
-
isBackground: !0
|
|
2316
|
-
}), MaterialDynamicColors.onSurfaceVariant = DynamicColor.fromPalette({
|
|
2317
|
-
name: "on_surface_variant",
|
|
2318
|
-
palette: s => s.neutralVariantPalette,
|
|
2319
|
-
tone: s => s.isDark ? 80 : 30,
|
|
2320
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2321
|
-
contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
|
|
2322
|
-
}), MaterialDynamicColors.inverseSurface = DynamicColor.fromPalette({
|
|
2323
|
-
name: "inverse_surface",
|
|
2324
|
-
palette: s => s.neutralPalette,
|
|
2325
|
-
tone: s => s.isDark ? 90 : 20
|
|
2326
|
-
}), MaterialDynamicColors.inverseOnSurface = DynamicColor.fromPalette({
|
|
2327
|
-
name: "inverse_on_surface",
|
|
2328
|
-
palette: s => s.neutralPalette,
|
|
2329
|
-
tone: s => s.isDark ? 20 : 95,
|
|
2330
|
-
background: s => MaterialDynamicColors.inverseSurface,
|
|
2331
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2332
|
-
}), MaterialDynamicColors.outline = DynamicColor.fromPalette({
|
|
2333
|
-
name: "outline",
|
|
2334
|
-
palette: s => s.neutralVariantPalette,
|
|
2335
|
-
tone: s => s.isDark ? 60 : 50,
|
|
2336
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2337
|
-
contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7)
|
|
2338
|
-
}), MaterialDynamicColors.outlineVariant = DynamicColor.fromPalette({
|
|
2339
|
-
name: "outline_variant",
|
|
2340
|
-
palette: s => s.neutralVariantPalette,
|
|
2341
|
-
tone: s => s.isDark ? 30 : 80,
|
|
2342
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2343
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7)
|
|
2344
|
-
}), MaterialDynamicColors.shadow = DynamicColor.fromPalette({
|
|
2345
|
-
name: "shadow",
|
|
2346
|
-
palette: s => s.neutralPalette,
|
|
2347
|
-
tone: s => 0
|
|
2348
|
-
}), MaterialDynamicColors.scrim = DynamicColor.fromPalette({
|
|
2349
|
-
name: "scrim",
|
|
2350
|
-
palette: s => s.neutralPalette,
|
|
2351
|
-
tone: s => 0
|
|
2352
|
-
}), MaterialDynamicColors.surfaceTint = DynamicColor.fromPalette({
|
|
2353
|
-
name: "surface_tint",
|
|
2354
|
-
palette: s => s.primaryPalette,
|
|
2355
|
-
tone: s => s.isDark ? 80 : 40,
|
|
2356
|
-
isBackground: !0
|
|
2357
|
-
}), MaterialDynamicColors.primary = DynamicColor.fromPalette({
|
|
2358
|
-
name: "primary",
|
|
2359
|
-
palette: s => s.primaryPalette,
|
|
2360
|
-
tone: s => isMonochrome(s) ? s.isDark ? 100 : 0 : s.isDark ? 80 : 40,
|
|
2361
|
-
isBackground: !0,
|
|
2362
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2363
|
-
contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
|
|
2364
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 15, "nearer", !1)
|
|
2365
|
-
}), MaterialDynamicColors.onPrimary = DynamicColor.fromPalette({
|
|
2366
|
-
name: "on_primary",
|
|
2367
|
-
palette: s => s.primaryPalette,
|
|
2368
|
-
tone: s => isMonochrome(s) ? s.isDark ? 10 : 90 : s.isDark ? 20 : 100,
|
|
2369
|
-
background: s => MaterialDynamicColors.primary,
|
|
2370
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2371
|
-
}), MaterialDynamicColors.primaryContainer = DynamicColor.fromPalette({
|
|
2372
|
-
name: "primary_container",
|
|
2373
|
-
palette: s => s.primaryPalette,
|
|
2374
|
-
tone: s => isFidelity(s) ? performAlbers(s.sourceColorHct, s) : isMonochrome(s) ? s.isDark ? 85 : 25 : s.isDark ? 30 : 90,
|
|
2375
|
-
isBackground: !0,
|
|
2376
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2377
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2378
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 15, "nearer", !1)
|
|
2379
|
-
}), MaterialDynamicColors.onPrimaryContainer = DynamicColor.fromPalette({
|
|
2380
|
-
name: "on_primary_container",
|
|
2381
|
-
palette: s => s.primaryPalette,
|
|
2382
|
-
tone: s => isFidelity(s) ? DynamicColor.foregroundTone(MaterialDynamicColors.primaryContainer.tone(s), 4.5) : isMonochrome(s) ? s.isDark ? 0 : 100 : s.isDark ? 90 : 10,
|
|
2383
|
-
background: s => MaterialDynamicColors.primaryContainer,
|
|
2384
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2385
|
-
}), MaterialDynamicColors.inversePrimary = DynamicColor.fromPalette({
|
|
2386
|
-
name: "inverse_primary",
|
|
2387
|
-
palette: s => s.primaryPalette,
|
|
2388
|
-
tone: s => s.isDark ? 40 : 80,
|
|
2389
|
-
background: s => MaterialDynamicColors.inverseSurface,
|
|
2390
|
-
contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
|
|
2391
|
-
}), MaterialDynamicColors.secondary = DynamicColor.fromPalette({
|
|
2392
|
-
name: "secondary",
|
|
2393
|
-
palette: s => s.secondaryPalette,
|
|
2394
|
-
tone: s => s.isDark ? 80 : 40,
|
|
2395
|
-
isBackground: !0,
|
|
2396
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2397
|
-
contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
|
|
2398
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 15, "nearer", !1)
|
|
2399
|
-
}), MaterialDynamicColors.onSecondary = DynamicColor.fromPalette({
|
|
2400
|
-
name: "on_secondary",
|
|
2401
|
-
palette: s => s.secondaryPalette,
|
|
2402
|
-
tone: s => isMonochrome(s) ? s.isDark ? 10 : 100 : s.isDark ? 20 : 100,
|
|
2403
|
-
background: s => MaterialDynamicColors.secondary,
|
|
2404
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2405
|
-
}), MaterialDynamicColors.secondaryContainer = DynamicColor.fromPalette({
|
|
2406
|
-
name: "secondary_container",
|
|
2407
|
-
palette: s => s.secondaryPalette,
|
|
2408
|
-
tone: s => {
|
|
2409
|
-
const initialTone = s.isDark ? 30 : 90;
|
|
2410
|
-
if (isMonochrome(s)) return s.isDark ? 30 : 85;
|
|
2411
|
-
if (!isFidelity(s)) return initialTone;
|
|
2412
|
-
let answer = findDesiredChromaByTone(s.secondaryPalette.hue, s.secondaryPalette.chroma, initialTone, !s.isDark);
|
|
2413
|
-
return answer = performAlbers(s.secondaryPalette.getHct(answer), s), answer;
|
|
2414
|
-
},
|
|
2415
|
-
isBackground: !0,
|
|
2416
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2417
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2418
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 15, "nearer", !1)
|
|
2419
|
-
}), MaterialDynamicColors.onSecondaryContainer = DynamicColor.fromPalette({
|
|
2420
|
-
name: "on_secondary_container",
|
|
2421
|
-
palette: s => s.secondaryPalette,
|
|
2422
|
-
tone: s => isFidelity(s) ? DynamicColor.foregroundTone(MaterialDynamicColors.secondaryContainer.tone(s), 4.5) : s.isDark ? 90 : 10,
|
|
2423
|
-
background: s => MaterialDynamicColors.secondaryContainer,
|
|
2424
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2425
|
-
}), MaterialDynamicColors.tertiary = DynamicColor.fromPalette({
|
|
2426
|
-
name: "tertiary",
|
|
2427
|
-
palette: s => s.tertiaryPalette,
|
|
2428
|
-
tone: s => isMonochrome(s) ? s.isDark ? 90 : 25 : s.isDark ? 80 : 40,
|
|
2429
|
-
isBackground: !0,
|
|
2430
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2431
|
-
contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
|
|
2432
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 15, "nearer", !1)
|
|
2433
|
-
}), MaterialDynamicColors.onTertiary = DynamicColor.fromPalette({
|
|
2434
|
-
name: "on_tertiary",
|
|
2435
|
-
palette: s => s.tertiaryPalette,
|
|
2436
|
-
tone: s => isMonochrome(s) ? s.isDark ? 10 : 90 : s.isDark ? 20 : 100,
|
|
2437
|
-
background: s => MaterialDynamicColors.tertiary,
|
|
2438
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2439
|
-
}), MaterialDynamicColors.tertiaryContainer = DynamicColor.fromPalette({
|
|
2440
|
-
name: "tertiary_container",
|
|
2441
|
-
palette: s => s.tertiaryPalette,
|
|
2442
|
-
tone: s => {
|
|
2443
|
-
if (isMonochrome(s)) return s.isDark ? 60 : 49;
|
|
2444
|
-
if (!isFidelity(s)) return s.isDark ? 30 : 90;
|
|
2445
|
-
const albersTone = performAlbers(s.tertiaryPalette.getHct(s.sourceColorHct.tone), s),
|
|
2446
|
-
proposedHct = s.tertiaryPalette.getHct(albersTone);
|
|
2447
|
-
return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
|
|
2448
|
-
},
|
|
2449
|
-
isBackground: !0,
|
|
2450
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2451
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2452
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 15, "nearer", !1)
|
|
2453
|
-
}), MaterialDynamicColors.onTertiaryContainer = DynamicColor.fromPalette({
|
|
2454
|
-
name: "on_tertiary_container",
|
|
2455
|
-
palette: s => s.tertiaryPalette,
|
|
2456
|
-
tone: s => isMonochrome(s) ? s.isDark ? 0 : 100 : isFidelity(s) ? DynamicColor.foregroundTone(MaterialDynamicColors.tertiaryContainer.tone(s), 4.5) : s.isDark ? 90 : 10,
|
|
2457
|
-
background: s => MaterialDynamicColors.tertiaryContainer,
|
|
2458
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2459
|
-
}), MaterialDynamicColors.error = DynamicColor.fromPalette({
|
|
2460
|
-
name: "error",
|
|
2461
|
-
palette: s => s.errorPalette,
|
|
2462
|
-
tone: s => s.isDark ? 80 : 40,
|
|
2463
|
-
isBackground: !0,
|
|
2464
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2465
|
-
contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
|
|
2466
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 15, "nearer", !1)
|
|
2467
|
-
}), MaterialDynamicColors.onError = DynamicColor.fromPalette({
|
|
2468
|
-
name: "on_error",
|
|
2469
|
-
palette: s => s.errorPalette,
|
|
2470
|
-
tone: s => s.isDark ? 20 : 100,
|
|
2471
|
-
background: s => MaterialDynamicColors.error,
|
|
2472
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2473
|
-
}), MaterialDynamicColors.errorContainer = DynamicColor.fromPalette({
|
|
2474
|
-
name: "error_container",
|
|
2475
|
-
palette: s => s.errorPalette,
|
|
2476
|
-
tone: s => s.isDark ? 30 : 90,
|
|
2477
|
-
isBackground: !0,
|
|
2478
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2479
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2480
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 15, "nearer", !1)
|
|
2481
|
-
}), MaterialDynamicColors.onErrorContainer = DynamicColor.fromPalette({
|
|
2482
|
-
name: "on_error_container",
|
|
2483
|
-
palette: s => s.errorPalette,
|
|
2484
|
-
tone: s => s.isDark ? 90 : 10,
|
|
2485
|
-
background: s => MaterialDynamicColors.errorContainer,
|
|
2486
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2487
|
-
}), MaterialDynamicColors.primaryFixed = DynamicColor.fromPalette({
|
|
2488
|
-
name: "primary_fixed",
|
|
2489
|
-
palette: s => s.primaryPalette,
|
|
2490
|
-
tone: s => isMonochrome(s) ? 40 : 90,
|
|
2491
|
-
isBackground: !0,
|
|
2492
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2493
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2494
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, "lighter", !0)
|
|
2495
|
-
}), MaterialDynamicColors.primaryFixedDim = DynamicColor.fromPalette({
|
|
2496
|
-
name: "primary_fixed_dim",
|
|
2497
|
-
palette: s => s.primaryPalette,
|
|
2498
|
-
tone: s => isMonochrome(s) ? 30 : 80,
|
|
2499
|
-
isBackground: !0,
|
|
2500
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2501
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2502
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, "lighter", !0)
|
|
2503
|
-
}), MaterialDynamicColors.onPrimaryFixed = DynamicColor.fromPalette({
|
|
2504
|
-
name: "on_primary_fixed",
|
|
2505
|
-
palette: s => s.primaryPalette,
|
|
2506
|
-
tone: s => isMonochrome(s) ? 100 : 10,
|
|
2507
|
-
background: s => MaterialDynamicColors.primaryFixedDim,
|
|
2508
|
-
secondBackground: s => MaterialDynamicColors.primaryFixed,
|
|
2509
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2510
|
-
}), MaterialDynamicColors.onPrimaryFixedVariant = DynamicColor.fromPalette({
|
|
2511
|
-
name: "on_primary_fixed_variant",
|
|
2512
|
-
palette: s => s.primaryPalette,
|
|
2513
|
-
tone: s => isMonochrome(s) ? 90 : 30,
|
|
2514
|
-
background: s => MaterialDynamicColors.primaryFixedDim,
|
|
2515
|
-
secondBackground: s => MaterialDynamicColors.primaryFixed,
|
|
2516
|
-
contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
|
|
2517
|
-
}), MaterialDynamicColors.secondaryFixed = DynamicColor.fromPalette({
|
|
2518
|
-
name: "secondary_fixed",
|
|
2519
|
-
palette: s => s.secondaryPalette,
|
|
2520
|
-
tone: s => isMonochrome(s) ? 80 : 90,
|
|
2521
|
-
isBackground: !0,
|
|
2522
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2523
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2524
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, "lighter", !0)
|
|
2525
|
-
}), MaterialDynamicColors.secondaryFixedDim = DynamicColor.fromPalette({
|
|
2526
|
-
name: "secondary_fixed_dim",
|
|
2527
|
-
palette: s => s.secondaryPalette,
|
|
2528
|
-
tone: s => isMonochrome(s) ? 70 : 80,
|
|
2529
|
-
isBackground: !0,
|
|
2530
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2531
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2532
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, "lighter", !0)
|
|
2533
|
-
}), MaterialDynamicColors.onSecondaryFixed = DynamicColor.fromPalette({
|
|
2534
|
-
name: "on_secondary_fixed",
|
|
2535
|
-
palette: s => s.secondaryPalette,
|
|
2536
|
-
tone: s => 10,
|
|
2537
|
-
background: s => MaterialDynamicColors.secondaryFixedDim,
|
|
2538
|
-
secondBackground: s => MaterialDynamicColors.secondaryFixed,
|
|
2539
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2540
|
-
}), MaterialDynamicColors.onSecondaryFixedVariant = DynamicColor.fromPalette({
|
|
2541
|
-
name: "on_secondary_fixed_variant",
|
|
2542
|
-
palette: s => s.secondaryPalette,
|
|
2543
|
-
tone: s => isMonochrome(s) ? 25 : 30,
|
|
2544
|
-
background: s => MaterialDynamicColors.secondaryFixedDim,
|
|
2545
|
-
secondBackground: s => MaterialDynamicColors.secondaryFixed,
|
|
2546
|
-
contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
|
|
2547
|
-
}), MaterialDynamicColors.tertiaryFixed = DynamicColor.fromPalette({
|
|
2548
|
-
name: "tertiary_fixed",
|
|
2549
|
-
palette: s => s.tertiaryPalette,
|
|
2550
|
-
tone: s => isMonochrome(s) ? 40 : 90,
|
|
2551
|
-
isBackground: !0,
|
|
2552
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2553
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2554
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, "lighter", !0)
|
|
2555
|
-
}), MaterialDynamicColors.tertiaryFixedDim = DynamicColor.fromPalette({
|
|
2556
|
-
name: "tertiary_fixed_dim",
|
|
2557
|
-
palette: s => s.tertiaryPalette,
|
|
2558
|
-
tone: s => isMonochrome(s) ? 30 : 80,
|
|
2559
|
-
isBackground: !0,
|
|
2560
|
-
background: s => MaterialDynamicColors.highestSurface(s),
|
|
2561
|
-
contrastCurve: new ContrastCurve(1, 1, 3, 7),
|
|
2562
|
-
toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, "lighter", !0)
|
|
2563
|
-
}), MaterialDynamicColors.onTertiaryFixed = DynamicColor.fromPalette({
|
|
2564
|
-
name: "on_tertiary_fixed",
|
|
2565
|
-
palette: s => s.tertiaryPalette,
|
|
2566
|
-
tone: s => isMonochrome(s) ? 100 : 10,
|
|
2567
|
-
background: s => MaterialDynamicColors.tertiaryFixedDim,
|
|
2568
|
-
secondBackground: s => MaterialDynamicColors.tertiaryFixed,
|
|
2569
|
-
contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
|
|
2570
|
-
}), MaterialDynamicColors.onTertiaryFixedVariant = DynamicColor.fromPalette({
|
|
2571
|
-
name: "on_tertiary_fixed_variant",
|
|
2572
|
-
palette: s => s.tertiaryPalette,
|
|
2573
|
-
tone: s => isMonochrome(s) ? 90 : 30,
|
|
2574
|
-
background: s => MaterialDynamicColors.tertiaryFixedDim,
|
|
2575
|
-
secondBackground: s => MaterialDynamicColors.tertiaryFixed,
|
|
2576
|
-
contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
|
|
2577
|
-
});
|
|
2578
|
-
class TonalPalette {
|
|
2579
|
-
static fromInt(argb) {
|
|
2580
|
-
const hct = Hct.fromInt(argb);
|
|
2581
|
-
return TonalPalette.fromHct(hct);
|
|
3662
|
+
constructor() {
|
|
3663
|
+
this.allColors = [this.background(), this.onBackground(), this.surface(), this.surfaceDim(), this.surfaceBright(), this.surfaceContainerLowest(), this.surfaceContainerLow(), this.surfaceContainer(), this.surfaceContainerHigh(), this.surfaceContainerHighest(), this.onSurface(), this.onSurfaceVariant(), this.outline(), this.outlineVariant(), this.inverseSurface(), this.inverseOnSurface(), this.primary(), this.primaryDim(), this.onPrimary(), this.primaryContainer(), this.onPrimaryContainer(), this.primaryFixed(), this.primaryFixedDim(), this.onPrimaryFixed(), this.onPrimaryFixedVariant(), this.inversePrimary(), this.secondary(), this.secondaryDim(), this.onSecondary(), this.secondaryContainer(), this.onSecondaryContainer(), this.secondaryFixed(), this.secondaryFixedDim(), this.onSecondaryFixed(), this.onSecondaryFixedVariant(), this.tertiary(), this.tertiaryDim(), this.onTertiary(), this.tertiaryContainer(), this.onTertiaryContainer(), this.tertiaryFixed(), this.tertiaryFixedDim(), this.onTertiaryFixed(), this.onTertiaryFixedVariant(), this.error(), this.errorDim(), this.onError(), this.errorContainer(), this.onErrorContainer()].filter(c => void 0 !== c);
|
|
2582
3664
|
}
|
|
2583
|
-
|
|
2584
|
-
return
|
|
3665
|
+
highestSurface(s) {
|
|
3666
|
+
return MaterialDynamicColors.colorSpec.highestSurface(s);
|
|
2585
3667
|
}
|
|
2586
|
-
|
|
2587
|
-
return
|
|
3668
|
+
primaryPaletteKeyColor() {
|
|
3669
|
+
return MaterialDynamicColors.colorSpec.primaryPaletteKeyColor();
|
|
2588
3670
|
}
|
|
2589
|
-
|
|
2590
|
-
|
|
3671
|
+
secondaryPaletteKeyColor() {
|
|
3672
|
+
return MaterialDynamicColors.colorSpec.secondaryPaletteKeyColor();
|
|
2591
3673
|
}
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
smallestDelta = Math.abs(smallestDeltaHct.chroma - chroma);
|
|
2595
|
-
for (let delta = 1; delta < 50; delta += 1) {
|
|
2596
|
-
if (Math.round(chroma) === Math.round(smallestDeltaHct.chroma)) return smallestDeltaHct;
|
|
2597
|
-
const hctAdd = Hct.from(hue, chroma, 50 + delta),
|
|
2598
|
-
hctAddDelta = Math.abs(hctAdd.chroma - chroma);
|
|
2599
|
-
hctAddDelta < smallestDelta && (smallestDelta = hctAddDelta, smallestDeltaHct = hctAdd);
|
|
2600
|
-
const hctSubtract = Hct.from(hue, chroma, 50 - delta),
|
|
2601
|
-
hctSubtractDelta = Math.abs(hctSubtract.chroma - chroma);
|
|
2602
|
-
hctSubtractDelta < smallestDelta && (smallestDelta = hctSubtractDelta, smallestDeltaHct = hctSubtract);
|
|
2603
|
-
}
|
|
2604
|
-
return smallestDeltaHct;
|
|
3674
|
+
tertiaryPaletteKeyColor() {
|
|
3675
|
+
return MaterialDynamicColors.colorSpec.tertiaryPaletteKeyColor();
|
|
2605
3676
|
}
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
return void 0 === argb && (argb = Hct.from(this.hue, this.chroma, tone).toInt(), this.cache.set(tone, argb)), argb;
|
|
3677
|
+
neutralPaletteKeyColor() {
|
|
3678
|
+
return MaterialDynamicColors.colorSpec.neutralPaletteKeyColor();
|
|
2609
3679
|
}
|
|
2610
|
-
|
|
2611
|
-
return
|
|
3680
|
+
neutralVariantPaletteKeyColor() {
|
|
3681
|
+
return MaterialDynamicColors.colorSpec.neutralVariantPaletteKeyColor();
|
|
2612
3682
|
}
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
static of(argb) {
|
|
2616
|
-
return new CorePalette(argb, !1);
|
|
3683
|
+
errorPaletteKeyColor() {
|
|
3684
|
+
return MaterialDynamicColors.colorSpec.errorPaletteKeyColor();
|
|
2617
3685
|
}
|
|
2618
|
-
|
|
2619
|
-
return
|
|
3686
|
+
background() {
|
|
3687
|
+
return MaterialDynamicColors.colorSpec.background();
|
|
2620
3688
|
}
|
|
2621
|
-
|
|
2622
|
-
return
|
|
3689
|
+
onBackground() {
|
|
3690
|
+
return MaterialDynamicColors.colorSpec.onBackground();
|
|
2623
3691
|
}
|
|
2624
|
-
|
|
2625
|
-
return
|
|
3692
|
+
surface() {
|
|
3693
|
+
return MaterialDynamicColors.colorSpec.surface();
|
|
2626
3694
|
}
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
3695
|
+
surfaceDim() {
|
|
3696
|
+
return MaterialDynamicColors.colorSpec.surfaceDim();
|
|
3697
|
+
}
|
|
3698
|
+
surfaceBright() {
|
|
3699
|
+
return MaterialDynamicColors.colorSpec.surfaceBright();
|
|
3700
|
+
}
|
|
3701
|
+
surfaceContainerLowest() {
|
|
3702
|
+
return MaterialDynamicColors.colorSpec.surfaceContainerLowest();
|
|
3703
|
+
}
|
|
3704
|
+
surfaceContainerLow() {
|
|
3705
|
+
return MaterialDynamicColors.colorSpec.surfaceContainerLow();
|
|
3706
|
+
}
|
|
3707
|
+
surfaceContainer() {
|
|
3708
|
+
return MaterialDynamicColors.colorSpec.surfaceContainer();
|
|
3709
|
+
}
|
|
3710
|
+
surfaceContainerHigh() {
|
|
3711
|
+
return MaterialDynamicColors.colorSpec.surfaceContainerHigh();
|
|
3712
|
+
}
|
|
3713
|
+
surfaceContainerHighest() {
|
|
3714
|
+
return MaterialDynamicColors.colorSpec.surfaceContainerHighest();
|
|
3715
|
+
}
|
|
3716
|
+
onSurface() {
|
|
3717
|
+
return MaterialDynamicColors.colorSpec.onSurface();
|
|
3718
|
+
}
|
|
3719
|
+
surfaceVariant() {
|
|
3720
|
+
return MaterialDynamicColors.colorSpec.surfaceVariant();
|
|
3721
|
+
}
|
|
3722
|
+
onSurfaceVariant() {
|
|
3723
|
+
return MaterialDynamicColors.colorSpec.onSurfaceVariant();
|
|
3724
|
+
}
|
|
3725
|
+
outline() {
|
|
3726
|
+
return MaterialDynamicColors.colorSpec.outline();
|
|
3727
|
+
}
|
|
3728
|
+
outlineVariant() {
|
|
3729
|
+
return MaterialDynamicColors.colorSpec.outlineVariant();
|
|
3730
|
+
}
|
|
3731
|
+
inverseSurface() {
|
|
3732
|
+
return MaterialDynamicColors.colorSpec.inverseSurface();
|
|
3733
|
+
}
|
|
3734
|
+
inverseOnSurface() {
|
|
3735
|
+
return MaterialDynamicColors.colorSpec.inverseOnSurface();
|
|
3736
|
+
}
|
|
3737
|
+
shadow() {
|
|
3738
|
+
return MaterialDynamicColors.colorSpec.shadow();
|
|
3739
|
+
}
|
|
3740
|
+
scrim() {
|
|
3741
|
+
return MaterialDynamicColors.colorSpec.scrim();
|
|
3742
|
+
}
|
|
3743
|
+
surfaceTint() {
|
|
3744
|
+
return MaterialDynamicColors.colorSpec.surfaceTint();
|
|
3745
|
+
}
|
|
3746
|
+
primary() {
|
|
3747
|
+
return MaterialDynamicColors.colorSpec.primary();
|
|
3748
|
+
}
|
|
3749
|
+
primaryDim() {
|
|
3750
|
+
return MaterialDynamicColors.colorSpec.primaryDim();
|
|
3751
|
+
}
|
|
3752
|
+
onPrimary() {
|
|
3753
|
+
return MaterialDynamicColors.colorSpec.onPrimary();
|
|
3754
|
+
}
|
|
3755
|
+
primaryContainer() {
|
|
3756
|
+
return MaterialDynamicColors.colorSpec.primaryContainer();
|
|
3757
|
+
}
|
|
3758
|
+
onPrimaryContainer() {
|
|
3759
|
+
return MaterialDynamicColors.colorSpec.onPrimaryContainer();
|
|
3760
|
+
}
|
|
3761
|
+
inversePrimary() {
|
|
3762
|
+
return MaterialDynamicColors.colorSpec.inversePrimary();
|
|
3763
|
+
}
|
|
3764
|
+
primaryFixed() {
|
|
3765
|
+
return MaterialDynamicColors.colorSpec.primaryFixed();
|
|
3766
|
+
}
|
|
3767
|
+
primaryFixedDim() {
|
|
3768
|
+
return MaterialDynamicColors.colorSpec.primaryFixedDim();
|
|
3769
|
+
}
|
|
3770
|
+
onPrimaryFixed() {
|
|
3771
|
+
return MaterialDynamicColors.colorSpec.onPrimaryFixed();
|
|
3772
|
+
}
|
|
3773
|
+
onPrimaryFixedVariant() {
|
|
3774
|
+
return MaterialDynamicColors.colorSpec.onPrimaryFixedVariant();
|
|
3775
|
+
}
|
|
3776
|
+
secondary() {
|
|
3777
|
+
return MaterialDynamicColors.colorSpec.secondary();
|
|
3778
|
+
}
|
|
3779
|
+
secondaryDim() {
|
|
3780
|
+
return MaterialDynamicColors.colorSpec.secondaryDim();
|
|
3781
|
+
}
|
|
3782
|
+
onSecondary() {
|
|
3783
|
+
return MaterialDynamicColors.colorSpec.onSecondary();
|
|
3784
|
+
}
|
|
3785
|
+
secondaryContainer() {
|
|
3786
|
+
return MaterialDynamicColors.colorSpec.secondaryContainer();
|
|
3787
|
+
}
|
|
3788
|
+
onSecondaryContainer() {
|
|
3789
|
+
return MaterialDynamicColors.colorSpec.onSecondaryContainer();
|
|
3790
|
+
}
|
|
3791
|
+
secondaryFixed() {
|
|
3792
|
+
return MaterialDynamicColors.colorSpec.secondaryFixed();
|
|
3793
|
+
}
|
|
3794
|
+
secondaryFixedDim() {
|
|
3795
|
+
return MaterialDynamicColors.colorSpec.secondaryFixedDim();
|
|
3796
|
+
}
|
|
3797
|
+
onSecondaryFixed() {
|
|
3798
|
+
return MaterialDynamicColors.colorSpec.onSecondaryFixed();
|
|
3799
|
+
}
|
|
3800
|
+
onSecondaryFixedVariant() {
|
|
3801
|
+
return MaterialDynamicColors.colorSpec.onSecondaryFixedVariant();
|
|
3802
|
+
}
|
|
3803
|
+
tertiary() {
|
|
3804
|
+
return MaterialDynamicColors.colorSpec.tertiary();
|
|
3805
|
+
}
|
|
3806
|
+
tertiaryDim() {
|
|
3807
|
+
return MaterialDynamicColors.colorSpec.tertiaryDim();
|
|
3808
|
+
}
|
|
3809
|
+
onTertiary() {
|
|
3810
|
+
return MaterialDynamicColors.colorSpec.onTertiary();
|
|
3811
|
+
}
|
|
3812
|
+
tertiaryContainer() {
|
|
3813
|
+
return MaterialDynamicColors.colorSpec.tertiaryContainer();
|
|
3814
|
+
}
|
|
3815
|
+
onTertiaryContainer() {
|
|
3816
|
+
return MaterialDynamicColors.colorSpec.onTertiaryContainer();
|
|
3817
|
+
}
|
|
3818
|
+
tertiaryFixed() {
|
|
3819
|
+
return MaterialDynamicColors.colorSpec.tertiaryFixed();
|
|
3820
|
+
}
|
|
3821
|
+
tertiaryFixedDim() {
|
|
3822
|
+
return MaterialDynamicColors.colorSpec.tertiaryFixedDim();
|
|
3823
|
+
}
|
|
3824
|
+
onTertiaryFixed() {
|
|
3825
|
+
return MaterialDynamicColors.colorSpec.onTertiaryFixed();
|
|
3826
|
+
}
|
|
3827
|
+
onTertiaryFixedVariant() {
|
|
3828
|
+
return MaterialDynamicColors.colorSpec.onTertiaryFixedVariant();
|
|
3829
|
+
}
|
|
3830
|
+
error() {
|
|
3831
|
+
return MaterialDynamicColors.colorSpec.error();
|
|
3832
|
+
}
|
|
3833
|
+
errorDim() {
|
|
3834
|
+
return MaterialDynamicColors.colorSpec.errorDim();
|
|
3835
|
+
}
|
|
3836
|
+
onError() {
|
|
3837
|
+
return MaterialDynamicColors.colorSpec.onError();
|
|
3838
|
+
}
|
|
3839
|
+
errorContainer() {
|
|
3840
|
+
return MaterialDynamicColors.colorSpec.errorContainer();
|
|
3841
|
+
}
|
|
3842
|
+
onErrorContainer() {
|
|
3843
|
+
return MaterialDynamicColors.colorSpec.onErrorContainer();
|
|
3844
|
+
}
|
|
3845
|
+
static highestSurface(s) {
|
|
3846
|
+
return MaterialDynamicColors.colorSpec.highestSurface(s);
|
|
3847
|
+
}
|
|
3848
|
+
}
|
|
3849
|
+
MaterialDynamicColors.contentAccentToneDelta = 15, MaterialDynamicColors.colorSpec = new ColorSpecDelegateImpl2025(), MaterialDynamicColors.primaryPaletteKeyColor = MaterialDynamicColors.colorSpec.primaryPaletteKeyColor(), MaterialDynamicColors.secondaryPaletteKeyColor = MaterialDynamicColors.colorSpec.secondaryPaletteKeyColor(), MaterialDynamicColors.tertiaryPaletteKeyColor = MaterialDynamicColors.colorSpec.tertiaryPaletteKeyColor(), MaterialDynamicColors.neutralPaletteKeyColor = MaterialDynamicColors.colorSpec.neutralPaletteKeyColor(), MaterialDynamicColors.neutralVariantPaletteKeyColor = MaterialDynamicColors.colorSpec.neutralVariantPaletteKeyColor(), MaterialDynamicColors.background = MaterialDynamicColors.colorSpec.background(), MaterialDynamicColors.onBackground = MaterialDynamicColors.colorSpec.onBackground(), MaterialDynamicColors.surface = MaterialDynamicColors.colorSpec.surface(), MaterialDynamicColors.surfaceDim = MaterialDynamicColors.colorSpec.surfaceDim(), MaterialDynamicColors.surfaceBright = MaterialDynamicColors.colorSpec.surfaceBright(), MaterialDynamicColors.surfaceContainerLowest = MaterialDynamicColors.colorSpec.surfaceContainerLowest(), MaterialDynamicColors.surfaceContainerLow = MaterialDynamicColors.colorSpec.surfaceContainerLow(), MaterialDynamicColors.surfaceContainer = MaterialDynamicColors.colorSpec.surfaceContainer(), MaterialDynamicColors.surfaceContainerHigh = MaterialDynamicColors.colorSpec.surfaceContainerHigh(), MaterialDynamicColors.surfaceContainerHighest = MaterialDynamicColors.colorSpec.surfaceContainerHighest(), MaterialDynamicColors.onSurface = MaterialDynamicColors.colorSpec.onSurface(), MaterialDynamicColors.surfaceVariant = MaterialDynamicColors.colorSpec.surfaceVariant(), MaterialDynamicColors.onSurfaceVariant = MaterialDynamicColors.colorSpec.onSurfaceVariant(), MaterialDynamicColors.inverseSurface = MaterialDynamicColors.colorSpec.inverseSurface(), MaterialDynamicColors.inverseOnSurface = MaterialDynamicColors.colorSpec.inverseOnSurface(), MaterialDynamicColors.outline = MaterialDynamicColors.colorSpec.outline(), MaterialDynamicColors.outlineVariant = MaterialDynamicColors.colorSpec.outlineVariant(), MaterialDynamicColors.shadow = MaterialDynamicColors.colorSpec.shadow(), MaterialDynamicColors.scrim = MaterialDynamicColors.colorSpec.scrim(), MaterialDynamicColors.surfaceTint = MaterialDynamicColors.colorSpec.surfaceTint(), MaterialDynamicColors.primary = MaterialDynamicColors.colorSpec.primary(), MaterialDynamicColors.onPrimary = MaterialDynamicColors.colorSpec.onPrimary(), MaterialDynamicColors.primaryContainer = MaterialDynamicColors.colorSpec.primaryContainer(), MaterialDynamicColors.onPrimaryContainer = MaterialDynamicColors.colorSpec.onPrimaryContainer(), MaterialDynamicColors.inversePrimary = MaterialDynamicColors.colorSpec.inversePrimary(), MaterialDynamicColors.secondary = MaterialDynamicColors.colorSpec.secondary(), MaterialDynamicColors.onSecondary = MaterialDynamicColors.colorSpec.onSecondary(), MaterialDynamicColors.secondaryContainer = MaterialDynamicColors.colorSpec.secondaryContainer(), MaterialDynamicColors.onSecondaryContainer = MaterialDynamicColors.colorSpec.onSecondaryContainer(), MaterialDynamicColors.tertiary = MaterialDynamicColors.colorSpec.tertiary(), MaterialDynamicColors.onTertiary = MaterialDynamicColors.colorSpec.onTertiary(), MaterialDynamicColors.tertiaryContainer = MaterialDynamicColors.colorSpec.tertiaryContainer(), MaterialDynamicColors.onTertiaryContainer = MaterialDynamicColors.colorSpec.onTertiaryContainer(), MaterialDynamicColors.error = MaterialDynamicColors.colorSpec.error(), MaterialDynamicColors.onError = MaterialDynamicColors.colorSpec.onError(), MaterialDynamicColors.errorContainer = MaterialDynamicColors.colorSpec.errorContainer(), MaterialDynamicColors.onErrorContainer = MaterialDynamicColors.colorSpec.onErrorContainer(), MaterialDynamicColors.primaryFixed = MaterialDynamicColors.colorSpec.primaryFixed(), MaterialDynamicColors.primaryFixedDim = MaterialDynamicColors.colorSpec.primaryFixedDim(), MaterialDynamicColors.onPrimaryFixed = MaterialDynamicColors.colorSpec.onPrimaryFixed(), MaterialDynamicColors.onPrimaryFixedVariant = MaterialDynamicColors.colorSpec.onPrimaryFixedVariant(), MaterialDynamicColors.secondaryFixed = MaterialDynamicColors.colorSpec.secondaryFixed(), MaterialDynamicColors.secondaryFixedDim = MaterialDynamicColors.colorSpec.secondaryFixedDim(), MaterialDynamicColors.onSecondaryFixed = MaterialDynamicColors.colorSpec.onSecondaryFixed(), MaterialDynamicColors.onSecondaryFixedVariant = MaterialDynamicColors.colorSpec.onSecondaryFixedVariant(), MaterialDynamicColors.tertiaryFixed = MaterialDynamicColors.colorSpec.tertiaryFixed(), MaterialDynamicColors.tertiaryFixedDim = MaterialDynamicColors.colorSpec.tertiaryFixedDim(), MaterialDynamicColors.onTertiaryFixed = MaterialDynamicColors.colorSpec.onTertiaryFixed(), MaterialDynamicColors.onTertiaryFixedVariant = MaterialDynamicColors.colorSpec.onTertiaryFixedVariant();
|
|
3850
|
+
class DynamicScheme {
|
|
3851
|
+
static maybeFallbackSpecVersion(specVersion, variant) {
|
|
3852
|
+
switch (variant) {
|
|
3853
|
+
case Variant.EXPRESSIVE:
|
|
3854
|
+
case Variant.VIBRANT:
|
|
3855
|
+
case Variant.TONAL_SPOT:
|
|
3856
|
+
case Variant.NEUTRAL:
|
|
3857
|
+
return specVersion;
|
|
3858
|
+
default:
|
|
3859
|
+
return "2021";
|
|
2648
3860
|
}
|
|
2649
|
-
return palette;
|
|
2650
3861
|
}
|
|
2651
|
-
constructor(
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
3862
|
+
constructor(args) {
|
|
3863
|
+
this.sourceColorArgb = args.sourceColorHct.toInt(), this.variant = args.variant, this.contrastLevel = args.contrastLevel, this.isDark = args.isDark, this.platform = args.platform ?? "phone", this.specVersion = DynamicScheme.maybeFallbackSpecVersion(args.specVersion ?? "2021", this.variant), this.sourceColorHct = args.sourceColorHct, this.primaryPalette = args.primaryPalette ?? getSpec(this.specVersion).getPrimaryPalette(this.variant, args.sourceColorHct, this.isDark, this.platform, this.contrastLevel), this.secondaryPalette = args.secondaryPalette ?? getSpec(this.specVersion).getSecondaryPalette(this.variant, args.sourceColorHct, this.isDark, this.platform, this.contrastLevel), this.tertiaryPalette = args.tertiaryPalette ?? getSpec(this.specVersion).getTertiaryPalette(this.variant, args.sourceColorHct, this.isDark, this.platform, this.contrastLevel), this.neutralPalette = args.neutralPalette ?? getSpec(this.specVersion).getNeutralPalette(this.variant, args.sourceColorHct, this.isDark, this.platform, this.contrastLevel), this.neutralVariantPalette = args.neutralVariantPalette ?? getSpec(this.specVersion).getNeutralVariantPalette(this.variant, args.sourceColorHct, this.isDark, this.platform, this.contrastLevel), this.errorPalette = args.errorPalette ?? getSpec(this.specVersion).getErrorPalette(this.variant, args.sourceColorHct, this.isDark, this.platform, this.contrastLevel) ?? TonalPalette.fromHueAndChroma(25, 84), this.colors = new MaterialDynamicColors();
|
|
3864
|
+
}
|
|
3865
|
+
toString() {
|
|
3866
|
+
return `Scheme: variant=${Variant[this.variant]}, mode=${this.isDark ? "dark" : "light"}, platform=${this.platform}, contrastLevel=${this.contrastLevel.toFixed(1)}, seed=${this.sourceColorHct.toString()}, specVersion=${this.specVersion}`;
|
|
3867
|
+
}
|
|
3868
|
+
static getPiecewiseHue(sourceColorHct, hueBreakpoints, hues) {
|
|
3869
|
+
const size = Math.min(hueBreakpoints.length - 1, hues.length),
|
|
3870
|
+
sourceHue = sourceColorHct.hue;
|
|
3871
|
+
for (let i = 0; i < size; i++) if (sourceHue >= hueBreakpoints[i] && sourceHue < hueBreakpoints[i + 1]) return sanitizeDegreesDouble(hues[i]);
|
|
3872
|
+
return sourceHue;
|
|
3873
|
+
}
|
|
3874
|
+
static getRotatedHue(sourceColorHct, hueBreakpoints, rotations) {
|
|
3875
|
+
let rotation = DynamicScheme.getPiecewiseHue(sourceColorHct, hueBreakpoints, rotations);
|
|
3876
|
+
return Math.min(hueBreakpoints.length - 1, rotations.length) <= 0 && (rotation = 0), sanitizeDegreesDouble(sourceColorHct.hue + rotation);
|
|
3877
|
+
}
|
|
3878
|
+
getArgb(dynamicColor) {
|
|
3879
|
+
return dynamicColor.getArgb(this);
|
|
3880
|
+
}
|
|
3881
|
+
getHct(dynamicColor) {
|
|
3882
|
+
return dynamicColor.getHct(this);
|
|
3883
|
+
}
|
|
3884
|
+
get primaryPaletteKeyColor() {
|
|
3885
|
+
return this.getArgb(this.colors.primaryPaletteKeyColor());
|
|
3886
|
+
}
|
|
3887
|
+
get secondaryPaletteKeyColor() {
|
|
3888
|
+
return this.getArgb(this.colors.secondaryPaletteKeyColor());
|
|
3889
|
+
}
|
|
3890
|
+
get tertiaryPaletteKeyColor() {
|
|
3891
|
+
return this.getArgb(this.colors.tertiaryPaletteKeyColor());
|
|
3892
|
+
}
|
|
3893
|
+
get neutralPaletteKeyColor() {
|
|
3894
|
+
return this.getArgb(this.colors.neutralPaletteKeyColor());
|
|
3895
|
+
}
|
|
3896
|
+
get neutralVariantPaletteKeyColor() {
|
|
3897
|
+
return this.getArgb(this.colors.neutralVariantPaletteKeyColor());
|
|
3898
|
+
}
|
|
3899
|
+
get errorPaletteKeyColor() {
|
|
3900
|
+
return this.getArgb(this.colors.errorPaletteKeyColor());
|
|
3901
|
+
}
|
|
3902
|
+
get background() {
|
|
3903
|
+
return this.getArgb(this.colors.background());
|
|
3904
|
+
}
|
|
3905
|
+
get onBackground() {
|
|
3906
|
+
return this.getArgb(this.colors.onBackground());
|
|
3907
|
+
}
|
|
3908
|
+
get surface() {
|
|
3909
|
+
return this.getArgb(this.colors.surface());
|
|
3910
|
+
}
|
|
3911
|
+
get surfaceDim() {
|
|
3912
|
+
return this.getArgb(this.colors.surfaceDim());
|
|
3913
|
+
}
|
|
3914
|
+
get surfaceBright() {
|
|
3915
|
+
return this.getArgb(this.colors.surfaceBright());
|
|
3916
|
+
}
|
|
3917
|
+
get surfaceContainerLowest() {
|
|
3918
|
+
return this.getArgb(this.colors.surfaceContainerLowest());
|
|
3919
|
+
}
|
|
3920
|
+
get surfaceContainerLow() {
|
|
3921
|
+
return this.getArgb(this.colors.surfaceContainerLow());
|
|
3922
|
+
}
|
|
3923
|
+
get surfaceContainer() {
|
|
3924
|
+
return this.getArgb(this.colors.surfaceContainer());
|
|
3925
|
+
}
|
|
3926
|
+
get surfaceContainerHigh() {
|
|
3927
|
+
return this.getArgb(this.colors.surfaceContainerHigh());
|
|
3928
|
+
}
|
|
3929
|
+
get surfaceContainerHighest() {
|
|
3930
|
+
return this.getArgb(this.colors.surfaceContainerHighest());
|
|
3931
|
+
}
|
|
3932
|
+
get onSurface() {
|
|
3933
|
+
return this.getArgb(this.colors.onSurface());
|
|
3934
|
+
}
|
|
3935
|
+
get surfaceVariant() {
|
|
3936
|
+
return this.getArgb(this.colors.surfaceVariant());
|
|
3937
|
+
}
|
|
3938
|
+
get onSurfaceVariant() {
|
|
3939
|
+
return this.getArgb(this.colors.onSurfaceVariant());
|
|
3940
|
+
}
|
|
3941
|
+
get inverseSurface() {
|
|
3942
|
+
return this.getArgb(this.colors.inverseSurface());
|
|
3943
|
+
}
|
|
3944
|
+
get inverseOnSurface() {
|
|
3945
|
+
return this.getArgb(this.colors.inverseOnSurface());
|
|
3946
|
+
}
|
|
3947
|
+
get outline() {
|
|
3948
|
+
return this.getArgb(this.colors.outline());
|
|
3949
|
+
}
|
|
3950
|
+
get outlineVariant() {
|
|
3951
|
+
return this.getArgb(this.colors.outlineVariant());
|
|
3952
|
+
}
|
|
3953
|
+
get shadow() {
|
|
3954
|
+
return this.getArgb(this.colors.shadow());
|
|
3955
|
+
}
|
|
3956
|
+
get scrim() {
|
|
3957
|
+
return this.getArgb(this.colors.scrim());
|
|
3958
|
+
}
|
|
3959
|
+
get surfaceTint() {
|
|
3960
|
+
return this.getArgb(this.colors.surfaceTint());
|
|
2656
3961
|
}
|
|
2657
|
-
}
|
|
2658
|
-
class Scheme {
|
|
2659
3962
|
get primary() {
|
|
2660
|
-
return this.
|
|
3963
|
+
return this.getArgb(this.colors.primary());
|
|
3964
|
+
}
|
|
3965
|
+
get primaryDim() {
|
|
3966
|
+
const primaryDim = this.colors.primaryDim();
|
|
3967
|
+
if (void 0 === primaryDim) throw new Error("`primaryDim` color is undefined prior to 2025 spec.");
|
|
3968
|
+
return this.getArgb(primaryDim);
|
|
2661
3969
|
}
|
|
2662
3970
|
get onPrimary() {
|
|
2663
|
-
return this.
|
|
3971
|
+
return this.getArgb(this.colors.onPrimary());
|
|
2664
3972
|
}
|
|
2665
3973
|
get primaryContainer() {
|
|
2666
|
-
return this.
|
|
3974
|
+
return this.getArgb(this.colors.primaryContainer());
|
|
2667
3975
|
}
|
|
2668
3976
|
get onPrimaryContainer() {
|
|
2669
|
-
return this.
|
|
3977
|
+
return this.getArgb(this.colors.onPrimaryContainer());
|
|
3978
|
+
}
|
|
3979
|
+
get primaryFixed() {
|
|
3980
|
+
return this.getArgb(this.colors.primaryFixed());
|
|
3981
|
+
}
|
|
3982
|
+
get primaryFixedDim() {
|
|
3983
|
+
return this.getArgb(this.colors.primaryFixedDim());
|
|
3984
|
+
}
|
|
3985
|
+
get onPrimaryFixed() {
|
|
3986
|
+
return this.getArgb(this.colors.onPrimaryFixed());
|
|
3987
|
+
}
|
|
3988
|
+
get onPrimaryFixedVariant() {
|
|
3989
|
+
return this.getArgb(this.colors.onPrimaryFixedVariant());
|
|
3990
|
+
}
|
|
3991
|
+
get inversePrimary() {
|
|
3992
|
+
return this.getArgb(this.colors.inversePrimary());
|
|
2670
3993
|
}
|
|
2671
3994
|
get secondary() {
|
|
2672
|
-
return this.
|
|
3995
|
+
return this.getArgb(this.colors.secondary());
|
|
3996
|
+
}
|
|
3997
|
+
get secondaryDim() {
|
|
3998
|
+
const secondaryDim = this.colors.secondaryDim();
|
|
3999
|
+
if (void 0 === secondaryDim) throw new Error("`secondaryDim` color is undefined prior to 2025 spec.");
|
|
4000
|
+
return this.getArgb(secondaryDim);
|
|
2673
4001
|
}
|
|
2674
4002
|
get onSecondary() {
|
|
2675
|
-
return this.
|
|
4003
|
+
return this.getArgb(this.colors.onSecondary());
|
|
2676
4004
|
}
|
|
2677
4005
|
get secondaryContainer() {
|
|
2678
|
-
return this.
|
|
4006
|
+
return this.getArgb(this.colors.secondaryContainer());
|
|
2679
4007
|
}
|
|
2680
4008
|
get onSecondaryContainer() {
|
|
2681
|
-
return this.
|
|
4009
|
+
return this.getArgb(this.colors.onSecondaryContainer());
|
|
4010
|
+
}
|
|
4011
|
+
get secondaryFixed() {
|
|
4012
|
+
return this.getArgb(this.colors.secondaryFixed());
|
|
4013
|
+
}
|
|
4014
|
+
get secondaryFixedDim() {
|
|
4015
|
+
return this.getArgb(this.colors.secondaryFixedDim());
|
|
4016
|
+
}
|
|
4017
|
+
get onSecondaryFixed() {
|
|
4018
|
+
return this.getArgb(this.colors.onSecondaryFixed());
|
|
4019
|
+
}
|
|
4020
|
+
get onSecondaryFixedVariant() {
|
|
4021
|
+
return this.getArgb(this.colors.onSecondaryFixedVariant());
|
|
2682
4022
|
}
|
|
2683
4023
|
get tertiary() {
|
|
2684
|
-
return this.
|
|
4024
|
+
return this.getArgb(this.colors.tertiary());
|
|
4025
|
+
}
|
|
4026
|
+
get tertiaryDim() {
|
|
4027
|
+
const tertiaryDim = this.colors.tertiaryDim();
|
|
4028
|
+
if (void 0 === tertiaryDim) throw new Error("`tertiaryDim` color is undefined prior to 2025 spec.");
|
|
4029
|
+
return this.getArgb(tertiaryDim);
|
|
2685
4030
|
}
|
|
2686
4031
|
get onTertiary() {
|
|
2687
|
-
return this.
|
|
4032
|
+
return this.getArgb(this.colors.onTertiary());
|
|
2688
4033
|
}
|
|
2689
4034
|
get tertiaryContainer() {
|
|
2690
|
-
return this.
|
|
4035
|
+
return this.getArgb(this.colors.tertiaryContainer());
|
|
2691
4036
|
}
|
|
2692
4037
|
get onTertiaryContainer() {
|
|
2693
|
-
return this.
|
|
4038
|
+
return this.getArgb(this.colors.onTertiaryContainer());
|
|
2694
4039
|
}
|
|
2695
|
-
get
|
|
2696
|
-
return this.
|
|
4040
|
+
get tertiaryFixed() {
|
|
4041
|
+
return this.getArgb(this.colors.tertiaryFixed());
|
|
2697
4042
|
}
|
|
2698
|
-
get
|
|
2699
|
-
return this.
|
|
4043
|
+
get tertiaryFixedDim() {
|
|
4044
|
+
return this.getArgb(this.colors.tertiaryFixedDim());
|
|
2700
4045
|
}
|
|
2701
|
-
get
|
|
2702
|
-
return this.
|
|
4046
|
+
get onTertiaryFixed() {
|
|
4047
|
+
return this.getArgb(this.colors.onTertiaryFixed());
|
|
2703
4048
|
}
|
|
2704
|
-
get
|
|
2705
|
-
return this.
|
|
4049
|
+
get onTertiaryFixedVariant() {
|
|
4050
|
+
return this.getArgb(this.colors.onTertiaryFixedVariant());
|
|
2706
4051
|
}
|
|
2707
|
-
get
|
|
2708
|
-
return this.
|
|
4052
|
+
get error() {
|
|
4053
|
+
return this.getArgb(this.colors.error());
|
|
2709
4054
|
}
|
|
2710
|
-
get
|
|
2711
|
-
|
|
4055
|
+
get errorDim() {
|
|
4056
|
+
const errorDim = this.colors.errorDim();
|
|
4057
|
+
if (void 0 === errorDim) throw new Error("`errorDim` color is undefined prior to 2025 spec.");
|
|
4058
|
+
return this.getArgb(errorDim);
|
|
2712
4059
|
}
|
|
2713
|
-
get
|
|
2714
|
-
return this.
|
|
4060
|
+
get onError() {
|
|
4061
|
+
return this.getArgb(this.colors.onError());
|
|
2715
4062
|
}
|
|
2716
|
-
get
|
|
2717
|
-
return this.
|
|
4063
|
+
get errorContainer() {
|
|
4064
|
+
return this.getArgb(this.colors.errorContainer());
|
|
2718
4065
|
}
|
|
2719
|
-
get
|
|
2720
|
-
return this.
|
|
4066
|
+
get onErrorContainer() {
|
|
4067
|
+
return this.getArgb(this.colors.onErrorContainer());
|
|
4068
|
+
}
|
|
4069
|
+
}
|
|
4070
|
+
DynamicScheme.DEFAULT_SPEC_VERSION = "2021", DynamicScheme.DEFAULT_PLATFORM = "phone";
|
|
4071
|
+
class DynamicSchemePalettesDelegateImpl2021 {
|
|
4072
|
+
getPrimaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4073
|
+
switch (variant) {
|
|
4074
|
+
case Variant.CONTENT:
|
|
4075
|
+
case Variant.FIDELITY:
|
|
4076
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma);
|
|
4077
|
+
case Variant.FRUIT_SALAD:
|
|
4078
|
+
return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue - 50), 48);
|
|
4079
|
+
case Variant.MONOCHROME:
|
|
4080
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0);
|
|
4081
|
+
case Variant.NEUTRAL:
|
|
4082
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 12);
|
|
4083
|
+
case Variant.RAINBOW:
|
|
4084
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 48);
|
|
4085
|
+
case Variant.TONAL_SPOT:
|
|
4086
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 36);
|
|
4087
|
+
case Variant.EXPRESSIVE:
|
|
4088
|
+
return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 240), 40);
|
|
4089
|
+
case Variant.VIBRANT:
|
|
4090
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 200);
|
|
4091
|
+
default:
|
|
4092
|
+
throw new Error(`Unsupported variant: ${variant}`);
|
|
4093
|
+
}
|
|
4094
|
+
}
|
|
4095
|
+
getSecondaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4096
|
+
switch (variant) {
|
|
4097
|
+
case Variant.CONTENT:
|
|
4098
|
+
case Variant.FIDELITY:
|
|
4099
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, Math.max(sourceColorHct.chroma - 32, .5 * sourceColorHct.chroma));
|
|
4100
|
+
case Variant.FRUIT_SALAD:
|
|
4101
|
+
return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue - 50), 36);
|
|
4102
|
+
case Variant.MONOCHROME:
|
|
4103
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0);
|
|
4104
|
+
case Variant.NEUTRAL:
|
|
4105
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8);
|
|
4106
|
+
case Variant.RAINBOW:
|
|
4107
|
+
case Variant.TONAL_SPOT:
|
|
4108
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16);
|
|
4109
|
+
case Variant.EXPRESSIVE:
|
|
4110
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 21, 51, 121, 151, 191, 271, 321, 360], [45, 95, 45, 20, 45, 90, 45, 45, 45]), 24);
|
|
4111
|
+
case Variant.VIBRANT:
|
|
4112
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 41, 61, 101, 131, 181, 251, 301, 360], [18, 15, 10, 12, 15, 18, 15, 12, 12]), 24);
|
|
4113
|
+
default:
|
|
4114
|
+
throw new Error(`Unsupported variant: ${variant}`);
|
|
4115
|
+
}
|
|
4116
|
+
}
|
|
4117
|
+
getTertiaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4118
|
+
switch (variant) {
|
|
4119
|
+
case Variant.CONTENT:
|
|
4120
|
+
return TonalPalette.fromHct(DislikeAnalyzer.fixIfDisliked(new TemperatureCache(sourceColorHct).analogous(3, 6)[2]));
|
|
4121
|
+
case Variant.FIDELITY:
|
|
4122
|
+
return TonalPalette.fromHct(DislikeAnalyzer.fixIfDisliked(new TemperatureCache(sourceColorHct).complement));
|
|
4123
|
+
case Variant.FRUIT_SALAD:
|
|
4124
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 36);
|
|
4125
|
+
case Variant.MONOCHROME:
|
|
4126
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0);
|
|
4127
|
+
case Variant.NEUTRAL:
|
|
4128
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16);
|
|
4129
|
+
case Variant.RAINBOW:
|
|
4130
|
+
case Variant.TONAL_SPOT:
|
|
4131
|
+
return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 60), 24);
|
|
4132
|
+
case Variant.EXPRESSIVE:
|
|
4133
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 21, 51, 121, 151, 191, 271, 321, 360], [120, 120, 20, 45, 20, 15, 20, 120, 120]), 32);
|
|
4134
|
+
case Variant.VIBRANT:
|
|
4135
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 41, 61, 101, 131, 181, 251, 301, 360], [35, 30, 20, 25, 30, 35, 30, 25, 25]), 32);
|
|
4136
|
+
default:
|
|
4137
|
+
throw new Error(`Unsupported variant: ${variant}`);
|
|
4138
|
+
}
|
|
4139
|
+
}
|
|
4140
|
+
getNeutralPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4141
|
+
switch (variant) {
|
|
4142
|
+
case Variant.CONTENT:
|
|
4143
|
+
case Variant.FIDELITY:
|
|
4144
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma / 8);
|
|
4145
|
+
case Variant.FRUIT_SALAD:
|
|
4146
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 10);
|
|
4147
|
+
case Variant.MONOCHROME:
|
|
4148
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0);
|
|
4149
|
+
case Variant.NEUTRAL:
|
|
4150
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 2);
|
|
4151
|
+
case Variant.RAINBOW:
|
|
4152
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0);
|
|
4153
|
+
case Variant.TONAL_SPOT:
|
|
4154
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6);
|
|
4155
|
+
case Variant.EXPRESSIVE:
|
|
4156
|
+
return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 15), 8);
|
|
4157
|
+
case Variant.VIBRANT:
|
|
4158
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 10);
|
|
4159
|
+
default:
|
|
4160
|
+
throw new Error(`Unsupported variant: ${variant}`);
|
|
4161
|
+
}
|
|
4162
|
+
}
|
|
4163
|
+
getNeutralVariantPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4164
|
+
switch (variant) {
|
|
4165
|
+
case Variant.CONTENT:
|
|
4166
|
+
case Variant.FIDELITY:
|
|
4167
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma / 8 + 4);
|
|
4168
|
+
case Variant.FRUIT_SALAD:
|
|
4169
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16);
|
|
4170
|
+
case Variant.MONOCHROME:
|
|
4171
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0);
|
|
4172
|
+
case Variant.NEUTRAL:
|
|
4173
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 2);
|
|
4174
|
+
case Variant.RAINBOW:
|
|
4175
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0);
|
|
4176
|
+
case Variant.TONAL_SPOT:
|
|
4177
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8);
|
|
4178
|
+
case Variant.EXPRESSIVE:
|
|
4179
|
+
return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 15), 12);
|
|
4180
|
+
case Variant.VIBRANT:
|
|
4181
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 12);
|
|
4182
|
+
default:
|
|
4183
|
+
throw new Error(`Unsupported variant: ${variant}`);
|
|
4184
|
+
}
|
|
4185
|
+
}
|
|
4186
|
+
getErrorPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {}
|
|
4187
|
+
}
|
|
4188
|
+
class DynamicSchemePalettesDelegateImpl2025 extends DynamicSchemePalettesDelegateImpl2021 {
|
|
4189
|
+
getPrimaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4190
|
+
switch (variant) {
|
|
4191
|
+
case Variant.NEUTRAL:
|
|
4192
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, "phone" === platform ? Hct.isBlue(sourceColorHct.hue) ? 12 : 8 : Hct.isBlue(sourceColorHct.hue) ? 16 : 12);
|
|
4193
|
+
case Variant.TONAL_SPOT:
|
|
4194
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, "phone" === platform && isDark ? 26 : 32);
|
|
4195
|
+
case Variant.EXPRESSIVE:
|
|
4196
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, "phone" === platform ? isDark ? 36 : 48 : 40);
|
|
4197
|
+
case Variant.VIBRANT:
|
|
4198
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, "phone" === platform ? 74 : 56);
|
|
4199
|
+
default:
|
|
4200
|
+
return super.getPrimaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel);
|
|
4201
|
+
}
|
|
4202
|
+
}
|
|
4203
|
+
getSecondaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4204
|
+
switch (variant) {
|
|
4205
|
+
case Variant.NEUTRAL:
|
|
4206
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, "phone" === platform ? Hct.isBlue(sourceColorHct.hue) ? 6 : 4 : Hct.isBlue(sourceColorHct.hue) ? 10 : 6);
|
|
4207
|
+
case Variant.TONAL_SPOT:
|
|
4208
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16);
|
|
4209
|
+
case Variant.EXPRESSIVE:
|
|
4210
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 105, 140, 204, 253, 278, 300, 333, 360], [-160, 155, -100, 96, -96, -156, -165, -160]), "phone" === platform && isDark ? 16 : 24);
|
|
4211
|
+
case Variant.VIBRANT:
|
|
4212
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), "phone" === platform ? 56 : 36);
|
|
4213
|
+
default:
|
|
4214
|
+
return super.getSecondaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel);
|
|
4215
|
+
}
|
|
4216
|
+
}
|
|
4217
|
+
getTertiaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4218
|
+
switch (variant) {
|
|
4219
|
+
case Variant.NEUTRAL:
|
|
4220
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 38, 105, 161, 204, 278, 333, 360], [-32, 26, 10, -39, 24, -15, -32]), "phone" === platform ? 20 : 36);
|
|
4221
|
+
case Variant.TONAL_SPOT:
|
|
4222
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), "phone" === platform ? 28 : 32);
|
|
4223
|
+
case Variant.EXPRESSIVE:
|
|
4224
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 105, 140, 204, 253, 278, 300, 333, 360], [-165, 160, -105, 101, -101, -160, -170, -165]), 48);
|
|
4225
|
+
case Variant.VIBRANT:
|
|
4226
|
+
return TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56);
|
|
4227
|
+
default:
|
|
4228
|
+
return super.getTertiaryPalette(variant, sourceColorHct, isDark, platform, contrastLevel);
|
|
4229
|
+
}
|
|
2721
4230
|
}
|
|
2722
|
-
|
|
2723
|
-
return
|
|
4231
|
+
static getExpressiveNeutralHue(sourceColorHct) {
|
|
4232
|
+
return DynamicScheme.getRotatedHue(sourceColorHct, [0, 71, 124, 253, 278, 300, 360], [10, 0, 10, 0, 10, 0]);
|
|
2724
4233
|
}
|
|
2725
|
-
|
|
2726
|
-
|
|
4234
|
+
static getExpressiveNeutralChroma(sourceColorHct, isDark, platform) {
|
|
4235
|
+
const neutralHue = DynamicSchemePalettesDelegateImpl2025.getExpressiveNeutralHue(sourceColorHct);
|
|
4236
|
+
return "phone" === platform ? isDark ? Hct.isYellow(neutralHue) ? 6 : 14 : 18 : 12;
|
|
2727
4237
|
}
|
|
2728
|
-
|
|
2729
|
-
return
|
|
4238
|
+
static getVibrantNeutralHue(sourceColorHct) {
|
|
4239
|
+
return DynamicScheme.getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
|
|
2730
4240
|
}
|
|
2731
|
-
|
|
2732
|
-
|
|
4241
|
+
static getVibrantNeutralChroma(sourceColorHct, platform) {
|
|
4242
|
+
const neutralHue = DynamicSchemePalettesDelegateImpl2025.getVibrantNeutralHue(sourceColorHct);
|
|
4243
|
+
return "phone" === platform || Hct.isBlue(neutralHue) ? 28 : 20;
|
|
2733
4244
|
}
|
|
2734
|
-
|
|
2735
|
-
|
|
4245
|
+
getNeutralPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4246
|
+
switch (variant) {
|
|
4247
|
+
case Variant.NEUTRAL:
|
|
4248
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, "phone" === platform ? 1.4 : 6);
|
|
4249
|
+
case Variant.TONAL_SPOT:
|
|
4250
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, "phone" === platform ? 5 : 10);
|
|
4251
|
+
case Variant.EXPRESSIVE:
|
|
4252
|
+
return TonalPalette.fromHueAndChroma(DynamicSchemePalettesDelegateImpl2025.getExpressiveNeutralHue(sourceColorHct), DynamicSchemePalettesDelegateImpl2025.getExpressiveNeutralChroma(sourceColorHct, isDark, platform));
|
|
4253
|
+
case Variant.VIBRANT:
|
|
4254
|
+
return TonalPalette.fromHueAndChroma(DynamicSchemePalettesDelegateImpl2025.getVibrantNeutralHue(sourceColorHct), DynamicSchemePalettesDelegateImpl2025.getVibrantNeutralChroma(sourceColorHct, platform));
|
|
4255
|
+
default:
|
|
4256
|
+
return super.getNeutralPalette(variant, sourceColorHct, isDark, platform, contrastLevel);
|
|
4257
|
+
}
|
|
4258
|
+
}
|
|
4259
|
+
getNeutralVariantPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4260
|
+
switch (variant) {
|
|
4261
|
+
case Variant.NEUTRAL:
|
|
4262
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 2.2 * ("phone" === platform ? 1.4 : 6));
|
|
4263
|
+
case Variant.TONAL_SPOT:
|
|
4264
|
+
return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 1.7 * ("phone" === platform ? 5 : 10));
|
|
4265
|
+
case Variant.EXPRESSIVE:
|
|
4266
|
+
const expressiveNeutralHue = DynamicSchemePalettesDelegateImpl2025.getExpressiveNeutralHue(sourceColorHct),
|
|
4267
|
+
expressiveNeutralChroma = DynamicSchemePalettesDelegateImpl2025.getExpressiveNeutralChroma(sourceColorHct, isDark, platform);
|
|
4268
|
+
return TonalPalette.fromHueAndChroma(expressiveNeutralHue, expressiveNeutralChroma * (expressiveNeutralHue >= 105 && expressiveNeutralHue < 125 ? 1.6 : 2.3));
|
|
4269
|
+
case Variant.VIBRANT:
|
|
4270
|
+
const vibrantNeutralHue = DynamicSchemePalettesDelegateImpl2025.getVibrantNeutralHue(sourceColorHct),
|
|
4271
|
+
vibrantNeutralChroma = DynamicSchemePalettesDelegateImpl2025.getVibrantNeutralChroma(sourceColorHct, platform);
|
|
4272
|
+
return TonalPalette.fromHueAndChroma(vibrantNeutralHue, 1.29 * vibrantNeutralChroma);
|
|
4273
|
+
default:
|
|
4274
|
+
return super.getNeutralVariantPalette(variant, sourceColorHct, isDark, platform, contrastLevel);
|
|
4275
|
+
}
|
|
4276
|
+
}
|
|
4277
|
+
getErrorPalette(variant, sourceColorHct, isDark, platform, contrastLevel) {
|
|
4278
|
+
const errorHue = DynamicScheme.getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
|
|
4279
|
+
switch (variant) {
|
|
4280
|
+
case Variant.NEUTRAL:
|
|
4281
|
+
return TonalPalette.fromHueAndChroma(errorHue, "phone" === platform ? 50 : 40);
|
|
4282
|
+
case Variant.TONAL_SPOT:
|
|
4283
|
+
return TonalPalette.fromHueAndChroma(errorHue, "phone" === platform ? 60 : 48);
|
|
4284
|
+
case Variant.EXPRESSIVE:
|
|
4285
|
+
return TonalPalette.fromHueAndChroma(errorHue, "phone" === platform ? 64 : 48);
|
|
4286
|
+
case Variant.VIBRANT:
|
|
4287
|
+
return TonalPalette.fromHueAndChroma(errorHue, "phone" === platform ? 80 : 60);
|
|
4288
|
+
default:
|
|
4289
|
+
return super.getErrorPalette(variant, sourceColorHct, isDark, platform, contrastLevel);
|
|
4290
|
+
}
|
|
2736
4291
|
}
|
|
2737
|
-
|
|
2738
|
-
|
|
4292
|
+
}
|
|
4293
|
+
const spec2021 = new DynamicSchemePalettesDelegateImpl2021(),
|
|
4294
|
+
spec2025 = new DynamicSchemePalettesDelegateImpl2025();
|
|
4295
|
+
function getSpec(specVersion) {
|
|
4296
|
+
return "2025" === specVersion ? spec2025 : spec2021;
|
|
4297
|
+
}
|
|
4298
|
+
class SchemeMonochrome extends DynamicScheme {
|
|
4299
|
+
constructor(sourceColorHct, isDark, contrastLevel, specVersion, platform) {
|
|
4300
|
+
if (specVersion === void 0) {
|
|
4301
|
+
specVersion = DynamicScheme.DEFAULT_SPEC_VERSION;
|
|
4302
|
+
}
|
|
4303
|
+
if (platform === void 0) {
|
|
4304
|
+
platform = DynamicScheme.DEFAULT_PLATFORM;
|
|
4305
|
+
}
|
|
4306
|
+
super({
|
|
4307
|
+
sourceColorHct: sourceColorHct,
|
|
4308
|
+
variant: Variant.MONOCHROME,
|
|
4309
|
+
contrastLevel: contrastLevel,
|
|
4310
|
+
isDark: isDark,
|
|
4311
|
+
platform: platform,
|
|
4312
|
+
specVersion: specVersion
|
|
4313
|
+
});
|
|
2739
4314
|
}
|
|
2740
|
-
|
|
2741
|
-
|
|
4315
|
+
}
|
|
4316
|
+
class SchemeTonalSpot extends DynamicScheme {
|
|
4317
|
+
constructor(sourceColorHct, isDark, contrastLevel, specVersion, platform) {
|
|
4318
|
+
if (specVersion === void 0) {
|
|
4319
|
+
specVersion = DynamicScheme.DEFAULT_SPEC_VERSION;
|
|
4320
|
+
}
|
|
4321
|
+
if (platform === void 0) {
|
|
4322
|
+
platform = DynamicScheme.DEFAULT_PLATFORM;
|
|
4323
|
+
}
|
|
4324
|
+
super({
|
|
4325
|
+
sourceColorHct: sourceColorHct,
|
|
4326
|
+
variant: Variant.TONAL_SPOT,
|
|
4327
|
+
contrastLevel: contrastLevel,
|
|
4328
|
+
isDark: isDark,
|
|
4329
|
+
platform: platform,
|
|
4330
|
+
specVersion: specVersion
|
|
4331
|
+
});
|
|
2742
4332
|
}
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
primary: core.a1.tone(40),
|
|
2761
|
-
onPrimary: core.a1.tone(100),
|
|
2762
|
-
primaryContainer: core.a1.tone(90),
|
|
2763
|
-
onPrimaryContainer: core.a1.tone(10),
|
|
2764
|
-
secondary: core.a2.tone(40),
|
|
2765
|
-
onSecondary: core.a2.tone(100),
|
|
2766
|
-
secondaryContainer: core.a2.tone(90),
|
|
2767
|
-
onSecondaryContainer: core.a2.tone(10),
|
|
2768
|
-
tertiary: core.a3.tone(40),
|
|
2769
|
-
onTertiary: core.a3.tone(100),
|
|
2770
|
-
tertiaryContainer: core.a3.tone(90),
|
|
2771
|
-
onTertiaryContainer: core.a3.tone(10),
|
|
2772
|
-
error: core.error.tone(40),
|
|
2773
|
-
onError: core.error.tone(100),
|
|
2774
|
-
errorContainer: core.error.tone(90),
|
|
2775
|
-
onErrorContainer: core.error.tone(10),
|
|
2776
|
-
background: core.n1.tone(99),
|
|
2777
|
-
onBackground: core.n1.tone(10),
|
|
2778
|
-
surface: core.n1.tone(99),
|
|
2779
|
-
onSurface: core.n1.tone(10),
|
|
2780
|
-
surfaceVariant: core.n2.tone(90),
|
|
2781
|
-
onSurfaceVariant: core.n2.tone(30),
|
|
2782
|
-
outline: core.n2.tone(50),
|
|
2783
|
-
outlineVariant: core.n2.tone(80),
|
|
2784
|
-
shadow: core.n1.tone(0),
|
|
2785
|
-
scrim: core.n1.tone(0),
|
|
2786
|
-
inverseSurface: core.n1.tone(20),
|
|
2787
|
-
inverseOnSurface: core.n1.tone(95),
|
|
2788
|
-
inversePrimary: core.a1.tone(80)
|
|
2789
|
-
});
|
|
2790
|
-
}
|
|
2791
|
-
static darkFromCorePalette(core) {
|
|
2792
|
-
return new Scheme({
|
|
2793
|
-
primary: core.a1.tone(80),
|
|
2794
|
-
onPrimary: core.a1.tone(20),
|
|
2795
|
-
primaryContainer: core.a1.tone(30),
|
|
2796
|
-
onPrimaryContainer: core.a1.tone(90),
|
|
2797
|
-
secondary: core.a2.tone(80),
|
|
2798
|
-
onSecondary: core.a2.tone(20),
|
|
2799
|
-
secondaryContainer: core.a2.tone(30),
|
|
2800
|
-
onSecondaryContainer: core.a2.tone(90),
|
|
2801
|
-
tertiary: core.a3.tone(80),
|
|
2802
|
-
onTertiary: core.a3.tone(20),
|
|
2803
|
-
tertiaryContainer: core.a3.tone(30),
|
|
2804
|
-
onTertiaryContainer: core.a3.tone(90),
|
|
2805
|
-
error: core.error.tone(80),
|
|
2806
|
-
onError: core.error.tone(20),
|
|
2807
|
-
errorContainer: core.error.tone(30),
|
|
2808
|
-
onErrorContainer: core.error.tone(80),
|
|
2809
|
-
background: core.n1.tone(10),
|
|
2810
|
-
onBackground: core.n1.tone(90),
|
|
2811
|
-
surface: core.n1.tone(10),
|
|
2812
|
-
onSurface: core.n1.tone(90),
|
|
2813
|
-
surfaceVariant: core.n2.tone(30),
|
|
2814
|
-
onSurfaceVariant: core.n2.tone(80),
|
|
2815
|
-
outline: core.n2.tone(60),
|
|
2816
|
-
outlineVariant: core.n2.tone(30),
|
|
2817
|
-
shadow: core.n1.tone(0),
|
|
2818
|
-
scrim: core.n1.tone(0),
|
|
2819
|
-
inverseSurface: core.n1.tone(90),
|
|
2820
|
-
inverseOnSurface: core.n1.tone(20),
|
|
2821
|
-
inversePrimary: core.a1.tone(40)
|
|
2822
|
-
});
|
|
2823
|
-
}
|
|
2824
|
-
constructor(props) {
|
|
2825
|
-
this.props = props;
|
|
2826
|
-
}
|
|
2827
|
-
toJSON() {
|
|
2828
|
-
return {
|
|
2829
|
-
...this.props
|
|
2830
|
-
};
|
|
4333
|
+
}
|
|
4334
|
+
class SchemeVibrant extends DynamicScheme {
|
|
4335
|
+
constructor(sourceColorHct, isDark, contrastLevel, specVersion, platform) {
|
|
4336
|
+
if (specVersion === void 0) {
|
|
4337
|
+
specVersion = DynamicScheme.DEFAULT_SPEC_VERSION;
|
|
4338
|
+
}
|
|
4339
|
+
if (platform === void 0) {
|
|
4340
|
+
platform = DynamicScheme.DEFAULT_PLATFORM;
|
|
4341
|
+
}
|
|
4342
|
+
super({
|
|
4343
|
+
sourceColorHct: sourceColorHct,
|
|
4344
|
+
variant: Variant.VIBRANT,
|
|
4345
|
+
contrastLevel: contrastLevel,
|
|
4346
|
+
isDark: isDark,
|
|
4347
|
+
platform: platform,
|
|
4348
|
+
specVersion: specVersion
|
|
4349
|
+
});
|
|
2831
4350
|
}
|
|
2832
4351
|
}
|
|
2833
4352
|
function hexFromArgb(argb) {
|
|
@@ -2851,51 +4370,6 @@
|
|
|
2851
4370
|
function parseIntHex(value) {
|
|
2852
4371
|
return parseInt(value, 16);
|
|
2853
4372
|
}
|
|
2854
|
-
function themeFromSourceColor(source, customColors) {
|
|
2855
|
-
if (customColors === void 0) {
|
|
2856
|
-
customColors = [];
|
|
2857
|
-
}
|
|
2858
|
-
const palette = CorePalette.of(source);
|
|
2859
|
-
return {
|
|
2860
|
-
source: source,
|
|
2861
|
-
schemes: {
|
|
2862
|
-
light: Scheme.light(source),
|
|
2863
|
-
dark: Scheme.dark(source)
|
|
2864
|
-
},
|
|
2865
|
-
palettes: {
|
|
2866
|
-
primary: palette.a1,
|
|
2867
|
-
secondary: palette.a2,
|
|
2868
|
-
tertiary: palette.a3,
|
|
2869
|
-
neutral: palette.n1,
|
|
2870
|
-
neutralVariant: palette.n2,
|
|
2871
|
-
error: palette.error
|
|
2872
|
-
},
|
|
2873
|
-
customColors: customColors.map(c => customColor(source, c))
|
|
2874
|
-
};
|
|
2875
|
-
}
|
|
2876
|
-
function customColor(source, color) {
|
|
2877
|
-
let value = color.value;
|
|
2878
|
-
const from = value,
|
|
2879
|
-
to = source;
|
|
2880
|
-
color.blend && (value = Blend.harmonize(from, to));
|
|
2881
|
-
const tones = CorePalette.of(value).a1;
|
|
2882
|
-
return {
|
|
2883
|
-
color: color,
|
|
2884
|
-
value: value,
|
|
2885
|
-
light: {
|
|
2886
|
-
color: tones.tone(40),
|
|
2887
|
-
onColor: tones.tone(100),
|
|
2888
|
-
colorContainer: tones.tone(90),
|
|
2889
|
-
onColorContainer: tones.tone(10)
|
|
2890
|
-
},
|
|
2891
|
-
dark: {
|
|
2892
|
-
color: tones.tone(80),
|
|
2893
|
-
onColor: tones.tone(20),
|
|
2894
|
-
colorContainer: tones.tone(30),
|
|
2895
|
-
onColorContainer: tones.tone(90)
|
|
2896
|
-
}
|
|
2897
|
-
};
|
|
2898
|
-
}
|
|
2899
4373
|
|
|
2900
4374
|
// eslint-disable-next-line
|
|
2901
4375
|
|
|
@@ -2940,36 +4414,116 @@
|
|
|
2940
4414
|
}
|
|
2941
4415
|
/* eslint-enable */
|
|
2942
4416
|
|
|
2943
|
-
|
|
4417
|
+
let monochromeCached = null;
|
|
4418
|
+
const cachedColors = {};
|
|
4419
|
+
const materialColors = function (hexColor, colorScheme) {
|
|
2944
4420
|
if (hexColor === void 0) {
|
|
2945
4421
|
hexColor = '';
|
|
2946
4422
|
}
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
4423
|
+
if (colorScheme === void 0) {
|
|
4424
|
+
colorScheme = 'default';
|
|
4425
|
+
}
|
|
4426
|
+
const cacheKey = `${hexColor}-${colorScheme}`;
|
|
4427
|
+
if (cachedColors[cacheKey]) {
|
|
4428
|
+
return cachedColors[cacheKey];
|
|
4429
|
+
}
|
|
4430
|
+
if (monochromeCached && colorScheme.includes('monochrome')) {
|
|
4431
|
+
const defaultColors = materialColors(hexColor, colorScheme === 'monochrome' ? 'default' : 'vibrant');
|
|
4432
|
+
cachedColors[cacheKey] = {
|
|
4433
|
+
light: {
|
|
4434
|
+
...defaultColors.light,
|
|
4435
|
+
...monochromeCached.light
|
|
4436
|
+
},
|
|
4437
|
+
dark: {
|
|
4438
|
+
...defaultColors.dark,
|
|
4439
|
+
...monochromeCached.dark
|
|
4440
|
+
}
|
|
4441
|
+
};
|
|
4442
|
+
return cachedColors[cacheKey];
|
|
4443
|
+
}
|
|
4444
|
+
const sourceColor = argbFromHex(`#${hexColor.replace('#', '')}`);
|
|
4445
|
+
let lightScheme;
|
|
4446
|
+
let darkScheme;
|
|
4447
|
+
const hctColor = Hct.fromInt(sourceColor);
|
|
4448
|
+
if (colorScheme === 'default') {
|
|
4449
|
+
lightScheme = new SchemeTonalSpot(hctColor, false, 0, '2025');
|
|
4450
|
+
darkScheme = new SchemeTonalSpot(hctColor, true, 0, '2025');
|
|
4451
|
+
}
|
|
4452
|
+
if (colorScheme === 'vibrant') {
|
|
4453
|
+
lightScheme = new SchemeVibrant(hctColor, false, 0, '2025');
|
|
4454
|
+
darkScheme = new SchemeVibrant(hctColor, true, 0, '2025');
|
|
4455
|
+
}
|
|
4456
|
+
if (colorScheme.includes('monochrome')) {
|
|
4457
|
+
lightScheme = new SchemeMonochrome(hctColor, false, 0, '2025');
|
|
4458
|
+
darkScheme = new SchemeMonochrome(hctColor, true, 0, '2025');
|
|
4459
|
+
}
|
|
4460
|
+
const getColorName = name => {
|
|
4461
|
+
let newName = name;
|
|
4462
|
+
if (name === 'surface_dim') newName = 'surface_variant';
|
|
4463
|
+
if (name === 'surface_container_low') newName = 'surface_1';
|
|
4464
|
+
if (name === 'surface_container') newName = 'surface_2';
|
|
4465
|
+
if (name === 'surface_container_high') newName = 'surface_3';
|
|
4466
|
+
if (name === 'surface_container_highest') newName = 'surface_4';
|
|
4467
|
+
return newName;
|
|
4468
|
+
};
|
|
4469
|
+
const theme = {
|
|
4470
|
+
light: {},
|
|
4471
|
+
dark: {}
|
|
4472
|
+
};
|
|
4473
|
+
lightScheme.colors.allColors.forEach(color => {
|
|
4474
|
+
const name = getColorName(color.name);
|
|
4475
|
+
const argb = color.getArgb(lightScheme);
|
|
4476
|
+
theme.light[name] = argb;
|
|
4477
|
+
});
|
|
4478
|
+
darkScheme.colors.allColors.forEach(color => {
|
|
4479
|
+
const name = getColorName(color.name);
|
|
4480
|
+
const argb = color.getArgb(darkScheme);
|
|
4481
|
+
theme.dark[name] = argb;
|
|
2951
4482
|
});
|
|
4483
|
+
theme.light.surface_5 = argbFromHex(blend(hexFromArgb(theme.light.surface_4), hexFromArgb(theme.light.primary), 0.05));
|
|
4484
|
+
theme.dark.surface_5 = argbFromHex(blend(hexFromArgb(theme.dark.surface_4), hexFromArgb(theme.dark.primary), 0.05));
|
|
2952
4485
|
const name = n => {
|
|
2953
|
-
return n.
|
|
4486
|
+
return n.replace(/_/g, '-');
|
|
2954
4487
|
};
|
|
2955
|
-
const
|
|
2956
|
-
const
|
|
2957
|
-
|
|
4488
|
+
const shouldKeep = prop => {
|
|
4489
|
+
const foreground = ['inverse_primary', 'primary', 'on_primary', 'primary_container', 'on_primary_container', 'secondary', 'on_secondary', 'secondary_container', 'on_secondary_container', 'outline', 'outline_variant'];
|
|
4490
|
+
const background = ['on_surface', 'on_surface_variant', 'inverse_on_surface', 'inverse_surface', 'surface', 'surface_variant', 'surface_1', 'surface_2', 'surface_3', 'surface_4', 'surface_5'];
|
|
4491
|
+
const keep = colorScheme === 'default' ? [...foreground, ...background] : colorScheme === 'vibrant' ? [...foreground, ...background] : background;
|
|
4492
|
+
return keep.includes(prop);
|
|
2958
4493
|
};
|
|
2959
4494
|
const light = {};
|
|
2960
4495
|
const dark = {};
|
|
2961
|
-
Object.keys(theme.
|
|
2962
|
-
if (
|
|
2963
|
-
light[name(`--f7-md-${prop}`)] = hexFromArgb(theme.
|
|
4496
|
+
Object.keys(theme.light).forEach(prop => {
|
|
4497
|
+
if (!shouldKeep(prop)) return;
|
|
4498
|
+
light[name(`--f7-md-${prop}`)] = hexFromArgb(theme.light[prop]);
|
|
2964
4499
|
});
|
|
2965
|
-
Object.keys(theme.
|
|
2966
|
-
if (
|
|
2967
|
-
dark[name(`--f7-md-${prop}`)] = hexFromArgb(theme.
|
|
4500
|
+
Object.keys(theme.dark).forEach(prop => {
|
|
4501
|
+
if (!shouldKeep(prop)) return;
|
|
4502
|
+
dark[name(`--f7-md-${prop}`)] = hexFromArgb(theme.dark[prop]);
|
|
2968
4503
|
});
|
|
2969
|
-
|
|
4504
|
+
if (colorScheme.includes('monochrome')) {
|
|
4505
|
+
monochromeCached = {
|
|
4506
|
+
light,
|
|
4507
|
+
dark
|
|
4508
|
+
};
|
|
4509
|
+
const defaultColors = materialColors(hexColor, colorScheme === 'monochrome' ? 'default' : 'vibrant');
|
|
4510
|
+
cachedColors[cacheKey] = {
|
|
4511
|
+
light: {
|
|
4512
|
+
...defaultColors.light,
|
|
4513
|
+
...light
|
|
4514
|
+
},
|
|
4515
|
+
dark: {
|
|
4516
|
+
...defaultColors.dark,
|
|
4517
|
+
...dark
|
|
4518
|
+
}
|
|
4519
|
+
};
|
|
4520
|
+
return cachedColors[cacheKey];
|
|
4521
|
+
}
|
|
4522
|
+
cachedColors[cacheKey] = {
|
|
2970
4523
|
light,
|
|
2971
4524
|
dark
|
|
2972
4525
|
};
|
|
4526
|
+
return cachedColors[cacheKey];
|
|
2973
4527
|
};
|
|
2974
4528
|
|
|
2975
4529
|
let uniqueNum = 0;
|
|
@@ -3304,31 +4858,40 @@
|
|
|
3304
4858
|
function colorThemeCSSProperties() {
|
|
3305
4859
|
let hex;
|
|
3306
4860
|
let rgb;
|
|
4861
|
+
let mdColorScheme;
|
|
3307
4862
|
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
3308
4863
|
args[_key3] = arguments[_key3];
|
|
3309
4864
|
}
|
|
3310
4865
|
if (args.length === 1) {
|
|
3311
4866
|
hex = args[0];
|
|
3312
4867
|
rgb = colorHexToRgb(hex);
|
|
4868
|
+
} else if (args.length === 2) {
|
|
4869
|
+
hex = args[0];
|
|
4870
|
+
rgb = colorHexToRgb(hex);
|
|
4871
|
+
mdColorScheme = args[1] || 'default';
|
|
3313
4872
|
} else if (args.length === 3) {
|
|
3314
4873
|
rgb = args;
|
|
3315
4874
|
hex = colorRgbToHex(...rgb);
|
|
4875
|
+
} else if (args.length === 4) {
|
|
4876
|
+
rgb = args.slice(0, 3);
|
|
4877
|
+
hex = colorRgbToHex(...rgb);
|
|
4878
|
+
mdColorScheme = args[3] || 'default';
|
|
3316
4879
|
}
|
|
3317
4880
|
if (!rgb) return {};
|
|
3318
4881
|
const {
|
|
3319
4882
|
light,
|
|
3320
4883
|
dark
|
|
3321
|
-
} = materialColors(hex);
|
|
4884
|
+
} = materialColors(hex, mdColorScheme);
|
|
3322
4885
|
const shadeTintIos = getShadeTintColors(rgb);
|
|
3323
4886
|
const shadeTintMdLight = getShadeTintColors(colorHexToRgb(light['--f7-md-primary']));
|
|
3324
4887
|
const shadeTintMdDark = getShadeTintColors(colorHexToRgb(dark['--f7-md-primary']));
|
|
3325
4888
|
Object.keys(light).forEach(key => {
|
|
3326
|
-
if (key.includes('surface-')) {
|
|
4889
|
+
if (key.includes('surface-') && !key.includes('-rgb')) {
|
|
3327
4890
|
light[`${key}-rgb`] = colorHexToRgb(light[key]);
|
|
3328
4891
|
}
|
|
3329
4892
|
});
|
|
3330
4893
|
Object.keys(dark).forEach(key => {
|
|
3331
|
-
if (key.includes('surface-')) {
|
|
4894
|
+
if (key.includes('surface-') && !key.includes('-rgb')) {
|
|
3332
4895
|
dark[`${key}-rgb`] = colorHexToRgb(dark[key]);
|
|
3333
4896
|
}
|
|
3334
4897
|
});
|
|
@@ -3385,10 +4948,13 @@
|
|
|
3385
4948
|
});
|
|
3386
4949
|
return arr;
|
|
3387
4950
|
}
|
|
3388
|
-
function colorThemeCSSStyles(colors) {
|
|
4951
|
+
function colorThemeCSSStyles(colors, mdColorScheme) {
|
|
3389
4952
|
if (colors === void 0) {
|
|
3390
4953
|
colors = {};
|
|
3391
4954
|
}
|
|
4955
|
+
if (mdColorScheme === void 0) {
|
|
4956
|
+
mdColorScheme = 'default';
|
|
4957
|
+
}
|
|
3392
4958
|
const stringifyObject = obj => {
|
|
3393
4959
|
let res = '';
|
|
3394
4960
|
Object.keys(obj).forEach(key => {
|
|
@@ -3396,12 +4962,12 @@
|
|
|
3396
4962
|
});
|
|
3397
4963
|
return res;
|
|
3398
4964
|
};
|
|
3399
|
-
const colorVars = colorThemeCSSProperties(colors.primary);
|
|
4965
|
+
const colorVars = colorThemeCSSProperties(colors.primary, mdColorScheme);
|
|
3400
4966
|
const primary = [`:root{`, stringifyObject(colorVars.light), `--swiper-theme-color:var(--f7-theme-color);`, ...Object.keys(colors).map(colorName => `--f7-color-${colorName}: ${colors[colorName]};`), `}`, `.dark{`, stringifyObject(colorVars.dark), `}`, `.ios, .ios .dark{`, stringifyObject(colorVars.ios), '}', `.md, .md .dark{`, stringifyObject(colorVars.md), '}'].join('');
|
|
3401
4967
|
const restVars = {};
|
|
3402
4968
|
Object.keys(colors).forEach(colorName => {
|
|
3403
4969
|
const colorValue = colors[colorName];
|
|
3404
|
-
restVars[colorName] = colorThemeCSSProperties(colorValue);
|
|
4970
|
+
restVars[colorName] = colorThemeCSSProperties(colorValue, mdColorScheme);
|
|
3405
4971
|
});
|
|
3406
4972
|
|
|
3407
4973
|
// rest
|
|
@@ -3542,26 +5108,7 @@
|
|
|
3542
5108
|
const window = getWindow$1();
|
|
3543
5109
|
const document = getDocument$1();
|
|
3544
5110
|
return {
|
|
3545
|
-
touch: !!('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch)
|
|
3546
|
-
pointerEvents: !!window.PointerEvent && 'maxTouchPoints' in window.navigator && window.navigator.maxTouchPoints >= 0,
|
|
3547
|
-
passiveListener: function checkPassiveListener() {
|
|
3548
|
-
let supportsPassive = false;
|
|
3549
|
-
try {
|
|
3550
|
-
const opts = Object.defineProperty({}, 'passive', {
|
|
3551
|
-
// eslint-disable-next-line
|
|
3552
|
-
get() {
|
|
3553
|
-
supportsPassive = true;
|
|
3554
|
-
}
|
|
3555
|
-
});
|
|
3556
|
-
window.addEventListener('testPassiveListener', null, opts);
|
|
3557
|
-
} catch (e) {
|
|
3558
|
-
// No support
|
|
3559
|
-
}
|
|
3560
|
-
return supportsPassive;
|
|
3561
|
-
}(),
|
|
3562
|
-
intersectionObserver: function checkObserver() {
|
|
3563
|
-
return 'IntersectionObserver' in window;
|
|
3564
|
-
}()
|
|
5111
|
+
touch: !!('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch)
|
|
3565
5112
|
};
|
|
3566
5113
|
}
|
|
3567
5114
|
function getSupport$1() {
|
|
@@ -14091,9 +15638,12 @@
|
|
|
14091
15638
|
if (buttons.length > 0) {
|
|
14092
15639
|
buttonsHTML = $jsx$1("div", {
|
|
14093
15640
|
class: "dialog-buttons"
|
|
14094
|
-
}, buttons.map(button =>
|
|
14095
|
-
|
|
14096
|
-
|
|
15641
|
+
}, buttons.map(button => {
|
|
15642
|
+
const classes = ['button button-round dialog-button', button.strong && 'button-fill', button.color && `color-${button.color}`, app.theme === 'ios' && 'button-large', app.theme === 'ios' && !button.strong && 'button-tonal', button.cssClass && button.cssClass].filter(Boolean).join(' ');
|
|
15643
|
+
return $jsx$1("button", {
|
|
15644
|
+
class: classes
|
|
15645
|
+
}, button.text);
|
|
15646
|
+
}));
|
|
14097
15647
|
}
|
|
14098
15648
|
const dialogHtml = $jsx$1("div", {
|
|
14099
15649
|
class: dialogClasses.join(' ')
|
|
@@ -14314,7 +15864,7 @@
|
|
|
14314
15864
|
color: null
|
|
14315
15865
|
}, {
|
|
14316
15866
|
text: app.params.dialog.buttonOk,
|
|
14317
|
-
strong:
|
|
15867
|
+
strong: true,
|
|
14318
15868
|
keyCodes: keyboardActions ? [13] : null
|
|
14319
15869
|
}],
|
|
14320
15870
|
onClick(dialog, index) {
|
|
@@ -14344,7 +15894,7 @@
|
|
|
14344
15894
|
color: null
|
|
14345
15895
|
}, {
|
|
14346
15896
|
text: app.params.dialog.buttonOk,
|
|
14347
|
-
strong:
|
|
15897
|
+
strong: true,
|
|
14348
15898
|
onClick: callbackOk,
|
|
14349
15899
|
keyCodes: keyboardActions ? [13] : null
|
|
14350
15900
|
}],
|
|
@@ -14411,7 +15961,7 @@
|
|
|
14411
15961
|
color: null
|
|
14412
15962
|
}, {
|
|
14413
15963
|
text: app.params.dialog.buttonOk,
|
|
14414
|
-
strong:
|
|
15964
|
+
strong: true,
|
|
14415
15965
|
keyCodes: keyboardActions ? [13] : null
|
|
14416
15966
|
}],
|
|
14417
15967
|
onClick(dialog, index) {
|
|
@@ -14956,15 +16506,6 @@
|
|
|
14956
16506
|
}
|
|
14957
16507
|
}
|
|
14958
16508
|
|
|
14959
|
-
// Find Arrow
|
|
14960
|
-
let $arrowEl;
|
|
14961
|
-
if ($el.find('.popover-arrow').length === 0 && popover.params.arrow) {
|
|
14962
|
-
$arrowEl = $('<div class="popover-arrow"></div>');
|
|
14963
|
-
$el.prepend($arrowEl);
|
|
14964
|
-
} else {
|
|
14965
|
-
$arrowEl = $el.find('.popover-arrow');
|
|
14966
|
-
}
|
|
14967
|
-
|
|
14968
16509
|
// Open
|
|
14969
16510
|
const originalOpen = popover.open;
|
|
14970
16511
|
extend$3(popover, {
|
|
@@ -14973,8 +16514,6 @@
|
|
|
14973
16514
|
el: $el[0],
|
|
14974
16515
|
$targetEl,
|
|
14975
16516
|
targetEl: $targetEl[0],
|
|
14976
|
-
$arrowEl,
|
|
14977
|
-
arrowEl: $arrowEl[0],
|
|
14978
16517
|
$backdropEl,
|
|
14979
16518
|
backdropEl: $backdropEl && $backdropEl[0],
|
|
14980
16519
|
type: 'popover',
|
|
@@ -14996,7 +16535,15 @@
|
|
|
14996
16535
|
popover.resize();
|
|
14997
16536
|
}
|
|
14998
16537
|
popover.on('popoverOpen', () => {
|
|
16538
|
+
if (popover.app.theme === 'ios') {
|
|
16539
|
+
$el.removeClass('modal-in');
|
|
16540
|
+
}
|
|
14999
16541
|
popover.resize();
|
|
16542
|
+
if (popover.app.theme === 'ios') {
|
|
16543
|
+
requestAnimationFrame(() => {
|
|
16544
|
+
$el.addClass('modal-in');
|
|
16545
|
+
});
|
|
16546
|
+
}
|
|
15000
16547
|
app.on('resize', handleResize);
|
|
15001
16548
|
$(window).on('keyboardDidShow keyboardDidHide', handleResize);
|
|
15002
16549
|
popover.on('popoverClose popoverBeforeDestroy', () => {
|
|
@@ -15059,8 +16606,7 @@
|
|
|
15059
16606
|
const {
|
|
15060
16607
|
app,
|
|
15061
16608
|
$el,
|
|
15062
|
-
$targetEl
|
|
15063
|
-
$arrowEl
|
|
16609
|
+
$targetEl
|
|
15064
16610
|
} = popover;
|
|
15065
16611
|
const {
|
|
15066
16612
|
targetX,
|
|
@@ -15072,18 +16618,6 @@
|
|
|
15072
16618
|
top: ''
|
|
15073
16619
|
});
|
|
15074
16620
|
const [width, height] = [$el.width(), $el.height()];
|
|
15075
|
-
let arrowSize = 0;
|
|
15076
|
-
let arrowLeft;
|
|
15077
|
-
let arrowTop;
|
|
15078
|
-
const hasArrow = $arrowEl.length > 0;
|
|
15079
|
-
const arrowMin = app.theme === 'ios' ? 13 : 24;
|
|
15080
|
-
if (hasArrow) {
|
|
15081
|
-
$arrowEl.removeClass('on-left on-right on-top on-bottom').css({
|
|
15082
|
-
left: '',
|
|
15083
|
-
top: ''
|
|
15084
|
-
});
|
|
15085
|
-
arrowSize = $arrowEl.width() / 2;
|
|
15086
|
-
}
|
|
15087
16621
|
$el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({
|
|
15088
16622
|
left: '',
|
|
15089
16623
|
top: ''
|
|
@@ -15114,30 +16648,27 @@
|
|
|
15114
16648
|
targetWidth = popover.params.targetWidth || 0;
|
|
15115
16649
|
targetHeight = popover.params.targetHeight || 0;
|
|
15116
16650
|
}
|
|
15117
|
-
let [left, top
|
|
16651
|
+
let [left, top] = [0, 0];
|
|
15118
16652
|
// Top Position
|
|
15119
16653
|
const forcedPosition = verticalPosition === 'auto' ? false : verticalPosition;
|
|
15120
16654
|
let position = forcedPosition || 'top';
|
|
15121
|
-
if (forcedPosition === 'top' || !forcedPosition && height
|
|
16655
|
+
if (forcedPosition === 'top' || !forcedPosition && height < targetOffsetTop - safeAreaTop) {
|
|
15122
16656
|
// On top
|
|
15123
|
-
top = targetOffsetTop - height
|
|
15124
|
-
} else if (forcedPosition === 'bottom' || !forcedPosition && height
|
|
16657
|
+
top = targetOffsetTop - height;
|
|
16658
|
+
} else if (forcedPosition === 'bottom' || !forcedPosition && height < app.height - targetOffsetTop - targetHeight) {
|
|
15125
16659
|
// On bottom
|
|
15126
16660
|
position = 'bottom';
|
|
15127
|
-
top = targetOffsetTop + targetHeight
|
|
16661
|
+
top = targetOffsetTop + targetHeight;
|
|
15128
16662
|
} else {
|
|
15129
16663
|
// On middle
|
|
15130
16664
|
position = 'middle';
|
|
15131
16665
|
top = targetHeight / 2 + targetOffsetTop - height / 2;
|
|
15132
|
-
diff = top;
|
|
15133
16666
|
top = Math.max(5, Math.min(top, app.height - height - 5));
|
|
15134
|
-
diff -= top;
|
|
15135
16667
|
}
|
|
15136
16668
|
|
|
15137
16669
|
// Horizontal Position
|
|
15138
16670
|
if (position === 'top' || position === 'bottom') {
|
|
15139
16671
|
left = targetWidth / 2 + targetOffsetLeft - width / 2;
|
|
15140
|
-
diff = left;
|
|
15141
16672
|
left = Math.max(5, Math.min(left, app.width - width - 5));
|
|
15142
16673
|
if (safeAreaLeft) {
|
|
15143
16674
|
left = Math.max(left, safeAreaLeft);
|
|
@@ -15145,35 +16676,12 @@
|
|
|
15145
16676
|
if (safeAreaRight && left + width > app.width - 5 - safeAreaRight) {
|
|
15146
16677
|
left = app.width - 5 - safeAreaRight - width;
|
|
15147
16678
|
}
|
|
15148
|
-
diff -= left;
|
|
15149
|
-
if (hasArrow) {
|
|
15150
|
-
if (position === 'top') {
|
|
15151
|
-
$arrowEl.addClass('on-bottom');
|
|
15152
|
-
}
|
|
15153
|
-
if (position === 'bottom') {
|
|
15154
|
-
$arrowEl.addClass('on-top');
|
|
15155
|
-
}
|
|
15156
|
-
arrowLeft = width / 2 - arrowSize + diff;
|
|
15157
|
-
arrowLeft = Math.max(Math.min(arrowLeft, width - arrowSize * 2 - arrowMin), arrowMin);
|
|
15158
|
-
$arrowEl.css({
|
|
15159
|
-
left: `${arrowLeft}px`
|
|
15160
|
-
});
|
|
15161
|
-
}
|
|
15162
16679
|
} else if (position === 'middle') {
|
|
15163
|
-
left = targetOffsetLeft - width
|
|
15164
|
-
if (hasArrow) $arrowEl.addClass('on-right');
|
|
16680
|
+
left = targetOffsetLeft - width;
|
|
15165
16681
|
if (left < 5 || left + width + safeAreaRight > app.width || left < safeAreaLeft) {
|
|
15166
|
-
if (left < 5) left = targetOffsetLeft + targetWidth
|
|
16682
|
+
if (left < 5) left = targetOffsetLeft + targetWidth;
|
|
15167
16683
|
if (left + width + safeAreaRight > app.width) left = app.width - width - 5 - safeAreaRight;
|
|
15168
16684
|
if (left < safeAreaLeft) left = safeAreaLeft;
|
|
15169
|
-
if (hasArrow) $arrowEl.removeClass('on-right').addClass('on-left');
|
|
15170
|
-
}
|
|
15171
|
-
if (hasArrow) {
|
|
15172
|
-
arrowTop = height / 2 - arrowSize + diff;
|
|
15173
|
-
arrowTop = Math.max(Math.min(arrowTop, height - arrowSize * 2 - arrowMin), arrowMin);
|
|
15174
|
-
$arrowEl.css({
|
|
15175
|
-
top: `${arrowTop}px`
|
|
15176
|
-
});
|
|
15177
16685
|
}
|
|
15178
16686
|
}
|
|
15179
16687
|
|
|
@@ -15191,6 +16699,11 @@
|
|
|
15191
16699
|
top: `${top}px`,
|
|
15192
16700
|
left: `${left}px`
|
|
15193
16701
|
});
|
|
16702
|
+
if (app.theme === 'ios') {
|
|
16703
|
+
$el.css({
|
|
16704
|
+
transformOrigin: `${targetOffsetLeft + targetWidth / 2 - left}px ${targetOffsetTop + targetHeight / 2 - top}px`
|
|
16705
|
+
});
|
|
16706
|
+
}
|
|
15194
16707
|
}
|
|
15195
16708
|
};
|
|
15196
16709
|
|
|
@@ -15199,7 +16712,6 @@
|
|
|
15199
16712
|
params: {
|
|
15200
16713
|
popover: {
|
|
15201
16714
|
verticalPosition: 'auto',
|
|
15202
|
-
arrow: true,
|
|
15203
16715
|
backdrop: true,
|
|
15204
16716
|
backdropEl: undefined,
|
|
15205
16717
|
backdropUnique: false,
|
|
@@ -16463,8 +17975,8 @@
|
|
|
16463
17975
|
class: "toast-icon"
|
|
16464
17976
|
}, icon), $jsx$1("div", {
|
|
16465
17977
|
class: "toast-text"
|
|
16466
|
-
}, text), closeButton && !icon && $jsx$1("
|
|
16467
|
-
class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}`
|
|
17978
|
+
}, text), closeButton && !icon && $jsx$1("button", {
|
|
17979
|
+
class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}${toast.app.theme === 'ios' ? ' button-round' : ''}`
|
|
16468
17980
|
}, closeButtonText)));
|
|
16469
17981
|
}
|
|
16470
17982
|
};
|
|
@@ -17070,6 +18582,7 @@
|
|
|
17070
18582
|
let $overswipeRightButton;
|
|
17071
18583
|
let overswipeLeft;
|
|
17072
18584
|
let overswipeRight;
|
|
18585
|
+
const isIOS = app.theme === 'ios';
|
|
17073
18586
|
function handleTouchStart(e) {
|
|
17074
18587
|
if (!app.swipeout.allow) return;
|
|
17075
18588
|
isMoved = false;
|
|
@@ -17088,12 +18601,16 @@
|
|
|
17088
18601
|
isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
|
|
17089
18602
|
}
|
|
17090
18603
|
if (isScrolling) {
|
|
18604
|
+
$swipeoutEl.removeClass('swipeout-active');
|
|
17091
18605
|
isTouched = false;
|
|
17092
18606
|
return;
|
|
17093
18607
|
}
|
|
17094
18608
|
if (!isMoved) {
|
|
17095
18609
|
if ($('.list.sortable-opened').length > 0) return;
|
|
17096
18610
|
$swipeoutContent = $swipeoutEl.find('.swipeout-content');
|
|
18611
|
+
if (!app.params.swipeout.noFollow) {
|
|
18612
|
+
$swipeoutEl.addClass('swipeout-active');
|
|
18613
|
+
}
|
|
17097
18614
|
$actionsRight = $swipeoutEl.find('.swipeout-actions-right');
|
|
17098
18615
|
$actionsLeft = $swipeoutEl.find('.swipeout-actions-left');
|
|
17099
18616
|
actionsLeftWidth = null;
|
|
@@ -17133,6 +18650,7 @@
|
|
|
17133
18650
|
}
|
|
17134
18651
|
if (translate > 0 && $actionsLeft.length === 0 || translate < 0 && $actionsRight.length === 0) {
|
|
17135
18652
|
if (!opened) {
|
|
18653
|
+
$swipeoutEl.removeClass('swipeout-active');
|
|
17136
18654
|
isTouched = false;
|
|
17137
18655
|
isMoved = false;
|
|
17138
18656
|
$swipeoutContent.transform('');
|
|
@@ -17193,11 +18711,24 @@
|
|
|
17193
18711
|
if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
|
|
17194
18712
|
$buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
|
|
17195
18713
|
}
|
|
18714
|
+
if (typeof buttonEl.f7SwipeoutButtonWidth === 'undefined') {
|
|
18715
|
+
$buttonEl[0].f7SwipeoutButtonWidth = buttonEl.offsetWidth;
|
|
18716
|
+
}
|
|
17196
18717
|
buttonOffset = buttonEl.f7SwipeoutButtonOffset;
|
|
18718
|
+
const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
|
|
17197
18719
|
if ($overswipeRightButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-left') {
|
|
17198
|
-
|
|
17199
|
-
|
|
17200
|
-
|
|
18720
|
+
if (isIOS) {
|
|
18721
|
+
const newWidth = overswipeRight ? buttonWidth + buttonOffset - 8 : buttonWidth;
|
|
18722
|
+
const diff = newWidth - buttonWidth;
|
|
18723
|
+
$buttonEl.css({
|
|
18724
|
+
width: `${newWidth}px`,
|
|
18725
|
+
marginLeft: overswipeRight ? `${-diff}px` : '0px'
|
|
18726
|
+
});
|
|
18727
|
+
} else {
|
|
18728
|
+
$buttonEl.css({
|
|
18729
|
+
left: `${overswipeRight ? -buttonOffset : 0}px`
|
|
18730
|
+
});
|
|
18731
|
+
}
|
|
17201
18732
|
if (overswipeRight) {
|
|
17202
18733
|
if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
|
|
17203
18734
|
$swipeoutEl.trigger('swipeout:overswipeenter');
|
|
@@ -17212,7 +18743,15 @@
|
|
|
17212
18743
|
$buttonEl.removeClass('swipeout-overswipe-active');
|
|
17213
18744
|
}
|
|
17214
18745
|
}
|
|
17215
|
-
|
|
18746
|
+
if (isIOS) {
|
|
18747
|
+
const buttonEndPos = actionsRightWidth - buttonOffset;
|
|
18748
|
+
const buttonStartPos = actionsRightWidth - buttonOffset - buttonWidth;
|
|
18749
|
+
let buttonProgress = (-buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
|
|
18750
|
+
buttonProgress = Math.max(Math.min(buttonProgress, 1), 0);
|
|
18751
|
+
$buttonEl.transform(`scale(${buttonProgress})`);
|
|
18752
|
+
} else {
|
|
18753
|
+
$buttonEl.transform(`translate3d(${buttonTranslate - buttonOffset * (1 + Math.max(progress, -1))}px,0,0)`);
|
|
18754
|
+
}
|
|
17216
18755
|
});
|
|
17217
18756
|
}
|
|
17218
18757
|
if ($actionsLeft.length > 0) {
|
|
@@ -17233,14 +18772,27 @@
|
|
|
17233
18772
|
}
|
|
17234
18773
|
$leftButtons.each((buttonEl, index) => {
|
|
17235
18774
|
const $buttonEl = $(buttonEl);
|
|
18775
|
+
if (typeof buttonEl.f7SwipeoutButtonWidth === 'undefined') {
|
|
18776
|
+
$buttonEl[0].f7SwipeoutButtonWidth = buttonEl.offsetWidth;
|
|
18777
|
+
}
|
|
17236
18778
|
if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
|
|
17237
|
-
$buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
|
|
18779
|
+
$buttonEl[0].f7SwipeoutButtonOffset = isIOS ? buttonEl.offsetLeft : actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
|
|
17238
18780
|
}
|
|
18781
|
+
const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
|
|
17239
18782
|
buttonOffset = buttonEl.f7SwipeoutButtonOffset;
|
|
17240
18783
|
if ($overswipeLeftButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-right') {
|
|
17241
|
-
|
|
17242
|
-
|
|
17243
|
-
|
|
18784
|
+
if (isIOS) {
|
|
18785
|
+
const newWidth = overswipeLeft ? actionsLeftWidth - 16 : buttonWidth;
|
|
18786
|
+
const diff = newWidth - buttonWidth;
|
|
18787
|
+
$buttonEl.css({
|
|
18788
|
+
width: `${newWidth}px`,
|
|
18789
|
+
marginRight: overswipeLeft ? `${-diff}px` : '0px'
|
|
18790
|
+
});
|
|
18791
|
+
} else {
|
|
18792
|
+
$buttonEl.css({
|
|
18793
|
+
left: `${overswipeLeft ? buttonOffset : 0}px`
|
|
18794
|
+
});
|
|
18795
|
+
}
|
|
17244
18796
|
if (overswipeLeft) {
|
|
17245
18797
|
if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
|
|
17246
18798
|
$swipeoutEl.trigger('swipeout:overswipeenter');
|
|
@@ -17258,7 +18810,15 @@
|
|
|
17258
18810
|
if ($leftButtons.length > 1) {
|
|
17259
18811
|
$buttonEl.css('z-index', $leftButtons.length - index);
|
|
17260
18812
|
}
|
|
17261
|
-
|
|
18813
|
+
if (isIOS) {
|
|
18814
|
+
const buttonStartPos = buttonOffset;
|
|
18815
|
+
const buttonEndPos = buttonStartPos + buttonWidth;
|
|
18816
|
+
let buttonProgress = (buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
|
|
18817
|
+
buttonProgress = Math.max(Math.min(buttonProgress, 1), 0);
|
|
18818
|
+
$buttonEl.transform(`scale(${buttonProgress})`);
|
|
18819
|
+
} else {
|
|
18820
|
+
$buttonEl.transform(`translate3d(${buttonTranslate + buttonOffset * (1 - Math.min(progress, 1))}px,0,0)`);
|
|
18821
|
+
}
|
|
17262
18822
|
});
|
|
17263
18823
|
}
|
|
17264
18824
|
$swipeoutEl.trigger('swipeout', progress);
|
|
@@ -17271,6 +18831,7 @@
|
|
|
17271
18831
|
isMoved = false;
|
|
17272
18832
|
return;
|
|
17273
18833
|
}
|
|
18834
|
+
$swipeoutEl.removeClass('swipeout-active');
|
|
17274
18835
|
isTouched = false;
|
|
17275
18836
|
isMoved = false;
|
|
17276
18837
|
const timeDiff = new Date().getTime() - touchStartTime;
|
|
@@ -17299,7 +18860,11 @@
|
|
|
17299
18860
|
$buttons = direction === 'to-left' ? $rightButtons : $leftButtons;
|
|
17300
18861
|
if ($buttons) {
|
|
17301
18862
|
for (i = 0; i < $buttons.length; i += 1) {
|
|
17302
|
-
|
|
18863
|
+
if (isIOS) {
|
|
18864
|
+
$($buttons[i]).transform(`scale(1)`);
|
|
18865
|
+
} else {
|
|
18866
|
+
$($buttons[i]).transform(`translate3d(${newTranslate}px,0,0)`);
|
|
18867
|
+
}
|
|
17303
18868
|
}
|
|
17304
18869
|
}
|
|
17305
18870
|
if (overswipeRight) {
|
|
@@ -17324,7 +18889,11 @@
|
|
|
17324
18889
|
if (typeof buttonOffset === 'undefined') {
|
|
17325
18890
|
$buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
|
|
17326
18891
|
}
|
|
17327
|
-
|
|
18892
|
+
if (isIOS) {
|
|
18893
|
+
$buttonEl.transform(`scale(0)`);
|
|
18894
|
+
} else {
|
|
18895
|
+
$buttonEl.transform(`translate3d(${buttonOffset}px,0,0)`);
|
|
18896
|
+
}
|
|
17328
18897
|
});
|
|
17329
18898
|
}
|
|
17330
18899
|
if ($rightButtons && $rightButtons.length > 0 && $rightButtons !== $buttons) {
|
|
@@ -17334,7 +18903,11 @@
|
|
|
17334
18903
|
if (typeof buttonOffset === 'undefined') {
|
|
17335
18904
|
$buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
|
|
17336
18905
|
}
|
|
17337
|
-
|
|
18906
|
+
if (isIOS) {
|
|
18907
|
+
$buttonEl.transform(`scale(0)`);
|
|
18908
|
+
} else {
|
|
18909
|
+
$buttonEl.transform(`translate3d(${-buttonOffset}px,0,0)`);
|
|
18910
|
+
}
|
|
17338
18911
|
});
|
|
17339
18912
|
}
|
|
17340
18913
|
$swipeoutContent.transitionEnd(() => {
|
|
@@ -17352,9 +18925,9 @@
|
|
|
17352
18925
|
}
|
|
17353
18926
|
});
|
|
17354
18927
|
}
|
|
17355
|
-
const passiveListener =
|
|
18928
|
+
const passiveListener = {
|
|
17356
18929
|
passive: true
|
|
17357
|
-
}
|
|
18930
|
+
};
|
|
17358
18931
|
app.on('touchstart', e => {
|
|
17359
18932
|
if (Swipeout.el) {
|
|
17360
18933
|
const $targetEl = $(e.target);
|
|
@@ -17396,10 +18969,14 @@
|
|
|
17396
18969
|
if ($buttons.length > 1) {
|
|
17397
18970
|
$buttons.each((buttonEl, buttonIndex) => {
|
|
17398
18971
|
const $buttonEl = $(buttonEl);
|
|
17399
|
-
if (
|
|
17400
|
-
$buttonEl.transform(`
|
|
18972
|
+
if (app.theme === 'ios') {
|
|
18973
|
+
$buttonEl.transform(`scale(1)`);
|
|
17401
18974
|
} else {
|
|
17402
|
-
|
|
18975
|
+
if (side === 'right') {
|
|
18976
|
+
$buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
|
|
18977
|
+
} else {
|
|
18978
|
+
$buttonEl.css('z-index', $buttons.length - buttonIndex).transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
|
|
18979
|
+
}
|
|
17403
18980
|
}
|
|
17404
18981
|
});
|
|
17405
18982
|
}
|
|
@@ -17410,7 +18987,11 @@
|
|
|
17410
18987
|
if (callback) callback.call($el[0]);
|
|
17411
18988
|
});
|
|
17412
18989
|
nextFrame$1(() => {
|
|
17413
|
-
|
|
18990
|
+
if (app.theme === 'ios') {
|
|
18991
|
+
$buttons.transform(`scale(1)`);
|
|
18992
|
+
} else {
|
|
18993
|
+
$buttons.transform(`translate3d(${translate}px,0,0)`);
|
|
18994
|
+
}
|
|
17414
18995
|
$swipeoutContent.transform(`translate3d(${translate}px,0,0)`);
|
|
17415
18996
|
});
|
|
17416
18997
|
Swipeout.el = $el[0];
|
|
@@ -17443,14 +19024,22 @@
|
|
|
17443
19024
|
closeTimeout = setTimeout(onSwipeoutClose, 500);
|
|
17444
19025
|
$buttons.each(buttonEl => {
|
|
17445
19026
|
const $buttonEl = $(buttonEl);
|
|
17446
|
-
if (
|
|
17447
|
-
$buttonEl.transform(`
|
|
19027
|
+
if (app.theme === 'ios') {
|
|
19028
|
+
$buttonEl.transform(`scale(0)`);
|
|
17448
19029
|
} else {
|
|
17449
|
-
|
|
19030
|
+
if (side === 'right') {
|
|
19031
|
+
$buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
|
|
19032
|
+
} else {
|
|
19033
|
+
$buttonEl.transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
|
|
19034
|
+
}
|
|
17450
19035
|
}
|
|
19036
|
+
const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
|
|
17451
19037
|
$buttonEl.css({
|
|
17452
|
-
left: '0px'
|
|
19038
|
+
left: '0px',
|
|
19039
|
+
width: buttonWidth ? `${buttonWidth}px` : '',
|
|
19040
|
+
marginLeft: '0px'
|
|
17453
19041
|
}).removeClass('swipeout-overswipe-active');
|
|
19042
|
+
delete $buttonEl[0].f7SwipeoutButtonWidth;
|
|
17454
19043
|
});
|
|
17455
19044
|
if (Swipeout.el && Swipeout.el === $el[0]) Swipeout.el = undefined;
|
|
17456
19045
|
},
|
|
@@ -21482,7 +23071,6 @@
|
|
|
21482
23071
|
constructor(app, params) {
|
|
21483
23072
|
super(params, [app]);
|
|
21484
23073
|
const range = this;
|
|
21485
|
-
const support = getSupport$1();
|
|
21486
23074
|
const defaults = {
|
|
21487
23075
|
el: null,
|
|
21488
23076
|
inputEl: null,
|
|
@@ -21500,7 +23088,8 @@
|
|
|
21500
23088
|
scaleSteps: 5,
|
|
21501
23089
|
scaleSubSteps: 0,
|
|
21502
23090
|
formatScaleLabel: null,
|
|
21503
|
-
limitKnobPosition:
|
|
23091
|
+
limitKnobPosition: true,
|
|
23092
|
+
limitBarPosition: app.theme === 'md'
|
|
21504
23093
|
};
|
|
21505
23094
|
|
|
21506
23095
|
// Extend defaults with modules params
|
|
@@ -21548,7 +23137,8 @@
|
|
|
21548
23137
|
scale,
|
|
21549
23138
|
scaleSteps,
|
|
21550
23139
|
scaleSubSteps,
|
|
21551
|
-
limitKnobPosition
|
|
23140
|
+
limitKnobPosition,
|
|
23141
|
+
limitBarPosition
|
|
21552
23142
|
} = range.params;
|
|
21553
23143
|
extend$3(range, {
|
|
21554
23144
|
app,
|
|
@@ -21568,7 +23158,8 @@
|
|
|
21568
23158
|
scale,
|
|
21569
23159
|
scaleSteps,
|
|
21570
23160
|
scaleSubSteps,
|
|
21571
|
-
limitKnobPosition
|
|
23161
|
+
limitKnobPosition,
|
|
23162
|
+
limitBarPosition
|
|
21572
23163
|
});
|
|
21573
23164
|
if ($inputEl) {
|
|
21574
23165
|
'step min max'.split(' ').forEach(paramName => {
|
|
@@ -21684,13 +23275,15 @@
|
|
|
21684
23275
|
rangeOffsetLeft = rangeOffset.left;
|
|
21685
23276
|
rangeOffsetTop = rangeOffset.top;
|
|
21686
23277
|
let progress;
|
|
23278
|
+
const knobSize = range.vertical ? range.knobHeight : range.knobWidth;
|
|
23279
|
+
const progressModify = limitKnobPosition ? knobSize : 0;
|
|
21687
23280
|
if (range.vertical) {
|
|
21688
|
-
progress = (touchesStart.y - rangeOffsetTop) / range.rangeHeight;
|
|
23281
|
+
progress = (touchesStart.y - rangeOffsetTop - progressModify / 2) / (range.rangeHeight - progressModify);
|
|
21689
23282
|
if (!range.verticalReversed) progress = 1 - progress;
|
|
21690
23283
|
} else if (range.app.rtl) {
|
|
21691
|
-
progress = (rangeOffsetLeft + range.rangeWidth - touchesStart.x) / range.rangeWidth;
|
|
23284
|
+
progress = (rangeOffsetLeft + range.rangeWidth + progressModify / 2 - touchesStart.x) / (range.rangeWidth - progressModify);
|
|
21692
23285
|
} else {
|
|
21693
|
-
progress = (touchesStart.x - rangeOffsetLeft) / range.rangeWidth;
|
|
23286
|
+
progress = (touchesStart.x - rangeOffsetLeft - progressModify / 2) / (range.rangeWidth - progressModify);
|
|
21694
23287
|
}
|
|
21695
23288
|
let newValue = progress * (range.max - range.min) + range.min;
|
|
21696
23289
|
if (range.dual) {
|
|
@@ -21738,13 +23331,15 @@
|
|
|
21738
23331
|
}
|
|
21739
23332
|
e.preventDefault();
|
|
21740
23333
|
let progress;
|
|
23334
|
+
const knobSize = range.vertical ? range.knobHeight : range.knobWidth;
|
|
23335
|
+
const progressModify = limitKnobPosition ? knobSize : 0;
|
|
21741
23336
|
if (range.vertical) {
|
|
21742
|
-
progress = (pageY - rangeOffsetTop) / range.rangeHeight;
|
|
23337
|
+
progress = (pageY - rangeOffsetTop - progressModify / 2) / (range.rangeHeight - progressModify);
|
|
21743
23338
|
if (!range.verticalReversed) progress = 1 - progress;
|
|
21744
23339
|
} else if (range.app.rtl) {
|
|
21745
|
-
progress = (rangeOffsetLeft + range.rangeWidth - pageX) / range.rangeWidth;
|
|
23340
|
+
progress = (rangeOffsetLeft + range.rangeWidth + progressModify / 2 - pageX) / (range.rangeWidth - progressModify);
|
|
21746
23341
|
} else {
|
|
21747
|
-
progress = (pageX - rangeOffsetLeft) / range.rangeWidth;
|
|
23342
|
+
progress = (pageX - rangeOffsetLeft - progressModify / 2) / (range.rangeWidth - progressModify);
|
|
21748
23343
|
}
|
|
21749
23344
|
let newValue = progress * (range.max - range.min) + range.min;
|
|
21750
23345
|
if (range.dual) {
|
|
@@ -21802,10 +23397,9 @@
|
|
|
21802
23397
|
let parentPanel;
|
|
21803
23398
|
let parentPage;
|
|
21804
23399
|
range.attachEvents = function attachEvents() {
|
|
21805
|
-
|
|
23400
|
+
range.$el.on(app.touchEvents.start, handleTouchStart, {
|
|
21806
23401
|
passive: true
|
|
21807
|
-
}
|
|
21808
|
-
range.$el.on(app.touchEvents.start, handleTouchStart, passive);
|
|
23402
|
+
});
|
|
21809
23403
|
app.on('touchmove', handleTouchMove);
|
|
21810
23404
|
app.on('touchend:passive', handleTouchEnd);
|
|
21811
23405
|
app.on('tabShow', handleResize);
|
|
@@ -21818,10 +23412,9 @@
|
|
|
21818
23412
|
parentPage.on('page:reinit', handleResize);
|
|
21819
23413
|
};
|
|
21820
23414
|
range.detachEvents = function detachEvents() {
|
|
21821
|
-
|
|
23415
|
+
range.$el.off(app.touchEvents.start, handleTouchStart, {
|
|
21822
23416
|
passive: true
|
|
21823
|
-
}
|
|
21824
|
-
range.$el.off(app.touchEvents.start, handleTouchStart, passive);
|
|
23417
|
+
});
|
|
21825
23418
|
app.off('touchmove', handleTouchMove);
|
|
21826
23419
|
app.off('touchend:passive', handleTouchEnd);
|
|
21827
23420
|
app.off('tabShow', handleResize);
|
|
@@ -21878,7 +23471,8 @@
|
|
|
21878
23471
|
labels,
|
|
21879
23472
|
vertical,
|
|
21880
23473
|
verticalReversed,
|
|
21881
|
-
limitKnobPosition
|
|
23474
|
+
limitKnobPosition,
|
|
23475
|
+
limitBarPosition
|
|
21882
23476
|
} = range;
|
|
21883
23477
|
const knobSize = vertical ? knobHeight : knobWidth;
|
|
21884
23478
|
const rangeSize = vertical ? rangeHeight : rangeWidth;
|
|
@@ -21886,28 +23480,31 @@
|
|
|
21886
23480
|
const positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
|
|
21887
23481
|
if (range.dual) {
|
|
21888
23482
|
const progress = [(value[0] - min) / (max - min), (value[1] - min) / (max - min)];
|
|
23483
|
+
const positionStartProgress = limitBarPosition ? knobSize / rangeSize : 0;
|
|
23484
|
+
const barProgressModify = limitBarPosition ? (rangeSize - knobSize) / rangeSize : 1;
|
|
21889
23485
|
$barActiveEl.css({
|
|
21890
|
-
[positionProperty]: `${progress[0] * 100}%`,
|
|
21891
|
-
[vertical ? 'height' : 'width']: `${(progress[1] - progress[0]) * 100}%`
|
|
23486
|
+
[positionProperty]: `${(positionStartProgress + progress[0] * barProgressModify) * 100}%`,
|
|
23487
|
+
[vertical ? 'height' : 'width']: `${(progress[1] - progress[0] - positionStartProgress) * 100 * barProgressModify}%`
|
|
21892
23488
|
});
|
|
21893
23489
|
knobs.forEach(($knobEl, knobIndex) => {
|
|
21894
23490
|
let startPos = rangeSize * progress[knobIndex];
|
|
21895
23491
|
if (limitKnobPosition) {
|
|
21896
|
-
const
|
|
21897
|
-
|
|
21898
|
-
|
|
23492
|
+
const minPos = knobSize;
|
|
23493
|
+
const maxPos = rangeSize;
|
|
23494
|
+
startPos = (maxPos - minPos) * progress[knobIndex] + knobSize / 2;
|
|
21899
23495
|
}
|
|
21900
23496
|
$knobEl.css(positionProperty, `${startPos}px`);
|
|
21901
23497
|
if (label) labels[knobIndex].text(range.formatLabel(value[knobIndex], labels[knobIndex][0]));
|
|
21902
23498
|
});
|
|
21903
23499
|
} else {
|
|
21904
23500
|
const progress = (value - min) / (max - min);
|
|
21905
|
-
|
|
23501
|
+
const barProgressModify = limitBarPosition ? (rangeSize - knobSize) / rangeSize : 1;
|
|
23502
|
+
$barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100 * barProgressModify}%`);
|
|
21906
23503
|
let startPos = rangeSize * progress;
|
|
21907
23504
|
if (limitKnobPosition) {
|
|
21908
|
-
const
|
|
21909
|
-
|
|
21910
|
-
|
|
23505
|
+
const minPos = knobSize;
|
|
23506
|
+
const maxPos = rangeSize;
|
|
23507
|
+
startPos = (maxPos - minPos) * progress + knobSize / 2;
|
|
21911
23508
|
}
|
|
21912
23509
|
knobs[0].css(positionProperty, `${startPos}px`);
|
|
21913
23510
|
if (label) labels[0].text(range.formatLabel(value, labels[0][0]));
|
|
@@ -42864,19 +44461,19 @@
|
|
|
42864
44461
|
} = notification.params;
|
|
42865
44462
|
return $jsx$1("div", {
|
|
42866
44463
|
class: `notification ${icon ? 'notification-with-icon' : ''} ${cssClass || ''}`
|
|
42867
|
-
}, $jsx$1("div", {
|
|
42868
|
-
class: "notification-header"
|
|
42869
44464
|
}, icon && $jsx$1("div", {
|
|
42870
44465
|
class: "notification-icon"
|
|
42871
|
-
}, icon),
|
|
44466
|
+
}, icon), $jsx$1("div", {
|
|
44467
|
+
class: "notification-content"
|
|
44468
|
+
}, (title || titleRightText || closeButton) && $jsx$1("div", {
|
|
44469
|
+
class: "notification-header"
|
|
44470
|
+
}, title && $jsx$1("div", {
|
|
42872
44471
|
class: "notification-title"
|
|
42873
44472
|
}, title), titleRightText && $jsx$1("div", {
|
|
42874
44473
|
class: "notification-title-right-text"
|
|
42875
44474
|
}, titleRightText), closeButton && $jsx$1("span", {
|
|
42876
44475
|
class: "notification-close-button"
|
|
42877
|
-
})), $jsx$1("div", {
|
|
42878
|
-
class: "notification-content"
|
|
42879
|
-
}, subtitle && $jsx$1("div", {
|
|
44476
|
+
})), subtitle && $jsx$1("div", {
|
|
42880
44477
|
class: "notification-subtitle"
|
|
42881
44478
|
}, subtitle), text && $jsx$1("div", {
|
|
42882
44479
|
class: "notification-text"
|