1import { GrafanaTheme2 } from '@grafana/data';
2import { css } from '@emotion/css';
3import { DEFAULT_ANNOTATION_COLOR } from '@grafana/ui';
4
5export const getCommonAnnotationStyles = (theme: GrafanaTheme2) => {
6  return (annotation?: AnnotationsDataFrameViewDTO) => {
7    const color = theme.visualization.getColorByName(annotation?.color || DEFAULT_ANNOTATION_COLOR);
8    return {
9      markerTriangle: css`
10        width: 0;
11        height: 0;
12        border-left: 4px solid transparent;
13        border-right: 4px solid transparent;
14        border-bottom: 4px solid ${color};
15      `,
16      markerBar: css`
17        display: block;
18        width: calc(100%);
19        height: 5px;
20        background: ${color};
21      `,
22    };
23  };
24};
25