review fix

This commit is contained in:
Nicolas Dorseuil
2025-06-17 23:19:09 +02:00
parent a3ddf7d575
commit 8a3fdcfd3c
10 changed files with 70 additions and 49 deletions
+1 -1
View File
@@ -25,7 +25,7 @@
},
"scripts": {
"generate": "rm -rf ./public && cp -r ../gitbook/public ./public",
"dev:v2": "env-cmd --silent -f ../../.env.local next --turbopack",
"dev:v2": "env-cmd --silent -f ../../.env.local next",
"build": "next build",
"build:v2": "next build",
"start": "next start",
@@ -9,7 +9,7 @@ import type { GitBookSiteContext } from '@v2/lib/context';
import { PageIcon } from '../PageIcon';
import { StyledLink } from '../primitives';
import style from './pageBody.module.css';
import styles from './pageBody.module.css';
export async function PageHeader(props: {
context: GitBookSiteContext;
@@ -42,7 +42,7 @@ export async function PageHeader(props: {
return (
<Fragment key={breadcrumb.id}>
<li key={breadcrumb.id}>
<StyledLink href={href} className={style.headerLink}>
<StyledLink href={href} className={styles.headerLink}>
<PageIcon
page={breadcrumb}
style="flex size-4 items-center justify-center text-base leading-none"
@@ -151,18 +151,6 @@
z-index: 20;
}
}
.styled-link {
@apply underline decoration-[max(0.07em,1px)] underline-offset-2 links-accent:underline-offset-4 links-default:decoration-primary/6 links-default:text-primary-subtle links-default:hover:text-primary-strong links-default:contrast-more:text-primary links-default:contrast-more:hover:text-primary-strong links-accent:decoration-primary-subtle links-accent:hover:decoration-[3px] links-accent:hover:[text-decoration-skip-ink:none] transition-all duration-100;
}
.styled-card {
@apply flex flex-row justify-between items-center gap-4 ring-1 ring-tint-subtle rounded straight-corners:rounded-none circular-corners:rounded-2xl px-5 py-3 transition-shadow hover:ring-primary-hover;
}
.styled-button {
@apply inline-flex items-center gap-2 rounded-md straight-corners:rounded-none circular-corners:rounded-full ring-1 ring-tint hover:ring-tint-hover shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none depth-flat:shadow-none contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12 hover:scale-104 depth-flat:hover:scale-100 active:scale-100 transition-all grow-0 shrink-0 truncate;
}
}
html {
@@ -8,7 +8,7 @@ import { tcls } from '@/lib/tailwind';
import { TOCPageIcon } from './TOCPageIcon';
import style from './toc.module.css';
import styles from './toc.module.css';
export async function PageLinkItem(props: { page: RevisionPageLink; context: GitBookSiteContext }) {
const { page, context } = props;
@@ -19,7 +19,7 @@ export async function PageLinkItem(props: { page: RevisionPageLink; context: Git
<li className={tcls('flex', 'flex-col')}>
<Link
href={resolved?.href ?? '#'}
className={style.pageLinkItem}
className={styles.pageLinkItem}
insights={{
type: 'link_click',
link: {
@@ -7,6 +7,8 @@ import { type ClassValue, tcls } from '@/lib/tailwind';
import { Icon, type IconName } from '@gitbook/icons';
import { Link, type LinkInsightsProps } from './Link';
import styles from './button.module.css';
type ButtonProps = {
href?: string;
variant?: 'primary' | 'secondary' | 'blank';
@@ -19,33 +21,14 @@ type ButtonProps = {
HTMLAttributes<HTMLElement>;
const variantClasses = {
primary: [
'bg-primary-solid',
'text-contrast-primary-solid',
'hover:bg-primary-solid-hover',
'hover:text-contrast-primary-solid-hover',
'ring-0',
'contrast-more:ring-1',
],
blank: [
'bg-transparent',
'text-tint',
'ring-0',
'shadow-none',
'hover:bg-primary-hover',
'hover:text-primary',
'hover:scale-1',
'hover:shadow-none',
'contrast-more:bg-tint-subtle',
],
primary: [styles.primary],
blank: [styles.blank, 'hover:scale-1'],
secondary: [
'bg-tint',
'depth-flat:bg-transparent',
'text-tint',
'hover:bg-tint-hover',
'depth-flat:hover:bg-tint-hover',
'hover:text-primary',
'contrast-more:bg-tint-subtle',
styles.secondary,
'bg-secondary-solid',
'text-contrast-secondary-solid',
'hover:bg-secondary-solid-hover',
'hover:text-contrast-secondary-solid-hover',
],
};
@@ -62,14 +45,14 @@ export function Button({
...rest
}: ButtonProps & { target?: HTMLAttributeAnchorTarget }) {
const sizes = {
default: ['text-base', 'font-semibold', 'px-5', 'py-2', 'circular-corners:px-6'],
medium: ['text-sm', 'px-3.5', 'py-1.5', 'circular-corners:px-4'],
small: ['text-xs', 'py-2', iconOnly ? 'px-2' : 'px-3'],
default: [styles.default],
medium: [styles.medium],
small: [styles.small, iconOnly ? 'px-2' : 'px-3'],
};
const sizeClasses = sizes[size] || sizes.default;
const domClassName = tcls('styled-button', variantClasses[variant], sizeClasses, className);
const domClassName = tcls(styles.styledButton, variantClasses[variant], sizeClasses, className);
if (href) {
return (
@@ -4,6 +4,8 @@ import { type ClassValue, tcls } from '@/lib/tailwind';
import { Link, type LinkInsightsProps } from './Link';
import styles from './card.module.css';
export async function Card(
props: {
href: string;
@@ -17,7 +19,7 @@ export async function Card(
const { title, leadingIcon, href, preTitle, postTitle, style, insights } = props;
return (
<Link href={href} className={tcls('group', 'styled-card', style)} insights={insights}>
<Link href={href} className={tcls('group', styles.styledCard, style)} insights={insights}>
{leadingIcon}
<span className={tcls('flex', 'flex-col', 'flex-1')}>
{preTitle ? (
@@ -2,6 +2,8 @@ import { type ClassValue, tcls } from '@/lib/tailwind';
import { Link, type LinkProps } from '../primitives/Link';
import styles from './styledLink.module.css';
export const linkStyles = [
'underline',
'decoration-[max(0.07em,1px)]', // Set the underline to be proportional to the font size, with a minimum. The default is too thin.
@@ -29,7 +31,7 @@ export function StyledLink(props: Omit<LinkProps, 'style'> & { className?: Class
const { className, ...rest } = props;
return (
<Link {...rest} className={tcls('styled-link', className)}>
<Link {...rest} className={tcls(styles.styledLink, className)}>
{props.children}
</Link>
);
@@ -0,0 +1,40 @@
.styledButton {
@apply inline-flex items-center gap-2 rounded-md straight-corners:rounded-none circular-corners:rounded-full ring-1 ring-tint hover:ring-tint-hover shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none depth-flat:shadow-none contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12 hover:scale-104 depth-flat:hover:scale-100 active:scale-100 transition-all grow-0 shrink-0 truncate;
}
.primary {
@apply bg-primary-solid
text-contrast-primary-solid
hover:bg-primary-solid-hover
hover:text-contrast-primary-solid-hover
ring-0
contrast-more:ring-1;
}
.blank {
@apply bg-transparent
text-tint
ring-0
shadow-none
hover:bg-primary-hover
hover:text-primary
hover:shadow-none
contrast-more:bg-tint-subtle;
}
.secondary {
@apply ring-0
contrast-more:ring-1;
}
.default {
@apply text-base font-semibold px-5 py-2 circular-corners:px-6;
}
.medium {
@apply text-sm px-3.5 py-1.5 circular-corners:px-4;
}
.small {
@apply text-xs py-2;
}
@@ -0,0 +1,3 @@
.styledCard {
@apply flex flex-row justify-between items-center gap-4 ring-1 ring-tint-subtle rounded straight-corners:rounded-none circular-corners:rounded-2xl px-5 py-3 transition-shadow hover:ring-primary-hover;
}
@@ -0,0 +1,3 @@
.styledLink {
@apply underline decoration-[max(0.07em,1px)] underline-offset-2 links-accent:underline-offset-4 links-default:decoration-primary/6 links-default:text-primary-subtle links-default:hover:text-primary-strong links-default:contrast-more:text-primary links-default:contrast-more:hover:text-primary-strong links-accent:decoration-primary-subtle links-accent:hover:decoration-[3px] links-accent:hover:[text-decoration-skip-ink:none] transition-all duration-100;
}