mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-10-03 20:20:35 +00:00
Update Checkbox component (#2511)
This commit is contained in:
Zeno Kapitein
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'gitbook': patch
|
||||
---
|
||||
|
||||
Update design of Checkbox to be more consistent and readable
|
||||
+10
-10
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
className={tcls(
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
'text-opacity-[1]',
|
||||
'text-primary-800',
|
||||
'grid-area-1-1',
|
||||
'z-[1]',
|
||||
'relative',
|
||||
'dark:text-primary-200',
|
||||
)}
|
||||
>
|
||||
{props.checked ? <Icon icon="check" className={'size-3'} /> : null}
|
||||
<CheckboxPrimitive.Indicator className={tcls('relative', 'text-current')}>
|
||||
{props.checked ? (
|
||||
<Icon icon="check" iconStyle={IconStyle.Solid} className={'size-3'} />
|
||||
) : null}
|
||||
</CheckboxPrimitive.Indicator>
|
||||
<div
|
||||
className={tcls(
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
'text-dark/4',
|
||||
'grid-area-1-1',
|
||||
'z-[0]',
|
||||
'relative',
|
||||
'dark:text-light/2',
|
||||
)}
|
||||
>
|
||||
{props.checked ? <Icon icon="check" className={'size-3'} /> : null}
|
||||
</div>
|
||||
</CheckboxPrimitive.Root>
|
||||
));
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
||||
|
||||
@@ -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'),
|
||||
|
||||
Reference in New Issue
Block a user