Skip to content

Commit 67b00cf

Browse files
awesomephantawesomephant
authored
feat: SWRDataLabDark (#168)
Adds an initial version of a dark version of our map style by parameterising the existing, light, style and passing in a new colour palette.
1 parent 4254210 commit 67b00cf

38 files changed

Lines changed: 791 additions & 1329 deletions

‎components/src/DesignTokens/DesignTokens.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,13 @@
5656
--color-logoFill: var(--logoFill-light);
5757
--color-pageFill: var(--pageFill-light);
5858
--color-surfaceFill: var(--surfaceFill-light);
59+
--color-surfaceBorder: var(--surfaceBorder-light);
5960
6061
&[data-theme='dark'] {
6162
--color-logoFill: var(--logoFill-dark);
6263
--color-pageFill: var(--pageFill-dark);
6364
--color-surfaceFill: var(--surfaceFill-dark);
65+
--color-surfaceBorder: var(--surfaceBorder-dark);
6466
--color-textPrimary: var(--textPrimary-dark);
6567
--color-textSecondary: var(--textSecondary-dark);
6668
--color-textSecondaryHover: var(--textSecondaryHover-dark);

‎components/src/DesignTokens/Tokens.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,11 @@ const semantics: ColourMap = {
175175
},
176176
surfaceFill: {
177177
dark: '#222325',
178-
light: '#f1eeeb'
178+
light: '#ffffff'
179+
},
180+
surfaceBorder: {
181+
dark: shades.gray.dark1,
182+
light: shades.gray.base
179183
},
180184
pageFill: {
181185
dark: '#0C0C0C',

‎components/src/maplibre/AttributionControl/AttributionControl.stories.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</script>
1313

1414
<Story asChild name="Default">
15-
<DesignTokens>
15+
<DesignTokens theme="light">
1616
<div class="container">
1717
<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
1818
<AttributionControl customAttribution="SWR Data Lab" position="bottom-left" />

‎components/src/maplibre/AttributionControl/AttributionControl.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
letter-spacing: 0.005em;
2525
word-spacing: 0.005em;
2626
font-family: var(--swr-sans);
27+
color: var(--color-textSecondary);
2728
}
2829
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
2930
display: block;

‎components/src/maplibre/GeoJSONSource/GeoJSONSource.stories.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@
3434
</script>
3535

3636
<Story asChild name="Default">
37-
<DesignTokens>
37+
<DesignTokens theme="light">
3838
<div class="container">
3939
<Map showDebug={true} style={SWRDataLabLight()}>
4040
<GeoJSONSource id="demo" data={geoJSON} attribution="Demo attribution" />
4141
<VectorLayer
4242
sourceId="demo"
43-
placeBelow="street-residential"
43+
placeBelow="boundary-country"
4444
id="test-outline"
4545
type="line"
4646
paint={{

‎components/src/maplibre/GeocoderControl/GeocoderControl.stories.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
});
3232
}}
3333
>
34-
<DesignTokens>
34+
<DesignTokens theme="light">
3535
<div class="container">
3636
<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
3737
<GeocoderControl languages="de" service="maptiler" key="V32kPHZjMa0Mkn6YvSzA" />
@@ -56,7 +56,7 @@
5656
});
5757
}}
5858
>
59-
<DesignTokens>
59+
<DesignTokens theme="light">
6060
<div class="container">
6161
<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
6262
<GeocoderControl
@@ -71,7 +71,7 @@
7171
</Story>
7272

7373
<Story asChild name="Long input">
74-
<DesignTokens>
74+
<DesignTokens theme="light">
7575
<div class="container">
7676
<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
7777
<GeocoderControl

