Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
5.8 kB · 266 lines
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267import { vars } from '@luke-ui/react/theme';import type { ComplexStyleRule } from '@vanilla-extract/css';import { globalStyle, style } from '@vanilla-extract/css';import { docsSidebarMinWidth } from '../lib/docs-sidebar-media.js';import { SITE_HEADER_BLOCK_SIZE } from './site-header-size.js';
export const shell = style({ '@layer': { recipes: { // The retained Fumadocs DocsPage TOC uses these rows to sit below the header. // Remove them when #673 replaces the article and TOC. vars: { '--fd-docs-row-1': '0px', '--fd-docs-row-2': SITE_HEADER_BLOCK_SIZE, }, backgroundColor: vars.color.surface.canvas, display: 'grid', gridTemplateAreas: '"header" "toc-popover" "main"', gridTemplateColumns: 'minmax(0, 1fr)', gridTemplateRows: 'auto auto minmax(0, 1fr)', minBlockSize: '100dvh', minInlineSize: 0, '@media': { [docsSidebarMinWidth]: { gridTemplateAreas: '"header header" "sidebar toc-popover" "sidebar main"', gridTemplateColumns: '16rem minmax(0, 1fr)', }, '(min-width: 1280px)': { gridTemplateAreas: '"header header header" "sidebar toc-popover toc" "sidebar main toc"', gridTemplateColumns: '16rem minmax(0, 1fr) 16rem', }, }, }, },});
export const header = style({ '@layer': { recipes: { gridArea: 'header', insetBlockStart: 0, position: 'sticky', zIndex: 10, }, },});
export const sidebar = style({ '@layer': { recipes: { backgroundColor: vars.color.surface.canvas, borderInlineEnd: `1px solid ${vars.color.border.decorative}`, display: 'none', gridArea: 'sidebar', insetBlockStart: SITE_HEADER_BLOCK_SIZE, maxBlockSize: `calc(100dvh - ${SITE_HEADER_BLOCK_SIZE})`, overflow: 'auto', paddingBlock: vars.space.sp32, paddingInline: vars.space.sp16, position: 'sticky', '@media': { [docsSidebarMinWidth]: { display: 'block', }, }, }, },});
export const nav = style({ '@layer': { recipes: { color: vars.color.text.primary, fontSize: vars.font.label.fontSize, lineHeight: vars.font.label.lineHeight, }, },});
export const navList = style({ '@layer': { recipes: { display: 'grid', gap: vars.space.sp4, listStyle: 'none', margin: 0, padding: 0, }, },});
export const nestedList = style({ '@layer': { recipes: { display: 'grid', gap: vars.space.sp4, listStyle: 'none', margin: 0, padding: 0, }, },});
const sectionLabel = { borderBlockStart: `1px solid ${vars.color.border.decorative}`, color: vars.color.text.secondary, fontSize: vars.font.caption.fontSize, fontWeight: vars.font.weight.label, lineHeight: vars.font.caption.lineHeight, marginBlockStart: vars.space.sp32, paddingBlockEnd: vars.space.sp8, paddingBlockStart: vars.space.sp32, paddingInline: vars.space.sp8,} as const satisfies ComplexStyleRule;
export const separator = style({ '@layer': { recipes: sectionLabel, },});
globalStyle(`${navList} > ${separator}:first-child`, { '@layer': { recipes: { borderBlockStart: 0, marginBlockStart: 0, paddingBlockStart: 0, }, },});
const navControl = { alignItems: 'center', borderRadius: vars.radius.control, color: vars.color.text.secondary, columnGap: vars.space.sp8, display: 'flex', inlineSize: '100%', minBlockSize: '2rem', paddingBlock: vars.space.sp4, paddingInline: vars.space.sp8, textAlign: 'start', textDecoration: 'none', selectors: { '&:hover': { backgroundColor: vars.color.background.neutral.subtle.hover, color: vars.color.text.primary, }, // Inset the global ring so the scrolling sidebar doesn't clip it. '&:focus-visible': { outlineOffset: '-2px', }, '&[aria-current="page"]': { backgroundColor: vars.color.background.accent.subtle.rest, color: vars.color.text.primary, }, },} as const satisfies ComplexStyleRule;
export const navLink = style({ '@layer': { recipes: navControl, },});
export const folderLabel = style({ '@layer': { recipes: { ...sectionLabel, columnGap: vars.space.sp8, display: 'flex', }, },});
export const mobileTrigger = style({ '@layer': { recipes: { '@media': { [docsSidebarMinWidth]: { display: 'none', }, }, }, },});
export const drawerOverlay = style({ '@layer': { recipes: { backgroundColor: vars.color.overlay.backdrop, inset: 0, position: 'fixed', zIndex: 100, }, },});
export const drawerModal = style({ '@layer': { recipes: { backgroundColor: vars.color.surface.canvas, blockSize: '100%', boxShadow: vars.depth.overlay, inlineSize: 'min(22rem, 90vw)', marginInlineStart: 'auto', }, },});
export const drawerDialog = style({ '@layer': { recipes: { blockSize: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto', padding: vars.space.sp16, }, },});
export const drawerHeader = style({ '@layer': { recipes: { alignItems: 'center', display: 'flex', fontWeight: vars.font.weight.heading, justifyContent: 'space-between', marginBlockEnd: vars.space.sp16, }, },});
export const drawerSiteNav = style({ '@layer': { recipes: { borderBlockEnd: `1px solid ${vars.color.border.decorative}`, display: 'grid', gap: vars.space.sp4, marginBlockEnd: vars.space.sp16, paddingBlockEnd: vars.space.sp16, }, },});
globalStyle(`${drawerSiteNav} a`, { '@layer': { recipes: { borderRadius: vars.radius.control, color: vars.color.text.primary, paddingBlock: vars.space.sp4, paddingInline: vars.space.sp8, textDecoration: 'none', }, },});
globalStyle(`${drawerSiteNav} a[aria-current="page"]`, { '@layer': { recipes: { backgroundColor: vars.color.background.accent.subtle.rest, color: vars.color.text.primary, }, },});