Skip to content

Commit 8d3c656

Browse files
conico974conico974
authored
Implement a StylesProvider (#3352)
Co-authored-by: Nicolas Dorseuil <[email protected]>
1 parent dae019c commit 8d3c656

File tree

12 files changed

+246
-173
lines changed

12 files changed

+246
-173
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { tcls } from '@/lib/tailwind';
77
import { type CustomizationAnnouncement, SiteInsightsLinkPosition } from '@gitbook/api';
88
import { Icon, type IconName } from '@gitbook/icons';
99
import { CONTAINER_STYLE } from '../layout';
10-
import { Link, linkStyles } from '../primitives';
10+
import { Link } from '../primitives';
11+
import { LinkStyles } from '../primitives/styles';
1112
import { ANNOUNCEMENT_CSS_CLASS, ANNOUNCEMENT_STORAGE_KEY } from './constants';
1213

1314
/**
@@ -58,7 +59,7 @@ export function AnnouncementBanner(props: {
5859
<div>
5960
{announcement.message}
6061
{hasLink ? (
61-
<div className={tcls(linkStyles, style.link, 'ml-1 inline')}>
62+
<div className={tcls(LinkStyles, style.link, 'ml-1 inline')}>
6263
{contentRef?.icon ? (
6364
<span className="mr-1 ml-2 *:inline">
6465
{contentRef?.icon}

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

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import {
77
import { LinkBox, LinkOverlay } from '@/components/primitives';
88
import { Image } from '@/components/utils';
99
import { resolveContentRef } from '@/lib/references';
10-
import { type ClassValue, tcls } from '@/lib/tailwind';
10+
import { tcls } from '@/lib/tailwind';
1111

1212
import { RecordColumnValue } from './RecordColumnValue';
1313
import type { TableRecordKV, TableViewProps } from './Table';
14+
import { RecordCardStyles } from './styles';
1415
import { getRecordValue } from './utils';
1516

1617
export async function RecordCard(
@@ -143,35 +144,12 @@ export async function RecordCard(
143144
</div>
144145
);
145146

146-
const style = [
147-
'group',
148-
'grid',
149-
'shadow-1xs',
150-
'shadow-tint-9/1',
151-
'depth-flat:shadow-none',
152-
'rounded',
153-
'straight-corners:rounded-none',
154-
'circular-corners:rounded-xl',
155-
'dark:shadow-transparent',
156-
157-
'before:pointer-events-none',
158-
'before:grid-area-1-1',
159-
'before:transition-shadow',
160-
'before:w-full',
161-
'before:h-full',
162-
'before:rounded-[inherit]',
163-
'before:ring-1',
164-
'before:ring-tint-12/2',
165-
'before:z-10',
166-
'before:relative',
167-
] as ClassValue;
168-
169147
if (target && targetRef) {
170148
return (
171149
// We don't use `Link` directly here because we could end up in a situation where
172150
// a link is rendered inside a link, which is not allowed in HTML.
173151
// It causes an hydration error in React.
174-
<LinkBox href={target.href} className={tcls(style, 'hover:before:ring-tint-12/5')}>
152+
<LinkBox href={target.href} classNames={['RecordCardStyles']}>
175153
<LinkOverlay
176154
href={target.href}
177155
insights={{
@@ -187,5 +165,5 @@ export async function RecordCard(
187165
);
188166
}
189167

190-
return <div className={tcls(style)}>{body}</div>;
168+
return <div className={tcls(RecordCardStyles)}>{body}</div>;
191169
}

‎packages/gitbook/src/components/DocumentView/Table/styles.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { ClassValue } from '@/lib/tailwind';
2+
3+
export const RecordCardStyles = [
4+
'group',
5+
'grid',
6+
'shadow-1xs',
7+
'shadow-tint-9/1',
8+
'depth-flat:shadow-none',
9+
'rounded',
10+
'straight-corners:rounded-none',
11+
'circular-corners:rounded-xl',
12+
'dark:shadow-transparent',
13+
14+
'before:pointer-events-none',
15+
'before:grid-area-1-1',
16+
'before:transition-shadow',
17+
'before:w-full',
18+
'before:h-full',
19+
'before:rounded-[inherit]',
20+
'before:ring-1',
21+
'before:ring-tint-12/2',
22+
'before:z-10',
23+
'before:relative',
24+
25+
'hover:before:ring-tint-12/5',
26+
] as ClassValue;

‎packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,7 @@ export async function PageLinkItem(props: { page: RevisionPageLink; context: Git
1717
<li className={tcls('flex', 'flex-col')}>
1818
<Link
1919
href={resolved?.href ?? '#'}
20-
className={tcls(
21-
'flex',
22-
'justify-start',
23-
'items-center',
24-
'gap-3',
25-
'p-1.5',
26-
'pl-3',
27-
'text-sm',
28-
'transition-colors',
29-
'duration-100',
30-
'text-tint-strong/7',
31-
'rounded-md',
32-
'straight-corners:rounded-none',
33-
'circular-corners:rounded-xl',
34-
'before:content-none',
35-
'font-normal',
36-
'hover:bg-tint',
37-
'hover:text-tint-strong'
38-
)}
20+
classNames={['PageLinkItemStyles']}
3921
insights={{
4022
type: 'link_click',
4123
link: {

‎packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx‎

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -66,42 +66,10 @@ function LinkItem(
6666
href={href}
6767
insights={insights}
6868
aria-current={isActive ? 'page' : undefined}
69-
className={tcls(
70-
'group/toclink toclink relative transition-colors',
71-
'flex flex-row justify-between',
72-
'circular-corners:rounded-2xl rounded-md straight-corners:rounded-none p-1.5 pl-3',
73-
'text-balance font-normal text-sm text-tint-strong/7 hover:bg-tint-hover hover:text-tint-strong contrast-more:text-tint-strong',
74-
'hover:contrast-more:text-tint-strong hover:contrast-more:ring-1 hover:contrast-more:ring-tint-12',
75-
'before:contents[] before:-left-px before:absolute before:inset-y-0',
76-
'sidebar-list-line:rounded-l-none sidebar-list-line:before:w-px sidebar-list-default:[&+div_a]:rounded-l-none [&+div_a]:pl-5 sidebar-list-default:[&+div_a]:before:w-px',
77-
78-
isActive && [
79-
'font-semibold',
80-
'sidebar-list-line:before:w-0.5',
81-
82-
'before:bg-primary-solid',
83-
'text-primary-subtle',
84-
'contrast-more:text-primary',
85-
86-
'sidebar-list-pill:bg-primary',
87-
'[html.sidebar-list-pill.theme-muted_&]:bg-primary-hover',
88-
'[html.sidebar-list-pill.theme-bold.tint_&]:bg-primary-hover',
89-
'[html.sidebar-filled.sidebar-list-pill.theme-muted_&]:bg-primary',
90-
'[html.sidebar-filled.sidebar-list-pill.theme-bold.tint_&]:bg-primary',
91-
92-
'hover:bg-primary-hover',
93-
'hover:text-primary',
94-
'hover:before:bg-primary-solid-hover',
95-
'sidebar-list-pill:hover:bg-primary-hover',
96-
97-
'contrast-more:text-primary',
98-
'contrast-more:hover:text-primary-strong',
99-
'contrast-more:bg-primary',
100-
'contrast-more:ring-1',
101-
'contrast-more:ring-primary',
102-
'contrast-more:hover:ring-primary-hover',
103-
]
104-
)}
69+
classNames={[
70+
'ToggleableLinkItemStyles',
71+
...(isActive ? ['ToggleableLinkItemActiveStyles' as const] : []),
72+
]}
10573
>
10674
{children}
10775
</Link>

‎packages/gitbook/src/components/TableOfContents/styles.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
export const PageLinkItemStyles = [
2+
'flex',
3+
'justify-start',
4+
'items-center',
5+
'gap-3',
6+
'p-1.5',
7+
'pl-3',
8+
'text-sm',
9+
'transition-colors',
10+
'duration-100',
11+
'text-tint-strong/7',
12+
'rounded-md',
13+
'straight-corners:rounded-none',
14+
'circular-corners:rounded-xl',
15+
'before:content-none',
16+
'font-normal',
17+
'hover:bg-tint',
18+
'hover:text-tint-strong',
19+
];
20+
21+
export const ToggleableLinkItemStyles = [
22+
'group/toclink toclink relative transition-colors',
23+
'flex flex-row justify-between',
24+
'circular-corners:rounded-2xl rounded-md straight-corners:rounded-none p-1.5 pl-3',
25+
'text-balance font-normal text-sm text-tint-strong/7 hover:bg-tint-hover hover:text-tint-strong contrast-more:text-tint-strong',
26+
'hover:contrast-more:text-tint-strong hover:contrast-more:ring-1 hover:contrast-more:ring-tint-12',
27+
'before:contents[] before:-left-px before:absolute before:inset-y-0',
28+
'sidebar-list-line:rounded-l-none sidebar-list-line:before:w-px sidebar-list-default:[&+div_a]:rounded-l-none [&+div_a]:pl-5 sidebar-list-default:[&+div_a]:before:w-px',
29+
];
30+
31+
export const ToggleableLinkItemActiveStyles = [
32+
'font-semibold',
33+
'sidebar-list-line:before:w-0.5',
34+
35+
'before:bg-primary-solid',
36+
'text-primary-subtle',
37+
'contrast-more:text-primary',
38+
39+
'sidebar-list-pill:bg-primary',
40+
'[html.sidebar-list-pill.theme-muted_&]:bg-primary-hover',
41+
'[html.sidebar-list-pill.theme-bold.tint_&]:bg-primary-hover',
42+
'[html.sidebar-filled.sidebar-list-pill.theme-muted_&]:bg-primary',
43+
'[html.sidebar-filled.sidebar-list-pill.theme-bold.tint_&]:bg-primary',
44+
45+
'hover:bg-primary-hover',
46+
'hover:text-primary',
47+
'hover:before:bg-primary-solid-hover',
48+
'sidebar-list-pill:hover:bg-primary-hover',
49+
50+
'contrast-more:text-primary',
51+
'contrast-more:hover:text-primary-strong',
52+
'contrast-more:bg-primary',
53+
'contrast-more:ring-1',
54+
'contrast-more:ring-primary',
55+
'contrast-more:hover:ring-primary-hover',
56+
];

‎packages/gitbook/src/components/primitives/Button.tsx‎

Lines changed: 11 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { type ClassValue, tcls } from '@/lib/tailwind';
66

77
import { Icon, type IconName } from '@gitbook/icons';
88
import { Link, type LinkInsightsProps } from './Link';
9+
import { useClassnames } from './StyleProvider';
910

1011
type ButtonProps = {
1112
href?: string;
@@ -18,7 +19,7 @@ type ButtonProps = {
1819
} & LinkInsightsProps &
1920
HTMLAttributes<HTMLElement>;
2021

21-
const variantClasses = {
22+
export const variantClasses = {
2223
primary: [
2324
'bg-primary-solid',
2425
'text-contrast-primary-solid',
@@ -69,49 +70,15 @@ export function Button({
6970

7071
const sizeClasses = sizes[size] || sizes.default;
7172

72-
const domClassName = tcls(
73-
'button',
74-
'inline-flex',
75-
'items-center',
76-
'gap-2',
77-
'rounded-md',
78-
'straight-corners:rounded-none',
79-
'circular-corners:rounded-full',
80-
// 'place-self-start',
81-
82-
'ring-1',
83-
'ring-tint',
84-
'hover:ring-tint-hover',
85-
86-
'shadow-sm',
87-
'shadow-tint',
88-
'dark:shadow-tint-1',
89-
'hover:shadow-md',
90-
'active:shadow-none',
91-
'depth-flat:shadow-none',
92-
93-
'contrast-more:ring-tint-12',
94-
'contrast-more:hover:ring-2',
95-
'contrast-more:hover:ring-tint-12',
96-
97-
'hover:scale-104',
98-
'depth-flat:hover:scale-100',
99-
'active:scale-100',
100-
'transition-all',
101-
102-
'grow-0',
103-
'shrink-0',
104-
'truncate',
105-
variantClasses[variant],
106-
sizeClasses,
107-
className
108-
);
73+
const domClassName = tcls(variantClasses[variant], sizeClasses, className);
74+
const buttonOnlyClassNames = useClassnames(['ButtonStyles']);
10975

11076
if (href) {
11177
return (
11278
<Link
11379
href={href}
11480
className={domClassName}
81+
classNames={['ButtonStyles']}
11582
insights={insights}
11683
aria-label={label}
11784
target={target}
@@ -124,7 +91,12 @@ export function Button({
12491
}
12592

12693
return (
127-
<button type="button" className={domClassName} aria-label={label} {...rest}>
94+
<button
95+
type="button"
96+
className={tcls(domClassName, buttonOnlyClassNames)}
97+
aria-label={label}
98+
{...rest}
99+
>
128100
{icon ? <Icon icon={icon} className={tcls('size-[1em]')} /> : null}
129101
{iconOnly ? null : label}
130102
</button>

‎packages/gitbook/src/components/primitives/Card.tsx‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,7 @@ export async function Card(
1717
const { title, leadingIcon, href, preTitle, postTitle, style, insights } = props;
1818

1919
return (
20-
<Link
21-
href={href}
22-
className={tcls(
23-
'group',
24-
'flex',
25-
'flex-row',
26-
'justify-between',
27-
'items-center',
28-
'gap-4',
29-
'ring-1',
30-
'ring-tint-subtle',
31-
'rounded',
32-
'straight-corners:rounded-none',
33-
'circular-corners:rounded-2xl',
34-
'px-5',
35-
'py-3',
36-
'transition-shadow',
37-
'hover:ring-primary-hover',
38-
style
39-
)}
40-
insights={insights}
41-
>
20+
<Link href={href} className={tcls(style)} classNames={['CardStyles']} insights={insights}>
4221
{leadingIcon}
4322
<span className={tcls('flex', 'flex-col', 'flex-1')}>
4423
{preTitle ? (

0 commit comments

Comments
 (0)