@swr-data-lab/components 2.13.2 → 2.15.0

package/dist/DesignTokens/DesignTokens.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">import { shades, semantics } from './Tokens';
-let { children } = $props();
+import isDarkMode from '../isDarkMode';
+let { theme = 'auto', children } = $props();
+let computedTheme = $derived(theme === 'auto' ? ($isDarkMode ? 'dark' : 'light') : theme);
 const colours = { ...shades, ...semantics };
 const rules = [
     ...Object.keys(colours).map((key) => {
@@ -15,7 +17,7 @@ const rules = [
 ];
 </script>
 
-<div class="container" style={rules.join(';')}>
+<div class="container" style={rules.join(';')} data-theme={computedTheme}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -40,16 +42,16 @@ const rules = [
   --color-logoFill: var(--logoFill-light);
   --color-pageFill: var(--pageFill-light);
   --color-surfaceFill: var(--surfaceFill-light);
+  --color-surfaceBorder: var(--surfaceBorder-light);
 }
-@media (prefers-color-scheme: dark) {
-  .container {
-    --color-logoFill: var(--logoFill-dark);
-    --color-pageFill: var(--pageFill-dark);
-    --color-surfaceFill: var(--surfaceFill-dark);
-    --color-textPrimary: var(--textPrimary-dark);
-    --color-textSecondary: var(--textSecondary-dark);
-    --color-textSecondaryHover: var(--textSecondaryHover-dark);
-  }
+.container[data-theme=dark] {
+  --color-logoFill: var(--logoFill-dark);
+  --color-pageFill: var(--pageFill-dark);
+  --color-surfaceFill: var(--surfaceFill-dark);
+  --color-surfaceBorder: var(--surfaceBorder-dark);
+  --color-textPrimary: var(--textPrimary-dark);
+  --color-textSecondary: var(--textSecondary-dark);
+  --color-textSecondaryHover: var(--textSecondaryHover-dark);
 }
 .container {
   --swr-text: "SWR-VAR-Text", sans-serif;

package/dist/DesignTokens/DesignTokens.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 interface DesignTokensProps {
+    theme?: 'light' | 'dark' | 'auto';
     children?: Snippet;
 }
 declare const DesignTokens: import("svelte").Component<DesignTokensProps, {}, "">;

package/dist/DesignTokens/Tokens.js

@@ -162,7 +162,11 @@ const semantics = {
     },
     surfaceFill: {
         dark: '#222325',
-        light: '#f1eeeb'
+        light: '#ffffff'
+    },
+    surfaceBorder: {
+        dark: shades.gray.dark1,
+        light: shades.gray.base
     },
     pageFill: {
         dark: '#0C0C0C',

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as DesignTokens } from "./DesignTokens/DesignTokens.svelte";
 export { tokens } from "./DesignTokens/index.js";
+export { default as isDarkMode } from "./isDarkMode/isDarkMode.svelte";
 export { default as Headline } from "./Headline/Headline.svelte";
 export { default as Copy } from "./Copy/Copy.svelte";
 export { default as Caption } from "./Caption/Caption.svelte";

package/dist/index.js

@@ -1,6 +1,7 @@
 // Design Tokens
 export { default as DesignTokens } from './DesignTokens/DesignTokens.svelte';
 export { tokens as tokens } from './DesignTokens/index.js';
+export { default as isDarkMode } from './isDarkMode/isDarkMode.svelte';
 
 // Typography
 export { default as Headline } from './Headline/Headline.svelte';

package/dist/isDarkMode/index.d.ts

@@ -0,0 +1,2 @@
+export default isDarkMode;
+import isDarkMode from './isDarkMode.svelte.js';

package/dist/isDarkMode/index.js

@@ -0,0 +1,2 @@
+import isDarkMode from './isDarkMode.svelte.js';
+export default isDarkMode;

package/dist/isDarkMode/isDarkMode.svelte.d.ts

@@ -0,0 +1,2 @@
+export default isDarkMode;
+declare const isDarkMode: import("svelte/store").Readable<boolean>;

package/dist/isDarkMode/isDarkMode.svelte.js

@@ -0,0 +1,6 @@
+import { MediaQuery } from 'svelte/reactivity';
+import { readable } from 'svelte/store';
+
+const dm = new MediaQuery('prefers-color-scheme: dark', false);
+const isDarkMode = readable(dm.current);
+export default isDarkMode;

package/dist/maplibre/AttributionControl/AttributionControl.svelte

@@ -16,6 +16,7 @@ const { position = 'bottom-right', customAttribution } = $props();
   letter-spacing: 0.005em;
   word-spacing: 0.005em;
   font-family: var(--swr-sans);
+  color: var(--color-textSecondary);
 }
 :global(.maplibregl-ctrl-attrib.maplibregl-compact-show) :global(.maplibregl-ctrl-attrib-inner) {
   display: block;

package/dist/maplibre/GeocoderControl/GeocoderControl.svelte

@@ -23,19 +23,22 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
 <MapControl control={geocoder} position="top-left" />
 
 <style>:global(.maplibregl-ctrl-geocoder) {
-  background-color: #fff;
+  background-color: var(--color-surfaceFill);
   position: relative;
   width: 100%;
   z-index: 1;
   font-family: var(--swr-sans);
   font-size: var(--fs-small-1);
   border-radius: var(--br-small);
-  border: 1px solid rgba(0, 0, 0, 0.75);
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
+  border: 1px solid var(--color-surfaceBorder);
+  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.075);
+}
+:global(.maplibregl-ctrl-geocoder) :global(button) {
+  cursor: pointer;
 }
 :global(.maplibre-gl-geocoder--error) {
   font-size: var(--fs-small-2);
-  color: var(--gray-dark-2);
+  color: var(--color-textSecondary);
   padding: 0.4em 0.65em;
 }
 :global(.maplibregl-ctrl-geocoder--input) {
@@ -44,10 +47,10 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
   font-family: inherit;
   font-size: inherit;
   background-color: transparent;
-  color: var(--gray-dark-5);
+  color: var(--color-textPrimary);
   border: 0;
-  height: 1.85em;
-  padding: 0 1.85em;
+  height: 1.95em;
+  padding: 0 1.95em;
   padding-top: 0.1em;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -55,10 +58,10 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
 }
 :global(.maplibregl-ctrl-geocoder--input::placeholder) {
   opacity: 1;
-  color: var(--gray-dark-2);
+  color: var(--color-textSecondary);
 }
 :global(.maplibregl-ctrl-geocoder--input:focus) {
-  color: var(--gray-dark-5);
+  color: var(--color-textPrimary);
   outline: 0;
 }
 :global(.maplibregl-ctrl-geocoder) :global(.maplibregl-ctrl-geocoder--pin-right) > :global(*) {
@@ -71,7 +74,7 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
   border: 0;
 }
 :global(.maplibregl-ctrl-geocoder) :global(.suggestions) {
-  background: white;
+  background: var(--color-surfaceFill);
   border: 1px solid rgba(0, 0, 0, 0.75);
   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
   border-radius: var(--br-small);
@@ -94,14 +97,14 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
   padding: 0.5em 0.75em;
   color: var(--gray-dark-5);
   padding-bottom: 0.5em;
-  border-bottom: 1px solid var(--gray-light-3);
+  border-bottom: 1px solid var(--color-surfaceBorder);
 }
 :global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li:last-child) > :global(a) {
   border-bottom: 0;
 }
 :global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(.active) > :global(a),
 :global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li) > :global(a:hover) {
-  background: var(--gray-light-5);
+  background: var(--color-surfaceHover);
   text-decoration: none;
   cursor: pointer;
 }
@@ -129,12 +132,13 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
   display: none;
 }
 :global(.maplibregl-ctrl-geocoder--result-title) {
+  color: var(--color-textPrimary);
   font-weight: 600;
   letter-spacing: 0;
 }
 :global(.maplibregl-ctrl-geocoder--result-address) {
   font-size: var(--fs-small-2);
-  color: var(--gray-dark-2);
+  color: var(--color-textSecondary);
   line-height: 1.3;
 }
 :global(.maplibregl-ctrl-geocoder--icon) {
@@ -144,6 +148,9 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
   transform: translateY(-50%);
   height: 1em;
 }
+:global(.maplibregl-ctrl-geocoder--icon) :global(path) {
+  fill: var(--color-textPrimary);
+}
 :global(.maplibregl-ctrl-geocoder--icon-close) {
   right: 0;
 }

package/dist/maplibre/Map/Map.svelte

@@ -82,7 +82,7 @@ $effect(() => {
         mapContext.map?.scrollZoom.enable();
     }
 });
