From 8096035a946e00e5f3fc50ae5a5891deab91ef9c Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Fri, 28 Nov 2025 17:50:59 +0100
Subject: [PATCH 1/2] Fix callout component styles for light mode

Updates the callout component to support light mode. It also adds a
check for unknown callout types and a rounded corner to the right side.
---
 packages/web/docs/src/components/callout.tsx | 46 +++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/packages/web/docs/src/components/callout.tsx b/packages/web/docs/src/components/callout.tsx
index 7a4ec08482..0539cc8ab4 100644
--- a/packages/web/docs/src/components/callout.tsx
+++ b/packages/web/docs/src/components/callout.tsx
@@ -19,48 +19,52 @@ const calloutConfig: Record<
 > = {
   note: {
     title: 'Note',
-    bgColor: 'bg-blue-950/30',
-    borderColor: 'border-blue-400',
-    titleColor: 'text-blue-400',
+    bgColor: 'bg-blue-50 dark:bg-blue-950/30',
+    borderColor: 'border-blue-500 dark:border-blue-400',
+    titleColor: 'text-blue-700 dark:text-blue-400',
   },
   tip: {
     title: 'Tip',
-    bgColor: 'bg-purple-950/30',
-    borderColor: 'border-purple-400',
-    titleColor: 'text-purple-400',
+    bgColor: 'bg-purple-50 dark:bg-purple-950/30',
+    borderColor: 'border-purple-500 dark:border-purple-400',
+    titleColor: 'text-purple-700 dark:text-purple-400',
   },
   warning: {
     title: 'Warning',
-    bgColor: 'bg-yellow-950/30',
-    borderColor: 'border-yellow-400',
-    titleColor: 'text-yellow-400',
+    bgColor: 'bg-yellow-50 dark:bg-yellow-950/30',
+    borderColor: 'border-yellow-500 dark:border-yellow-400',
+    titleColor: 'text-yellow-700 dark:text-yellow-400',
   },
   critical: {
-    title: 'critical',
-    bgColor: 'bg-red-950/30',
-    borderColor: 'border-red-400',
-    titleColor: 'text-red-400',
+    title: 'Critical',
+    bgColor: 'bg-red-50 dark:bg-red-950/30',
+    borderColor: 'border-red-500 dark:border-red-400',
+    titleColor: 'text-red-700 dark:text-red-400',
   },
   info: {
     title: 'Info',
-    bgColor: 'bg-cyan-950/30',
-    borderColor: 'border-cyan-400',
-    titleColor: 'text-cyan-400',
+    bgColor: 'bg-cyan-50 dark:bg-cyan-950/30',
+    borderColor: 'border-cyan-500 dark:border-cyan-400',
+    titleColor: 'text-cyan-700 dark:text-cyan-400',
   },
   success: {
     title: 'Success',
-    bgColor: 'bg-green-950/30',
-    borderColor: 'border-green-400',
-    titleColor: 'text-green-400',
+    bgColor: 'bg-green-50 dark:bg-green-950/30',
+    borderColor: 'border-green-500 dark:border-green-400',
+    titleColor: 'text-green-700 dark:text-green-400',
   },
 };
 
 export function Callout({ type, children, title }: CalloutProps) {
   const config = calloutConfig[type];
 
+  if (!config) {
+    throw new Error(`Unknown callout type: ${type}`);
+  }
+
   return (
-    <div className={cn(config.bgColor, config.borderColor, 'mt-6 border-l-2 p-4')}>
-      <div className="min-w-0 flex-1 text-white">
+    <div className={cn(config.bgColor, config.borderColor, 'mt-6 rounded-r-lg border-l-2 p-4')}>
+      <div className="min-w-0 flex-1 dark:text-white">
         <div
           className={cn('mb-2 font-mono text-sm font-medium uppercase', config.titleColor)}
           style={{

From 857fb59397cb22903de69d8b437b87d07006582b Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Mon, 1 Dec 2025 10:10:17 +0100
Subject: [PATCH 2/2] drop cn usage, for some reason :shrug:

---
 packages/web/docs/src/components/callout.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/web/docs/src/components/callout.tsx b/packages/web/docs/src/components/callout.tsx
index 0539cc8ab4..b2956ec893 100644
--- a/packages/web/docs/src/components/callout.tsx
+++ b/packages/web/docs/src/components/callout.tsx
@@ -1,5 +1,3 @@
-import { cn } from '../lib/utils';
-
 type CalloutType = 'note' | 'tip' | 'warning' | 'critical' | 'info' | 'success';
 
 interface CalloutProps {
@@ -63,10 +61,10 @@ export function Callout({ type, children, title }: CalloutProps) {
   }
 
   return (
-    <div className={cn(config.bgColor, config.borderColor, 'mt-6 rounded-r-lg border-l-2 p-4')}>
+    <div className={`${config.bgColor} ${config.borderColor} mt-6 rounded-r-lg border-l-2 p-4`}>
       <div className="min-w-0 flex-1 dark:text-white">
         <div
-          className={cn('mb-2 font-mono text-sm font-medium uppercase', config.titleColor)}
+          className={`mb-2 font-mono text-sm font-medium uppercase ${config.titleColor}`}
           style={{
             letterSpacing: '0.05em',
           }}
@@ -74,7 +72,7 @@ export function Callout({ type, children, title }: CalloutProps) {
           {title ?? config.title}
         </div>
         {/* I used [&_*]:!leading-[inherit] to override line-height forced by nextra */}
-        <div className={cn('[&_*]:!leading-[inherit]')}>{children}</div>
+        <div className="[&_*]:!leading-[inherit]">{children}</div>
       </div>
     </div>
   );