@swr-data-lab/components 2.34.2 → 2.34.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.
- package/dist/DesignTokens/Tokens.js +2 -2
- package/dist/maplibre/GeocoderControl/GeocoderControl.svelte +20 -20
- package/dist/maplibre/Map/Map.svelte +7 -4
- package/dist/maplibre/MapControl/MapControl.svelte +1 -3
- package/dist/maplibre/MapStyle/SWRDataLabDark.js +8 -8
- package/dist/maplibre/MapStyle/components/Roads.js +8 -3
- package/dist/maplibre/ScaleControl/ScaleControl.svelte +1 -0
- package/package.json +1 -1
|
@@ -23,15 +23,13 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
|
|
|
23
23
|
<MapControl control={geocoder} position="top-left" />
|
|
24
24
|
|
|
25
25
|
<style>:global(.maplibregl-ctrl-geocoder) {
|
|
26
|
-
background-color: var(--color-
|
|
26
|
+
background-color: var(--color-pageFill);
|
|
27
27
|
position: relative;
|
|
28
28
|
width: 100%;
|
|
29
29
|
z-index: 1;
|
|
30
30
|
font-family: var(--swr-sans);
|
|
31
|
-
font-size: var(--fs-
|
|
32
|
-
border-radius: var(--br-small);
|
|
31
|
+
font-size: var(--fs-base);
|
|
33
32
|
border: 1px solid var(--color-textSecondary);
|
|
34
|
-
box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.075);
|
|
35
33
|
}
|
|
36
34
|
:global(.maplibregl-ctrl-geocoder) :global(button) {
|
|
37
35
|
cursor: pointer;
|
|
@@ -42,20 +40,21 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
|
|
|
42
40
|
padding: 0.4em 0.65em;
|
|
43
41
|
}
|
|
44
42
|
:global(.maplibregl-ctrl-geocoder--input) {
|
|
45
|
-
width: calc(100% - 3.7em);
|
|
46
43
|
height: 100%;
|
|
47
44
|
font-family: inherit;
|
|
48
45
|
font-size: inherit;
|
|
49
46
|
background-color: transparent;
|
|
50
47
|
color: var(--color-textPrimary);
|
|
51
48
|
border: 0;
|
|
52
|
-
height:
|
|
53
|
-
padding: 0 1.
|
|
54
|
-
padding-top: 0.1em;
|
|
49
|
+
height: 2em;
|
|
50
|
+
padding: 0 1.85em;
|
|
55
51
|
text-overflow: ellipsis;
|
|
56
52
|
white-space: nowrap;
|
|
57
53
|
overflow: hidden;
|
|
58
54
|
}
|
|
55
|
+
:global(.maplibregl-ctrl-geocoder--input::-webkit-search-cancel-button), :global(.maplibregl-ctrl-geocoder--input::-webkit-search-decoration) {
|
|
56
|
+
appearance: none;
|
|
57
|
+
}
|
|
59
58
|
:global(.maplibregl-ctrl-geocoder--input::placeholder) {
|
|
60
59
|
opacity: 1;
|
|
61
60
|
color: var(--color-textSecondary);
|
|
@@ -74,15 +73,13 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
|
|
|
74
73
|
border: 0;
|
|
75
74
|
}
|
|
76
75
|
:global(.maplibregl-ctrl-geocoder) :global(.suggestions) {
|
|
77
|
-
background: var(--color-
|
|
78
|
-
border: 1px solid
|
|
79
|
-
|
|
80
|
-
border-radius: var(--br-small);
|
|
81
|
-
left: 0;
|
|
76
|
+
background: var(--color-pageFill);
|
|
77
|
+
border: 1px solid var(--color-textSecondary);
|
|
78
|
+
left: -1px;
|
|
82
79
|
list-style: none;
|
|
83
80
|
position: absolute;
|
|
84
81
|
width: 100%;
|
|
85
|
-
top:
|
|
82
|
+
top: 100%;
|
|
86
83
|
z-index: 1000;
|
|
87
84
|
overflow: hidden;
|
|
88
85
|
}
|
|
@@ -94,9 +91,9 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
|
|
|
94
91
|
:global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li) > :global(a) {
|
|
95
92
|
cursor: default;
|
|
96
93
|
display: block;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
padding-bottom: 0.
|
|
94
|
+
font-size: var(--fs-small-1);
|
|
95
|
+
padding: 0.7em 0.75em;
|
|
96
|
+
padding-bottom: 0.65em;
|
|
100
97
|
border-bottom: 1px solid var(--color-surfaceBorder);
|
|
101
98
|
}
|
|
102
99
|
:global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li:last-child) > :global(a) {
|
|
@@ -146,15 +143,18 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
|
|
|
146
143
|
position: absolute;
|
|
147
144
|
top: 50%;
|
|
148
145
|
transform: translateY(-50%);
|
|
149
|
-
height: 1em;
|
|
150
146
|
}
|
|
151
147
|
:global(.maplibregl-ctrl-geocoder--icon) :global(path) {
|
|
152
148
|
fill: var(--color-textPrimary);
|
|
153
149
|
}
|
|
154
150
|
:global(.maplibregl-ctrl-geocoder--icon-close) {
|
|
155
151
|
right: 0;
|
|
152
|
+
height: 1.15em;
|
|
153
|
+
opacity: 0.5;
|
|
156
154
|
}
|
|
157
155
|
:global(.maplibregl-ctrl-geocoder--icon-search) {
|
|
158
|
-
left: 0.
|
|
159
|
-
height: 1.
|
|
156
|
+
left: 0.4em;
|
|
157
|
+
height: 1.25em;
|
|
158
|
+
top: 51%;
|
|
159
|
+
width: auto;
|
|
160
160
|
}</style>
|
|
@@ -215,8 +215,8 @@ const handleDebugCopyLocationClick = (e) => {
|
|
|
215
215
|
top: 0.5em;
|
|
216
216
|
}
|
|
217
217
|
:global(.maplibregl-ctrl-top-right) {
|
|
218
|
-
right: 0;
|
|
219
|
-
top: 0;
|
|
218
|
+
right: 0.5em;
|
|
219
|
+
top: 0.5em;
|
|
220
220
|
}
|
|
221
221
|
:global(.maplibregl-ctrl-bottom-left) {
|
|
222
222
|
bottom: 0.5em;
|
|
@@ -225,16 +225,16 @@ const handleDebugCopyLocationClick = (e) => {
|
|
|
225
225
|
:global(.maplibregl-ctrl-bottom-right) {
|
|
226
226
|
bottom: 0.5em;
|
|
227
227
|
right: 0.5em;
|
|
228
|
+
align-items: flex-end;
|
|
228
229
|
}
|
|
229
230
|
:global(.maplibregl-ctrl) {
|
|
230
231
|
pointer-events: auto;
|
|
231
232
|
transform: translate(0);
|
|
232
233
|
}
|
|
233
234
|
:global(.maplibregl-ctrl-group) {
|
|
234
|
-
background: var(--color-
|
|
235
|
+
background: var(--color-pageFill);
|
|
235
236
|
border: 1px solid var(--color-textSecondary);
|
|
236
237
|
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
|
|
237
|
-
border-radius: var(--br-small);
|
|
238
238
|
overflow: hidden;
|
|
239
239
|
}
|
|
240
240
|
:global(.maplibregl-ctrl-group) :global(button) {
|
|
@@ -292,6 +292,9 @@ const handleDebugCopyLocationClick = (e) => {
|
|
|
292
292
|
:global(.maplibregl-marker) :global(path) {
|
|
293
293
|
fill: var(--color-textPrimary);
|
|
294
294
|
}
|
|
295
|
+
:global(.maplibregl-marker) :global(circle) {
|
|
296
|
+
fill: var(--color-pageFill);
|
|
297
|
+
}
|
|
295
298
|
:global(.maplibregl-cooperative-gesture-screen) {
|
|
296
299
|
align-items: center;
|
|
297
300
|
font-family: var(--swr-sans);
|
|
@@ -13,16 +13,16 @@ const tokens = {
|
|
|
13
13
|
sans_bold: ['SWR Sans Bold'],
|
|
14
14
|
background: {
|
|
15
15
|
stops: [
|
|
16
|
-
[8, 'hsl(210,
|
|
17
|
-
[10, '#
|
|
16
|
+
[8, 'hsl(210, 3%, 10%)'],
|
|
17
|
+
[10, '#181818']
|
|
18
18
|
]
|
|
19
19
|
},
|
|
20
20
|
water: 'hsl(210, 12%, 7%)',
|
|
21
21
|
water_light: 'hsl(210, 12%, 8%)',
|
|
22
|
-
water_ocean: 'hsl(214,
|
|
22
|
+
water_ocean: 'hsl(214, 5%, 5%)',
|
|
23
23
|
marsh: 'hsl(180, 3%, 35%)',
|
|
24
|
-
grass: 'hsl(170,
|
|
25
|
-
grass_dark: 'hsl(170,
|
|
24
|
+
grass: 'hsl(170, 15%, 12%)',
|
|
25
|
+
grass_dark: 'hsl(170, 12%, 10%)',
|
|
26
26
|
sand: 'hsl(0, 0%, 16%)',
|
|
27
27
|
rock: 'hsl(0, 0%, 20%)',
|
|
28
28
|
street_primary: 'hsl(220, 3%, 20%)',
|
|
@@ -31,9 +31,9 @@ const tokens = {
|
|
|
31
31
|
street_secondary_case: 'hsl(0, 0%, 0%)',
|
|
32
32
|
street_tertiary: 'hsl(0, 0%, 20%)',
|
|
33
33
|
street_tertiary_case: 'hsl(0, 0%, 14%)',
|
|
34
|
-
label_primary: 'hsl(240, 5%,
|
|
35
|
-
label_secondary: 'hsl(0, 2%,
|
|
36
|
-
label_tertiary: 'hsl(0, 1%,
|
|
34
|
+
label_primary: 'hsl(240, 5%, 95%)',
|
|
35
|
+
label_secondary: 'hsl(0, 2%, 85%)',
|
|
36
|
+
label_tertiary: 'hsl(0, 1%, 75%)',
|
|
37
37
|
boundary_country: '#6e6f71',
|
|
38
38
|
boundary_country_case: '#181818',
|
|
39
39
|
boundary_state: 'hsl(218, 4%, 37%)',
|
|
@@ -9,10 +9,15 @@ const case_layout = {
|
|
|
9
9
|
};
|
|
10
10
|
export default function makeRoads(tokens) {
|
|
11
11
|
const motorway = {
|
|
12
|
-
line_color:
|
|
12
|
+
line_color: {
|
|
13
|
+
stops: [
|
|
14
|
+
[5, '#252525'],
|
|
15
|
+
[7, tokens.street_primary]
|
|
16
|
+
]
|
|
17
|
+
},
|
|
13
18
|
line_width: {
|
|
14
19
|
stops: [
|
|
15
|
-
[
|
|
20
|
+
[5, 1],
|
|
16
21
|
[7, 1.5],
|
|
17
22
|
[11, 2],
|
|
18
23
|
[12, 3],
|
|
@@ -1466,7 +1471,7 @@ export default function makeRoads(tokens) {
|
|
|
1466
1471
|
['!=', 'link', true]
|
|
1467
1472
|
],
|
|
1468
1473
|
paint: {
|
|
1469
|
-
'line-color':
|
|
1474
|
+
'line-color': motorway.line_color,
|
|
1470
1475
|
'line-width': motorway.line_width,
|
|
1471
1476
|
'line-opacity': motorway.line_opacity
|
|
1472
1477
|
},
|