@swr-data-lab/components 2.2.0 → 2.3.1

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 (13) hide show
  1. package/dist/ChartList/ChartList.svelte +9 -10
  2. package/dist/maplibre/Map/Map.svelte +37 -4
  3. package/dist/maplibre/MapStyle/SWRDataLabLight.js +3 -2
  4. package/dist/maplibre/MapStyle/components/Admin.js +9 -24
  5. package/dist/maplibre/MapStyle/components/Landuse.js +4 -4
  6. package/dist/maplibre/MapStyle/components/PlaceLabels.d.ts +1 -0
  7. package/dist/maplibre/MapStyle/components/PlaceLabels.js +143 -98
  8. package/dist/maplibre/MapStyle/components/Roads.js +212 -785
  9. package/dist/maplibre/MapStyle/components/Transit.js +23 -23
  10. package/dist/maplibre/MapStyle/components/Walking.js +26 -200
  11. package/dist/maplibre/MapStyle/tokens.d.ts +5 -3
  12. package/dist/maplibre/MapStyle/tokens.js +11 -9
  13. package/package.json +2 -2
package/dist/maplibre/MapStyle/components/Transit.js CHANGED
@@ -26,7 +26,7 @@ const rail_overlay = {
26
26
  },
27
27
  line_dasharray: [0.125, 6]
28
28
  };
