Skip to content

Commit 7d3fe23

Browse files
zenoachtigSamyPesse
zenoachtig
and
SamyPesse
authored
Add circular corners and depth styles (#3280)
Co-authored-by: Samy Pessé <samypesse@gmail.com>
1 parent 521052d commit 7d3fe23

38 files changed

+110
-43
lines changed

‎.changeset/fair-crews-wink.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"gitbook": minor
3+
---
4+
5+
Add circular corners and depth styling

‎bun.lock

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"name": "@gitbook/cache-tags",
2727
"version": "0.3.1",
2828
"dependencies": {
29-
"@gitbook/api": "^0.115.0",
29+
"@gitbook/api": "^0.118.0",
3030
"assert-never": "^1.2.1",
3131
},
3232
"devDependencies": {
@@ -51,7 +51,7 @@
5151
"name": "gitbook",
5252
"version": "0.12.0",
5353
"dependencies": {
54-
"@gitbook/api": "^0.115.0",
54+
"@gitbook/api": "^0.118.0",
5555
"@gitbook/cache-do": "workspace:*",
5656
"@gitbook/cache-tags": "workspace:*",
5757
"@gitbook/colors": "workspace:*",
@@ -143,7 +143,7 @@
143143
"name": "gitbook-v2",
144144
"version": "0.3.0",
145145
"dependencies": {
146-
"@gitbook/api": "^0.115.0",
146+
"@gitbook/api": "^0.118.0",
147147
"@gitbook/cache-tags": "workspace:*",
148148
"@opennextjs/cloudflare": "1.1.0",
149149
"@sindresorhus/fnv1a": "^3.1.0",
@@ -202,7 +202,7 @@
202202
"name": "@gitbook/react-contentkit",
203203
"version": "0.7.0",
204204
"dependencies": {
205-
"@gitbook/api": "^0.115.0",
205+
"@gitbook/api": "^0.118.0",
206206
"@gitbook/icons": "workspace:*",
207207
"classnames": "^2.5.1",
208208
},
@@ -260,7 +260,7 @@
260260
},
261261
"overrides": {
262262
"@codemirror/state": "6.4.1",
263-
"@gitbook/api": "^0.115.0",
263+
"@gitbook/api": "^0.118.0",
264264
"react": "^19.0.0",
265265
"react-dom": "^19.0.0",
266266
},
@@ -625,7 +625,7 @@
625625

626626
"@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@6.6.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="],
627627

628-
"@gitbook/api": ["@gitbook/api@0.115.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-Lyj+1WVNnE/Zuuqa/1ZdnUQfUiNE6es89RFK6CJ+Tb36TFwls6mbHKXCZsBwSYyoMYTVK39WQ3Nob6Nw6+TWCA=="],
628+
"@gitbook/api": ["@gitbook/api@0.118.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-5bpvXyGNsMOn1Ee7uzohDz/yOgxpVyLZMLu6THYwbG9UeY6BFsWISeqTw03COCX42rVLU5zFReDxRTb7lfZtCw=="],
629629

630630
"@gitbook/cache-do": ["@gitbook/cache-do@workspace:packages/cache-do"],
631631

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"packageManager": "bun@1.2.11",
1111
"overrides": {
1212
"@codemirror/state": "6.4.1",
13-
"@gitbook/api": "^0.115.0",
13+
"@gitbook/api": "^0.118.0",
1414
"react": "^19.0.0",
1515
"react-dom": "^19.0.0"
1616
},

‎packages/cache-tags/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
},
1111
"version": "0.3.1",
1212
"dependencies": {
13-
"@gitbook/api": "^0.115.0",
13+
"@gitbook/api": "^0.118.0",
1414
"assert-never": "^1.2.1"
1515
},
1616
"devDependencies": {

‎packages/gitbook-v2/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.3.0",
44
"private": true,
55
"dependencies": {
6-
"@gitbook/api": "^0.115.0",
6+
"@gitbook/api": "^0.118.0",
77
"@gitbook/cache-tags": "workspace:*",
88
"@opennextjs/cloudflare": "1.1.0",
99
"@sindresorhus/fnv1a": "^3.1.0",

‎packages/gitbook/e2e/internal.spec.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
CustomizationBackground,
33
CustomizationCorners,
4+
CustomizationDepth,
45
CustomizationHeaderPreset,
56
CustomizationIconsStyle,
67
CustomizationSidebarListStyle,
@@ -817,6 +818,16 @@ const testCases: TestsCase[] = [
817818
}),
818819
run: waitForCookiesDialog,
819820
},
821+
{
822+
name: `With flat and circular corners - Theme mode ${themeMode}`,
823+
url: getCustomizationURL({
824+
styling: {
825+
depth: CustomizationDepth.Flat,
826+
corners: CustomizationCorners.Circular,
827+
},
828+
}),
829+
run: waitForCookiesDialog,
830+
},
820831
]),
821832
},
822833
{

‎packages/gitbook/e2e/util.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
CustomizationBackground,
44
CustomizationCorners,
55
CustomizationDefaultFont,
6+
CustomizationDepth,
67
type CustomizationHeaderItem,
78
CustomizationHeaderPreset,
89
CustomizationIconsStyle,
@@ -278,6 +279,7 @@ export function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettin
278279
dangerColor: { light: '#FB2C36', dark: '#FB2C36' },
279280
successColor: { light: '#00C950', dark: '#00C950' },
280281
corners: CustomizationCorners.Rounded,
282+
depth: CustomizationDepth.Subtle,
281283
font: CustomizationDefaultFont.Inter,
282284
background: CustomizationBackground.Plain,
283285
icons: CustomizationIconsStyle.Regular,

‎packages/gitbook/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static/icons && rm -rf ./public/~gitbook/static/math"
1717
},
1818
"dependencies": {
19-
"@gitbook/api": "^0.115.0",
19+
"@gitbook/api": "^0.118.0",
2020
"@gitbook/cache-do": "workspace:*",
2121
"@gitbook/cache-tags": "workspace:*",
2222
"@gitbook/colors": "workspace:*",

‎packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function AnnouncementBanner(props: {
3434
<Tag
3535
href={contentRef?.href ?? ''}
3636
className={tcls(
37-
'flex w-full items-start justify-center overflow-hidden rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
37+
'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
3838
style.container,
3939
closeable && 'pr-12',
4040
hasLink && style.hover
@@ -81,7 +81,7 @@ export function AnnouncementBanner(props: {
8181
</Tag>
8282
{closeable ? (
8383
<button
84-
className={`absolute top-0 right-4 mt-2 mr-2 rounded straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
84+
className={`absolute top-0 right-4 mt-2 mr-2 rounded circular-corners:rounded-lg straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
8585
type="button"
8686
onClick={dismissAnnouncement}
8787
title={tString(language, 'close')}

‎packages/gitbook/src/components/Cookies/CookiesToast.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,11 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
4747
'bg-tint-base',
4848
'rounded',
4949
'straight-corners:rounded-none',
50+
'circular-corners:rounded-2xl',
5051
'ring-1',
5152
'ring-tint-subtle',
5253
'shadow-1xs',
54+
'depth-flat:shadow-none',
5355
'p-4',
5456
'pr-8',
5557
'bottom-4',
@@ -83,6 +85,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
8385
'justify-center',
8486
'items-center',
8587
'rounded-sm',
88+
'circular-corners:rounded-full',
8689
'hover:bg-tint-hover'
8790
)}
8891
title={tString(language, 'close')}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,9 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
113113
case 'code-line':
114114
case 'tabs-item':
115115
throw new Error(`Blocks (${block.type}) should be directly rendered by parent`);
116+
case 'columns':
117+
case 'column':
118+
return null;
116119
default:
117120
return nullIfNever(block);
118121
}
@@ -177,6 +180,9 @@ export function BlockSkeleton(props: { block: DocumentBlock; style: ClassValue }
177180
case 'code-line':
178181
case 'tabs-item':
179182
throw new Error(`Blocks (${block.type}) should be directly rendered by parent`);
183+
case 'columns':
184+
case 'column':
185+
return null;
180186
default:
181187
return nullIfNever(block);
182188
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
2323
'rounded-md',
2424
hasHeading ? 'rounded-l' : null,
2525
'straight-corners:rounded-none',
26+
'circular-corners:rounded-xl',
2627
'overflow-hidden',
2728
hasHeading ? ['border-l-2', hintStyle.containerWithHeader] : hintStyle.container,
2829

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import type {
2-
DocumentBlockImage,
3-
DocumentBlockImageDimension,
4-
DocumentBlockImages,
5-
JSONDocument,
6-
} from '@gitbook/api';
1+
import type { DocumentBlockImage, DocumentBlockImages, JSONDocument, Length } from '@gitbook/api';
72

83
import { Image, type ImageResponsiveSize } from '@/components/utils';
94
import { resolveContentRef } from '@/lib/references';
@@ -119,7 +114,7 @@ async function ImageBlock(props: {
119114
* When using relative values, the converted dimension will be relative to the parent element's size.
120115
*/
121116
function getImageDimension<DefaultValue>(
122-
dimension: DocumentBlockImageDimension | undefined,
117+
dimension: Length | undefined,
123118
defaultValue: DefaultValue
124119
): string | DefaultValue {
125120
if (typeof dimension === 'number') {

‎packages/gitbook/src/components/DocumentView/OpenAPI/scalar.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ body {
271271
}
272272
.scalar-activate-button {
273273
@apply flex gap-2 items-center;
274-
@apply bg-primary-solid text-contrast-primary-solid hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover contrast-more:ring-1 rounded-md straight-corners:rounded-none place-self-start;
274+
@apply bg-primary-solid text-contrast-primary-solid hover:bg-primary-solid-hover hover:text-contrast-primary-solid-hover contrast-more:ring-1 rounded-md straight-corners:rounded-none circular-corners:rounded-full circular-corners:px-3 place-self-start;
275275
@apply ring-1 ring-tint hover:ring-tint-hover;
276276
@apply shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none;
277277
@apply contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12;

‎packages/gitbook/src/components/DocumentView/OpenAPI/style.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -481,7 +481,7 @@
481481
.openapi-panel,
482482
.openapi-codesample,
483483
.openapi-response-examples {
484-
@apply border rounded-md straight-corners:rounded-none bg-tint-subtle border-tint-subtle shadow-sm;
484+
@apply border rounded-md straight-corners:rounded-none circular-corners:rounded-xl bg-tint-subtle border-tint-subtle shadow-sm;
485485
}
486486

487487
.openapi-panel pre,
@@ -571,7 +571,7 @@ body:has(.openapi-select-popover) {
571571
}
572572

573573
.openapi-select-popover {
574-
@apply min-w-32 z-10 max-w-[max(20rem,var(--trigger-width))] overflow-x-hidden max-h-52 overflow-y-auto p-1.5 border border-tint-subtle bg-tint-base backdrop-blur-xl rounded-md straight-corners:rounded-none;
574+
@apply min-w-32 z-10 max-w-[max(20rem,var(--trigger-width))] overflow-x-hidden max-h-52 overflow-y-auto p-1.5 border border-tint-subtle bg-tint-base backdrop-blur-xl rounded-md circular-corners:rounded-xl straight-corners:rounded-none;
575575
@apply shadow-md shadow-tint-12/1 dark:shadow-tint-1/1;
576576
}
577577

@@ -680,7 +680,7 @@ body:has(.openapi-select-popover) {
680680

681681
/* Disclosure group */
682682
.openapi-disclosure-group {
683-
@apply border-tint-subtle transition-all border-b border-x overflow-auto last:rounded-b-md straight-corners:last:rounded-none first:rounded-t-md straight-corners:first:rounded-none first:border-t relative;
683+
@apply border-tint-subtle transition-all border-b border-x overflow-auto last:rounded-b-md straight-corners:last:rounded-none circular-corners:last:rounded-b-xl first:rounded-t-md straight-corners:first:rounded-none circular-corners:first:rounded-t-xl first:border-t relative;
684684
}
685685

686686
.openapi-disclosure-group:has(.openapi-disclosure-group-trigger:hover) {
@@ -786,7 +786,7 @@ body:has(.openapi-select-popover) {
786786
}
787787

788788
.openapi-disclosure-trigger-label {
789-
@apply absolute right-3 px-2 h-5 justify-end shrink-0 ring-tint-subtle truncate text-tint duration-300 transition-all rounded straight-corners:rounded-none flex flex-row gap-1 items-center text-xs;
789+
@apply absolute right-3 px-2 h-5 justify-end shrink-0 ring-tint-subtle truncate text-tint duration-300 transition-all rounded straight-corners:rounded-none circular-corners:rounded-xl flex flex-row gap-1 items-center text-xs;
790790
}
791791

792792
.openapi-disclosure-trigger-label span {
@@ -848,7 +848,7 @@ body:has(.openapi-select-popover) {
848848
}
849849

850850
.openapi-tooltip {
851-
@apply flex items-center gap-1 bg-tint-base border border-tint-subtle text-tint-strong rounded-md straight-corners:rounded-none font-medium px-1.5 py-0.5 shadow-sm text-[13px];
851+
@apply flex items-center gap-1 bg-tint-base border border-tint-subtle text-tint-strong rounded-md straight-corners:rounded-none circular-corners:rounded-lg font-medium px-1.5 py-0.5 shadow-sm text-[13px];
852852
}
853853

854854
.openapi-tooltip svg {

‎packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,9 @@ export async function RecordCard(
5050
'w-[calc(100%+2px)]',
5151
'h-[calc(100%+2px)]',
5252
'inset-[-1px]',
53-
'rounded-[7px]',
53+
'rounded',
5454
'straight-corners:rounded-none',
55+
'circular-corners:rounded-xl',
5556
'overflow-hidden',
5657
'[&_.heading>div:first-child]:hidden',
5758
'[&_.heading>div]:text-[.8em]',
@@ -147,8 +148,10 @@ export async function RecordCard(
147148
'grid',
148149
'shadow-1xs',
149150
'shadow-tint-9/1',
150-
'rounded-md',
151+
'depth-flat:shadow-none',
152+
'rounded',
151153
'straight-corners:rounded-none',
154+
'circular-corners:rounded-xl',
152155
'dark:shadow-transparent',
153156

154157
'before:pointer-events-none',

‎packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
3838
className={tcls(
3939
tableWidth,
4040
styles.rowGroup,
41-
'straight-corners:rounded-none'
41+
'straight-corners:rounded-none',
42+
'circular-corners:rounded-xl'
4243
)}
4344
>
4445
<div role="row" className={tcls('flex', 'w-full')}>

‎packages/gitbook/src/components/PageAside/AsideSectionHighlight.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export function AsideSectionHighlight({
3030

3131
'rounded-md',
3232
'straight-corners:rounded-none',
33+
'circular-corners:rounded-2xl',
3334
'sidebar-list-line:rounded-l-none',
3435

3536
'sidebar-list-pill:bg-primary',

‎packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
8282

8383
'rounded-md',
8484
'straight-corners:rounded-none',
85+
'circular-corners:rounded-2xl',
8586
'sidebar-list-line:rounded-l-none',
8687

8788
'hover:bg-tint-hover',

‎packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {
2-
CustomizationCorners,
32
CustomizationHeaderPreset,
43
CustomizationIconsStyle,
54
CustomizationSidebarBackgroundStyle,
@@ -77,14 +76,13 @@ export async function CustomizationRootLayout(props: {
7776
customization.header.preset === CustomizationHeaderPreset.None
7877
? null
7978
: 'scroll-pt-[76px]', // Take the sticky header in consideration for the scrolling
80-
customization.styling.corners === CustomizationCorners.Straight
81-
? ' straight-corners'
82-
: '',
79+
customization.styling.corners && `${customization.styling.corners}-corners`,
8380
'theme' in customization.styling && `theme-${customization.styling.theme}`,
8481
tintColor ? ' tint' : 'no-tint',
8582
sidebarStyles.background && `sidebar-${sidebarStyles.background}`,
8683
sidebarStyles.list && `sidebar-list-${sidebarStyles.list}`,
8784
'links' in customization.styling && `links-${customization.styling.links}`,
85+
'depth' in customization.styling && `depth-${customization.styling.depth}`,
8886
fontNotoColorEmoji.variable,
8987
ibmPlexMono.variable,
9088
fontData.type === 'default' ? fontData.variable : 'font-custom',

‎packages/gitbook/src/components/Search/SearchAskAnswer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ function AnswerFollowupQuestions(props: { followupQuestions: string[] }) {
176176
'py-2',
177177
'rounded',
178178
'straight-corners:rounded-none',
179+
'circular-corners:rounded-full',
179180
'text-tint',
180181
'hover:bg-tint-hover',
181182
'focus-within:bg-tint-hover'

‎packages/gitbook/src/components/Search/SearchButton.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,21 +45,25 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
4545
'w-full',
4646
'py-2',
4747
'px-3',
48+
'circular-corners:px-4',
4849
'gap-2',
4950

5051
'bg-tint-base',
5152

5253
'ring-1',
5354
'ring-tint-12/2',
55+
'depth-flat:ring-tint-subtle',
5456

5557
'shadow-sm',
5658
'shadow-tint-12/3',
5759
'dark:shadow-none',
60+
'depth-flat:shadow-none',
5861

5962
'text-tint',
6063

6164
'rounded-lg',
6265
'straight-corners:rounded-sm',
66+
'circular-corners:rounded-full',
6367

6468
'contrast-more:ring-tint-12',
6569
'contrast-more:text-tint-strong',
@@ -68,10 +72,12 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
6872
'hover:bg-tint-subtle',
6973
'hover:shadow-md',
7074
'hover:scale-102',
75+
'depth-flat:hover:scale-100',
7176
'hover:ring-tint-hover',
7277
'hover:text-tint-strong',
7378
'focus:shadow-md',
7479
'focus:scale-102',
80+
'depth-flat:focus:scale-100',
7581
'focus:ring-tint-hover',
7682
'focus:text-tint-strong',
7783

0 commit comments

Comments
 (0)