From aa2ed0fda15c3d7f77ee1f9c5a2d2775bfb087a4 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zenomilan@me.com>
Date: Tue, 26 Nov 2024 13:41:47 +0200
Subject: [PATCH] Restyle hint block (#2579)

---
 .changeset/perfect-pigs-try.md                |   5 +
 .../DocumentView/CodeBlock/CodeBlock.tsx      |   2 +
 .../src/components/DocumentView/Hint.tsx      | 164 +++++-------------
 .../src/components/DocumentView/Stepper.tsx   |   7 +-
 .../components/DocumentView/StepperStep.tsx   |   6 +-
 5 files changed, 63 insertions(+), 121 deletions(-)
 create mode 100644 .changeset/perfect-pigs-try.md

diff --git a/.changeset/perfect-pigs-try.md b/.changeset/perfect-pigs-try.md
new file mode 100644
index 000000000..e3c15ac78
--- /dev/null
+++ b/.changeset/perfect-pigs-try.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Restyle hint blocks
diff --git a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx
index 5242b2afe..e079de1cb 100644
--- a/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx
+++ b/packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx
@@ -98,6 +98,8 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
                     'overflow-auto',
                     'bg-light-2',
                     'dark:bg-dark-2',
+                    'border-light-4',
+                    'dark:border-dark-4',
                     'hide-scroll',
                     titleRoundingStyle,
                 )}
diff --git a/packages/gitbook/src/components/DocumentView/Hint.tsx b/packages/gitbook/src/components/DocumentView/Hint.tsx
index 1adde6c32..fbe646861 100644
--- a/packages/gitbook/src/components/DocumentView/Hint.tsx
+++ b/packages/gitbook/src/components/DocumentView/Hint.tsx
@@ -16,8 +16,8 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
     return (
         <div
             className={tcls(
-                'px-4',
-                'py-4',
+                'hint',
+                'p-4',
                 'transition-colors',
                 'rounded-md',
                 'straight-corners:rounded-none',
@@ -26,19 +26,16 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
             )}
         >
             <div className={tcls('flex', 'flex-row')}>
-                <div
+                <Icon
+                    icon={hintStyle.icon}
                     className={tcls(
-                        'flex',
-                        'items-start',
-                        'justify-center',
-                        'pr-3',
+                        'size-5',
+                        'mr-4',
                         'mt-0.5',
                         firstLine.lineHeight,
                         hintStyle.iconColor,
                     )}
-                >
-                    <Icon icon={hintStyle.icon} className={tcls('size-4')} />
-                </div>
+                />
                 <Blocks
                     {...contextProps}
                     ancestorBlocks={[...ancestorBlocks, block]}
@@ -48,7 +45,7 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
                         // render hash icon on the other side of the heading
                         'flip-heading-hash',
                     )}
-                    style={['flex-1', 'space-y-4', '[&>p]:text-sm', '[&>p]:leading-relaxed']}
+                    style={['flex-1', 'space-y-4', '[&_.hint]:border', '[&_pre]:border']}
                 />
             </div>
         </div>