29
- const rail_outline = {
29
+ const rail_case = {
30
30
  line_color: tokens.background,
31
31
  line_width: {
32
32
  stops: [
@@ -54,7 +54,7 @@ export default function makeTransit() {
54
54
  }
55
55
  },
56
56
  {
57
- id: 'airport-taxiway:outline',
57
+ id: 'airport-taxiway:case',
58
58
  filter: ['==', 'kind', 'taxiway'],
59
59
  paint: {
60
60
  'line-color': 'hsl(36,0%,80%)',
@@ -74,7 +74,7 @@ export default function makeTransit() {
74
74
  }
75
75
  },
76
76
  {
77
- id: 'airport-runway:outline',
77
+ id: 'airport-runway:case',
78
78
  filter: ['==', 'kind', 'runway'],
79
79
  paint: {
80
80
  'line-color': 'hsl(36,0%,80%)',
@@ -161,57 +161,57 @@ export default function makeTransit() {
161
161
  });
162
162
  const transitBridges = [
163
163
  {
164
- id: 'bridge-transport-monorail:outline',
164
+ id: 'bridge-transport-monorail:case',
165
165
  filter: ['all', ['in', 'kind', 'monorail'], ['!has', 'service'], ['==', 'bridge', true]],
166
166
  minzoom: 15,
167
167
  paint: {
168
- 'line-color': rail_outline.line_color,
169
- 'line-width': rail_outline.line_width
168
+ 'line-color': rail_case.line_color,
169
+ 'line-width': rail_case.line_width
170
170
  }
171
171
  },
172
172
  {
173
- id: 'bridge-transport-funicular:outline',
173
+ id: 'bridge-transport-funicular:case',
174
174
  filter: ['all', ['in', 'kind', 'funicular'], ['!has', 'service'], ['==', 'bridge', true]],
175
175
  minzoom: 15,
176
176
  paint: {
177
- 'line-color': rail_outline.line_color,
178
- 'line-width': rail_outline.line_width
177
+ 'line-color': rail_case.line_color,
178
+ 'line-width': rail_case.line_width
179
179
  }
180
180
  },
181
181
  {
182
- id: 'bridge-transport-tram:outline',
182
+ id: 'bridge-transport-tram:case',
183
183
  filter: ['all', ['in', 'kind', 'tram'], ['!has', 'service'], ['==', 'bridge', true]],
184
184
  minzoom: 15,
185
185
  paint: {
186
- 'line-color': rail_outline.line_color,
187
- 'line-width': rail_outline.line_width
186
+ 'line-color': rail_case.line_color,
187
+ 'line-width': rail_case.line_width
188
188
  }
189
189
  },
190
190
  {
191
- id: 'bridge-transport-narrowgauge:outline',
191
+ id: 'bridge-transport-narrowgauge:case',
192
192
  filter: ['all', ['in', 'kind', 'narrow_gauge'], ['!has', 'service'], ['==', 'bridge', true]],
193
193
  minzoom: 15,
194
194
  paint: {
195
- 'line-color': rail_outline.line_color,
196
- 'line-width': rail_outline.line_width
195
+ 'line-color': rail_case.line_color,
196
+ 'line-width': rail_case.line_width
197
197
  }
198
198
  },
199
199
  {
200
- id: 'bridge-transport-lightrail:outline',
200
+ id: 'bridge-transport-lightrail:case',
201
201
  filter: ['all', ['in', 'kind', 'light_rail'], ['!has', 'service'], ['==', 'bridge', true]],
202
202
  paint: {
203
- 'line-color': rail_outline.line_color,
204
- 'line-width': rail_outline.line_width,
205
- 'line-opacity': rail_outline.line_opacity
203
+ 'line-color': rail_case.line_color,
204
+ 'line-width': rail_case.line_width,
205
+ 'line-opacity': rail_case.line_opacity
206
206
  }
207
207
  },
208
208
  {
209
- id: 'bridge-transport-rail:outline',
209
+ id: 'bridge-transport-rail:case',
210
210
  filter: ['all', ['in', 'kind', 'rail'], ['!has', 'service'], ['==', 'bridge', true]],
211
211
  paint: {
212
- 'line-color': rail_outline.line_color,
213
- 'line-width': rail_outline.line_width,
214
- 'line-opacity': rail_outline.line_opacity
212
+ 'line-color': rail_case.line_color,
213
+ 'line-width': rail_case.line_width,
214
+ 'line-opacity': rail_case.line_opacity
215
215
  }
216
216
  },
217
217
  {
package/dist/maplibre/MapStyle/components/Walking.js CHANGED
@@ -41,7 +41,7 @@ export default function makeWalking() {
41
41
  }
42
42
  },
43
43
  {
44
- id: 'tunnel-way-footway:outline',
44
+ id: 'tunnel-way-footway:case',
45
45
  type: 'line',
46
46
  'source-layer': 'streets',
47
47
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'footway']],
@@ -63,7 +63,7 @@ export default function makeWalking() {
63
63
  minzoom: 15
64
64
  },
65
65
  {
66
- id: 'tunnel-way-steps:outline',
66
+ id: 'tunnel-way-steps:case',
67
67
  type: 'line',
68
68
  'source-layer': 'streets',
69
69
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'steps']],
@@ -85,7 +85,7 @@ export default function makeWalking() {
85
85
  minzoom: 15
86
86
  },
87
87
  {
88
- id: 'tunnel-way-path:outline',
88
+ id: 'tunnel-way-path:case',
89
89
  type: 'line',
90
90
  'source-layer': 'streets',
91
91
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'path']],
@@ -107,7 +107,7 @@ export default function makeWalking() {
107
107
  minzoom: 15
108
108
  },
109
109
  {
110
- id: 'tunnel-way-cycleway:outline',
110
+ id: 'tunnel-way-cycleway:case',
111
111
  type: 'line',
112
112
  'source-layer': 'streets',
113
113
  filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'cycleway']],
@@ -130,7 +130,7 @@ export default function makeWalking() {
130
130
  },
131
131
  {
132
132
  // See: https://wiki.openstreetmap.org/wiki/Tag:highway%3Dtrack
133
- id: 'tunnel-street-track:outline',
133
+ id: 'tunnel-street-track:case',
134
134
  type: 'line',
135
135
  'source-layer': 'streets',
136
136
  filter: ['all', ['==', 'kind', 'track'], ['==', 'tunnel', true]],
@@ -158,7 +158,7 @@ export default function makeWalking() {
158
158
  }
159
159
  },
160
160
  {
161
- id: 'tunnel-street-pedestrian:outline',
161
+ id: 'tunnel-street-pedestrian:case',
162
162
  type: 'line',
163
163
  'source-layer': 'streets',
164
164
  filter: ['all', ['==', 'kind', 'pedestrian'], ['==', 'tunnel', true]],
@@ -487,24 +487,7 @@ export default function makeWalking() {
487
487
  });
488
488
  const walkingSurface = [
489
489
  {
490
- id: 'street-pedestrian-zone',
491
- type: 'fill',
492
- 'source-layer': 'street_polygons',
493
- filter: ['all', ['!=', 'bridge', true], ['!=', 'tunnel', true], ['==', 'kind', 'pedestrian']],
494
- paint: {
495
- 'fill-color': 'rgba(245,245,245,0.25)',
496
- 'fill-opacity': {
497
- stops: [
498
- [12, 0],
499
- [13, 1],
500
- [14, 0],
501
- [15, 1]
502
- ]
503
- }
504
- }
505
- },
506
- {
507
- id: 'way-footway:outline',
490
+ id: 'way-footway:case',
508
491
  type: 'line',
509
492
  'source-layer': 'streets',
510
493
  filter: ['all', ['!=', 'bridge', true], ['!=', 'tunnel', true], ['in', 'kind', 'footway']],
@@ -526,7 +509,7 @@ export default function makeWalking() {
526
509
  minzoom: 15
527
510
  },
528
511
  {
529
- id: 'way-steps:outline',
512
+ id: 'way-steps:case',
530
513
  type: 'line',
531
514
  'source-layer': 'streets',
532
515
  filter: ['all', ['!=', 'bridge', true], ['!=', 'tunnel', true], ['in', 'kind', 'steps']],
@@ -548,7 +531,7 @@ export default function makeWalking() {
548
531
  }
549
532
  },
550
533
  {
551
- id: 'way-path:outline',
534
+ id: 'way-path:case',
552
535
  type: 'line',
553
536
  'source-layer': 'streets',
554
537
  filter: ['all', ['!=', 'bridge', true], ['!=', 'tunnel', true], ['in', 'kind', 'path']],
@@ -570,7 +553,7 @@ export default function makeWalking() {
570
553
  }
571
554
  },
572
555
  {
573
- id: 'way-cycleway:outline',
556
+ id: 'way-cycleway:case',
574
557
  type: 'line',
575
558
  'source-layer': 'streets',
576
559
  filter: ['all', ['!=', 'bridge', true], ['!=', 'tunnel', true], ['in', 'kind', 'cycleway']],
@@ -592,7 +575,7 @@ export default function makeWalking() {
592
575
  minzoom: 15
593
576
  },
594
577
  {
595
- id: 'street-track:outline',
578
+ id: 'street-track:case',
596
579
  type: 'line',
597
580
  'source-layer': 'streets',
598
581
  filter: ['all', ['==', 'kind', 'track'], ['!=', 'bridge', true], ['!=', 'tunnel', true]],
@@ -620,12 +603,12 @@ export default function makeWalking() {
620
603
  }
621
604
  },
622
605
  {
623
- id: 'street-pedestrian:outline',
606
+ id: 'street-pedestrian:case',
624
607
  type: 'line',
625
608
  'source-layer': 'streets',
626
609
  filter: ['all', ['==', 'kind', 'pedestrian'], ['!=', 'bridge', true], ['!=', 'tunnel', true]],
627
610
  paint: {
628
- 'line-color': 'hsl(36,0%,80%)',
611
+ 'line-color': tokens.street_tertiary_case,
629
612
  'line-width': {
630
613
  stops: [
631
614
  [12, 2],
@@ -638,15 +621,12 @@ export default function makeWalking() {
638
621
  },
639
622
  'line-opacity': {
640
623
  stops: [
641
- [12, 0],
642
- [13, 1]
624
+ [14, 0],
625
+ [15, 1]
643
626
  ]
644
627
  }
645
628
  },
646
- layout: {
647
- 'line-join': 'round',
648
- 'line-cap': 'round'
649
- }
629
+ layout: street_layout
650
630
  },
651
631
  {
652
632
  id: 'way-footway',
@@ -759,10 +739,7 @@ export default function makeWalking() {
759
739
  ]
760
740
  }
761
741
  },
762
- layout: {
763
- 'line-join': 'round',
764
- 'line-cap': 'round'
765
- }
742
+ layout: street_layout
766
743
  },
767
744
  {
768
745
  id: 'street-pedestrian',
@@ -783,16 +760,12 @@ export default function makeWalking() {
783
760
  },
784
761
  'line-opacity': {
785
762
  stops: [
786
- [12, 0],
787
763
  [13, 0],
788
764
  [14, 1]
789
765
  ]
790
766
  }
791
767
  },
792
- layout: {
793
- 'line-join': 'round',
794
- 'line-cap': 'round'
795
- }
768
+ layout: street_layout
796
769
  },
797
770
  {
798
771
  id: 'street-track-bicycle',
@@ -808,10 +781,7 @@ export default function makeWalking() {
808
781
  paint: {
809
782
  'line-color': 'hsl(0,0%,100%)'
810
783
  },
811
- layout: {
812
- 'line-join': 'round',
813
- 'line-cap': 'round'
814
- }
784
+ layout: street_layout
815
785
  },
816
786
  {
817
787
  id: 'street-pedestrian-bicycle',
@@ -860,10 +830,7 @@ export default function makeWalking() {
860
830
  paint: {
861
831
  'line-color': 'hsl(0,0%,100%)'
862
832
  },
863
- layout: {
864
- 'line-join': 'round',
865
- 'line-cap': 'round'
866
- }
833
+ layout: street_layout
867
834
  },
868
835
  {
869
836
  id: 'street-livingstreet-bicycle',
@@ -951,147 +918,6 @@ export default function makeWalking() {
951
918
  return { source: 'versatiles-osm', ...el };
952
919
  });
953
920
  const walkingBridges = [
954
- {
955
- id: 'bridge-way-footway:bridge',
956
- filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'footway']],
957
- layout: {
958
- 'line-cap': 'butt',
959
- 'line-join': 'round'
960
- },
961
- paint: {
962
- 'line-color': 'rgb(239,239,239)',
963
- 'line-opacity': 0.5,
964
- 'line-width': {
965
- stops: [
966
- [15, 0],
967
- [16, 7],
968
- [18, 10],
969
- [19, 17],
970
- [20, 31]
971
- ]
972
- }
973
- },
974
- minzoom: 15
975
- },
976
- {
977
- id: 'bridge-way-steps:bridge',
978
- filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'steps']],
979
- layout: {
980
- 'line-cap': 'butt',
981
- 'line-join': 'round'
982
- },
983
- paint: {
984
- 'line-color': 'rgb(239,239,239)',
985
- 'line-opacity': 0.5,
986
- 'line-width': {
987
- stops: [
988
- [15, 0],
989
- [16, 7],
990
- [18, 10],
991
- [19, 17],
992
- [20, 31]
993
- ]
994
- }
995
- },
996
- minzoom: 15
997
- },
998
- {
999
- id: 'bridge-way-path:bridge',
1000
- filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'path']],
1001
- layout: {
1002
- 'line-cap': 'butt',
1003
- 'line-join': 'round'
1004
- },
1005
- paint: {
1006
- 'line-color': 'rgb(239,239,239)',
1007
- 'line-opacity': 0.5,
1008
- 'line-width': {
1009
- stops: [
1010
- [15, 0],
1011
- [16, 7],
1012
- [18, 10],
1013
- [19, 17],
1014
- [20, 31]
1015
- ]
1016
- }
1017
- },
1018
- minzoom: 15
1019
- },
1020
- {
1021
- id: 'bridge-way-cycleway:bridge',
1022
- filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'cycleway']],
1023
- layout: {
1024
- 'line-cap': 'butt',
1025
- 'line-join': 'round'
1026
- },
1027
- paint: {
1028
- 'line-color': 'rgb(239,239,239)',
1029
- 'line-opacity': 0.5,
1030
- 'line-width': {
1031
- stops: [
1032
- [15, 0],
1033
- [16, 7],
1034
- [18, 10],
1035
- [19, 17],
1036
- [20, 31]
1037
- ]
1038
- }
1039
- },
1040
- minzoom: 15
1041
- },
1042
- {
1043
- id: 'bridge-street-track:bridge',
1044
- filter: ['all', ['==', 'kind', 'track'], ['==', 'bridge', true]],
1045
- layout: {
1046
- 'line-cap': 'butt',
1047
- 'line-join': 'round'
1048
- },
1049
- paint: {
1050
- 'line-color': 'rgb(239,239,239)',
1051
- 'line-opacity': {
1052
- stops: [
1053
- [14, 0],
1054
- [15, 1]
1055
- ]
1056
- },
1057
- 'line-width': {
1058
- stops: [
1059
- [14, 3],
1060
- [16, 6],
1061
- [18, 25],
1062
- [19, 67],
1063
- [20, 134]
1064
- ]
1065
- }
1066
- }
1067
- },
1068
- {
1069
- id: 'bridge-street-pedestrian:bridge',
1070
- filter: ['all', ['==', 'kind', 'pedestrian'], ['==', 'bridge', true]],
1071
- layout: {
1072
- 'line-cap': 'butt',
1073
- 'line-join': 'round'
1074
- },
1075
- paint: {
1076
- 'line-color': 'rgb(239,239,239)',
1077
- 'line-opacity': {
1078
- stops: [
1079
- [12, 0],
1080
- [13, 1]
1081
- ]
1082
- },
1083
- 'line-width': {
1084
- stops: [
1085
- [12, 3],
1086
- [14, 4],
1087
- [16, 8],
1088
- [18, 36],
1089
- [19, 90],
1090
- [20, 179]
1091
- ]
1092
- }
1093
- }
1094
- },
1095
921
  {
1096
922
  id: 'bridge-street-pedestrian-zone',
1097
923
  type: 'fill',
@@ -1108,7 +934,7 @@ export default function makeWalking() {
1108
934
  }
1109
935
  },
