67 lines · 2.5 KB · TypeScript
RawDownload
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);  });});