@celar-ui/svelte 0.3.2 → 0.3.4

package/dist/utils.d.ts

@@ -1,4 +1,2 @@
-/**
- * Apply the chosen color scheme by traversing stylesheet rules and adjusting prefers-color-scheme media queries.
- */
 export declare function applyPreferredColorScheme(scheme: 'light' | 'dark' | 'auto'): void;
+export declare function disableAnimation(): () => void;

package/dist/utils.js

@@ -1,41 +1,25 @@
-/**
- * Apply the chosen color scheme by traversing stylesheet rules and adjusting prefers-color-scheme media queries.
- */
 export function applyPreferredColorScheme(scheme) {
-    for (const styleSheet of Array.from(document.styleSheets)) {
-        // Some stylesheets may be subject to CORS
-        let rules;
-        try {
-            rules = styleSheet.cssRules;
-        }
-        catch {
-            continue;
-        }
-        for (const rule of Array.from(rules)) {
-            if (rule instanceof CSSMediaRule && rule.media.mediaText.includes('prefers-color-scheme')) {
-                switch (scheme) {
-                    case 'light':
-                        rule.media.appendMedium('original-prefers-color-scheme');
-                        if (rule.media.mediaText.includes('light'))
-                            rule.media.deleteMedium('(prefers-color-scheme: light)');
-                        if (rule.media.mediaText.includes('dark'))
-                            rule.media.deleteMedium('(prefers-color-scheme: dark)');
-                        break;
-                    case 'dark':
-                        rule.media.appendMedium('(prefers-color-scheme: light)');
-                        rule.media.appendMedium('(prefers-color-scheme: dark)');
-                        if (rule.media.mediaText.includes('original'))
-                            rule.media.deleteMedium('original-prefers-color-scheme');
-                        break;
-                    default: // auto
-                        rule.media.appendMedium('(prefers-color-scheme: dark)');
-                        if (rule.media.mediaText.includes('light'))
-                            rule.media.deleteMedium('(prefers-color-scheme: light)');
-                        if (rule.media.mediaText.includes('original'))
-                            rule.media.deleteMedium('original-prefers-color-scheme');
-                        break;
-                }
-            }
-        }
+    if (scheme === 'auto') {
+        scheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
+    const enableAnimation = disableAnimation();
+    document.documentElement.setAttribute('data-theme', scheme);
+    // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.
+    // if color-scheme is null, this will remove the property
+    document.documentElement.style.setProperty('color-scheme', scheme);
+    enableAnimation();
+}
+// https://github.com/beynar/svelte-themes/blob/18427800b19a7f866f26770dc5bf2c42227e14e3/src/lib/helpers.ts#L14-L32
+export function disableAnimation() {
+    const css = document.createElement('style');
+    css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+    document.head.appendChild(css);
+    return () => {
+        // Force restyle
+        (() => window.getComputedStyle(document.body))();
+        // Wait for next tick before removing
+        setTimeout(() => {
+            document.head.removeChild(css);
+        }, 1);
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "0.3.2",
+	"version": "0.3.4",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",
@@ -18,7 +18,7 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
-		"npm-publish": "bun run build && npm publish --access=public"
+		"npm-publish": "bun run build && export $(grep -v '^#' ../../.env | xargs) && npm publish --access=public"
 	},
 	"files": [
 		"dist",

package/src/styles/colors.scss

@@ -9,11 +9,11 @@ $colors-theme: (
 	color-primary--light: #ffe5dc,
 	color-primary--lighter: #fff6f3,
 
-	color-alt--text: #481523,
-	color-alt--darker: #8f1538,
-	color-alt--dark: #c48591,
-	color-alt: #f1afbb,
-	color-alt--light: #ffe3ec,
+	color-alt--text: #570036,
+	color-alt--darker: #960f45,
+	color-alt--dark: #ff7fbd,
+	color-alt: #ffb3d0,
+	color-alt--light: #ffdce8,
 	color-alt--lighter: #fff3f7,
 
 	color-text: #000000,
@@ -23,7 +23,7 @@ $colors-theme: (
 	color-text-danger: #98000b,
 
 	color-bg: #ffffff,
-	color-bg-info: #faf8ff,
+	color-bg-info: #e2ffff,
 	color-bg-success: #e8fef5,
 	color-bg-warning: #fff8ec,
 	color-bg-danger: #fff4ef
@@ -39,14 +39,14 @@ $colors-theme-dark: (
 	color-primary--lighter: #570000,
 
 	color-alt--text: #fff3f7,
-	color-alt--darker: #ffe3ec,
-	color-alt--dark: #f1afbb,
-	color-alt: #c48591,
-	color-alt--light: #8f1538,
-	color-alt--lighter: #481523,
+	color-alt--darker: #ffdce8,
+	color-alt--dark: #ffb3d0,
+	color-alt: #ff7fbd,
+	color-alt--light: #960f45,
+	color-alt--lighter: #570036,
 
 	color-text: #efefef,
-	color-text-info: #9191a3,
+	color-text-info: #008eff,
 	color-text-success: #7ab8a3,
 	color-text-warning: #bfa060,
 	color-text-danger: #b36a6a,
@@ -73,10 +73,6 @@ $colors-misc: (
 	@include utils.add_prefix(config.$prefix, $colors-misc);
 }
 
-// Based on this to dynamically switch the interface:
-// https://stackoverflow.com/a/75124760
-@media (prefers-color-scheme: dark) {
-	:root {
-		@include utils.generate_colors(config.$prefix, $colors-theme-dark);
-	}
+:root[data-theme='dark'] {
+	@include utils.generate_colors(config.$prefix, $colors-theme-dark);
 }