Quick Search Highlight Text (views/highlight-text.css.ts)

Styles text and keywords for quick search results, highlighting matches and truncating overflow.

// Source: https://github.com/toeverything/AFFiNE | License: MIT | Copyright 2022-present TOEVERYTHING PTE. LTD. and its affiliates
// Provided via justclaw.it.com; keep this notice with the code.
import { cssVar } from '@toeverything/theme';
import { style } from '@vanilla-extract/css';

export const highlightText = style({
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
});
export const highlightKeyword = style({
  display: 'inline-block',
  verticalAlign: 'bottom',
  color: cssVar('primaryColor'),
  whiteSpace: 'pre',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  flexShrink: 0,
  maxWidth: '360px',
});