Skip to content

Commit d2f5ddc

Browse files
khoinguyenpham04emdashbot[bot]ascorbic
authored
refactor(admin): use Kumo semantic tokens for status colors (#1866)
* refactor(admin): use Kumo semantic tokens for status colors Replace hard-coded Tailwind palette classes and dark: prefixes with Kumo semantic tokens across 17 admin components so status colors theme consistently in light and dark mode. Convert the hand-rolled RoleBadge and CommentStatusBadge spans into Kumo Badge wrappers with semantic variants. * fix(admin): use kumo-warning tokens for marketplace audit warn badge The warn branch of AuditBadge used bare warning utilities that have no token definition, so the badge rendered unstyled. Use the kumo-warning tokens like the pass and fail branches. * style: format * fix(admin): use kumo-warning tokens in capability consent dialog All six warning highlights in the dialog referenced a bare warning color token that has no definition in the admin theme, so new-capability rows, the public-routes notice, and the warn audit banner rendered unstyled. Use the kumo-warning tokens. * docs: cover warning token fixes in changeset * style: restore repo formatting on block-kit references An automated style commit on this branch collapsed formatting that the pinned oxfmt/prettier versions expect expanded, which broke the CI format check. Re-running pnpm format restores the expected output. * style: format * Update packages/admin/src/components/ContentPickerModal.tsx Co-authored-by: emdashbot[bot] <273199577+emdashbot[bot]@users.noreply.github.com> --------- Co-authored-by: emdashbot[bot] <emdashbot[bot]@users.noreply.github.com> Co-authored-by: Matt Kane <mkane@cloudflare.com> Co-authored-by: emdashbot[bot] <273199577+emdashbot[bot]@users.noreply.github.com>
1 parent e4e76f5 commit d2f5ddc

20 files changed

Lines changed: 105 additions & 112 deletions

‎.changeset/admin-kumo-semantic-tokens.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@emdash-cms/admin": patch
3+
---
4+
5+
Updates admin UI status colors to use Kumo semantic tokens instead of hard-coded palette classes, so email settings, role and comment badges, content type indicators, the dashboard, and other status displays now theme consistently in both light and dark mode. Also fixes warning highlights in the marketplace audit badge and the plugin capability consent dialog, which previously referenced a nonexistent color token and rendered unstyled.

‎packages/admin/src/components/CapabilityConsentDialog.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,28 +90,30 @@ export function CapabilityConsentDialog({
9090
key={cap}
9191
className={cn(
9292
"flex items-start gap-3 rounded-md p-2 text-sm",
93-
isNew ? "bg-warning/10 border border-warning/30" : "bg-kumo-tint/50",
93+
isNew ? "bg-kumo-warning/10 border border-kumo-warning/30" : "bg-kumo-tint/50",
9494
)}
9595
>
9696
<ShieldCheck
9797
className={cn(
9898
"mt-0.5 h-4 w-4 shrink-0",
99-
isNew ? "text-warning" : "text-kumo-subtle",
99+
isNew ? "text-kumo-warning" : "text-kumo-subtle",
100100
)}
101101
/>
102102
<div>
103103
<span className={cn(isNew && "font-medium")}>
104104
{describeCapability(cap, allowedHosts)}
105105
</span>
106-
{isNew && <span className="ms-2 text-xs text-warning font-medium">{t`NEW`}</span>}
106+
{isNew && (
107+
<span className="ms-2 text-xs text-kumo-warning font-medium">{t`NEW`}</span>
108+
)}
107109
</div>
108110
</div>
109111
);
110112
})}
111113

