fix(admin): adopt Kumo's brand colours (#2262)

* fix(admin): adopt Kumo's brand blue

The classic theme pinned --color-kumo-brand to the WordPress admin blue
(#2271b1), roughly half the chroma of Kumo's own brand, so primary
buttons rendered muted.

Drop the brand, brand-hover and link overrides so they inherit Kumo and
track future updates. --color-kumo-ring goes too: nothing in the admin or
Kumo ever read it.

Brand text keeps an override. Kumo maps --text-color-kumo-brand to the
Cloudflare orange wordmark (#f6821f), which would have recoloured 62
text-kumo-brand sites -- sign-in links, verified badges, and links inside
user content -- to orange at roughly 2.6:1 on white. Pointing it at the
link colour keeps those blue at 8.5:1 light and 7.7:1 dark, up from 5.2:1.

* fix(admin): drop the brand text override

Brand text resolves to Kumo's value alongside the fill, so no brand token
stays overridden in the classic theme. Accents using text-kumo-brand now
render Kumo's orange rather than a blue.

* fix(admin): colour links with Kumo's link token

Kumo maps --text-color-kumo-brand to the Cloudflare orange wordmark. The
admin used text-kumo-brand for links and accent icons, so inheriting
Kumo's value rendered them orange at 2.5:1 against the light surface,
under the 4.5:1 needed for text and the 3:1 needed for meaningful icons.

Point all 62 call sites at text-kumo-link, the token that already means
interactive text. Measures 8.8:1, and no theme token stays overridden.

Border and background brand utilities are untouched; they read
--color-kumo-brand, which is blue in both themes.

* test(e2e): follow the renamed locale marker class

The current-locale marker moved from text-kumo-brand to text-kumo-link,
so the selector no longer matched.

Author: khoinguyenpham04

.changeset/admin-kumo-brand-colour.md

@@ -0,0 +1,5 @@
+---
+"@emdash-cms/admin": patch
+---
+
+Updates the admin to Kumo's brand colours: primary buttons and fills become a brighter blue, and links and accent icons pick up Kumo's link colour.

e2e/tests/i18n.spec.ts

@@ -108,7 +108,7 @@ test.describe("i18n", () => {
 			await admin.waitForLoading();
 
 			// The "current" marker should appear next to EN
-			const currentMarker = admin.page.locator("span.text-kumo-brand", {
+			const currentMarker = admin.page.locator("span.text-kumo-link", {
 				hasText: "current",
 			});
 			await expect(currentMarker).toBeVisible();

packages/admin/src/components/ContentList.tsx

@@ -551,7 +551,7 @@ export function ContentList({
 														to="/content/$collection/new"
 														params={{ collection }}
 														search={{ locale: activeLocale }}
-														className="text-kumo-brand underline"
+														className="text-kumo-link underline"
 													>
 														{t`Create your first one`}
 													</Link>
@@ -883,7 +883,7 @@ function SortableTh({ field, sort, onSortChange, label }: SortableThProps) {
 				type="button"
 				onClick={handleClick}
 				className={cn(
-					"inline-flex items-center gap-1 rounded text-kumo-default hover:text-kumo-brand",
+					"inline-flex items-center gap-1 rounded text-kumo-default hover:text-kumo-link",
 					"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-kumo-brand",
 				)}
 			>
@@ -979,7 +979,7 @@ function ContentListItem({
 					to="/content/$collection/$id"
 					params={{ collection, id: item.id }}
 					search={{ locale: item.locale }}
-					className="font-medium hover:text-kumo-brand"
+					className="font-medium hover:text-kumo-link"
 				>
 					{title}
 				</Link>
@@ -1096,7 +1096,7 @@ function TrashedListItem({ item, onRestore, onPermanentDelete }: TrashedListItem
 						aria-label={t`Restore ${title}`}
 						onClick={() => onRestore?.(item.id)}
 					>
-						<ArrowCounterClockwise className="h-4 w-4 text-kumo-brand" aria-hidden="true" />
+						<ArrowCounterClockwise className="h-4 w-4 text-kumo-link" aria-hidden="true" />
 					</Button>
 					<Dialog.Root disablePointerDismissal>
 						<Dialog.Trigger

packages/admin/src/components/ContentTypeList.tsx

@@ -120,7 +120,7 @@ export function ContentTypeList({
 							<tr>
 								<td colSpan={5} className="px-4 py-8 text-center text-kumo-subtle">
 									{t`No content types yet.`}{" "}
-									<Link to="/content-types/new" className="text-kumo-brand underline">
+									<Link to="/content-types/new" className="text-kumo-link underline">
 										{t`Create your first one`}
 									</Link>
 								</td>
@@ -187,7 +187,7 @@ function ContentTypeRow({ collection, onRequestDelete }: ContentTypeRowProps) {
 						<Link
 							to="/content-types/$slug"
 							params={{ slug: collection.slug }}
-							className="font-medium hover:text-kumo-brand"
+							className="font-medium hover:text-kumo-link"
 						>
 							{collection.label}
 						</Link>

packages/admin/src/components/DeviceAuthorizePage.tsx

@@ -171,7 +171,7 @@ export function DeviceAuthorizePage() {
 				{/* Header */}
 				<div className="text-center mb-8">
 					<div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-kumo-brand/10 mb-4">
-						<TerminalIcon className="w-6 h-6 text-kumo-brand" />
+						<TerminalIcon className="w-6 h-6 text-kumo-link" />
 					</div>
 					<h1 className="text-xl font-semibold tracking-tight">{t`Authorize Device`}</h1>
 					<p className="text-kumo-subtle text-sm mt-1.5">{t`Enter the code from your terminal`}</p>

packages/admin/src/components/InviteAcceptPage.tsx

@@ -37,7 +37,7 @@ function RegisterStep({ inviteData, token }: RegisterStepProps) {
 			<div className="text-center">
 				<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-kumo-brand/10 mx-auto mb-4">
 					<svg
-						className="w-8 h-8 text-kumo-brand"
+						className="w-8 h-8 text-kumo-link"
 						fill="none"
 						stroke="currentColor"
 						viewBox="0 0 24 24"

packages/admin/src/components/LocaleSwitcher.tsx

@@ -108,7 +108,7 @@ export function LocaleBadges({
 						className={cn(
 							"rounded px-1 py-0.5 text-[10px] font-semibold uppercase leading-none transition-colors",
 							exists
-								? "bg-kumo-brand/10 text-kumo-brand hover:bg-kumo-brand/20"
+								? "bg-kumo-brand/10 text-kumo-link hover:bg-kumo-brand/20"
 								: "bg-kumo-tint text-kumo-subtle/50",
 							onLocaleClick && exists && "cursor-pointer",
 							(!onLocaleClick || !exists) && "cursor-default",

packages/admin/src/components/LoginPage.tsx

@@ -84,7 +84,7 @@ function MagicLinkForm({ onBack }: MagicLinkFormProps) {
 			<div className="space-y-6 text-center">
 				<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-kumo-brand/10 mx-auto">
 					<svg
-						className="w-8 h-8 text-kumo-brand"
+						className="w-8 h-8 text-kumo-link"
 						fill="none"
 						stroke="currentColor"
 						viewBox="0 0 24 24"
@@ -333,7 +333,7 @@ export function LoginPage({ redirectUrl = "/_emdash/admin" }: LoginPageProps) {
 					<p className="text-center mt-4 text-sm text-kumo-subtle">
 						<Trans>
 							Don't have an account?{" "}
-							<Link to="/signup" className="text-kumo-brand hover:underline font-medium">
+							<Link to="/signup" className="text-kumo-link hover:underline font-medium">
 								Sign up
 							</Link>
 						</Trans>

packages/admin/src/components/MarketplaceBrowse.tsx

@@ -249,7 +249,7 @@ function PluginCard({ plugin, isInstalled }: PluginCardProps) {
 				{/* Name + meta */}
 				<div className="min-w-0 flex-1">
 					<div className="flex items-center gap-2">
-						<h3 className="truncate font-semibold group-hover:text-kumo-brand">{plugin.name}</h3>
+						<h3 className="truncate font-semibold group-hover:text-kumo-link">{plugin.name}</h3>
 						{isInstalled && (
 							<span
 								role="link"
@@ -266,7 +266,7 @@ function PluginCard({ plugin, isInstalled }: PluginCardProps) {
 					</div>
 					<div className="flex items-center gap-2 text-xs text-kumo-subtle">
 						<span>{plugin.author.name}</span>
-						{plugin.author.verified && <ShieldCheck className="h-3 w-3 text-kumo-brand" />}
+						{plugin.author.verified && <ShieldCheck className="h-3 w-3 text-kumo-link" />}
 						{plugin.latestVersion?.version && <span>v{plugin.latestVersion.version}</span>}
 					</div>
 				</div>
@@ -306,7 +306,7 @@ function PluginCard({ plugin, isInstalled }: PluginCardProps) {
 function PluginAvatar({ name }: { name: string }) {
 	const initial = name.charAt(0).toUpperCase();
 	return (
-		<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-kumo-brand/10 text-kumo-brand font-bold text-lg">
+		<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-kumo-brand/10 text-kumo-link font-bold text-lg">
 			{initial}
 		</div>
 	);

packages/admin/src/components/MarketplacePluginDetail.tsx

@@ -122,7 +122,7 @@ export function MarketplacePluginDetail({
 					<p className="mt-1 text-sm text-kumo-subtle">
 						{error instanceof Error ? error.message : t`Plugin not found`}
 					</p>
-					<Link to="/plugins/marketplace" className="mt-4 inline-block text-kumo-brand text-sm">
+					<Link to="/plugins/marketplace" className="mt-4 inline-block text-kumo-link text-sm">
 						{t`Back to marketplace`}
 					</Link>
 				</div>
@@ -153,7 +153,7 @@ export function MarketplacePluginDetail({
 							aria-label={isImageFlagged ? t`Icon blurred due to image audit` : undefined}
 						/>
 					) : (
-						<div className="flex h-16 w-16 items-center justify-center rounded-xl bg-kumo-brand/10 text-kumo-brand text-2xl font-bold">
+						<div className="flex h-16 w-16 items-center justify-center rounded-xl bg-kumo-brand/10 text-kumo-link text-2xl font-bold">
 							{plugin.name.charAt(0).toUpperCase()}
 						</div>
 					)}
@@ -162,7 +162,7 @@ export function MarketplacePluginDetail({
 						<h1 className="text-2xl font-semibold leading-tight">{plugin.name}</h1>
 						<div className="mt-1 flex items-center gap-2 text-sm text-kumo-subtle">
 							<span>{plugin.author.name}</span>
-							{plugin.author.verified && <ShieldCheck className="h-4 w-4 text-kumo-brand" />}
+							{plugin.author.verified && <ShieldCheck className="h-4 w-4 text-kumo-link" />}
 							{latest && (
 								<>
 									<span aria-hidden="true">&middot;</span>
@@ -219,7 +219,7 @@ export function MarketplacePluginDetail({
 						href={plugin.repositoryUrl}
 						target="_blank"
 						rel="noopener noreferrer"
-						className="flex items-center gap-1 text-kumo-brand hover:underline"
+						className="flex items-center gap-1 text-kumo-link hover:underline"
 					>
 						<GithubLogo className="h-4 w-4" />
 						{t`Source`}
@@ -230,7 +230,7 @@ export function MarketplacePluginDetail({
 						href={plugin.homepageUrl}
 						target="_blank"
 						rel="noopener noreferrer"
-						className="flex items-center gap-1 text-kumo-brand hover:underline"
+						className="flex items-center gap-1 text-kumo-link hover:underline"
 					>
 						<Globe className="h-4 w-4" />
 						{t`Website`}
@@ -290,7 +290,7 @@ export function MarketplacePluginDetail({
 							<ul className="space-y-1.5">
 								{plugin.capabilities.map((cap) => (
 									<li key={cap} className="flex items-start gap-2 text-xs text-kumo-subtle">
-										<ShieldCheck className="mt-0.5 h-3 w-3 shrink-0 text-kumo-brand" />
+										<ShieldCheck className="mt-0.5 h-3 w-3 shrink-0 text-kumo-link" />
 										<span>{describeCapability(cap)}</span>
 									</li>
 								))}