-const debugValues = $derived(Object.entries({ ...center, zoom, pitch, allowZoom, allowRotation }));
+const debugValues = $derived(Object.entries({ zoom, pitch, allowZoom, allowRotation }));
 const handleDebugValueClick = (e) => {
     if (e.target) {
         const t = e.target;
@@ -106,10 +106,12 @@ const handleDebugCopyLocationClick = (e) => {
 	{/if}
 	{#if showDebug}
 		<ul class="debug">
+			<li>
+				[{center?.lat.toFixed(2)}, {center?.lng.toFixed(2)}]
+			</li>
 			{#each debugValues as [key, value]}
 				<li>
-					{key}:
-					<button onclick={handleDebugValueClick}
+					{key}=<button onclick={handleDebugValueClick}
 						>{value?.toLocaleString('en', { maximumSignificantDigits: 6 })}</button
 					>
 				</li>
@@ -128,11 +130,14 @@ const handleDebugCopyLocationClick = (e) => {
   position: absolute;
   top: 0;
   right: 0;
-  background: rgba(0, 0, 0, 0.9);
+  background: rgba(0, 0, 0, 0.75);
   color: white;
   z-index: 1000;
   padding: 2px;
+  font-size: 10px;
   font-family: monospace;
+  display: flex;
+  gap: 1em;
 }
 .debug li {
   list-style: none;
@@ -142,7 +147,9 @@ const handleDebugCopyLocationClick = (e) => {
   background: transparent;
   font-family: inherit;
   color: inherit;
+  font-size: inherit;
   border: 0;
+  text-transform: uppercase;
   cursor: pointer;
 }
 .debug button:hover, .debug button:focus-visible {
@@ -216,14 +223,15 @@ const handleDebugCopyLocationClick = (e) => {
   transform: translate(0);
 }
 :global(.maplibregl-ctrl-group) {
-  background: white;
-  border: 1px solid rgba(0, 0, 0, 0.75);
+  background: var(--color-surfaceFill);
+  border: 1px solid var(--color-surfaceBorder);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
   border-radius: var(--br-small);
   overflow: hidden;
 }
 :global(.maplibregl-ctrl-group) :global(button) {
   background-color: transparent;
+  color: var(--color-textPrimary);
   border: 0;
   box-sizing: border-box;
   cursor: pointer;
@@ -234,7 +242,7 @@ const handleDebugCopyLocationClick = (e) => {
   width: 29px;
 }
 :global(.maplibregl-ctrl-group) :global(button) + :global(button) {
-  border-top: 1px solid rgba(0, 0, 0, 0.35);
+  border-top: 1px solid var(--color-surfaceBorder);
 }
 :global(.maplibregl-ctrl) :global(button) :global(.maplibregl-ctrl-icon) {
   background-position: 50%;
@@ -250,7 +258,7 @@ const handleDebugCopyLocationClick = (e) => {
   opacity: 0.5;
 }
 :global(.maplibregl-ctrl) :global(button:not(:disabled):hover) {
-  background-color: var(--gray-light-5);
+  background-color: var(--color-surfaceHover);
 }
 :global(.maplibregl-ctrl-group) :global(button:focus:focus-visible) {
   box-shadow: 0 0 2px 2px #0096ff;
@@ -259,10 +267,10 @@ const handleDebugCopyLocationClick = (e) => {
   box-shadow: none;
 }
 :global(.maplibregl-ctrl-group) :global(button:focus:first-child) {
-  border-radius: 4px 4px 0 0;
+  border-radius: 2px 2px 0 0;
 }
 :global(.maplibregl-ctrl-group) :global(button:focus:last-child) {
-  border-radius: 0 0 4px 4px;
+  border-radius: 0 0 2px 2px;
 }
 :global(.maplibregl-ctrl-group) :global(button:focus:only-child) {
   border-radius: inherit;
@@ -274,7 +282,7 @@ const handleDebugCopyLocationClick = (e) => {
   will-change: transform;
 }
 :global(.maplibregl-marker) :global(path) {
-  fill: var(--violet-dark-5);
+  fill: var(--color-textPrimary);
 }
 :global(.maplibregl-cooperative-gesture-screen) {
   align-items: center;

package/dist/maplibre/MapStyle/SWRDataLabDark.d.ts

@@ -0,0 +1,9 @@
+import type { StyleSpecification } from 'maplibre-gl';
+interface StyleOptions {
+    enableBuildingExtrusions?: boolean;
+}
+interface styleFunction {
+    (options?: StyleOptions): StyleSpecification;
+}
+declare const style: styleFunction;
+export default style;

package/dist/maplibre/MapStyle/SWRDataLabDark.js

@@ -0,0 +1,118 @@
+import makeAdmin from './components/Admin';
+import makeBuildings from './components/Buildings';
+import makeLanduse from './components/Landuse';
+import makeTransit from './components/Transit';
+import makePlaceLabels from './components/PlaceLabels';
+import makeWalking from './components/Walking';
+import makeRoads from './components/Roads';
+const tokens = {
+    sans_regular: ['SWR Sans Regular'],
+    sans_medium: ['SWR Sans Medium'],
+    sans_bold: ['SWR Sans Bold'],
+    background: {
+        stops: [
+            [8, 'hsl(210, 9%, 13%)'],
+            [10, '#1e1f22']
+        ]
+    },
+    water: 'hsl(210, 12%, 8%)',
+    water_light: 'hsl(210, 12%, 8%)',
+    water_ocean: 'hsl(210, 12%, 8%)',
+    marsh: 'hsl(180, 3%, 35%)',
+    grass: 'hsl(170, 20%, 14%)',
+    grass_dark: 'hsl(170, 16%, 12%)',
+    street_primary: 'hsl(220, 3%, 20%)',
+    street_primary_case: 'hsl(0, 11%, 7%)',
+    street_secondary: 'hsl(0, 0%, 22%)',
+    street_secondary_case: 'hsl(0, 0%, 0%)',
+    street_tertiary: 'hsl(0, 0%, 20%)',
+    street_tertiary_case: 'hsl(0, 0%, 14%)',
+    label_primary: 'hsl(240, 5%, 82%)',
+    label_secondary: 'hsl(0, 2%, 72%)',
+    label_tertiary: 'hsl(0, 1%, 55%)',
+    boundary_country: '#6e6f71',
+    boundary_country_case: '#181818',
+    boundary_state: 'hsl(218, 4%, 37%)',
+    rail: 'hsl(0, 0%, 33%)',
+    sand: 'hsl(0, 0%, 16%)',
+    building: '#232325'
+};
+const { landuse } = makeLanduse(tokens);
+const { placeLabels, boundaryLabels } = makePlaceLabels(tokens);
+const { admin } = makeAdmin(tokens);
+const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit(tokens);
+const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens);
+const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
+const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens);
+const style = (opts) => {
+    const options = {
+        enableBuildingExtrusions: false,
+        ...opts
+    };
+    return {
+        version: 8,
+        name: 'swr-datalab-dark',
+        metadata: { license: 'https://creativecommons.org/publicdomain/zero/1.0/' },
+        glyphs: 'https://static.datenhub.net/maps/fonts/{fontstack}/{range}.pbf',
+        sprite: 'https://static.datenhub.net/maps/styles/swr-datalab-light/sprite/sprite',
+        sources: {
+            'versatiles-osm': {
+                attribution: '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+                tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
+                bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
+                type: 'vector',
+                scheme: 'xyz',
+                minzoom: 0,
+                maxzoom: 14
+            },
+            ...(options.enableBuildingExtrusions && {
+                'basemap-de': {
+                    attribution: 'GeoBasis-DE',
+                    type: 'vector',
+                    bounds: [5.8, 47.2, 15.1, 55.1],
+                    maxzoom: 15,
+                    minzoom: 0,
+                    scheme: 'xyz',
+                    tiles: [
+                        'https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/tiles/v2/bm_web_de_3857/{z}/{x}/{y}.pbf'
+                    ]
+                }
+            })
+        },
+        sky: {
+            'atmosphere-blend': ['interpolate', ['linear'], ['zoom'], 0, 0.1, 5, 0.1, 7, 0]
+        },
+        light: { anchor: 'viewport', color: 'white', intensity: 0.5 },
+        layers: [
+            // 1. Landuse
+            ...landuse,
+            ...airports,
+            // 2. Building footprints + Structures (ie. bridges)
+            ...(!options.enableBuildingExtrusions ? [buildingFootprints] : []),
+            ...(options.enableBuildingExtrusions ? [structureExtrusions] : []),
+            // 3. Tunnels
+            ...walkingTunnels,
+            ...roadTunnels,
+            ...transitTunnels,
+            // 4. Surface ways
+            ...walkingSurface,
+            ...roadSurface,
+            ...transitSurface,
+            // 5. Bridges ways
+            ...walkingBridges,
+            ...roadBridges,
+            ...transitBridges,
+            // 6. Admin boundaries
+            ...admin,
+            // 7. Labels
+            ...walkingLabels,
+            ...roadLabels,
+            // 8. Building extrusions
+            ...(options.enableBuildingExtrusions ? [buildingExtrusions] : []),
+            // 8. Point labels
+            ...placeLabels,
+            ...boundaryLabels
+        ]
+    };
+};
+export default style;

package/dist/maplibre/MapStyle/SWRDataLabLight.js

@@ -5,13 +5,45 @@ import makeTransit from './components/Transit';
 import makePlaceLabels from './components/PlaceLabels';
 import makeWalking from './components/Walking';
 import makeRoads from './components/Roads';
-const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings();
-const { landuse } = makeLanduse();
-const { placeLabels, boundaryLabels } = makePlaceLabels();
-const { admin } = makeAdmin();
-const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit();
-const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking();
-const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads();
+const tokens = {
+    sans_regular: ['SWR Sans Regular'],
+    sans_medium: ['SWR Sans Medium'],
+    sans_bold: ['SWR Sans Bold'],
+    background: {
+        stops: [
+            [8, 'hsl(24, 29%, 98.5%)'],
+            [10, 'white']
+        ]
+    },
+    water: 'hsl(210, 71%, 83%)',
+    water_light: 'hsl(210, 41%, 90%)',
+    water_ocean: 'hsl(209, 57%, 84%)',
+    marsh: 'hsl(200, 14%, 97%)',
+    grass: 'hsl(133, 36%, 95%)',
+    grass_dark: 'hsl(127, 49%, 93%)',
+    street_primary: 'hsl(0, 4%, 95%)',
+    street_primary_case: 'hsl(240, 1%, 84%)',
+    street_secondary: 'hsl(0, 0%, 95%)',
+    street_secondary_case: 'hsl(0, 0%, 75%)',
+    street_tertiary: 'hsl(0, 0%, 95%)',
+    street_tertiary_case: 'hsl(0, 0%, 70%)',
+    label_primary: 'hsl(240, 10%, 2%)',
+    label_secondary: 'hsl(0, 0%, 18%)',
+    label_tertiary: 'hsl(60, 1%, 50%)',
+    building: '#f3f2f1',
+    rail: '#d3d3d3',
+    sand: 'hsl(60,0%,95%)',
+    boundary_country: '#8b8a89',
+    boundary_state: 'hsl(37, 10%, 75%)',
+    boundary_country_case: 'white'
+};
+const { landuse } = makeLanduse(tokens);
+const { placeLabels, boundaryLabels } = makePlaceLabels(tokens);
+const { admin } = makeAdmin(tokens);
+const { airports, transitBridges, transitSurface, transitTunnels } = makeTransit(tokens);
+const { walkingLabels, walkingTunnels, walkingSurface, walkingBridges } = makeWalking(tokens);
+const { roadLabels, roadBridges, roadSurface, roadTunnels } = makeRoads(tokens);
+const { buildingFootprints, buildingExtrusions, structureExtrusions } = makeBuildings(tokens);
 const style = (opts) => {
     const options = {
         enableBuildingExtrusions: false,

package/dist/maplibre/MapStyle/components/Admin.d.ts

@@ -1 +1 @@
-export default function makeAdmin(): any;
+export default function makeAdmin(tokens: any): any;

package/dist/maplibre/MapStyle/components/Admin.js

@@ -1,6 +1,5 @@
-import tokens from '../tokens';
 import {} from '../../types';
-export default function makeAdmin() {
+export default function makeAdmin(tokens) {
     const admin = [
         {
             id: 'boundary-country:case',
@@ -12,7 +11,7 @@ export default function makeAdmin() {
                 ['!=', 'coastline', true]
             ],
             paint: {
-                'line-color': '#ffffff',
+                'line-color': tokens.boundary_country_case,
                 'line-blur': 1,
                 'line-width': {
                     stops: [
@@ -55,7 +54,7 @@ export default function makeAdmin() {
                 ['!=', 'coastline', true]
             ],
             paint: {
-                'line-color': 'white',
+                'line-color': tokens.boundary_country_case,
                 'line-blur': 1,
                 'line-width': {
                     stops: [
@@ -77,12 +76,7 @@ export default function makeAdmin() {
                 ['!=', 'coastline', true]
             ],
             paint: {
-                'line-color': {
-                    stops: [
-                        [7, '#a5a5a5'],
-                        [10, '#3f3b39']
-                    ]
-                },
+                'line-color': tokens.boundary_country,
                 'line-width': {
                     stops: [
                         [2, 0],
@@ -110,7 +104,7 @@ export default function makeAdmin() {
                         [10, 4]
                     ]
                 },
-                'line-color': 'hsl(246,0%,77%)',
+                'line-color': tokens.boundary_country,
                 'line-dasharray': [2, 1]
             }
         },
@@ -124,7 +118,7 @@ export default function makeAdmin() {
                 ['!=', 'coastline', true]
             ],
             paint: {
-                'line-color': 'hsl(37, 10%, 75%)',
+                'line-color': tokens.boundary_state,
                 'line-width': {
                     stops: [
                         [7, 1],

package/dist/maplibre/MapStyle/components/Buildings.d.ts

@@ -1 +1 @@
-export default function makeBuildings(): any;
+export default function makeBuildings(tokens: any): any;

package/dist/maplibre/MapStyle/components/Buildings.js

@@ -1,17 +1,16 @@
 import {} from '../../types';
-import tokens from '../tokens';
-const extrusionLayer = {
-    source: 'basemap-de',
-    type: 'fill-extrusion',
-    minzoom: 14,
-    maxzoom: 20,
-    paint: {
-        'fill-extrusion-color': tokens.building,
-        'fill-extrusion-opacity': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, 1],
-        'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, ['get', 'hoehe']]
-    }
-};
-export default function makeBuildings() {
+export default function makeBuildings(tokens) {
+    const extrusionLayer = {
+        source: 'basemap-de',
+        type: 'fill-extrusion',
+        minzoom: 14,
+        maxzoom: 20,
+        paint: {
+            'fill-extrusion-color': tokens.building,
+            'fill-extrusion-opacity': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, 1],
+            'fill-extrusion-height': ['interpolate', ['linear'], ['zoom'], 14.5, 0, 15, ['get', 'hoehe']]
+        }
+    };
     const buildingFootprints = {
         id: 'building-footprints',
         type: 'fill',

package/dist/maplibre/MapStyle/components/Landuse.d.ts

@@ -1 +1 @@
-export default function makeLanduse(): any;
+export default function makeLanduse(tokens: any): any;

package/dist/maplibre/MapStyle/components/Landuse.js

@@ -1,17 +1,11 @@
-import tokens from '../tokens';
 import {} from '../../types';
-export default function makeLanduse() {
+export default function makeLanduse(tokens) {
     const landuse = [
         {
             id: 'background',
             type: 'background',
             paint: {
-                'background-color': {
-                    stops: [
-                        [8, tokens.background],
-                        [10, 'white']
-                    ]
-                }
+                'background-color': tokens.background
             }
         },
         {
@@ -22,15 +16,6 @@ export default function makeLanduse() {
                 'fill-color': tokens.water_ocean
             }
         },
-        {
-            id: 'land-glacier',
-            type: 'fill',
-            'source-layer': 'water_polygons',
-            filter: ['all', ['==', 'kind', 'glacier']],
-            paint: {
-                'fill-color': 'hsl(0,0%,100%)'
-            }
-        },
         {
             id: 'land-agriculture',
             type: 'fill',
@@ -66,7 +51,7 @@ export default function makeLanduse() {
             'source-layer': 'land',
             filter: ['all', ['in', 'kind', 'landfill']],
             paint: {
-                'fill-color': 'hsl(50,0%,95%)',
+                'fill-color': tokens.sand,
                 'fill-opacity': {
                     stops: [
                         [10, 0],
@@ -163,9 +148,9 @@ export default function makeLanduse() {
             id: 'land-sand',
             type: 'fill',
             'source-layer': 'land',
-            filter: ['all', ['in', 'kind', 'beach', 'sand']],
+            filter: ['all', ['in', 'kind', 'beach', 'sand', 'scree']],
             paint: {
-                'fill-color': 'hsl(60,0%,95%)'
+                'fill-color': tokens.sand
             }
         },
         {