Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208import { vars } from '@luke-ui/react/theme';import { style } from '@vanilla-extract/css';import { docsMaxInlineSize, docsMinInlineSize, docsSidebarMaxInlineSize, docsSidebarMinInlineSize, docsTabletMaxInlineSize, docsTabletMinInlineSize,} from '../lib/docs-container-queries.js';import { overlayMotion } from '../lib/overlay-motion.js';import { SITE_HEADER_BLOCK_SIZE } from './site-header-size.js';
export const header = style({ '@layer': { components: { alignItems: 'center', backgroundColor: vars.color.surface.base, borderBlockEnd: `1px solid ${vars.color.border.decorative}`, display: 'flex', flexShrink: 0, flexWrap: 'wrap', gap: vars.space.sp12, paddingInline: vars.space.sp16, '@container': { [docsTabletMinInlineSize]: { columnGap: vars.space.sp16, paddingInline: vars.space.sp24, }, }, }, },});
export const wordmark = style({ '@layer': { components: { alignItems: 'center', color: vars.color.text.primary, display: 'flex', fontSize: vars.font.label.fontSize, fontWeight: vars.font.weight.emphasis, minBlockSize: SITE_HEADER_BLOCK_SIZE, textDecoration: 'none', whiteSpace: 'nowrap', }, },});
export const destinations = style({ '@layer': { components: { alignItems: 'center', columnGap: vars.space.sp16, display: 'flex', inlineSize: '100%', order: 1, paddingBlockEnd: vars.space.sp8, '@container': { [docsTabletMinInlineSize]: { inlineSize: 'auto', minBlockSize: SITE_HEADER_BLOCK_SIZE, order: 0, paddingBlockEnd: 0, }, }, }, },});
export const destinationsWithSidebar = style({ '@layer': { components: { '@container': { [docsSidebarMaxInlineSize]: { display: 'none', }, }, }, },});
export const destination = style({ '@layer': { components: { alignItems: 'center', color: vars.color.text.secondary, display: 'inline-flex', fontSize: vars.font.label.fontSize, textDecoration: 'none', transition: `color ${vars.motion.duration.feedback} ${vars.motion.easing.standard}`, selectors: { '&:hover': { color: vars.color.text.primary, }, }, '@media': { '(prefers-reduced-motion: reduce)': { transition: 'none', }, }, }, },});
export const activeDestination = style({ '@layer': { components: { color: vars.color.text.primary, fontWeight: vars.font.weight.emphasis, }, },});
export const actions = style({ '@layer': { components: { alignItems: 'center', columnGap: vars.space.sp8, display: 'flex', flexShrink: 0, marginInlineStart: 'auto', minBlockSize: SITE_HEADER_BLOCK_SIZE, }, },});
/** Min width where the labelled wide search fits beside destination links on one header row. */const WIDE_SEARCH_MIN_WIDTH_PX = 840;
export const wideSearch = style({ '@layer': { components: { inlineSize: '10rem', '@container': { [docsMaxInlineSize(WIDE_SEARCH_MIN_WIDTH_PX)]: { display: 'none', }, [docsSidebarMinInlineSize]: { inlineSize: '14rem', }, }, }, },});export const compactSearch = style({ '@layer': { components: { '@container': { [docsMinInlineSize(WIDE_SEARCH_MIN_WIDTH_PX)]: { display: 'none', }, }, }, },});export const desktopTheme = style({ '@layer': { components: { '@container': { [docsTabletMaxInlineSize]: { display: 'none', }, }, }, },});
export const mobileThemeTrigger = style({ '@layer': { components: { '@container': { [docsTabletMinInlineSize]: { display: 'none', }, }, }, },});
export const appearancePopover = style({ '@layer': { components: { // The popover opens below its trigger, so it settles down from just above. ...overlayMotion({ hidden: { opacity: 0, translate: '0 -4px' }, properties: ['opacity', 'translate'], rule: { backgroundColor: vars.color.surface.overlay, border: `1px solid ${vars.color.border.decorative}`, borderRadius: vars.radius.surface, boxShadow: vars.depth.floating, maxInlineSize: 'calc(100vw - 2rem)', padding: vars.space.sp8, translate: 'none', zIndex: 50, }, }), }, },});
export const appearanceDialog = style({ '@layer': { components: {}, },});