@@ -65,130 +62,63 @@ const HINT_STYLES: {
 } = {
     info: {
         icon: 'circle-info',
-        iconColor: ['text-periwinkle-700', 'dark:text-periwinkle-400'],
+        iconColor: ['text-primary-500', 'dark:text-primary-400'],
         bodyColor: [
-            '[&>a]:text-periwinkle-700',
-            '[&>a:hover]:text-periwinkle-800',
-            '[&>code]:bg-periwinkle-700/4',
-            '[&>code]:text-inherit',
-            '[&>code]:shadow-none',
-
-            'text-periwinkle-900',
-
-            'dark:text-periwinkle-200',
-            'dark:[&>a]:text-periwinkle',
-            'dark:[&>a:hover]:text-periwinkle-600',
-            'dark:[&>code]:bg-periwinkle-200/2',
-            'dark:[&>code]:text-inherit',
-            'decoration-periwinkle-700/6',
-            'dark:decoration-periwinkle/6',
+            '[&_a]:text-primary-500',
+            '[&_a:hover]:text-primary-600',
+            'dark:[&_a]:text-primary-400',
+            'dark:[&_a:hover]:text-primary-300',
         ],
         style: [
-            'bg-gradient-to-b',
-            'from-periwinkle/6',
-            'to-periwinkle/5',
-            'ring-1',
-            'ring-inset',
-            'ring-dark/1',
-            'dark:ring-periwinkle/1',
-            'dark:from-periwinkle/2',
-            'dark:to-periwinkle/[0.1]',
+            'bg-dark-1/1',
+            'border-dark/3',
+            'dark:bg-light/1',
+            'dark:border-light/3',
+            '[&_.can-override-bg]:bg-dark-1/2',
+            '[&_.can-override-text]:text-dark',
+            'dark:[&_.can-override-bg]:bg-light/2',
+            'dark:[&_.can-override-text]:text-light',
         ],
     },
     warning: {
         icon: 'circle-exclamation',
-        iconColor: ['text-yellow-800', 'dark:text-yellow'],
+        iconColor: ['text-amber-500', 'dark:text-orange-400'], // Darker shades of orange-* mismatch with lighter shades, so in light mode we use amber text on top of orange bg.
         bodyColor: [
-            '[&>a]:text-yellow-700',
-            '[&>a:hover]:text-yellow-800',
-            '[&>code]:bg-yellow-600/5',
-            '[&>code]:text-inherit',
-            '[&>code]:shadow-none',
-
-            'text-yellow-900',
-
-            'dark:text-yellow-200',
-            'dark:[&>a]:text-yellow',
-            'dark:[&>a:hover]:text-yellow-600',
-            'dark:[&>code]:bg-yellow-200/2',
-            'dark:[&>code]:text-inherit',
-            'decoration-yellow-700/6',
-            'dark:decoration-yellow/6',
-        ],
-        style: [
-            'bg-gradient-to-b',
-            'from-yellow/6',
-            'to-yellow/5',
-            'ring-1',
-            'ring-inset',
-            'ring-dark/1',
-            'dark:ring-yellow/[0.02]',
-            'dark:from-yellow/[0.06]',
-            'dark:to-yellow/2',
+            '[&_a]:text-orange-800',
+            '[&_a:hover]:text-orange-900',
+            'dark:[&_a]:text-orange-400',
+            'dark:[&_a:hover]:text-orange-300',
+            '[&_.can-override-bg]:bg-orange-500/3',
+            '[&_.can-override-text]:text-orange-800',
+            'dark:[&_.can-override-text]:text-orange-400',
         ],
+        style: ['bg-orange-500/2', 'border-orange-500/4'],
     },
     danger: {
         icon: 'triangle-exclamation',
-        iconColor: ['text-pomegranate-700', 'dark:text-pomegranate-400'],
+        iconColor: ['text-red-500', 'dark:text-red-400'],
         bodyColor: [
-            '[&>a]:text-pomegranate-600/9',
-            '[&>a:hover]:text-pomegranate-800',
-            '[&>code]:bg-pomegranate-600/4',
-            '[&>code]:text-inherit',
-            '[&>code]:shadow-none',
-
-            'text-pomegranate-900',
-
-            'dark:text-pomegranate-100',
-            'dark:[&>a]:text-pomegranate',
-            'dark:[&>a:hover]:text-pomegranate-600',
-            'dark:[&>code]:bg-pomegranate-200/2',
-            'dark:[&>code]:text-inherit',
-            'decoration-pomegranate-600/6',
-            'dark:decoration-pomegranate/6',
-        ],
-        style: [
-            'bg-gradient-to-b',
-            'from-pomegranate/4',
-            'to-pomegranate/3',
-            'ring-1',
-            'ring-inset',
-            'ring-dark/1',
-            'dark:ring-pomegranate/1',
-            'dark:from-pomegranate/2',
-            'dark:to-pomegranate/3',
+            '[&_a]:text-red-800',
+            '[&_a:hover]:text-red-900',
+            'dark:[&_a]:text-red-400',
+            'dark:[&_a:hover]:text-red-300',
+            '[&_.can-override-bg]:bg-red-500/3',
+            '[&_.can-override-text]:text-red-400',
         ],
+        style: ['bg-red-500/2', 'border-red-500/4'],
     },
     success: {
         icon: 'circle-check',
-        iconColor: ['text-teal-700', 'dark:text-teal-400'],
+        iconColor: ['text-green-500', 'dark:text-green-400'],
         bodyColor: [
-            '[&>a]:text-teal-600',
-            '[&>a:hover]:text-teal-800',
-            '[&>code]:bg-teal-600/4',
-            '[&>code]:text-inherit',
-            '[&>code]:shadow-none',
-
-            'text-teal-800',
-
-            'dark:text-teal-100',
-            'dark:[&>a]:text-teal-400',
-            'dark:[&>a:hover]:text-teal-500',
-            'dark:[&>code]:bg-teal-200/2',
-            'dark:[&>code]:text-inherit',
-            'decoration-teal/6',
-            'dark:decoration-teal/6',
-        ],
-        style: [
-            'bg-gradient-to-b',
-            'from-teal/4',
-            'to-teal/3',
-            'ring-1',
-            'ring-inset',
-            'ring-dark/1',
-            'dark:ring-teal/1',
-            'dark:from-teal/2',
-            'dark:to-teal/3',
+            '[&_a]:text-green-800',
+            '[&_a:hover]:text-green-900',
+            'dark:[&_a]:text-green-400',
+            'dark:[&_a:hover]:text-green-300',
+            '[&_.can-override-bg]:bg-green-500/3',
+            '[&_.can-override-text]:text-green-800',
+            'dark:[&_.can-override-text]:text-green-400',
         ],
+        style: ['bg-green-500/2', 'border-green-500/4'],
     },
 };
