@opengeoweb/theme 10.2.1-spike-ol.3 → 11.1.0

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.
package/index.esm.js CHANGED
@@ -1,4 +1,3 @@
1
- import 'msw';
2
1
  import { jsx, jsxs } from 'react/jsx-runtime';
3
2
  import { SvgIcon, createTheme as createTheme$1, ThemeProvider as ThemeProvider$1, CssBaseline, GlobalStyles, StyledEngineProvider, useTheme } from '@mui/material';
4
3
  import * as React from 'react';
@@ -39,7 +38,6 @@ function _objectWithoutPropertiesLoose(r, e) {
39
38
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
40
39
  * */
41
40
  var dragHandlePath = 'M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z';
42
- var locationPath = 'M11.58 11.758a2.177 2.177 0 1 1 0-4.354 2.177 2.177 0 0 1 0 4.354m0-8.758A6.58 6.58 0 0 0 5 9.58C5 15.15 11.58 21 11.58 21s6.582-5.85 6.582-11.42A6.58 6.58 0 0 0 11.58 3';
43
41
 
44
42
  var _excluded = ["text"],
45
43
  _excluded2 = ["isRightAligned", "sx"];
@@ -109,7 +107,7 @@ var Polygons = function Polygons(props) {
109
107
  var Location = function Location(props) {
110
108
  return jsx(SvgIcon, Object.assign({}, props, {
111
109
  children: jsx("path", {
112
- d: locationPath
110
+ d: "M11.58 11.758a2.177 2.177 0 1 1 0-4.354 2.177 2.177 0 0 1 0 4.354m0-8.758A6.58 6.58 0 0 0 5 9.58C5 15.15 11.58 21 11.58 21s6.582-5.85 6.582-11.42A6.58 6.58 0 0 0 11.58 3"
113
111
  })
114
112
  }));
115
113
  };
@@ -1692,6 +1690,45 @@ var ColumnCollapsed = function ColumnCollapsed(props) {
1692
1690
  })
1693
1691
  }));
1694
1692
  };
1693
+ var SharedPresetsOtherUsers = function SharedPresetsOtherUsers(props) {
1694
+ return jsx(SvgIcon, Object.assign({}, props, {
1695
+ children: jsxs("svg", {
1696
+ width: "24",
1697
+ height: "20",
1698
+ viewBox: "0 0 24 20",
1699
+ fill: "none",
1700
+ children: [jsx("rect", {
1701
+ x: "0.5",
1702
+ y: "0.5",
1703
+ width: "23",
1704
+ height: "19",
1705
+ rx: "9.5",
1706
+ fill: "#F0F4F8"
1707
+ }), jsx("rect", {
1708
+ x: "0.5",
1709
+ y: "0.5",
1710
+ width: "23",
1711
+ height: "19",
1712
+ rx: "9.5",
1713
+ stroke: "#778590"
1714
+ }), jsx("path", {
1715
+ fillRule: "evenodd",
1716
+ clipRule: "evenodd",
1717
+ d: "M10.9324 15.3958C11.2852 15.7632 11.8564 15.7632 12.2092 15.3958C12.5619 15.0285 12.5619 14.4318 12.2092 14.0644L9.21685 10.9416H17.3361C17.834 10.9416 18.2385 10.5203 18.2385 10.0007C18.2385 9.47981 17.834 9.05843 17.3361 9.05843H9.21685L12.2092 5.93635C12.5619 5.56826 12.5619 4.97231 12.2092 4.60423C12.0331 4.42123 11.8019 4.32869 11.5708 4.32869C11.3396 4.32869 11.1091 4.42123 10.9324 4.60423L5.76156 10.0007L10.9324 15.3958Z",
1718
+ fill: "#535B78"
1719
+ })]
1720
+ })
1721
+ }));
1722
+ };
1723
+ var SharedPresetsMyUser = function SharedPresetsMyUser(props) {
1724
+ return jsx(SvgIcon, Object.assign({}, props, {
1725
+ children: jsx("path", {
1726
+ d: "M9.32.039c-2.033.14-3.997.909-5.6 2.194C1.754 3.808.436 6.169.097 8.72c-.089.668-.089 1.892 0 2.56a10.153 10.153 0 0 0 2.136 5c1.605 2.004 4.003 3.319 6.647 3.648.308.038 1.14.052 3.12.052 2.879 0 3.074-.01 4.04-.206 1.477-.3 3.028-1.033 4.239-2.006 1.964-1.578 3.279-3.927 3.622-6.468.087-.644.087-1.956 0-2.6a10.162 10.162 0 0 0-2.134-4.98C20.204 1.769 17.888.468 15.32.097c-.382-.055-.889-.068-3-.078-1.397-.006-2.747.003-3 .02m5.762 1.018a8.908 8.908 0 0 1 5.28 2.581A8.86 8.86 0 0 1 23 10a8.86 8.86 0 0 1-2.638 6.362 8.908 8.908 0 0 1-5.28 2.581c-.662.082-5.502.082-6.164 0a8.908 8.908 0 0 1-5.28-2.581 8.98 8.98 0 0 1-2.595-5.37 11.949 11.949 0 0 1 0-1.984C1.35 6.223 2.987 3.693 5.42 2.244c1.025-.611 2.371-1.067 3.54-1.2.165-.018 1.507-.036 2.982-.039 2.111-.004 2.778.007 3.14.052m-2.891 3.301a.96.96 0 0 0-.556 1.349c.043.084.761.864 1.595 1.733l1.517 1.58-4.144.02c-4.62.022-4.278-.001-4.571.305a.935.935 0 0 0 0 1.31c.293.306-.049.283 4.571.305l4.144.02-1.517 1.58c-.834.869-1.552 1.649-1.595 1.733-.315.606.108 1.362.764 1.366.136.001.289-.029.392-.075.129-.058.792-.726 2.809-2.831l2.641-2.754-2.644-2.757c-1.722-1.794-2.695-2.781-2.791-2.826-.17-.081-.459-.108-.615-.058",
1727
+ fill: "#22780F",
1728
+ fillRule: "evenodd"
1729
+ })
1730
+ }));
1731
+ };
1695
1732
 
