import { describe, expect, it } from "vite-plus/test"; import { getMobileThemeRuntimeVariables } from "./mobileThemeVariables";import type { MaterialYouPalette } from "./materialYouPalette";import { materialYouPaletteToMobileThemeVariables } from "./materialYouTheme"; const palette: MaterialYouPalette = { primary: "#6750A4FF", onPrimary: "#FFFFFFFF", primaryContainer: "#EADDFFFF", onPrimaryContainer: "#21005DFF", inversePrimary: "#D0BCFFFF", secondaryContainer: "#E8DEF8FF", onSecondaryContainer: "#1D192BFF", tertiary: "#7D5260FF", tertiaryContainer: "#FFD8E4FF", onTertiaryContainer: "#31111DFF", surface: "#FFFBFEFF", onSurface: "#1C1B1FFF", onSurfaceVariant: "#49454FFF", surfaceContainer: "#F3EDF7FF", surfaceContainerHigh: "#ECE6F0FF", surfaceContainerHighest: "#E6E0E9FF", surfaceContainerLow: "#F7F2FAFF", surfaceContainerLowest: "#FFFFFFFF", errorContainer: "#F9DEDCFF", onErrorContainer: "#410E0BFF", outline: "#79747EFF", outlineVariant: "#CAC4D0FF", scrim: "#000000FF",}; describe("Material You system colors", () => { it("overrides the selected theme without mutating its base variables", () => { const base = getMobileThemeRuntimeVariables("t3-code", "dark"); const snapshot = { ...base }; const variables = materialYouPaletteToMobileThemeVariables(palette, "dark", base); expect(base).toEqual(snapshot); expect(variables["--color-screen"]).toBe(palette.surface); expect(variables["--color-thread-canvas"]).toBe(palette.surfaceContainerLow); expect(variables["--color-thread-selected"]).toBe(palette.surfaceContainer); expect(variables["--color-header"]).toBe(palette.surfaceContainerHigh); expect(variables["--color-primary"]).toBe(palette.primary); expect(variables["--color-placeholder"]).toBe("#1C1B1F9E"); }); it("uses the Messages-style RCS tones for sent messages", () => { const base = getMobileThemeRuntimeVariables("t3-code", "dark"); const dark = materialYouPaletteToMobileThemeVariables( { ...palette, inversePrimary: "#A31D8DFF" }, "dark", base, ); const light = materialYouPaletteToMobileThemeVariables( { ...palette, inversePrimary: "#A31D8DFF" }, "light", getMobileThemeRuntimeVariables("t3-code", "light"), ); expect(dark["--color-user-bubble"]).toBe("#850073FF"); expect(dark["--color-user-bubble-foreground"]).toBe("#FFD7EFFF"); expect(light["--color-user-bubble"]).toBe(palette.primary); expect(light["--color-user-bubble-foreground"]).toBe(palette.onPrimary); });});
import { describe, expect, it } from "vite-plus/test";
import { getMobileThemeRuntimeVariables } from "./mobileThemeVariables";
import type { MaterialYouPalette } from "./materialYouPalette";
import { materialYouPaletteToMobileThemeVariables } from "./materialYouTheme";
const palette: MaterialYouPalette = {
primary: "#6750A4FF",
onPrimary: "#FFFFFFFF",
primaryContainer: "#EADDFFFF",
onPrimaryContainer: "#21005DFF",
inversePrimary: "#D0BCFFFF",
secondaryContainer: "#E8DEF8FF",
onSecondaryContainer: "#1D192BFF",
tertiary: "#7D5260FF",
tertiaryContainer: "#FFD8E4FF",
onTertiaryContainer: "#31111DFF",
surface: "#FFFBFEFF",
onSurface: "#1C1B1FFF",
onSurfaceVariant: "#49454FFF",
surfaceContainer: "#F3EDF7FF",
surfaceContainerHigh: "#ECE6F0FF",
surfaceContainerHighest: "#E6E0E9FF",
surfaceContainerLow: "#F7F2FAFF",
surfaceContainerLowest: "#FFFFFFFF",
errorContainer: "#F9DEDCFF",
onErrorContainer: "#410E0BFF",
outline: "#79747EFF",
outlineVariant: "#CAC4D0FF",
scrim: "#000000FF",
};
describe("Material You system colors", () => {
it("overrides the selected theme without mutating its base variables", () => {
const base = getMobileThemeRuntimeVariables("t3-code", "dark");
const snapshot = { ...base };
const variables = materialYouPaletteToMobileThemeVariables(palette, "dark", base);
expect(base).toEqual(snapshot);
expect(variables["--color-screen"]).toBe(palette.surface);
expect(variables["--color-thread-canvas"]).toBe(palette.surfaceContainerLow);
expect(variables["--color-thread-selected"]).toBe(palette.surfaceContainer);
expect(variables["--color-header"]).toBe(palette.surfaceContainerHigh);
expect(variables["--color-primary"]).toBe(palette.primary);
expect(variables["--color-placeholder"]).toBe("#1C1B1F9E");
});
it("uses the Messages-style RCS tones for sent messages", () => {
const base = getMobileThemeRuntimeVariables("t3-code", "dark");
const dark = materialYouPaletteToMobileThemeVariables(
{ ...palette, inversePrimary: "#A31D8DFF" },
"dark",
base,
);
const light = materialYouPaletteToMobileThemeVariables(
{ ...palette, inversePrimary: "#A31D8DFF" },
"light",
getMobileThemeRuntimeVariables("t3-code", "light"),
);
expect(dark["--color-user-bubble"]).toBe("#850073FF");
expect(dark["--color-user-bubble-foreground"]).toBe("#FFD7EFFF");
expect(light["--color-user-bubble"]).toBe(palette.primary);
expect(light["--color-user-bubble-foreground"]).toBe(palette.onPrimary);
});
});