1110
936
  {
1111
- id: 'bridge-way-footway:outline',
937
+ id: 'bridge-way-footway:case',
1112
938
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'footway']],
1113
939
  minzoom: 15,
1114
940
  layout: {
@@ -1128,7 +954,7 @@ export default function makeWalking() {
1128
954
  }
1129
955
  },
1130
956
  {
1131
- id: 'bridge-way-steps:outline',
957
+ id: 'bridge-way-steps:case',
1132
958
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'steps']],
1133
959
  minzoom: 15,
1134
960
  layout: {
@@ -1148,7 +974,7 @@ export default function makeWalking() {
1148
974
  }
1149
975
  },
1150
976
  {
1151
- id: 'bridge-way-path:outline',
977
+ id: 'bridge-way-path:case',
1152
978
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'path']],
1153
979
  layout: {
1154
980
  'line-cap': 'butt'
@@ -1168,7 +994,7 @@ export default function makeWalking() {
1168
994
  minzoom: 15
1169
995
  },
1170
996
  {
1171
- id: 'bridge-way-cycleway:outline',
997
+ id: 'bridge-way-cycleway:case',
1172
998
  filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'cycleway']],
1173
999
  layout: {
1174
1000
  'line-cap': 'butt'
@@ -1188,7 +1014,7 @@ export default function makeWalking() {
1188
1014
  minzoom: 15
1189
1015
  },
1190
1016
  {
1191
- id: 'bridge-street-track:outline',
1017
+ id: 'bridge-street-track:case',
1192
1018
  filter: ['all', ['==', 'kind', 'track'], ['==', 'bridge', true]],
1193
1019
  paint: {
1194
1020
  'line-color': 'rgb(217,217,217)',
@@ -1211,7 +1037,7 @@ export default function makeWalking() {
1211
1037
  layout: street_layout
1212
1038
  },
1213
1039
  {
1214
- id: 'bridge-street-pedestrian:outline',
1040
+ id: 'bridge-street-pedestrian:case',
1215
1041
  filter: ['all', ['==', 'kind', 'pedestrian'], ['==', 'bridge', true]],
1216
1042
  paint: {
1217
1043
  'line-color': 'rgb(217,217,217)',
package/dist/maplibre/MapStyle/tokens.d.ts CHANGED
@@ -5,17 +5,19 @@ declare const tokens: {
5
5
  background: string;
6
6
  water: string;
7
7
  water_light: string;
8
+ water_ocean: string;
8
9
  marsh: string;
9
10
  grass: string;
10
11
  grass_dark: string;
11
12
  street_primary: string;
12
- street_primary_outline: string;
13
+ street_primary_case: string;
13
14
  street_secondary: string;
14
- street_secondary_outline: string;
15
+ street_secondary_case: string;
15
16
  street_tertiary: string;
16
- street_tertiary_outline: string;
17
+ street_tertiary_case: string;
17
18
  label_primary: string;
18
19
  label_secondary: string;
20
+ label_tertiary: string;
19
21
  building: string;
20
22
  };
21
23
  export default tokens;
package/dist/maplibre/MapStyle/tokens.js CHANGED
@@ -3,19 +3,21 @@ const tokens = {
3
3
  sans_medium: ['SWR Sans Medium'],
4
4
  sans_bold: ['SWR Sans Bold'],
5
5
  background: 'hsl(0, 0%, 100%)',
6
- water: 'hsl(210, 41%, 87%)',
6
+ water: 'hsl(210, 41%, 89%)',
7
7
  water_light: 'hsl(210, 41%, 90%)',
8
+ water_ocean: 'hsl(210, 25%, 96%)',
8
9
  marsh: 'hsl(200, 14%, 97%)',
9
- grass: 'hsl(149, 37%, 97%)',
10
- grass_dark: 'hsl(149, 37%, 93%)',
11
- street_primary: 'hsl(0, 0%, 95%)',
12
- street_primary_outline: 'hsla(0, 0%, 0%, 20%)',
10
+ grass: 'hsl(140, 27%, 96%)',
11
+ grass_dark: 'hsl(148, 52%, 94%)',
12
+ street_primary: 'hsl(0, 0%, 96%)',
13
+ street_primary_case: 'hsl(0, 0%, 75%)',
13
14
  street_secondary: 'hsl(0, 0%, 95%)',
14
- street_secondary_outline: 'hsl(0, 0%, 50%)',
15
+ street_secondary_case: 'hsl(0, 0%, 50%)',
15
16
  street_tertiary: 'hsl(0, 0%, 95%)',
16
- street_tertiary_outline: 'hsl(0, 0%, 50%)',
17
- label_primary: 'rgb(10, 10, 11)',
18
- label_secondary: 'hsl(240, 2%, 20%)',
17
+ street_tertiary_case: 'hsl(0, 0%, 70%)',
18
+ label_primary: 'hsl(240, 5%, 10%)',
19
+ label_secondary: 'hsl(240, 2%, 30%)',
20
+ label_tertiary: 'hsl(240, 2%, 50%)',
19
21
  building: '#f3f2f1'
20
22
  };
21
23
  export default tokens;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@swr-data-lab/components",
3
3
  "description": "SWR Data Lab component library",
4
- "version": "2.2.0",
4
+ "version": "2.3.1",
5
5
  "author": "SWR Data Lab",
6
6
  "license": "UNLICENSED",
7
7
  "type": "module",
@@ -46,7 +46,7 @@
46
46
  "@storybook/sveltekit": "^9.0.15",
47
47
  "@storybook/test-runner": "^0.23.0",
48
48
  "@sveltejs/adapter-auto": "^6.0.1",
49
- "@sveltejs/kit": "^2.22.2",
49
+ "@sveltejs/kit": "^2.26.1",
50
50
  "@sveltejs/package": "^2.3.12",
51
51
  "@sveltejs/vite-plugin-svelte": "^5.1.0",
52
52
  "@types/geojson": "^7946.0.16",