fix(tokens): kumo-hairline dark mode

.changeset/hairline-token-update.md

@@ -0,0 +1,10 @@
+---
+"@cloudflare/kumo": patch
+"@cloudflare/kumo-docs-astro": patch
+---
+
+Updated the token value for `kumo-line` and `kumo-hairline` in dark mode so they are more visible.
+
+- replace `kumo-line` usages with `kumo-hairline` across Kumo components and docs UI/content styles
+- use `ring-kumo-line` for shadowed surfaces (for example combobox, dialog, select, dropdown, toast, and related surface wrappers)
+- adjust theme token configuration and generated styles to support updated neutral/hairline appearance

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

@@ -8,10 +8,10 @@ const kumoVersion =
 ---
 
 <header
-  class="sticky top-0 z-10 h-12 border-b border-kumo-line bg-kumo-canvas hidden md:flex"
+  class="sticky top-0 z-10 h-12 border-b border-kumo-hairline bg-kumo-canvas hidden md:flex"
 >
   <div
-    class="flex min-w-0 flex-1 items-center justify-end border-r border-kumo-line px-4"
+    class="flex min-w-0 flex-1 items-center justify-end border-r border-kumo-hairline px-4"
   >
     <a
       href="https://github.com/cloudflare/kumo"

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

@@ -514,28 +514,28 @@ export function SearchDialog({ open, onOpenChange }: SearchDialogProps) {
         </span>
         <div className="flex items-center gap-4">
           <span className="flex items-center gap-1">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               ↑
             </kbd>
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               ↓
             </kbd>
             <span>navigate</span>
           </span>
           <span className="flex items-center gap-1">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               ↵
             </kbd>
             <span>open</span>
           </span>
           <span className="flex items-center gap-1">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               ⌘↵
             </kbd>
             <span>new tab</span>
           </span>
           <span className="flex items-center gap-1">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5">
               esc
             </kbd>
             <span>close</span>

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

@@ -192,7 +192,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
     <>
       <button
         onClick={() => setSearchOpen(true)}
-        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"
+        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"
       >
         <MagnifyingGlassIcon size={16} className="shrink-0" />
         <span>Search...</span>
@@ -214,7 +214,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
         ))}
       </ul>
 
-      <div className="my-4 border-b border-kumo-line" />
+      <div className="my-4 border-b border-kumo-hairline" />
 
       <div className="mb-4">
         {/* Components Section */}
@@ -341,7 +341,7 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
       {/* Mobile header bar with hamburger */}
       <div
         className={cn(
-          "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",
+          "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",
         )}
       >
         <Button
@@ -359,12 +359,12 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
       {/* Mobile slide-out drawer */}
       <aside
         className={cn(
-          "fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-kumo-line bg-kumo-canvas md:hidden",
+          "fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-kumo-hairline bg-kumo-canvas md:hidden",
           "transition-transform duration-300 will-change-transform",
           mobileMenuOpen ? "translate-x-0" : "-translate-x-full",
         )}
       >
-        <div className="flex h-12 flex-none items-center justify-between border-b border-kumo-line px-3">
+        <div className="flex h-12 flex-none items-center justify-between border-b border-kumo-hairline px-3">
           <h1 className="text-base font-medium">Kumo</h1>
           <Button
             variant="ghost"
@@ -389,10 +389,10 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
       <div
         className={cn(
           "fixed inset-y-0 left-0 z-50 hidden w-12 bg-kumo-canvas ated md:block",
-          "border-r border-kumo-line",
+          "border-r border-kumo-hairline",
         )}
       >
-        <div className="relative h-12 border-b border-kumo-line">
+        <div className="relative h-12 border-b border-kumo-hairline">
           <div className="absolute inset-0 grid place-items-center">
             <Button
               variant="ghost"
@@ -419,11 +419,11 @@ export function SidebarNav({ currentPath }: SidebarNavProps) {
           "fixed inset-y-0 left-12 z-40 hidden w-64 flex-col bg-kumo-canvas md:flex",
           "transition-transform duration-300 ease-out will-change-transform",
           sidebarOpen
-            ? "translate-x-0 border-r border-kumo-line"
+            ? "translate-x-0 border-r border-kumo-hairline"
             : "-translate-x-full",
         )}
       >
-        <div className="h-12 flex-none border-b border-kumo-line" />
+        <div className="h-12 flex-none border-b border-kumo-hairline" />
 
         <div
           ref={desktopScrollRef}

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

