@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

package/dist/css/theme/tokens.scss

@@ -1,163 +1,4 @@
 :root {
-  --md-source: 255, 183, 123;
-  /* primary */
-  --palette-primary0: 0, 0, 0;
-  --palette-primary10: 46, 21, 0;
-  --palette-primary20: 77, 39, 0;
-  --palette-primary25: 93, 48, 0;
-  --palette-primary30: 109, 57, 0;
-  --palette-primary35: 126, 67, 0;
-  --palette-primary40: 144, 77, 0;
-  --palette-primary50: 176, 100, 20;
-  --palette-primary60: 207, 125, 45;
-  --palette-primary70: 239, 150, 69;
-  --palette-primary80: 255, 183, 124;
-  --palette-primary90: 255, 220, 194;
-  --palette-primary95: 255, 237, 226;
-  --palette-primary98: 255, 248, 245;
-  --palette-primary99: 255, 251, 255;
-  --palette-primary100: 255, 255, 255;
-  /* secondary */
-  --palette-secondary0: 0, 0, 0;
-  --palette-secondary10: 42, 23, 7;
-  --palette-secondary20: 65, 44, 25;
-  --palette-secondary25: 78, 55, 35;
-  --palette-secondary30: 90, 66, 46;
-  --palette-secondary35: 103, 77, 57;
-  --palette-secondary40: 116, 89, 68;
-  --palette-secondary50: 142, 113, 91;
-  --palette-secondary60: 170, 139, 115;
-  --palette-secondary70: 198, 165, 140;
-  --palette-secondary80: 227, 192, 166;
-  --palette-secondary90: 255, 220, 194;
-  --palette-secondary95: 255, 237, 226;
-  --palette-secondary98: 255, 248, 245;
-  --palette-secondary99: 255, 251, 255;
-  --palette-secondary100: 255, 255, 255;
-  /* tertiary */
-  --palette-tertiary0: 0, 0, 0;
-  --palette-tertiary10: 25, 30, 0;
-  --palette-tertiary20: 46, 51, 13;
-  --palette-tertiary25: 57, 62, 23;
-  --palette-tertiary30: 68, 74, 34;
-  --palette-tertiary35: 80, 86, 44;
-  --palette-tertiary40: 92, 98, 55;
-  --palette-tertiary50: 116, 123, 77;
-  --palette-tertiary60: 142, 149, 101;
-  --palette-tertiary70: 169, 175, 125;
-  --palette-tertiary80: 196, 203, 151;
-  --palette-tertiary90: 224, 231, 177;
-  --palette-tertiary95: 239, 245, 190;
-  --palette-tertiary98: 247, 254, 198;
-  --palette-tertiary99: 252, 255, 220;
-  --palette-tertiary100: 255, 255, 255;
-  /* neutral */
-  --palette-neutral0: 0, 0, 0;
-  --palette-neutral10: 32, 27, 23;
-  --palette-neutral20: 53, 47, 43;
-  --palette-neutral25: 65, 58, 54;
-  --palette-neutral30: 76, 69, 65;
-  --palette-neutral35: 88, 81, 76;
-  --palette-neutral40: 101, 93, 88;
-  --palette-neutral50: 126, 117, 112;
-  --palette-neutral60: 152, 143, 137;
-  --palette-neutral70: 179, 169, 163;
-  --palette-neutral80: 207, 196, 190;
-  --palette-neutral90: 236, 224, 218;
-  --palette-neutral95: 250, 238, 232;
-  --palette-neutral98: 255, 248, 245;
-  --palette-neutral99: 255, 251, 255;
-  --palette-neutral100: 255, 255, 255;
-  /* neutral-variant */
-  --palette-neutral-variant0: 0, 0, 0;
-  --palette-neutral-variant10: 36, 26, 18;
-  --palette-neutral-variant20: 58, 46, 37;
-  --palette-neutral-variant25: 69, 57, 48;
-  --palette-neutral-variant30: 81, 68, 59;
-  --palette-neutral-variant35: 93, 80, 70;
-  --palette-neutral-variant40: 106, 92, 81;
-  --palette-neutral-variant50: 132, 116, 105;
-  --palette-neutral-variant60: 158, 142, 130;
-  --palette-neutral-variant70: 186, 168, 156;
-  --palette-neutral-variant80: 214, 195, 182;
-  --palette-neutral-variant90: 243, 223, 210;
-  --palette-neutral-variant95: 255, 237, 226;
-  --palette-neutral-variant98: 255, 248, 245;
-  --palette-neutral-variant99: 255, 251, 255;
-  --palette-neutral-variant100: 255, 255, 255;
-  /* error */
-  --palette-error0: 0, 0, 0;
-  --palette-error10: 65, 0, 2;
-  --palette-error20: 105, 0, 5;
-  --palette-error25: 126, 0, 7;
-  --palette-error30: 147, 0, 10;
-  --palette-error35: 168, 7, 16;
-  --palette-error40: 186, 26, 26;
-  --palette-error50: 222, 55, 48;
-  --palette-error60: 255, 84, 73;
-  --palette-error70: 255, 137, 125;
-  --palette-error80: 255, 180, 171;
-  --palette-error90: 255, 218, 214;
-  --palette-error95: 255, 237, 234;
-  --palette-error98: 255, 248, 247;
-  --palette-error99: 255, 251, 255;
-  --palette-error100: 255, 255, 255;
-  /* light */
-  --primary-light: 0, 98, 159;
-  --on-primary-light: 255, 255, 255;
-  --primary-container-light: 206, 229, 255;
-  --on-primary-container-light: 18, 28, 39;
-  --secondary-light: 82, 96, 112;
-  --on-secondary-light: 255, 255, 255;
-  --secondary-container-light: 214, 228, 247;
-  --on-secondary-container-light: 15, 29, 42;
-  --tertiary-light: 105, 88, 121;
-  --on-tertiary-light: 255, 255, 255;
-  --tertiary-container-light: 241, 219, 255;
-  --on-tertiary-container-light: 36, 21, 51;
-  --error-light: 186, 27, 27;
-  --error-container-light: 255, 218, 212;
-  --on-error-light: 255, 255, 255;
-  --on-error-container-light: 65, 0, 1;
-  --background-light: 253, 252, 255;
-  --on-background-light: 26, 28, 30;
-  --surface-light: 253, 252, 255;
-  --on-surface-light: 26, 28, 30;
-  --surface-variant-light: 223, 227, 236;
-  --on-surface-variant-light: 66, 71, 78;
-  --outline-light: 114, 119, 127;
-  --inverse-on-surface-light: 240, 240, 243;
-  --inverse-surface-light: 47, 48, 51;
-  --inverse-primary-light: 151, 203, 255;
-  --shadow-light: 0, 0, 0;
-  /* dark */
-  --primary-dark: 151, 203, 255;
-  --on-primary-dark: 0, 51, 85;
-  --primary-container-dark: 0, 74, 122;
-  --on-primary-container-dark: 206, 229, 255;
-  --secondary-dark: 186, 200, 218;
-  --on-secondary-dark: 36, 50, 64;
-  --secondary-container-dark: 59, 72, 87;
-  --on-secondary-container-dark: 214, 228, 247;
-  --tertiary-dark: 212, 190, 230;
-  --on-tertiary-dark: 57, 42, 72;
-  --tertiary-container-dark: 81, 64, 97;
-  --on-tertiary-container-dark: 241, 219, 255;
-  --error-dark: 255, 180, 169;
-  --error-container-dark: 147, 0, 6;
-  --on-error-dark: 104, 0, 3;
-  --on-error-container-dark: 255, 218, 212;
-  --background-dark: 26, 28, 30;
-  --on-background-dark: 226, 226, 230;
-  --surface-dark: 26, 28, 30;
-  --on-surface-dark: 226, 226, 230;
-  --surface-variant-dark: 66, 71, 78;
-  --on-surface-variant-dark: 195, 199, 207;
-  --outline-dark: 140, 145, 153;
-  --inverse-on-surface-dark: 26, 28, 30;
-  --inverse-surface-dark: 226, 226, 230;
-  --inverse-primary-dark: 0, 98, 159;
-  --shadow-dark: 0, 0, 0;
   /* display - large */
   --typescale-display-large-font-family-name: Roboto, sans-serif;
   --typescale-display-large-font-family-style: Regular;

package/dist/css/theme/typography.scss

@@ -0,0 +1,111 @@
+html {
+  font-size: var(--size);
+}
+
+body {
+  font-family: var(--font);
+  font-size: 0.875rem;
+  line-height: 1.25;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  line-height: normal;
+}
+
+* + h1,
+* + h2,
+* + h3,
+* + h4,
+* + h5,
+* + h6 {
+  margin-top: 1rem;
+}
+
+h1 {
+  font-size: 3.5625rem;
+}
+
+h2 {
+  font-size: 2.8125rem;
+}
+
+h3 {
+  font-size: 2.25rem;
+}
+
+h4 {
+  font-size: 2rem;
+}
+
+h5 {
+  font-size: 1.75rem;
+}
+
+h6 {
+  font-size: 1.5rem;
+}
+
+h1.small {
+  font-size: 3.0625rem;
+}
+
+h2.small {
+  font-size: 2.3125rem;
+}
+
+h3.small {
+  font-size: 1.75rem;
+}
+
+h4.small {
+  font-size: 1.5rem;
+}
+
+h5.small {
+  font-size: 1.25rem;
+}
+
+h6.small {
+  font-size: 1rem;
+}
+
+h1.large {
+  font-size: 4.0625rem;
+}
+
+h2.large {
+  font-size: 3.3125rem;
+}
+
+h3.large {
+  font-size: 2.75rem;
+}
+
+h4.large {
+  font-size: 2.5rem;
+}
+
+h5.large {
+  font-size: 2.25rem;
+}
+
+h6.large {
+  font-size: 2rem;
+}
+
+p {
+  margin: 0.5rem 0;
+}
+
+.text-center {
+  text-align: center;
+}

package/dist/global.d.ts

@@ -1,5 +1,4 @@
-declare var __QUAFF_VERSION__: string;
-declare var __PLATFORM__:
+declare let __PLATFORM__:
   | "aix"
   | "darwin"
   | "freebsd"

package/dist/helpers/clickOutside.d.ts

@@ -1,6 +1,6 @@
-export declare function clickOutside(node: HTMLElement, onEventFunction: () => any): {
+export declare function clickOutside(node: HTMLElement, onEventFunction: () => unknown): {
     destroy(): void;
 };
-export declare function clickOutsideDialog(node: HTMLDialogElement, onEventFunction: () => any): {
+export declare function clickOutsideDialog(node: HTMLDialogElement, onEventFunction: () => unknown): {
     destroy(): void;
 };

package/dist/helpers/clickOutside.js

@@ -1,6 +1,6 @@
 export function clickOutside(node, onEventFunction) {
     const handleClick = (event) => {
-        let path = event.composedPath();
+        const path = event.composedPath();
         if (!path.includes(node)) {
             onEventFunction();
         }
@@ -14,10 +14,11 @@ export function clickOutside(node, onEventFunction) {
 }
 export function clickOutsideDialog(node, onEventFunction) {
     const handleClick = (event) => {
-        if (!node.open)
+        if (!node.open) {
             return;
-        let rect = node.getBoundingClientRect();
-        let isInDialog = rect.top <= event.clientY &&
+        }
+        const rect = node.getBoundingClientRect();
+        const isInDialog = rect.top <= event.clientY &&
             event.clientY <= rect.top + rect.height &&
             rect.left <= event.clientX &&
             event.clientX <= rect.left + rect.width;

package/dist/helpers/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./clickOutside";
-export * from "./activationHandler";
+export * from "./ripple";

package/dist/helpers/index.js

@@ -1,2 +1,2 @@
 export * from "./clickOutside";
-export * from "./activationHandler";
+export * from "./ripple";

package/dist/helpers/ripple.d.ts

@@ -0,0 +1,11 @@
+interface RippleOptions {
+    center?: boolean;
+    color?: string;
+    duration?: number;
+    disabled?: boolean;
+}
+export declare function ripple(el: HTMLElement, options?: RippleOptions): {
+    destroy(): void;
+    update(newOptions: RippleOptions): void;
+};
+export {};

package/dist/helpers/ripple.js

@@ -0,0 +1,90 @@
+const triggerEvents = ["pointerdown", "touchstart", "keydown"];
+const cancelEvents = ["mouseleave", "dragleave", "touchmove", "touchcancel", "pointerup", "keyup"];
+export function ripple(el, options = {}) {
+    const rippleContainer = document.createElement("div");
+    addClasses();
+    setOptions(options);
+    function addClasses(center) {
+        const shouldBeCentered = center || options.center;
+        if (!rippleContainer.classList.contains("q-ripple--effect")) {
+            rippleContainer.classList.add("q-ripple--effect");
+        }
+        if (!shouldBeCentered && rippleContainer.classList.contains("q-ripple--center")) {
+            rippleContainer.classList.remove("q-ripple--center");
+        }
+        if (shouldBeCentered) {
+            rippleContainer.classList.add("q-ripple--center");
+        }
+    }
+    function setOptions(options) {
+        if (options.disabled || el.hasAttribute("aria-disabled")) {
+            rippleContainer.remove();
+        }
+        else {
+            el.appendChild(rippleContainer);
+        }
+        if (options.duration && options.duration < 0) {
+            options.duration = undefined;
+        }
+        if (options.color) {
+            rippleContainer.style.setProperty("--ripple-color", options.color);
+        }
+        if (options.duration) {
+            rippleContainer.style.setProperty("--ripple-duration", `${options.duration}ms`);
+        }
+    }
+    function createRipple(e, center) {
+        if (options.disabled || el.hasAttribute("aria-disabled")) {
+            return;
+        }
+        if (e instanceof KeyboardEvent) {
+            if (!["Enter", "Space"].includes(e.code) || e.repeat) {
+                return;
+            }
+            e.preventDefault();
+            const click = new PointerEvent("pointerdown");
+            createRipple(click, true);
+            return;
+        }
+        addClasses(center);
+        const rect = el.getBoundingClientRect();
+        const clientX = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientX
+            : e.clientX;
+        const clientY = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientY
+            : e.clientY;
+        const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
+        const y = clientY - rect.top > el.offsetHeight / 2 ? 0 : el.offsetHeight;
+        const radius = Math.hypot(x - (clientX - rect.left), y - (clientY - rect.top));
+        const ripple = document.createElement("div");
+        ripple.classList.add("q-ripple");
+        ripple.style.left = `${clientX - rect.left - radius}px`;
+        ripple.style.top = `${clientY - rect.top - radius}px`;
+        ripple.style.width = ripple.style.height = `${radius * 2}px`;
+        rippleContainer.appendChild(ripple);
+        function removeRipple() {
+            if (ripple === null) {
+                return;
+            }
+            ripple.style.opacity = "0";
+            setTimeout(() => {
+                ripple.remove();
+            }, options.duration || 1000);
+            cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
+        }
+        cancelEvents.forEach((event) => el.addEventListener(event, removeRipple));
+    }
+    triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === "touchstart" }));
+    return {
+        destroy() {
+            triggerEvents.forEach((event) => {
+                el.removeEventListener(event, createRipple);
+            });
+        },
+        update(newOptions) {
+            options = newOptions;
+            setOptions(newOptions);
+        },
+    };
+}

package/dist/helpers/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "0.1.0-prealpha20";
+export default _default;

package/dist/helpers/version.js

@@ -0,0 +1 @@
+export default "0.1.0-prealpha20";

package/dist/index.d.ts

@@ -1 +1,3 @@
-export * from "$components";
+import Quaff from "./classes/Quaff.svelte.js";
+export * from "./components";
+export { Quaff };

package/dist/index.js

@@ -1,2 +1,4 @@
+import Quaff from "./classes/Quaff.svelte.js";
 // Reexport your entry components here
-export * from "$components";
+export * from "./components";
+export { Quaff };

package/dist/stores/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/utils/clipboard.d.ts

@@ -1 +1 @@
-declare function copy(text: string): Promise<void>;
+export declare function copy(text: string): Promise<void>;

package/dist/utils/clipboard.js

@@ -1,8 +1,7 @@
-"use strict";
-async function copy(text) {
+export async function copy(text) {
     if (navigator.clipboard.write) {
-        let blob = new Blob([text], { type: "text/plain" });
-        let item = new ClipboardItem({ "text/plain": blob });
+        const blob = new Blob([text], { type: "text/plain" });
+        const item = new ClipboardItem({ "text/plain": blob });
         await navigator.clipboard.write([item]);
     }
     else {

package/dist/utils/colors.d.ts

@@ -1,3 +1,74 @@
+export type Mode = "light" | "dark";
+export type HexValue = `#${string}`;
+type BaseColorNames = [
+    "error",
+    "error-container",
+    "neutral",
+    "neutral-container",
+    "neutral-variant",
+    "neutral-variant-container",
+    "on-error",
+    "on-error-container",
+    "on-neutral",
+    "on-neutral-container",
+    "on-neutral-variant",
+    "on-neutral-variant-container",
+    "on-primary",
+    "on-primary-container",
+    "on-secondary",
+    "on-secondary-container",
+    "on-tertiary",
+    "on-tertiary-container",
+    "primary",
+    "primary-container",
+    "secondary",
+    "secondary-container",
+    "tertiary",
+    "tertiary-container"
+];
+type BaseColors = Record<BaseColorNames[number], HexValue>;
+type ToneColorNames = [
+    "background",
+    "inverse-on-surface",
+    "inverse-primary",
+    "inverse-surface",
+    "on-background",
+    "on-primary-fixed",
+    "on-primary-fixed-variant",
+    "on-secondary-fixed",
+    "on-secondary-fixed-variant",
+    "on-surface",
+    "on-surface-variant",
+    "on-tertiary-fixed",
+    "on-tertiary-fixed-variant",
+    "outline",
+    "outline-variant",
+    "primary-fixed",
+    "primary-fixed-dim",
+    "scrim",
+    "secondary-fixed",
+    "secondary-fixed-dim",
+    "shadow",
+    "surface",
+    "surface-bright",
+    "surface-container",
+    "surface-container-high",
+    "surface-container-highest",
+    "surface-container-low",
+    "surface-container-lowest",
+    "surface-dim",
+    "surface-tint",
+    "surface-variant",
+    "tertiary-fixed",
+    "tertiary-fixed-dim"
+];
+type ToneColors = Record<ToneColorNames[number], HexValue>;
+export type QuaffColorNames = [...BaseColorNames, ...ToneColorNames];
+export type QuaffColors = BaseColors & ToneColors;
+export declare function generateColors(from: string): {
+    light: QuaffColors;
+    dark: QuaffColors;
+};
 declare class QColors {
     private static hexRegex;
     private static isValidRgb;