112114
{newlyPublicRoutes.length > 0 && (
113-
<div className="rounded-md border border-warning/30 bg-warning/10 p-3 text-sm">
114-
<div className="flex items-center gap-2 font-medium text-warning">
115+
<div className="rounded-md border border-kumo-warning/30 bg-kumo-warning/10 p-3 text-sm">
116+
<div className="flex items-center gap-2 font-medium text-kumo-warning">
115117
<Warning className="h-4 w-4 shrink-0" />
116118
{t`New public routes`}
117119
</div>
@@ -134,7 +136,7 @@ export function CapabilityConsentDialog({
134136
className={cn(
135137
"flex items-center gap-2 rounded-md p-3 text-sm mt-2",
136138
auditVerdict === "warn"
137-
? "bg-warning/10 text-warning"
139+
? "bg-kumo-warning/10 text-kumo-warning"
138140
: "bg-kumo-danger/10 text-kumo-danger",
139141
)}
140142
>

‎packages/admin/src/components/ContentPickerModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -199,10 +199,10 @@ export function ContentPickerModal({ open, onOpenChange, onSelect }: ContentPick
199199
className={cn(
200200
"inline-block h-2 w-2 rounded-full",
201201
status === "published"
202-
? "bg-green-500"
202+
? "bg-kumo-success"
203203
: status === "published_with_changes"
204-
? "bg-yellow-500"
205-
: "bg-gray-400",
204+
? "bg-kumo-warning"
205+
: "bg-kumo-fill",
206206
)}
207207
/>
208208
{status === "published"

‎packages/admin/src/components/ContentTypeEditor.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -357,18 +357,16 @@ export function ContentTypeEditor({
357357
{!isNew && (
358358
<p className="text-kumo-subtle text-sm">
359359
<code className="bg-kumo-tint px-1.5 py-0.5 rounded">{collection?.slug}</code>
360-
{isFromCode && (
361-
<span className="ms-2 text-purple-600 dark:text-purple-400">{t`Defined in code`}</span>
362-
)}
360+
{isFromCode && <span className="ms-2 text-kumo-info">{t`Defined in code`}</span>}
363361
</p>
364362
)}
365363
</EditorHeader>
366364

367365
{isFromCode && (
368-
<div className="rounded-lg border border-purple-200 dark:border-purple-800 bg-purple-50 dark:bg-purple-950 p-4">
366+
<div className="rounded-lg border border-kumo-info/50 bg-kumo-info-tint p-4">
369367
<div className="flex items-center space-x-2">
370-
<FileText className="h-5 w-5 text-purple-600 dark:text-purple-400" />
371-
<p className="text-sm text-purple-700 dark:text-purple-300">
368+
<FileText className="h-5 w-5 text-kumo-info" />
369+
<p className="text-sm text-kumo-subtle">
372370
{t`This collection is defined in code. Some settings cannot be changed here. Edit your live.config.ts file to modify the schema.`}
373371
</p>
374372
</div>

‎packages/admin/src/components/ContentTypeList.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,21 +47,21 @@ export function ContentTypeList({
4747

4848
{/* Orphaned Tables Warning */}
4949
{hasOrphans && (
50-
<div className="rounded-md border border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950 p-4">
50+
<div className="rounded-md border border-kumo-warning/50 bg-kumo-warning-tint p-4">
5151
<div className="flex items-start gap-3">
52-
<Warning className="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5" />
52+
<Warning className="h-5 w-5 text-kumo-warning mt-0.5" />
5353
<div className="flex-1">
54-
<h3 className="font-medium text-amber-800 dark:text-amber-200">
54+
<h3 className="font-medium text-kumo-warning">
5555
{t`Unregistered Content Tables Found`}
5656
</h3>
57-
<p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
57+
<p className="text-sm text-kumo-subtle mt-1">
5858
{t`The following tables contain content but aren't registered as collections. Register them to manage this content in the admin.`}
5959
</p>
6060
<div className="mt-3 space-y-2">
6161
{orphanedTables.map((orphan) => (
6262
<div
6363
key={orphan.slug}
64-
className="flex items-center justify-between bg-white dark:bg-amber-900/50 rounded-md px-3 py-2"
64+
className="flex items-center justify-between bg-kumo-base rounded-md px-3 py-2"
6565
>
6666
<div>
6767
<code className="text-sm font-medium">{orphan.slug}</code>
@@ -176,9 +176,7 @@ function ContentTypeRow({ collection, onRequestDelete }: ContentTypeRowProps) {
176176
<div
177177
className={cn(
178178
"flex h-8 w-8 items-center justify-center rounded-lg",
179-
isFromCode
180-
? "bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-300"
181-
: "bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300",
179+
isFromCode ? "bg-kumo-badge-purple text-white" : "bg-kumo-badge-blue text-white",
182180
)}
183181
>
184182
{isFromCode ? <FileText className="h-4 w-4" /> : <Database className="h-4 w-4" />}

‎packages/admin/src/components/DeviceAuthorizePage.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -179,12 +179,12 @@ export function DeviceAuthorizePage() {
179179

180180
{/* Success state */}
181181
{pageState === "success" && (
182-
<div className="rounded-lg border border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/50 p-6 text-center">
183-
<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/50 mb-3">
184-
<CheckIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
182+
<div className="rounded-lg border border-kumo-success/50 bg-kumo-success-tint p-6 text-center">
183+
<div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-kumo-success/15 mb-3">
184+
<CheckIcon className="w-5 h-5 text-kumo-success" />
185185
</div>
186-
<h2 className="font-medium text-green-900 dark:text-green-100">{t`Device authorized`}</h2>
187-
<p className="text-sm text-green-700 dark:text-green-300 mt-1">
186+
<h2 className="font-medium text-kumo-success">{t`Device authorized`}</h2>
187+
<p className="text-sm text-kumo-subtle mt-1">
188188
{t`You can close this page and return to your terminal.`}
189189
</p>
190190
<p className="text-xs text-kumo-subtle mt-3">{t`Signed in as ${user.email}`}</p>

‎packages/admin/src/components/MarketplaceBrowse.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,7 @@ export function AuditBadge({ verdict }: { verdict: "pass" | "warn" | "fail" }) {
315315
if (verdict === "pass") {
316316
return (
317317
<span
318-
className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs bg-green-500/10 text-green-600"
318+
className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs bg-kumo-success/10 text-kumo-success"
319319
title={t`Security audit passed`}
320320
>
321321
<ShieldCheck className="h-3 w-3" />
@@ -326,7 +326,7 @@ export function AuditBadge({ verdict }: { verdict: "pass" | "warn" | "fail" }) {
326326
if (verdict === "warn") {
327327
return (
328328
<span
329-
className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs bg-warning/10 text-warning"
329+
className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs bg-kumo-warning/10 text-kumo-warning"
330330
title={t`Security audit flagged concerns`}
331331
>
332332
<Warning className="h-3 w-3" />

‎packages/admin/src/components/SandboxedPluginPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,10 +101,10 @@ export function SandboxedPluginPage({ pluginId, page }: SandboxedPluginPageProps
101101
<div
102102
className={`fixed end-4 top-4 z-50 rounded-lg border px-4 py-3 text-sm shadow-lg ${
103103
toast.type === "success"
104-
? "border-green-200 bg-green-50 text-green-800"
104+
? "border-kumo-success/50 bg-kumo-success-tint text-kumo-success"
105105
: toast.type === "error"
106-
? "border-red-200 bg-red-50 text-red-800"
107-
: "border-blue-200 bg-blue-50 text-blue-800"
106+
? "border-kumo-danger/50 bg-kumo-danger/10 text-kumo-danger"
107+
: "border-kumo-info/50 bg-kumo-info-tint text-kumo-info"
108108
}`}
109109
>
110110
{toast.message}

‎packages/admin/src/components/SignupPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,9 +176,9 @@ function VerifyStep({ verifyResult, token, onBack: _onBack }: VerifyStepProps) {
176176
return (
177177
<div className="space-y-6">
178178
<div className="text-center">
179-
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/10 mx-auto mb-4">
179+
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-kumo-success/10 mx-auto mb-4">
180180
<svg
181-
className="w-8 h-8 text-green-600"
181+
className="w-8 h-8 text-kumo-success"
182182
fill="none"
183183
stroke="currentColor"
184184
viewBox="0 0 24 24"

‎packages/admin/src/components/WordPressImport.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1257,9 +1257,9 @@ function ProbeResultStep({
12571257
if (!result.isWordPress) {
12581258
return (
12591259
<div className="space-y-6">
1260-
<div className="rounded-lg border-s-4 border-s-orange-500 border border-kumo-line bg-kumo-base p-6">
1260+
<div className="rounded-lg border-s-4 border-s-kumo-warning border border-kumo-line bg-kumo-base p-6">
12611261
<div className="flex items-start gap-4">
1262-
<Warning className="h-6 w-6 text-orange-500 flex-shrink-0" />
1262+
<Warning className="h-6 w-6 text-kumo-warning flex-shrink-0" />
12631263
<div>
12641264
<h3 className="font-medium">{t`Couldn't detect WordPress`}</h3>
12651265
<p className="mt-1 text-sm text-kumo-subtle">

0 commit comments

Comments
 (0)