Skip to content

Commit 547c7fa

Browse files
najlaskrgeoquant
najlaskr
and
geoquant
authored
fix(tokens): kumo-hairline dark mode (#394)
Co-authored-by: geoquant <1237781+geoquant@users.noreply.github.com>
1 parent 5515714 commit 547c7fa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+289
-278
lines changed

‎.changeset/hairline-token-update.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@cloudflare/kumo": patch
3+
"@cloudflare/kumo-docs-astro": patch
4+
---
5+
6+
Updated the token value for `kumo-line` and `kumo-hairline` in dark mode so they are more visible.
7+
8+
- replace `kumo-line` usages with `kumo-hairline` across Kumo components and docs UI/content styles
9+
- use `ring-kumo-line` for shadowed surfaces (for example combobox, dialog, select, dropdown, toast, and related surface wrappers)
10+
- adjust theme token configuration and generated styles to support updated neutral/hairline appearance

‎packages/kumo-docs-astro/src/components/Header.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ const kumoVersion =
88
---
99

1010
<header
11-
class="sticky top-0 z-10 h-12 border-b border-kumo-line bg-kumo-canvas hidden md:flex"
11+
class="sticky top-0 z-10 h-12 border-b border-kumo-hairline bg-kumo-canvas hidden md:flex"
1212
>
1313
<div
14-
class="flex min-w-0 flex-1 items-center justify-end border-r border-kumo-line px-4"
14+
class="flex min-w-0 flex-1 items-center justify-end border-r border-kumo-hairline px-4"
1515
>
1616
<a
1717
href="https://github.com/cloudflare/kumo"

‎packages/kumo-docs-astro/src/components/SearchDialog.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -514,28 +514,28 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
514514
</span>
515515
<div className="flex items-center gap-4">
516516
<span className="flex items-center gap-1">
517-
<kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
517+
<kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
518518
↑
519519
</kbd>
520-
<kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
520+
<kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
521521
↓
522522
</kbd>
523523
<span>navigate</span>
524524
</span>
525525
<span className="flex items-center gap-1">
526-
<kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
526+
<kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
527527
↵
528528
</kbd>
529529
<span>open</span>
530530
</span>
531531
<span className="flex items-center gap-1">
532-
<kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
532+
<kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
533533
⌘↵
534534
</kbd>
535535
<span>new tab</span>
536536
</span>
537537
<span className="flex items-center gap-1">
538-
<kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
538+
<kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
539539
esc
540540
</kbd>
541541
<span>close</span>

‎packages/kumo-docs-astro/src/components/SidebarNav.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
192192
<>
193193
<button
194194
onClick={() => setSearchOpen(true)}
195-
className="mb-3 flex w-full items-center gap-2 rounded-lg bg-kumo-control px-3 py-2 text-sm text-kumo-subtle ring-1 ring-kumo-line transition-all hover:ring-kumo-hairline"
195+
className="mb-3 flex w-full items-center gap-2 rounded-lg bg-kumo-control px-3 py-2 text-sm text-kumo-subtle ring-1 ring-kumo-hairline transition-all hover:ring-kumo-hairline"
196196
>
197197
<MagnifyingGlassIcon size={16} className="shrink-0" />
198198
<span>Search...</span>
@@ -214,7 +214,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
214214
))}
215215
</ul>
216216

217-
<div className="my-4 border-b border-kumo-line" />
217+
<div className="my-4 border-b border-kumo-hairline" />
218218

219219
<div className="mb-4">
220220
{/* Components Section */}
@@ -341,7 +341,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
341341
{/* Mobile header bar with hamburger */}
342342
<div
343343
className={cn(
344-
"fixed inset-x-0 top-0 z-50 flex h-12 items-center justify-between border-b border-kumo-line bg-kumo-canvas px-3 md:hidden",
344+
"fixed inset-x-0 top-0 z-50 flex h-12 items-center justify-between border-b border-kumo-hairline bg-kumo-canvas px-3 md:hidden",
345345
)}
346346
>
347347
<Button
@@ -359,12 +359,12 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
359359
{/* Mobile slide-out drawer */}
360360
<aside
361361
className={cn(
362-
"fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-kumo-line bg-kumo-canvas md:hidden",
362+
"fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-kumo-hairline bg-kumo-canvas md:hidden",
363363
"transition-transform duration-300 will-change-transform",
364364
mobileMenuOpen ? "translate-x-0" : "-translate-x-full",
365365
)}
366366
>
367-
<div className="flex h-12 flex-none items-center justify-between border-b border-kumo-line px-3">
367+
<div className="flex h-12 flex-none items-center justify-between border-b border-kumo-hairline px-3">
368368
<h1 className="text-base font-medium">Kumo</h1>
369369
<Button
370370
variant="ghost"
@@ -389,10 +389,10 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
389389
<div
390390
className={cn(
391391
"fixed inset-y-0 left-0 z-50 hidden w-12 bg-kumo-canvas ated md:block",
392-
"border-r border-kumo-line",
392+
"border-r border-kumo-hairline",
393393
)}
394394
>
395-
<div className="relative h-12 border-b border-kumo-line">
395+
<div className="relative h-12 border-b border-kumo-hairline">
396396
<div className="absolute inset-0 grid place-items-center">
397397
<Button
398398
variant="ghost"
@@ -419,11 +419,11 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
419419
"fixed inset-y-0 left-12 z-40 hidden w-64 flex-col bg-kumo-canvas md:flex",
420420
"transition-transform duration-300 ease-out will-change-transform",
421421
sidebarOpen
422-
? "translate-x-0 border-r border-kumo-line"
422+
? "translate-x-0 border-r border-kumo-hairline"
423423
: "-translate-x-full",
424424
)}
425425
>
426-
<div className="h-12 flex-none border-b border-kumo-line" />
426+
<div className="h-12 flex-none border-b border-kumo-hairline" />
427427

