Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120import { vars } from '@luke-ui/react/theme';import { globalStyle, style } from '@vanilla-extract/css';import { docsTabletMinWidthMedia } from '../lib/docs-container-queries.js';
export const MIN_RESIZABLE_CARD_WIDTH = 640;const RESIZE_GUTTER_WIDTH = vars.space['24'];const OUTSIDE_STRIP_WIDTH = vars.space['12'];
const PREVIEW_CARD_CONTAINER = 'example-preview-card';const previewCardResizable = `${PREVIEW_CARD_CONTAINER} (inline-size >= ${MIN_RESIZABLE_CARD_WIDTH}px)`;
// Name the card container so shell queries keep measuring the root.export const previewGroup = style({ '@layer': { components: { containerName: PREVIEW_CARD_CONTAINER, containerType: 'inline-size', display: 'flex', isolation: 'isolate', overflow: 'hidden', }, },});
// Inline panel styles set `min-width: 0`. Keep the outside strip open.globalStyle(`${previewGroup} > [data-panel]:last-child`, { '@layer': { components: { '@media': { [docsTabletMinWidthMedia]: { '@container': { [previewCardResizable]: { minInlineSize: `${OUTSIDE_STRIP_WIDTH} !important`, }, }, }, }, }, },});
export const previewCanvas = style({ '@layer': { components: { containerType: 'inline-size', '@media': { [docsTabletMinWidthMedia]: { '@container': { [previewCardResizable]: { paddingInlineEnd: RESIZE_GUTTER_WIDTH, }, }, }, }, }, },});
export const previewOutside = style({ '@layer': { components: { backgroundColor: `color-mix(in oklab, ${vars.color.surface.subdued} 50%, transparent)`, }, },});
export const previewSeparator = style({ '@layer': { components: { backgroundColor: vars.color.border.decorative, cursor: 'col-resize', display: 'none', flexShrink: 0, inlineSize: '1px', position: 'relative', zIndex: 10, '@media': { [docsTabletMinWidthMedia]: { '@container': { [previewCardResizable]: { display: 'block', }, }, }, }, }, },});
export const previewGripState = style({ '@layer': { components: { borderColor: vars.color.border.decorative, boxShadow: vars.shadow.resting, color: vars.color.text.secondary, pointerEvents: 'none', transform: 'translate(-50%, -50%)', transitionDuration: vars.motion.feedback.duration, transitionProperty: 'box-shadow, border-color', transitionTimingFunction: vars.motion.feedback.easing, selectors: { [`${previewSeparator}[data-separator=hover] &`]: { borderColor: `color-mix(in oklab, ${vars.color.text.secondary} 80%, transparent)`, }, [`${previewSeparator}[data-separator=active] &`]: { borderColor: vars.color.text.secondary, }, [`${previewSeparator}[data-separator=focus] &`]: { boxShadow: `0 0 0 2px ${vars.color.border.focus}`, }, }, '@media': { '(prefers-reduced-motion: reduce)': { transition: 'none', }, }, }, },});