‎components/src/maplibre/GeocoderControl/GeocoderControl.svelte‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -61,20 +61,24 @@
6161
<style lang="scss">
6262
:global {
6363
.maplibregl-ctrl-geocoder {
64-
background-color: #fff;
64+
background-color: var(--color-surfaceFill);
6565
position: relative;
6666
width: 100%;
6767
z-index: 1;
6868
font-family: var(--swr-sans);
6969
font-size: var(--fs-small-1);
7070
border-radius: var(--br-small);
71-
border: 1px solid rgba(0, 0, 0, 0.75);
72-
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
71+
border: 1px solid var(--color-surfaceBorder);
72+
box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.075);
73+
74+
button {
75+
cursor: pointer;
76+
}
7377
}
7478
7579
.maplibre-gl-geocoder--error {
7680
font-size: var(--fs-small-2);
77-
color: var(--gray-dark-2);
81+
color: var(--color-textSecondary);
7882
padding: 0.4em 0.65em;
7983
}
8084
@@ -84,10 +88,10 @@
8488
font-family: inherit;
8589
font-size: inherit;
8690
background-color: transparent;
87-
color: var(--gray-dark-5);
91+
color: var(--color-textPrimary);
8892
border: 0;
89-
height: 1.85em;
90-
padding: 0 1.85em;
93+
height: 1.95em;
94+
padding: 0 1.95em;
9195
padding-top: 0.1em;
9296
text-overflow: ellipsis;
9397
white-space: nowrap;
@@ -96,10 +100,10 @@
96100
97101
.maplibregl-ctrl-geocoder--input::placeholder {
98102
opacity: 1;
99-
color: var(--gray-dark-2);
103+
color: var(--color-textSecondary);
100104
}
101105
.maplibregl-ctrl-geocoder--input:focus {
102-
color: var(--gray-dark-5);
106+
color: var(--color-textPrimary);
103107
outline: 0;
104108
}
105109
@@ -115,7 +119,7 @@
115119
116120
/* Suggestions */
117121
.maplibregl-ctrl-geocoder .suggestions {
118-
background: white;
122+
background: var(--color-surfaceFill);
119123
border: 1px solid rgba(0, 0, 0, 0.75);
120124
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
121125
border-radius: var(--br-small);
@@ -140,15 +144,15 @@
140144
padding: 0.5em 0.75em;
141145
color: var(--gray-dark-5);
142146
padding-bottom: 0.5em;
143-
border-bottom: 1px solid var(--gray-light-3);
147+
border-bottom: 1px solid var(--color-surfaceBorder);
144148
}
145149
.maplibregl-ctrl-geocoder .suggestions > li:last-child > a {
146150
border-bottom: 0;
147151
}
148152
149153
.maplibregl-ctrl-geocoder .suggestions > .active > a,
150154
.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
151-
background: var(--gray-light-5);
155+
background: var(--color-surfaceHover);
152156
text-decoration: none;
153157
cursor: pointer;
154158
}
@@ -180,12 +184,13 @@
180184
display: none;
181185
}
182186
.maplibregl-ctrl-geocoder--result-title {
187+
color: var(--color-textPrimary);
183188
font-weight: 600;
184189
letter-spacing: 0;
185190
}
186191
.maplibregl-ctrl-geocoder--result-address {
187192
font-size: var(--fs-small-2);
188-
color: var(--gray-dark-2);
193+
color: var(--color-textSecondary);
189194
line-height: 1.3;
190195
}
191196
@@ -195,6 +200,9 @@
195200
top: 50%;
196201
transform: translateY(-50%);
197202
height: 1em;
203+
path {
204+
fill: var(--color-textPrimary);
205+
}
198206
}
199207
200208
.maplibregl-ctrl-geocoder--icon-close {

‎components/src/maplibre/Map/Map.stories.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
}}
7070
>
7171
<div class="container">
72-
<DesignTokens>
72+
<DesignTokens theme="light">
7373
<Map style={SWRDataLabLight()}>
7474
<ScaleControl />
7575
<AttributionControl />
@@ -105,7 +105,7 @@
105105
}}
106106
>
107107
<div class="container">
108-
<DesignTokens>
108+
<DesignTokens theme="light">
109109
<button
110110
data-testid="flyto-berlin"
111111
onclick={() => {
@@ -133,7 +133,7 @@
133133

134134
<Story asChild name="Globe Projection">
135135
<div class="container">
136-
<DesignTokens>
136+
<DesignTokens theme="light">
137137
<Map
138138
style={SWRDataLabLight()}
139139
showDebug
@@ -151,12 +151,12 @@
151151
</Story>
152152
<Story asChild name="Cooperative Gestures">
153153
<div class="container">
154-
<DesignTokens>
154+
<DesignTokens theme="light">
155155
<div class="placeholder">Placeholder</div>
156156
<Map
157+
showDebug
157158
cooperativeGestures
158159
style={SWRDataLabLight()}
159-
showDebug
160160
initialLocation={{ lat: 51.3, lng: 10.2, zoom: 5 }}
161161
>
162162
<ScaleControl />
@@ -170,7 +170,7 @@
170170

171171
<Story asChild name="Alternate Style">
172172
<div class="container dark">
173-
<DesignTokens>
173+
<DesignTokens theme="dark">
174174
<Map style={alternateStyle}>
175175
<ScaleControl />
176176
<AttributionControl />

‎components/src/maplibre/Map/Map.svelte‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -147,9 +147,7 @@
147147
}
148148
});
149149
150-
const debugValues = $derived(
151-
Object.entries({ ...center, zoom, pitch, allowZoom, allowRotation })
152-
);
150+
const debugValues = $derived(Object.entries({ zoom, pitch, allowZoom, allowRotation }));
153151
const handleDebugValueClick = (e: MouseEvent) => {
154152
if (e.target) {
155153
const t = e.target as HTMLElement;
@@ -173,10 +171,12 @@
173171
{/if}
174172
{#if showDebug}
175173
<ul class="debug">
174+
<li>
175+
[{center?.lat.toFixed(2)}, {center?.lng.toFixed(2)}]
176+
</li>
176177
{#each debugValues as [key, value]}
177178
<li>
178-
{key}:
179-
<button onclick={handleDebugValueClick}
179+
{key}=<button onclick={handleDebugValueClick}
180180
>{value?.toLocaleString('en', { maximumSignificantDigits: 6 })}</button
181181
>
182182
</li>
@@ -196,11 +196,14 @@
196196
position: absolute;
197197
top: 0;
198198
right: 0;
199-
background: rgba(0, 0, 0, 0.9);
199+
background: rgba(0, 0, 0, 0.75);
200200
color: white;
201201
z-index: 1000;
202202
padding: 2px;
203+
font-size: 10px;
203204
font-family: monospace;
205+
display: flex;
206+
gap: 1em;
204207
li {
205208
list-style: none;
206209
}
@@ -209,7 +212,9 @@
209212
background: transparent;
210213
font-family: inherit;
211214
color: inherit;
215+
font-size: inherit;
212216
border: 0;
217+
text-transform: uppercase;
213218
cursor: pointer;
214219
&:hover,
215220
&:focus-visible {
@@ -300,15 +305,16 @@
300305
}
301306
302307
.maplibregl-ctrl-group {
303-
background: white;
304-
border: 1px solid rgba(0, 0, 0, 0.75);
308+
background: var(--color-surfaceFill);
309+
border: 1px solid var(--color-surfaceBorder);
305310
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
306311
border-radius: var(--br-small);
307312
overflow: hidden;
308313
}
309314
310315
.maplibregl-ctrl-group button {
311316
background-color: transparent;
317+
color: var(--color-textPrimary);
312318
border: 0;
313319
box-sizing: border-box;
314320
cursor: pointer;
@@ -320,7 +326,7 @@
320326
}
321327
322328
.maplibregl-ctrl-group button + button {
323-
border-top: 1px solid rgba(0, 0, 0, 0.35);
329+
border-top: 1px solid var(--color-surfaceBorder);
324330
}
325331
326332
.maplibregl-ctrl button .maplibregl-ctrl-icon {
@@ -340,7 +346,7 @@
340346
}
341347
342348
.maplibregl-ctrl button:not(:disabled):hover {
343-
background-color: var(--gray-light-5);
349+
background-color: var(--color-surfaceHover);
344350
}
345351
346352
.maplibregl-ctrl-group button:focus:focus-visible {
@@ -352,11 +358,11 @@
352358
}
353359
354360
.maplibregl-ctrl-group button:focus:first-child {
355-
border-radius: 4px 4px 0 0;
361+
border-radius: 2px 2px 0 0;
356362
}
357363
358364
.maplibregl-ctrl-group button:focus:last-child {
359-
border-radius: 0 0 4px 4px;
365+
border-radius: 0 0 2px 2px;
360366
}
361367
362368
.maplibregl-ctrl-group button:focus:only-child {
@@ -369,7 +375,7 @@
369375
will-change: transform;
370376
}
371377
.maplibregl-marker path {
372-
fill: var(--violet-dark-5);
378+
fill: var(--color-textPrimary);
373379
}
374380
.maplibregl-cooperative-gesture-screen {
375381
align-items: center;

0 commit comments

Comments
 (0)