aboutsummaryrefslogtreecommitdiffstats
path: root/subprojects/frontend/src/graph/GraphTheme.tsx
blob: 41ba6ba52e23ff25c756fc82168426839521a5dc (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/*
 * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
 *
 * SPDX-License-Identifier: EPL-2.0
 */

import { styled, type CSSObject } from '@mui/material/styles';

function createEdgeColor(suffix: string, color: string): CSSObject {
  return {
    [`& .edge-${suffix}`]: {
      '& text': {
        fill: color,
      },
      '& [stroke="black"]': {
        stroke: color,
      },
      '& [fill="black"]': {
        fill: color,
      },
    },
  };
}

export default styled('div', {
  name: 'GraphTheme',
})(({ theme }) => ({
  '& svg': {
    userSelect: 'none',
    '& .node': {
      '& text': {
        fontFamily: theme.typography.fontFamily,
        fill: theme.palette.text.primary,
      },
      '& [stroke="black"]': {
        stroke: theme.palette.text.primary,
      },
      '& [fill="green"]': {
        fill:
          theme.palette.mode === 'dark'
            ? theme.palette.primary.dark
            : theme.palette.primary.light,
      },
      '& [fill="white"]': {
        fill: theme.palette.background.default,
        stroke: theme.palette.background.default,
      },
    },
    '& .edge': {
      '& text': {
        fontFamily: theme.typography.fontFamily,
        fill: theme.palette.text.primary,
      },
      '& [stroke="black"]': {
        stroke: theme.palette.text.primary,
      },
      '& [fill="black"]': {
        fill: theme.palette.text.primary,
      },
    },
    ...createEdgeColor('UNKNOWN', theme.palette.text.secondary),
    ...createEdgeColor('ERROR', theme.palette.error.main),
  },
}));