diff --git a/packages/gitbook/src/components/DocumentView/Stepper.tsx b/packages/gitbook/src/components/DocumentView/Stepper.tsx
index faeb22936..0242e9451 100644
--- a/packages/gitbook/src/components/DocumentView/Stepper.tsx
+++ b/packages/gitbook/src/components/DocumentView/Stepper.tsx
@@ -7,6 +7,11 @@ export function Stepper(props: BlockProps<DocumentBlockStepper>) {
     const { block, style, ancestorBlocks, ...contextProps } = props;
 
     return (
-        <Blocks {...contextProps} nodes={block.nodes} ancestorBlocks={[...ancestorBlocks, block]} />
+        <Blocks
+            blockStyle={style}
+            {...contextProps}
+            nodes={block.nodes}
+            ancestorBlocks={[...ancestorBlocks, block]}
+        />
     );
 }
diff --git a/packages/gitbook/src/components/DocumentView/StepperStep.tsx b/packages/gitbook/src/components/DocumentView/StepperStep.tsx
index 7deed822f..3f6742e7a 100644
--- a/packages/gitbook/src/components/DocumentView/StepperStep.tsx
+++ b/packages/gitbook/src/components/DocumentView/StepperStep.tsx
@@ -30,17 +30,17 @@ export function StepperStep(props: BlockProps<DocumentBlockStepperStep>) {
     })();
 
     return (
-        <div className="flex flex-row gap-4 md:gap-8 max-w-3xl w-full mx-auto">
+        <div className={tcls('flex flex-row gap-4 md:gap-8 max-w-3xl w-full mx-auto', style)}>
             <div className="relative select-none">
                 <div
                     className={tcls(
-                        'flex size-[calc(1.75rem+1px)] items-center justify-center rounded-full bg-primary-50 dark:bg-primary-900 tabular-nums',
+                        'can-override-bg can-override-text flex size-[calc(1.75rem+1px)] items-center justify-center rounded-full bg-primary-50 dark:bg-primary-900 tabular-nums',
                         'font-medium text-primary-800 dark:text-primary-200',
                     )}
                 >
                     {index + 1}
                 </div>
-                <div className="absolute bottom-2 left-[0.875rem] top-9 w-px bg-primary-50 dark:bg-primary-900" />
+                <div className="absolute bottom-2 left-[0.875rem] top-9 w-px bg-primary-50 dark:bg-primary-900 can-override-bg" />
             </div>
             <Blocks
                 {...contextProps}