hanzoai/docs
2
0
Fork 0
mirror of https://github.com/hanzo-docs/docs.git synced 2026-10-25 04:20:02 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UI: Enforce the use of --removed-body-scroll-bar-size to fixed elements

Browse Source
This commit is contained in:
Fuma Nama
2025-09-02 19:17:20 +08:00
parent f65778d801
commit efba995b05
11 changed files with 58 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/whole-lemons-say.md
+5
View File
@@ -0,0 +1,5 @@
---
'fumadocs-ui': patch
---
Enforce the use of `--removed-body-scroll-bar-size` to fixed elements
apps/docs/content/docs/ui/theme.mdx
+7 -1
View File
@@ -70,7 +70,7 @@ It comes with many themes out-of-the-box, you can pick one you prefer.
@import 'fumadocs-ui/css/preset.css';
```
<Tabs items={['neutral', 'black', 'vitepress', 'dusk', 'catppuccin', 'ocean', 'purple']}>
<Tabs items={['neutral', 'black', 'vitepress', 'dusk', 'catppuccin', 'ocean', 'purple', 'solar']}>
<Tab value='neutral'>
@@ -114,6 +114,12 @@ It comes with many themes out-of-the-box, you can pick one you prefer.
</Tab>
<Tab value='solar'>
![Solar](/themes/solar.png)
</Tab>
</Tabs>
The design system was inspired by [Shadcn UI](https://ui.shadcn.com), you can also customize the colors using CSS variables.
apps/docs/package.json
+5 -1
View File
@@ -71,6 +71,7 @@
"@types/react": "^19.1.12",
"@types/react-dom": "^19.1.9",
"algoliasearch": "5.36.0",
"browserslist-config-baseline": "^0.5.0",
"eslint-config-custom": "workspace:*",
"gray-matter": "^4.0.3",
"next-validate-link": "^1.5.2",
@@ -83,5 +84,8 @@
"ts-morph": "^26.0.0",
"tsconfig": "workspace:*",
"typescript": "^5.9.2"
}
},
"browserslist": [
"extends browserslist-config-baseline/2024"
]
}
apps/docs/public/themes/solar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 KiB

packages/ui/css/solar.css
+10 -7
View File
@@ -19,10 +19,7 @@
@variant md {
#nd-page article {
height: calc(
100svh - 32px - var(--fd-nav-height) - var(--fd-tocnav-height)
);
@apply bg-fd-article rounded-xl border shadow-xl overflow-auto fd-scroll-container;
@apply bg-fd-article rounded-xl border shadow-xl my-4;
}
#nd-tocnav,
@@ -31,15 +28,21 @@
}
.fd-default-layout #nd-page article {
@apply mx-4 my-auto;
@apply mx-4;
}
.fd-notebook-layout #nd-page article {
@apply mx-6 my-auto;
@apply mx-6;
}
}
#nd-sidebar {
@apply bg-fd-background;
}
#nd-sidebar[data-collapsed='false'] {
background-color: transparent;
border: none;
--color-fd-muted: inherit;
--color-fd-secondary: inherit;
--color-fd-muted-foreground: inherit;
}
packages/ui/src/components/layout/sidebar.tsx
+1 -4
View File
@@ -125,7 +125,7 @@ export function SidebarContent(props: ComponentProps<'aside'>) {
{...props}
data-collapsed={collapsed}
className={cn(
'fixed start-0 flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e max-md:hidden *:w-(--fd-sidebar-width)',
'fixed left-0 rtl:left-auto rtl:right-(--removed-body-scroll-bar-size,0) flex flex-col items-end top-(--fd-sidebar-top) bottom-(--fd-sidebar-margin) z-20 bg-fd-card text-sm border-e transition-[top,opacity,translate,width] max-md:hidden *:w-(--fd-sidebar-width)',
collapsed && [
'rounded-xl border translate-x-(--fd-sidebar-offset) rtl:-translate-x-(--fd-sidebar-offset)',
hover ? 'z-50 shadow-lg' : 'opacity-0',
@@ -134,9 +134,6 @@ export function SidebarContent(props: ComponentProps<'aside'>) {
)}
style={
{
transition: ['top', 'opacity', 'translate', 'width']
.map((v) => `${v} ease 250ms`)
.join(', '),
...props.style,
'--fd-sidebar-offset': hover
? 'calc(var(--spacing) * 2)'
packages/ui/src/layouts/docs/client.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export function Navbar(props: ComponentProps<'header'>) {
id="nd-subnav"
{...props}
className={cn(
'fixed top-(--fd-banner-height) inset-x-0 z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm',
'fixed top-(--fd-banner-height) left-0 right-(--removed-body-scroll-bar-size,0) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm',
!isTransparent && 'bg-fd-background/80',
props.className,
)}
packages/ui/src/layouts/docs/page-client.tsx
+8 -5
View File
@@ -197,7 +197,7 @@ export function PageTOCPopover(props: ComponentProps<'div'>) {
id="nd-tocnav"
{...props}
className={cn(
'fixed inset-x-0 z-10 border-b backdrop-blur-sm transition-colors xl:hidden max-xl:on-root:[--fd-tocnav-height:40px]',
'fixed pr-(--removed-body-scroll-bar-size,0) z-10 border-b backdrop-blur-sm transition-colors xl:hidden max-xl:on-root:[--fd-tocnav-height:40px]',
(!isTransparent || open) && 'bg-fd-background/80',
open && 'shadow-lg',
props.className,
@@ -208,6 +208,7 @@ export function PageTOCPopover(props: ComponentProps<'div'>) {
insetInlineStart: collapsed
? '0px'
: 'calc(var(--fd-sidebar-width) + var(--fd-layout-offset))',
insetInlineEnd: 0,
}}
>
{props.children}
@@ -392,18 +393,20 @@ export function PageBreadcrumb({
export function PageTOC(props: ComponentProps<'div'>) {
const { collapsed } = useSidebar();
const offset = collapsed ? '0px' : 'var(--fd-layout-offset)';
return (
<div
id="nd-toc"
{...props}
className={cn('fixed bottom-0 pb-2 pt-12 max-xl:hidden', props.className)}
className={cn(
'fixed bottom-0 pt-12 pb-2 pr-(--removed-body-scroll-bar-size,0) max-xl:hidden',
props.className,
)}
style={{
...props.style,
top: 'calc(var(--fd-banner-height) + var(--fd-nav-height))',
insetInlineEnd: collapsed
? 'max(0px, calc(50vw - var(--fd-sidebar-width)/2 - var(--fd-page-width)/2))'
: 'max(var(--fd-layout-offset), calc(50vw - var(--fd-sidebar-width)/2 - var(--fd-page-width)/2))',
insetInlineEnd: `max(${offset}, calc(50vw - var(--fd-sidebar-width)/2 - var(--fd-page-width)/2))`,
}}
>
<div className="flex h-full w-(--fd-toc-width) max-w-full flex-col pe-4">
packages/ui/src/layouts/home/navbar.tsx
+1 -4
View File
@@ -34,14 +34,11 @@ export function Navbar(props: ComponentProps<'div'>) {
id="nd-nav"
{...props}
className={cn(
'fixed top-(--fd-banner-height) z-40 left-0 backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container',
'fixed top-(--fd-banner-height) z-40 left-0 right-(--removed-body-scroll-bar-size,0) backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-fd-container',
value.length > 0 && 'max-lg:shadow-lg max-lg:rounded-b-2xl',
(!isTransparent || value.length > 0) && 'bg-fd-background/80',
props.className,
)}
style={{
right: 'var(--removed-body-scroll-bar-size, 0px)',
}}
>
<NavigationMenuList
className="flex h-14 w-full items-center px-4"
packages/ui/src/layouts/notebook/client.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export function Navbar({
id="nd-subnav"
{...props}
className={cn(
'fixed flex flex-col inset-x-0 top-(--fd-banner-height) z-10 px-(--fd-layout-offset) h-(--fd-nav-height) backdrop-blur-sm transition-colors',
'fixed flex flex-col top-(--fd-banner-height) left-0 right-(--removed-body-scroll-bar-size,0) z-10 px-(--fd-layout-offset) h-(--fd-nav-height) backdrop-blur-sm transition-colors',
(!isTransparent || open) && 'bg-fd-background/80',
mode === 'auto' &&
!collapsed &&
pnpm-lock.yaml
Generated
+19 -3
View File
@@ -231,6 +231,9 @@ importers:
algoliasearch:
specifier: 5.36.0
version: 5.36.0
browserslist-config-baseline:
specifier: ^0.5.0
version: 0.5.0
eslint-config-custom:
specifier: workspace:*
version: link:../../packages/eslint-config-custom
@@ -297,7 +300,7 @@ importers:
version: 0.2.2(@content-collections/[email protected]([email protected]))([email protected]([email protected]))([email protected])
'@content-collections/next':
specifier: ^0.2.7
version: 0.2.7(@content-collections/[email protected]([email protected]))([email protected](@babel/[email protected])(@opentelemetry/[email protected])([email protected])([email protected]([email protected]))([email protected]))
version: 0.2.7(@content-collections/[email protected]([email protected]))([email protected](@opentelemetry/[email protected])([email protected]([email protected]))([email protected]))
'@types/mdx':
specifier: ^2.0.13
version: 2.0.13
@@ -1286,7 +1289,7 @@ importers:
version: 0.2.2(@content-collections/[email protected]([email protected]))([email protected]([email protected]))([email protected])
'@content-collections/next':
specifier: ^0.2.7
version: 0.2.7(@content-collections/[email protected]([email protected]))([email protected](@babel/[email protected])(@opentelemetry/[email protected])([email protected])([email protected]([email protected]))([email protected]))
version: 0.2.7(@content-collections/[email protected]([email protected]))([email protected](@opentelemetry/[email protected])([email protected]([email protected]))([email protected]))
'@react-router/dev':
specifier: ^7.8.2
version: 7.8.2(@react-router/[email protected]([email protected]([email protected]([email protected]))([email protected]))([email protected]))(@types/[email protected])([email protected])([email protected])([email protected])([email protected]([email protected]))([email protected]([email protected]([email protected]))([email protected]))([email protected])([email protected])([email protected])([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected])([email protected]))([email protected])
@@ -5790,6 +5793,10 @@ packages:
[email protected]:
resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
[email protected]:
resolution: {integrity: sha512-uAiDCXRpHi+FQgPGyJcfQc8/l9Wbo4aRDQdijbcXVCgBpNSCcW2np66iAX6mRgKhnnhAKSII9KaN5BOvITCofg==}
hasBin: true
[email protected]:
resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
engines: {node: '>= 0.8'}
@@ -5848,6 +5855,9 @@ packages:
resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
engines: {node: '>=8'}
[email protected]:
resolution: {integrity: sha512-TBB58g6MkqLiN7JPqkNWImFBpiybPDyMN6QeU7/Vb5J10eAyNEPQLj0HpFsTZZ+xyeFpCIz2qNdg0/xnrq929Q==}
[email protected]:
resolution: {integrity: sha512-cDGv1kkDI4/0e5yON9yM5G/0A5u8sf5TnmdX5C9qHzI9PPu++sQ9zjm1k9NiOrf3riY4OkK0zSGqfvJyJsgCBQ==}
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -11856,7 +11866,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@content-collections/[email protected](@content-collections/[email protected]([email protected]))([email protected](@babel/[email protected])(@opentelemetry/[email protected])([email protected])([email protected]([email protected]))([email protected]))':
'@content-collections/[email protected](@content-collections/[email protected]([email protected]))([email protected](@opentelemetry/[email protected])([email protected]([email protected]))([email protected]))':
dependencies:
'@content-collections/core': 0.11.1([email protected])
'@content-collections/integrations': 0.3.0(@content-collections/[email protected]([email protected]))
@@ -15756,6 +15766,8 @@ snapshots:
[email protected]: {}
[email protected]: {}
[email protected]:
dependencies:
safe-buffer: 5.1.2
@@ -15846,6 +15858,10 @@ snapshots:
dependencies:
fill-range: 7.1.1
[email protected]:
dependencies:
baseline-browser-mapping: 2.7.2
[email protected]:
dependencies:
caniuse-lite: 1.0.30001737