Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
4.3 kB · 186 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187import { vars } from '@luke-ui/react/theme';import { globalStyle, style } from '@vanilla-extract/css';
export const root = style({ '@layer': { components: { backgroundColor: vars.color.surface.subdued, borderColor: vars.color.border.decorative, borderRadius: vars.radius.surface, borderStyle: 'solid', borderWidth: '1px', color: vars.color.text.primary, display: 'flex', flexDirection: 'column', fontFamily: vars.font.family.code, fontSize: vars.font.caption.fontSize, lineHeight: vars.font.caption.lineHeight, maxInlineSize: '100%', overflow: 'hidden', position: 'relative', }, },});
/** * Vertical rhythm for code blocks in MDX flow. A `not-prose` root gets no Prose margin, so the * block supplies its own; a parent Stack/Cluster owns spacing elsewhere. */export const mdxFence = style({ '@layer': { components: { marginBlockStart: vars.space.sp32, }, },});
export const flush = style({ '@layer': { components: { borderInlineWidth: 0, borderRadius: 'inherit', borderBlockEndWidth: 0, overflow: 'visible', }, },});
export const header = style({ '@layer': { components: { alignItems: 'center', borderBlockEndColor: vars.color.border.decorative, borderBlockEndStyle: 'solid', borderBlockEndWidth: '1px', display: 'flex', gap: vars.space.sp8, minBlockSize: vars.controlSize.medium, paddingBlock: vars.space.sp4, paddingInline: vars.space.sp12, }, },});
export const title = style({ '@layer': { components: { color: vars.color.text.secondary, flex: '1 1 auto', fontFamily: vars.font.family.body, fontSize: vars.font.label.fontSize, lineHeight: vars.font.label.lineHeight, minInlineSize: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }, },});
export const actions = style({ '@layer': { components: { alignItems: 'center', display: 'flex', flexShrink: 0, gap: vars.space.sp4, marginInlineStart: 'auto', }, },});
/** * Titleless copy overlays the full-width scrollport (no side column). * Block offset centres the control on the first code line (viewport pad + half line − half control). */export const overlayActions = style({ '@layer': { components: { backgroundColor: vars.color.surface.subdued, insetBlockStart: `calc(${vars.space.sp12} + (${vars.font.caption.lineHeight} / 2) - (${vars.controlSize.small} / 2))`, insetInlineEnd: vars.space.sp8, position: 'absolute', zIndex: 1, }, },});
export const viewport = style({ '@layer': { components: { maxBlockSize: '37.5rem', minInlineSize: 0, overflow: 'auto', paddingBlock: vars.space.sp12, paddingInline: vars.space.sp16, selectors: { '&:focus-visible': { outlineColor: vars.color.border.focus, outlineOffset: '-2px', outlineStyle: 'solid', outlineWidth: '2px', }, }, }, },});
/** * Clear the overlay copy without a side column. Padding stays on the full-width * scrollport so the recessed surface continues under the button. */export const viewportWithOverlayCopy = style({ '@layer': { components: { paddingInlineEnd: vars.space.sp48, }, },});
export const pre = style({ '@layer': { components: { // max-content so long lines widen the scrollport; min 100% so short blocks fill the frame. inlineSize: 'max-content', margin: 0, minInlineSize: '100%', overflow: 'visible', whiteSpace: 'pre', }, },});
globalStyle(`${pre} code`, { '@layer': { components: { // Reset inline-code chrome so highlighted lines do not look like inline `code`. backgroundColor: 'transparent', borderRadius: 0, borderWidth: 0, display: 'flex', flexDirection: 'column', fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'inherit', padding: 0, }, },});
// Empty lines are flex items and collapse to zero height without a minimum.globalStyle(`${pre} code .line`, { '@layer': { components: { minBlockSize: vars.font.caption.lineHeight, }, },});
// Dual-theme Shiki spans: light-dark picks the active colour mode.globalStyle(`${pre} :is(.shiki, code) span`, { '@layer': { components: { color: 'light-dark(var(--shiki-light), var(--shiki-dark))', }, },});