@swr-data-lab/components 2.13.1 → 2.14.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}
@@ -41,15 +43,13 @@ const rules = [
   --color-pageFill: var(--pageFill-light);
   --color-surfaceFill: var(--surfaceFill-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-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/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/Tooltip/Tooltip.svelte

@@ -32,10 +32,8 @@ onDestroy(() => tooltip.remove());
 <style>.container {
   background: white;
   padding: 0.75em;
-  border-radius: 2px;
   border: 1px solid rgba(0, 0, 0, 0.75);
-  border-radius: var(--br-small);
-  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
+  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.1));
   pointer-events: none;
 }
 
@@ -98,23 +96,24 @@ onDestroy(() => tooltip.remove());
 }
 :global(.maplibregl-popup-close-button) {
   position: absolute;
-  top: 0.5em;
-  right: 0.5em;
+  top: 0.35em;
+  right: 0.35em;
   cursor: pointer;
   border-radius: 2px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding-bottom: 0.15em;
-  font-size: 1.25rem;
+  font-size: 1.2rem;
   width: 1.1em;
   height: 1.1em;
   z-index: 100;
   background: white;
+  color: var(--gray-dark-5);
   border: 1px solid var(--gray-dark-5);
 }
 :global(.maplibregl-popup-close-button:hover),
-:global(.maplibregl-popup-close-button:focus) {
+:global(.maplibregl-popup-close-button:focus-visible) {
   background: var(--gray-light-5);
 }
 :global(.maplibregl-popup-tip) {
@@ -122,7 +121,7 @@ onDestroy(() => tooltip.remove());
   height: 0.65rem;
   background: white;
   position: absolute;
-  border-right: 1px solid rgba(0, 0, 0, 0.75);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.75);
+  border-right: 1px solid var(--gray-dark-5);
+  border-bottom: 1px solid var(--gray-dark-5);
   z-index: 10;
 }</style>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "2.13.1",
+	"version": "2.14.0",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",