ece-docs-components 1.0.88 → 1.0.89

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -26,6 +26,109 @@ declare module '@mui/material/styles' {
26
26
  stepIndicatorTextColor?: string;
27
27
  tabBackgroundColor?: string;
28
28
  statusBarBackgroundColor?: string;
29
+ dangerBackground?: string;
30
+ dangerBackgroundHover?: string;
31
+ alertInfoIconColor?: string;
32
+ alertNoteIconColor?: string;
33
+ alertNoteImportantIconColor?: string;
34
+ alertMarkAsReadIconColor?: string;
35
+ };
36
+ statusColors: {
37
+ accepted: {
38
+ highlight: string;
39
+ highlightSelected: string;
40
+ };
41
+ pending: {
42
+ highlight: string;
43
+ highlightSelected: string;
44
+ };
45
+ actionRequired: {
46
+ highlight: string;
47
+ highlightSelected: string;
48
+ };
49
+ declined: {
50
+ highlight: string;
51
+ highlightSelected: string;
52
+ };
53
+ notStarted: {
54
+ highlight: string;
55
+ highlightSelected: string;
56
+ };
57
+ draft: {
58
+ highlight: string;
59
+ highlightSelected: string;
60
+ };
61
+ mandatory: {
62
+ color: string;
63
+ highlight: string;
64
+ highlightSelected: string;
65
+ };
66
+ optional: {
67
+ color: string;
68
+ highlight: string;
69
+ highlightSelected: string;
70
+ };
71
+ unknown: {
72
+ highlight: string;
73
+ highlightSelected: string;
74
+ };
75
+ };
76
+ alertColors: {
77
+ info: {
78
+ background: string;
79
+ border: string;
80
+ color: string;
81
+ };
82
+ success: {
83
+ background: string;
84
+ border: string;
85
+ color: string;
86
+ };
87
+ warning: {
88
+ background: string;
89
+ border: string;
90
+ color: string;
91
+ };
92
+ error: {
93
+ background: string;
94
+ border: string;
95
+ color: string;
96
+ };
97
+ noteInternalLink: {
98
+ background: string;
99
+ border: string;
100
+ color: string;
101
+ };
102
+ noteExternalLink: {
103
+ background: string;
104
+ border: string;
105
+ color: string;
106
+ };
107
+ note: {
108
+ background: string;
109
+ border: string;
110
+ color: string;
111
+ };
112
+ noteImportant: {
113
+ background: string;
114
+ border: string;
115
+ color: string;
116
+ };
117
+ noteTask: {
118
+ background: string;
119
+ border: string;
120
+ color: string;
121
+ };
122
+ noteAssurance: {
123
+ background: string;
124
+ border: string;
125
+ color: string;
126
+ };
127
+ noteShare: {
128
+ background: string;
129
+ border: string;
130
+ color: string;
131
+ };
29
132
  };
30
133
  }
