External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): WCAG AA contrast retune for the Otter Orange palette (#567)

Browse Source 
Fixes #557. Vivid fill, ink label: brand #E07832 stays on fills while primary-foreground flips to #1A1814 (5.83:1); new theme-aware ink tokens carry orange, destructive, and success text roles; opacity-modified text purged; landing, demo, and the docs fund button retuned. Guarded by a CSS-parsing unit contrast test, rebuilt axe baselines with zero contrast entries, a new landing axe smoke, and fully regenerated darwin visual baselines.
This commit is contained in:
SnapOtter
2026-07-18 12:56:48 +08:00
committed by GitHub
parent 6241f8719f
commit 51022628dc
566 changed files with 856 additions and 707 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/components/CategoryCards.astro
+6 -6
View File
@@ -62,7 +62,7 @@ const MODALITIES = [
label: t(locale, "home.categoryCards.file.label"),
blurb: t(locale, "home.categoryCards.file.blurb"),
icon: "Database",
color: "#5C8642",
color: "#51763A",
},
];
@@ -77,21 +77,21 @@ const cards = MODALITIES.map((m) => {
{cards.map((c) => (
<a
href={localizeHref(locale, `/tools/${c.section}/`)}
class="group flex flex-col rounded-2xl p-4 text-start text-white no-underline shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg"
style={`background-color: ${c.color}`}
class="group flex flex-col rounded-2xl p-4 text-start no-underline shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg"
style={`background-color: ${c.color}; color: ${c.id === "image" ? "#1A1814" : "#FFFFFF"}`}
>
<div class="flex items-center justify-between">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/20">
<span class={`flex h-9 w-9 items-center justify-center rounded-lg ${c.id === "image" ? "bg-white/20" : "bg-black/20"}`}>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" set:html={renderIcon(c.icon)} />
</span>
<span class="rounded-full bg-white/20 px-2.5 py-0.5 text-xs font-semibold">{t(locale, "home.categoryCards.toolCount", { count: c.count })}</span>
<span class={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${c.id === "image" ? "bg-white/20" : "bg-black/20"}`}>{t(locale, "home.categoryCards.toolCount", { count: c.count })}</span>
</div>
<div class="mt-4 flex items-center gap-1.5">
<p class="font-display text-base font-bold leading-tight">{c.label}</p>
<svg class="h-4 w-4 -translate-x-1 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</div>
<p class="mt-1 text-xs text-white/80">{c.blurb}</p>
<p class="mt-1 text-xs">{c.blurb}</p>
</a>
))}
</div>
apps/landing/src/components/EnterpriseSection.astro
+1 -1
View File
@@ -107,7 +107,7 @@ const frameworks = ["SOC 2", "ISO 27001", "HIPAA", "GDPR"];
set:html={feature.icon}
/>
</div>
<span class="font-mono text-[10px] uppercase tracking-[0.15em] text-primary/60">{feature.tag}</span>
<span class="font-mono text-[10px] uppercase tracking-[0.15em] text-primary-light">{feature.tag}</span>
</div>
<h3 class="mt-4 font-display text-base font-bold text-dark-fg">{feature.title}</h3>
<p class="mt-2 text-sm leading-relaxed text-dark-muted">{feature.description}</p>
apps/landing/src/components/FeatureHighlights.astro
+8 -8
View File
@@ -41,7 +41,7 @@ const aiPillColors = [
<section class="px-6 py-20 md:py-28">
<div class="reveal mx-auto mb-16 max-w-3xl text-center md:mb-20">
<span class="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-primary-dark">
<span class="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-primary-ink">
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
{t(locale, "home.features.badge")}
</span>
@@ -58,7 +58,7 @@ const aiPillColors = [
<!-- Feature 1: Data Sovereignty — text left, visual right -->
<div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
<div class="md:order-1">
<span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">{t(locale, "home.features.f1.kicker")}</span>
<span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">{t(locale, "home.features.f1.kicker")}</span>
<h3 class="mt-3 font-display text-2xl font-bold tracking-tight sm:text-3xl">
{t(locale, "home.features.f1.title")}
</h3>
@@ -70,7 +70,7 @@ const aiPillColors = [
<div class="rounded-xl border border-border bg-surface p-6 md:p-8">
<!-- Outer infrastructure box -->
<div class="rounded-lg border-2 border-dashed border-primary/30 p-5">
<span class="mb-4 block text-xs font-semibold uppercase tracking-wider text-primary">{t(locale, "home.features.f1.yourInfra")}</span>
<span class="mb-4 block text-xs font-semibold uppercase tracking-wider text-primary-ink">{t(locale, "home.features.f1.yourInfra")}</span>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col items-center gap-2 rounded-lg bg-primary-subtle p-4">
<svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -78,14 +78,14 @@ const aiPillColors = [
<path d="M8 12h8M8 16h5" />
<circle cx="18" cy="7" r="1" fill="currentColor" />
</svg>
<span class="text-xs font-semibold text-primary">{t(locale, "home.features.f1.snapotter")}</span>
<span class="text-xs font-semibold text-primary-ink">{t(locale, "home.features.f1.snapotter")}</span>
</div>
<div class="flex flex-col items-center gap-2 rounded-lg bg-primary-subtle p-4">
<svg class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
<polyline points="13 2 13 9 20 9" />
</svg>
<span class="text-xs font-semibold text-primary">{t(locale, "home.features.f1.yourFiles")}</span>
<span class="text-xs font-semibold text-primary-ink">{t(locale, "home.features.f1.yourFiles")}</span>
</div>
</div>
<!-- Internal arrows -->
@@ -113,7 +113,7 @@ const aiPillColors = [
<!-- Feature 2: REST API — visual left, text right -->
<div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
<div class="md:order-2">
<span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">{t(locale, "home.features.f2.kicker")}</span>
<span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">{t(locale, "home.features.f2.kicker")}</span>
<h3 class="mt-3 font-display text-2xl font-bold tracking-tight sm:text-3xl">
{t(locale, "home.features.f2.title")}
</h3>
@@ -138,7 +138,7 @@ const aiPillColors = [
<!-- Feature 3: AI Models — text left, visual right -->
<div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
<div class="md:order-1">
<span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">{t(locale, "home.features.f3.kicker")}</span>
<span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">{t(locale, "home.features.f3.kicker")}</span>
<h3 class="mt-3 font-display text-2xl font-bold tracking-tight sm:text-3xl">
{t(locale, "home.features.f3.title")}
</h3>
@@ -160,7 +160,7 @@ const aiPillColors = [
<!-- Feature 4: Deployment — visual left, text right -->
<div class="reveal grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">
<div class="md:order-2">
<span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">{t(locale, "home.features.f4.kicker")}</span>
<span class="font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">{t(locale, "home.features.f4.kicker")}</span>
<h3 class="mt-3 font-display text-2xl font-bold tracking-tight sm:text-3xl">
{t(locale, "home.features.f4.title")}
</h3>
apps/landing/src/components/Hero.astro
+1 -1
View File
@@ -52,7 +52,7 @@ const trustBadges = [
</h1>
<!-- Subtitle: capability breadth plus the infrastructure surfaces -->
<p class="animate-fade-up mx-auto mt-6 max-w-2xl text-lg text-white/90 md:text-xl" style="animation-delay: 0.15s; text-shadow: 0 1px 16px rgba(90, 20, 0, 0.22);">
<p class="animate-fade-up mx-auto mt-6 max-w-2xl text-lg text-white md:text-xl" style="animation-delay: 0.15s; text-shadow: 0 1px 16px rgba(90, 20, 0, 0.22);">
{t(locale, "home.hero.subtitle")}
</p>
apps/landing/src/components/HeroQuickstart.astro
+1 -1
View File
@@ -15,7 +15,7 @@ const DOCKER_CMD =
---
<div class="animate-fade-up mt-6 text-center" style="animation-delay: 0.24s;">
<p class="mb-3 font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">
<p class="mb-3 font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">
{t(locale, "home.quickstart.label")}
</p>
apps/landing/src/components/HeroSearch.astro
+7 -7
View File
@@ -15,12 +15,12 @@ const { locale = "en" } = Astro.props;
// Tool name/description come from shared i18n (translated in all 21 langs).
const toolStrings = await loadToolStrings(locale);
const MODALITY_META: Record<string, { label: string; color: string }> = {
image: { label: "Image", color: "#E07832" },
video: { label: "Video", color: "#BE4A3C" },
audio: { label: "Audio", color: "#2C7A75" },
document: { label: "PDF", color: "#44568C" },
file: { label: "Files", color: "#5C8642" },
const MODALITY_META: Record<string, { label: string; color: string; ink: string }> = {
image: { label: "Image", color: "#E07832", ink: "#A85518" },
video: { label: "Video", color: "#BE4A3C", ink: "#B54639" },
audio: { label: "Audio", color: "#2C7A75", ink: "#2B7672" },
document: { label: "PDF", color: "#44568C", ink: "#44568C" },
file: { label: "Files", color: "#5C8642", ink: "#51763A" },
};
function renderIcon(iconName: string): string {
@@ -89,7 +89,7 @@ function renderIcon(iconName: string): string {
<span class="flex-1 text-sm font-medium text-foreground">{toolName}</span>
<span
class="shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold"
style={`background-color: ${mod?.color}1a; color: ${mod?.color}`}
style={`background-color: ${mod?.color}1a; color: ${mod?.ink}`}
>
{mod?.label}
</span>
apps/landing/src/components/MachineTranslationBanner.astro
+1 -1
View File
@@ -19,7 +19,7 @@ const CONTRIBUTE_URL = "https://docs.snapotter.com/guide/translations";
hidden
>
<span>{t(locale, "banner.machineTranslated")} </span>
<a href={CONTRIBUTE_URL} target="_blank" rel="noopener noreferrer" class="font-semibold text-primary-dark underline">
<a href={CONTRIBUTE_URL} target="_blank" rel="noopener noreferrer" class="font-semibold text-primary-ink underline">
{t(locale, "banner.machineTranslated")}
</a>
<button
apps/landing/src/components/Pricing.astro
+1 -1
View File
@@ -56,7 +56,7 @@ const checkIcon =
<div class="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-primary/[0.04] to-transparent"></div>
<div class="relative">
<span class="mb-4 inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
<span class="mb-4 inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary-ink">
{t(locale, "home.pricing.oss.badge")}
</span>
<h3 class="font-display text-2xl font-bold">{t(locale, "home.pricing.oss.name")}</h3>
apps/landing/src/components/QuickstartBlock.astro
+1 -1
View File
@@ -25,7 +25,7 @@ const blocks = [
<div class="not-prose space-y-5">
{blocks.map((b) => (
<div>
<p class="mb-2 font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary">
<p class="mb-2 font-mono text-xs font-semibold uppercase tracking-[0.15em] text-primary-ink">
{b.label}
</p>
<button
apps/landing/src/components/ToolGrid.astro
+8 -8
View File
@@ -254,12 +254,12 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
class:list={[
"tool-command-modality rounded-md px-3 py-2 text-sm font-semibold transition-colors",
modality.id === "all"
? "bg-primary text-white shadow-sm"
? "bg-primary text-foreground shadow-sm"
: "text-muted hover:bg-background-alt hover:text-foreground",
]}
>
<span>{modality.label}</span>
<span class="ms-1 text-xs opacity-75">{modality.count}</span>
<span class="ms-1 text-xs">{modality.count}</span>
</button>
))}
</div>
@@ -273,7 +273,7 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
<button
id="tool-command-reset-workflow"
type="button"
class="hidden rounded-md px-2 py-1 text-xs font-semibold text-primary transition-colors hover:bg-primary-subtle"
class="hidden rounded-md px-2 py-1 text-xs font-semibold text-primary-ink transition-colors hover:bg-primary-subtle"
>
{t(locale, "home.toolGrid.reset")}
</button>
@@ -304,7 +304,7 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
</span>
<span class="min-w-0">
<span class="block text-sm font-semibold text-foreground">{workflow.label}</span>
<span class="mt-0.5 block text-xs font-medium text-primary-dark">{workflow.metric}</span>
<span class="mt-0.5 block text-xs font-medium text-primary-ink">{workflow.metric}</span>
</span>
</span>
<span class="mt-2 block text-xs leading-relaxed text-muted">{workflow.description}</span>
@@ -411,13 +411,13 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
target="_blank"
rel="noopener noreferrer"
id="tool-command-request"
class="font-semibold text-primary hover:underline"
class="font-semibold text-primary-ink hover:underline"
>
{t(locale, "home.toolGrid.requestTool")}
</a>
{t(locale, "home.toolGrid.requestSuffix")}
</div>
<a href={localizeHref(locale, "/tools")} class="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:underline">
<a href={localizeHref(locale, "/tools")} class="inline-flex items-center gap-2 text-sm font-semibold text-primary-ink hover:underline">
{t(locale, "home.toolGrid.browseCatalog")}
<svg
class="h-4 w-4"
@@ -545,7 +545,7 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
const reason = formatReason(result.reason);
const reasonHtml =
showReason && reason
? `<span class="mt-3 inline-flex w-fit rounded-md bg-primary-subtle px-2 py-1 text-[11px] font-semibold text-primary-dark">${escapeHtml(reason)}</span>`
? `<span class="mt-3 inline-flex w-fit rounded-md bg-primary-subtle px-2 py-1 text-[11px] font-semibold text-primary-ink">${escapeHtml(reason)}</span>`
: "";
return `
@@ -580,7 +580,7 @@ const safeStringsJson = JSON.stringify(toolGridStrings).replace(/</g, "\\u003c")
const isActive = button.dataset.modality === activeModality;
button.setAttribute("aria-pressed", String(isActive));
button.classList.toggle("bg-primary", isActive);
button.classList.toggle("text-white", isActive);
button.classList.toggle("text-foreground", isActive);
button.classList.toggle("shadow-sm", isActive);
button.classList.toggle("text-muted", !isActive);
button.classList.toggle("hover:bg-background-alt", !isActive);
apps/landing/src/components/TrustSignals.astro
+1 -1
View File
@@ -43,7 +43,7 @@ const stats = [
{stats.map((stat) => {
const inner = (
<div class="text-center">
<p class="font-display text-5xl font-extrabold tracking-tight text-primary md:text-6xl">
<p class="font-display text-5xl font-extrabold tracking-tight text-primary-ink md:text-6xl">
{stat.value}
</p>
<p class="mt-2 text-sm font-semibold text-foreground">{stat.label}</p>