Skip to content

Commit aa2ed0f

Browse files
zenoachtigzenoachtig
authored
Restyle hint block (#2579)
1 parent 51cba07 commit aa2ed0f

File tree

5 files changed

+63
-121
lines changed

5 files changed

+63
-121
lines changed

‎.changeset/perfect-pigs-try.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'gitbook': patch
3+
---
4+
5+
Restyle hint blocks

‎packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,8 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
9898
'overflow-auto',
9999
'bg-light-2',
100100
'dark:bg-dark-2',
101+
'border-light-4',
102+
'dark:border-dark-4',
101103
'hide-scroll',
102104
titleRoundingStyle,
103105
)}

‎packages/gitbook/src/components/DocumentView/Hint.tsx‎

Lines changed: 47 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
1616
return (
1717
<div
1818
className={tcls(
19-
'px-4',
20-
'py-4',
19+
'hint',
20+
'p-4',
2121
'transition-colors',
2222
'rounded-md',
2323
'straight-corners:rounded-none',
@@ -26,19 +26,16 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
2626
)}
2727
>
2828
<div className={tcls('flex', 'flex-row')}>
29-
<div
29+
<Icon
30+
icon={hintStyle.icon}
3031
className={tcls(
31-
'flex',
32-
'items-start',
33-
'justify-center',
34-
'pr-3',
32+
'size-5',
33+
'mr-4',
3534
'mt-0.5',
3635
firstLine.lineHeight,
3736
hintStyle.iconColor,
3837
)}
39-
>
40-
<Icon icon={hintStyle.icon} className={tcls('size-4')} />
41-
</div>
38+
/>
4239
<Blocks
4340
{...contextProps}
4441
ancestorBlocks={[...ancestorBlocks, block]}
@@ -48,7 +45,7 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
4845
// render hash icon on the other side of the heading
4946
'flip-heading-hash',
5047
)}
51-
style={['flex-1', 'space-y-4', '[&>p]:text-sm', '[&>p]:leading-relaxed']}
48+
style={['flex-1', 'space-y-4', '[&_.hint]:border', '[&_pre]:border']}
5249
/>
5350
</div>
5451
</div>
@@ -65,130 +62,63 @@ const HINT_STYLES: {
6562
} = {
6663
info: {
6764
icon: 'circle-info',
68-
iconColor: ['text-periwinkle-700', 'dark:text-periwinkle-400'],
65+
iconColor: ['text-primary-500', 'dark:text-primary-400'],
6966
bodyColor: [
70-
'[&>a]:text-periwinkle-700',
71-
'[&>a:hover]:text-periwinkle-800',
72-
'[&>code]:bg-periwinkle-700/4',
73-
'[&>code]:text-inherit',
74-
'[&>code]:shadow-none',
75-
76-
'text-periwinkle-900',
77-
78-
'dark:text-periwinkle-200',
79-
'dark:[&>a]:text-periwinkle',
80-
'dark:[&>a:hover]:text-periwinkle-600',
81-
'dark:[&>code]:bg-periwinkle-200/2',
82-
'dark:[&>code]:text-inherit',
83-
'decoration-periwinkle-700/6',
84-
'dark:decoration-periwinkle/6',
67+
'[&_a]:text-primary-500',
68+
'[&_a:hover]:text-primary-600',
69+
'dark:[&_a]:text-primary-400',
70+
'dark:[&_a:hover]:text-primary-300',
8571
],
8672
style: [
87-
'bg-gradient-to-b',
88-
'from-periwinkle/6',
89-
'to-periwinkle/5',
90-
'ring-1',
91-
'ring-inset',
92-
'ring-dark/1',
93-
'dark:ring-periwinkle/1',
94-
'dark:from-periwinkle/2',
95-
'dark:to-periwinkle/[0.1]',
73+
'bg-dark-1/1',
74+
'border-dark/3',
75+
'dark:bg-light/1',
76+
'dark:border-light/3',
77+
'[&_.can-override-bg]:bg-dark-1/2',
78+
'[&_.can-override-text]:text-dark',
79+
'dark:[&_.can-override-bg]:bg-light/2',
80+
'dark:[&_.can-override-text]:text-light',
9681
],
9782
},
9883
warning: {
9984
icon: 'circle-exclamation',
100-
iconColor: ['text-yellow-800', 'dark:text-yellow'],
85+
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.
10186
bodyColor: [
102-
'[&>a]:text-yellow-700',
103-
'[&>a:hover]:text-yellow-800',
104-
'[&>code]:bg-yellow-600/5',
105-
'[&>code]:text-inherit',
106-
'[&>code]:shadow-none',
107-
108-
'text-yellow-900',
109-
110-
'dark:text-yellow-200',
111-
'dark:[&>a]:text-yellow',
112-
'dark:[&>a:hover]:text-yellow-600',
113-
'dark:[&>code]:bg-yellow-200/2',
114-
'dark:[&>code]:text-inherit',
115-
'decoration-yellow-700/6',
116-
'dark:decoration-yellow/6',
117-
],
118-
style: [
119-
'bg-gradient-to-b',
120-
'from-yellow/6',
121-
'to-yellow/5',
122-
'ring-1',
123-
'ring-inset',
124-
'ring-dark/1',
125-
'dark:ring-yellow/[0.02]',
126-
'dark:from-yellow/[0.06]',
127-
'dark:to-yellow/2',
87+
'[&_a]:text-orange-800',
88+
'[&_a:hover]:text-orange-900',
89+
'dark:[&_a]:text-orange-400',
90+
'dark:[&_a:hover]:text-orange-300',
91+
'[&_.can-override-bg]:bg-orange-500/3',
92+
'[&_.can-override-text]:text-orange-800',
93+
'dark:[&_.can-override-text]:text-orange-400',
12894
],
95+
style: ['bg-orange-500/2', 'border-orange-500/4'],
12996
},
13097
danger: {
13198
icon: 'triangle-exclamation',
132-
iconColor: ['text-pomegranate-700', 'dark:text-pomegranate-400'],
99+
iconColor: ['text-red-500', 'dark:text-red-400'],
133100
bodyColor: [
134-
'[&>a]:text-pomegranate-600/9',
135-
'[&>a:hover]:text-pomegranate-800',
136-
'[&>code]:bg-pomegranate-600/4',
137-
'[&>code]:text-inherit',
138-
'[&>code]:shadow-none',
139-
140-
'text-pomegranate-900',
141-
142-
'dark:text-pomegranate-100',
143-
'dark:[&>a]:text-pomegranate',
144-
'dark:[&>a:hover]:text-pomegranate-600',
145-
'dark:[&>code]:bg-pomegranate-200/2',
146-
'dark:[&>code]:text-inherit',
147-
'decoration-pomegranate-600/6',
148-
'dark:decoration-pomegranate/6',
149-
],
150-
style: [
151-
'bg-gradient-to-b',
152-
'from-pomegranate/4',
153-
'to-pomegranate/3',
154-
'ring-1',
155-
'ring-inset',
156-
'ring-dark/1',
157-
'dark:ring-pomegranate/1',
158-
'dark:from-pomegranate/2',
159-
'dark:to-pomegranate/3',
101+
'[&_a]:text-red-800',
102+
'[&_a:hover]:text-red-900',
103+
'dark:[&_a]:text-red-400',
104+
'dark:[&_a:hover]:text-red-300',
105+
'[&_.can-override-bg]:bg-red-500/3',
106+
'[&_.can-override-text]:text-red-400',
160107
],
108+
style: ['bg-red-500/2', 'border-red-500/4'],
161109
},
162110
success: {
163111
icon: 'circle-check',
164-
iconColor: ['text-teal-700', 'dark:text-teal-400'],
112+
iconColor: ['text-green-500', 'dark:text-green-400'],
165113
bodyColor: [
166-
'[&>a]:text-teal-600',
167-
'[&>a:hover]:text-teal-800',
168-
'[&>code]:bg-teal-600/4',
169-
'[&>code]:text-inherit',
170-
'[&>code]:shadow-none',
171-
172-
'text-teal-800',
173-
174-
'dark:text-teal-100',
175-
'dark:[&>a]:text-teal-400',
176-
'dark:[&>a:hover]:text-teal-500',
177-
'dark:[&>code]:bg-teal-200/2',
178-
'dark:[&>code]:text-inherit',
179-
'decoration-teal/6',
180-
'dark:decoration-teal/6',
181-
],
182-
style: [
183-
'bg-gradient-to-b',
184-
'from-teal/4',
185-
'to-teal/3',
186-
'ring-1',
187-
'ring-inset',
188-
'ring-dark/1',
189-
'dark:ring-teal/1',
190-
'dark:from-teal/2',
191-
'dark:to-teal/3',
114+
'[&_a]:text-green-800',
115+
'[&_a:hover]:text-green-900',
116+
'dark:[&_a]:text-green-400',
117+
'dark:[&_a:hover]:text-green-300',
118+
'[&_.can-override-bg]:bg-green-500/3',
119+
'[&_.can-override-text]:text-green-800',
120+
'dark:[&_.can-override-text]:text-green-400',
192121
],
122+
style: ['bg-green-500/2', 'border-green-500/4'],
193123
},
194124
};

