@quaffui/quaff 0.1.0-prealpha10 → 0.1.0-prealpha12

package/dist/css/theme/theme.dark.scss

@@ -1,4 +1,4 @@
-body.dark {
+.body--dark {
   --body: #000;
   --primary: rgba(var(--primary-dark));
   --on-primary: rgba(var(--on-primary-dark));
@@ -27,6 +27,8 @@ body.dark {
   --on-surface-variant-2: rgba(var(--on-surface-variant-dark), 0.08);
   --on-surface-variant-4: rgba(var(--on-surface-variant-dark), 0.12);
   --outline: rgba(var(--outline-dark));
+  --outline-2: rgba(var(--outline-dark), 0.12);
+  --outline-4: rgba(var(--outline-dark), 0.24);
   --inverse-on-surface: rgba(var(--inverse-on-surface-dark));
   --inverse-surface: rgba(var(--inverse-surface-dark));
   --inverse-primary: rgba(var(--inverse-primary-dark));

package/dist/css/theme/theme.light.scss

@@ -1,4 +1,4 @@
-body.light {
+.body--light {
   --body: #fff;
   --primary: rgba(var(--primary-light));
   --on-primary: rgba(var(--on-primary-light));
@@ -27,6 +27,8 @@ body.light {
   --on-surface-variant-2: rgba(var(--on-surface-variant-light), 0.08);
   --on-surface-variant-4: rgba(var(--on-surface-variant-light), 0.12);
   --outline: rgba(var(--outline-light));
+  --outline-2: rgba(var(--outline-light), 0.12);
+  --outline-4: rgba(var(--outline-light), 0.24);
   --inverse-on-surface: rgba(var(--inverse-on-surface-light));
   --inverse-surface: rgba(var(--inverse-surface-light));
   --inverse-primary: rgba(var(--inverse-primary-light));

package/dist/helpers/ripple.d.ts

@@ -2,6 +2,7 @@ interface RippleOptions {
     center?: boolean;
     color?: string;
     duration?: number;
+    disable?: boolean;
 }
 export declare function ripple(el: HTMLElement, options?: RippleOptions): {
     destroy(): void;

package/dist/helpers/ripple.js

@@ -25,7 +25,7 @@ export function ripple(el, options = {}) {
     addClasses();
     setOptions(options);
     function createRipple(e, center) {
-        if (el.hasAttribute("aria-disabled"))
+        if (options.disable || el.hasAttribute("aria-disabled"))
             return;
         if (e instanceof KeyboardEvent) {
             if (!["Enter", "Space"].includes(e.code) || e.repeat) {

package/dist/helpers/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.1.0-prealpha10";
+declare const _default: "0.1.0-prealpha12";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "0.1.0-prealpha10";
+export default "0.1.0-prealpha12";

package/dist/stores/QTheme.d.ts

@@ -35,8 +35,7 @@ interface IMaterialDynamicColorsThemeFormatted {
 type CSSDynamicColor = `${keyof IMaterialDynamicColorsThemeColorFormatted}-${keyof IMaterialDynamicColorsThemeFormatted}`;
 export declare const QTheme: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string>>, invalidate?: import("svelte/store").Invalidator<Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string>> | undefined) => import("svelte/store").Unsubscriber;
-    setThemeColors: (from: string) => Promise<void>;
+    setTheme: (from: string) => Promise<void>;
     updateThemeColor: (color: CSSDynamicColor, newValue: string) => void;
-    apply: () => void;
 };
 export {};

package/dist/stores/QTheme.js

@@ -2,7 +2,15 @@ import { writable } from "svelte/store";
 import materialDynamicColors from "material-dynamic-colors";
 import { convertCase } from "../utils/string";
 import QColors from "../utils/colors";
+function extractColorFromCssVar(cssVar) {
+    const rootStyles = getComputedStyle(document.documentElement);
+    const varName = cssVar.replace(/var\(([a-z0-9-]+)\)/, "$1");
+    return rootStyles.getPropertyValue(varName).trim();
+}
 async function prepareThemeColors(from) {
+    if (from.startsWith("var(")) {
+        from = extractColorFromCssVar(from);
+    }
     let theme = await materialDynamicColors(from);
     //@ts-ignore
     const themeColors = {};
@@ -17,20 +25,9 @@ async function prepareThemeColors(from) {
     }
     return themeColors;
 }
-/* const defaultThemeColors = await prepareThemeColors("/cocktail.jpg"); */
-const defaultThemeColors = await prepareThemeColors("#3499E7");
 function themeBuilder() {
-    const { subscribe, set, update } = writable(defaultThemeColors);
-    const setThemeColors = async (from) => {
-        let newTheme = await prepareThemeColors(from);
-        set(newTheme);
-    };
-    const updateThemeColor = (color, newValue) => {
-        update(($themeColors) => {
-            $themeColors[color] = newValue;
-            return $themeColors;
-        });
-    };
+    const { subscribe, set, update } = writable({});
+    prepareThemeColors("#3499E7").then((res) => set(res));
     const apply = () => {
         let root = document.documentElement;
         if (root === null)
@@ -43,11 +40,21 @@ function themeBuilder() {
             return $themeColors;
         });
     };
+    const updateThemeColor = (color, newValue) => {
+        update(($themeColors) => {
+            $themeColors[color] = newValue;
+            return $themeColors;
+        });
+    };
+    const setTheme = async (from) => {
+        let newTheme = await prepareThemeColors(from);
+        set(newTheme);
+        apply();
+    };
     return {
         subscribe,
-        setThemeColors,
+        setTheme,
         updateThemeColor,
-        apply,
     };
 }
 export const QTheme = themeBuilder();

package/dist/stores/Quaff.js

@@ -9,24 +9,29 @@ function quaff() {
         //TODO? iconSet: {},
     });
     const toggleDarkMode = () => {
-        return update((q) => {
-            q.dark = !q.dark;
+        return update(($quaff) => {
+            $quaff.dark = !$quaff.dark;
+            const mode = $quaff.dark
+                ? {
+                    from: "light",
+                    to: "dark",
+                }
+                : {
+                    from: "dark",
+                    to: "light",
+                };
             let body = document.querySelector("body");
-            if (q.dark === true) {
-                body && body.classList.replace("light", "dark");
+            if (body) {
+                body.classList.replace(`body--${mode.from}`, `body--${mode.to}`);
             }
-            else {
-                body && body.classList.replace("dark", "light");
-            }
-            let mode = q.dark === true ? "dark" : "light";
-            document.cookie = `current_mode=${mode}; max-age=31536000; path="/"; SameSite=strict`;
-            return q;
+            document.cookie = `current_mode=${mode.to}; max-age=31536000; path="/"; SameSite=strict`;
+            return $quaff;
         });
     };
     const setDarkMode = (newVal) => {
-        return update((q) => {
-            q.dark = newVal;
-            return q;
+        return update(($quaff) => {
+            $quaff.dark = newVal;
+            return $quaff;
         });
     };
     return {

package/dist/utils/props.d.ts

@@ -2,7 +2,7 @@ export declare function createStyles(styleObj: Record<string, string | number |
 interface CreateClassesOptions {
     component?: string;
     element?: string;
-    userClasses?: string;
+    userClasses?: string | null;
     quaffClasses?: any[];
 }
 export declare function createClasses(modifiers: any[], options?: CreateClassesOptions): string;

package/dist/utils/types.d.ts

@@ -1,6 +1,6 @@
 export interface NativeProps {
-    userClasses?: string;
-    userStyles?: string;
+    userClasses?: string | null;
+    userStyles?: string | null;
 }
 export declare const NativePropsDefaults: NativeProps;
 export type QuaffSizes = "xs" | "sm" | "md" | "lg" | "xl";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha10",
+  "version": "0.1.0-prealpha12",
   "scripts": {
     "dev": "vite dev",
     "open": "vite dev --open",