@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha14

package/dist/css/theme/colors.module.scss

@@ -1,180 +1,332 @@
+.bg-primary {
+  background-color: var(--primary) !important;
+}
+.text-primary {
+  color: var(--primary) !important;
+}
+.border-primary {
+  border-color: var(--primary) !important;
+}
+.bg-on-primary {
+  background-color: var(--on-primary) !important;
+}
+.text-on-primary {
+  color: var(--on-primary) !important;
+}
+.border-on-primary {
+  border-color: var(--on-primary) !important;
+}
 .primary {
-  background-color: var(--primary);
+  @extend .bg-primary;
+  @extend .text-on-primary
+}
+
+.bg-primary-container {
+  background-color: var(--primary-container) !important;
+}
+.text-primary-container {
+  color: var(--primary-container) !important;
 }
-.primary-text {
-  color: var(--primary);
+.border-primary-container {
+  border-color: var(--primary-container) !important;
 }
-.on-primary {
-  background-color: var(--on-primary);
+.bg-on-primary-container {
+  background-color: var(--on-primary-container) !important;
 }
-.on-primary-text {
-  color: var(--on-primary);
+.text-on-primary-container {
+  color: var(--on-primary-container) !important;
+}
+.border-on-primary-container {
+  border-color: var(--on-primary-container) !important;
 }
 .primary-container {
-  background-color: var(--primary-container);
+  @extend .bg-primary-container;
+  @extend .text-on-primary-container
+}
+
+.bg-secondary {
+  background-color: var(--secondary) !important;
 }
-.primary-container-text {
-  color: var(--primary-container);
+.text-secondary {
+  color: var(--secondary) !important;
 }
-.on-primary-container {
-  background-color: var(--on-primary-container);
+.border-secondary {
+  border-color: var(--secondary) !important;
 }
-.on-primary-container-text {
-  color: var(--on-primary-container);
+.bg-on-secondary {
+  background-color: var(--on-secondary) !important;
+}
+.text-on-secondary {
+  color: var(--on-secondary) !important;
+}
+.border-on-secondary {
+  border-color: var(--on-secondary) !important;
 }
 .secondary {
-  background-color: var(--secondary);
+  @extend .bg-secondary;
+  @extend .text-on-secondary
+}
+
+.bg-secondary-container {
+  background-color: var(--secondary-container) !important;
+}
+.text-secondary-container {
+  color: var(--secondary-container) !important;
+}
+.border-secondary-container {
+  border-color: var(--secondary-container) !important;
 }
-.secondary-text {
-  color: var(--secondary);
+.bg-on-secondary-container {
+  background-color: var(--on-secondary-container) !important;
 }
-.on-secondary {
-  background-color: var(--on-secondary);
+.text-on-secondary-container {
+  color: var(--on-secondary-container) !important;
 }
-.on-secondary-text {
-  color: var(--on-secondary);
+.border-on-secondary-container {
+  border-color: var(--on-secondary-container) !important;
 }
 .secondary-container {
-  background-color: var(--secondary-container);
+  @extend .bg-secondary-container;
+  @extend .text-on-secondary-container
 }
-.secondary-container-text {
-  color: var(--secondary-container);
+
+.bg-tertiary {
+  background-color: var(--tertiary) !important;
 }
-.on-secondary-container {
-  background-color: var(--on-secondary-container);
+.text-tertiary {
+  color: var(--tertiary) !important;
 }
-.on-secondary-container-text {
-  color: var(--on-secondary-container);
+.border-tertiary {
+  border-color: var(--tertiary) !important;
+}
+.bg-on-tertiary {
+  background-color: var(--on-tertiary) !important;
+}
+.text-on-tertiary {
+  color: var(--on-tertiary) !important;
+}
+.border-on-tertiary {
+  border-color: var(--on-tertiary) !important;
 }
 .tertiary {
-  background-color: var(--tertiary);
+  @extend .bg-tertiary;
+  @extend .text-on-tertiary
+}
+
+.bg-tertiary-container {
+  background-color: var(--tertiary-container) !important;
+}
+.text-tertiary-container {
+  color: var(--tertiary-container) !important;
 }
-.tertiary-text {
-  color: var(--tertiary);
+.border-tertiary-container {
+  border-color: var(--tertiary-container) !important;
 }
-.on-tertiary {
-  background-color: var(--on-tertiary);
+.bg-on-tertiary-container {
+  background-color: var(--on-tertiary-container) !important;
 }
-.on-tertiary-text {
-  color: var(--on-tertiary);
+.text-on-tertiary-container {
+  color: var(--on-tertiary-container) !important;
+}
+.border-on-tertiary-container {
+  border-color: var(--on-tertiary-container) !important;
 }
 .tertiary-container {
-  background-color: var(--tertiary-container);
+  @extend .bg-tertiary-container;
+  @extend .text-on-tertiary-container
+}
+
+.bg-error {
+  background-color: var(--error) !important;
+}
+.text-error {
+  color: var(--error) !important;
 }
-.tertiary-container-text {
-  color: var(--tertiary-container);
+.border-error {
+  border-color: var(--error) !important;
 }
-.on-tertiary-container {
-  background-color: var(--on-tertiary-container);
+.bg-on-error {
+  background-color: var(--on-error) !important;
 }
-.on-tertiary-container-text {
-  color: var(--on-tertiary-container);
+.text-on-error {
+  color: var(--on-error) !important;
+}
+.border-on-error {
+  border-color: var(--on-error) !important;
 }
 .error {
-  background-color: var(--error);
+  @extend .bg-error;
+  @extend .text-on-error
+}
+
+.bg-error-container {
+  background-color: var(--error-container) !important;
 }
-.error-text {
-  color: var(--error);
+.text-error-container {
+  color: var(--error-container) !important;
+}
+.border-error-container {
+  border-color: var(--error-container) !important;
+}
+.bg-on-error-container {
+  background-color: var(--on-error-container) !important;
+}
+.text-on-error-container {
+  color: var(--on-error-container) !important;
+}
+.border-on-error-container {
+  border-color: var(--on-error-container) !important;
 }
 .error-container {
-  background-color: var(--error-container);
+  @extend .bg-error-container;
+  @extend .text-on-error-container
+}
+
+.bg-background {
+  background-color: var(--background) !important;
 }
-.error-container-text {
-  color: var(--error-container);
+.text-background {
+  color: var(--background) !important;
 }
-.on-error {
-  background-color: var(--on-error);
+.border-background {
+  border-color: var(--background) !important;
 }
-.on-error-text {
-  color: var(--on-error);
+.bg-on-background {
+  background-color: var(--on-background) !important;
 }
-.on-error-container {
-  background-color: var(--on-error-container);
+.text-on-background {
+  color: var(--on-background) !important;
 }
-.on-error-container-text {
-  color: var(--on-error-container);
+.border-on-background {
+  border-color: var(--on-background) !important;
 }
 .background {
-  background-color: var(--background);
+  @extend .bg-background;
+  @extend .text-on-background
 }
-.background-text {
-  color: var(--background);
+
+.bg-surface {
+  background-color: var(--surface) !important;
 }
-.on-background {
-  background-color: var(--on-background);
+.text-surface {
+  color: var(--surface) !important;
 }
-.on-background-text {
-  color: var(--on-background);
+.border-surface {
+  border-color: var(--surface) !important;
+}
+.bg-on-surface {
+  background-color: var(--on-surface) !important;
+}
+.text-on-surface {
+  color: var(--on-surface) !important;
+}
+.border-on-surface {
+  border-color: var(--on-surface) !important;
 }
 .surface {
-  background-color: var(--surface);
+  @extend .bg-surface;
+  @extend .text-on-surface
+}
+
+.bg-surface-variant {
+  background-color: var(--surface-variant) !important;
+}
+.text-surface-variant {
+  color: var(--surface-variant) !important;
 }
-.surface-text {
-  color: var(--surface);
+.border-surface-variant {
+  border-color: var(--surface-variant) !important;
 }
-.on-surface {
-  background-color: var(--on-surface);
+.bg-on-surface-variant {
+  background-color: var(--on-surface-variant) !important;
 }
-.on-surface-text {
-  color: var(--on-surface);
+.text-on-surface-variant {
+  color: var(--on-surface-variant) !important;
+}
+.border-on-surface-variant {
+  border-color: var(--on-surface-variant) !important;
 }
 .surface-variant {
-  background-color: var(--surface-variant);
+  @extend .bg-surface-variant;
+  @extend .text-on-surface-variant
+}
+
+.bg-outline {
+  background-color: var(--outline) !important;
+}
+.text-outline {
+  color: var(--outline) !important;
+}
+.border-outline {
+  border-color: var(--outline) !important;
+}
+
+.bg-inverse-surface {
+  background-color: var(--inverse-surface) !important;
 }
-.surface-variant-text {
-  color: var(--surface-variant);
+.text-inverse-surface {
+  color: var(--inverse-surface) !important;
 }
-.on-surface-variant {
-  background-color: var(--on-surface-variant);
+.border-inverse-surface {
+  border-color: var(--inverse-surface) !important;
 }
-.on-surface-variant-text {
-  color: var(--on-surface-variant);
+
+.bg-inverse-on-surface {
+  background-color: var(--inverse-on-surface) !important;
 }
-.outline {
-  background-color: var(--outline);
+.text-inverse-on-surface {
+  color: var(--inverse-on-surface) !important;
 }
-.outline-text {
-  color: var(--outline);
+.border-inverse-on-surface {
+  border-color: var(--inverse-on-surface) !important;
 }
-.inverse-on-surface {
-  background-color: var(--inverse-on-surface);
+
+.bg-inverse-primary {
+  background-color: var(--inverse-primary) !important;
 }
-.inverse-on-surface-text {
-  color: var(--inverse-on-surface);
+.text-inverse-primary {
+  color: var(--inverse-primary) !important;
 }
-.inverse-surface {
-  background-color: var(--inverse-surface);
+.border-inverse-primary {
+  border-color: var(--inverse-primary) !important;
 }
-.inverse-surface-text {
-  color: var(--inverse-surface);
+
+.bg-shadow {
+  background-color: var(--shadow) !important;
 }
-.inverse-primary {
-  background-color: var(--inverse-primary);
+.text-shadow {
+  color: var(--shadow) !important;
 }
-.inverse-primary-text {
-  color: var(--inverse-primary);
+.border-shadow {
+  border-color: var(--shadow) !important;
 }
-.shadow {
-  background-color: var(--shadow);
+
+.bg-surface-tint {
+  background-color: var(--surface-tint) !important;
 }
-.shadow-text {
-  color: var(--shadow);
+.text-surface-tint {
+  color: var(--surface-tint) !important;
 }
-.surface-tint {
-  background-color: var(--surface-tint);
+.border-surface-tint {
+  border-color: var(--surface-tint) !important;
 }
-.surface-tint-text {
-  color: var(--surface-tint);
+
+.bg-outline-variant {
+  background-color: var(--outline-variant) !important;
 }
-.outline-variant {
-  background-color: var(--outline-variant);
+.text-outline-variant {
+  color: var(--outline-variant) !important;
 }
-.outline-variant-text {
-  color: var(--outline-variant);
+.border-outline-variant {
+  border-color: var(--outline-variant) !important;
 }
-.scrim {
-  background-color: var(--scrim);
+
+.bg-scrim {
+  background-color: var(--scrim) !important;
 }
-.scrim-text {
-  color: var(--scrim);
+.text-scrim {
+  color: var(--scrim) !important;
 }
+.border-scrim {
+  border-color: var(--scrim) !important;
+}

package/dist/css/theme/palette.scss

@@ -629,19 +629,25 @@ $colors-list: (
     $var-name: "--color-#{$color-name}-#{$i}";
     $text-selector: ".text-#{$color-name}-#{$i}";
     $bg-selector: ".bg-#{$color-name}-#{$i}";
+    $border-selector: ".border-#{$color-name}-#{$i}";
 
     // Color 6 is also the "default" color
     @if $i == 6 {
       $text-selector: ".text-#{$color-name}, #{$text-selector}";
       $bg-selector: ".bg-#{$color-name}, #{$bg-selector}";
+      $border-selector: ".border-#{$color-name}, #{$border-selector}";
     }
 
     #{$text-selector} {
-      color: var(#{$var-name});
+      color: var(#{$var-name}) !important;
     }
 
     #{$bg-selector} {
-      background-color: var(#{$var-name});
+      background-color: var(#{$var-name}) !important;
+    }
+
+    #{$border-selector} {
+      border-color: var(#{$var-name}) !important;
     }
   }
 }

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/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

@@ -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-prealpha11";
+declare const _default: "0.1.0-prealpha14";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "0.1.0-prealpha11";
+export default "0.1.0-prealpha14";

package/dist/stores/QTheme.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-interface IMaterialDynamicColorsThemeColorFormatted {
+interface MaterialColors {
     primary: string;
     "on-primary": string;
     "primary-container": string;
@@ -28,14 +28,15 @@ interface IMaterialDynamicColorsThemeColorFormatted {
     "inverse-primary": string;
     shadow: string;
 }
-interface IMaterialDynamicColorsThemeFormatted {
-    light: IMaterialDynamicColorsThemeColorFormatted;
-    dark: IMaterialDynamicColorsThemeColorFormatted;
+interface MaterialColorsTheme {
+    light: MaterialColors;
+    dark: MaterialColors;
 }
-type CSSDynamicColor = `${keyof IMaterialDynamicColorsThemeColorFormatted}-${keyof IMaterialDynamicColorsThemeFormatted}`;
+type ThemeColorName = `${keyof MaterialColors}-${keyof MaterialColorsTheme}`;
+type ThemeColors = Record<ThemeColorName, string>;
 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;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ThemeColors>, invalidate?: import("svelte/store").Invalidator<ThemeColors> | undefined) => import("svelte/store").Unsubscriber;
     setTheme: (from: string) => Promise<void>;
-    updateThemeColor: (color: CSSDynamicColor, newValue: string) => void;
+    updateThemeColor: (color: ThemeColorName, newValue: string) => void;
 };
 export {};

package/dist/stores/QTheme.js

@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
 import materialDynamicColors from "material-dynamic-colors";
-import { convertCase } from "../utils/string";
-import QColors from "../utils/colors";
+import { convertCase } from "../utils";
+import { QColors } from "../utils";
 function extractColorFromCssVar(cssVar) {
     const rootStyles = getComputedStyle(document.documentElement);
     const varName = cssVar.replace(/var\(([a-z0-9-]+)\)/, "$1");
@@ -27,7 +27,7 @@ async function prepareThemeColors(from) {
 }
 function themeBuilder() {
     const { subscribe, set, update } = writable({});
-    prepareThemeColors("#3499E7").then((res) => set(res));
+    prepareThemeColors("#3499E7").then(set);
     const apply = () => {
         let root = document.documentElement;
         if (root === null)

package/dist/stores/Quaff.js

@@ -2,31 +2,36 @@ import { writable, derived } from "svelte/store";
 import { page } from "$app/stores";
 import version from "../helpers/version";
 function quaff() {
-    const { subscribe, set, update } = writable({
+    const { subscribe, update } = writable({
         version,
         dark: false,
         //TODO lang: {},
         //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/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./QTheme";
+export * from "./Quaff";

package/dist/stores/index.js

@@ -0,0 +1,2 @@
+export * from "./QTheme";
+export * from "./Quaff";

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,5 +1,4 @@
-"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 });