gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-25 03:42:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Restyle hint block (#2579)

Browse Source
This commit is contained in:
Zeno Kapitein
2024-11-26 13:41:47 +02:00
committed by GitHub
parent 51cba074d7
commit aa2ed0fda1
5 changed files with 63 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/perfect-pigs-try.md
+5
View File
@@ -0,0 +1,5 @@
---
'gitbook': patch
---
Restyle hint blocks
packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx
+2
View File
@@ -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,
)}
packages/gitbook/src/components/DocumentView/Hint.tsx
+47 -117
View File
@@ -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'],
},
};
packages/gitbook/src/components/DocumentView/Stepper.tsx
+6 -1
View File
@@ -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]}
/>
);
}
packages/gitbook/src/components/DocumentView/StepperStep.tsx
+3 -3
View File
@@ -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}