@m3e/theme 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/index.js

@@ -148,6 +148,19 @@ function clampDouble(min, max, input) {
     }
     return input;
 }
+/**
+ * Sanitizes a degree measure as an integer.
+ *
+ * @return a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+function sanitizeDegreesInt(degrees) {
+    degrees = degrees % 360;
+    if (degrees < 0) {
+        degrees = degrees + 360;
+    }
+    return degrees;
+}
 /**
  * Sanitizes a degree measure as a floating-point number.
  *
@@ -273,6 +286,33 @@ function xyzFromArgb(argb) {
     const b = linearized(blueFromArgb(argb));
     return matrixMultiply([r, g, b], SRGB_TO_XYZ);
 }
+/**
+ * Converts a color from ARGB representation to L*a*b*
+ * representation.
+ *
+ * @param argb the ARGB representation of a color
+ * @return a Lab object representing the color
+ */
+function labFromArgb(argb) {
+    const linearR = linearized(redFromArgb(argb));
+    const linearG = linearized(greenFromArgb(argb));
+    const linearB = linearized(blueFromArgb(argb));
+    const matrix = SRGB_TO_XYZ;
+    const x = matrix[0][0] * linearR + matrix[0][1] * linearG + matrix[0][2] * linearB;
+    const y = matrix[1][0] * linearR + matrix[1][1] * linearG + matrix[1][2] * linearB;
+    const z = matrix[2][0] * linearR + matrix[2][1] * linearG + matrix[2][2] * linearB;
+    const whitePoint = WHITE_POINT_D65;
+    const xNormalized = x / whitePoint[0];
+    const yNormalized = y / whitePoint[1];
+    const zNormalized = z / whitePoint[2];
+    const fx = labF(xNormalized);
+    const fy = labF(yNormalized);
+    const fz = labF(zNormalized);
+    const l = 116.0 * fy - 16;
+    const a = 500.0 * (fx - fy);
+    const b = 200.0 * (fy - fz);
+    return [l, a, b];
+}
 /**
  * Converts an L* value to an ARGB representation.
  *
@@ -3215,6 +3255,316 @@ class CorePalette {
     }
 }
 
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// This file is automatically generated. Do not modify it.
+/**
+ * Design utilities using color temperature theory.
+ *
+ * Analogous colors, complementary color, and cache to efficiently, lazily,
+ * generate data for calculations when needed.
+ */
+class TemperatureCache {
+    constructor(input) {
+        this.input = input;
+        this.hctsByTempCache = [];
+        this.hctsByHueCache = [];
+        this.tempsByHctCache = new Map();
+        this.inputRelativeTemperatureCache = -1;
+        this.complementCache = null;
+    }
+    get hctsByTemp() {
+        if (this.hctsByTempCache.length > 0) {
+            return this.hctsByTempCache;
+        }
+        const hcts = this.hctsByHue.concat([this.input]);
+        const temperaturesByHct = this.tempsByHct;
+        hcts.sort((a, b) => temperaturesByHct.get(a) - temperaturesByHct.get(b));
+        this.hctsByTempCache = hcts;
+        return hcts;
+    }
+    get warmest() {
+        return this.hctsByTemp[this.hctsByTemp.length - 1];
+    }
+    get coldest() {
+        return this.hctsByTemp[0];
+    }
+    /**
+     * A set of colors with differing hues, equidistant in temperature.
+     *
+     * In art, this is usually described as a set of 5 colors on a color wheel
+     * divided into 12 sections. This method allows provision of either of those
+     * values.
+     *
+     * Behavior is undefined when [count] or [divisions] is 0.
+     * When divisions < count, colors repeat.
+     *
+     * [count] The number of colors to return, includes the input color.
+     * [divisions] The number of divisions on the color wheel.
+     */
+    analogous(count = 5, divisions = 12) {
+        const startHue = Math.round(this.input.hue);
+        const startHct = this.hctsByHue[startHue];
+        let lastTemp = this.relativeTemperature(startHct);
+        const allColors = [startHct];
+        let absoluteTotalTempDelta = 0.0;
+        for (let i = 0; i < 360; i++) {
+            const hue = sanitizeDegreesInt(startHue + i);
+            const hct = this.hctsByHue[hue];
+            const temp = this.relativeTemperature(hct);
+            const tempDelta = Math.abs(temp - lastTemp);
+            lastTemp = temp;
+            absoluteTotalTempDelta += tempDelta;
+        }
+        let hueAddend = 1;
+        const tempStep = absoluteTotalTempDelta / divisions;
+        let totalTempDelta = 0.0;
+        lastTemp = this.relativeTemperature(startHct);
+        while (allColors.length < divisions) {
+            const hue = sanitizeDegreesInt(startHue + hueAddend);
+            const hct = this.hctsByHue[hue];
+            const temp = this.relativeTemperature(hct);
+            const tempDelta = Math.abs(temp - lastTemp);
+            totalTempDelta += tempDelta;
+            const desiredTotalTempDeltaForIndex = allColors.length * tempStep;
+            let indexSatisfied = totalTempDelta >= desiredTotalTempDeltaForIndex;
+            let indexAddend = 1;
+            // Keep adding this hue to the answers until its temperature is
+            // insufficient. This ensures consistent behavior when there aren't
+            // [divisions] discrete steps between 0 and 360 in hue with [tempStep]
+            // delta in temperature between them.
+            //
+            // For example, white and black have no analogues: there are no other
+            // colors at T100/T0. Therefore, they should just be added to the array
+            // as answers.
+            while (indexSatisfied && allColors.length < divisions) {
+                allColors.push(hct);
+                const desiredTotalTempDeltaForIndex = ((allColors.length + indexAddend) * tempStep);
+                indexSatisfied = totalTempDelta >= desiredTotalTempDeltaForIndex;
+                indexAddend++;
+            }
+            lastTemp = temp;
+            hueAddend++;
+            if (hueAddend > 360) {
+                while (allColors.length < divisions) {
+                    allColors.push(hct);
+                }
+                break;
+            }
+        }
+        const answers = [this.input];
+        // First, generate analogues from rotating counter-clockwise.
+        const increaseHueCount = Math.floor((count - 1) / 2.0);
+        for (let i = 1; i < (increaseHueCount + 1); i++) {
+            let index = 0 - i;
+            while (index < 0) {
+                index = allColors.length + index;
+            }
+            if (index >= allColors.length) {
+                index = index % allColors.length;
+            }
+            answers.splice(0, 0, allColors[index]);
+        }
+        // Second, generate analogues from rotating clockwise.
+        const decreaseHueCount = count - increaseHueCount - 1;
+        for (let i = 1; i < (decreaseHueCount + 1); i++) {
+            let index = i;
+            while (index < 0) {
+                index = allColors.length + index;
+            }
+            if (index >= allColors.length) {
+                index = index % allColors.length;
+            }
+            answers.push(allColors[index]);
+        }
+        return answers;
+    }
+    /**
+     * A color that complements the input color aesthetically.
+     *
+     * In art, this is usually described as being across the color wheel.
+     * History of this shows intent as a color that is just as cool-warm as the
+     * input color is warm-cool.
+     */
+    get complement() {
+        if (this.complementCache != null) {
+            return this.complementCache;
+        }
+        const coldestHue = this.coldest.hue;
+        const coldestTemp = this.tempsByHct.get(this.coldest);
+        const warmestHue = this.warmest.hue;
+        const warmestTemp = this.tempsByHct.get(this.warmest);
+        const range = warmestTemp - coldestTemp;
+        const startHueIsColdestToWarmest = TemperatureCache.isBetween(this.input.hue, coldestHue, warmestHue);
+        const startHue = startHueIsColdestToWarmest ? warmestHue : coldestHue;
+        const endHue = startHueIsColdestToWarmest ? coldestHue : warmestHue;
+        const directionOfRotation = 1.0;
+        let smallestError = 1000.0;
+        let answer = this.hctsByHue[Math.round(this.input.hue)];
+        const complementRelativeTemp = 1.0 - this.inputRelativeTemperature;
+        // Find the color in the other section, closest to the inverse percentile
+        // of the input color. This is the complement.
+        for (let hueAddend = 0.0; hueAddend <= 360.0; hueAddend += 1.0) {
+            const hue = sanitizeDegreesDouble(startHue + directionOfRotation * hueAddend);
+            if (!TemperatureCache.isBetween(hue, startHue, endHue)) {
+                continue;
+            }
+            const possibleAnswer = this.hctsByHue[Math.round(hue)];
+            const relativeTemp = (this.tempsByHct.get(possibleAnswer) - coldestTemp) / range;
+            const error = Math.abs(complementRelativeTemp - relativeTemp);
+            if (error < smallestError) {
+                smallestError = error;
+                answer = possibleAnswer;
+            }
+        }
+        this.complementCache = answer;
+        return this.complementCache;
+    }
+    /**
+     * Temperature relative to all colors with the same chroma and tone.
+     * Value on a scale from 0 to 1.
+     */
+    relativeTemperature(hct) {
+        const range = this.tempsByHct.get(this.warmest) - this.tempsByHct.get(this.coldest);
+        const differenceFromColdest = this.tempsByHct.get(hct) - this.tempsByHct.get(this.coldest);
+        // Handle when there's no difference in temperature between warmest and
+        // coldest: for example, at T100, only one color is available, white.
+        if (range === 0.0) {
+            return 0.5;
+        }
+        return differenceFromColdest / range;
+    }
+    /** Relative temperature of the input color. See [relativeTemperature]. */
+    get inputRelativeTemperature() {
+        if (this.inputRelativeTemperatureCache >= 0.0) {
+            return this.inputRelativeTemperatureCache;
+        }
+        this.inputRelativeTemperatureCache = this.relativeTemperature(this.input);
+        return this.inputRelativeTemperatureCache;
+    }
+    /** A Map with keys of HCTs in [hctsByTemp], values of raw temperature. */
+    get tempsByHct() {
+        if (this.tempsByHctCache.size > 0) {
+            return this.tempsByHctCache;
+        }
+        const allHcts = this.hctsByHue.concat([this.input]);
+        const temperaturesByHct = new Map();
+        for (const e of allHcts) {
+            temperaturesByHct.set(e, TemperatureCache.rawTemperature(e));
+        }
+        this.tempsByHctCache = temperaturesByHct;
+        return temperaturesByHct;
+    }
+    /**
+     * HCTs for all hues, with the same chroma/tone as the input.
+     * Sorted ascending, hue 0 to 360.
+     */
+    get hctsByHue() {
+        if (this.hctsByHueCache.length > 0) {
+            return this.hctsByHueCache;
+        }
+        const hcts = [];
+        for (let hue = 0.0; hue <= 360.0; hue += 1.0) {
+            const colorAtHue = Hct.from(hue, this.input.chroma, this.input.tone);
+            hcts.push(colorAtHue);
+        }
+        this.hctsByHueCache = hcts;
+        return this.hctsByHueCache;
+    }
+    /** Determines if an angle is between two other angles, rotating clockwise. */
+    static isBetween(angle, a, b) {
+        if (a < b) {
+            return a <= angle && angle <= b;
+        }
+        return a <= angle || angle <= b;
+    }
+    /**
+     * Value representing cool-warm factor of a color.
+     * Values below 0 are considered cool, above, warm.
+     *
+     * Color science has researched emotion and harmony, which art uses to select
+     * colors. Warm-cool is the foundation of analogous and complementary colors.
+     * See:
+     * - Li-Chen Ou's Chapter 19 in Handbook of Color Psychology (2015).
+     * - Josef Albers' Interaction of Color chapters 19 and 21.
+     *
+     * Implementation of Ou, Woodcock and Wright's algorithm, which uses
+     * L*a*b* / LCH color space.
+     * Return value has these properties:
+     * - Values below 0 are cool, above 0 are warm.
+     * - Lower bound: -0.52 - (chroma ^ 1.07 / 20). L*a*b* chroma is infinite.
+     *   Assuming max of 130 chroma, -9.66.
+     * - Upper bound: -0.52 + (chroma ^ 1.07 / 20). L*a*b* chroma is infinite.
+     *   Assuming max of 130 chroma, 8.61.
+     */
+    static rawTemperature(color) {
+        const lab = labFromArgb(color.toInt());
+        const hue = sanitizeDegreesDouble(Math.atan2(lab[2], lab[1]) * 180.0 / Math.PI);
+        const chroma = Math.sqrt((lab[1] * lab[1]) + (lab[2] * lab[2]));
+        const temperature = -0.5 +
+            0.02 * Math.pow(chroma, 1.07) *
+                Math.cos(sanitizeDegreesDouble(hue - 50.0) * Math.PI / 180.0);
+        return temperature;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A scheme that places the source color in `Scheme.primaryContainer`.
+ *
+ * Primary Container is the source color, adjusted for color relativity.
+ * It maintains constant appearance in light mode and dark mode.
+ * This adds ~5 tone in light mode, and subtracts ~5 tone in dark mode.
+ * Tertiary Container is the complement to the source color, using
+ * `TemperatureCache`. It also maintains constant appearance.
+ */
+class SchemeContent extends DynamicScheme {
+    constructor(sourceColorHct, isDark, contrastLevel) {
+        super({
+            sourceColorArgb: sourceColorHct.toInt(),
+            variant: Variant.CONTENT,
+            contrastLevel,
+            isDark,
+            primaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma),
+            secondaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, Math.max(sourceColorHct.chroma - 32.0, sourceColorHct.chroma * 0.5)),
+            tertiaryPalette: TonalPalette.fromInt(DislikeAnalyzer
+                .fixIfDisliked(new TemperatureCache(sourceColorHct).analogous(3, 6)[2])
+                .toInt()),
+            neutralPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma / 8.0),
+            neutralVariantPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma / 8.0 + 4.0),
+        });
+    }
+}
+
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -3295,6 +3645,223 @@ SchemeExpressive.tertiaryRotations = [
     120.0,
 ];
 
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A scheme that places the source color in `Scheme.primaryContainer`.
+ *
+ * Primary Container is the source color, adjusted for color relativity.
+ * It maintains constant appearance in light mode and dark mode.
+ * This adds ~5 tone in light mode, and subtracts ~5 tone in dark mode.
+ * Tertiary Container is the complement to the source color, using
+ * `TemperatureCache`. It also maintains constant appearance.
+ */
+class SchemeFidelity extends DynamicScheme {
+    constructor(sourceColorHct, isDark, contrastLevel) {
+        super({
+            sourceColorArgb: sourceColorHct.toInt(),
+            variant: Variant.FIDELITY,
+            contrastLevel,
+            isDark,
+            primaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma),
+            secondaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, Math.max(sourceColorHct.chroma - 32.0, sourceColorHct.chroma * 0.5)),
+            tertiaryPalette: TonalPalette.fromInt(DislikeAnalyzer
+                .fixIfDisliked(new TemperatureCache(sourceColorHct).complement)
+                .toInt()),
+            neutralPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma / 8.0),
+            neutralVariantPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma / 8.0 + 4.0),
+        });
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A playful theme - the source color's hue does not appear in the theme.
+ */
+class SchemeFruitSalad extends DynamicScheme {
+    constructor(sourceColorHct, isDark, contrastLevel) {
+        super({
+            sourceColorArgb: sourceColorHct.toInt(),
+            variant: Variant.FRUIT_SALAD,
+            contrastLevel,
+            isDark,
+            primaryPalette: TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue - 50.0), 48.0),
+            secondaryPalette: TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue - 50.0), 36.0),
+            tertiaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 36.0),
+            neutralPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 10.0),
+            neutralVariantPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16.0),
+        });
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/** A Dynamic Color theme that is grayscale. */
+class SchemeMonochrome extends DynamicScheme {
+    constructor(sourceColorHct, isDark, contrastLevel) {
+        super({
+            sourceColorArgb: sourceColorHct.toInt(),
+            variant: Variant.MONOCHROME,
+            contrastLevel,
+            isDark,
+            primaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0.0),
+            secondaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0.0),
+            tertiaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0.0),
+            neutralPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0.0),
+            neutralVariantPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0.0),
+        });
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/** A Dynamic Color theme that is near grayscale. */
+class SchemeNeutral extends DynamicScheme {
+    constructor(sourceColorHct, isDark, contrastLevel) {
+        super({
+            sourceColorArgb: sourceColorHct.toInt(),
+            variant: Variant.NEUTRAL,
+            contrastLevel,
+            isDark,
+            primaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 12.0),
+            secondaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
+            tertiaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16.0),
+            neutralPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 2.0),
+            neutralVariantPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 2.0),
+        });
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A playful theme - the source color's hue does not appear in the theme.
+ */
+class SchemeRainbow extends DynamicScheme {
+    constructor(sourceColorHct, isDark, contrastLevel) {
+        super({
+            sourceColorArgb: sourceColorHct.toInt(),
+            variant: Variant.RAINBOW,
+            contrastLevel,
+            isDark,
+            primaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 48.0),
+            secondaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16.0),
+            tertiaryPalette: TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 60.0), 24.0),
+            neutralPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0.0),
+            neutralVariantPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 0.0),
+        });
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A Dynamic Color theme with low to medium colorfulness and a Tertiary
+ * TonalPalette with a hue related to the source color.
+ *
+ * The default Material You theme on Android 12 and 13.
+ */
+class SchemeTonalSpot extends DynamicScheme {
+    constructor(sourceColorHct, isDark, contrastLevel) {
+        super({
+            sourceColorArgb: sourceColorHct.toInt(),
+            variant: Variant.TONAL_SPOT,
+            contrastLevel,
+            isDark,
+            primaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 36.0),
+            secondaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16.0),
+            tertiaryPalette: TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 60.0), 24.0),
+            neutralPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6.0),
+            neutralVariantPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
+        });
+    }
+}
+
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -3452,7 +4019,7 @@ function parseIntHex(value) {
     return parseInt(value, 16);
 }
 
