Skip to content

chore(local-explorer-ui): Switch to Kumo color palette #13161

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
NuroDev merged 6 commits into from
Apr 2, 2026
Merged

chore(local-explorer-ui): Switch to Kumo color palette #13161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
44bd06c
Replaced custom theme styles with Kumo styles
NuroDev Apr 1, 2026
84528e4
Fixed sidebar active item hover background color
NuroDev Apr 1, 2026
bf8babe
Added changeset
NuroDev Apr 1, 2026
5cc73ea
Code formatting
NuroDev Apr 1, 2026
b2c6e0a
Restored original data studio syntax highlighting colors
NuroDev Apr 1, 2026
86efd9a
fix
edmundhung Apr 2, 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
9 changes: 9 additions & 0 deletions .changeset/good-falcons-remain.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@cloudflare/local-explorer-ui": minor
---

Overhaul local explorer UI color palette.

The core styles of the local explorer has been overhauled to remove all custom styles in favour of using Kumo styles / colors when possible.

This is the first part of improving the local explorer UI to kumo-ify it all.
9 changes: 5 additions & 4 deletions packages/local-explorer-ui/src/components/AddKVForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,10 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
<input
id="add-key"
className={cn(
"h-9 w-full rounded-md border border-border bg-bg px-3 font-mono text-sm text-text placeholder:text-text! focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary",
"h-9 w-full rounded-md border border-kumo-fill bg-kumo-base px-3 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle",
{
"border-danger focus:shadow-focus-danger": keyError,
"border-kumo-danger focus-visible:ring-2 focus-visible:ring-kumo-danger":
keyError,
}
)}
placeholder="Key"
Expand All @@ -74,7 +75,7 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
disabled={saving}
/>
{keyError && (
<span className="mt-1 text-xs text-danger">{keyError}</span>
<span className="mt-1 text-xs text-kumo-danger">{keyError}</span>
)}
</div>
<div className="flex w-full flex-1 flex-col lg:min-w-2xs">
Expand All @@ -83,7 +84,7 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
</label>
<textarea
id="add-value"
className="max-h-32 min-h-9 w-full resize-none overflow-y-auto rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder:text-text! focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary lg:field-sizing-content"
className="max-h-32 min-h-9 w-full resize-none overflow-y-auto rounded-md border border-kumo-fill bg-kumo-base px-3 py-2 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle lg:field-sizing-content"
placeholder="Value"
value={value}
onChange={(e) => setValue(e.target.value)}
Expand Down
2 changes: 1 addition & 1 deletion packages/local-explorer-ui/src/components/Breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function Breadcrumbs({
title,
}: BreadcrumbsProps): JSX.Element {
return (
<div className="box-border flex min-h-16.75 shrink-0 items-center gap-2 border-b border-border bg-bg-secondary px-6 py-4 text-sm">
<div className="box-border flex min-h-16.75 shrink-0 items-center gap-2 border-b border-kumo-fill bg-kumo-elevated px-6 py-4 text-sm">
<KumoBreadcrumbs>
<KumoBreadcrumbs.Current icon={<Icon className="h-4 w-4" />}>
{title}
Expand Down
2 changes: 1 addition & 1 deletion packages/local-explorer-ui/src/components/CopyButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function CopyButton({ text }: CopyButtonProps) {
className={cn(
"h-6 w-6 p-0 opacity-0 transition-[opacity,background-color,color] group-hover/cell:opacity-100",
{
"text-success opacity-100": copied,
"text-kumo-success opacity-100": copied,
}
)}
onClick={handleCopy}
Expand Down
20 changes: 10 additions & 10 deletions packages/local-explorer-ui/src/components/KVTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function ActionMenu({ onEdit, onDelete }: ActionMenuProps) {
<Button
variant="ghost"
shape="square"
className="!h-7 !w-7"
className="h-7! w-7!"
aria-label="Actions"
>
<DotsThreeIcon size={16} weight="bold" />
Expand All @@ -55,7 +55,7 @@ function ActionMenu({ onEdit, onDelete }: ActionMenuProps) {
</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item
className="flex items-center gap-2 text-danger"
className="flex items-center gap-2 text-kumo-danger"
onClick={onDelete}
>
<TrashIcon />
Expand Down Expand Up @@ -139,7 +139,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
const isKeyInvalid = editData ? !!validateKey(editData.key) : false;

return (
<div className="overflow-hidden rounded-lg border border-border">
<div className="overflow-hidden rounded-lg border border-kumo-fill">
<Table>
<Table.Header>
<Table.Row>
Expand All @@ -165,9 +165,9 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
<input
id={`edit-key-${entry.key.name}`}
className={cn(
"min-h-8 w-full rounded border border-primary bg-bg px-2 py-1.5 font-mono text-[13px] text-text focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary",
"min-h-8 w-full rounded border border-kumo-brand bg-kumo-base px-2 py-1.5 font-mono text-[13px] text-kumo-default focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle",
{
"border-danger focus:shadow-focus-danger":
"border-kumo-danger focus-visible:ring-2 focus-visible:ring-kumo-danger":
editData.keyError,
}
)}
Expand All @@ -178,21 +178,21 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
autoFocus
/>
{editData.keyError && (
<span className="mt-1 text-xs text-danger">
<span className="mt-1 text-xs text-kumo-danger">
{editData.keyError}
</span>
)}
</div>
) : (
<div className="group/cell flex items-center gap-1.5">
<code className="font-medium text-primary">
<code className="font-medium text-kumo-link">
{entry.key.name}
</code>
<CopyButton text={entry.key.name} />
</div>
)}
</Table.Cell>
<Table.Cell className="group/cell max-w-[400px] font-mono text-[13px]">
<Table.Cell className="group/cell max-w-100 font-mono text-[13px]">
{isEditing && editData ? (
<div className="flex flex-col gap-2">
<label
Expand All @@ -203,7 +203,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
</label>
<textarea
id={`edit-value-${entry.key.name}`}
className="[field-sizing:content] max-h-[200px] min-h-8 w-full resize-none overflow-y-auto rounded border border-primary bg-bg px-2 py-1.5 font-mono text-[13px] text-text focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary"
className="field-sizing-content max-h-50 min-h-8 w-full resize-none overflow-y-auto rounded border border-kumo-brand bg-kumo-base px-2 py-1.5 font-mono text-[13px] text-kumo-default focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle"
value={editData.value}
onChange={(e) =>
setEditData({ ...editData, value: e.target.value })
Expand Down Expand Up @@ -235,7 +235,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
<div className="flex min-w-0 items-center gap-1.5">
<span
className={cn("min-w-0 truncate", {
"text-text-secondary": !entry.value,
"text-kumo-subtle": !entry.value,
})}
>
{formatValue(entry.value)}
Expand Down
31 changes: 14 additions & 17 deletions packages/local-explorer-ui/src/components/R2ObjectTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function ActionMenu({
)}

<DropdownMenu.Item
className="flex items-center gap-2 text-danger"
className="flex items-center gap-2 text-kumo-danger"
onClick={onDelete}
>
<TrashIcon />
Expand Down Expand Up @@ -134,7 +134,7 @@ function BulkActionMenu({
</>
)}
<DropdownMenu.Item
className="flex items-center gap-2 text-danger"
className="flex items-center gap-2 text-kumo-danger"
onClick={onDelete}
>
<TrashIcon />
Expand Down Expand Up @@ -230,7 +230,7 @@ export function R2ObjectTable({

if (items.length === 0) {
return (
<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-text-secondary">
<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-kumo-subtle">
<h2 className="text-2xl font-medium">
{currentPrefix
? "No objects in this directory"
Expand All @@ -244,7 +244,7 @@ export function R2ObjectTable({
}

return (
<div className="overflow-hidden rounded-lg border border-border">
<div className="overflow-hidden rounded-lg border border-kumo-fill">
<Table>
<Table.Header>
<Table.Row>
Expand Down Expand Up @@ -290,21 +290,18 @@ export function R2ObjectTable({
</Table.Cell>
<Table.Cell>
<button
className="flex cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left text-text hover:text-primary"
className="flex cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left text-kumo-default hover:text-kumo-link"
onClick={() => onNavigateToPrefix(item.prefix)}
>
<FolderIcon
size={16}
className="text-orange-600 dark:text-orange-400"
/>
<FolderIcon size={16} className="text-kumo-brand-hover" />
<span className="font-medium">{displayName}</span>
</button>
</Table.Cell>
<Table.Cell className="text-text-secondary">
<Table.Cell className="text-kumo-subtle">
Directory
</Table.Cell>
<Table.Cell className="text-text-secondary">-</Table.Cell>
<Table.Cell className="text-text-secondary">-</Table.Cell>
<Table.Cell className="text-kumo-subtle">-</Table.Cell>
<Table.Cell className="text-kumo-subtle">-</Table.Cell>
<Table.Cell className="text-right whitespace-nowrap">
<ActionMenu
isDirectory
Expand Down Expand Up @@ -334,19 +331,19 @@ export function R2ObjectTable({
<Link
to="/r2/$bucketName/object/$"
params={{ bucketName, _splat: key }}
className="flex items-center gap-2 text-text no-underline hover:text-primary"
className="flex items-center gap-2 text-kumo-default no-underline hover:text-kumo-link"
>
<FileIcon size={16} className="text-muted" />
<FileIcon size={16} className="text-kumo-subtle" />
<span className="font-medium">{displayName}</span>
</Link>
</Table.Cell>
<Table.Cell className="font-mono text-xs text-text-secondary">
<Table.Cell className="font-mono text-xs text-kumo-subtle">
{contentType}
</Table.Cell>
<Table.Cell className="text-text-secondary">
<Table.Cell className="text-kumo-subtle">
{formatSize(obj.size)}
</Table.Cell>
<Table.Cell className="text-text-secondary">
<Table.Cell className="text-kumo-subtle">
{formatDate(obj.last_modified)}
</Table.Cell>
<Table.Cell className="text-right whitespace-nowrap">
Expand Down
36 changes: 19 additions & 17 deletions packages/local-explorer-ui/src/components/R2UploadDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export function R2UploadDialog({
</Dialog.Title>

{error && (
<div className="mb-4 rounded-md border border-danger/20 bg-danger/8 p-3 text-sm text-danger">
<div className="mb-4 rounded-md border border-kumo-danger/20 bg-kumo-danger/8 p-3 text-sm text-kumo-danger">
{error}
</div>
)}
Expand All @@ -199,8 +199,8 @@ export function R2UploadDialog({
<div
className={`mb-4 flex min-h-32 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors duration-200 ${
dragOver
? "border-primary bg-primary/5"
: "border-border hover:border-primary/50"
? "border-kumo-brand bg-kumo-brand/5"
: "border-kumo-fill hover:border-kumo-brand/50"
}`}
onClick={() => document.getElementById("file-input")?.click()}
onDragLeave={handleDragLeave}
Expand All @@ -214,21 +214,23 @@ export function R2UploadDialog({
type="file"
/>

<UploadIcon size={32} className="mb-2 text-text-secondary" />
<UploadIcon size={32} className="mb-2 text-kumo-subtle" />

{file ? (
<>
<p className="text-sm font-medium text-text">{file.name}</p>
<p className="text-xs text-text-secondary">
<p className="text-sm font-medium text-kumo-default">
{file.name}
</p>
<p className="text-xs text-kumo-subtle">
{(file.size / 1024).toFixed(1)} KB
</p>
</>
) : (
<>
<p className="text-sm text-text">
<p className="text-sm text-kumo-default">
Drop a file here or click to browse
</p>
<p className="text-xs text-text-secondary">
<p className="text-xs text-kumo-subtle">
Any file type supported
</p>
</>
Expand All @@ -237,28 +239,28 @@ export function R2UploadDialog({

{/* Object Key */}
<div className="mb-4">
<label className="mb-2 block text-sm font-medium text-text">
<label className="mb-2 block text-sm font-medium text-kumo-default">
Object key
</label>
<input
className="w-full rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder-text-secondary! focus:border-primary focus:shadow-focus-primary focus:outline-none"
className="w-full rounded-md border border-kumo-fill bg-kumo-base px-3 py-2 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
onChange={(e) => setObjectKey(e.target.value)}
placeholder={currentPrefix + "file.png"}
type="text"
value={objectKey}
/>
<p className="mt-1 text-xs text-text-secondary">
<p className="mt-1 text-xs text-kumo-subtle">
The full path where the object will be stored
</p>
</div>

{/* Content Type */}
<div className="mb-4">
<label className="mb-2 block text-sm font-medium text-text">
<label className="mb-2 block text-sm font-medium text-kumo-default">
Content-Type
</label>
<input
className="w-full rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder-text-secondary! focus:border-primary focus:shadow-focus-primary focus:outline-none"
className="w-full rounded-md border border-kumo-fill bg-kumo-base px-3 py-2 font-mono text-sm text-kumo-default placeholder:text-kumo-subtle focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
onChange={(e) => setContentType(e.target.value)}
placeholder="image/png"
type="text"
Expand All @@ -269,7 +271,7 @@ export function R2UploadDialog({
{/* Custom Metadata */}
<div className="mb-4">
<div className="mb-2 flex items-center justify-between">
<label className="text-sm font-medium text-text">
<label className="text-sm font-medium text-kumo-default">
Custom metadata
</label>
<Button variant="ghost" onClick={handleAddMetadata}>
Expand All @@ -279,15 +281,15 @@ export function R2UploadDialog({
</div>

{customMetadata.length === 0 ? (
<p className="text-sm text-text-secondary italic">
<p className="text-sm text-kumo-subtle italic">
No custom metadata
</p>
) : (
<div className="space-y-2">
{customMetadata.map((entry, index) => (
<div key={index} className="flex items-center gap-2">
<input
className="flex-1 rounded-md border border-border bg-bg px-2 py-1.5 font-mono text-sm text-text focus:border-primary focus:shadow-focus-primary focus:outline-none"
className="flex-1 rounded-md border border-kumo-fill bg-kumo-base px-2 py-1.5 font-mono text-sm text-kumo-default focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
onChange={(e) =>
handleMetadataChange(index, "key", e.target.value)
}
Expand All @@ -296,7 +298,7 @@ export function R2UploadDialog({
value={entry.key}
/>
<input
className="flex-1 rounded-md border border-border bg-bg px-2 py-1.5 font-mono text-sm text-text focus:border-primary focus:shadow-focus-primary focus:outline-none"
className="flex-1 rounded-md border border-kumo-fill bg-kumo-base px-2 py-1.5 font-mono text-sm text-kumo-default focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring"
onChange={(e) =>
handleMetadataChange(index, "value", e.target.value)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/local-explorer-ui/src/components/SearchForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function SearchForm({ onSearch, disabled = false }: SearchFormProps) {
</label>
<input
id="search-prefix"
className="h-9 max-w-100 flex-1 rounded-md border border-border bg-bg px-3 font-mono text-sm text-text focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary"
className="h-9 max-w-100 flex-1 rounded-md border border-kumo-fill bg-kumo-base px-3 font-mono text-sm text-kumo-default focus:border-kumo-brand focus:outline-none focus-visible:ring-2 focus-visible:ring-kumo-ring disabled:bg-kumo-elevated disabled:text-kumo-subtle"
placeholder="Search keys by prefix..."
value={prefix}
onChange={(e) => setPrefix(e.target.value)}
Expand Down
Loading
Loading