31
134
  interface PaletteOptions {
@@ -42,6 +145,109 @@ declare module '@mui/material/styles' {
42
145
  stepIndicatorTextColor?: string;
43
146
  tabBackgroundColor?: string;
44
147
  statusBarBackgroundColor?: string;
148
+ dangerBackground?: string;
149
+ dangerBackgroundHover?: string;
150
+ alertInfoIconColor?: string;
151
+ alertNoteIconColor?: string;
152
+ alertNoteImportantIconColor?: string;
153
+ alertMarkAsReadIconColor?: string;
154
+ };
155
+ statusColors?: {
156
+ accepted?: {
157
+ highlight: string;
158
+ highlightSelected: string;
159
+ };
160
+ pending?: {
161
+ highlight: string;
162
+ highlightSelected: string;
163
+ };
164
+ actionRequired?: {
165
+ highlight: string;
166
+ highlightSelected: string;
167
+ };
168
+ declined?: {
169
+ highlight: string;
170
+ highlightSelected: string;
171
+ };
172
+ notStarted?: {
173
+ highlight: string;
174
+ highlightSelected: string;
175
+ };
176
+ draft?: {
177
+ highlight: string;
178
+ highlightSelected: string;
179
+ };
180
+ mandatory?: {
181
+ color: string;
182
+ highlight: string;
183
+ highlightSelected: string;
184
+ };
185
+ optional?: {
186
+ color: string;
187
+ highlight: string;
188
+ highlightSelected: string;
189
+ };
190
+ unknown?: {
191
+ highlight: string;
192
+ highlightSelected: string;
193
+ };
194
+ };
195
+ alertColors?: {
196
+ info?: {
197
+ background: string;
198
+ border: string;
199
+ color: string;
200
+ };
201
+ success?: {
202
+ background: string;
203
+ border: string;
204
+ color: string;
205
+ };
206
+ warning?: {
207
+ background: string;
208
+ border: string;
209
+ color: string;
210
+ };
211
+ error?: {
212
+ background: string;
213
+ border: string;
214
+ color: string;
215
+ };
216
+ noteInternalLink?: {
217
+ background: string;
218
+ border: string;
219
+ color: string;
220
+ };
221
+ noteExternalLink?: {
222
+ background: string;
223
+ border: string;
224
+ color: string;
225
+ };
226
+ note?: {
227
+ background: string;
228
+ border: string;
229
+ color: string;
230
+ };
231
+ noteImportant?: {
232
+ background: string;
233
+ border: string;
234
+ color: string;
235
+ };
236
+ noteTask?: {
237
+ background: string;
238
+ border: string;
239
+ color: string;
240
+ };
241
+ noteAssurance?: {
242
+ background: string;
243
+ border: string;
244
+ color: string;
245
+ };
246
+ noteShare?: {
247
+ background: string;
248
+ border: string;
249
+ color: string;
250
+ };
45
251
  };
46
252
  }
47
253
  }
@@ -2,259 +2,233 @@ import { createTheme } from '@mui/material';
2
2
 
