mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-09-24 11:26:31 +00:00
Add support for straight corners (#131)
* Add class to body and tailwind variant * Use it on the search button * Use it for buttons and cookies banner * Use it for cards * Use it in more places * Lint * More * page feedback * theme toggler
This commit is contained in:
Samy Pessé
@@ -1,4 +1,8 @@
|
||||
import { CustomizationHeaderPreset, CustomizationSettings } from '@gitbook/api';
|
||||
import {
|
||||
CustomizationCorners,
|
||||
CustomizationHeaderPreset,
|
||||
CustomizationSettings,
|
||||
} from '@gitbook/api';
|
||||
import assertNever from 'assert-never';
|
||||
import colors from 'tailwindcss/colors';
|
||||
|
||||
@@ -81,12 +85,17 @@ export default async function SpaceRootLayout(props: {
|
||||
`}</style>
|
||||
</head>
|
||||
<body
|
||||
className={tcls(
|
||||
`${fonts[customization.styling.font].className}`,
|
||||
`${ibmPlexMono.variable}`,
|
||||
'bg-light',
|
||||
'dark:bg-dark',
|
||||
)}
|
||||
className={
|
||||
tcls(
|
||||
`${fonts[customization.styling.font].className}`,
|
||||
`${ibmPlexMono.variable}`,
|
||||
'bg-light',
|
||||
'dark:bg-dark',
|
||||
) +
|
||||
(customization.styling.corners === CustomizationCorners.Straight
|
||||
? ' straight-corners'
|
||||
: '')
|
||||
}
|
||||
>
|
||||
<ClientContexts
|
||||
nonce={nonce}
|
||||
|
||||
@@ -45,6 +45,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
|
||||
'z-10',
|
||||
'bg-white',
|
||||
'rounded',
|
||||
'straight-corners:rounded-none',
|
||||
'ring-1',
|
||||
'ring-dark/2',
|
||||
'shadow-1xs',
|
||||
|
||||
@@ -32,12 +32,14 @@ export function Caption(
|
||||
'relative',
|
||||
'overflow-hidden',
|
||||
'rounded',
|
||||
'straight-corners:rounded-none',
|
||||
'after:block',
|
||||
'after:absolute',
|
||||
'after:-inset-[0]',
|
||||
'after:border-dark/2',
|
||||
'after:border',
|
||||
'after:rounded',
|
||||
'straight-corners:after:rounded-none',
|
||||
'dark:after:border-light/1',
|
||||
'dark:after:mix-blend-plus-lighter',
|
||||
'after:pointer-events-none',
|
||||
|
||||
@@ -20,6 +20,7 @@ export function Hint(props: BlockProps<DocumentBlockHint>) {
|
||||
'py-4',
|
||||
'transition-colors',
|
||||
'rounded-md',
|
||||
'straight-corners:rounded-none',
|
||||
hintStyle.style,
|
||||
style,
|
||||
)}
|
||||
|
||||
@@ -41,6 +41,7 @@ export async function RecordCard(
|
||||
'h-[calc(100%+2px)]',
|
||||
'inset-[-1px]',
|
||||
'rounded-[7px]',
|
||||
'straight-corners:rounded-none',
|
||||
'overflow-hidden',
|
||||
'dark:bg-dark',
|
||||
)}
|
||||
@@ -97,6 +98,7 @@ export async function RecordCard(
|
||||
'shadow-1xs',
|
||||
'shadow-dark/[0.02]',
|
||||
'rounded-md',
|
||||
'straight-corners:rounded-none',
|
||||
'hover:before:ring-dark/4',
|
||||
'dark:shadow-transparent',
|
||||
'dark:hover:before:ring-light/4',
|
||||
|
||||
@@ -55,6 +55,7 @@ export function Dropdown<E extends HTMLElement>(props: {
|
||||
'max-h-56',
|
||||
'bg-light',
|
||||
'rounded-lg',
|
||||
'straight-corners:rounded-sm',
|
||||
'p-2',
|
||||
'shadow-1xs',
|
||||
'overflow-auto',
|
||||
@@ -121,6 +122,7 @@ export function DropdownMenuItem(props: {
|
||||
'px-3',
|
||||
'py-1',
|
||||
'rounded',
|
||||
'straight-corners:rounded-sm',
|
||||
active
|
||||
? ['bg-primary/3', 'dark:bg-light/2', 'text-primary-600']
|
||||
: ['hover:bg-dark/2', 'dark:hover:bg-light/2'],
|
||||
|
||||
@@ -62,6 +62,7 @@ export function HeaderLogo(props: HeaderLogoProps) {
|
||||
'lg:max-w-[12rem]',
|
||||
'max-h-[3rem]',
|
||||
'rounded',
|
||||
'straight-corners:rounded-sm',
|
||||
'overflow-hidden',
|
||||
'object-contain',
|
||||
'object-left',
|
||||
|
||||
@@ -59,6 +59,7 @@ export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLB
|
||||
'w-7',
|
||||
'h-7',
|
||||
'rounded',
|
||||
'straight-corners:rounded-sm',
|
||||
'text-inherit',
|
||||
'hover:bg-dark/3',
|
||||
'p-[0.25rem]',
|
||||
|
||||
@@ -82,6 +82,7 @@ function NavigationCard(props: {
|
||||
'border',
|
||||
'border-dark/3',
|
||||
'rounded',
|
||||
'straight-corners:rounded-none',
|
||||
'hover:border-primary/6',
|
||||
'dark:border-light/2',
|
||||
'textwrap-pretty',
|
||||
|
||||
@@ -50,6 +50,7 @@ export function PageFeedbackForm(props: {
|
||||
'justify-center',
|
||||
'flex-row',
|
||||
'rounded-full',
|
||||
'straight-corners:rounded-sm',
|
||||
'ring-1',
|
||||
'ring-inset',
|
||||
'ring-dark/2',
|
||||
@@ -67,6 +68,8 @@ export function PageFeedbackForm(props: {
|
||||
'inline-flex',
|
||||
'[&>*:last-child]:rounded-r-full',
|
||||
'[&>*:first-child]:rounded-l-full',
|
||||
'straight-corners:[&>*:last-child]:rounded-none',
|
||||
'straight-corners:[&>*:first-child]:rounded-none',
|
||||
)}
|
||||
>
|
||||
<RatingButton
|
||||
|
||||
@@ -42,6 +42,7 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
|
||||
'min-h-[2.5rem]',
|
||||
'w-[2.5rem]',
|
||||
'rounded-lg',
|
||||
'straight-corners:rounded-none',
|
||||
'bg-dark/2',
|
||||
'transition-colors',
|
||||
'transition-opacity',
|
||||
|
||||
@@ -30,6 +30,7 @@ export async function PageLinkItem(props: { page: RevisionPageLink; context: Con
|
||||
'duration-100',
|
||||
'text-dark/8',
|
||||
'rounded-md',
|
||||
'straight-corners:rounded-none',
|
||||
'dark:text-light/7',
|
||||
'font-normal',
|
||||
'hover:bg-dark/1',
|
||||
|
||||
@@ -106,6 +106,7 @@ export function ToggleableLinkItem(props: {
|
||||
'before:top-0',
|
||||
'before:h-full',
|
||||
'rounded-md',
|
||||
'straight-corners:rounded-none',
|
||||
'[&+div_a]:rounded-l-none',
|
||||
isActive
|
||||
? [
|
||||
@@ -138,6 +139,7 @@ export function ToggleableLinkItem(props: {
|
||||
'group',
|
||||
'relative',
|
||||
'rounded-full',
|
||||
'straight-corners:rounded-sm',
|
||||
'w-5',
|
||||
'h-5',
|
||||
'after:grid-area-1-1',
|
||||
|
||||
@@ -81,6 +81,7 @@ export function TrademarkLink(props: { space: Space; customization: Customizatio
|
||||
'px-4',
|
||||
'py-2',
|
||||
'rounded-md',
|
||||
'straight-corners:rounded-none',
|
||||
'hover:backdrop-blur-sm',
|
||||
'lg:ring-0',
|
||||
'tracking-[-0.016em]',
|
||||
|
||||
@@ -36,6 +36,7 @@ export function ThemeToggler(props: {}) {
|
||||
'flex',
|
||||
'flex-row',
|
||||
'rounded-full',
|
||||
'straight-corners:rounded-sm',
|
||||
'border',
|
||||
'border-dark/3',
|
||||
'dark:border-light/2',
|
||||
@@ -82,6 +83,7 @@ function ThemeButton(props: {
|
||||
'm-1',
|
||||
'group',
|
||||
'rounded-full',
|
||||
'straight-corners:rounded-sm',
|
||||
active ? ['bg-primary-600/4', 'dark:bg-primary-400/2'] : null,
|
||||
'text-dark',
|
||||
'dark:text-light/7',
|
||||
|
||||
@@ -52,6 +52,7 @@ export function Button({
|
||||
|
||||
const domClassName = tcls(
|
||||
'rounded-md',
|
||||
'straight-corners:rounded-none',
|
||||
'place-self-start',
|
||||
'ring-1',
|
||||
'ring-inset',
|
||||
|
||||
@@ -26,6 +26,7 @@ export async function Card(props: {
|
||||
'ring-1',
|
||||
'ring-dark/3',
|
||||
'rounded',
|
||||
'straight-corners:rounded-none',
|
||||
'px-5',
|
||||
'py-3',
|
||||
'transition-shadow',
|
||||
|
||||
@@ -184,6 +184,11 @@ const config: Config = {
|
||||
*/
|
||||
addVariant('space-header', 'body:has(header) &');
|
||||
|
||||
/**
|
||||
* Variant when the space is configured with straight corners.
|
||||
*/
|
||||
addVariant('straight-corners', 'body.straight-corners &');
|
||||
|
||||
/**
|
||||
* Variant when the page contains a block that will be rendered in full-width mode.
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user