Skip to content

Commit 2cdba53

Browse files
zenoachtigzenoachtig
authored
Upgrade to Tailwind v4 (#3206)
1 parent 950f6c3 commit 2cdba53

File tree

81 files changed

+735
-523
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+735
-523
lines changed

‎.changeset/twenty-teachers-hang.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@gitbook/react-math": patch
3+
"gitbook": patch
4+
"@gitbook/icons": patch
5+
---
6+
7+
Upgrade to Tailwind v4

‎bun.lock

Lines changed: 125 additions & 49 deletions
Large diffs are not rendered by default.

‎packages/gitbook/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
"devDependencies": {
7474
"@argos-ci/playwright": "^5.0.5",
7575
"@playwright/test": "^1.51.1",
76+
"@tailwindcss/postcss": "^4.1.11",
7677
"@types/js-cookie": "^3.0.6",
7778
"@types/jsontoxml": "^1.0.5",
7879
"@types/jsonwebtoken": "^9.0.6",
@@ -84,14 +85,13 @@
8485
"@types/react": "18.3.13",
8586
"@types/react-dom": "18.3.1",
8687
"@types/rison": "^0.0.9",
87-
"autoprefixer": "^10",
8888
"deepmerge": "^4.3.1",
8989
"env-cmd": "^10.1.0",
9090
"jsonwebtoken": "^9.0.2",
9191
"postcss": "^8",
9292
"psi": "^4.1.0",
9393
"stylelint": "^16.16.0",
94-
"tailwindcss": "^3.4.0",
94+
"tailwindcss": "^4.1.11",
9595
"ts-essentials": "^10.0.1",
9696
"typescript": "^5.5.3",
9797
"vercel": "^39.3.0"

‎packages/gitbook/postcss.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
};

‎packages/gitbook/src/components/AI/server-actions/AIMessageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function AIMessageView(
2323
<div
2424
key={index}
2525
className={tcls(
26-
'flex animate-fadeIn-slow flex-col gap-2',
26+
'flex animate-fade-in-slow flex-col gap-2',
2727
step.content.nodes.length > 0 ? 'has-content' : ''
2828
)}
2929
>

‎packages/gitbook/src/components/AI/server-actions/AIToolCallsSummary.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function ToolCallSummary(props: { toolCall: AIToolCall; context: GitBookSiteCont
3838
const { toolCall, context } = props;
3939

4040
return (
41-
<div className="flex origin-left animate-scaleIn-slow items-start gap-2 text-sm text-tint-subtle">
41+
<div className="flex origin-left animate-scale-in-slow items-start gap-2 text-sm text-tint-subtle">
4242
<Icon
4343
icon={getIconForToolCall(toolCall)}
4444
className="mt-1 size-3 shrink-0 text-tint-subtle/8"
@@ -175,12 +175,12 @@ async function DescriptionForSearchToolCall(props: {
175175
) : null}
176176
</summary>
177177
{hasResults ? (
178-
<div className="mt-1 max-h-0 overflow-y-auto circular-corners:rounded-2xl rounded-corners:rounded-lg border border-tint-subtle p-2 opacity-0 transition-all duration-500 [transition-behavior:allow-discrete] group-open:max-h-96 group-open:opacity-11">
178+
<div className="mt-1 max-h-0 overflow-y-auto circular-corners:rounded-2xl rounded-corners:rounded-lg border border-tint-subtle p-2 opacity-0 transition-all transition-discrete duration-500 group-open:max-h-96 group-open:opacity-11">
179179
<ol className="space-y-1">
180180
{searchResultsWithHrefs.map((result, index) => (
181181
<li
182182
key={`${result.pageId}-${index}`}
183-
className="animate-fadeIn-slow"
183+
className="animate-fade-in-slow"
184184
style={{
185185
animationDelay: `${index * 25}ms`,
186186
}}

‎packages/gitbook/src/components/AIChat/AIChat.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export function AIChatWindow(props: {
121121
return (
122122
<div
123123
data-testid="ai-chat"
124-
className="ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl animate-present scroll-mt-36 px-4 py-4 transition-all duration-300 sm:px-6 lg:fixed lg:w-80 lg:animate-enterFromRight lg:pr-4 lg:pl-0 xl:w-96"
124+
className="ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl animate-present scroll-mt-36 px-4 py-4 transition-all duration-300 sm:px-6 lg:fixed lg:w-80 lg:animate-enter-from-right lg:pr-4 lg:pl-0 xl:w-96"
125125
ref={containerRef}
126126
>
127127
<div className="relative flex h-full grow flex-col overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-md bg-tint-base text-sm text-tint depth-subtle:shadow-lg shadow-tint ring-1 ring-tint-subtle">
@@ -163,7 +163,6 @@ export function AIChatWindow(props: {
163163
iconOnly
164164
icon="ellipsis"
165165
label={tString(language, 'actions')}
166-
className="!px-2"
167166
variant="blank"
168167
size="default"
169168
/>
@@ -187,7 +186,6 @@ export function AIChatWindow(props: {
187186
iconOnly
188187
icon="close"
189188
label={tString(language, 'close')}
190-
className="!px-2"
191189
variant="blank"
192190
size="default"
193191
/>
@@ -202,7 +200,7 @@ export function AIChatWindow(props: {
202200
>
203201
{isEmpty ? (
204202
<div className="flex min-h-full w-full shrink-0 flex-col items-center justify-center gap-6 py-4">
205-
<div className="flex size-32 animate-fadeIn-slow items-center justify-center rounded-full bg-tint-subtle">
203+
<div className="flex size-32 animate-fade-in-slow items-center justify-center rounded-full bg-tint-subtle">
206204
<AIChatIcon
207205
state="intro"
208206
trademark={trademark}
@@ -231,7 +229,7 @@ export function AIChatWindow(props: {
231229
</div>
232230
<div
233231
ref={inputRef}
234-
className="absolute inset-x-0 bottom-0 mr-2 flex select-none flex-col gap-4 bg-gradient-to-b from-transparent to-50% to-tint-base/9 p-4 pr-2"
232+
className="absolute inset-x-0 bottom-0 mr-2 flex select-none flex-col gap-4 bg-linear-to-b from-transparent to-50% to-tint-base/9 p-4 pr-2"
235233
>
236234
{/* Display an error banner when something went wrong. */}
237235
{chat.error ? <AIChatError chatController={chatController} /> : null}
@@ -257,7 +255,7 @@ function AIChatError(props: { chatController: AIChatController }) {
257255
const { chatController } = props;
258256

259257
return (
260-
<div className="flex animate-scaleIn flex-wrap justify-between gap-2 circular-corners:rounded-2xl rounded-corners:rounded-md bg-danger px-3 py-2 text-danger text-sm ring-1 ring-danger">
258+
<div className="flex animate-scale-in flex-wrap justify-between gap-2 circular-corners:rounded-2xl rounded-corners:rounded-md bg-danger px-3 py-2 text-danger text-sm ring-1 ring-danger">
261259
<div className="flex items-center gap-2">
262260
<Icon icon="exclamation-triangle" className="size-3.5" />
263261
<span className="flex items-center gap-1">{t(language, 'ai_chat_error')}</span>
@@ -271,7 +269,7 @@ function AIChatError(props: { chatController: AIChatController }) {
271269
onClick={() => {
272270
chatController.clear();
273271
}}
274-
className="!text-danger hover:bg-danger-5"
272+
className="text-danger! hover:bg-danger-5"
275273
/>
276274
</div>
277275
</div>

‎packages/gitbook/src/components/AIChat/AIChatInput.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export function AIChatInput(props: {
6262
data-testid="ai-chat-input"
6363
className={tcls(
6464
'resize-none',
65-
'focus:outline-none',
65+
'focus:outline-hidden',
6666
'focus:ring-0',
6767
'w-full',
6868
'px-3',
@@ -127,7 +127,7 @@ export function AIChatInput(props: {
127127
arrow
128128
>
129129
<div className="flex cursor-help items-center gap-1 circular-corners:rounded-2xl rounded-corners:rounded-md px-2 py-1 text-tint/7 text-xs transition-all hover:bg-tint">
130-
<span className="-ml-1 rounded-corners:rounded circular-corners:rounded-2xl bg-tint-11/7 px-1 py-0.5 font-mono font-semibold text-[0.65rem] text-contrast-tint-11 leading-none">
130+
<span className="-ml-1 circular-corners:rounded-2xl rounded-corners:rounded-sm bg-tint-11/7 px-1 py-0.5 font-mono font-semibold text-[0.65rem] text-contrast-tint-11 leading-none">
131131
{t(language, 'ai_chat_context_badge')}
132132
</span>{' '}
133133
<span>{t(language, 'ai_chat_context_title')}</span>

‎packages/gitbook/src/components/AIChat/AIChatMessages.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function AIChatMessages(props: {
2525
ref={isLastUserMessage ? lastUserMessageRef : undefined}
2626
data-testid="ai-chat-message"
2727
className={tcls(
28-
message.content ? 'animate-fadeIn-slow' : '',
28+
message.content ? 'animate-fade-in-slow' : '',
2929
'shrink-0',
3030
'last:min-h-[calc(100%-5rem)]',
3131
'scroll-mt-36',
@@ -44,7 +44,7 @@ export function AIChatMessages(props: {
4444
{message.content ? message.content : null}
4545

4646
{isLastMessage && chat.loading ? (
47-
<div className="flex w-full animate-fadeIn-slow flex-wrap gap-2 group-has-[.has-content]/message:hidden">
47+
<div className="flex w-full animate-fade-in-slow flex-wrap gap-2 group-has-[.has-content]/message:hidden">
4848
{Array.from({ length: 7 }).map((_, index) => (
4949
<div
5050
key={index}

‎packages/gitbook/src/components/AIChat/AIResponseFeedback.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ export function AIResponseFeedback(props: {
3131
label={tString(language, 'was_this_helpful_positive_label')}
3232
variant="blank"
3333
className={tcls(
34-
'animate-fadeIn overflow-hidden text-tint-subtle transition-all',
35-
rating !== null && rating !== 1 && 'px-0 text-[0] opacity-0'
34+
'animate-fade-in overflow-hidden text-tint-subtle transition-all',
35+
rating !== null && rating !== 1 && 'px-0 text-[0rem] opacity-0'
3636
)}
3737
size="medium"
3838
style={{ animationDuration: '.5s' }}
@@ -47,8 +47,8 @@ export function AIResponseFeedback(props: {
4747
label={tString(language, 'was_this_helpful_negative_label')}
4848
variant="blank"
4949
className={tcls(
50-
'animate-fadeIn overflow-hidden text-tint-subtle transition-all',
51-
rating !== null && rating !== -1 && 'px-0 text-[0] opacity-0'
50+
'animate-fade-in overflow-hidden text-tint-subtle transition-all',
51+
rating !== null && rating !== -1 && 'px-0 text-[0rem] opacity-0'
5252
)}
5353
size="medium"
5454
style={{ animationDelay: '.2s', animationDuration: '.5s' }}
@@ -59,7 +59,7 @@ export function AIResponseFeedback(props: {
5959
/>
6060
{rating !== null ? (
6161
<span
62-
className="ml-2 animate-fadeIn-slow text-tint-subtle"
62+
className="ml-2 animate-fade-in-slow text-tint-subtle"
6363
style={{ animationDelay: '.3s' }}
6464
>
6565
{t(language, 'was_this_helpful_thank_you')}

0 commit comments

Comments
 (0)