@@ -8,22 +8,22 @@ interface Props {
 const { title, description, href } = Astro.props;
 ---
 
-<div class="rounded-lg border border-kumo-line bg-kumo-elevated">
+<div class="rounded-lg border border-kumo-hairline bg-kumo-elevated">
   <div class="p-4">
     <div class="text-kumo-default">{title}</div>
     <div class="mt-1 text-sm text-kumo-secondary">{description}</div>
 
     <div class="mt-4">
       <a
         href={href}
-        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"
+        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"
       >
         Learn more
       </a>
     </div>
   </div>
 
-  <div class="border-kumo-line border-t bg-kumo-base p-2">
+  <div class="border-kumo-hairline border-t bg-kumo-base p-2">
     <slot />
   </div>
 </div>

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

@@ -311,7 +311,7 @@ export function LegendDefaultDemo() {
     <div className="space-y-4">
       <h3 className="text-sm font-medium">Active State</h3>
 
-      <div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
+      <div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
         <ChartLegend.LargeItem
           name="Requests"
           color={ChartPalette.semantic("Neutral", isDarkMode)}
@@ -333,7 +333,7 @@ export function LegendDefaultDemo() {
 
       <h3 className="text-sm font-medium mt-12">Inactive State</h3>
 
-      <div className="flex flex-wrap gap-4 divide-x divide-kumo-line">
+      <div className="flex flex-wrap gap-4 divide-x divide-kumo-hairline">
         <ChartLegend.LargeItem
           name="Requests"
           color={ChartPalette.semantic("Neutral", isDarkMode)}
@@ -502,7 +502,7 @@ export function ChartExampleDemo() {
     <LayerCard>
       <LayerCard.Secondary>Read latency</LayerCard.Secondary>
       <LayerCard.Primary>
-        <div className="flex divide-x divide-kumo-line gap-4 px-2 mb-2">
+        <div className="flex divide-x divide-kumo-hairline gap-4 px-2 mb-2">
           <ChartLegend.LargeItem
             name="P99"
             color={ChartPalette.semantic("Attention", isDarkMode)}

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

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

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

@@ -286,7 +286,7 @@ export function CodeHighlightedCustomHighlightDemo() {
           />
         </div>
 
-        <div className="flex flex-wrap gap-6 rounded-md border border-kumo-line bg-kumo-elevated p-4">
+        <div className="flex flex-wrap gap-6 rounded-md border border-kumo-hairline bg-kumo-elevated p-4">
           <label className="flex flex-col gap-2">
             <span className="text-sm text-kumo-subtle">Hue: {hue}°</span>
             <input

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

@@ -146,13 +146,13 @@ export function CommandPaletteBasicDemo() {
         </CommandPalette.List>
         <CommandPalette.Footer>
           <span className="flex items-center gap-2">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
               ↑↓
             </kbd>
             <span>Navigate</span>
           </span>
           <span className="flex items-center gap-2">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
               ↵
             </kbd>
             <span>Select</span>
@@ -359,13 +359,13 @@ export function CommandPaletteResultItemDemo() {
         </CommandPalette.List>
         <CommandPalette.Footer>
           <span className="flex items-center gap-2">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
               ↑↓
             </kbd>
             <span>Navigate</span>
           </span>
           <span className="flex items-center gap-2">
-            <kbd className="rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]">
+            <kbd className="rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]">
               ⌘↵
             </kbd>
             <span>Open in new tab</span>

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

@@ -226,7 +226,7 @@ export function DatePickerRangeWithPresetsDemo() {
       </Popover.Trigger>
       <Popover.Content className="p-0">
         <div className="flex">
-          <div className="flex flex-col gap-1 border-r border-kumo-line p-2 text-sm">
+          <div className="flex flex-col gap-1 border-r border-kumo-hairline p-2 text-sm">
             {presets.map((preset) => {
               const isActive = isPresetActive(preset);
               return (

packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx

@@ -11,7 +11,7 @@ const ExpandableNode = forwardRef<
     <li
       ref={ref}
       {...props}
-      className="rounded-lg shadow bg-kumo-base ring ring-kumo-line overflow-hidden"
+      className="rounded-lg shadow bg-kumo-base ring ring-kumo-hairline overflow-hidden"
     >
       <button
         type="button"
@@ -24,7 +24,7 @@ const ExpandableNode = forwardRef<
         />
       </button>
       {open && (
-        <div className="border-t border-kumo-line px-3 py-2 text-sm text-kumo-subtle">
+        <div className="border-t border-kumo-hairline px-3 py-2 text-sm text-kumo-subtle">
           {children}
         </div>
       )}
@@ -100,7 +100,7 @@ export function FlowAnchorDemo() {
       <Flow.Node>Load balancer</Flow.Node>
       <Flow.Node
         render={
-          <li className="shadow-none rounded-lg ring ring-kumo-line bg-kumo-overlay">
+          <li className="shadow-none rounded-lg ring ring-kumo-hairline bg-kumo-overlay">
             <Flow.Anchor
               type="end"
               render={
@@ -112,7 +112,7 @@ export function FlowAnchorDemo() {
             <Flow.Anchor
               type="start"
               render={
-                <div className="bg-kumo-base rounded ring ring-kumo-line shadow px-2 py-1.5 m-1.5 mt-0">
+                <div className="bg-kumo-base rounded ring ring-kumo-hairline shadow px-2 py-1.5 m-1.5 mt-0">
                   Bindings
                   <span className="text-kumo-subtle w-5 ml-3">2</span>
                 </div>
@@ -137,7 +137,7 @@ export function FlowCenteredDemo() {
       <Flow.Node>my-worker</Flow.Node>
       <Flow.Node
         render={
-          <li className="py-6 px-3 rounded-md shadow bg-kumo-base ring ring-kumo-line">
+          <li className="py-6 px-3 rounded-md shadow bg-kumo-base ring ring-kumo-hairline">
             Taller node
           </li>
         }
@@ -149,7 +149,7 @@ export function FlowCenteredDemo() {
 /** Large flow diagram demonstrating panning */
 export function FlowPanningDemo() {
   return (
-    <Flow className="rounded-lg border border-kumo-line">
+    <Flow className="rounded-lg border border-kumo-hairline">
       <Flow.Node>Start</Flow.Node>
       <Flow.Node>Authenticate</Flow.Node>
       <Flow.Node>Validate</Flow.Node>
@@ -226,9 +226,9 @@ export function FlowSidebarBugDemo() {
   const [sidebarOpen, setSidebarOpen] = useState(true);
 
   return (
-    <div className="relative overflow-hidden rounded-lg ring ring-kumo-line bg-kumo-base min-h-64 flex flex-col">
+    <div className="relative overflow-hidden rounded-lg ring ring-kumo-hairline bg-kumo-base min-h-64 flex flex-col">
       {/* Toolbar */}
-      <div className="flex items-center gap-2 border-b border-kumo-line px-3 py-2 shrink-0">
+      <div className="flex items-center gap-2 border-b border-kumo-hairline px-3 py-2 shrink-0">
         <button
           type="button"
           onClick={() => setSidebarOpen((v) => !v)}
@@ -246,7 +246,7 @@ export function FlowSidebarBugDemo() {
       <div className="flex flex-1 min-h-0">
         {/* Sidebar */}
         <div
-          className="shrink-0 overflow-hidden transition-[width] duration-300 border-r border-kumo-line bg-kumo-elevated"
+          className="shrink-0 overflow-hidden transition-[width] duration-300 border-r border-kumo-hairline bg-kumo-elevated"
           style={{ width: sidebarOpen ? 160 : 0 }}
         >
           <div className="w-40 p-3 space-y-1">

packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx

@@ -624,7 +624,7 @@ export function HomeGrid() {
   ];
 
   return (
-    <ul className="grid auto-rows-min grid-cols-1 gap-px bg-kumo-line md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+    <ul className="grid auto-rows-min grid-cols-1 gap-px bg-kumo-hairline md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
       {components.map((c) => {
         const route = componentRoutes[c.id] || null;
         return (

packages/kumo-docs-astro/src/components/demos/KumoPressDemo.tsx

@@ -56,7 +56,7 @@ const wpThemeStyles = `
   --color-kumo-interact: #c3c4c7;
 
   /* WP borders — very subtle gray */
-  --color-kumo-line: #c3c4c7;
+  --color-kumo-hairline: #c3c4c7;
   --color-kumo-hairline: #2271b1;
 
   /* WP text hierarchy */
@@ -300,7 +300,7 @@ function WPTopBar({
   onToggleDarkMode: () => void;
 }) {
   return (
-    <div className="flex h-[48px] items-center justify-between border-b border-kumo-line bg-kumo-elevated px-4">
+    <div className="flex h-[48px] items-center justify-between border-b border-kumo-hairline bg-kumo-elevated px-4">
       <div className="flex items-center gap-4">
         <h1 className="text-lg font-semibold text-kumo-default">Posts</h1>
         <Button variant="primary" size="sm">
@@ -418,7 +418,7 @@ export function KumoPressDemo() {
       <div
         data-theme="wordpress"
         data-mode={darkMode ? "dark" : undefined}
-        className="flex h-[720px] overflow-hidden rounded-xl border border-kumo-line bg-kumo-elevated font-sans shadow-lg"
+        className="flex h-[720px] overflow-hidden rounded-xl border border-kumo-hairline bg-kumo-elevated font-sans shadow-lg"
       >
         {/* Sidebar */}
         <div

packages/kumo-docs-astro/src/components/demos/PopoverDemo.tsx

@@ -118,7 +118,7 @@ export function PopoverCustomContentDemo() {
             <p className="text-sm text-kumo-subtle">jane@example.com</p>
           </div>
         </div>
-        <div className="mt-3 flex gap-2 border-t border-kumo-line pt-3">
+        <div className="mt-3 flex gap-2 border-t border-kumo-hairline pt-3">
           <Button variant="secondary" size="sm" className="flex-1">
             Profile
           </Button>