diff --git a/.changeset/rare-plants-listen.md b/.changeset/rare-plants-listen.md new file mode 100644 index 000000000..e42d8cbb7 --- /dev/null +++ b/.changeset/rare-plants-listen.md @@ -0,0 +1,5 @@ +--- +'gitbook': patch +--- + +Update design of Checkbox to be more consistent and readable diff --git a/bun.lockb b/bun.lockb index 2cb95c835..492a27c29 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 3bc9be7c4..69159d40c 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,16 @@ { "name": "gitbook", "version": "0.1.0", - "private": true, + "devDependencies": { + "@changesets/cli": "^2.27.7", + "prettier": "^3.0.3", + "turbo": "^2.1.2" + }, "packageManager": "bun@1.1.18", + "patchedDependencies": { + "@vercel/next@4.3.6": "patches/@vercel%2Fnext@4.3.6.patch" + }, + "private": true, "scripts": { "dev": "turbo run dev", "build": "turbo run build", @@ -22,13 +30,5 @@ }, "workspaces": [ "packages/*" - ], - "devDependencies": { - "@changesets/cli": "^2.27.7", - "prettier": "^3.0.3", - "turbo": "^2.1.2" - }, - "patchedDependencies": { - "@vercel/next@4.3.6": "patches/@vercel%2Fnext@4.3.6.patch" - } + ] } diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json index d9f867570..22de90e73 100644 --- a/packages/gitbook/package.json +++ b/packages/gitbook/package.json @@ -17,12 +17,12 @@ }, "dependencies": { "@gitbook/api": "0.60.0", + "@gitbook/cache-do": "workspace:*", + "@gitbook/emoji-codepoints": "workspace:*", "@gitbook/icons": "workspace:*", + "@gitbook/react-contentkit": "workspace:*", "@gitbook/react-math": "workspace:*", "@gitbook/react-openapi": "workspace:*", - "@gitbook/react-contentkit": "workspace:*", - "@gitbook/emoji-codepoints": "workspace:*", - "@gitbook/cache-do": "workspace:*", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-popover": "^1.0.7", "@sentry/nextjs": "^7.94.1", @@ -48,6 +48,7 @@ "openapi-types": "^12.1.3", "p-map": "^7.0.0", "parse-cache-control": "^1.0.1", + "postcss-color-contrast": "^1.1.0", "react": "^18", "react-dom": "^18", "react-hotkeys-hook": "^4.4.1", diff --git a/packages/gitbook/src/app/(space)/layout.tsx b/packages/gitbook/src/app/(space)/layout.tsx index ee5433d8e..49abe014e 100644 --- a/packages/gitbook/src/app/(space)/layout.tsx +++ b/packages/gitbook/src/app/(space)/layout.tsx @@ -8,6 +8,7 @@ import { } from '@gitbook/api'; import { IconsProvider, IconStyle } from '@gitbook/icons'; import assertNever from 'assert-never'; +import colorContrast from 'postcss-color-contrast/js'; import colors from 'tailwindcss/colors'; import { emojiFontClassName } from '@/components/primitives'; @@ -73,6 +74,21 @@ export default async function SpaceRootLayout(props: { children: React.ReactNode 'primary-color', customization.styling.primaryColor.light, )} + ${ + // Generate the right contrast color for each shade of primary-color + generateColorVariable( + 'contrast-primary', + Object.fromEntries( + Object.entries( + shadesOfColor(customization.styling.primaryColor.light), + ).map(([index, color]) => [ + index, + colorContrast(color, ['#000', '#fff']), + ]), + ), + ) + } + ${generateColorVariable( 'primary-base', customization.styling.primaryColor.light, @@ -92,6 +108,20 @@ export default async function SpaceRootLayout(props: { children: React.ReactNode 'primary-base', customization.styling.primaryColor.dark, )} + ${ + // Generate the right contrast color for each shade of primary-color + generateColorVariable( + 'contrast-primary', + Object.fromEntries( + Object.entries( + shadesOfColor(customization.styling.primaryColor.dark), + ).map(([index, color]) => [ + index, + colorContrast(color, ['#000', '#fff']), + ]), + ), + ) + } ${generateColorVariable( 'header-background', headerTheme.backgroundColor.dark, diff --git a/packages/gitbook/src/components/primitives/Checkbox.tsx b/packages/gitbook/src/components/primitives/Checkbox.tsx index 23c0b1ba9..fcd60d5c8 100644 --- a/packages/gitbook/src/components/primitives/Checkbox.tsx +++ b/packages/gitbook/src/components/primitives/Checkbox.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Icon } from '@gitbook/icons'; +import { Icon, IconStyle } from '@gitbook/icons'; import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; import React from 'react'; @@ -14,54 +14,33 @@ export const Checkbox = React.forwardRef< ref={ref} className={tcls( 'peer', - 'h-4', - 'w-4', + 'h-5', + 'w-5', 'shrink-0', 'rounded-sm', + 'straight-corners:rounded-none', 'ring-1', - 'bg-primary-300/1', 'ring-dark/3', 'ring-inset', - 'grid', - 'place-items-center', - 'data-[state=checked]:bg-primary-300/6', - '[&>*:has(svg)]:absolute', - 'dark:bg-primary-100/[0.02]', + 'flex', + 'items-center', + 'justify-center', + 'data-[state=checked]:bg-primary-500', + 'data-[state=checked]:text-contrast-primary-500', + 'contrast-more:data-[state=checked]:bg-primary-600', + 'contrast-more:ring-dark', 'dark:ring-light/3', - 'dark:data-[state=checked]:bg-primary-300/4', + 'dark:contrast-more:ring-light/6', + 'dark:data-[state=checked]:bg-primary-500', className, )} {...props} > - - {props.checked ? : null} + + {props.checked ? ( + + ) : null} -
- {props.checked ? : null} -
)); Checkbox.displayName = CheckboxPrimitive.Root.displayName; diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts index 67aff8417..1c113f730 100644 --- a/packages/gitbook/tailwind.config.ts +++ b/packages/gitbook/tailwind.config.ts @@ -70,6 +70,7 @@ const config: Config = { /** primary-color used to accent elements, these colors remain unchanged when toggling between the CustomizationBackground options**/ primary: generateVarShades('primary-color'), + 'contrast-primary': generateVarShades('contrast-primary'), /** primary-base is an internal color that generates the same colors as primary-color. But it's shades will change into a grayscale if CustomizationBackground.Plain is selected. (globals.css) **/ primarybase: generateVarShades('primary-base'),