From 040a6792131db37d994fd4cfaccf2341c6ff45a4 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 7 Aug 2025 08:52:34 +0100 Subject: [PATCH 1/4] Consolidate tertiary street styles --- .../MapStyle/SWRDataLabLight.stories.svelte | 20 + .../src/maplibre/MapStyle/components/Roads.ts | 148 +---- package-lock.json | 626 +++++++++--------- 3 files changed, 357 insertions(+), 437 deletions(-) diff --git a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte index b2cfc836..8b43b367 100644 --- a/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte +++ b/components/src/maplibre/MapStyle/SWRDataLabLight.stories.svelte @@ -40,6 +40,26 @@ + + +
+
+ + + +
+
+ +
diff --git a/components/src/maplibre/MapStyle/components/Roads.ts b/components/src/maplibre/MapStyle/components/Roads.ts index 4d483444..2c766259 100644 --- a/components/src/maplibre/MapStyle/components/Roads.ts +++ b/components/src/maplibre/MapStyle/components/Roads.ts @@ -128,6 +128,28 @@ const street_secondary_case = { ] } }; +const street_tertiary_case = { + paint: { + 'line-color': tokens.street_tertiary_case, + 'line-width': { + stops: [ + [12, 2], + [14, 3], + [16, 6], + [18, 26], + [19, 64], + [20, 128] + ] + }, + 'line-opacity': { + stops: [ + [12, 0], + [13, 1] + ] + } + }, + layout: case_layout +}; const street_residential = { line_color: tokens.street_tertiary, @@ -353,26 +375,7 @@ export default function makeRoads() { { id: 'bridge-street-tertiary-link:case', filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'tertiary'], ['==', 'link', true]], - paint: { - 'line-color': 'rgb(217,217,217)', - 'line-width': { - stops: [ - [12, 2], - [14, 3], - [16, 6], - [18, 26], - [19, 64], - [20, 128] - ] - }, - 'line-opacity': { - stops: [ - [12, 0], - [13, 1] - ] - } - }, - layout: case_layout + ...street_tertiary_case }, { id: 'bridge-street-secondary-link:case', @@ -418,26 +421,7 @@ export default function makeRoads() { { id: 'bridge-street-tertiary:case', filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'tertiary'], ['!=', 'link', true]], - paint: { - 'line-color': 'rgb(217,217,217)', - 'line-width': { - stops: [ - [12, 2], - [14, 3], - [16, 6], - [18, 26], - [19, 64], - [20, 128] - ] - }, - 'line-opacity': { - stops: [ - [12, 0], - [13, 1] - ] - } - }, - layout: case_layout + ...street_tertiary_case }, { id: 'bridge-street-secondary:case', @@ -802,26 +786,7 @@ export default function makeRoads() { { id: 'tunnel-street-tertiary-link:case', filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'tertiary'], ['==', 'link', true]], - paint: { - 'line-color': 'rgb(222,222,222)', - 'line-width': { - stops: [ - [12, 2], - [14, 3], - [16, 6], - [18, 26], - [19, 64], - [20, 128] - ] - }, - 'line-opacity': { - stops: [ - [12, 0], - [13, 1] - ] - } - }, - layout: case_layout + ...street_tertiary_case }, { id: 'tunnel-street-secondary-link:case', @@ -870,26 +835,7 @@ export default function makeRoads() { { id: 'tunnel-street-tertiary:case', filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'tertiary'], ['!=', 'link', true]], - paint: { - 'line-color': 'rgb(222,222,222)', - 'line-width': { - stops: [ - [12, 2], - [14, 3], - [16, 6], - [18, 26], - [19, 64], - [20, 128] - ] - }, - 'line-opacity': { - stops: [ - [12, 0], - [13, 1] - ] - } - }, - layout: case_layout + ...street_tertiary_case }, { id: 'tunnel-street-secondary:case', @@ -1288,26 +1234,7 @@ export default function makeRoads() { ['in', 'kind', 'tertiary'], ['==', 'link', true] ], - paint: { - 'line-color': 'hsl(36,0%,80%)', - 'line-width': { - stops: [ - [12, 2], - [14, 3], - [16, 6], - [18, 26], - [19, 64], - [20, 128] - ] - }, - 'line-opacity': { - stops: [ - [12, 0], - [13, 1] - ] - } - }, - layout: case_layout + ...street_tertiary_case }, { id: 'street-secondary-link:case', @@ -1382,26 +1309,7 @@ export default function makeRoads() { ['in', 'kind', 'tertiary'], ['!=', 'link', true] ], - paint: { - 'line-color': 'hsl(36,0%,80%)', - 'line-width': { - stops: [ - [12, 2], - [14, 3], - [16, 6], - [18, 26], - [19, 64], - [20, 128] - ] - }, - 'line-opacity': { - stops: [ - [12, 0], - [13, 1] - ] - } - }, - layout: case_layout + ...street_tertiary_case }, { id: 'street-secondary:case', diff --git a/package-lock.json b/package-lock.json index 9ddea791..8d009861 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,253 +63,6 @@ "svelte": ">=5.0.0" } }, - "components/node_modules/@storybook/addon-docs": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.0.15.tgz", - "integrity": "sha512-HOb45DkF23T1tRzakb9q33qnBRso15S/GM28ippPZWi5ZXR9RAyKVgOSMA/ViEpK4ezASxN+Tee+H7m4ksEFZw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@mdx-js/react": "^3.0.0", - "@storybook/csf-plugin": "9.0.15", - "@storybook/icons": "^1.2.12", - "@storybook/react-dom-shim": "9.0.15", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "ts-dedent": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^9.0.15" - } - }, - "components/node_modules/@storybook/addon-links": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-9.0.15.tgz", - "integrity": "sha512-DedEsoPOiRUupN9yuFaw9vwZe1QqK4QfC0Z9/0TxRNFdKffaakNJnPjnlrQn+R0eojYCRm9U9kdzOthM7/BgvQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/global": "^5.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^9.0.15" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - } - } - }, - "components/node_modules/@storybook/addon-svelte-csf": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/@storybook/addon-svelte-csf/-/addon-svelte-csf-5.0.4.tgz", - "integrity": "sha512-DqUnXZN9flzjBgra0zO2Yu4+RODv5qEyooZkXkrvB4SqkfYxWDKwmB+xmceArWlGyaqNvbNhMmSnpnGUuCFQUQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/csf": "^0.1.13", - "dedent": "^1.5.3", - "es-toolkit": "^1.26.1", - "esrap": "^1.2.2", - "magic-string": "^0.30.12", - "svelte-ast-print": "^0.4.0", - "zimmerframe": "^1.1.2" - }, - "peerDependencies": { - "@storybook/svelte": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0", - "@sveltejs/vite-plugin-svelte": "^4.0.0 || ^5.0.0", - "storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0", - "svelte": "^5.0.0", - "vite": "^5.0.0 || ^6.0.0" - } - }, - "components/node_modules/@storybook/addon-vitest": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/addon-vitest/-/addon-vitest-9.0.15.tgz", - "integrity": "sha512-4TynzdZgJMsvneT5lZGp+WrUoFtp8+LRL3y35EepJa3GMBc+9WgsKQrso+xnDQh1gLvVNe46n3klZvunVr4AFA==", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.4.0", - "prompts": "^2.4.0", - "ts-dedent": "^2.2.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "@vitest/browser": "^3.0.0", - "@vitest/runner": "^3.0.0", - "storybook": "^9.0.15", - "vitest": "^3.0.0" - }, - "peerDependenciesMeta": { - "@vitest/browser": { - "optional": true - }, - "@vitest/runner": { - "optional": true - }, - "vitest": { - "optional": true - } - } - }, - "components/node_modules/@storybook/csf-plugin": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-9.0.15.tgz", - "integrity": "sha512-KszyGjrocMiNbkmpBGARF1ugLYMVaw1J8Z31kmwTHsMgMZwAKcOsofJ0fPgFno0yV59DUVkWxVBdPs9V0hhvxA==", - "dev": true, - "license": "MIT", - "dependencies": { - "unplugin": "^1.3.1" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^9.0.15" - } - }, - "components/node_modules/@storybook/react-dom-shim": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-9.0.15.tgz", - "integrity": "sha512-X5VlYKoZSIMU9HEshIwtNzp41nPt4kiJtJ2c5HzFa5F6M8rEHM5n059CGcCZQqff3FnZtK/y6v/kCVZO+8oETA==", - "dev": true, - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^9.0.15" - } - }, - "components/node_modules/@storybook/svelte": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/svelte/-/svelte-9.0.15.tgz", - "integrity": "sha512-4HjeSEH7YBygoGmw3nBCFCET0q4Vskjpe7rBFbIQO0G8QbkR4nR50tc16PVgSleAuHb+QG8RMtH48nYU4qxbaA==", - "dev": true, - "license": "MIT", - "dependencies": { - "ts-dedent": "^2.0.0", - "type-fest": "~2.19" - }, - "engines": { - "node": ">=20.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^9.0.15", - "svelte": "^5.0.0" - } - }, - "components/node_modules/@storybook/svelte-vite": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/svelte-vite/-/svelte-vite-9.0.15.tgz", - "integrity": "sha512-Q2RWTwRKzF1osEjn7l01+2sQaeXBcpVUUfWLkL19VdbNDT3zE/j3PoUdeKp/On6D2qumoN4/BH5s48OyDQuKpw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/builder-vite": "9.0.15", - "@storybook/svelte": "9.0.15", - "magic-string": "^0.30.0", - "svelte2tsx": "^0.7.35", - "typescript": "^4.9.4 || ^5.0.0" - }, - "engines": { - "node": ">=20.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0", - "storybook": "^9.0.15", - "svelte": "^5.0.0", - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" - } - }, - "components/node_modules/@storybook/svelte-vite/node_modules/@storybook/builder-vite": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.0.15.tgz", - "integrity": "sha512-ogPec1V+e3MgTY5DBlq/6hBBui0Y4TmolYQh0eL3cATHrwZlwkTTDWQfsOnMALd5w+4Jq8n0gk0cQgR5rh1FHw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/csf-plugin": "9.0.15", - "ts-dedent": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^9.0.15", - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" - } - }, - "components/node_modules/@storybook/sveltekit": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/sveltekit/-/sveltekit-9.0.15.tgz", - "integrity": "sha512-U+GRBwszjdeVXXgPXNVj14dI+dsXxaQ0FnPOgWDftbZ9QuITFy6htWUdKp7CBjWOzHX3o0fRPTk928r72t57qQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/builder-vite": "9.0.15", - "@storybook/svelte": "9.0.15", - "@storybook/svelte-vite": "9.0.15" - }, - "engines": { - "node": ">=20.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^9.0.15", - "svelte": "^5.0.0", - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" - } - }, - "components/node_modules/@storybook/sveltekit/node_modules/@storybook/builder-vite": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.0.15.tgz", - "integrity": "sha512-ogPec1V+e3MgTY5DBlq/6hBBui0Y4TmolYQh0eL3cATHrwZlwkTTDWQfsOnMALd5w+4Jq8n0gk0cQgR5rh1FHw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/csf-plugin": "9.0.15", - "ts-dedent": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^9.0.15", - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" - } - }, "components/node_modules/@storybook/test-runner": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/@storybook/test-runner/-/test-runner-0.23.0.tgz", @@ -346,73 +99,6 @@ "storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0" } }, - "components/node_modules/@sveltejs/kit": { - "version": "2.26.1", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.26.1.tgz", - "integrity": "sha512-FwDhHAoXYUGnYndrrEzEYcKdYWpSoRKq4kli29oMe83hLri4/DOGQk3xUgwjDo0LKpSmj5M/Sj29/Ug3wO0Cbg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@sveltejs/acorn-typescript": "^1.0.5", - "@types/cookie": "^0.6.0", - "acorn": "^8.14.1", - "cookie": "^0.6.0", - "devalue": "^5.1.0", - "esm-env": "^1.2.2", - "kleur": "^4.1.5", - "magic-string": "^0.30.5", - "mrmime": "^2.0.0", - "sade": "^1.8.1", - "set-cookie-parser": "^2.6.0", - "sirv": "^3.0.0" - }, - "bin": { - "svelte-kit": "svelte-kit.js" - }, - "engines": { - "node": ">=18.13" - }, - "peerDependencies": { - "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", - "svelte": "^4.0.0 || ^5.0.0-next.0", - "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" - } - }, - "components/node_modules/storybook": { - "version": "9.0.15", - "resolved": "https://registry.npmjs.org/storybook/-/storybook-9.0.15.tgz", - "integrity": "sha512-r9hwcSMM3dq7dkMveaWFTosrmyHCL2FRrV3JOwVnVWraF6GtCgp2k+r4hsYtyp1bY3zdmK9e4KYzXsGs5q1h/Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "@storybook/global": "^5.0.0", - "@testing-library/jest-dom": "^6.6.3", - "@testing-library/user-event": "^14.6.1", - "@vitest/expect": "3.2.4", - "@vitest/spy": "3.2.4", - "better-opn": "^3.0.2", - "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0", - "esbuild-register": "^3.5.0", - "recast": "^0.23.5", - "semver": "^7.6.2", - "ws": "^8.18.0" - }, - "bin": { - "storybook": "bin/index.cjs" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "prettier": "^2 || ^3" - }, - "peerDependenciesMeta": { - "prettier": { - "optional": true - } - } - }, "mock-sophora": { "version": "1.0.0", "license": "UNLICENSED", @@ -4430,6 +4116,128 @@ "dev": true, "license": "MIT" }, + "node_modules/@storybook/addon-docs": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.1.1.tgz", + "integrity": "sha512-CzgvTy3V5X4fe+VPkiZVwPKARlpEBDAKte8ajLAlHJQLFpADdYrBRQ0se6I+kcxva7rZQzdhuH7qjXMDRVcfnw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@mdx-js/react": "^3.0.0", + "@storybook/csf-plugin": "9.1.1", + "@storybook/icons": "^1.4.0", + "@storybook/react-dom-shim": "9.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^9.1.1" + } + }, + "node_modules/@storybook/addon-links": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-9.1.1.tgz", + "integrity": "sha512-fYv0cmUzZluEKFP8iuhqu8Wqlf3demRgES7un1C6T7GilzhnMwLFcFjX40qvTC9WsIJ2Uw1G/SPjwTNXJOO5Ng==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "storybook": "^9.1.1" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } + }, + "node_modules/@storybook/addon-svelte-csf": { + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-svelte-csf/-/addon-svelte-csf-5.0.7.tgz", + "integrity": "sha512-6Zmy5HjOlrrG6OoKRTGDr9LR6zRK4/Sa7raFzQRKHGASgMlfKsMdNTNO0sxnMUWCu2JMS6HsuoLtB3Ma8SlYtg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/csf": "^0.1.13", + "dedent": "^1.5.3", + "es-toolkit": "^1.26.1", + "esrap": "^1.2.2", + "magic-string": "^0.30.12", + "svelte-ast-print": "^0.4.0", + "zimmerframe": "^1.1.2" + }, + "peerDependencies": { + "@storybook/svelte": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0", + "@sveltejs/vite-plugin-svelte": "^4.0.0 || ^5.0.0 || ^6.0.0", + "storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0", + "svelte": "^5.0.0", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, + "node_modules/@storybook/addon-vitest": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@storybook/addon-vitest/-/addon-vitest-9.1.1.tgz", + "integrity": "sha512-8qbJx9ZC5kqbLp+wZ9RsDwVb+ypUiT3L7YMuDZHBqHROfn6UYmz1x3iHWOCI7YTkffLSjI9OkJYjOltrL/094Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.4.0", + "prompts": "^2.4.0", + "ts-dedent": "^2.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "@vitest/browser": "^3.0.0", + "@vitest/runner": "^3.0.0", + "storybook": "^9.1.1", + "vitest": "^3.0.0" + }, + "peerDependenciesMeta": { + "@vitest/browser": { + "optional": true + }, + "@vitest/runner": { + "optional": true + }, + "vitest": { + "optional": true + } + } + }, + "node_modules/@storybook/builder-vite": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.1.1.tgz", + "integrity": "sha512-rM0QOfykr39SFBRQnoAa5PU3xTHnJE1R5tigvjved1o7sumcfjrhqmEyAgNZv1SoRztOO92jwkTi7En6yheOKg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/csf-plugin": "9.1.1", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^9.1.1", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, "node_modules/@storybook/csf": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.13.tgz", @@ -4440,6 +4248,23 @@ "type-fest": "^2.19.0" } }, + "node_modules/@storybook/csf-plugin": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-9.1.1.tgz", + "integrity": "sha512-MwdtvzzFpkard06pCfDrgRXZiBfWAQICdKh7kzpv1L8SwewsRgUr5WZQuEAVfYdSvCFJbWnNN4KirzPhe5ENCg==", + "dev": true, + "license": "MIT", + "dependencies": { + "unplugin": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^9.1.1" + } + }, "node_modules/@storybook/global": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz", @@ -4461,6 +4286,137 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" } }, + "node_modules/@storybook/react-dom-shim": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-9.1.1.tgz", + "integrity": "sha512-L+HCOXvOP+PwKrVS8od9aF+F4hO7zA0Nt1vnpbg2LeAHCxYghrjFVtioe7gSlzrlYdozQrPLY98a4OkDB7KGrw==", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "storybook": "^9.1.1" + } + }, + "node_modules/@storybook/svelte": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@storybook/svelte/-/svelte-9.1.1.tgz", + "integrity": "sha512-/T76u1/j4/gquB9iEUDsrwtgXPBU0OU4OKZaVoVyaJ0k3LvVXUKf/QelRTXeSKwOIUuhMmQIg4z1+5k/ar1IJQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ts-dedent": "^2.0.0", + "type-fest": "~2.19" + }, + "engines": { + "node": ">=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^9.1.1", + "svelte": "^5.0.0" + } + }, + "node_modules/@storybook/sveltekit": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@storybook/sveltekit/-/sveltekit-9.1.1.tgz", + "integrity": "sha512-J++HoT2CLlwKpACI4n0qprqegwzrtqPEm0HwLpJ3uRO5kMyoA8VcxxtBiL9e87aOAMQlxH/u+hStnrUWE0ZrHA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/builder-vite": "9.1.1", + "@storybook/svelte": "9.1.1", + "@storybook/svelte-vite": "9.1.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^9.1.1", + "svelte": "^5.0.0", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, + "node_modules/@storybook/sveltekit/node_modules/@storybook/svelte-vite": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@storybook/svelte-vite/-/svelte-vite-9.1.1.tgz", + "integrity": "sha512-x+udvn9d52HkQBEAtElYGbNMJ74u53G1Giob09b3U3iFjKE+VXt3WSrY9UNRe0gtrV63mL33XzotTt+K/lfcLw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/builder-vite": "9.1.1", + "@storybook/svelte": "9.1.1", + "magic-string": "^0.30.0", + "svelte2tsx": "^0.7.35", + "typescript": "^4.9.4 || ^5.0.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0", + "storybook": "^9.1.1", + "svelte": "^5.0.0", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, + "node_modules/@storybook/sveltekit/node_modules/@sveltejs/vite-plugin-svelte": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.1.1.tgz", + "integrity": "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1", + "debug": "^4.4.1", + "deepmerge": "^4.3.1", + "kleur": "^4.1.5", + "magic-string": "^0.30.17", + "vitefu": "^1.0.6" + }, + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22" + }, + "peerDependencies": { + "svelte": "^5.0.0", + "vite": "^6.0.0" + } + }, + "node_modules/@storybook/sveltekit/node_modules/@sveltejs/vite-plugin-svelte-inspector": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz", + "integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "debug": "^4.3.7" + }, + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22" + }, + "peerDependencies": { + "@sveltejs/vite-plugin-svelte": "^5.0.0", + "svelte": "^5.0.0", + "vite": "^6.0.0" + } + }, "node_modules/@sveltejs/acorn-typescript": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz", @@ -4491,9 +4447,9 @@ } }, "node_modules/@sveltejs/kit": { - "version": "2.27.0", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.27.0.tgz", - "integrity": "sha512-pEX1Z2Km8tqmkni+ykIIou+ojp/7gb3M9tpllN5nDWNo9zlI0dI8/hDKFyBwQvb4jYR+EyLriFtrmgJ6GvbnBA==", + "version": "2.27.1", + "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.27.1.tgz", + "integrity": "sha512-u5HbL9T4TgWZwXZM7hwdT0f5sDkGaNxsSrLYQoql+eiz2+9rcbbq4MiOAPoRtXG0dys5P5ixBmyQdqZedwZUlA==", "dev": true, "license": "MIT", "dependencies": { @@ -21391,6 +21347,42 @@ "dev": true, "license": "MIT" }, + "node_modules/storybook": { + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/storybook/-/storybook-9.1.1.tgz", + "integrity": "sha512-q6GaGZdVZh6rjOdGnc+4hGTu8ECyhyjQDw4EZNxKtQjDO8kqtuxbFm8l/IP2l+zLVJAatGWKkaX9Qcd7QZxz+Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@storybook/global": "^5.0.0", + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/user-event": "^14.6.1", + "@vitest/expect": "3.2.4", + "@vitest/mocker": "3.2.4", + "@vitest/spy": "3.2.4", + "better-opn": "^3.0.2", + "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0", + "esbuild-register": "^3.5.0", + "recast": "^0.23.5", + "semver": "^7.6.2", + "ws": "^8.18.0" + }, + "bin": { + "storybook": "bin/index.cjs" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "prettier": "^2 || ^3" + }, + "peerDependenciesMeta": { + "prettier": { + "optional": true + } + } + }, "node_modules/stream-combiner2": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.1.1.tgz", From 4b2276af9d1b4fff20c47857a1f4350c7577291b Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 7 Aug 2025 08:54:47 +0100 Subject: [PATCH 2/4] Tweak case colour --- components/src/maplibre/MapStyle/tokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/src/maplibre/MapStyle/tokens.ts b/components/src/maplibre/MapStyle/tokens.ts index fdf8d125..3abea2d7 100644 --- a/components/src/maplibre/MapStyle/tokens.ts +++ b/components/src/maplibre/MapStyle/tokens.ts @@ -12,7 +12,7 @@ const tokens = { street_primary: 'hsl(0, 0%, 96%)', street_primary_case: 'hsl(0, 0%, 75%)', street_secondary: 'hsl(0, 0%, 95%)', - street_secondary_case: 'hsl(0, 0%, 50%)', + street_secondary_case: 'hsl(0, 0%, 75%)', street_tertiary: 'hsl(0, 0%, 95%)', street_tertiary_case: 'hsl(0, 0%, 70%)', label_primary: 'hsl(240, 5%, 10%)', From 153b64550f4d2d721f14f3ce1813d500aaccf882 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 7 Aug 2025 10:10:44 +0100 Subject: [PATCH 3/4] consolidate secondary road case styles --- .../src/maplibre/MapStyle/components/Roads.ts | 87 ++++++------------- 1 file changed, 28 insertions(+), 59 deletions(-) diff --git a/components/src/maplibre/MapStyle/components/Roads.ts b/components/src/maplibre/MapStyle/components/Roads.ts index 2c766259..e89c6d5b 100644 --- a/components/src/maplibre/MapStyle/components/Roads.ts +++ b/components/src/maplibre/MapStyle/components/Roads.ts @@ -117,16 +117,26 @@ const street_secondary = { } }; const street_secondary_case = { - line_width: { - stops: [ - [12, 0], - [14, 3], - [16, 10], - [18, 30], - [19, 66], - [20, 40] - ] - } + paint: { + 'line-color': tokens.street_secondary_case, + 'line-width': { + stops: [ + [12, 0], + [14, 3], + [16, 10], + [18, 30], + [19, 66], + [20, 40] + ] + }, + 'line-opacity': { + stops: [ + [11, 0], + [12, 1] + ] + } + }, + layout: case_layout }; const street_tertiary_case = { paint: { @@ -380,12 +390,8 @@ export default function makeRoads() { { id: 'bridge-street-secondary-link:case', filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'secondary'], ['==', 'link', true]], - paint: { - 'line-color': tokens.street_secondary_case, - 'line-width': street_secondary_case.line_width - }, - layout: case_layout, - minzoom: 13 + minzoom: 13, + ...street_secondary_case }, { id: 'bridge-street-primary-link:case', @@ -426,17 +432,7 @@ export default function makeRoads() { { id: 'bridge-street-secondary:case', filter: ['all', ['==', 'bridge', true], ['in', 'kind', 'secondary'], ['!=', 'link', true]], - paint: { - 'line-color': tokens.street_secondary_case, - 'line-width': street_secondary_case.line_width, - 'line-opacity': { - stops: [ - [11, 0], - [12, 1] - ] - } - }, - layout: case_layout + ...street_secondary_case }, { id: 'bridge-street-primary:case', @@ -793,11 +789,10 @@ export default function makeRoads() { type: 'line', filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'secondary'], ['==', 'link', true]], paint: { - 'line-color': tokens.street_secondary_case, + ...street_secondary_case.paint, 'line-dasharray': [1, 0.3], - 'line-width': street_secondary.line_width }, - layout: case_layout, + layout: street_secondary_case.layout, minzoom: 13 }, { @@ -840,18 +835,7 @@ export default function makeRoads() { { id: 'tunnel-street-secondary:case', filter: ['all', ['==', 'tunnel', true], ['in', 'kind', 'secondary'], ['!=', 'link', true]], - paint: { - 'line-color': tokens.street_secondary_case, - 'line-dasharray': [1, 0.3], - 'line-width': street_secondary_case.line_width, - 'line-opacity': { - stops: [ - [11, 0], - [12, 1] - ] - } - }, - layout: case_layout + ...street_secondary_case }, { id: 'tunnel-street-primary:case', @@ -1245,12 +1229,7 @@ export default function makeRoads() { ['in', 'kind', 'secondary'], ['==', 'link', true] ], - paint: { - 'line-color': tokens.street_secondary_case, - 'line-width': street_secondary_case.line_width - }, - layout: case_layout, - minzoom: 13 + ...street_secondary_case }, { id: 'street-primary-link:case', @@ -1320,17 +1299,7 @@ export default function makeRoads() { ['in', 'kind', 'secondary'], ['!=', 'link', true] ], - paint: { - 'line-color': tokens.street_secondary_case, - 'line-width': street_secondary_case.line_width, - 'line-opacity': { - stops: [ - [11, 0], - [12, 1] - ] - } - }, - layout: case_layout + ...street_secondary_case }, { id: 'street-primary:case', From 4d6325a38b7795b630b3cf2c22b94ca388060342 Mon Sep 17 00:00:00 2001 From: Max Kohler Date: Thu, 7 Aug 2025 10:12:45 +0100 Subject: [PATCH 4/4] tweak line width to get a full pixel to render --- components/src/maplibre/MapStyle/components/Roads.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/src/maplibre/MapStyle/components/Roads.ts b/components/src/maplibre/MapStyle/components/Roads.ts index e89c6d5b..7a399dcb 100644 --- a/components/src/maplibre/MapStyle/components/Roads.ts +++ b/components/src/maplibre/MapStyle/components/Roads.ts @@ -123,7 +123,7 @@ const street_secondary_case = { stops: [ [12, 0], [14, 3], - [16, 10], + [16, 11], [18, 30], [19, 66], [20, 40]