mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-09-17 08:05:19 +00:00
review fix
This commit is contained in:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user