1696
1733
  /* *
1697
1734
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -1817,6 +1854,8 @@ var index = /*#__PURE__*/Object.freeze({
1817
1854
  SevereTurbulence: SevereTurbulence,
1818
1855
  SevereWaves: SevereWaves,
1819
1856
  Share: Share,
1857
+ SharedPresetsMyUser: SharedPresetsMyUser,
1858
+ SharedPresetsOtherUsers: SharedPresetsOtherUsers,
1820
1859
  SliderThumb: SliderThumb,
1821
1860
  Snow: Snow,
1822
1861
  Speed: Speed,
@@ -2051,11 +2090,11 @@ var createShadows = function createShadows(elevations) {
2051
2090
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
2052
2091
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
2053
2092
  * */
2054
- var focusButtonStyle$2 = {
2093
+ var focusButtonStyle$3 = {
2055
2094
  outline: 'solid 2px #419cfe'
2056
2095
  };
2057
2096
  // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/5ecf84d920b99428d7f98555
2058
- var colors$2 = {
2097
+ var colors$3 = {
2059
2098
  background: {
2060
2099
  surface: '#FFFFFF',
2061
2100
  surfaceApp: '#F5F5F5',
@@ -2087,7 +2126,7 @@ var colors$2 = {
2087
2126
  color: '#626262',
2088
2127
  borderColor: 'transparent'
2089
2128
  },
2090
- focus: focusButtonStyle$2
2129
+ focus: focusButtonStyle$3
2091
2130
  },
2092
2131
  secondary: {
2093
2132
  "default": {
@@ -2111,7 +2150,7 @@ var colors$2 = {
2111
2150
  color: '#626262',
2112
2151
  borderColor: 'transparent'
2113
2152
  },
2114
- focus: focusButtonStyle$2
2153
+ focus: focusButtonStyle$3
2115
2154
  },
2116
2155
  tertiary: {
2117
2156
  "default": {
@@ -2139,7 +2178,7 @@ var colors$2 = {
2139
2178
  color: '#626262',
2140
2179
  borderColor: 'transparent'
2141
2180
  },
2142
- focus: focusButtonStyle$2
2181
+ focus: focusButtonStyle$3
2143
2182
  },
2144
2183
  flat: {
2145
2184
  "default": {
@@ -2167,7 +2206,7 @@ var colors$2 = {
2167
2206
  color: '#626262',
2168
2207
  borderColor: 'transparent'
2169
2208
  },
2170
- focus: focusButtonStyle$2
2209
+ focus: focusButtonStyle$3
2171
2210
  },
2172
2211
  tool: {
2173
2212
  "default": {
@@ -2195,7 +2234,7 @@ var colors$2 = {
2195
2234
  color: '#626262',
2196
2235
  borderColor: 'transparent'
2197
2236
  },
2198
- focus: focusButtonStyle$2
2237
+ focus: focusButtonStyle$3
2199
2238
  },
2200
2239
  boxed: {
2201
2240
  "default": {
@@ -2223,7 +2262,7 @@ var colors$2 = {
2223
2262
  color: '#626262',
2224
2263
  borderColor: 'transparent'
2225
2264
  },
2226
- focus: focusButtonStyle$2
2265
+ focus: focusButtonStyle$3
2227
2266
  },
2228
2267
  icon: {
2229
2268
  "default": {
@@ -2251,7 +2290,7 @@ var colors$2 = {
2251
2290
  color: '#626262',
2252
2291
  borderColor: 'transparent'
2253
2292
  },
2254
- focus: focusButtonStyle$2
2293
+ focus: focusButtonStyle$3
2255
2294
  }
2256
2295
  },
2257
2296
  iconButtons: {
@@ -2281,7 +2320,7 @@ var colors$2 = {
2281
2320
  color: '#626262',
2282
2321
  borderColor: 'transparent'
2283
2322
  },
2284
- focus: focusButtonStyle$2
2323
+ focus: focusButtonStyle$3
2285
2324
  },
2286
2325
  tool: {
2287
2326
  "default": {
@@ -2309,7 +2348,7 @@ var colors$2 = {
2309
2348
  color: '#626262',
2310
2349
  borderColor: 'transparent'
2311
2350
  },
2312
- focus: focusButtonStyle$2
2351
+ focus: focusButtonStyle$3
2313
2352
  },
2314
2353
  boxed: {
2315
2354
  "default": {
@@ -2337,7 +2376,7 @@ var colors$2 = {
2337
2376
  color: '#626262',
2338
2377
  borderColor: 'transparent'
2339
2378
  },
2340
- focus: focusButtonStyle$2
2379
+ focus: focusButtonStyle$3
2341
2380
  }
2342
2381
  },
2343
2382
  typographyAndIcons: {
@@ -2721,7 +2760,7 @@ var colors$2 = {
2721
2760
  }
2722
2761
  };
2723
2762
  // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
2724
- var elevations$2 = {
2763
+ var elevations$3 = {
2725
2764
  elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
2726
2765
  elevation_02: '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
2727
2766
  elevation_03: '0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.14)',
@@ -2762,9 +2801,9 @@ var createTheme = function createTheme(_ref) {
2762
2801
  var _ref$paletteType = _ref.paletteType,
2763
2802
  paletteType = _ref$paletteType === void 0 ? 'light' : _ref$paletteType,
2764
2803
  _ref$geowebColors = _ref.geowebColors,
2765
- defaultGeowebColors = _ref$geowebColors === void 0 ? colors$2 : _ref$geowebColors,
2804
+ defaultGeowebColors = _ref$geowebColors === void 0 ? colors$3 : _ref$geowebColors,
2766
2805
  _ref$elevations = _ref.elevations,
2767
- defaultShadows = _ref$elevations === void 0 ? elevations$2 : _ref$elevations;
2806
+ defaultShadows = _ref$elevations === void 0 ? elevations$3 : _ref$elevations;
2768
2807
  var geowebColors = parseColors(defaultGeowebColors);
2769
2808
  var shadows = createShadows(defaultShadows);
2770
2809
  return createTheme$1({
@@ -3382,11 +3421,11 @@ var createTheme = function createTheme(_ref) {
3382
3421
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
3383
3422
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
3384
3423
  * */
3385
- var focusButtonStyle$1 = {
3424
+ var focusButtonStyle$2 = {
3386
3425
  outline: 'solid 2px #419cfe'
3387
3426
  };
3388
3427
  // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e5dc12278e35d433aa2d
3389
- var colors$1 = {
3428
+ var colors$2 = {
3390
3429
  background: {
3391
3430
  surface: '#303030',
3392
3431
  surfaceApp: '#2B2B2B',
@@ -3418,7 +3457,7 @@ var colors$1 = {
3418
3457
  color: '#B4B4B4',
3419
3458
  borderColor: 'transparent'
3420
3459
  },
3421
- focus: focusButtonStyle$1
3460
+ focus: focusButtonStyle$2
3422
3461
  },
3423
3462
  secondary: {
3424
3463
  "default": {
@@ -3442,7 +3481,7 @@ var colors$1 = {
3442
3481
  color: '#B4B4B4',
3443
3482
  borderColor: 'transparent'
3444
3483
  },
3445
- focus: focusButtonStyle$1
3484
+ focus: focusButtonStyle$2
3446
3485
  },
3447
3486
  tertiary: {
3448
3487
  "default": {
@@ -3470,7 +3509,7 @@ var colors$1 = {
3470
3509
  color: '#B4B4B4',
3471
3510
  borderColor: 'transparent'
3472
3511
  },
3473
- focus: focusButtonStyle$1
3512
+ focus: focusButtonStyle$2
3474
3513
  },
3475
3514
  flat: {
3476
3515
  "default": {
@@ -3498,7 +3537,7 @@ var colors$1 = {
3498
3537
  color: '#B4B4B4',
3499
3538
  borderColor: 'transparent'
3500
3539
  },
3501
- focus: focusButtonStyle$1
3540
+ focus: focusButtonStyle$2
3502
3541
  },
3503
3542
  tool: {
3504
3543
  "default": {
@@ -3526,7 +3565,7 @@ var colors$1 = {
3526
3565
  color: '#B4B4B4',
3527
3566
  borderColor: 'transparent'
3528
3567
  },
3529
- focus: focusButtonStyle$1
3568
+ focus: focusButtonStyle$2
3530
3569
  },
3531
3570
  boxed: {
3532
3571
  "default": {
@@ -3554,7 +3593,7 @@ var colors$1 = {
3554
3593
  color: '#B4B4B4',
3555
3594
  borderColor: 'transparent'
3556
3595
  },
3557
- focus: focusButtonStyle$1
3596
+ focus: focusButtonStyle$2
3558
3597
  },
3559
3598
  icon: {
3560
3599
  "default": {
@@ -3582,7 +3621,7 @@ var colors$1 = {
3582
3621
  color: '#B4B4B4',
3583
3622
  borderColor: 'transparent'
3584
3623
  },
3585
- focus: focusButtonStyle$1
3624
+ focus: focusButtonStyle$2
3586
3625
  }
3587
3626
  },
3588
3627
  iconButtons: {
@@ -3612,7 +3651,7 @@ var colors$1 = {
3612
3651
  color: '#B4B4B4',
3613
3652
  borderColor: 'transparent'
3614
3653
  },
3615
- focus: focusButtonStyle$1
3654
+ focus: focusButtonStyle$2
3616
3655
  },
3617
3656
  tool: {
3618
3657
  "default": {
@@ -3640,7 +3679,7 @@ var colors$1 = {
3640
3679
  color: '#B4B4B4',
3641
3680
  borderColor: 'transparent'
3642
3681
  },
3643
- focus: focusButtonStyle$1
3682
+ focus: focusButtonStyle$2
3644
3683
  },
3645
3684
  boxed: {
3646
3685
  "default": {
@@ -3668,7 +3707,7 @@ var colors$1 = {
3668
3707
  color: '#B4B4B4',
3669
3708
  borderColor: 'transparent'
3670
3709
  },
3671
- focus: focusButtonStyle$1
3710
+ focus: focusButtonStyle$2
3672
3711
  }
3673
3712
  },
3674
3713
  typographyAndIcons: {
@@ -4053,7 +4092,7 @@ var colors$1 = {
4053
4092
  }
4054
4093
  };
4055
4094
  // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
4056
- var elevations$1 = {
4095
+ var elevations$2 = {
4057
4096
  elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
4058
4097
  elevation_02: '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
4059
4098
  elevation_03: '0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.14)',
@@ -4083,11 +4122,11 @@ var elevations$1 = {
4083
4122
  * Copyright 2023 - Finnish Meteorological Institute (FMI)
4084
4123
  * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
4085
4124
  * */
4086
- var focusButtonStyle = {
4125
+ var focusButtonStyle$1 = {
4087
4126
  outline: 'solid 2px #FFFFFF'
4088
4127
  };
4089
4128
  // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e5dc12278e35d433aa2d
4090
- var colors = Object.assign({}, colors$2, {
4129
+ var colors$1 = Object.assign({}, colors$3, {
4091
4130
  background: {
4092
4131
  surface: '#9e1f1e',
4093
4132
  surfaceApp: '#740c16',
@@ -4119,7 +4158,7 @@ var colors = Object.assign({}, colors$2, {
4119
4158
  color: '#B4B4B4',
4120
4159
  borderColor: 'transparent'
4121
4160
  },
4122
- focus: focusButtonStyle
4161
+ focus: focusButtonStyle$1
4123
4162
  },
4124
4163
  secondary: {
4125
4164
  "default": {
@@ -4143,7 +4182,7 @@ var colors = Object.assign({}, colors$2, {
4143
4182
  color: '#B4B4B4',
4144
4183
  borderColor: 'transparent'
4145
4184
  },
4146
- focus: focusButtonStyle
4185
+ focus: focusButtonStyle$1
4147
4186
  },
4148
4187
  tertiary: {
4149
4188
  "default": {
@@ -4171,7 +4210,7 @@ var colors = Object.assign({}, colors$2, {
4171
4210
  color: '#B4B4B4',
4172
4211
  borderColor: 'transparent'
4173
4212
  },
4174
- focus: focusButtonStyle
4213
+ focus: focusButtonStyle$1
4175
4214
  },
4176
4215
  flat: {
4177
4216
  "default": {
@@ -4199,7 +4238,7 @@ var colors = Object.assign({}, colors$2, {
4199
4238
  color: '#B4B4B4',
4200
4239
  borderColor: 'transparent'
4201
4240
  },
4202
- focus: focusButtonStyle
4241
+ focus: focusButtonStyle$1
4203
4242
  },
4204
4243
  tool: {
4205
4244
  "default": {
@@ -4227,7 +4266,7 @@ var colors = Object.assign({}, colors$2, {
4227
4266
  color: '#B4B4B4',
4228
4267
  borderColor: 'transparent'
4229
4268
  },
4230
- focus: focusButtonStyle
4269
+ focus: focusButtonStyle$1
4231
4270
  },
4232
4271
  boxed: {
4233
4272
  "default": {
@@ -4255,7 +4294,7 @@ var colors = Object.assign({}, colors$2, {
4255
4294
  color: '#B4B4B4',
4256
4295
  borderColor: 'transparent'
4257
4296
  },
4258
- focus: focusButtonStyle
4297
+ focus: focusButtonStyle$1
4259
4298
  },
4260
4299
  icon: {
4261
4300
  "default": {
@@ -4283,7 +4322,7 @@ var colors = Object.assign({}, colors$2, {
4283
4322
  color: '#B4B4B4',
4284
4323
  borderColor: 'transparent'
4285
4324
  },
4286
- focus: focusButtonStyle
4325
+ focus: focusButtonStyle$1
4287
4326
  }
4288
4327
  },
4289
4328
  iconButtons: {
@@ -4313,7 +4352,7 @@ var colors = Object.assign({}, colors$2, {
4313
4352
  color: '#B4B4B4',
4314
4353
  borderColor: 'transparent'
4315
4354
  },
4316
- focus: focusButtonStyle
4355
+ focus: focusButtonStyle$1
4317
4356
  },
4318
4357
  tool: {
4319
4358
  "default": {
@@ -4341,7 +4380,7 @@ var colors = Object.assign({}, colors$2, {
4341
4380
  color: '#B4B4B4',
4342
4381
  borderColor: 'transparent'
4343
4382
  },
4344
- focus: focusButtonStyle
4383
+ focus: focusButtonStyle$1
4345
4384
  },
4346
4385
  boxed: {
4347
4386
  "default": {
@@ -4369,7 +4408,7 @@ var colors = Object.assign({}, colors$2, {
4369
4408
  color: '#B4B4B4',
4370
4409
  borderColor: 'transparent'
4371
4410
  },
4372
- focus: focusButtonStyle
4411
+ focus: focusButtonStyle$1
4373
4412
  }
4374
4413
  },
4375
4414
  typographyAndIcons: {
@@ -4759,7 +4798,7 @@ var colors = Object.assign({}, colors$2, {
4759
4798
  }
4760
4799
  });
4761
4800
  // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/6093e694124ecf3886de76d4
4762
- var elevations = {
4801
+ var elevations$1 = {
4763
4802
  elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
4764
4803
  elevation_02: '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
4765
4804
  elevation_03: '0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.14)',
@@ -4785,72 +4824,784 @@ var elevations = {
4785
4824
  * See the License for the specific language governing permissions and
4786
4825
  * limitations under the License.
4787
4826
  *
4788
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
4789
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
4790
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
4791
- * */
4792
- var ThemeTypes;
4793
- (function (ThemeTypes) {
4794
- ThemeTypes["DARK_THEME"] = "darkTheme";
4795
- ThemeTypes["LIGHT_THEME"] = "lightTheme";
4796
- ThemeTypes["XMAS2024_THEME"] = "xmas2024Theme";
4797
- })(ThemeTypes || (ThemeTypes = {}));
4798
-
4799
- /* *
4800
- * Licensed under the Apache License, Version 2.0 (the "License");
4801
- * you may not use this file except in compliance with the License.
4802
- * You may obtain a copy of the License at
4803
- *
4804
- * http://www.apache.org/licenses/LICENSE-2.0
4805
- *
4806
- * Unless required by applicable law or agreed to in writing, software
4807
- * distributed under the License is distributed on an "AS IS" BASIS,
4808
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4809
- * See the License for the specific language governing permissions and
4810
- * limitations under the License.
4811
- *
4812
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
4813
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
4814
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
4827
+ * Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
4828
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
4829
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
4815
4830
  * */
4816
- var getThemeByName = function getThemeByName(themeName) {
4817
- switch (themeName) {
4818
- case ThemeTypes.DARK_THEME:
4819
- return namedDarkTheme;
4820
- case ThemeTypes.LIGHT_THEME:
4821
- return namedLightTheme;
4822
- case ThemeTypes.XMAS2024_THEME:
4823
- return namedXmas2024Theme;
4824
- default:
4825
- return namedLightTheme;
4826
- }
4827
- };
4828
- var lightTheme = createTheme({
4829
- paletteType: 'light',
4830
- geowebColors: colors$2,
4831
- elevations: elevations$2
4832
- });
4833
- var darkTheme = createTheme({
4834
- paletteType: 'dark',
4835
- geowebColors: colors$1,
4836
- elevations: elevations$1
4837
- });
4838
- var xmas2024Theme = createTheme({
4839
- paletteType: 'dark',
4840
- geowebColors: colors,
4841
- elevations: elevations
4842
- });
4843
- var namedLightTheme = {
4844
- name: ThemeTypes.LIGHT_THEME,
4845
- theme: lightTheme
4846
- };
4847
- var namedDarkTheme = {
4848
- name: ThemeTypes.DARK_THEME,
4849
- theme: darkTheme
4831
+ var focusButtonStyle = {
4832
+ outline: 'solid 2px #419cfe'
4850
4833
  };
4851
- var namedXmas2024Theme = {
4852
- name: ThemeTypes.XMAS2024_THEME,
4853
- theme: xmas2024Theme
4834
+ // https://www.figma.com/design/X1glYQsGXcHvH9ti7rXcPT/test-side-geoweb?node-id=106-1817&t=GCStbstNVLl6LZcT-0
4835
+ var colors = {
4836
+ background: {
4837
+ surface: '#FFCB66',
4838
+ surfaceApp: '#F9F0DF',
4839
+ surfaceBrowser: '#FFCB66'
4840
+ },
4841
+ brand: {
4842
+ brand: '#FFCB66'
4843
+ },
4844
+ buttons: {
4845
+ primary: {
4846
+ "default": {
4847
+ fill: '#186DFF',
4848
+ color: '#FFFFFF',
4849
+ borderColor: 'transparent'
4850
+ },
4851
+ mouseOver: {
4852
+ fill: '#1047B0',
4853
+ color: '#FFFFFF',
4854
+ borderColor: '#71A6FF'
4855
+ },
4856
+ active: {
4857
+ fill: '#186DFF',
4858
+ color: '#FFFFFF',
4859
+ borderColor: 'transparent'
4860
+ },
4861
+ activeMouseOver: {},
4862
+ disabled: {
4863
+ fill: 'transparent',
4864
+ color: '#626262',
4865
+ borderColor: 'transparent'
4866
+ },
4867
+ focus: focusButtonStyle
4868
+ },
4869
+ secondary: {
4870
+ "default": {
4871
+ fill: '#374061',
4872
+ color: '#FFFFFF',
4873
+ borderColor: 'transparent'
4874
+ },
4875
+ mouseOver: {
4876
+ fill: '#1047B0',
4877
+ color: '#FFFFFF',
4878
+ borderColor: 'transparent'
4879
+ },
4880
+ active: {
4881
+ fill: '#186DFF',
4882
+ color: '#FFFFFF',
4883
+ borderColor: 'transparent'
4884
+ },
4885
+ activeMouseOver: {},
4886
+ disabled: {
4887
+ fill: 'transparent',
4888
+ color: '#626262',
4889
+ borderColor: 'transparent'
4890
+ },
4891
+ focus: focusButtonStyle
4892
+ },
4893
+ tertiary: {
4894
+ "default": {
4895
+ fill: 'transparent',
4896
+ color: '#374061',
4897
+ borderColor: '#374061'
4898
+ },
4899
+ mouseOver: {
4900
+ fill: '#D8E4F9',
4901
+ color: '#374061',
4902
+ borderColor: '#374061'
4903
+ },
4904
+ active: {
4905
+ fill: 'transparent',
4906
+ color: '#0057EC',
4907
+ borderColor: '#0057EC'
4908
+ },
4909
+ activeMouseOver: {
4910
+ fill: '#D8E4F9',
4911
+ color: '#0057EC',
4912
+ borderColor: '#0057EC'
4913
+ },
4914
+ disabled: {
4915
+ fill: 'transparent',
4916
+ color: '#626262',
4917
+ borderColor: 'transparent'
4918
+ },
4919
+ focus: focusButtonStyle
4920
+ },
4921
+ flat: {
4922
+ "default": {
4923
+ fill: 'transparent',
4924
+ color: '#374061',
4925
+ borderColor: 'transparent'
4926
+ },
4927
+ mouseOver: {
4928
+ fill: '#D8E4F9',
4929
+ color: '#374061',
4930
+ borderColor: 'transparent'
4931
+ },
4932
+ active: {
4933
+ fill: 'transparent',
4934
+ color: '#0057EC',
4935
+ borderColor: 'transparent'
4936
+ },
4937
+ activeMouseOver: {
4938
+ fill: '#D8E4F9',
4939
+ color: '#0057EC',
4940
+ borderColor: 'transparent'
4941
+ },
4942
+ disabled: {
4943
+ fill: 'transparent',
4944
+ color: '#626262',
4945
+ borderColor: 'transparent'
4946
+ },
4947
+ focus: focusButtonStyle
4948
+ },
4949
+ tool: {
4950
+ "default": {
4951
+ fill: '#ECEDEE',
4952
+ color: '#374061',
4953
+ borderColor: 'transparent'
4954
+ },
4955
+ mouseOver: {
4956
+ fill: '#D8E4F9',
4957
+ color: '#374061',
4958
+ borderColor: 'transparent'
4959
+ },
4960
+ active: {
4961
+ fill: '#186DFF',
4962
+ color: '#FFFFFF',
4963
+ borderColor: 'transparent'
4964
+ },
4965
+ activeMouseOver: {
4966
+ fill: '#1047B0',
4967
+ color: '#FFFFFF',
4968
+ borderColor: 'transparent'
4969
+ },
4970
+ disabled: {
4971
+ fill: 'transparent',
4972
+ color: '#626262',
4973
+ borderColor: 'transparent'
4974
+ },
4975
+ focus: focusButtonStyle
4976
+ },
4977
+ boxed: {
4978
+ "default": {
4979
+ fill: 'transparent',
4980
+ color: '#374061',
4981
+ borderColor: '#374061'
4982
+ },
4983
+ mouseOver: {
4984
+ fill: '#D8E4F9',
4985
+ color: '#374061',
4986
+ borderColor: '#374061'
4987
+ },
4988
+ active: {
4989
+ fill: '#186DFF',
4990
+ color: '#FFFFFF',
4991
+ borderColor: 'transparent'
4992
+ },
4993
+ activeMouseOver: {
4994
+ fill: '#1047B0',
4995
+ color: '#FFFFFF',
4996
+ borderColor: 'transparent'
4997
+ },
4998
+ disabled: {
4999
+ fill: 'transparent',
5000
+ color: '#626262',
5001
+ borderColor: 'transparent'
5002
+ },
5003
+ focus: focusButtonStyle
5004
+ },
5005
+ icon: {
5006
+ "default": {
5007
+ fill: 'transparent',
5008
+ color: '#374061',
5009
+ borderColor: 'transparent'
5010
+ },
5011
+ mouseOver: {
5012
+ fill: '#D8E4F9',
5013
+ color: '#374061',
5014
+ borderColor: 'transparent'
5015
+ },
5016
+ active: {
5017
+ fill: 'transparent',
5018
+ color: '#051039',
5019
+ borderColor: 'transparent'
5020
+ },
5021
+ activeMouseOver: {
5022
+ fill: '#D8E4F9',
5023
+ color: '#051039',
5024
+ borderColor: 'transparent'
5025
+ },
5026
+ disabled: {
5027
+ fill: 'transparent',
5028
+ color: '#626262',
5029
+ borderColor: 'transparent'
5030
+ },
5031
+ focus: focusButtonStyle
5032
+ }
5033
+ },
5034
+ iconButtons: {
5035
+ flat: {
5036
+ "default": {
5037
+ fill: 'transparent',
5038
+ color: '#374061',
5039
+ borderColor: 'transparent'
5040
+ },
5041
+ mouseOver: {
5042
+ fill: '#D8E4F9',
5043
+ color: '#374061',
5044
+ borderColor: 'transparent'
5045
+ },
5046
+ active: {
5047
+ fill: 'transparent',
5048
+ color: '#0057EC',
5049
+ borderColor: 'transparent'
5050
+ },
5051
+ activeMouseOver: {
5052
+ fill: '#D8E4F9',
5053
+ color: '#186DFF',
5054
+ borderColor: 'transparent'
5055
+ },
5056
+ disabled: {
5057
+ fill: 'transparent',
5058
+ color: '#626262',
5059
+ borderColor: 'transparent'
5060
+ },
5061
+ focus: focusButtonStyle
5062
+ },
5063
+ tool: {
5064
+ "default": {
5065
+ fill: '#ECEDEE',
5066
+ color: '#374061',
5067
+ borderColor: 'transparent'
5068
+ },
5069
+ mouseOver: {
5070
+ fill: '#D8E4F9',
5071
+ color: '#374061',
5072
+ borderColor: 'transparent'
5073
+ },
5074
+ active: {
5075
+ fill: '#186DFF',
5076
+ color: '#FFFFFF',
5077
+ borderColor: 'transparent'
5078
+ },
5079
+ activeMouseOver: {
5080
+ fill: '#1047B0',
5081
+ color: '#FFFFFF',
5082
+ borderColor: 'transparent'
5083
+ },
5084
+ disabled: {
5085
+ fill: 'transparent',
5086
+ color: '#626262',
5087
+ borderColor: 'transparent'
5088
+ },
5089
+ focus: focusButtonStyle
5090
+ },
5091
+ boxed: {
5092
+ "default": {
5093
+ fill: 'transparent',
5094
+ color: '#374061',
5095
+ borderColor: '#374061'
5096
+ },
5097
+ mouseOver: {
5098
+ fill: '#D8E4F9',
5099
+ color: '#374061',
5100
+ borderColor: '#374061'
5101
+ },
5102
+ active: {
5103
+ fill: '#186DFF',
5104
+ color: '#FFFFFF',
5105
+ borderColor: 'transparent'
5106
+ },
5107
+ activeMouseOver: {
5108
+ fill: '#1047B0',
5109
+ color: '#FFFFFF',
5110
+ borderColor: 'transparent'
5111
+ },
5112
+ disabled: {
5113
+ fill: 'transparent',
5114
+ color: '#626262',
5115
+ borderColor: 'transparent'
5116
+ },
5117
+ focus: focusButtonStyle
5118
+ }
5119
+ },
5120
+ typographyAndIcons: {
5121
+ text: '#051039',
5122
+ icon: '#051039',
5123
+ buttonIcon: '#FFFFFF',
5124
+ iconLinkActive: '#186DFF',
5125
+ iconLinkDisabled: '#CCCCCC',
5126
+ textLinkActive: '#186DFF',
5127
+ buttonIconTertiaryFlat: '#575F7A',
5128
+ inactiveText: '#626262',
5129
+ iconWarning: '#ffa800'
5130
+ },
5131
+ textInputField: {
5132
+ "default": {
5133
+ fill: '#e9edf5',
5134
+ opacity: 1
5135
+ },
5136
+ mouseOver: {
5137
+ fill: '#e0e8f5',
5138
+ opacity: 1
5139
+ },
5140
+ active: {
5141
+ fill: '#e9edf5',
5142
+ opacity: 1
5143
+ },
5144
+ disabled: {
5145
+ fill: '#000000',
5146
+ opacity: 0
5147
+ },
5148
+ label: {
5149
+ fill: '#051039',
5150
+ opacity: 0.67
5151
+ },
5152
+ error: {
5153
+ fill: '#FEEDEE',
5154
+ opacity: 1
5155
+ },
5156
+ errorMouseOver: {
5157
+ fill: '#ffc5c5',
5158
+ opacity: 1
5159
+ }
5160
+ },
5161
+ menuItem: {
5162
+ mouseOver: '#e0e8f5',
5163
+ selected: '#186DFF',
5164
+ selectedMouseOver: '#1047b0'
5165
+ },
5166
+ tab: {
5167
+ mouseOver: {
5168
+ fill: '#051039',
5169
+ opacity: 0.07
5170
+ }
5171
+ },
5172
+ greys: {
5173
+ accessible: '#626262',
5174
+ accessibleLight: '#C5C5C5'
5175
+ },
5176
+ cards: {
5177
+ cardContainer: '#FFFFFF',
5178
+ cardContainerBorder: '#EEEEEE',
5179
+ cardContainerMouseOver: '#EFF5FF',
5180
+ cardContainerDisabled: '#EBEBEB',
5181
+ cardContainerDisabledBorder: '#E3E2E2',
5182
+ cardContainerDisabledMouseOver: '#EFF5FF'
5183
+ },
5184
+ backdrops: {
5185
+ black: {
5186
+ fill: '#000000',
5187
+ opacity: 0.5
5188
+ },
5189
+ white: {
5190
+ fill: '#FFFFFF',
5191
+ opacity: 0.24
5192
+ }
5193
+ },
5194
+ workspace: {
5195
+ activeWindow: '#FFFFFF',
5196
+ inactiveWindow: '#E8E5E5',
5197
+ tabButtonHover: 'rgba(123, 172, 255, 0.12)'
5198
+ },
5199
+ timeSlider: {
5200
+ // player
5201
+ playerNeedleTimeTop: {
5202
+ fill: '#E3004F',
5203
+ opacity: 100
5204
+ },
5205
+ playerNeedleTime: {
5206
+ fill: '#FFD523',
5207
+ opacity: 0.75
5208
+ },
5209
+ playerNeedlePlayerTop: {
5210
+ fill: '#051039',
5211
+ opacity: 100
5212
+ },
5213
+ playerNeedlePlayer: {
5214
+ fill: '#67F0FF',
5215
+ opacity: 0.75
5216
+ },
5217
+ playerTimeMarkers: {
5218
+ fill: '#051039'
5219
+ },
5220
+ playerTimeText: {
5221
+ color: '#FFFFFF',
5222
+ fontFamily: 'Roboto',
5223
+ fontSize: 14
5224
+ },
5225
+ // timeline
5226
+ timelineIndicator: {
5227
+ fill: '#767676'
5228
+ },
5229
+ timelineText: {
5230
+ fontSize: 12,
5231
+ color: '#FFFFFF',
5232
+ fontFamily: 'Roboto'
5233
+ },
5234
+ timelineTimeScale: {
5235
+ fill: '#FFFFFF'
5236
+ },
5237
+ timelineNightTime: {
5238
+ fill: '#051038',
5239
+ opacity: 0.67
5240
+ },
5241
+ timelineTimelineSurface: {
5242
+ fill: '#FFFFFF'
5243
+ },
5244
+ timelineMonthChangeDash: {
5245
+ fill: '#767676',
5246
+ opacity: 0.5
5247
+ },
5248
+ timelineSelectionBackground: {
5249
+ fill: '#FFFFFF',
5250
+ opacity: 0.15
5251
+ },
5252
+ timelineSelectionOutline: {
5253
+ fill: '#F0FF00',
5254
+ opacity: 0.4
5255
+ },
5256
+ // time scale
5257
+ timeScalePointer: {
5258
+ fill: '#F8F9F9'
5259
+ },
5260
+ timeScaleHorizontalScale: {
5261
+ fill: '#070808',
5262
+ opacity: 0.2
5263
+ },
5264
+ timeScaleTimeIndicators: {
5265
+ fill: '#767676'
5266
+ },
5267
+ timeScaleTimeIndicatorsActive: {
5268
+ fill: '#051039'
5269
+ },
5270
+ timeScaleShadowButtonScale: {
5271
+ filter: 'drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.28)) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.24)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.40))'
5272
+ },
5273
+ ledgendObservedBackground: {
5274
+ fill: '#00649F'
5275
+ },
5276
+ legendForecastBackground: {
5277
+ fill: '#9900B1'
5278
+ },
5279
+ legendNoDataBackground: {
5280
+ fill: '#575F7A',
5281
+ opacity: 0.95
5282
+ }
5283
+ },
5284
+ timeSliderLite: {
5285
+ selected: {
5286
+ backgroundColor: '#EEF4FB'
5287
+ },
5288
+ needle: {
5289
+ stroke: '#303193'
5290
+ },
5291
+ needleDefault: {
5292
+ stroke: '#3BA587'
5293
+ },
5294
+ needleShadow: {
5295
+ stroke: '#E7F0FA'
5296
+ },
5297
+ needleLabel: {
5298
+ backgroundColor: '#212121',
5299
+ borderColor: '#9e9e9e',
5300
+ color: '#FFFFFF'
5301
+ },
5302
+ timeline: {
5303
+ fill: '#FFFFFF',
5304
+ stroke: '#FFFFFF'
5305
+ },
5306
+ timelineBackground: {
5307
+ fill: '#2959E0',
5308
+ color: '#FFFFFF'
5309
+ },
5310
+ timelineBackgroundAlternative: {
5311
+ fill: '#4871E5',
5312
+ color: '#FFFFFF'
5313
+ },
5314
+ timelineBackgroundDisabled: {
5315
+ fill: '#767E93',
5316
+ color: '#FFFFFF'
5317
+ },
5318
+ timelineBackgroundDisabledAlternative: {
5319
+ fill: '#8A91A3',
5320
+ color: '#FFFFFF'
5321
+ },
5322
+ timelineBackgroundObserved: {
5323
+ fill: '#8A91A3',
5324
+ color: '#FFFFFF'
5325
+ },
5326
+ timelineBackgroundObservedAlternative: {
5327
+ fill: '#767E93',
5328
+ color: '#FFFFFF'
5329
+ }
5330
+ },
5331
+ customSlider: {
5332
+ rail: '#488BFD',
5333
+ railDisabled: '#CCCCCC',
5334
+ track: '#186DFF',
5335
+ trackDisabled: '#CCCCCC',
5336
+ thumb: '#F8F9F9',
5337
+ thumbDisabled: '#CCCCCC',
5338
+ mark: '#FFFFFF',
5339
+ markDisabled: '#FFFFFF'
5340
+ },
5341
+ customSwitch: {
5342
+ thumb: '#F8F9F9',
5343
+ thumbDisabled: '#F5F5F5',
5344
+ track: '#707070',
5345
+ trackActive: '#186DFF'
5346
+ },
5347
+ syncGroups: {
5348
+ drawerOpen: {
5349
+ fill: '#E8E5E5'
5350
+ }
5351
+ },
5352
+ layerManager: {
5353
+ headerRowText: {
5354
+ color: '#051039',
5355
+ opacity: 0.67,
5356
+ fontSize: 12
5357
+ },
5358
+ tableRowDefaultText: {
5359
+ color: '#051039',
5360
+ opacity: 0.87,
5361
+ fontSize: 12
5362
+ },
5363
+ tableRowDefaultCardContainer: {
5364
+ fill: '#FFFFFF',
5365
+ border: '1px solid #EEEEEE',
5366
+ borderColor: '#EEEEEE'
5367
+ },
5368
+ tableRowDisabledText: {
5369
+ color: '#767676',
5370
+ opacity: 0.87,
5371
+ fontSize: 12
5372
+ },
5373
+ tableRowDisabledCardContainer: {
5374
+ fill: '#EBEBEB',
5375
+ border: '1px solid #E3E2E2',
5376
+ borderColor: '#E3E2E2'
5377
+ },
5378
+ dragHandleHover: {
5379
+ backgroundColor: 'transparent'
5380
+ },
5381
+ root: {},
5382
+ opacitySelect: {
5383
+ root: {},
5384
+ button: {},
5385
+ popper: {}
5386
+ },
5387
+ baseLayerRow: {
5388
+ root: {}
5389
+ }
5390
+ },
5391
+ tooltips: {
5392
+ tooltipContainer: {
5393
+ fill: '#232323',
5394
+ opacity: 1
5395
+ },
5396
+ tooltipText: {
5397
+ color: '#FFFFFF'
5398
+ },
5399
+ tooltipSelect: {
5400
+ select: {},
5401
+ menu: {}
5402
+ }
5403
+ },
5404
+ captions: {
5405
+ captionStatus: {
5406
+ color: '#051039',
5407
+ opacity: 0.67
5408
+ },
5409
+ captionInformation: {
5410
+ color: '#1100FF',
5411
+ opacity: 1
5412
+ },
5413
+ captionError: {
5414
+ color: '#C00000',
5415
+ opacity: 1
5416
+ },
5417
+ captionErrorBackground: {
5418
+ color: '#C00000',
5419
+ opacity: 1
5420
+ },
5421
+ captionDisabled: {
5422
+ color: '#707070',
5423
+ opacity: 1
5424
+ }
5425
+ },
5426
+ functional: {
5427
+ success: '#72BB23',
5428
+ successOutline: {
5429
+ fill: '#FCFFEB',
5430
+ border: '1px solid #72BB23',
5431
+ borderColor: '#72BB23'
5432
+ },
5433
+ error: '#C00000',
5434
+ errorOutline: {
5435
+ fill: '#F9E8EA',
5436
+ border: '1px solid #C00000',
5437
+ borderColor: '#C00000'
5438
+ },
5439
+ warning: '#FFA800',
5440
+ warningOutline: {
5441
+ fill: '#FFF8EB',
5442
+ border: '1px solid #FFA800',
5443
+ borderColor: '#FFA800'
5444
+ },
5445
+ warningHighlight: {
5446
+ fill: '#FFA800',
5447
+ opacity: 0.2
5448
+ },
5449
+ notification: '#0062E6',
5450
+ notificationOutline: {
5451
+ fill: '#DFF2FD',
5452
+ border: '1px solid #0062E6',
5453
+ borderColor: '#0062E6'
5454
+ },
5455
+ summary: '#9595FF',
5456
+ summaryOutline: {
5457
+ fill: '#F8F9F9',
5458
+ border: '1px solid #8383F2',
5459
+ borderColor: '#8383F2'
5460
+ },
5461
+ disabled: '#9B9FB0',
5462
+ disabledOutline: {
5463
+ fill: '#F8F9F9',
5464
+ border: '1p solid #9B9FB0',
5465
+ borderColor: '#9B9FB0'
5466
+ }
5467
+ },
5468
+ snackbar: {
5469
+ background: '#051039',
5470
+ text: '#FFFFFF',
5471
+ action: '#98e1f1',
5472
+ actionHover: {
5473
+ fill: '#7BACFF',
5474
+ opacity: 0.2
5475
+ }
5476
+ },
5477
+ chip: {
5478
+ highlightDefault: {
5479
+ fill: '#FFA800',
5480
+ opacity: 0.15,
5481
+ borderColor: '#374061'
5482
+ },
5483
+ highlightDefaultMouseOver: {
5484
+ fill: '#DEDBD4',
5485
+ opacity: 1,
5486
+ borderColor: '#374061'
5487
+ },
5488
+ highlightActiveDefault: {
5489
+ fill: '#566F94',
5490
+ opacity: 1,
5491
+ borderColor: 'transparent'
5492
+ },
5493
+ highlightActiveMouseOver: {
5494
+ fill: '#345596',
5495
+ opacity: 1,
5496
+ borderColor: 'transparent'
5497
+ }
5498
+ }
5499
+ };
5500
+ // https://app.zeplin.io/project/5ecf84a3c6ae1047a368f393/screen/609bb6a5287bd1abe0de39a7
5501
+ var elevations = {
5502
+ elevation_01: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
5503
+ elevation_02: '0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
5504
+ elevation_03: '0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.14)',
5505
+ elevation_04: '0 1px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.14)',
5506
+ elevation_06: '0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 6px 10px 0 rgba(0, 0, 0, 0.14)',
5507
+ elevation_08: '0 4px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 8px 10px 1px rgba(0, 0, 0, 0.14)',
5508
+ elevation_09: '0 5px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 16px 2px rgba(0, 0, 0, 0.12), 0 9px 12px 1px rgba(0, 0, 0, 0.14)',
5509
+ elevation_12: '0 7px 8px 0 rgba(0, 0, 0, 0.2), 0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 12px 17px 2px rgba(0, 0, 0, 0.14)',
5510
+ elevation_16: '0 8px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 16px 24px 2px rgba(0, 0, 0, 0.14)',
5511
+ elevation_24: '0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.14)'
5512
+ };
5513
+
5514
+ /* *
5515
+ * Licensed under the Apache License, Version 2.0 (the "License");
5516
+ * you may not use this file except in compliance with the License.
5517
+ * You may obtain a copy of the License at
5518
+ *
5519
+ * http://www.apache.org/licenses/LICENSE-2.0
5520
+ *
5521
+ * Unless required by applicable law or agreed to in writing, software
5522
+ * distributed under the License is distributed on an "AS IS" BASIS,
5523
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5524
+ * See the License for the specific language governing permissions and
5525
+ * limitations under the License.
5526
+ *
5527
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
5528
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
5529
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
5530
+ * */
5531
+ var ThemeTypes;
5532
+ (function (ThemeTypes) {
5533
+ ThemeTypes["DARK_THEME"] = "darkTheme";
5534
+ ThemeTypes["LIGHT_THEME"] = "lightTheme";
5535
+ ThemeTypes["XMAS2024_THEME"] = "xmas2024Theme";
5536
+ ThemeTypes["DEMO_THEME"] = "demoTheme";
5537
+ })(ThemeTypes || (ThemeTypes = {}));
5538
+
5539
+ /* *
5540
+ * Licensed under the Apache License, Version 2.0 (the "License");
5541
+ * you may not use this file except in compliance with the License.
5542
+ * You may obtain a copy of the License at
5543
+ *
5544
+ * http://www.apache.org/licenses/LICENSE-2.0
5545
+ *
5546
+ * Unless required by applicable law or agreed to in writing, software
5547
+ * distributed under the License is distributed on an "AS IS" BASIS,
5548
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5549
+ * See the License for the specific language governing permissions and
5550
+ * limitations under the License.
5551
+ *
5552
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
5553
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
5554
+ * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
5555
+ * */
5556
+ var getThemeByName = function getThemeByName(themeName) {
5557
+ switch (themeName) {
5558
+ case ThemeTypes.DARK_THEME:
5559
+ return namedDarkTheme;
5560
+ case ThemeTypes.LIGHT_THEME:
5561
+ return namedLightTheme;
5562
+ case ThemeTypes.XMAS2024_THEME:
5563
+ return namedXmas2024Theme;
5564
+ case ThemeTypes.DEMO_THEME:
5565
+ return namedDemoTheme;
5566
+ default:
5567
+ return namedLightTheme;
5568
+ }
5569
+ };
5570
+ var lightTheme = createTheme({
5571
+ paletteType: 'light',
5572
+ geowebColors: colors$3,
5573
+ elevations: elevations$3
5574
+ });
5575
+ var darkTheme = createTheme({
5576
+ paletteType: 'dark',
5577
+ geowebColors: colors$2,
5578
+ elevations: elevations$2
5579
+ });
5580
+ var xmas2024Theme = createTheme({
5581
+ paletteType: 'dark',
5582
+ geowebColors: colors$1,
5583
+ elevations: elevations$1
5584
+ });
5585
+ var demoTheme = createTheme({
5586
+ paletteType: 'light',
5587
+ geowebColors: colors,
5588
+ elevations: elevations
5589
+ });
5590
+ var namedLightTheme = {
5591
+ name: ThemeTypes.LIGHT_THEME,
5592
+ theme: lightTheme
5593
+ };
5594
+ var namedDarkTheme = {
5595
+ name: ThemeTypes.DARK_THEME,
5596
+ theme: darkTheme
5597
+ };
5598
+ var namedXmas2024Theme = {
5599
+ name: ThemeTypes.XMAS2024_THEME,
5600
+ theme: xmas2024Theme
5601
+ };
5602
+ var namedDemoTheme = {
5603
+ name: ThemeTypes.DEMO_THEME,
5604
+ theme: demoTheme
4854
5605
  };
4855
5606
 
4856
5607
  var ThemeContext = /*#__PURE__*/React.createContext({
@@ -5564,4 +6315,4 @@ var BackdropElement = function BackdropElement() {
5564
6315
  return elem === null ? defaultElem : elem;
5565
6316
  };
5566
6317
 
5567
- export { Add, Admin, Animation, ArrowDown, ArrowDownCompact, ArrowDropDownDown, ArrowDropDownUp, ArrowLeft, ArrowRight, ArrowUp, ArrowUpCompact, AutoUpdateActive, AutoUpdateInActive, BackdropElement, BackdropStyle, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CloudIdle, CloudLoading, CoastalEvent, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, ColumnCollapse, ColumnCollapsed, ContainerStyle, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, EChartsDarkTheme, EChartsLightTheme, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Expire, Export, FastForward, Filter, FlagBritain, FlagFinland, FlagNetherlands, FlagNorway, Fog, FreezingPrecipitation, FunnelCloud, GeoWebLogo, HamburgerMenu, Haze, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, LayersAdd, Lightning, Link, LinkOff, List, ListItem, Location, LockLocked, LockUnlocked, MapAdd, Menu, Minus, ModerateAircraftIcing, ModerateTurbulence, MyLocation, None, Notifications, Now, Options, OverlayStyle, Pause, Picture, Play, Polygons, Preset, PresetTiles, PresetWorkspace, RadioactiveMaterials, Rain, Remove, Resize, SandStorm, Search, SevereAircraftIcing, SevereTurbulence, SevereWaves, Share, SliderThumb, Snow, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, THEME_NAMESPACE, TemperatureHigh, TemperatureLow, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThumbsUp, Thunderstorm, TimeSeriesSelect, UnExpand, Update, Visibility, VisibilityOff, VulcanicEruption, WebAssetOff, Wind, WorldMapProjection, breakpoints, colors$2 as colorsLight, createShadows, createTheme, darkTheme, dragHandlePath, elevations$2 as elevationsLight, getThemeByName, lightTheme, locationPath, namedDarkTheme, namedLightTheme, namedXmas2024Theme, parseColors, themeTranslations, useThemeContext, xmas2024Theme };
6318
+ export { Add, Admin, Animation, ArrowDown, ArrowDownCompact, ArrowDropDownDown, ArrowDropDownUp, ArrowLeft, ArrowRight, ArrowUp, ArrowUpCompact, AutoUpdateActive, AutoUpdateInActive, BackdropElement, BackdropStyle, Both, Cached, CalendarToday, Cancel, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clear, Clock, Close, CloudIdle, CloudLoading, CoastalEvent, CollapseLarge, CollapseMedium, CollapseSmall, CollapseWindow, ColumnCollapse, ColumnCollapsed, ContainerStyle, Copy, Delete, DimensionsElevation, DimensionsOther, DimensionsRefTime, DimensionsTime, DragHandle, DrawFIRLand, DrawPolygon, DrawRegion, EChartsDarkTheme, EChartsLightTheme, Edit, Equalizer, Exclamation, ExitDomain, Expand, ExpandWindow, Expire, Export, FastForward, Filter, FlagBritain, FlagFinland, FlagNetherlands, FlagNorway, Fog, FreezingPrecipitation, FunnelCloud, GeoWebLogo, HamburgerMenu, Haze, Home, index as Icons, Info, KeyCommand, KeyOption, Layers, LayersAdd, Lightning, Link, LinkOff, List, ListItem, Location, LockLocked, LockUnlocked, MapAdd, Menu, Minus, ModerateAircraftIcing, ModerateTurbulence, MyLocation, None, Notifications, Now, Options, OverlayStyle, Pause, Picture, Play, Polygons, Preset, PresetTiles, PresetWorkspace, RadioactiveMaterials, Rain, Remove, Resize, SandStorm, Search, SevereAircraftIcing, SevereTurbulence, SevereWaves, Share, SharedPresetsMyUser, SharedPresetsOtherUsers, SliderThumb, Snow, Speed, SplitHorizontal, SplitVertical, StepBackward, StepForward, SubdirectoryArrowRight, Success, THEME_NAMESPACE, TemperatureHigh, TemperatureLow, TextIcon, ThemeContext, ThemeProvider, ThemeTypes, ThemeWrapper, ThumbsUp, Thunderstorm, TimeSeriesSelect, UnExpand, Update, Visibility, VisibilityOff, VulcanicEruption, WebAssetOff, Wind, WorldMapProjection, breakpoints, colors$3 as colorsLight, createShadows, createTheme, darkTheme, demoTheme, dragHandlePath, elevations$3 as elevationsLight, getThemeByName, lightTheme, namedDarkTheme, namedDemoTheme, namedLightTheme, namedXmas2024Theme, parseColors, themeTranslations, useThemeContext, xmas2024Theme };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengeoweb/theme",
3
- "version": "10.2.1-spike-ol.3",
3
+ "version": "11.1.0",
4
4
  "description": "GeoWeb Theme library for the opengeoweb project",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -8,18 +8,17 @@
8
8
  "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
9
9
  },
10
10
  "dependencies": {
11
- "@emotion/react": "11.14.0",
12
- "@emotion/styled": "11.14.0",
13
- "@mui/material": "^6.1.1",
14
11
  "@mui/system": "^6.1.1",
15
12
  "@mui/x-date-pickers": "^7.17.0",
16
- "@storybook/react": "8.4.2",
17
- "@testing-library/react": "16.0.1",
18
13
  "i18next": "^23.11.5",
19
- "lodash": "^4.17.21",
20
- "msw": "^1.3.2",
21
- "react": "18.3.1",
22
- "react-i18next": "^15.1.1"
14
+ "@mui/material": "^6.1.1",
15
+ "react-i18next": "^15.1.1",
16
+ "lodash": "^4.17.21"
17
+ },
18
+ "peerDependencies": {
19
+ "react": "18",
20
+ "@emotion/react": "*",
21
+ "@emotion/styled": "*"
23
22
  },
24
23
  "module": "./index.esm.js",
25
24
  "type": "module",
package/src/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import 'msw';
2
1
  import * as Icons from './lib/components/Icons';
3
2
  import themeTranslations from '../locales/theme.json';
4
3
  export { Icons };
@@ -1,5 +1,5 @@
1
- import * as React from 'react';
2
1
  import { SvgIconProps } from '@mui/material';
2
+ import * as React from 'react';
3
3
  export declare const SplitHorizontal: React.FC;
4
4
  export declare const SplitVertical: React.FC;
5
5
  export declare const Expand: React.FC;
@@ -133,4 +133,6 @@ export declare const FlagNorway: (props: SvgIconProps) => React.ReactElement;
133
133
  export declare const FlagBritain: (props: SvgIconProps) => React.ReactElement;
134
134
  export declare const ColumnCollapse: (props: SvgIconProps) => React.ReactElement;
135
135
  export declare const ColumnCollapsed: (props: SvgIconProps) => React.ReactElement;
136
+ export declare const SharedPresetsOtherUsers: (props: SvgIconProps) => React.ReactElement;
137
+ export declare const SharedPresetsMyUser: (props: SvgIconProps) => React.ReactElement;
136
138
  export {};
@@ -1,2 +1 @@
1
1
  export declare const dragHandlePath = "M9.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm-5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z";
2
- export declare const locationPath = "M11.58 11.758a2.177 2.177 0 1 1 0-4.354 2.177 2.177 0 0 1 0 4.354m0-8.758A6.58 6.58 0 0 0 5 9.58C5 15.15 11.58 21 11.58 21s6.582-5.85 6.582-11.42A6.58 6.58 0 0 0 11.58 3";
@@ -12,7 +12,8 @@ export interface NamedTheme {
12
12
  export declare enum ThemeTypes {
13
13
  DARK_THEME = "darkTheme",
14
14
  LIGHT_THEME = "lightTheme",
15
- XMAS2024_THEME = "xmas2024Theme"
15
+ XMAS2024_THEME = "xmas2024Theme",
16
+ DEMO_THEME = "demoTheme"
16
17
  }
17
18
  export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'flat' | 'tool' | 'boxed' | 'icon';
18
19
  export interface ButtonStyle {
@@ -0,0 +1,3 @@
1
+ import { Elevations, GeowebColorPalette } from '../../../types';
2
+ export declare const colors: GeowebColorPalette;
3
+ export declare const elevations: Elevations;
@@ -4,6 +4,7 @@ export declare const getThemeByName: (themeName: ThemeTypes) => NamedTheme;
4
4
  export declare const lightTheme: import("@mui/material").Theme;
5
5
  export declare const darkTheme: import("@mui/material").Theme;
6
6
  export declare const xmas2024Theme: import("@mui/material").Theme;
7
+ export declare const demoTheme: import("@mui/material").Theme;
7
8
  export declare const namedLightTheme: {
8
9
  name: ThemeTypes;
9
10
  theme: import("@mui/material").Theme;
@@ -16,4 +17,8 @@ export declare const namedXmas2024Theme: {
16
17
  name: ThemeTypes;
17
18
  theme: import("@mui/material").Theme;
18
19
  };
20
+ export declare const namedDemoTheme: {
21
+ name: ThemeTypes;
22
+ theme: import("@mui/material").Theme;
23
+ };
19
24
  export { colorsLight, elevationsLight };