83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
import "../setup.ts";
|
|
import {
|
|
assert,
|
|
assertEquals,
|
|
assertMatch,
|
|
assertNotEquals,
|
|
} from "@std/assert";
|
|
import { readTokens } from "../../mail/theme-tokens.ts";
|
|
import { EMAIL_STYLES } from "../../mail/styles.ts";
|
|
import { STYLE_NAMES } from "../../../shared/theme.ts";
|
|
|
|
Deno.test("readTokens: light-dark() picks the scheme's value", () => {
|
|
assertEquals(readTokens("smooth", "light").color("--color-bg"), "#faf5e9");
|
|
assertEquals(readTokens("smooth", "dark").color("--color-bg"), "#01152a");
|
|
});
|
|
|
|
Deno.test("readTokens: a forced scheme's block overrides the theme's", () => {
|
|
// GeoCities draws a darker rainbow on its light pages.
|
|
assertEquals(readTokens("geocities", "light").stops("--geo-rainbow"), [
|
|
"#ff004d",
|
|
"#ff8a00",
|
|
"#ffcc00",
|
|
"#00aa1a",
|
|
"#0077dd",
|
|
"#8800cc",
|
|
]);
|
|
assertEquals(
|
|
readTokens("geocities", "dark").stops("--geo-rainbow")[2],
|
|
"#ffee00",
|
|
);
|
|
});
|
|
|
|
Deno.test("readTokens: var() follows tokens, color-mix() is computed", () => {
|
|
const melange = readTokens("melange", "light");
|
|
// The spice holds var()s, the accent among them, and drops its stops'
|
|
// positions.
|
|
assertEquals(melange.stops("--mel-spice"), [
|
|
"#ea6a45",
|
|
"#e2568f",
|
|
"#8262d8",
|
|
"#3a8fd4",
|
|
"#27a583",
|
|
]);
|
|
// 18% of the muted text over the card, as a badge shows on the site.
|
|
const smooth = readTokens("smooth", "light");
|
|
assertEquals(smooth.color("--color-badge-bg", "--color-surface"), "#dfe4e1");
|
|
assertEquals(smooth.color("--color-badge-bg"), "rgba(77,113,120,0.18)");
|
|
});
|
|
|
|
Deno.test("readTokens: fonts, lengths and the base tokens", () => {
|
|
assertEquals(
|
|
readTokens("smooth", "light").font("--font-body"),
|
|
"Saira, sans-serif",
|
|
);
|
|
assertEquals(
|
|
readTokens("kanagawa", "dark").font("--font-body"),
|
|
"'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace",
|
|
);
|
|
// Smooth keeps tokens.css's radii; Brutalist squares them.
|
|
assertEquals(readTokens("smooth", "light").px("--radius-xl"), 12);
|
|
assertEquals(readTokens("brutalist", "light").px("--radius-xl"), 0);
|
|
});
|
|
|
|
Deno.test("EMAIL_STYLES: every style reads plain colors from its theme", () => {
|
|
for (const name of STYLE_NAMES) {
|
|
const style = EMAIL_STYLES[name];
|
|
for (const palette of [style.light, style.dark]) {
|
|
for (const [role, color] of Object.entries(palette)) {
|
|
if (role === "gradient") continue;
|
|
assertMatch(
|
|
color,
|
|
role === "shadow" ? /^rgba\(/ : /^#[0-9a-f]{6}$/,
|
|
`${name} ${role}`,
|
|
);
|
|
}
|
|
}
|
|
assertNotEquals(style.light.card, style.dark.card, name);
|
|
if (style.rule === "gradient" || style.bar) {
|
|
assert((style.light.gradient?.length ?? 0) > 1, name);
|
|
}
|
|
}
|
|
});
|