diff --git a/docs/src/app/(docs)/layout.css b/docs/src/app/(docs)/layout.css index 2f4f615366c..30a69b2c7b8 100644 --- a/docs/src/app/(docs)/layout.css +++ b/docs/src/app/(docs)/layout.css @@ -6,43 +6,45 @@ position: relative; /* iOS 26 `position: absolute` backdrops */ min-width: 320px; line-height: 1.5; - /* It's also the iOS footer overscroll background */ - background-color: var(--color-background); color: var(--color-foreground); + background-color: var(--color-content); } } @layer components { .RootLayout { + --content-layout-gap: 2.5rem; + --content-layout-max-width: 48rem; + --root-layout-padding-inline: 1.5rem; + z-index: 0; position: relative; + padding-inline: var(--root-layout-padding-inline); - --root-layout-padding-x: 0rem; - padding-inline: var(--root-layout-padding-x); + @media (--md) { + --content-layout-gap: 3rem; + --root-layout-padding-inline: 3rem; + } @media (--show-side-nav) { - --root-layout-padding-x: 3rem; - - &::before, - &::after { - content: ''; - position: absolute; - background-color: var(--color-gridline); - height: 1px; - right: 0; - left: 0; - } - - &::before { - top: var(--header-height); - margin-top: -1px; - } - - &::after { - bottom: var(--header-height); - margin-bottom: -1px; - z-index: 1; - } + --content-layout-max-width: 92.5rem; + --content-layout-width: min( + var(--content-layout-max-width), + calc(100% - var(--root-layout-padding-inline) - var(--root-layout-padding-inline)) + ); + --content-layout-inline-offset: calc((100% - var(--content-layout-width)) / 2); + --content-layout-column-width: calc( + ( + var(--content-layout-width) - var(--content-layout-gap) - var(--content-layout-gap) - + var(--content-layout-gap) - var(--content-layout-gap) - var(--content-layout-gap) - + var(--content-layout-gap) - var(--content-layout-gap) + ) / + 8 + ); + --content-layout-sidebar-width: calc( + var(--content-layout-column-width) + var(--content-layout-column-width) + + var(--content-layout-gap) + ); } } @@ -52,31 +54,11 @@ flex-direction: column; margin-inline: auto; min-height: 100dvh; - max-width: calc(var(--breakpoint-max-layout-width) - var(--root-layout-padding-x) * 2); + max-width: var(--content-layout-max-width); @media (--show-side-nav) { padding-block: var(--header-height); padding-bottom: 0; - - &::before, - &::after { - content: ''; - position: absolute; - top: 0; - bottom: 0; - width: 1px; - background-color: var(--color-gridline); - } - - &::before { - left: 0; - margin-left: -1px; - } - - &::after { - right: 0; - margin-right: -1px; - } } } @@ -84,49 +66,24 @@ display: flex; flex-grow: 1; flex-direction: column; - background-color: var(--color-content); - } - - .RootLayoutFooter { - @media (--lg) { - background-color: var(--color-background); - width: 100%; - height: var(--header-height); - position: absolute; - z-index: 1; - left: 0; - right: 0; - bottom: 0; - } } .ContentLayoutRoot { - --sidebar-width: 17.5rem; - display: grid; align-items: start; + gap: var(--content-layout-gap); padding-top: var(--header-height); - padding-inline: 1.5rem; - grid-template-columns: 1fr; - - @media (--sm) { - padding-inline: 2.5rem; - } + grid-template-columns: repeat(8, minmax(0, 1fr)); @media (--show-side-nav) { padding-top: 0; - padding-inline: 0; - grid-template-columns: var(--sidebar-width) 1fr 3rem; - } - - @media (--show-quick-nav) { - grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width); } } .ContentLayoutMain { + grid-column: 1 / -1; + grid-row: 1; min-width: 0; - max-width: 48rem; width: 100%; margin: 0 auto; @@ -134,9 +91,5 @@ @media (--show-side-nav) { margin: 0; } - - @media (--show-quick-nav) { - margin: 0; - } } } diff --git a/docs/src/app/(website)/css/components/Body.css b/docs/src/app/(website)/css/components/Body.css index 5a90d5dcdfb..96bafa3d3f1 100644 --- a/docs/src/app/(website)/css/components/Body.css +++ b/docs/src/app/(website)/css/components/Body.css @@ -3,6 +3,6 @@ box-sizing: border-box; margin: 0; color: var(--gray-t2); - background-color: var(--gray-s1); + background-color: var(--color-content); } } diff --git a/docs/src/app/(website)/layout.tsx b/docs/src/app/(website)/layout.tsx index 3a238f3213f..75ff11a7ac3 100644 --- a/docs/src/app/(website)/layout.tsx +++ b/docs/src/app/(website)/layout.tsx @@ -32,7 +32,10 @@ export default function Layout({ children }: React.PropsWithChildren) {
diff --git a/docs/src/app/(website)/page.tsx b/docs/src/app/(website)/page.tsx index 63ca1e2721d..4f6e8f1d641 100644 --- a/docs/src/app/(website)/page.tsx +++ b/docs/src/app/(website)/page.tsx @@ -86,6 +86,7 @@ export default function Homepage() {
+

Made for the makers

diff --git a/docs/src/components/Accordion.css b/docs/src/components/Accordion.css index b224b9172e0..4d4037cd710 100644 --- a/docs/src/components/Accordion.css +++ b/docs/src/components/Accordion.css @@ -16,11 +16,11 @@ border: 1px solid var(--gray-c2); border-collapse: separate; - border-radius: var(--radius-6); + border-radius: var(--radius-12); } .AccordionHeaderRow { - border-radius: var(--radius-6) var(--radius-6) 0 0; + border-radius: calc(var(--radius-12) - 1px) calc(var(--radius-12) - 1px) 0 0; border-bottom: 1px solid var(--gray-c2); background-color: var(--gray-s2); } @@ -76,8 +76,8 @@ } .AccordionItem:not([open]):last-child & { - border-bottom-left-radius: var(--radius-6); - border-bottom-right-radius: var(--radius-6); + border-bottom-left-radius: calc(var(--radius-12) - 1px); + border-bottom-right-radius: calc(var(--radius-12) - 1px); } } @@ -110,8 +110,8 @@ } .AccordionItem:last-child & { - border-bottom-left-radius: var(--radius-6); - border-bottom-right-radius: var(--radius-6); + border-bottom-left-radius: calc(var(--radius-12) - 1px); + border-bottom-right-radius: calc(var(--radius-12) - 1px); } } diff --git a/docs/src/components/CodeBlock/CodeBlock.css b/docs/src/components/CodeBlock/CodeBlock.css index 4dfcbe6cd92..91bde317b07 100644 --- a/docs/src/components/CodeBlock/CodeBlock.css +++ b/docs/src/components/CodeBlock/CodeBlock.css @@ -3,7 +3,7 @@ align-self: stretch; background-color: var(--color-content); border: 1px solid var(--gray-c2); - border-radius: var(--radius-6); + border-radius: var(--radius-12); & code .frame { padding-left: 0.75rem; @@ -35,8 +35,8 @@ padding-inline-end: 0.25rem; height: 2.25rem; gap: 1rem; - border-top-left-radius: inherit; - border-top-right-radius: inherit; + border-top-left-radius: calc(var(--radius-12) - 1px); + border-top-right-radius: calc(var(--radius-12) - 1px); border-bottom: 1px solid var(--gray-c2); /* Scroll */ @@ -74,8 +74,8 @@ .CodeBlockViewport { outline: 0; - border-bottom-right-radius: var(--radius-6); - border-bottom-left-radius: var(--radius-6); + border-bottom-right-radius: calc(var(--radius-12) - 1px); + border-bottom-left-radius: calc(var(--radius-12) - 1px); overscroll-behavior-x: contain; &:focus-visible { @@ -126,7 +126,7 @@ .CodeBlockPre, .CodeBlockRoot .CodeBlockPreInline { padding: 0.5rem 0; - border-radius: var(--radius-6); + border-radius: calc(var(--radius-12) - 1px); } .CodeBlockPreContainer { diff --git a/docs/src/components/Demo/Demo.css b/docs/src/components/Demo/Demo.css index 7cab65eb81f..87049b62dab 100644 --- a/docs/src/components/Demo/Demo.css +++ b/docs/src/components/Demo/Demo.css @@ -2,24 +2,11 @@ @layer components { .DemoRoot { - background-color: var(--color-content); + --demo-radius: var(--radius-12); + background-color: var(--gray-s2); border: 1px solid var(--gray-c2); - border-radius: var(--radius-6); + border-radius: var(--demo-radius); margin-bottom: var(--space-24); - - --shadow-1: - 0 1px 1px 0 var(--blackA-1), 0 2px 1px -1px var(--blackA-1), 0 1px 3px 0 var(--blackA-1); - --shadow-2: - 0 1px 1px 0 var(--blackA-1), 0 1px 3px -1px var(--blackA-1), 0 4px 8px -2px var(--blackA-1); - --shadow-3: - 0 1px 1px 0 var(--blackA-1), 0 2px 6px -1px var(--blackA-1), 0 6px 12px -3px var(--blackA-1), - 0 8px 16px -4px var(--blackA-1); - --shadow-4: - 0 1px 1px 0 var(--blackA-1), 0 2px 4px -1px var(--blackA-1), 0 4px 8px -2px var(--blackA-1), - 0 12px 32px -6px var(--blackA-3), 0 20px 48px -10px var(--blackA-1); - --shadow-5: - 0 10px 32px var(--blackA-5), 0 1px 1px var(--blackA-1), 0 4px 6px var(--blackA-2), - 0 1px 1px var(--blackA-2), 0 24px 68px var(--blackA-4); } .DemoPlaygroundExternalLink { @@ -32,8 +19,8 @@ position: relative; background-color: var(--color-content); - border-top-left-radius: var(--radius-6); - border-top-right-radius: var(--radius-6); + border-top-left-radius: calc(var(--demo-radius) - 1px); + border-top-right-radius: calc(var(--demo-radius) - 1px); /* Scroll */ overflow: auto hidden; @@ -67,9 +54,8 @@ line-height: 1.25rem; white-space: nowrap; color: var(--gray-t2); - background-color: var(--gray-s2); background-clip: padding-box; - border-block: 1px solid var(--gray-c2); + border-bottom: 1px solid var(--gray-c2); display: flex; align-items: center; gap: 2rem; @@ -99,11 +85,6 @@ .DemoToolbarActions { position: relative; - /* Apply sticky only on wider viewports to avoid actions taking up most of it */ - @media (min-width: 48rem) { - position: sticky; - padding-left: 1rem; - } right: 0; display: flex; align-items: center; @@ -113,6 +94,12 @@ height: 100%; gap: 0.25rem; + /* Apply sticky only on wider viewports to avoid actions taking up most of it */ + @media (min-width: 48rem) { + position: sticky; + padding-left: 1rem; + } + &::before { content: ''; position: absolute; @@ -125,22 +112,6 @@ } } - .DemoFilename { - font-family: var(--font-mono); - color: var(--color-foreground); - font-weight: bold; - user-select: text; - border-radius: var(--radius-4); - - &:hover { - text-decoration: underline; - } - - &:focus-visible { - outline: 2px solid var(--gray-t2); - } - } - .DemoTabsList { display: flex; gap: 2px; @@ -170,19 +141,17 @@ color: var(--color-foreground); font-weight: var(--font-weight-700); background-color: white; - - @media (prefers-color-scheme: light) { - box-shadow: - 0 0 1px var(--blackA-4), - 0 0.5px 1px var(--blackA-3), - 0 1px 3px var(--blackA-1), - 0 2px 4px -1px var(--blackA-1), - 0 4px 12px -2px var(--blackA-1), - 0 4px 16px -4px var(--blackA-1); - } + box-shadow: + 0 0 1px var(--blackA-4), + 0 0.5px 1px var(--blackA-3), + 0 1px 3px var(--blackA-1), + 0 2px 4px -1px var(--blackA-1), + 0 4px 12px -2px var(--blackA-1), + 0 4px 16px -4px var(--blackA-1); @media (prefers-color-scheme: dark) { background-color: var(--gray-c2); + box-shadow: none; } } @@ -192,6 +161,42 @@ } } + .DemoCodeBlockCollapsible { + position: relative; + display: flex; + flex-direction: column; + + &:not([data-open], [data-compact]) { + .DemoCollapseButton { + position: absolute; + left: 50%; + bottom: 0.5rem; + transform: translateX(-50%); + } + } + + &[data-open] { + .DemoCollapseButton { + position: sticky; + bottom: 0.5rem; + align-self: center; + margin-bottom: 0.5rem; + } + } + + &[data-compact]:not([data-open]) { + .DemoCodeBlockRoot::before, + .DemoCodeBlockViewport { + display: none; + } + + .DemoCollapseButton { + align-self: center; + margin-block: 0.5rem; + } + } + } + .DemoCodeBlockRoot { display: flex; flex-direction: column; @@ -202,11 +207,14 @@ &::before { content: ''; position: absolute; + z-index: 1; pointer-events: none; height: 7.5rem; bottom: 0; left: 0; right: 0; + border-bottom-left-radius: calc(var(--demo-radius) - 1px); + border-bottom-right-radius: calc(var(--demo-radius) - 1px); background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 60%)); } @@ -269,43 +277,80 @@ } } + .DemoCollapsibleRoot { + border-top: 1px solid var(--gray-c2); + } + .DemoCollapseButton { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + gap: var(--space-8); + border: none; + color: var(--color-foreground); + font-family: inherit; font-size: var(--font-size-13); - line-height: 1.25rem; - background-color: var(--gray-s2); - cursor: default; - width: 100%; - color: var(--gray-t2); - height: 2.25rem; - border-top: 1px solid var(--gray-c2); - border-bottom-left-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - border-bottom: 1px solid transparent; - background-clip: padding-box; - margin-bottom: -1px; + font-weight: 500; + line-height: 1; + vertical-align: top; + height: var(--space-28); + padding-inline: var(--space-12); + border-radius: var(--radius-pill); + background: linear-gradient(to bottom, hsl(0deg 0% 0% / 8%), hsl(0deg 0% 0% / 16%)); + white-space: nowrap; + z-index: 2; -webkit-user-select: none; user-select: none; + -webkit-tap-highlight-color: transparent; + + &::before { + content: ''; + position: absolute; + z-index: -1; + inset: 1px; + border-radius: var(--radius-pill); + background: linear-gradient(to bottom, white 25%, hsl(0deg 0% 98%)); + pointer-events: none; + box-shadow: + inset 0 0 0 1px white, + 0 1px 1px hsl(0deg 0% 0% / 4%), + 0 1px 2px hsl(0deg 0% 0% / 4%), + 0 2px 4px -2px hsl(0deg 0% 0% / 4%); + } &[data-sticky] { - position: sticky; - bottom: -1px; z-index: 1; } @media (hover: hover) { &:hover { - background-color: var(--gray-c1); + background: linear-gradient(to bottom, hsl(0deg 0% 0% / 16%), hsl(0deg 0% 0% / 32%)); } } - &:active { - background-color: color-mix(in oklch, var(--gray-c1), var(--gray-t2) 5%); + @media (prefers-color-scheme: dark) { + background: linear-gradient(to bottom, hsl(0deg 0% 100% / 16%), hsl(0deg 0% 100% / 24%)); + + &::before { + background: linear-gradient(to bottom, var(--gray-c2), var(--gray-c1)); + box-shadow: + 0 1px 1px hsl(0deg 0% 0% / 16%), + 0 1px 2px hsl(0deg 0% 0% / 16%), + 0 2px 4px -2px hsl(0deg 0% 0% / 24%); + } + + @media (hover: hover) { + &:hover { + background: linear-gradient(to bottom, hsl(0deg 0% 100% / 24%), hsl(0deg 0% 100% / 36%)); + } + } } &:focus-visible { outline: 2px solid var(--gray-t2); outline-offset: -1px; - z-index: 1; } } } diff --git a/docs/src/components/Demo/Demo.tsx b/docs/src/components/Demo/Demo.tsx index cf27e2514a7..d85cc158952 100644 --- a/docs/src/components/Demo/Demo.tsx +++ b/docs/src/components/Demo/Demo.tsx @@ -190,7 +190,11 @@ export function Demo({ )}
- +
{(compact ? demo.expanded : true) && (
diff --git a/docs/src/components/Demo/DemoCodeBlock.tsx b/docs/src/components/Demo/DemoCodeBlock.tsx index 6bc06f67bb5..197dc48532e 100644 --- a/docs/src/components/Demo/DemoCodeBlock.tsx +++ b/docs/src/components/Demo/DemoCodeBlock.tsx @@ -57,23 +57,34 @@ export function DemoCodeBlock({ } return ( - - - - - {collapsibleOpen ? 'Hide' : 'Show'} code - - +
); } diff --git a/docs/src/components/Demo/DemoFileSelector.tsx b/docs/src/components/Demo/DemoFileSelector.tsx index 13b589370ba..20bd557a60e 100644 --- a/docs/src/components/Demo/DemoFileSelector.tsx +++ b/docs/src/components/Demo/DemoFileSelector.tsx @@ -57,12 +57,8 @@ export function DemoFileSelector({ } }, []); - if (files.length === 1) { - return ( - - {files[0].name} - - ); + if (files.length <= 1) { + return null; } return ( diff --git a/docs/src/components/Header.css b/docs/src/components/Header.css index 4a2d82ccc50..271d01973b4 100644 --- a/docs/src/components/Header.css +++ b/docs/src/components/Header.css @@ -2,39 +2,64 @@ @layer components { .Header { - font-size: var(--font-size-15); + font-size: var(--font-size-14); line-height: 1.375rem; - position: absolute; + position: fixed; left: 0; top: 0; height: var(--header-height); width: 100%; + background-color: var(--color-content); + z-index: 3; + + @media (--lg) { + background-color: transparent; + pointer-events: none; + } + + @media print { + /* Prevent the header to be visible on each printed page */ + position: absolute; + } + } + + .Header::before { + content: ''; + position: absolute; + inset: 0; + display: none; + pointer-events: none; + background: linear-gradient( + to bottom, + var(--color-content) 0%, + color-mix(in oklab, var(--color-content), transparent 12%) 10%, + transparent 100% + ); + + @media (--lg) { + display: block; + } } .HeaderInner { + position: relative; + z-index: 1; height: inherit; + width: calc(100% - var(--root-layout-padding-inline) - var(--root-layout-padding-inline)); + max-width: var(--content-layout-max-width); display: flex; align-items: center; justify-content: space-between; - padding-inline: 1.5rem; + margin-inline: auto; - position: fixed; - top: 0; - inset-inline: 0; - box-shadow: inset 0 -1px var(--color-gridline); - /* It's also the iOS header overscroll background */ - background-color: var(--gray-s2); - z-index: 2; - - @media (--show-side-nav) { - position: static; - box-shadow: none; - background-color: transparent; - } + @media (--lg) { + align-items: start; + padding-top: var(--space-32); + padding-inline: 0; - @media print { - /* Prevent the header to be visible on each printed page */ - position: absolute; + > * { + pointer-events: auto; + } } } @@ -43,6 +68,7 @@ display: flex; align-items: center; gap: 0.375rem; + height: var(--space-32); padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; border-radius: var(--radius-6); @@ -100,10 +126,6 @@ color: var(--gray-p1); } - & svg { - margin-top: -0.125rem; - } - &:focus-visible { border-radius: var(--radius-6); outline: 2px solid var(--gray-t2); @@ -113,10 +135,22 @@ .HeaderDesktopActions { display: none; - gap: 1.5rem; @media (--lg) { display: flex; + justify-content: flex-end; + width: calc( + ( + 100% - var(--content-layout-gap) - var(--content-layout-gap) - + var(--content-layout-gap) - var(--content-layout-gap) - var(--content-layout-gap) - + var(--content-layout-gap) - var(--content-layout-gap) + ) / + 4 + var(--content-layout-gap) + ); + } + + @media (--xl) { + justify-content: start; } } @@ -155,21 +189,4 @@ height: 2px; background-color: currentColor; } - - .HeaderResourceRow { - display: flex; - flex: 1; - align-items: baseline; - justify-content: space-between; - } - - .HeaderVersion { - font-size: var(--font-size-15); - line-height: 1.375rem; - color: var(--gray-t1); - } - - .HeaderGitHubIcon { - margin-top: -2px; - } } diff --git a/docs/src/components/Header.tsx b/docs/src/components/Header.tsx index 49b971ef578..e451adcc863 100644 --- a/docs/src/components/Header.tsx +++ b/docs/src/components/Header.tsx @@ -1,8 +1,6 @@ import NextLink from 'next/link'; -import { GitHubIcon } from 'docs/src/icons/GitHubIcon'; import * as MobileNav from './MobileNav'; import { sitemap } from '../app/sitemap'; -import { NpmIcon } from '../icons/NpmIcon'; import { Logo } from './Logo'; import { SkipNav } from './SkipNav'; import { Search } from './Search'; @@ -13,6 +11,7 @@ export const titleMap: Record = { }; export const HEADER_HEIGHT = 48; +export const DESKTOP_HEADER_HEIGHT = 82; const showPrivatePages = process.env.SHOW_PRIVATE_PAGES === 'true'; @@ -26,19 +25,6 @@ export function Header() {
@@ -85,25 +71,6 @@ export function Header() { ))} - - Resources - - - - - npm package - {process.env.LIB_VERSION} - - - - - GitHub - - - diff --git a/docs/src/components/Menu.css b/docs/src/components/Menu.css index 1e3d7d9ad9b..b7fa2f9786e 100644 --- a/docs/src/components/Menu.css +++ b/docs/src/components/Menu.css @@ -13,22 +13,18 @@ background-color: var(--color-popup); overflow: hidden; cursor: default; - -webkit-user-select: none; - user-select: none; padding-block: 0.25rem; - /* Make sure the layout doesn't fall apart on extreme zoom on mobile */ min-width: min-content; - - @media (prefers-color-scheme: light) { - box-shadow: - 0 0 1px var(--blackA-4), - 0 0.5px 1px var(--blackA-3), - 0 1px 3px var(--blackA-1), - 0 2px 4px -1px var(--blackA-1), - 0 4px 12px -2px var(--blackA-1), - 0 4px 16px -4px var(--blackA-1); - } + box-shadow: + 0 0 1px var(--blackA-4), + 0 0.5px 1px var(--blackA-3), + 0 1px 3px var(--blackA-1), + 0 2px 4px -1px var(--blackA-1), + 0 4px 12px -2px var(--blackA-1), + 0 4px 16px -4px var(--blackA-1); + -webkit-user-select: none; + user-select: none; @media (prefers-color-scheme: dark) { box-shadow: inset 0 0 0 1px var(--gray-c3); @@ -73,7 +69,7 @@ } @media (pointer: coarse) { - font-size: var(--font-size-15); + font-size: var(--font-size-14); height: 2.25rem; } } diff --git a/docs/src/components/QuickNav/QuickNav.css b/docs/src/components/QuickNav/QuickNav.css index 179bf741d68..3a6ac82cd7e 100644 --- a/docs/src/components/QuickNav/QuickNav.css +++ b/docs/src/components/QuickNav/QuickNav.css @@ -5,59 +5,72 @@ /* Quick Nav's container shouldn't have any paddings to maintain correct positioning */ padding: 0; position: relative; + display: grid; + gap: var(--content-layout-gap); + grid-template-columns: repeat(8, minmax(0, 1fr)); } .QuickNavContent { - padding-top: 1.5rem; - padding-bottom: 5rem; + grid-column: 1 / -1; + grid-row: 1; + min-width: 0; + padding-top: 0.75rem; + padding-bottom: 1.5rem; - @media (--sm) { - padding-top: 2rem; + @media (--show-side-nav) { + grid-column: 3 / 9; + padding-top: 0; } - @media (--show-side-nav) { - padding-bottom: 8rem; + @media (--xl) { + grid-column: 3 / 7; } } .QuickNavRoot { - --quick-nav-margin-x: 2rem; --quick-nav-scrollbar-thumb-width: 0.25rem; --quick-nav-scrollbar-width: 1.5rem; /* Use line height instead of fixed item height in case text breaks into multiple lines */ - --quick-nav-item-height: 2rem; + --quick-nav-item-height: 1.75rem; --quick-nav-item-line-height: 1.375rem; --quick-nav-item-padding-y: calc( var(--quick-nav-item-height) / 2 - var(--quick-nav-item-line-height) / 2 ); - font-size: var(--font-size-15); + font-size: var(--font-size-14); line-height: 1.375rem; z-index: 1; - position: sticky; - top: 0; - width: 0; - float: right; + grid-column: 7 / 9; + grid-row: 1; + align-self: start; + min-width: 0; contain: layout; display: none; - @media (--show-quick-nav) { + @media (--xl) { display: block; + position: fixed; + top: var(--header-height); + right: var(--content-layout-inline-offset); + bottom: 0; + width: var(--content-layout-sidebar-width); } } .QuickNavInner { position: relative; - left: var(--quick-nav-margin-x); - width: calc(var(--sidebar-width) - var(--quick-nav-margin-x)); + width: 100%; + + /* Avoid links' focus outline from being cut */ + margin-top: -3px; + margin-left: -3px; } .QuickNavViewport { - max-height: 100dvh; - padding-top: 0.75rem; + max-height: calc(100dvh - var(--header-height)); padding-right: var(--quick-nav-scrollbar-width); - padding-bottom: 4.5rem; + padding-bottom: 1.5rem; padding-left: 0; /* Scroll containers are focusable */ @@ -65,14 +78,14 @@ &:focus-visible { outline: 2px solid var(--gray-t2); - outline-offset: -2px; + outline-offset: 1px; } } .QuickNavScrollbar { display: flex; - padding-top: 1.5rem; - padding-bottom: 4.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; /* Click target width */ width: var(--quick-nav-scrollbar-width); @@ -116,16 +129,21 @@ } } + .QuickNavViewport > .QuickNavList { + /* Avoid links' focus outline from being cut */ + margin-top: 3px; + margin-left: 3px; + } + .QuickNavLink { - display: flex; - padding: var(--quick-nav-item-padding-y) 0.5rem; - margin-inline: 0 -0.5rem; + display: inline-flex; + padding-block: var(--quick-nav-item-padding-y); border-radius: var(--radius-6); &:focus-visible { z-index: 1; outline: 2px solid var(--gray-t2); - outline-offset: -2px; + outline-offset: 1px; } @media (hover: hover) { diff --git a/docs/src/components/ReferenceTable/AttributesReferenceTable.tsx b/docs/src/components/ReferenceTable/AttributesReferenceTable.tsx index 63da0e07698..7e145b92669 100644 --- a/docs/src/components/ReferenceTable/AttributesReferenceTable.tsx +++ b/docs/src/components/ReferenceTable/AttributesReferenceTable.tsx @@ -81,7 +81,9 @@ export function AttributesReferenceTable({ {name} - {attribute.description} + + {attribute.description} + ); })} diff --git a/docs/src/components/ReferenceTable/CssVariablesReferenceTable.tsx b/docs/src/components/ReferenceTable/CssVariablesReferenceTable.tsx index 6efea4a0a50..c8680f1707d 100644 --- a/docs/src/components/ReferenceTable/CssVariablesReferenceTable.tsx +++ b/docs/src/components/ReferenceTable/CssVariablesReferenceTable.tsx @@ -82,7 +82,9 @@ export function CssVariablesReferenceTable({ {name} - {cssVariable.description} + + {cssVariable.description} + ); })} diff --git a/docs/src/components/ReferenceTable/ReferenceTable.css b/docs/src/components/ReferenceTable/ReferenceTable.css index 4e0b608d9ec..c13abea0e66 100644 --- a/docs/src/components/ReferenceTable/ReferenceTable.css +++ b/docs/src/components/ReferenceTable/ReferenceTable.css @@ -77,7 +77,7 @@ flex-direction: column; gap: 0.75rem; padding: 1rem; - font-size: var(--font-size-15); + font-size: var(--font-size-14); line-height: 1.375rem; text-wrap: pretty; } @@ -90,6 +90,17 @@ width: 66.6667%; } + .ReferenceDescriptionCell { + vertical-align: middle; + } + + .ReferenceDescriptionCell .TableCellInner { + display: block; + min-height: 0; + white-space: normal; + overflow-x: visible; + } + .ReferenceReturnTypeColumn { width: 40%; } @@ -159,32 +170,32 @@ } .ReferenceHeaderRow { - grid-template-columns: 5fr 7fr 4.5fr 2.5rem; + grid-template-columns: 6fr 6fr 4.5fr 2.5rem; } .ReferenceTrigger { scroll-margin-top: 0; - grid-template-columns: 5fr 7fr 4.5fr 2.5rem; + grid-template-columns: 6fr 6fr 4.5fr 2.5rem; } [data-hide-default] > .ReferenceHeaderRow { - grid-template-columns: 5fr 7fr 2.5rem; + grid-template-columns: 6fr 6fr 2.5rem; } [data-hide-default] .ReferenceTrigger { - grid-template-columns: 5fr 7fr 2.5rem; + grid-template-columns: 6fr 6fr 2.5rem; } .ReferenceWideNameColumn { - width: calc(5 / 16.5 * 100%); + width: calc(6 / 16.5 * 100%); } .ReferenceWideDescriptionColumn { - width: calc(11.5 / 16.5 * 100%); + width: calc(10.5 / 16.5 * 100%); } .ReferenceContent { - grid-template-columns: 5fr 11.5fr 2.5rem; + grid-template-columns: 6fr 10.5fr 2.5rem; } } diff --git a/docs/src/components/ReleaseTimeline/ReleaseTimeline.css b/docs/src/components/ReleaseTimeline/ReleaseTimeline.css index fb7defdc508..e2a0bf97a4a 100644 --- a/docs/src/components/ReleaseTimeline/ReleaseTimeline.css +++ b/docs/src/components/ReleaseTimeline/ReleaseTimeline.css @@ -111,7 +111,7 @@ background-color: var(--gray-c2); border-radius: var(--radius-8); padding: 1.25rem; - font-size: var(--font-size-15); + font-size: var(--font-size-14); color: var(--color-foreground); line-height: 1.375rem; } diff --git a/docs/src/components/Search/SearchBar.css b/docs/src/components/Search/SearchBar.css index e1334e4ca6f..93e92ef211d 100644 --- a/docs/src/components/Search/SearchBar.css +++ b/docs/src/components/Search/SearchBar.css @@ -28,82 +28,51 @@ } .SearchTrigger { - position: relative; - display: flex; + display: inline-flex; align-items: center; - justify-content: center; - gap: var(--space-8); + gap: 0.25rem; height: var(--space-32); - padding-inline: 0.875rem; - margin: 0; - border: none; - border-radius: 9999px; - background-color: hsl(0deg 0% 0% / 5%); + width: fit-content; + padding: 0.25rem 0.5rem; + margin: -0.25rem -0.5rem; + border: 0; + border-radius: var(--radius-6); + background: transparent; font: inherit; - font-size: var(--font-size-16); - font-weight: var(--font-weight-400); - line-height: 1.5; - color: var(--gray-t2); + font-size: var(--font-size-15); + line-height: 1.375rem; + color: currentColor; + text-align: left; -webkit-user-select: none; user-select: none; - outline: none; - - @media (prefers-color-scheme: dark) { - background-color: var(--gray-c2); - } - } - - .SearchTrigger::before { - content: ''; - position: absolute; - inset: 1px; - border-radius: 9999px; - background-color: var(--color-popup); - z-index: 0; + outline: 0; - @media (prefers-color-scheme: dark) { - background-color: var(--gray-c1); + @media not (hover: hover) { + &:active { + color: var(--gray-p1); + background-color: var(--gray-c1); + } } } - .SearchTrigger::after { - content: ''; - position: absolute; - inset: 1px; - border-radius: 9999px; - box-shadow: 0 1px 2px hsl(0deg 0% 0% / 5%); - z-index: 0; - pointer-events: none; - } - - .SearchTrigger > * { - position: relative; - z-index: 1; - } - - .SearchTrigger:hover { - background-color: hsl(0deg 0% 0% / 15%); - - @media (prefers-color-scheme: dark) { - background-color: var(--gray-c3); - } + .SearchTriggerShortcut { + color: var(--gray-t1); } - .SearchTrigger:hover::before { - @media (prefers-color-scheme: dark) { - background-color: oklch(21.5% 0.5% 264deg); - } + .SearchTrigger kbd { + font: inherit; } - .SearchTrigger:hover .SearchTriggerKbd { - @media (prefers-color-scheme: dark) { - border-color: var(--gray-c3); + @media (hover: hover) { + .SearchTrigger:hover { + background-color: var(--gray-c1); } } .SearchTrigger:focus-visible { + z-index: 1; outline: 2px solid var(--gray-t2); - outline-offset: -1px; + outline-offset: -2px; } .SearchTrigger[data-disabled] { @@ -112,58 +81,7 @@ } .SearchTrigger[data-disabled]:hover { - background-color: hsl(0deg 0% 0% / 5%); - } - - .SearchTriggerIcon { - width: 1rem; - height: 1rem; - color: var(--gray-p1); - } - - .SearchTriggerKbd { - display: none; - height: 20px; - line-height: 1; - align-items: center; - gap: 0.25rem; - padding-inline: 0.375rem; - border-radius: 9999px; - border: 1px solid var(--gray-c3); - background-color: var(--gray-s2); - pointer-events: none; - color: var(--gray-t2); - - @media (--lg) { - display: inline-flex; - margin-right: -0.5rem; - } - } - - .SearchTriggerKbd kbd { - line-height: 1; - } - - .SearchTriggerKbd kbd:first-child { - display: inline-flex; - margin-top: 1px; - } - - .SearchTriggerCmd { - font-size: var(--font-size-18); - } - - .SearchTriggerCtrl { - font-size: var(--font-size-13); - } - - .SearchTriggerPlus { - font-size: var(--font-size-13); - color: var(--gray-t1); - } - - .SearchTriggerK { - font-size: 0.8125rem; + background-color: transparent; } .SearchBreadcrumbPart { diff --git a/docs/src/components/Search/SearchBar.tsx b/docs/src/components/Search/SearchBar.tsx index 13576581e1c..a751521d5b1 100644 --- a/docs/src/components/Search/SearchBar.tsx +++ b/docs/src/components/Search/SearchBar.tsx @@ -225,7 +225,7 @@ export function SearchBar({ } const handleKeyDown = (event: KeyboardEvent) => { - if ((event.metaKey || event.ctrlKey) && event.key === 'k') { + if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); event.stopPropagation(); @@ -371,19 +371,14 @@ export function SearchBar({ return ( - diff --git a/docs/src/components/Select.css b/docs/src/components/Select.css index 235df296ec5..5372f873f69 100644 --- a/docs/src/components/Select.css +++ b/docs/src/components/Select.css @@ -13,22 +13,19 @@ background-color: var(--color-popup); overflow: hidden; cursor: default; - -webkit-user-select: none; - user-select: none; - padding-block: 0.25rem; + padding-block: 0.25rem; /* Make sure the layout doesn't fall apart on extreme zoom on mobile */ min-width: min-content; - - @media (prefers-color-scheme: light) { - box-shadow: - 0 0 1px var(--blackA-4), - 0 0.5px 1px var(--blackA-3), - 0 1px 3px var(--blackA-1), - 0 2px 4px -1px var(--blackA-1), - 0 4px 12px -2px var(--blackA-1), - 0 4px 16px -4px var(--blackA-1); - } + box-shadow: + 0 0 1px var(--blackA-4), + 0 0.5px 1px var(--blackA-3), + 0 1px 3px var(--blackA-1), + 0 2px 4px -1px var(--blackA-1), + 0 4px 12px -2px var(--blackA-1), + 0 4px 16px -4px var(--blackA-1); + -webkit-user-select: none; + user-select: none; @media (prefers-color-scheme: dark) { box-shadow: inset 0 0 0 1px var(--gray-c3); @@ -72,7 +69,7 @@ } @media (pointer: coarse) { - font-size: var(--font-size-15); + font-size: var(--font-size-14); height: 2.25rem; grid-template-columns: 0.5rem 1rem 0.5rem auto 1.5rem; } diff --git a/docs/src/components/SideNav.css b/docs/src/components/SideNav.css index c8bc243d683..bd09b74ba9f 100644 --- a/docs/src/components/SideNav.css +++ b/docs/src/components/SideNav.css @@ -3,64 +3,55 @@ @layer components { .SideNavRoot { /* Match quick nav spacing so side nav and quick nav are visually aligned */ - --side-nav-item-height: 2rem; + --side-nav-item-height: 1.75rem; --side-nav-item-line-height: 1.375rem; --side-nav-item-padding-y: calc( var(--side-nav-item-height) / 2 - var(--side-nav-item-line-height) / 2 ); - --side-nav-scrollbar-thumb-width: 0.25rem; - --side-nav-scrollbar-width: 1.5rem; - --side-nav-scrollbar-gap-left: 1rem; - --side-nav-scrollbar-gap-right: 2.5rem; - margin-right: calc( - var(--side-nav-scrollbar-gap-right) - var(--side-nav-scrollbar-width) / 2 + - var(--side-nav-scrollbar-thumb-width) / 2 - ); - - font-size: var(--font-size-15); + font-size: var(--font-size-14); line-height: 1.375rem; - position: sticky; - top: 0; + z-index: 1; + grid-column: 1 / 3; + grid-row: 1; + min-width: 0; display: none; @media (--show-side-nav) { display: block; + position: fixed; + top: var(--header-height); + bottom: 0; + left: var(--content-layout-inline-offset); + width: var(--content-layout-sidebar-width); } } .SideNavViewport { - max-height: 100dvh; - padding: 0.75rem - calc( - var(--side-nav-scrollbar-gap-left) + var(--side-nav-scrollbar-width) / 2 + - var(--side-nav-scrollbar-thumb-width) / 2 - ) - 5rem 1.5rem; + max-height: calc(100dvh - var(--header-height)); + padding: 0 1.5rem 1.5rem 0; /* Scroll containers are focusable */ outline: 0; .SideNavRoot:has(&:focus-visible)::before { content: ''; - inset: 0; + /* Avoid links' active state from being cut */ + inset: 0 0 0 -3px; pointer-events: none; position: absolute; - outline: 2px solid var(--gray-t2); - outline-offset: -2px; - /* Don't inset the outline on the right */ - right: -2px; + border: 2px solid var(--gray-t2); } } .SideNavScrollbar { display: flex; - padding-top: 1.5rem; - padding-bottom: 4.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; /* Click target width */ - width: var(--side-nav-scrollbar-width); + width: 1.5rem; opacity: 0; transition: opacity 200ms 500ms; @@ -84,7 +75,7 @@ display: block; height: 100%; /* Visible thumb width */ - width: var(--side-nav-scrollbar-thumb-width); + width: 0.25rem; border-radius: var(--radius-4); background-color: var(--gray-p2); } @@ -117,6 +108,10 @@ -webkit-user-select: none; user-select: none; + @media (--show-side-nav) { + max-width: 10rem; + } + @media (hover: hover) { &:hover { background-color: var(--gray-s2); @@ -137,7 +132,7 @@ &:focus-visible { z-index: 1; outline: 2px solid var(--gray-t2); - outline-offset: -1px; + outline-offset: -2px; } } diff --git a/docs/src/components/SideNav.tsx b/docs/src/components/SideNav.tsx index 3a346c81712..766e1728a7f 100644 --- a/docs/src/components/SideNav.tsx +++ b/docs/src/components/SideNav.tsx @@ -5,7 +5,7 @@ import NextLink from 'next/link'; import { usePathname } from 'next/navigation'; import { ScrollArea } from '@base-ui/react/scroll-area'; import scrollIntoView from 'scroll-into-view-if-needed'; -import { HEADER_HEIGHT } from './Header'; +import { DESKTOP_HEADER_HEIGHT } from './Header'; import './SideNav.css'; export function Root(props: React.ComponentProps<'div'>) { @@ -62,7 +62,7 @@ export function Item(props: ItemProps) { React.useEffect(() => { if (ref.current && active) { const scrollMargin = (SCROLL_MARGIN * rem.current) / 16; - const headerHeight = (HEADER_HEIGHT * rem.current) / 16; + const headerHeight = (DESKTOP_HEADER_HEIGHT * rem.current) / 16; const viewport = document.querySelector('[data-side-nav-viewport]'); if (!viewport) { diff --git a/docs/src/components/SkipNav.css b/docs/src/components/SkipNav.css index bcdd08ca5df..ae5d858dcf5 100644 --- a/docs/src/components/SkipNav.css +++ b/docs/src/components/SkipNav.css @@ -14,10 +14,11 @@ &:focus-visible { clip: auto; clip-path: none; - height: var(--header-height); + height: calc(var(--header-height) - 1px); overflow: visible; width: auto; white-space: normal; + top: 1px; left: 0; z-index: 1; display: inline-flex; diff --git a/docs/src/components/Subtitle/Subtitle.css b/docs/src/components/Subtitle/Subtitle.css index acc5f5224bd..a0aa71eb834 100644 --- a/docs/src/components/Subtitle/Subtitle.css +++ b/docs/src/components/Subtitle/Subtitle.css @@ -2,18 +2,16 @@ .Subtitle { display: flex; flex-direction: column; - align-items: baseline; - justify-content: space-between; + align-items: flex-start; font-size: var(--font-size-18); line-height: 1.75rem; text-wrap: pretty; color: var(--gray-t1); - margin-bottom: 1.25rem; - gap: 0.5rem; + margin-bottom: 1.5rem; + gap: var(--space-12); + } - @media (min-width: 48rem) { - flex-direction: row; - gap: 2rem; - } + .MdH1 + .Subtitle { + margin-top: -0.75rem; } } diff --git a/docs/src/components/Table.css b/docs/src/components/Table.css index d80238cee9b..c2602e41865 100644 --- a/docs/src/components/Table.css +++ b/docs/src/components/Table.css @@ -5,7 +5,7 @@ color: var(--gray-t1); border: 1px solid var(--gray-c2); border-collapse: separate; - border-radius: var(--radius-6); + border-radius: var(--radius-12); white-space: nowrap; overflow: hidden; } diff --git a/docs/src/css/custom-media.css b/docs/src/css/custom-media.css index c904ba34668..874c3c4dff5 100644 --- a/docs/src/css/custom-media.css +++ b/docs/src/css/custom-media.css @@ -6,4 +6,3 @@ /* stylelint-disable-next-line custom-media-pattern */ @custom-media --2xl (min-width: 96rem); /* 1536px */ @custom-media --show-side-nav (min-width: 64rem); -@custom-media --show-quick-nav (min-width: 84rem); diff --git a/docs/src/css/index.css b/docs/src/css/index.css index d4fc926bbce..38572a85a87 100644 --- a/docs/src/css/index.css +++ b/docs/src/css/index.css @@ -228,12 +228,13 @@ 0 10px 32px var(--blackA-5), 0 1px 1px var(--blackA-1), 0 4px 6px var(--blackA-2), 0 1px 1px var(--blackA-2), 0 24px 68px var(--blackA-4); - /* Breakpoints (use custom-media.css where possible) */ - --breakpoint-max-layout-width: 89rem; /* 1424px - this is a 1440px device minus 16px scrollbar */ - --ease-out-fast: cubic-bezier(0.45, 1.005, 0, 1.005); --ease-in-slow: cubic-bezier(0.375, 0.015, 0.545, 0.455); --header-height: 3rem; + + @media (--lg) { + --header-height: 5.125rem; + } } /* ═══ Dark mode overrides ═══ */ @@ -389,8 +390,6 @@ --ease-out-fast: initial; --ease-in-slow: initial; --header-height: initial; - - --breakpoint-max-layout-width: initial; } } diff --git a/docs/src/css/mdx-components.css b/docs/src/css/mdx-components.css index 287df9e4aa7..7f56107ded9 100644 --- a/docs/src/css/mdx-components.css +++ b/docs/src/css/mdx-components.css @@ -85,11 +85,6 @@ margin-block: 1.25rem; } - .MdSubtitle { - margin-top: -0.5rem; - margin-bottom: 1.25rem; - } - .MdReferenceBlock { margin-top: 1.25rem; margin-bottom: 1.5rem; diff --git a/docs/src/mdx-components.tsx b/docs/src/mdx-components.tsx index 182bd9c9004..e7222e32d75 100644 --- a/docs/src/mdx-components.tsx +++ b/docs/src/mdx-components.tsx @@ -81,7 +81,7 @@ export const mdxComponents: MDXComponents = { // rendering one here would produce a duplicate. return null; }, - Subtitle: (props) => , + Subtitle: (props) => , }; export function useMDXComponents(): MDXComponents {