mirror of
https://github.com/block/buzz.git
synced 2026-10-31 14:31:02 +00:00
584ef13c7b
Keep the shared header blur treatment while removing the horizontal rules drawn by the global chrome, channel header, and top chrome backdrop. Co-authored-by: Cursor <cursoragent@cursor.com>
84 lines
4.2 KiB
TypeScript
84 lines
4.2 KiB
TypeScript
export const TOP_CHROME_HEIGHT_DEFAULT = "2.5rem";
|
|
export const CHANNEL_CONTENT_TOP_PADDING_DEFAULT = "5.75rem";
|
|
export const INSET_HEADER_HEIGHT_DEFAULT = "5rem";
|
|
|
|
export const chromeCssVars = {
|
|
topChromeHeight: "--buzz-top-chrome-height",
|
|
channelContentTopPadding: "--buzz-channel-content-top-padding",
|
|
insetHeaderHeight: "--buzz-inset-header-height",
|
|
} as const;
|
|
|
|
export const chromeCssVarDefaults = {
|
|
[chromeCssVars.topChromeHeight]: TOP_CHROME_HEIGHT_DEFAULT,
|
|
[chromeCssVars.channelContentTopPadding]: CHANNEL_CONTENT_TOP_PADDING_DEFAULT,
|
|
[chromeCssVars.insetHeaderHeight]: INSET_HEADER_HEIGHT_DEFAULT,
|
|
} as const;
|
|
|
|
export const channelContentTopPaddingMeasurement = {
|
|
cssVariable: chromeCssVars.channelContentTopPadding,
|
|
resetValue: chromeCssVarDefaults[chromeCssVars.channelContentTopPadding],
|
|
} as const;
|
|
|
|
export const insetHeaderHeightMeasurement = {
|
|
cssVariable: chromeCssVars.insetHeaderHeight,
|
|
resetValue: chromeCssVarDefaults[chromeCssVars.insetHeaderHeight],
|
|
} as const;
|
|
|
|
/**
|
|
* Tailwind class fragments for a flowed `TopChromeInsetHeader` that overlays
|
|
* the scrollable content below it, so the content scrolls under the
|
|
* translucent blurred header (same treatment as the channel header).
|
|
*/
|
|
export const insetHeaderOverlay = {
|
|
/** Negative bottom margin pulling the next sibling under the header. */
|
|
negativeMargin: "-mb-(--buzz-inset-header-height,5rem)",
|
|
/** Padding-top reserving the measured header height inside the scroll area. */
|
|
contentPadding: "pt-(--buzz-inset-header-height,5rem)",
|
|
/**
|
|
* Single full-width backdrop strip drawn behind transparent inset headers.
|
|
* Rendered once per view so the blur samples continuously across column
|
|
* boundaries instead of clipping at each pane's backdrop-filter box.
|
|
* Keeps the inset header visually continuous without drawing horizontal
|
|
* dividers across the header area.
|
|
*/
|
|
backdrop:
|
|
"pointer-events-none absolute inset-x-0 top-0 z-30 h-(--buzz-inset-header-height,5rem) bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
|
|
} as const;
|
|
|
|
/** Tailwind class fragments for layout under the global top chrome. */
|
|
export const topChromeInset = {
|
|
/** Absolute/fixed top offset below the search bar. */
|
|
top: "top-(--buzz-top-chrome-height,2.5rem)",
|
|
/** Padding-top clearing the global top chrome. */
|
|
padding: "pt-(--buzz-top-chrome-height,2.5rem)",
|
|
/** `after:` pseudo-element top offset. */
|
|
afterTop: "after:top-(--buzz-top-chrome-height,2.5rem)",
|
|
/** Horizontal divider at the bottom edge of the global top chrome inset. */
|
|
divider:
|
|
"before:pointer-events-none before:absolute before:inset-x-0 before:top-(--buzz-top-chrome-height,2.5rem) before:h-px before:bg-border/35 before:content-['']",
|
|
/** Shared header backdrop and bottom border below the inset row. */
|
|
headerBase:
|
|
"relative z-40 shrink-0 border-b border-border/35 bg-background/80 backdrop-blur-md supports-backdrop-filter:bg-background/70 dark:bg-background/70 dark:backdrop-blur-xl dark:supports-backdrop-filter:bg-background/55",
|
|
/** Vertical pane divider starting below the global top chrome. */
|
|
verticalDivider:
|
|
"after:pointer-events-none after:absolute after:bottom-0 after:right-0 after:top-(--buzz-top-chrome-height,2.5rem) after:z-40 after:w-px after:bg-border/35 after:content-['']",
|
|
} as const;
|
|
|
|
/** Tailwind class fragments for the global top chrome backdrop strip. */
|
|
export const topChromeBackdrop = {
|
|
/** Height matching the global top chrome search/drag strip. */
|
|
height: "h-(--buzz-top-chrome-height,2.5rem)",
|
|
} as const;
|
|
|
|
/** Tailwind class fragments for measured channel header chrome. */
|
|
export const channelChrome = {
|
|
/** Padding-top that clears the measured channel header chrome. */
|
|
contentPadding: "pt-(--buzz-channel-content-top-padding,5.75rem)",
|
|
/** Absolute/fixed top offset below the measured channel header chrome. */
|
|
top: "top-(--buzz-channel-content-top-padding,5.75rem)",
|
|
/** Height matching the measured channel header chrome. */
|
|
headerHeight: "h-(--buzz-channel-content-top-padding,5.75rem)",
|
|
/** Negative margin for overlaid channel chrome that should not affect flow. */
|
|
negativeMargin: "-mb-(--buzz-channel-content-top-padding,5.75rem)",
|
|
} as const;
|