428428
<div
429429
ref={desktopScrollRef}

‎packages/kumo-docs-astro/src/components/demos/Chart/ChartCard.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,22 @@ interface Props {
88
const { title, description, href } = Astro.props;
99
---
1010

11-
<div class="rounded-lg border border-kumo-line bg-kumo-elevated">
11+
<div class="rounded-lg border border-kumo-hairline bg-kumo-elevated">
1212
<div class="p-4">
1313
<div class="text-kumo-default">{title}</div>
1414
<div class="mt-1 text-sm text-kumo-secondary">{description}</div>
1515

1616
<div class="mt-4">
1717
<a
1818
href={href}
19-
class="inline-flex items-center justify-center rounded-md border border-kumo-line bg-kumo-control px-3 py-1.5 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-recessed"
19+
class="inline-flex items-center justify-center rounded-md border border-kumo-hairline bg-kumo-control px-3 py-1.5 text-sm font-medium text-kumo-default transition-colors hover:bg-kumo-recessed"
2020
>
2121
Learn more
2222
</a>
2323
</div>
2424
</div>
2525

26-
<div class="border-kumo-line border-t bg-kumo-base p-2">
26+
<div class="border-kumo-hairline border-t bg-kumo-base p-2">
2727
<slot />
2828
</div>
2929
</div>

‎packages/kumo-docs-astro/src/components/demos/Chart/ChartDemo.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ export function LegendDefaultDemo() {
311311
<div className="space-y-4">
312312
<h3 className="text-sm font-medium">Active State</h3>
313313

314-
<div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
314+
<div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
315315
<ChartLegend.LargeItem
316316
name="Requests"
317317
color={ChartPalette.semantic("Neutral", isDarkMode)}
@@ -333,7 +333,7 @@ export function LegendDefaultDemo() {
333333

334334
<h3 className="text-sm font-medium mt-12">Inactive State</h3>
335335

336-
<div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
336+
<div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
337337
<ChartLegend.LargeItem
338338
name="Requests"
339339
color={ChartPalette.semantic("Neutral", isDarkMode)}
@@ -502,7 +502,7 @@ export function ChartExampleDemo() {
502502
<LayerCard>
503503
<LayerCard.Secondary>Read latency</LayerCard.Secondary>
504504
<LayerCard.Primary>
505-
<div className="flex divide-x divide-kumo-line gap-4 px-2 mb-2">
505+
<div className="flex divide-x divide-kumo-hairline gap-4 px-2 mb-2">
506506
<ChartLegend.LargeItem
507507
name="P99"
508508
color={ChartPalette.semantic("Attention", isDarkMode)}

‎packages/kumo-docs-astro/src/components/demos/CloudflareLogoDemo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export function PoweredByCloudflareVariantsDemo() {
159159

160160
export function PoweredByCloudflareFooterDemo() {
161161
return (
162-
<footer className="flex w-full items-center justify-between rounded-lg border border-kumo-line bg-kumo-elevated px-6 py-4">
162+
<footer className="flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4">
163163
<span className="text-sm text-kumo-subtle">
164164
&copy; 2026 Your Company. All rights reserved.
165165
</span>

‎packages/kumo-docs-astro/src/components/demos/CodeHighlightedDemo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ export function CodeHighlightedCustomHighlightDemo() {
286286
/>
287287
</div>
288288

289-
<div className="flex flex-wrap gap-6 rounded-md border border-kumo-line bg-kumo-elevated p-4">
289+
<div className="flex flex-wrap gap-6 rounded-md border border-kumo-hairline bg-kumo-elevated p-4">
290290
<label className="flex flex-col gap-2">
291291
<span className="text-sm text-kumo-subtle">Hue: {hue}°</span>
292292
<input

‎packages/kumo-docs-astro/src/components/demos/CommandPaletteDemo.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,13 +146,13 @@ export function CommandPaletteBasicDemo() {
146146
</CommandPalette.List>
147147
<CommandPalette.Footer>
148148
<span className="flex items-center gap-2">
149-
<kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
149+
<kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
150150
↑↓
151151
</kbd>
152152
<span>Navigate</span>
153153
</span>
154154
<span className="flex items-center gap-2">
155-
<kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
155+
<kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
156156
↵
157157
</kbd>
158158
<span>Select</span>
@@ -359,13 +359,13 @@ export function CommandPaletteResultItemDemo() {
359359
</CommandPalette.List>
360360
<CommandPalette.Footer>
361361
<span className="flex items-center gap-2">
362-
<kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
362+
<kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
363363
↑↓
364364
</kbd>
365365
<span>Navigate</span>
366366
</span>
367367
<span className="flex items-center gap-2">
368-
<kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
368+
<kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
369369
⌘↵
370370
</kbd>
371371
<span>Open in new tab</span>

‎packages/kumo-docs-astro/src/components/demos/DatePickerDemo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ export function DatePickerRangeWithPresetsDemo() {
226226
</Popover.Trigger>
227227
<Popover.Content className="p-0">
228228
<div className="flex">
229-
<div className="flex flex-col gap-1 border-r border-kumo-line p-2 text-sm">
229+
<div className="flex flex-col gap-1 border-r border-kumo-hairline p-2 text-sm">
230230
{presets.map((preset) => {
231231
const isActive = isPresetActive(preset);
232232
return (

0 commit comments

Comments
 (0)