The src/style directory contains all the styles of the application.
1+-- style
2 |
3 +-- data-display
4 +-- feedback
5 +-- inputs
6 +-- lab
7 +-- layout
8 +-- mui-x
9 +-- navigation
10 +-- plugins
11 +-- surfaces
12 +-- theme
13 |-- global.cssThe theme CSS definitions are in the src/style/theme directory. common.css contains light and dark theme specific values as well as the common values among the themes while specific theme color values are defined in their own files. For example, the blue.css file below has the colors for the blue theme.
1/* --------------------------- */
2/* Theme Blue */
3/* --------------------------- */
4
5@layer base {
6 .theme-blue {
7 --primary: 191 100% 46%;
8 --primary-light: 191 100% 56%;
9 --primary-dark: 191 100% 36%;
10
11 --secondary: 207 85% 42%;
12 --secondary-light: 207 85% 52%;
13 --secondary-dark: 207 85% 32%;
14
15 --accent-1: 272 92% 66%;
16 --accent-1-light: 272 92% 76%;
17 --accent-1-dark: 272 92% 56%;
18
19 --accent-2: 311 82% 60%;
20 --accent-2-light: 311 82% 70%;
21 --accent-2-dark: 311 82% 50%;
22
23 --accent-3: 359 87% 70%;
24 --accent-3-light: 359 87% 80%;
25 --accent-3-dark: 359 87% 60%;
26
27 --accent-4: 32 89% 65%;
28 --accent-4-light: 32 89% 75%;
29 --accent-4-dark: 32 89% 55%;
30
31 --accent-5: 85 49% 49%;
32 --accent-5-light: 85 49% 59%;
33 --accent-5-dark: 85 49% 39%;
34
35 --accent-6: 136 49% 49%;
36 --accent-6-light: 136 49% 59%;
37 --accent-6-dark: 136 49% 39%;
38
39 color-scheme: light;
40 }
41 .theme-blue.dark {
42 --primary: 191 100% 46%;
43 --primary-light: 191 100% 56%;
44 --primary-dark: 191 100% 36%;
45
46 --secondary: 207 85% 42%;
47 --secondary-light: 207 85% 52%;
48 --secondary-dark: 207 85% 32%;
49
50 --accent-1: 272 92% 66%;
51 --accent-1-light: 272 92% 76%;
52 --accent-1-dark: 272 92% 56%;
53
54 --accent-2: 311 82% 60%;
55 --accent-2-light: 311 82% 70%;
56 --accent-2-dark: 311 82% 50%;
57
58 --accent-3: 359 87% 70%;
59 --accent-3-light: 359 87% 80%;
60 --accent-3-dark: 359 87% 60%;
61
62 --accent-4: 32 89% 65%;
63 --accent-4-light: 32 89% 75%;
64 --accent-4-dark: 32 89% 55%;
65
66 --accent-5: 85 49% 49%;
67 --accent-5-light: 85 49% 59%;
68 --accent-5-dark: 85 49% 39%;
69
70 --accent-6: 136 49% 49%;
71 --accent-6-light: 136 49% 59%;
72 --accent-6-dark: 136 49% 39%;
73
74 color-scheme: dark;
75 }
76}The rest of the folders contain styles for the various components and plugins, including MUI ones. We used Tailwind to extend and change styles. An example css file for the MUI Avatar component.
1/* --------------------------- */
2/* Avatar */
3/* --------------------------- */
4
5@layer utilities {
6 .MuiAvatar-root {
7 @apply bg-grey-300 font-body h-9 w-9 border-0! text-sm font-semibold outline-2 -outline-offset-1 outline-transparent;
8
9 &.large {
10 @apply h-10 w-10;
11
12 &.MuiAvatar-circular {
13 @apply rounded-lg;
14 }
15 }
16
17 &.medium {
18 @apply h-9 w-9;
19
20 &.MuiAvatar-circular {
21 @apply rounded-md;
22 }
23 }
24
25 &.small {
26 @apply h-8 w-8 text-xs;
27
28 &.MuiAvatar-circular {
29 @apply rounded;
30 }
31 }
32
33 &.tiny {
34 @apply h-7 w-7 text-xs;
35
36 &.MuiAvatar-circular {
37 @apply rounded-sm;
38 }
39 }
40
41 &.nano {
42 @apply h-4 w-4 text-xs;
43
44 &.MuiAvatar-circular {
45 @apply rounded-xs;
46 }
47 }
48 }
49
50 .MuiAvatar-circular {
51 @apply rounded-md;
52 }
53
54 .MuiAvatar-rounded {
55 @apply rounded-sm;
56 }
57
58 .MuiAvatarGroup-root {
59 &.large .MuiAvatar-root {
60 @apply h-10 w-10;
61 }
62
63 &.medium .MuiAvatar-root {
64 @apply h-9 w-9;
65 }
66
67 &.small .MuiAvatar-root {
68 @apply h-8 w-8 text-xs;
69 }
70
71 &.tiny .MuiAvatar-root {
72 @apply h-7 w-7 text-xs;
73 }
74
75 &.nano .MuiAvatar-root {
76 @apply h-4 w-4 text-xs;
77 }
78 }
79
80 .MuiAvatarGroup-avatar {
81 @apply outline-background-paper outline-2 -outline-offset-1;
82 }
83}