69 lines
2 KiB
TypeScript
69 lines
2 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
export const AutocompleteMenuBase = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'relative',
|
|
},
|
|
]);
|
|
|
|
export const AutocompleteMenuContainer = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
bottom: config.space.S200,
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: config.zIndex.Max,
|
|
},
|
|
]);
|
|
|
|
// Dawn popover shell — a single hairline-bordered panel that floats above the
|
|
// composer, mirroring the cmdK result-list look (panel #181a20 + faint fleet ring).
|
|
export const AutocompleteMenu = style([
|
|
DefaultReset,
|
|
{
|
|
maxHeight: '40vh',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
border: `${toRem(1)} solid rgba(255, 255, 255, 0.07)`,
|
|
borderRadius: config.radii.R400,
|
|
boxShadow: '0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(149, 128, 255, 0.15)',
|
|
overflow: 'hidden',
|
|
},
|
|
]);
|
|
|
|
// UPPERCASE, letter-spaced, muted mono section label — replaces the folds Header.
|
|
export const AutocompleteMenuHeader = style([
|
|
DefaultReset,
|
|
{
|
|
flexShrink: 0,
|
|
display: 'block',
|
|
padding: `${config.space.S200} ${config.space.S300} ${config.space.S100}`,
|
|
fontFamily: 'var(--font-mono)',
|
|
fontSize: toRem(10),
|
|
lineHeight: toRem(14),
|
|
fontWeight: config.fontWeight.W500,
|
|
letterSpacing: '0.12em',
|
|
textTransform: 'uppercase',
|
|
color: color.SurfaceVariant.OnContainer,
|
|
opacity: 0.5,
|
|
},
|
|
]);
|
|
|
|
// JetBrains Mono technical handle (@user:server, #alias:server, !id, /command sig)
|
|
// rendered at a muted tone inside an autocomplete row.
|
|
export const AutocompleteMono = style({
|
|
fontFamily: 'var(--font-mono)',
|
|
opacity: 0.6,
|
|
});
|
|
|
|
// Fleet highlight for the first (Tab-target) row: faint violet wash + a 2px
|
|
// fleet left-border. Purely visual — reflects the onTabPress 'first item' logic.
|
|
export const AutocompleteActiveRow = style({
|
|
backgroundColor: 'rgba(149, 128, 255, 0.08)',
|
|
boxShadow: `inset ${toRem(2)} 0 0 0 ${color.Primary.Main}`,
|
|
});
|