@opengeoweb/theme 2.1.3 → 2.1.4

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.
Files changed (11) hide show
  1. package/README.md +1 -6
  2. package/{theme.esm.js → index.esm.js} +400 -268
  3. package/{theme.umd.js → index.umd.js} +405 -273
  4. package/lib/components/Theme/ThemeContext.d.ts +1 -1
  5. package/lib/components/Theme/darkTheme.d.ts +1 -1
  6. package/lib/components/Theme/gwTheme.d.ts +1 -7
  7. package/lib/components/Theme/lightTheme.d.ts +1 -1
  8. package/lib/components/Theme/types.d.ts +1 -1
  9. package/lib/components/Theme/utils.d.ts +3 -3
  10. package/lib/stories/Backdrop.stories.d.ts +1 -0
  11. package/package.json +7 -7
package/{theme.umd.js → index.umd.js} RENAMED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@material-ui/core'), require('react')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@material-ui/core', 'react'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.core, global.React));
5
- })(this, (function (exports, core, React) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('react')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', '@mui/material', 'react'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Theme = {}, global.material, global.React));
5
+ })(this, (function (exports, material, React) { 'use strict';
6
6
 
7
7
  function _interopNamespace(e) {
8
8
  if (e && e.__esModule) return e;
@@ -134,9 +134,9 @@
134
134
  };
135
135
  var BORDER_RADIUS = 3;
136
136
  var createTheme = function createTheme(paletteType, geowebColors, shadows) {
137
- return core.createMuiTheme({
137
+ return material.createTheme({
138
138
  palette: {
139
- type: paletteType,
139
+ mode: paletteType,
140
140
  secondary: {
141
141
  main: geowebColors.typographyAndIcons.iconLinkActive
142
142
  },
@@ -157,243 +157,303 @@
157
157
  fontFamily: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'].join(',')
158
158
  },
159
159
  shadows: shadows,
160
- overrides: {
160
+ components: {
161
161
  MuiCssBaseline: {
162
- '@global': {
163
- body: {
164
- fontSmoothing: 'auto'
165
- }
166
- }
162
+ styleOverrides: "\n html {\n -webkit-font-smoothing: auto;\n }\n "
167
163
  },
168
164
  MuiMenuItem: {
169
- root: {
170
- fontSize: '0.875rem',
171
- letterSpacing: '0.25px',
172
- ':not(:last-child)&:after': {
173
- content: '""',
174
- position: 'absolute',
175
- width: '100%',
176
- height: 1,
177
- background: geowebColors.greys.accessible,
178
- bottom: 0,
179
- left: 0,
180
- opacity: 0.5
181
- },
182
- '&.Mui-selected': {
183
- background: 'none',
184
- boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive
165
+ styleOverrides: {
166
+ root: {
167
+ fontSize: '0.875rem',
168
+ letterSpacing: '0.25px',
169
+ ':not(:last-child)&:after': {
170
+ content: '""',
171
+ position: 'absolute',
172
+ width: '100%',
173
+ height: 1,
174
+ background: geowebColors.greys.accessible,
175
+ bottom: 0,
176
+ left: 0,
177
+ opacity: 0.5
178
+ },
179
+ '&.Mui-selected': {
180
+ background: 'none',
181
+ boxShadow: "inset 4px 0px 0px 0px " + geowebColors.typographyAndIcons.iconLinkActive
182
+ }
185
183
  }
186
184
  }
187
185
  },
188
186
  MuiRadio: {
189
- root: {
190
- color: geowebColors.typographyAndIcons.iconLinkActive
187
+ styleOverrides: {
188
+ root: {
189
+ color: geowebColors.typographyAndIcons.iconLinkActive,
190
+ '&.Mui-disabled': {
191
+ color: geowebColors.typographyAndIcons.iconLinkDisabled + "!important"
192
+ },
193
+ '&.Mui-checked': {
194
+ color: geowebColors.typographyAndIcons.iconLinkActive
195
+ }
196
+ }
197
+ }
198
+ },
199
+ MuiCheckbox: {
200
+ styleOverrides: {
201
+ root: {
202
+ color: geowebColors.typographyAndIcons.iconLinkActive,
203
+ '&.Mui-disabled': {
204
+ color: geowebColors.typographyAndIcons.iconLinkDisabled + "!important"
205
+ },
206
+ '&.Mui-checked': {
207
+ color: geowebColors.typographyAndIcons.iconLinkActive
208
+ }
209
+ }
191
210
  }
192
211
  },
193
212
  MuiPaper: {
194
- outlined: {
195
- borderColor: geowebColors.cards.cardContainerBorder
213
+ styleOverrides: {
214
+ root: {
215
+ backgroundImage: 'unset'
216
+ },
217
+ outlined: {
218
+ borderColor: geowebColors.cards.cardContainerBorder
219
+ }
196
220
  }
197
221
  },
198
222
  MuiCard: {
199
- root: {
200
- backgroundColor: geowebColors.cards.cardContainer
223
+ styleOverrides: {
224
+ root: {
225
+ backgroundColor: geowebColors.cards.cardContainer
226
+ }
201
227
  }
202
228
  },
203
229
  MuiSlider: {
204
- root: {
205
- color: geowebColors.typographyAndIcons.iconLinkActive
230
+ styleOverrides: {
231
+ root: {
232
+ color: geowebColors.typographyAndIcons.iconLinkActive
233
+ }
206
234
  }
207
235
  },
208
236
  MuiTable: {
209
- root: {
210
- borderSpacing: '0 0.25rem',
211
- borderCollapse: 'separate'
237
+ styleOverrides: {
238
+ root: {
239
+ borderSpacing: '0 0.25rem',
240
+ borderCollapse: 'separate'
241
+ }
212
242
  }
213
243
  },
214
244
  MuiTableRow: {
215
- head: {
216
- '&:hover': {
217
- boxShadow: shadows[0]
218
- }
219
- },
220
- root: {
221
- transition: 'box-shadow 100ms ease-out',
222
- boxShadow: shadows[0],
223
- borderRadius: BORDER_RADIUS,
224
- '&:hover': {
225
- boxShadow: shadows[1]
245
+ styleOverrides: {
246
+ head: {
247
+ '&:hover': {
248
+ boxShadow: shadows[0]
249
+ }
226
250
  },
227
- position: 'relative'
251
+ root: {
252
+ transition: 'box-shadow 100ms ease-out',
253
+ boxShadow: shadows[0],
254
+ borderRadius: BORDER_RADIUS,
255
+ '&:hover': {
256
+ boxShadow: shadows[1]
257
+ },
258
+ position: 'relative'
259
+ }
228
260
  }
229
261
  },
230
262
  MuiTableCell: {
231
- head: {
232
- borderBottom: 'none',
233
- fontSize: '0.875rem',
234
- fontWeight: 400
235
- },
236
- body: {
237
- padding: 12,
238
- fontWeight: 500,
239
- backgroundColor: geowebColors.background.surface,
240
- borderStyle: 'solid',
241
- borderColor: 'transparent',
242
- borderWidth: 1,
243
- borderTopColor: geowebColors.cards.cardContainerBorder,
244
- borderBottomColor: geowebColors.cards.cardContainerBorder,
245
- '&:first-child': {
246
- borderLeftColor: geowebColors.cards.cardContainerBorder,
247
- borderRadius: BORDER_RADIUS + "px 0px 0px " + BORDER_RADIUS + "px"
263
+ styleOverrides: {
264
+ head: {
265
+ borderBottom: 'none',
266
+ fontSize: '0.875rem',
267
+ fontWeight: 400
248
268
  },
249
- '&:last-child': {
250
- borderRightColor: geowebColors.cards.cardContainerBorder,
251
- borderRadius: "0px " + BORDER_RADIUS + "px " + BORDER_RADIUS + "px 0px"
269
+ body: {
270
+ padding: 12,
271
+ fontWeight: 500,
272
+ backgroundColor: geowebColors.background.surface,
273
+ borderStyle: 'solid',
274
+ borderColor: 'transparent',
275
+ borderWidth: 1,
276
+ borderTopColor: geowebColors.cards.cardContainerBorder,
277
+ borderBottomColor: geowebColors.cards.cardContainerBorder,
278
+ '&:first-child': {
279
+ borderLeftColor: geowebColors.cards.cardContainerBorder,
280
+ borderRadius: BORDER_RADIUS + "px 0px 0px " + BORDER_RADIUS + "px"
281
+ },
282
+ '&:last-child': {
283
+ borderRightColor: geowebColors.cards.cardContainerBorder,
284
+ borderRadius: "0px " + BORDER_RADIUS + "px " + BORDER_RADIUS + "px 0px"
285
+ }
252
286
  }
253
287
  }
254
288
  },
255
289
  MuiTabs: {
256
- root: {
257
- position: 'relative',
258
- '&:after': {
259
- content: '""',
260
- position: 'absolute',
261
- bottom: 0,
262
- height: 1,
263
- width: '100%',
264
- zIndex: 0,
265
- backgroundColor: hex2rgba(geowebColors.greys.accessible, 0.2)
290
+ styleOverrides: {
291
+ root: {
292
+ position: 'relative',
293
+ '&:after': {
294
+ content: '""',
295
+ position: 'absolute',
296
+ bottom: 0,
297
+ height: 1,
298
+ width: '100%',
299
+ zIndex: 0,
300
+ backgroundColor: hex2rgba(geowebColors.greys.accessible, 0.2)
301
+ }
302
+ },
303
+ indicator: {
304
+ zIndex: 1,
305
+ backgroundColor: geowebColors.typographyAndIcons.iconLinkActive
266
306
  }
267
- },
268
- indicator: {
269
- zIndex: 1,
270
- backgroundColor: geowebColors.typographyAndIcons.iconLinkActive
271
307
  }
272
308
  },
273
309
  MuiTab: {
274
- root: {
275
- textTransform: 'initial',
276
- '&.Mui-selected': {
277
- color: geowebColors.typographyAndIcons.iconLinkActive
278
- },
279
- '&:hover': {
280
- opacity: 1,
281
- color: geowebColors.typographyAndIcons.iconLinkActive,
282
- backgroundColor: geowebColors.tab.mouseOver.rgba
310
+ styleOverrides: {
311
+ root: {
312
+ textTransform: 'initial',
313
+ '&.Mui-selected': {
314
+ color: geowebColors.typographyAndIcons.iconLinkActive
315
+ },
316
+ '&:hover': {
317
+ opacity: 1,
318
+ color: geowebColors.typographyAndIcons.iconLinkActive,
319
+ backgroundColor: geowebColors.tab.mouseOver.rgba
320
+ }
283
321
  }
284
322
  }
285
323
  },
286
324
  MuiListItem: {
287
- root: {
288
- color: geowebColors.typographyAndIcons.text
289
- },
290
- divider: {
291
- borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
325
+ styleOverrides: {
326
+ root: {
327
+ color: geowebColors.typographyAndIcons.text,
328
+ fontSize: '14px'
329
+ },
330
+ divider: {
331
+ borderBottomColor: hex2rgba(geowebColors.greys.accessible, 0.2)
332
+ }
292
333
  }
293
334
  },
294
335
  MuiBackdrop: {
295
- root: {
296
- backgroundColor: geowebColors.backdrops.black.rgba
336
+ styleOverrides: {
337
+ root: {
338
+ backgroundColor: geowebColors.backdrops.black.rgba
339
+ }
297
340
  }
298
341
  },
299
342
  MuiTooltip: {
300
- tooltip: {
301
- backgroundColor: geowebColors.tooltips.tooltipContainer.rgba,
302
- color: geowebColors.tooltips.tooltipText.color,
303
- padding: '8px 12px',
304
- fontSize: 16,
305
- fontWeight: 400,
306
- fontStretch: 'normal',
307
- fontStyle: 'normal',
308
- letterSpacing: 0.44,
309
- lineHeight: 1.56
343
+ styleOverrides: {
344
+ tooltip: {
345
+ backgroundColor: geowebColors.tooltips.tooltipContainer.rgba,
346
+ color: geowebColors.tooltips.tooltipText.color,
347
+ padding: '8px 12px',
348
+ fontSize: 16,
349
+ fontWeight: 400,
350
+ fontStretch: 'normal',
351
+ fontStyle: 'normal',
352
+ letterSpacing: 0.44,
353
+ lineHeight: 1.56
354
+ }
310
355
  }
311
356
  },
312
357
  MuiLink: {
313
- root: {
314
- color: geowebColors.typographyAndIcons.textLinkActive
358
+ styleOverrides: {
359
+ root: {
360
+ color: geowebColors.typographyAndIcons.textLinkActive,
361
+ textDecoration: 'none',
362
+ '&:hover': {
363
+ textDecoration: 'underline',
364
+ textDecorationColor: geowebColors.typographyAndIcons.textLinkActive
365
+ }
366
+ }
315
367
  }
316
368
  },
317
369
  // TODO: implement correct theming values https://gitlab.com/opengeoweb/opengeoweb/-/issues/1369
318
370
  MuiAlert: {
319
- standardError: {
320
- border: '1px solid #c00000',
321
- borderRadius: '0px',
322
- backgroundColor: '#fff0ea'
323
- },
324
- standardWarning: {
325
- border: '1px solid #ffa800',
326
- borderRadius: '0px',
327
- backgroundColor: '#fff8eb'
328
- },
329
- standardInfo: {
330
- border: '1px solid #0062e6',
331
- borderRadius: '0px',
332
- backgroundColor: '#eaf3ff'
333
- },
334
- standardSuccess: {
335
- border: '1px solid #72bb23',
336
- borderRadius: '0px',
337
- backgroundColor: '#fcffeb'
338
- },
339
- action: {
340
- color: '#0075a9'
341
- },
342
- message: {
343
- fontSize: '14px',
344
- lineHeight: 1.43,
345
- letterSpacing: '0.25px',
346
- color: '#051039'
371
+ styleOverrides: {
372
+ standardError: {
373
+ border: '1px solid #c00000',
374
+ borderRadius: '0px',
375
+ backgroundColor: '#fff0ea'
376
+ },
377
+ standardWarning: {
378
+ border: '1px solid #ffa800',
379
+ borderRadius: '0px',
380
+ backgroundColor: '#fff8eb'
381
+ },
382
+ standardInfo: {
383
+ border: '1px solid #0062e6',
384
+ borderRadius: '0px',
385
+ backgroundColor: '#eaf3ff'
386
+ },
387
+ standardSuccess: {
388
+ border: '1px solid #72bb23',
389
+ borderRadius: '0px',
390
+ backgroundColor: '#fcffeb'
391
+ },
392
+ action: {
393
+ color: '#0075a9'
394
+ },
395
+ message: {
396
+ fontSize: '14px',
397
+ lineHeight: 1.43,
398
+ letterSpacing: '0.25px',
399
+ color: '#051039'
400
+ }
347
401
  }
348
402
  },
349
403
  MuiFilledInput: {
350
- root: {
351
- backgroundColor: geowebColors.textInputField["default"].rgba,
352
- '&.Mui-focused': {
353
- backgroundColor: geowebColors.textInputField.active.rgba
354
- },
355
- '&.Mui-disabled': {
356
- backgroundColor: geowebColors.textInputField.disabled.rgba
357
- }
358
- },
359
- underline: {
360
- '&:after': {
361
- borderBottom: 'transparent'
404
+ styleOverrides: {
405
+ root: {
406
+ backgroundColor: geowebColors.textInputField["default"].rgba,
407
+ '&.Mui-focused': {
408
+ backgroundColor: geowebColors.textInputField.active.rgba
409
+ },
410
+ '&.Mui-disabled': {
411
+ backgroundColor: geowebColors.textInputField.disabled.rgba
412
+ }
362
413
  },
363
- '&.Mui-disabled:before': {
364
- borderBottomStyle: 'solid'
414
+ underline: {
415
+ '&:after': {
416
+ borderBottom: 'transparent'
417
+ },
418
+ '&.Mui-disabled:before': {
419
+ borderBottomStyle: 'solid'
420
+ }
365
421
  }
366
422
  }
367
423
  },
368
424
  MuiFormLabel: {
369
- root: {
370
- color: geowebColors.captions.captionStatus.color,
371
- opacity: geowebColors.captions.captionStatus.opacity,
372
- '&.Mui-focused': {
373
- color: geowebColors.captions.captionInformation.color,
374
- opacity: geowebColors.captions.captionInformation.opacity
375
- },
376
- '&.Mui-error': {
377
- color: geowebColors.captions.captionError.color,
378
- opacity: geowebColors.captions.captionError.opacity
379
- },
380
- '&.Mui-disabled': {
381
- color: geowebColors.captions.captionDisabled.color,
382
- opacity: geowebColors.captions.captionDisabled.opacity
425
+ styleOverrides: {
426
+ root: {
427
+ color: geowebColors.captions.captionStatus.color,
428
+ opacity: geowebColors.captions.captionStatus.opacity,
429
+ '&.Mui-focused': {
430
+ color: geowebColors.captions.captionInformation.color,
431
+ opacity: geowebColors.captions.captionInformation.opacity
432
+ },
433
+ '&.Mui-error': {
434
+ color: geowebColors.captions.captionError.color,
435
+ opacity: geowebColors.captions.captionError.opacity
436
+ },
437
+ '&.Mui-disabled': {
438
+ color: geowebColors.captions.captionDisabled.color,
439
+ opacity: geowebColors.captions.captionDisabled.opacity
440
+ }
383
441
  }
384
442
  }
385
443
  },
386
444
  MuiFormHelperText: {
387
- root: {
388
- color: geowebColors.captions.captionStatus.color,
389
- opacity: geowebColors.captions.captionStatus.opacity,
390
- '&.Mui-error': {
391
- color: geowebColors.captions.captionError.color,
392
- opacity: geowebColors.captions.captionError.opacity
393
- },
394
- '&.Mui-disabled': {
395
- color: geowebColors.captions.captionDisabled.color,
396
- opacity: geowebColors.captions.captionDisabled.opacity
445
+ styleOverrides: {
446
+ root: {
447
+ color: geowebColors.captions.captionStatus.color,
448
+ opacity: geowebColors.captions.captionStatus.opacity,
449
+ '&.Mui-error': {
450
+ color: geowebColors.captions.captionError.color,
451
+ opacity: geowebColors.captions.captionError.opacity
452
+ },
453
+ '&.Mui-disabled': {
454
+ color: geowebColors.captions.captionDisabled.color,
455
+ opacity: geowebColors.captions.captionDisabled.opacity
456
+ }
397
457
  }
398
458
  }
399
459
  }
@@ -675,7 +735,7 @@
675
735
 
676
736
  var geowebColors = __assign({}, colors$1);
677
737
 
678
- var GWTheme = core.createMuiTheme({
738
+ var GWTheme = material.createTheme({
679
739
  palette: {
680
740
  secondary: {
681
741
  main: '#0075a9'
@@ -744,138 +804,208 @@
744
804
  color: '0075a9'
745
805
  }
746
806
  },
747
- overrides: {
807
+ components: {
748
808
  MuiTooltip: {
749
- tooltip: {
750
- borderRadius: '2px',
751
- fontSize: '16px',
752
- fontWeight: 'normal',
753
- padding: '10px',
754
- backgroundColor: '#232323'
809
+ styleOverrides: {
810
+ tooltip: {
811
+ borderRadius: '2px',
812
+ fontSize: '16px',
813
+ fontWeight: 'normal',
814
+ padding: '10px',
815
+ backgroundColor: '#232323'
816
+ }
755
817
  }
756
818
  },
757
819
  MuiIconButton: {
758
- root: {
759
- color: '#0075a9'
820
+ styleOverrides: {
821
+ root: {
822
+ color: '#0075a9'
823
+ }
760
824
  }
761
825
  },
762
826
  MuiCheckbox: {
763
- root: {
764
- color: '#0075a9'
827
+ styleOverrides: {
828
+ root: {
829
+ '&.Mui-disabled': {
830
+ color: '#CCCCCC!important'
831
+ },
832
+ '&.Mui-checked': {
833
+ color: '#0075a9'
834
+ }
835
+ }
765
836
  }
766
837
  },
767
838
  MuiSelect: {
768
- icon: {
769
- color: '#0075a9'
770
- },
771
- select: {
772
- '&:focus': {
773
- backgroundColor: 'rgba(0, 117, 169, 0.05)'
839
+ styleOverrides: {
840
+ icon: {
841
+ color: '#0075a9'
842
+ },
843
+ select: {
844
+ '&:focus': {
845
+ backgroundColor: 'rgba(0, 117, 169, 0.05)'
846
+ }
774
847
  }
775
848
  }
776
849
  },
777
850
  MuiAlert: {
778
- standardError: {
779
- border: '1px solid #c00000',
780
- borderRadius: '0px',
781
- backgroundColor: '#fff0ea'
782
- },
783
- standardWarning: {
784
- border: '1px solid #ffa800',
785
- borderRadius: '0px',
786
- backgroundColor: '#fff8eb'
787
- },
788
- standardInfo: {
789
- border: '1px solid #0062e6',
790
- borderRadius: '0px',
791
- backgroundColor: '#eaf3ff'
792
- },
793
- standardSuccess: {
794
- border: '1px solid #72bb23',
795
- borderRadius: '0px',
796
- backgroundColor: '#fcffeb'
797
- },
798
- action: {
799
- color: '#0075a9'
800
- },
801
- message: {
802
- fontSize: '14px',
803
- lineHeight: 1.43,
804
- letterSpacing: '0.25px',
805
- color: '#051039'
851
+ styleOverrides: {
852
+ standardError: {
853
+ border: '1px solid #c00000',
854
+ borderRadius: '0px',
855
+ backgroundColor: '#fff0ea'
856
+ },
857
+ standardWarning: {
858
+ border: '1px solid #ffa800',
859
+ borderRadius: '0px',
860
+ backgroundColor: '#fff8eb'
861
+ },
862
+ standardInfo: {
863
+ border: '1px solid #0062e6',
864
+ borderRadius: '0px',
865
+ backgroundColor: '#eaf3ff'
866
+ },
867
+ standardSuccess: {
868
+ border: '1px solid #72bb23',
869
+ borderRadius: '0px',
870
+ backgroundColor: '#fcffeb'
871
+ },
872
+ action: {
873
+ color: '#0075a9'
874
+ },
875
+ message: {
876
+ fontSize: '14px',
877
+ lineHeight: 1.43,
878
+ letterSpacing: '0.25px',
879
+ color: '#051039'
880
+ }
806
881
  }
807
882
  },
808
883
  MuiTabs: {
809
- root: {
810
- backgroundColor: '#ffffff',
811
- minHeight: '30px'
812
- },
813
- scrollButtons: {
814
- width: '20px'
884
+ styleOverrides: {
885
+ root: {
886
+ backgroundColor: '#ffffff',
887
+ minHeight: '30px'
888
+ },
889
+ scrollButtons: {
890
+ width: '20px'
891
+ }
815
892
  }
816
893
  },
817
894
  MuiTab: {
818
- root: {
819
- minHeight: '30px',
820
- textTransform: 'none',
821
- minWidth: '76px',
822
- '@media (min-width: 600px)': {
823
- minWidth: '76px'
895
+ styleOverrides: {
896
+ root: {
897
+ minHeight: '30px',
898
+ textTransform: 'none',
899
+ minWidth: '76px',
900
+ '@media (min-width: 600px)': {
901
+ minWidth: '76px'
902
+ }
903
+ },
904
+ labelIcon: {
905
+ minHeight: '30px'
824
906
  }
825
- },
826
- labelIcon: {
827
- minHeight: '30px'
828
907
  }
829
908
  },
830
909
  MuiListItem: {
831
- root: {
832
- '&$selected': {
833
- backgroundColor: 'rgba(0, 117, 169, 0.15)',
834
- borderLeft: '4px solid #0075a9',
910
+ styleOverrides: {
911
+ root: {
912
+ '&$selected': {
913
+ backgroundColor: 'rgba(0, 117, 169, 0.15)',
914
+ borderLeft: '4px solid #0075a9',
915
+ '&:hover': {
916
+ backgroundColor: 'rgba(0, 117, 169, 0.10)'
917
+ }
918
+ }
919
+ },
920
+ button: {
835
921
  '&:hover': {
836
- backgroundColor: 'rgba(0, 117, 169, 0.10)'
922
+ backgroundColor: 'rgba(0, 117, 169, 0.15)'
837
923
  }
838
924
  }
839
- },
840
- button: {
841
- '&:hover': {
842
- backgroundColor: 'rgba(0, 117, 169, 0.15)'
925
+ }
926
+ },
927
+ MuiMenuItem: {
928
+ styleOverrides: {
929
+ root: {
930
+ '&.Mui-selected': {
931
+ backgroundColor: 'rgba(0, 117, 169, 0.15)',
932
+ borderLeft: '4px solid #0075a9',
933
+ '&:hover': {
934
+ backgroundColor: 'rgba(0, 117, 169, 0.10)'
935
+ }
936
+ },
937
+ '&:hover': {
938
+ backgroundColor: 'rgba(0, 117, 169, 0.15)'
939
+ }
843
940
  }
844
941
  }
845
942
  },
846
943
  MuiFormLabel: {
847
- root: {
848
- color: 'rgba(5, 16, 57, 0.7)',
849
- '&$focused': {
850
- color: '#0075a9'
944
+ styleOverrides: {
945
+ root: {
946
+ color: 'rgba(5, 16, 57, 0.7)',
947
+ '&.Mui-focused': {
948
+ color: '#0075a9'
949
+ },
950
+ '&.Mui-error': {
951
+ color: '#d32f2f!important'
952
+ }
851
953
  }
852
954
  }
853
955
  },
854
956
  MuiOutlinedInput: {
855
- root: {
856
- '&$focused $notchedOutline': {
857
- borderColor: '#0075a9'
957
+ styleOverrides: {
958
+ root: {
959
+ '&$focused $notchedOutline': {
960
+ borderColor: '#0075a9'
961
+ }
858
962
  }
859
963
  }
860
964
  },
861
965
  MuiFilledInput: {
862
- root: {
863
- backgroundColor: 'rgba(0, 117, 169, 0.05)',
864
- color: '#051039',
865
- '&$disabled': {
866
- backgroundColor: 'transparent'
966
+ styleOverrides: {
967
+ root: {
968
+ backgroundColor: 'rgba(0, 117, 169, 0.05)',
969
+ color: '#051039',
970
+ '&.Mui-disabled': {
971
+ backgroundColor: 'white'
972
+ },
973
+ '&.Mui-focused': {
974
+ backgroundColor: 'rgba(0,0,0,0.09)'
975
+ }
976
+ },
977
+ underline: {
978
+ '&.Mui-disabled:before': {
979
+ borderBottomStyle: 'none'
980
+ }
867
981
  }
868
- },
869
- underline: {
870
- '&$disabled:before': {
871
- borderBottomStyle: 'none'
982
+ }
983
+ },
984
+ MuiRadio: {
985
+ styleOverrides: {
986
+ root: {
987
+ '&.Mui-disabled': {
988
+ color: '#CCCCCC!important'
989
+ },
990
+ '&.Mui-checked': {
991
+ color: '#0075a9'
992
+ }
872
993
  }
873
994
  }
874
995
  },
875
996
  MuiCardContent: {
876
- root: {
877
- '&:last-child': {
878
- paddingBottom: 0
997
+ styleOverrides: {
998
+ root: {
999
+ '&:last-child': {
1000
+ paddingBottom: 0
1001
+ }
1002
+ }
1003
+ }
1004
+ },
1005
+ MuiDialog: {
1006
+ styleOverrides: {
1007
+ paperWidthLg: {
1008
+ maxWidth: '1280px'
879
1009
  }
880
1010
  }
881
1011
  }
@@ -919,7 +1049,7 @@
919
1049
  fill: '#186DFF'
920
1050
  },
921
1051
  flatMouseover: {
922
- fill: '#242424'
1052
+ fill: '#494949'
923
1053
  },
924
1054
  focusDefault: {
925
1055
  outline: 'solid 2px #419cfe'
@@ -1182,9 +1312,9 @@
1182
1312
  toggleTheme: toggleTheme,
1183
1313
  isDark: isDark
1184
1314
  }
1185
- }, /*#__PURE__*/React__namespace.createElement(core.ThemeProvider, {
1315
+ }, /*#__PURE__*/React__namespace.createElement(material.ThemeProvider, {
1186
1316
  theme: currentTheme
1187
- }, !disableCssBaseline && /*#__PURE__*/React__namespace.createElement(core.CssBaseline, null), children));
1317
+ }, !disableCssBaseline && /*#__PURE__*/React__namespace.createElement(material.CssBaseline, null), children));
1188
1318
  };
1189
1319
  var useThemeContext = function useThemeContext() {
1190
1320
  return React__namespace.useContext(ThemeContext);
@@ -1196,10 +1326,12 @@
1196
1326
  theme = _b === void 0 ? lightTheme : _b,
1197
1327
  _c = _a.disableCssBaseline,
1198
1328
  disableCssBaseline = _c === void 0 ? false : _c;
1199
- return /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
1329
+ return /*#__PURE__*/React__namespace.createElement(material.StyledEngineProvider, {
1330
+ injectFirst: true
1331
+ }, /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
1200
1332
  theme: theme,
1201
1333
  disableCssBaseline: disableCssBaseline
1202
- }, children);
1334
+ }, children));
1203
1335
  }; // Wrapper for storybook stories with GWTheme. Will be deprecated
1204
1336
 
1205
1337
  var ThemeWrapperOldTheme = function ThemeWrapperOldTheme(_a) {