lapikit 0.1.8 → 0.1.9

package/dist/components/app/app.svelte

@@ -1,18 +1,36 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
-	import { modalOpen, setOpenModal, updateThemeStore } from '../../stores/index.js';
+	import {
+		colorSchemeSystem,
+		modalOpen,
+		setOpenModal,
+		updateThemeStore
+	} from '../../stores/index.js';
 	import type { Snippet } from 'svelte';
 	let { children }: { children: Snippet } = $props();
 
 	$effect.pre(() => {
 		if (!BROWSER) return;
+		// system
+		if (window.matchMedia) {
+			colorSchemeSystem.set(
+				window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+			);
+		}
+
+		// listener
+		window
+			.matchMedia('(prefers-color-scheme: dark)')
+			.addEventListener('change', (event: MediaQueryListEvent) => {
+				colorSchemeSystem.set(event.matches ? 'dark' : 'light');
+			});
+
+		// local
 		const local = localStorage.getItem('@lapikit/theme');
-		if (local !== null) updateThemeStore(local as 'dark' | 'light' | 'auto');
+		if (local !== null) updateThemeStore(local as 'dark' | 'light' | 'system');
 	});
 </script>
 
-{$modalOpen ? ($modalOpen === 'persistent' ? 'persistent' : 'true') : 'false'}
-
 {@render children?.()}
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->

package/dist/preset.js

@@ -35,7 +35,7 @@ export const config = {
     breakpoints: {
         mobileBreakpoint: 'sm',
         tabletBreakpoint: 'md',
-        laptopBreakpoint: 'xl',
+        laptopBreakpoint: 'lg',
         thresholds: {
             _default: 0, // 0px
             xs: '28rem', //448px

package/dist/stores/index.d.ts

@@ -1,9 +1,10 @@
 import { type Writable } from 'svelte/store';
-export declare const colorScheme: Writable<'auto' | 'dark' | 'light'>;
+export declare const colorScheme: Writable<'system' | 'dark' | 'light'>;
+export declare const colorSchemeSystem: Writable<'dark' | 'light'>;
 export declare const modalOpen: Writable<boolean | 'persistent'>;
 export declare const modalStack: Writable<string[]>;
-export declare function updateThemeStore(update: 'auto' | 'dark' | 'light'): void;
-export declare function setColorScheme(scheme: 'auto' | 'dark' | 'light'): void;
+export declare function updateThemeStore(update: 'system' | 'dark' | 'light'): void;
+export declare function setColorScheme(scheme: 'system' | 'dark' | 'light'): void;
 export declare function setOpenModal(state: boolean | 'persistent'): void;
 export declare const pushModal: (id: string) => void;
 export declare const popModal: (id: string) => void;

package/dist/stores/index.js

@@ -1,17 +1,18 @@
 import { disabledScroll } from '../internal/scroll.js';
 import { writable } from 'svelte/store';
 // states
-const colorScheme_default = 'light';
+const colorScheme_default = 'system';
 const modalOpen_default = false;
 const isBrowser = typeof window !== 'undefined';
 export const colorScheme = writable(colorScheme_default);
+export const colorSchemeSystem = writable('light');
 export const modalOpen = writable(modalOpen_default);
 export const modalStack = writable([]);
 export function updateThemeStore(update) {
     colorScheme.update(() => {
         if (isBrowser) {
             const ref = document.documentElement.classList;
-            if (update === 'auto')
+            if (update === 'system')
                 ref.remove('light', 'dark');
             else {
                 ref.remove(update === 'dark' ? 'light' : 'dark');

package/dist/style/parser/device.js

@@ -6,12 +6,12 @@ export const devices = (config) => {
         tablet: config.breakpoints.tabletBreakpoint,
         laptop: config.breakpoints.laptopBreakpoint
     };
-    css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.tablet])}) {\n`;
+    css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
     css += `.hidden-mobile {\n`;
     css += `display: none !important;\n`;
     css += `}\n`;
     css += `}\n`;
-    css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.tablet])}) {\n`;
+    css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
     css += `.display-mobile {\n`;
     css += `display: none !important;\n`;
     css += `}\n`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.1.8",
+	"version": "0.1.9",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"