Skip to content

fix(theme): complete the tenant token contract with a legibility floor #277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AutomatosAI merged 2 commits into from
Sep 7, 2026
Merged

fix(theme): complete the tenant token contract with a legibility floor #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
770a30d
fix(theme): complete the tenant token contract with a legibility floor
Gerard161-Site Sep 7, 2026
9748dae
fix(theme): accept comma-alpha hsla() and warn on low-contrast surfac…
Gerard161-Site Sep 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions nextjs_space/app/store/[slug]/how-it-works/how-it-works-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ export function HowItWorksClient() {

if (loading) {
return (
<div className="min-h-screen bg-white flex items-center justify-center">
<p className="text-lg text-gray-600">{t("common.loading")}</p>
<div className="min-h-screen bg-background flex items-center justify-center">
<p className="text-lg text-muted-foreground">{t("common.loading")}</p>
</div>
);
}
Expand Down
36 changes: 17 additions & 19 deletions nextjs_space/app/store/[slug]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { AutomatosWidgetWrapper } from "@/components/admin/AutomatosWidgetWrappe
import { Ga4Tag } from "@/components/seo/ga4-tag";
import { parseTenantSettings } from "@/lib/tenant/tenant-settings";
import { sanitizeCss, extractGoogleFontsImports } from "@/lib/security/css-utils";
import { hexToHsl } from "@/lib/color-utils";
import { buildColorOverrideVars } from "@/lib/theme/tenant-tokens";
import type { Metadata } from "next";
import {
buildStoreMetadata,
Expand Down Expand Up @@ -263,20 +263,21 @@ async function renderTenantStore(
pageContent: (activeTemplate?.pageContent as any) || defaults?.pageContent || {},
};

// The palette the nav/footer override legibility check is made against —
// the same designSystem fallback order TenantThemeProvider uses.
const paletteBase = designSystem?.colors || settings.designSystem?.colors;

// Render navigation
const renderNavigation = () => {
// Data-driven: use section component from layout.json
if (layout?.navigation) {
const NavComponent = getSectionComponent(layout.navigation);
if (NavComponent) {
const navOverrides = layout.navigationConfig?.colorOverrides;
const navStyle: CSSProperties | undefined = navOverrides
? (Object.fromEntries(
Object.entries(navOverrides)
.filter(([, v]) => v && typeof v === 'string' && v.trim())
.map(([k, v]) => [`--tenant-color-${k}`, (v as string).startsWith('#') ? hexToHsl(v as string) : v])
) as CSSProperties)
: undefined;
// Legibility-checked against the tenant palette (lib/theme/tenant-tokens)
const navVars = buildColorOverrideVars(layout.navigationConfig?.colorOverrides, {
base: paletteBase,
});
const navStyle = Object.keys(navVars).length > 0 ? (navVars as CSSProperties) : undefined;
return (
<div style={navStyle}>
<NavComponent {...sectionProps} sectionConfig={layout.navigationConfig} />
Expand Down Expand Up @@ -312,17 +313,14 @@ async function renderTenantStore(
if (FooterComponent) {
const isDarkFooter = layout.footer === 'FooterBrand' || layout.footer === 'FooterFull';
const darkDefaults: Record<string, string> = isDarkFooter
? { '--tenant-color-background': '220 15% 10%', '--tenant-color-text': '0 0% 100%', '--tenant-color-heading': '0 0% 100%', '--tenant-color-border': '0 0% 100%' }
: {};
const footerOverrides = layout.footerConfig?.colorOverrides;
const overrideEntries = footerOverrides
? Object.fromEntries(
Object.entries(footerOverrides)
.filter(([, v]) => v && typeof v === 'string' && v.trim())
.map(([k, v]) => [`--tenant-color-${k}`, (v as string).startsWith('#') ? hexToHsl(v as string) : v])
)
? { background: '220 15% 10%', text: '0 0% 100%', heading: '0 0% 100%', border: '0 0% 100%' }
: {};
const footerStyle = { ...darkDefaults, ...overrideEntries } as CSSProperties;
// Overrides layer on the dark defaults; both are legibility-checked
// against the tenant palette (lib/theme/tenant-tokens).
const footerStyle = buildColorOverrideVars(layout.footerConfig?.colorOverrides, {
defaults: darkDefaults,
base: paletteBase,
}) as CSSProperties;
return (
<div style={Object.keys(footerStyle).length > 0 ? footerStyle : undefined}>
<FooterComponent {...sectionProps} sectionConfig={layout.footerConfig} />
Expand Down
2 changes: 1 addition & 1 deletion nextjs_space/app/store/[slug]/login/login-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function LoginFormInner({ businessName, logoUrl, basePath }: TenantLoginFormProp
/>
)}
<h1 className="text-2xl font-bold mb-1">Sign in to {businessName}</h1>
<p className="text-gray-500 text-sm mb-6">Welcome back! Please sign in to continue</p>
<p className="text-muted-foreground text-sm mb-6">Welcome back! Please sign in to continue</p>

<SignIn
appearance={{
Expand Down
10 changes: 5 additions & 5 deletions nextjs_space/app/store/[slug]/orders/[orderId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default async function OrderConfirmationPage({
case "CANCELLED":
return <Package className="h-16 w-16 text-red-500" />;
default:
return <Clock className="h-16 w-16 text-gray-400" />;
return <Clock className="h-16 w-16 text-muted-foreground" />;
}
};

Expand Down Expand Up @@ -91,8 +91,8 @@ export default async function OrderConfirmationPage({
<CardContent className="flex flex-col items-center text-center py-12">
{getStatusIcon(order.paymentStatus)}
<h1 className="text-3xl font-bold mt-6 mb-2">{status.title}</h1>
<p className="text-gray-600 mb-4">{status.message}</p>
<p className="text-sm text-gray-500">
<p className="text-muted-foreground mb-4">{status.message}</p>
<p className="text-sm text-muted-foreground">
Order Number:{" "}
<span className="font-mono font-semibold">{order.drGreenInvoiceNum || order.orderNumber}</span>
</p>
Expand Down Expand Up @@ -149,11 +149,11 @@ export default async function OrderConfirmationPage({
return (
<>
<div className="flex justify-between text-sm">
<span className="text-gray-600">Subtotal</span>
<span className="text-muted-foreground">Subtotal</span>
<span>{currency} {order.subtotal.toFixed(2)}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-600">Shipping</span>
<span className="text-muted-foreground">Shipping</span>
<span>{currency} {order.shippingCost.toFixed(2)}</span>
</div>
<div className="flex justify-between text-lg font-bold border-t pt-2">
Expand Down
4 changes: 2 additions & 2 deletions nextjs_space/app/store/[slug]/register/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ export default function RegisterRedirectPage() {
}, [slug, router]);

return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="min-h-screen flex items-center justify-center bg-background">
<div className="text-center">
<Loader2 className="h-8 w-8 animate-spin text-green-600 mx-auto mb-4" />
<p className="text-gray-600">Redirecting to eligibility check...</p>
<p className="text-muted-foreground">Redirecting to eligibility check...</p>
</div>
</div>
);
Expand Down
56 changes: 27 additions & 29 deletions nextjs_space/app/store/[slug]/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export default function SettingsPage() {
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<div className="w-16 h-16 border-4 border-green-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
<p className="text-gray-600">Loading...</p>
<p className="text-muted-foreground">Loading...</p>
</div>
</div>
);
Expand All @@ -109,31 +109,30 @@ export default function SettingsPage() {
}

return (
<div className="min-h-screen saas-shell pt-24 pb-20">
<div className="min-h-screen bg-background pt-24 pb-20">
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
{/* Header */}
<div className="mb-8 flex items-center justify-between">
<div>
<span className="saas-pill text-slate-600">Customer Dashboard</span>
<h1 className="mt-4 text-3xl font-semibold text-slate-900 mb-2">
<span className="inline-flex items-center rounded-full border border-border bg-card px-3 py-1 text-xs font-medium text-muted-foreground">Customer Dashboard</span>
<h1 className="mt-4 text-3xl font-semibold text-foreground mb-2">
Account Settings
</h1>
<p className="text-slate-500">Manage your account information</p>
<p className="text-muted-foreground">Manage your account information</p>
</div>
{!isEditing && (
<Button
onClick={() => setIsEditing(true)}
className="bg-slate-900 text-white hover:bg-slate-800"
>
Edit Profile
</Button>
)}
</div>

{/* Profile Information */}
<div className="saas-card border-0 p-6 mb-6">
<h2 className="text-xl font-semibold text-slate-900 mb-6 flex items-center gap-2">
<User className="w-5 h-5 text-slate-500" />
<div className="rounded-2xl border border-border bg-card p-6 mb-6 text-card-foreground shadow-sm">
<h2 className="text-xl font-semibold text-card-foreground mb-6 flex items-center gap-2">
<User className="w-5 h-5 text-muted-foreground" />
Personal Information
</h2>

Expand All @@ -151,7 +150,7 @@ export default function SettingsPage() {
className="mt-1"
/>
) : (
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg mt-1">
<div className="px-4 py-2 bg-muted border border-border rounded-lg mt-1">
{formData.firstName || "Not set"}
</div>
)}
Expand All @@ -169,7 +168,7 @@ export default function SettingsPage() {
className="mt-1"
/>
) : (
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg mt-1">
<div className="px-4 py-2 bg-muted border border-border rounded-lg mt-1">
{formData.lastName || "Not set"}
</div>
)}
Expand All @@ -179,11 +178,11 @@ export default function SettingsPage() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<Label htmlFor="email">Email Address</Label>
<div className="px-4 py-2 bg-gray-100 border border-gray-200 rounded-lg flex items-center gap-2 mt-1">
<Mail className="w-4 h-4 text-gray-400" />
<div className="px-4 py-2 bg-muted border border-border rounded-lg flex items-center gap-2 mt-1">
<Mail className="w-4 h-4 text-muted-foreground" />
{user.primaryEmailAddress?.emailAddress}
</div>
<p className="text-xs text-gray-500 mt-1">
<p className="text-xs text-muted-foreground mt-1">
Email cannot be changed
</p>
</div>
Expand All @@ -192,7 +191,7 @@ export default function SettingsPage() {
<Label htmlFor="phone">Phone Number</Label>
{isEditing ? (
<div className="relative mt-1">
<Phone className="absolute left-3 top-3 w-4 h-4 text-gray-400" />
<Phone className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
<Input
id="phone"
type="tel"
Expand All @@ -205,8 +204,8 @@ export default function SettingsPage() {
/>
</div>
) : (
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg flex items-center gap-2 mt-1">
<Phone className="w-4 h-4 text-gray-400" />
<div className="px-4 py-2 bg-muted border border-border rounded-lg flex items-center gap-2 mt-1">
<Phone className="w-4 h-4 text-muted-foreground" />
{formData.phone || "Not set"}
</div>
)}
Expand All @@ -216,8 +215,8 @@ export default function SettingsPage() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<Label>Account Role</Label>
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg flex items-center gap-2 mt-1">
<Shield className="w-4 h-4 text-gray-400" />
<div className="px-4 py-2 bg-muted border border-border rounded-lg flex items-center gap-2 mt-1">
<Shield className="w-4 h-4 text-muted-foreground" />
{(user.publicMetadata?.role as string) || "PATIENT"}
</div>
</div>
Expand Down Expand Up @@ -247,9 +246,9 @@ export default function SettingsPage() {
</div>

{/* Address Information */}
<div className="saas-card border-0 p-6 mb-6">
<h2 className="text-xl font-semibold text-slate-900 mb-6 flex items-center gap-2">
<MapPin className="w-5 h-5 text-slate-500" />
<div className="rounded-2xl border border-border bg-card p-6 mb-6 text-card-foreground shadow-sm">
<h2 className="text-xl font-semibold text-card-foreground mb-6 flex items-center gap-2">
<MapPin className="w-5 h-5 text-muted-foreground" />
Address
</h2>

Expand All @@ -267,7 +266,7 @@ export default function SettingsPage() {
placeholder="Street address"
/>
) : (
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg mt-1">
<div className="px-4 py-2 bg-muted border border-border rounded-lg mt-1">
{formData.addressLine1 || "Not set"}
</div>
)}
Expand All @@ -286,7 +285,7 @@ export default function SettingsPage() {
placeholder="Apartment, suite, etc."
/>
) : (
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg mt-1">
<div className="px-4 py-2 bg-muted border border-border rounded-lg mt-1">
{formData.addressLine2 || "Not set"}
</div>
)}
Expand All @@ -305,7 +304,7 @@ export default function SettingsPage() {
className="mt-1"
/>
) : (
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg mt-1">
<div className="px-4 py-2 bg-muted border border-border rounded-lg mt-1">
{formData.city || "Not set"}
</div>
)}
Expand All @@ -323,7 +322,7 @@ export default function SettingsPage() {
className="mt-1"
/>
) : (
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg mt-1">
<div className="px-4 py-2 bg-muted border border-border rounded-lg mt-1">
{formData.state || "Not set"}
</div>
)}
Expand All @@ -341,7 +340,7 @@ export default function SettingsPage() {
className="mt-1"
/>
) : (
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg mt-1">
<div className="px-4 py-2 bg-muted border border-border rounded-lg mt-1">
{formData.postalCode || "Not set"}
</div>
)}
Expand All @@ -360,7 +359,7 @@ export default function SettingsPage() {
className="mt-1"
/>
) : (
<div className="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg mt-1">
<div className="px-4 py-2 bg-muted border border-border rounded-lg mt-1">
{formData.country || "Not set"}
</div>
)}
Expand All @@ -371,7 +370,6 @@ export default function SettingsPage() {
<Button
onClick={handleSave}
disabled={isSaving}
className="bg-slate-900 text-white hover:bg-slate-800"
>
<Save className="w-4 h-4 mr-2" />
{isSaving ? "Saving..." : "Save Changes"}
Expand Down
17 changes: 17 additions & 0 deletions nextjs_space/app/tenant-admin/branding/tabs/colours-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from "@/components/ui/accordion";
import { X } from "lucide-react";
import { ColorPicker } from "./shared";
import { ContrastHint, overridePairs } from "./contrast-hint";
import type { EditorFormData, SetFormData } from "./types";

const sectionTitleStyle = {
Expand Down Expand Up @@ -139,6 +140,20 @@ export function ColoursTab({
onChange={(v) => setGlobalColor("textColor", v)}
/>
</div>
<ContrastHint
pairs={[
{
label: "Body text on page background",
foreground: formData.textColor,
background: formData.backgroundColor,
},
{
label: "Heading text on page background",
foreground: formData.headingColor,
background: formData.backgroundColor,
},
]}
/>
</section>

{/* Navigation & Footer Color Overrides */}
Expand Down Expand Up @@ -214,6 +229,7 @@ export function ColoursTab({
</div>
))}
</div>
<ContrastHint pairs={overridePairs(formData.navColorOverrides, formData, "Navigation")} />
</div>
</AccordionContent>
</AccordionItem>
Expand Down Expand Up @@ -278,6 +294,7 @@ export function ColoursTab({
</div>
))}
</div>
<ContrastHint pairs={overridePairs(formData.footerColorOverrides, formData, "Footer")} />
</div>
</AccordionContent>
</AccordionItem>
Expand Down
Loading
Loading