‎packages/gitbook/src/components/DocumentView/Stepper.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ export function Stepper(props: BlockProps<DocumentBlockStepper>) {
77
const { block, style, ancestorBlocks, ...contextProps } = props;
88

99
return (
10-
<Blocks {...contextProps} nodes={block.nodes} ancestorBlocks={[...ancestorBlocks, block]} />
10+
<Blocks
11+
blockStyle={style}
12+
{...contextProps}
13+
nodes={block.nodes}
14+
ancestorBlocks={[...ancestorBlocks, block]}
15+
/>
1116
);
1217
}

‎packages/gitbook/src/components/DocumentView/StepperStep.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@ export function StepperStep(props: BlockProps<DocumentBlockStepperStep>) {
3030
})();
3131

3232
return (
33-
<div className="flex flex-row gap-4 md:gap-8 max-w-3xl w-full mx-auto">
33+
<div className={tcls('flex flex-row gap-4 md:gap-8 max-w-3xl w-full mx-auto', style)}>
3434
<div className="relative select-none">
3535
<div
3636
className={tcls(
37-
'flex size-[calc(1.75rem+1px)] items-center justify-center rounded-full bg-primary-50 dark:bg-primary-900 tabular-nums',
37+
'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',
3838
'font-medium text-primary-800 dark:text-primary-200',
3939
)}
4040
>
4141
{index + 1}
4242
</div>
43-
<div className="absolute bottom-2 left-[0.875rem] top-9 w-px bg-primary-50 dark:bg-primary-900" />
43+
<div className="absolute bottom-2 left-[0.875rem] top-9 w-px bg-primary-50 dark:bg-primary-900 can-override-bg" />
4444
</div>
4545
<Blocks
4646
{...contextProps}

0 commit comments

Comments
 (0)