-var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getVariant, _M3eThemeElement_getContrastLevel;
+var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_createScheme, _M3eThemeElement_apply, _M3eThemeElement_getContrastLevel;
 /**
  * A non-visual element responsible for application-level theming.
  *
@@ -3473,7 +4040,7 @@ var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_fi
  *
  * ```html
  * <body>
- *  <m3e-theme color="#7D67BE" scheme="auto" motion="expressive" strong-focus>
+ *  <m3e-theme color="#6750A4" scheme="auto" motion="expressive" strong-focus>
  *      <!-- Normal body content here. -->
  *  </m3e-theme>
  * <body/>
@@ -3501,14 +4068,14 @@ let M3eThemeElement = class M3eThemeElement extends LitElement {
         /** @private */ _M3eThemeElement_colorSchemeChangeHandler.set(this, () => __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_apply).call(this));
         /**
          * The hex color from which to derive dynamic color palettes.
-         * @default "#7D67BE"
+         * @default "#6750A4"
          */
-        this.color = "#7D67BE";
+        this.color = "#6750A4";
         /**
          * The color variant of the theme.
-         * @default "vibrant"
+         * @default "content"
          */
-        this.variant = "vibrant";
+        this.variant = "content";
         /**
          * The color scheme of the theme.
          * @default "auto"
@@ -3584,20 +4151,32 @@ _M3eThemeElement_dark = new WeakMap();
 _M3eThemeElement_forcedColor = new WeakMap();
 _M3eThemeElement_colorSchemeChangeHandler = new WeakMap();
 _M3eThemeElement_instances = new WeakSet();
+_M3eThemeElement_createScheme = function _M3eThemeElement_createScheme(sourceColor) {
+    switch (this.variant) {
+        case "content":
+            return new SchemeContent(sourceColor, this.isDark, __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this));
+        case "expressive":
+            return new SchemeExpressive(sourceColor, this.isDark, __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this));
+        case "fidelity":
+            return new SchemeFidelity(sourceColor, this.isDark, __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this));
+        case "fruit-salad":
+            return new SchemeFruitSalad(sourceColor, this.isDark, __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this));
+        case "monochrome":
+            return new SchemeMonochrome(sourceColor, this.isDark, __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this));
+        case "neutral":
+            return new SchemeNeutral(sourceColor, this.isDark, __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this));
+        case "rainbow":
+            return new SchemeRainbow(sourceColor, this.isDark, __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this));
+        case "tonal-spot":
+            return new SchemeTonalSpot(sourceColor, this.isDark, __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this));
+        case "vibrant":
+            return new SchemeVibrant(sourceColor, this.isDark, __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this));
+    }
+};
 _M3eThemeElement_apply = function _M3eThemeElement_apply() {
     const color = argbFromHex(this.color);
     const palette = CorePalette.of(color);
-    const scheme = new DynamicScheme({
-        sourceColorArgb: color,
-        variant: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getVariant).call(this),
-        contrastLevel: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this),
-        isDark: this.isDark,
-        primaryPalette: palette.a1,
-        secondaryPalette: palette.a2,
-        tertiaryPalette: palette.a3,
-        neutralPalette: palette.n1,
-        neutralVariantPalette: palette.n2,
-    });
+    const scheme = __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_createScheme).call(this, Hct.fromInt(color));
     let css = "";
     for (const key in MaterialDynamicColors) {
         if (!key.endsWith("PaletteKeyColor")) {
@@ -3639,28 +4218,6 @@ _M3eThemeElement_apply = function _M3eThemeElement_apply() {
         this.dispatchEvent(new Event("change", { bubbles: true }));
     }
 };
-_M3eThemeElement_getVariant = function _M3eThemeElement_getVariant() {
-    switch (this.variant) {
-        case "monochrome":
-            return 0;
-        case "neutral":
-            return 1;
-        case "tonal-spot":
-            return 2;
-        case "vibrant":
-            return 3;
-        case "expressive":
-            return 4;
-        case "fidelity":
-            return 5;
-        case "rainbow":
-            return 7;
-        case "fruit-salad":
-            return 8;
-        default: // content
-            return 6;
-    }
-};
 _M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel() {
     switch (this.contrast) {
         case "high":