3
3
  const ECETheme = createTheme({
4
4
  palette: {
5
- mode: 'light',
5
+ mode: "light",
6
6
  primary: {
7
- main: '#AD46FF',
8
- light: '#AD46FF',
9
- dark: '#AD46FF',
10
- contrastText: '#FFFFFF',
7
+ main: "#AD46FF",
8
+ light: "#D79AFC",
9
+ dark: "#652997",
10
+ contrastText: "#FFFFFF",
11
11
  },
12
12
  secondary: {
13
- main: '#D79AFC',
14
- light: '#D79AFC',
15
- dark: '#D79AFC',
16
- contrastText: '#FFFFFF',
13
+ main: "#D79AFC",
14
+ light: "#D79AFC",
15
+ dark: "#D79AFC",
16
+ contrastText: "#FFFFFF",
17
17
  },
18
18
  error: {
19
- main: '#F56B6B',
20
- light: '#F56B6B',
21
- dark: '#F56B6B',
22
- contrastText: '#FFFFFF',
19
+ main: "#F56B6B",
20
+ light: "#F56B6B",
21
+ dark: "#B71C1C",
22
+ contrastText: "#FFFFFF",
23
23
  },
24
24
  warning: {
25
- main: '#F5D76E',
26
- light: '#F5D76E',
27
- dark: '#F5D76E',
28
- contrastText: '#FFFBFF',
25
+ main: "#F5D76E",
26
+ light: "#F5D76E",
27
+ dark: "#F5D76E",
28
+ contrastText: "#FFFBFF",
29
29
  },
30
30
  info: {
31
- main: '#F5A623',
32
- light: '#F5A623',
33
- dark: '#F5A623',
34
- contrastText: '#FFFFFF',
31
+ main: "#F5A623",
32
+ light: "#F5A623",
33
+ dark: "#F5A623",
34
+ contrastText: "#FFFFFF",
35
35
  },
36
36
  success: {
37
- main: '#A3D977',
38
- light: '#A3D977',
39
- dark: '#A3D977',
40
- contrastText: '#FFFFFF',
37
+ main: "#A3D977",
38
+ light: "#A3D977",
39
+ dark: "#A3D977",
40
+ contrastText: "#FFFFFF",
41
41
  },
42
42
  background: {
43
- default: '#FDFCEE',
44
- paper: '#FEFDF7',
43
+ default: "#FDFCEE",
44
+ paper: "#FEFDF7",
45
45
  },
46
46
  text: {
47
- primary: '#4D3019',
48
- secondary: '#826E5C',
49
- disabled: '#93908F',
47
+ primary: "#4D3019",
48
+ secondary: "#826E5C",
49
+ disabled: "#93908F",
50
50
  },
51
- divider: '#C6C7C0',
51
+ divider: "#C6C7C0",
52
52
  accent: {
53
- main: '#FFEDD1',
53
+ main: "#FFEDD1",
54
54
  },
55
55
  dark: {
56
- main: '#4D3019',
56
+ main: "#4D3019",
57
57
  },
58
58
  light: {
59
- main: '#FEFDF7',
59
+ main: "#FEFDF7",
60
60
  },
61
61
  markedRead: {
62
- main: '#A3D977',
62
+ main: "#A3D977",
63
63
  },
64
64
  custom: {
65
- iconColor: '#AD46FF',
66
- primaryButtonTextColor: '#FFFFFF',
67
- readByBackgroundColor: '#AD46FF1a',
68
- stepIndicatorTextColor: '#FFFFFF',
69
- markAsReadBackgroundColor: '#AD46FF1a',
70
- markAsReadBorderColor: '#AD46FF',
71
- tabBackgroundColor: '#AD46FF1a',
72
- statusBarBackgroundColor: '#F5C98E',
73
- },
74
- },
75
- typography: {
76
- fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'].join(','),
77
- h1: {
78
- color: '#4D3019',
79
- fontWeight: 700,
80
- fontSize: '2.5rem',
81
- lineHeight: 1.2,
82
- },
83
- h2: {
84
- color: '#4D3019',
85
- fontWeight: 700,
86
- fontSize: '2rem',
87
- lineHeight: 1.3,
88
- },
89
- h3: {
90
- color: '#4D3019',
91
- fontWeight: 600,
92
- fontSize: '1.75rem',
93
- lineHeight: 1.3,
94
- },
95
- h4: {
96
- color: '#4D3019',
97
- fontWeight: 600,
98
- fontSize: '1.5rem',
99
- lineHeight: 1.4,
100
- },
101
- h5: {
102
- color: '#4D3019',
103
- fontWeight: 600,
104
- fontSize: '1.25rem',
105
- lineHeight: 1.4,
106
- },
107
- h6: {
108
- color: '#4D3019',
109
- fontWeight: 600,
110
- fontSize: '1rem',
111
- lineHeight: 1.4,
112
- },
113
- body1: {
114
- color: '#4D3019',
115
- fontWeight: 400,
116
- fontSize: '1rem',
117
- lineHeight: 1.5,
118
- },
119
- body2: {
120
- color: '#826E5C',
121
- fontWeight: 400,
122
- fontSize: '0.875rem',
123
- lineHeight: 1.5,
124
- },
125
- subtitle1: {
126
- color: '#4D3019',
127
- fontWeight: 500,
128
- fontSize: '1rem',
129
- lineHeight: 1.5,
130
- },
131
- subtitle2: {
132
- color: '#826E5C',
133
- fontWeight: 500,
134
- fontSize: '0.875rem',
135
- lineHeight: 1.5,
136
- },
137
- button: {
138
- color: '#4D3019',
139
- fontWeight: 500,
140
- fontSize: '0.875rem',
141
- lineHeight: 1.75,
142
- textTransform: 'none',
143
- },
144
- caption: {
145
- color: '#826E5C',
146
- fontWeight: 400,
147
- fontSize: '0.75rem',
148
- lineHeight: 1.66,
149
- },
150
- overline: {
151
- color: '#826E5C',
152
- fontWeight: 500,
153
- fontSize: '0.75rem',
154
- lineHeight: 2.66,
155
- textTransform: 'uppercase',
156
- letterSpacing: '0.08em',
65
+ iconColor: "#AD46FF",
66
+ primaryButtonTextColor: "#FFFFFF",
67
+ readByBackgroundColor: "#AD46FF1a",
68
+ stepIndicatorTextColor: "#FFFFFF",
69
+ markAsReadBackgroundColor: "#AD46FF1a",
70
+ markAsReadBorderColor: "#AD46FF",
71
+ tabBackgroundColor: "#AD46FF1a",
72
+ statusBarBackgroundColor: "#F5C98E",
73
+ // Danger button — moved from Button.tsx hardcode
74
+ dangerBackground: "#D32F2F",
75
+ dangerBackgroundHover: "#B71C1C",
76
+ // Icon colors for Alert variants
77
+ alertInfoIconColor: "#C571FA",
78
+ alertNoteIconColor: "#FF9800",
79
+ alertNoteImportantIconColor: "#D32F2F",
80
+ alertMarkAsReadIconColor: "#5a9c1a",
81
+ },
82
+ // ─── Status highlight colors (NoteBox + Modal) ────────────────────────
83
+ statusColors: {
84
+ accepted: {
85
+ highlight: "#EDF9CD",
86
+ highlightSelected: "#DBF59A",
87
+ },
88
+ pending: {
89
+ highlight: "#F5E2FF",
90
+ highlightSelected: "#EBC7FF",
91
+ },
92
+ actionRequired: {
93
+ highlight: "#FBEEEE",
94
+ highlightSelected: "#FFBCB3",
95
+ },
96
+ declined: {
97
+ highlight: "#FFF6D1",
98
+ highlightSelected: "#FDE58E",
99
+ },
100
+ notStarted: {
101
+ highlight: "#F8C97C",
102
+ highlightSelected: "#F5A623",
103
+ },
104
+ draft: {
105
+ highlight: "#FFEACD",
106
+ highlightSelected: "#FFC365",
107
+ },
108
+ // Requirement types
109
+ mandatory: {
110
+ color: "#F5A623",
111
+ highlight: "#F3BF6B",
112
+ highlightSelected: "#F5A623",
113
+ },
114
+ optional: {
115
+ color: "#F5D76E",
116
+ highlight: "#F3E2A5",
117
+ highlightSelected: "#F5D76E",
118
+ },
119
+ // Fallback for unknown/unmapped state
120
+ unknown: {
121
+ highlight: "#EEEEEE",
122
+ highlightSelected: "#DDDDDD",
123
+ },
157
124
  },
158
- },
159
- shape: {
160
- borderRadius: 4,
161
- },
162
- breakpoints: {
163
- values: {
164
- xs: 320,
165
- sm: 640,
166
- md: 768,
167
- lg: 1024,
168
- xl: 1280,
125
+ // ─── Alert semantic colors (Alert.tsx) ────────────────────────────────
126
+ alertColors: {
127
+ info: {
128
+ background: "#F8F0FC",
129
+ border: "#C269FA",
130
+ color: "#4D3019",
131
+ },
132
+ success: {
133
+ background: "#F0FDF4",
134
+ border: "#BBF7D0",
135
+ color: "#14532D",
136
+ },
137
+ warning: {
138
+ background: "#FEFCE8",
139
+ border: "#FEF08A",
140
+ color: "#713F12",
141
+ },
142
+ error: {
143
+ background: "#FEF2F2",
144
+ border: "#FECACA",
145
+ color: "#7F1D1D",
146
+ },
147
+ noteInternalLink: {
148
+ background: "#FDFCEE",
149
+ border: "#ECE8DF",
150
+ color: "#4D3019",
151
+ },
152
+ noteExternalLink: {
153
+ background: "#FDFCEE",
154
+ border: "#ECE8DF",
155
+ color: "#4D3019",
156
+ },
157
+ note: {
158
+ background: "#FDFCEE",
159
+ border: "#ECE8DF",
160
+ color: "#4D3019",
161
+ },
162
+ noteImportant: {
163
+ background: "#FDEDED",
164
+ border: "#EDA6A6",
165
+ color: "#5F2120",
166
+ },
167
+ noteTask: {
168
+ background: "#FFF4E5",
169
+ border: "#F9C18F",
170
+ color: "#4D3019",
171
+ },
172
+ noteAssurance: {
173
+ background: "#FFF4E5",
174
+ border: "#F9C18F",
175
+ color: "#4D3019",
176
+ },
177
+ noteShare: {
178
+ background: "#F8F0FC",
179
+ border: "#C269FA",
180
+ color: "#4D3019",
181
+ },
169
182
  },
170
183
  },
184
+ // ... (typography, shape, breakpoints unchanged)
171
185
  components: {
172
186
  MuiLink: {
173
187
  styleOverrides: {
174
188
  root: {
175
- color: '#AD46FF',
176
- textDecorationColor: '#AD46FF',
177
- '&:hover': {
178
- color: '#AD46FF',
179
- textDecorationColor: '#AD46FF',
189
+ color: "#AD46FF",
190
+ textDecorationColor: "#AD46FF",
191
+ "&:hover": {
192
+ color: "#AD46FF",
193
+ textDecorationColor: "#AD46FF",
194
+ },
195
+ "&:active": {
196
+ color: "#FFEDD1",
180
197
  },
181
- '&:active': {
182
- color: '#FFEDD1',
198
+ "&:visited": {
199
+ color: "#652997",
183
200
  },
184
- '&:visited': {
185
- color: '#652997',
186
- }
187
201
  },
188
202
  underlineAlways: {
189
- color: '#AD46FF',
190
- textDecorationColor: '#AD46FF',
191
- }
192
- },
193
- },
194
- MuiTypography: {
195
- defaultProps: {
196
- variantMapping: {
197
- h1: 'h1',
198
- h2: 'h2',
199
- h3: 'h3',
200
- h4: 'h4',
201
- h5: 'h5',
202
- h6: 'h6',
203
- subtitle1: 'p',
204
- subtitle2: 'p',
205
- body1: 'p',
206
- body2: 'p',
203
+ color: "#AD46FF",
204
+ textDecorationColor: "#AD46FF",
207
205
  },
208
206
  },
209
207
  },
208
+ // MuiCssBaseline — replace hardcodes with theme token references where possible
210
209
  MuiCssBaseline: {
211
- styleOverrides: {
210
+ styleOverrides: (theme) => ({
212
211
  body: {
213
- WebkitFontSmoothing: 'antialiased',
214
- MozOsxFontSmoothing: 'grayscale',
215
- backgroundColor: '#FDFCEE',
216
- color: '#4D3019',
212
+ WebkitFontSmoothing: "antialiased",
213
+ MozOsxFontSmoothing: "grayscale",
214
+ backgroundColor: theme.palette.background.default,
215
+ color: theme.palette.text.primary,
217
216
  },
218
217
  'input[type="checkbox"], input[type="radio"]': {
219
- accentColor: '#FFEDD1',
220
- },
221
- 'h1, h2, h3, h4, h5, h6': {
222
- fontWeight: 'inherit !important',
223
- },
224
- '.MuiTypography-h1': {
225
- fontWeight: '700 !important',
226
- },
227
- '.MuiTypography-h2': {
228
- fontWeight: '700 !important',
218
+ accentColor: theme.palette.accent.main,
229
219
  },
230
- '.MuiTypography-h3': {
231
- fontWeight: '600 !important',
232
- },
233
- '.MuiTypography-h4': {
234
- fontWeight: '600 !important',
235
- },
236
- '.MuiTypography-h5': {
237
- fontWeight: '600 !important',
238
- },
239
- '.MuiTypography-h6': {
240
- fontWeight: '600 !important',
241
- },
242
- 'a, a.MuiLink-root': {
243
- color: '#AD46FF !important',
244
- '&:hover': {
245
- color: '#AD46FF !important',
220
+ "a, a.MuiLink-root": {
221
+ color: `${theme.palette.primary.main} !important`,
222
+ "&:hover": {
223
+ color: `${theme.palette.primary.main} !important`,
224
+ },
225
+ "&:visited": {
226
+ color: `${theme.palette.primary.dark} !important`,
246
227
  },
247
- '&:visited': {
248
- color: '#652997 !important',
249
- }
250
228
  },
251
- },
229
+ }),
252
230
  },
253
231
  },
254
- appName: 'ECEDocs',
255
- contact: {
256
- email: 'team@ecedocs.co.nz'
257
- }
258
232
  });
259
233
 
260
234
  export { ECETheme as default };