Frutiger Aero theme, pixel-measured contrast fixes, sheet surfaces
Frutiger Aero (Settings -> Theme): a third theme, not a dark/light variant. A sky gradient with a strip of grass, the glacier blobs become clouds, the orbs soap bubbles, glass gets the classic horizon gloss and the buttons a glossy aqua. The light/dark toggles (header, rail, chat header) hide while it is on and the picker says why; the pre-paint script applies the class before first paint and the PWA status bar follows (#3fa3e0). Its muted/frost text is darker than Light's because those labels sit directly on the sky. Contrast, measured on real pixels (tests/contrast.mjs, now covering aero): - The light settings sheet was translucent over a dark scrim, so its muted text measured ~2.8:1. Sheets and dialogs now use --glass-sheet-bg (a more opaque surface), and Light's --text-muted is a touch darker. - Result: 0 below-minimum findings and 0 axe violations across every screen, all three themes, phone and desktop. Also: the suites now seed the cookie notice as already dismissed (they run as a returning user); the regression suite opts out to test the notice itself — the previous deploy failed its gate because the notice blocked a chat chip click. The notice also hides during immersive sessions (overlay-open), so it can never cover a study feed. Version 0.1.8, SW -> freezmo-v54.
This commit is contained in:
parent
464781a7fd
commit
e56653dae1
21 changed files with 329 additions and 57 deletions
|
|
@ -379,7 +379,7 @@ function HelpDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
|
|||
exit={reduceMotion ? { opacity: 0 } : { y: 24, opacity: 0 }}
|
||||
transition={{ type: "spring", stiffness: 340, damping: 32 }}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
className="gate-card thin-scroll max-h-[90dvh] w-full max-w-[480px] overflow-y-auto p-6 pb-safe sm:pb-6"
|
||||
className="gate-card glass-sheet thin-scroll max-h-[90dvh] w-full max-w-[480px] overflow-y-auto p-6 pb-safe sm:pb-6"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<h2
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export function CookieConsent() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none fixed inset-x-0 bottom-[calc(env(safe-area-inset-bottom,0px)+5.25rem)] z-[44] flex justify-center px-4 sm:bottom-6">
|
||||
<div className="cookie-notice pointer-events-none fixed inset-x-0 bottom-[calc(env(safe-area-inset-bottom,0px)+5.25rem)] z-[44] flex justify-center px-4 sm:bottom-6">
|
||||
<div
|
||||
role="region"
|
||||
aria-label={t("consent.title")}
|
||||
|
|
|
|||
|
|
@ -251,7 +251,7 @@ export function InstallSheet() {
|
|||
animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
|
||||
exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
|
||||
transition={{ duration: 0.34, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="gate-card absolute inset-x-0 bottom-0 mx-auto w-full rounded-b-none border-b-0 sm:max-w-xl"
|
||||
className="gate-card glass-sheet absolute inset-x-0 bottom-0 mx-auto w-full rounded-b-none border-b-0 sm:max-w-xl"
|
||||
>
|
||||
<div className="thin-scroll max-h-[90dvh] overflow-y-auto px-5 pt-2 pb-[calc(24px+env(safe-area-inset-bottom))]">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -578,7 +578,7 @@ export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" |
|
|||
animate={{ y: 0 }}
|
||||
exit={{ y: 300 }}
|
||||
transition={springSheet}
|
||||
className="glass-panel relative z-10 rounded-t-3xl px-4 pb-safe pt-3"
|
||||
className="glass-panel glass-sheet relative z-10 rounded-t-3xl px-4 pb-safe pt-3"
|
||||
>
|
||||
<div className="sheet-grabber" aria-hidden />
|
||||
<h2 className="mb-3 text-[15px] font-semibold text-[var(--text)]">{t("library.moreTitle")}</h2>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { springSheet } from "@/lib/motion";
|
|||
import { ModelErrorActions } from "@/components/ModelErrorActions";
|
||||
import { DataSection } from "@/components/DataSection";
|
||||
import { LearningSection } from "@/components/LearningSection";
|
||||
import { ThemeSection } from "@/components/ThemeSection";
|
||||
import { SyncSection } from "@/components/SyncSection";
|
||||
import { clearApiKey, saveSettings, settingsStore } from "@/lib/settings";
|
||||
import { useBackClose } from "@/lib/use-back-close";
|
||||
|
|
@ -203,7 +204,7 @@ export function SettingsDialog({
|
|||
exit={reduceMotion ? { opacity: 0 } : phone ? { y: "100%", opacity: 0 } : { y: 32, opacity: 0 }}
|
||||
transition={phone ? springSheet : { type: "spring", stiffness: 340, damping: 32 }}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
className="glass-panel relative flex max-h-[90dvh] w-full max-w-lg flex-col overflow-hidden rounded-t-[1.6rem] shadow-2xl sm:rounded-[1.35rem]"
|
||||
className="glass-panel glass-sheet relative flex max-h-[90dvh] w-full max-w-lg flex-col overflow-hidden rounded-t-[1.6rem] shadow-2xl sm:rounded-[1.35rem]"
|
||||
>
|
||||
{/* handle + header: the drag strip. Fixed, so the body scrolls. */}
|
||||
<div
|
||||
|
|
@ -407,8 +408,13 @@ export function SettingsDialog({
|
|||
/>
|
||||
</section>
|
||||
|
||||
{/* ------------------------------------------- data & sync */}
|
||||
{/* ------------------------------------------- theme */}
|
||||
<ThemeSection />
|
||||
|
||||
{/* ----------------------------------------- learning */}
|
||||
<LearningSection level={3} />
|
||||
|
||||
{/* ------------------------------------------- data & sync */}
|
||||
<DataSection />
|
||||
<SyncSection />
|
||||
|
||||
|
|
@ -764,8 +770,13 @@ export function SettingsDialog({
|
|||
/>
|
||||
</section>
|
||||
|
||||
{/* ------------------------------------------- data & sync */}
|
||||
{/* ------------------------------------------- theme */}
|
||||
<ThemeSection />
|
||||
|
||||
{/* ----------------------------------------- learning */}
|
||||
<LearningSection level={3} />
|
||||
|
||||
{/* ------------------------------------------- data & sync */}
|
||||
<DataSection />
|
||||
<SyncSection />
|
||||
|
||||
|
|
|
|||
|
|
@ -279,27 +279,31 @@ function NavContent({ collapsed = false }: { collapsed?: boolean }) {
|
|||
<GearIcon className="size-4 shrink-0 opacity-70" />
|
||||
{!collapsed ? <span className="flex-1 truncate text-left">{t("common.settings")}</span> : null}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
haptic("toggle");
|
||||
toggle();
|
||||
}}
|
||||
aria-label={theme === "dark" ? t("common.switchToLight") : t("common.switchToDark")}
|
||||
title={theme === "dark" ? t("common.lightMode") : t("common.darkMode")}
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<SunIcon className="size-4 shrink-0 opacity-70" />
|
||||
) : (
|
||||
<MoonIcon className="size-4 shrink-0 opacity-70" />
|
||||
)}
|
||||
{!collapsed ? (
|
||||
<span className="flex-1 truncate text-left">
|
||||
{theme === "dark" ? t("common.lightMode") : t("common.darkMode")}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
{/* Frutiger Aero has no light/dark flip (see the theme picker in
|
||||
Settings), so this row goes away while it is on. */}
|
||||
{theme === "aero" ? null : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
haptic("toggle");
|
||||
toggle();
|
||||
}}
|
||||
aria-label={theme === "dark" ? t("common.switchToLight") : t("common.switchToDark")}
|
||||
title={theme === "dark" ? t("common.lightMode") : t("common.darkMode")}
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<SunIcon className="size-4 shrink-0 opacity-70" />
|
||||
) : (
|
||||
<MoonIcon className="size-4 shrink-0 opacity-70" />
|
||||
)}
|
||||
{!collapsed ? (
|
||||
<span className="flex-1 truncate text-left">
|
||||
{theme === "dark" ? t("common.lightMode") : t("common.darkMode")}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
45
components/ThemeSection.tsx
Normal file
45
components/ThemeSection.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
"use client";
|
||||
|
||||
import { useTheme, type Theme } from "@/components/ThemeToggle";
|
||||
import { haptic } from "@/lib/haptics";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
|
||||
const OPTIONS: Array<{ id: Theme; labelKey: string }> = [
|
||||
{ id: "light", labelKey: "common.lightMode" },
|
||||
{ id: "dark", labelKey: "common.darkMode" },
|
||||
{ id: "aero", labelKey: "theme.aero" },
|
||||
];
|
||||
|
||||
/**
|
||||
* The theme picker: light, dark, or Frutiger Aero. Aero is not a dark/light
|
||||
* variant — it swaps the whole palette and scene — which is why the light/dark
|
||||
* toggles (header, rail, chat header) disappear while it is on.
|
||||
*/
|
||||
export function ThemeSection() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<section className="mb-4 space-y-3 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
|
||||
<h3 className="text-sm font-semibold text-frost-950 dark:text-frost-50">{t("settings.theme")}</h3>
|
||||
<div className="segmented" role="group" aria-label={t("settings.theme")}>
|
||||
{OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
aria-pressed={theme === option.id}
|
||||
onClick={() => {
|
||||
haptic("toggle");
|
||||
setTheme(option.id);
|
||||
}}
|
||||
>
|
||||
<span className="seg-label">{t(option.labelKey)}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{theme === "aero" ? (
|
||||
<p className="text-[11px] leading-snug text-[var(--text-subtle)]">{t("theme.aeroNote")}</p>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -9,14 +9,18 @@ import { MoonIcon, SunIcon } from "@/components/icons";
|
|||
|
||||
const STORAGE_KEY = "freezmo.theme";
|
||||
|
||||
const THEME_COLORS = { light: "#f4f7fd", dark: "#0e1424" } as const;
|
||||
const THEME_COLORS = { light: "#f4f7fd", dark: "#0e1424", aero: "#3fa3e0" } as const;
|
||||
|
||||
/** The three themes. Aero is not a dark/light variant: it replaces the palette
|
||||
* and the scene, and the light/dark toggles hide while it is on. */
|
||||
export type Theme = "light" | "dark" | "aero";
|
||||
|
||||
/**
|
||||
* Keeps the first `theme-color` meta (the one the app owns) in step with the
|
||||
* in-app theme. The SSR metas follow the OS preference; this one always wins
|
||||
* because it is media-less and first in the head.
|
||||
*/
|
||||
export function syncThemeColor(theme: "light" | "dark") {
|
||||
export function syncThemeColor(theme: Theme) {
|
||||
try {
|
||||
let meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"][data-app]');
|
||||
if (!meta) {
|
||||
|
|
@ -31,8 +35,9 @@ export function syncThemeColor(theme: "light" | "dark") {
|
|||
}
|
||||
}
|
||||
|
||||
export function applyTheme(next: "light" | "dark") {
|
||||
export function applyTheme(next: Theme) {
|
||||
document.documentElement.classList.toggle("dark", next === "dark");
|
||||
document.documentElement.classList.toggle("aero", next === "aero");
|
||||
syncThemeColor(next);
|
||||
try {
|
||||
window.localStorage.setItem(STORAGE_KEY, next);
|
||||
|
|
@ -42,23 +47,33 @@ export function applyTheme(next: "light" | "dark") {
|
|||
}
|
||||
|
||||
export function useTheme() {
|
||||
const [theme, setTheme] = useState<"light" | "dark">("light");
|
||||
const [theme, setTheme] = useState<Theme>("light");
|
||||
|
||||
useEffect(() => {
|
||||
const stored = window.localStorage.getItem(STORAGE_KEY);
|
||||
const isDark = stored
|
||||
? stored === "dark"
|
||||
: window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
setTheme(isDark ? "dark" : "light");
|
||||
syncThemeColor(isDark ? "dark" : "light");
|
||||
const next: Theme =
|
||||
stored === "dark" || stored === "aero"
|
||||
? stored
|
||||
: stored === "light"
|
||||
? "light"
|
||||
: window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
setTheme(next);
|
||||
syncThemeColor(next);
|
||||
}, []);
|
||||
|
||||
const apply = (next: "light" | "dark") => {
|
||||
const apply = (next: Theme) => {
|
||||
setTheme(next);
|
||||
applyTheme(next);
|
||||
};
|
||||
|
||||
return { theme, toggle: () => apply(theme === "dark" ? "light" : "dark") };
|
||||
return {
|
||||
theme,
|
||||
setTheme: apply,
|
||||
/** The light/dark flip; aero is chosen in Settings. */
|
||||
toggle: () => apply(theme === "dark" ? "light" : "dark"),
|
||||
};
|
||||
}
|
||||
|
||||
export function ThemeToggle({ className, plain = false }: { className?: string; plain?: boolean }) {
|
||||
|
|
@ -66,6 +81,9 @@ export function ThemeToggle({ className, plain = false }: { className?: string;
|
|||
const { t } = useI18n();
|
||||
const dark = theme === "dark";
|
||||
|
||||
// Frutiger Aero has no light/dark switch (see the theme picker in Settings).
|
||||
if (theme === "aero") return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ export function ContextPicker({
|
|||
animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
|
||||
exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
|
||||
transition={reduceMotion ? { duration: 0 } : springSheet}
|
||||
className="glass-panel absolute inset-x-0 bottom-0 max-h-[85dvh] overflow-y-auto rounded-b-none px-4 pb-safe pt-2"
|
||||
className="glass-panel glass-sheet absolute inset-x-0 bottom-0 max-h-[85dvh] overflow-y-auto rounded-b-none px-4 pb-safe pt-2"
|
||||
>
|
||||
<div className="sheet-grabber mx-auto" aria-hidden />
|
||||
<h2 className="px-1 pb-3 pt-2 text-[15px] font-semibold text-[var(--text)]">{t("chat.scope.title")}</h2>
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@ export function HistorySheet({ open, onClose, ...props }: HistoryProps & { open:
|
|||
animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
|
||||
exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
|
||||
transition={reduceMotion ? { duration: 0 } : springSheet}
|
||||
className="glass-panel absolute inset-x-0 bottom-0 flex max-h-[80dvh] flex-col rounded-b-none px-3 pb-safe pt-2"
|
||||
className="glass-panel glass-sheet absolute inset-x-0 bottom-0 flex max-h-[80dvh] flex-col rounded-b-none px-3 pb-safe pt-2"
|
||||
>
|
||||
<div className="sheet-grabber mx-auto" aria-hidden />
|
||||
<h2 className="px-1 pb-2 pt-2 text-[15px] font-semibold text-[var(--text)]">{t("chat.history")}</h2>
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export function ModelPicker({
|
|||
animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
|
||||
exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
|
||||
transition={reduceMotion ? { duration: 0 } : springSheet}
|
||||
className="glass-panel absolute inset-x-0 bottom-0 max-h-[80dvh] rounded-b-none px-4 pb-safe pt-2"
|
||||
className="glass-panel glass-sheet absolute inset-x-0 bottom-0 max-h-[80dvh] rounded-b-none px-4 pb-safe pt-2"
|
||||
>
|
||||
<div className="sheet-grabber mx-auto" aria-hidden />
|
||||
<h2 className="px-1 pb-3 pt-2 text-[15px] font-semibold text-[var(--text)]">{t("chat.modelTitle")}</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue