@swr-data-lab/components 2.13.2 → 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/package.json

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