npm - @code-coaching/vuetiful - Versions diffs - 0.23.2 → 0.24.0 - Mend

@code-coaching/vuetiful 0.23.2 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/types/components/atoms/VLightSwitch.vue.d.ts +5 -1
package/dist/types/services/dark-mode.service.d.ts +13 -13
package/dist/types/services/index.d.ts +2 -2
package/dist/types/utils/colors/colors.service.d.ts +69 -0
package/dist/types/utils/index.d.ts +5 -1
package/dist/types/utils/theme/theme.service.d.ts +8 -23
package/dist/types/utils/theme/themes.d.ts +35 -0
package/dist/vuetiful.es.mjs +447 -146
package/dist/vuetiful.umd.js +71 -16
package/package.json +1 -1
package/src/components/atoms/VLightSwitch.test.ts +61 -12
package/src/components/atoms/VLightSwitch.vue +13 -19
package/src/components/molecules/VTabs/VTab.test.ts +21 -0
package/src/directives/clipboard.test.ts +2 -2
package/src/services/dark-mode.service.test.ts +58 -210
package/src/services/dark-mode.service.ts +32 -51
package/src/services/drawer.service.test.ts +4 -4
package/src/services/highlight.service.test.ts +3 -3
package/src/services/index.ts +2 -2
package/src/services/rail.service.test.ts +2 -2
package/src/utils/colors/colors.service.ts +293 -0
package/src/utils/index.ts +5 -1
package/src/utils/platform/platform.service.test.ts +3 -3
package/src/utils/theme/callback.test.ts +9 -5
package/src/utils/theme/remove.test.ts +7 -5
package/src/utils/theme/theme-switcher.vue +34 -37
package/src/utils/theme/theme.service.test.ts +160 -58
package/src/utils/theme/theme.service.ts +139 -78
package/src/utils/theme/themes.ts +122 -0
package/dist/types/components/index.test.d.ts +0 -1
package/dist/types/index.test.d.ts +0 -1
package/dist/types/utils/index.test.d.ts +0 -1
package/src/components/index.test.ts +0 -10
package/src/index.test.ts +0 -26
package/src/utils/index.test.ts +0 -11

package/dist/vuetiful.es.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, readonly, reactive, renderSlot, createBlock, resolveDynamicComponent, withCtx, onMounted, Fragment, cloneVNode, h as h$1, inject, provide, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, toRefs, createVNode, Transition, renderList, createTextVNode, pushScopeId, popScopeId, isRef, withDirectives, vShow, useAttrs } from "vue";
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, readonly, reactive, renderSlot, createBlock, resolveDynamicComponent, withCtx, Fragment, cloneVNode, h as h$1, inject, provide, onMounted, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, toRefs, createVNode, Transition, renderList, createTextVNode, pushScopeId, popScopeId, isRef, withDirectives, vShow, useAttrs } from "vue";
 const Variant = {
   Filled: "filled",
   FilledPrimary: "filled-primary",
@@ -144,65 +144,49 @@ const usePlatform = () => {
 };
 const { isBrowser: isBrowser$1 } = usePlatform();
 const MODE = {
-  LIGHT: true,
-  DARK: false
+  LIGHT: "light",
+  DARK: "dark"
 };
-const modeOsPrefers = ref(MODE.DARK);
-const currentMode = ref(MODE.DARK);
-const modeUserPrefers = ref(void 0);
-const isDark = computed(() => currentMode.value === MODE.DARK);
+const defaultMode = MODE.DARK;
+const chosenMode = ref(defaultMode);
+const isDark = computed(() => chosenMode.value === MODE.DARK);
 const useDarkMode = () => {
-  const getModeOsPrefers = () => {
-    let prefersLightMode = false;
-    if (isBrowser$1)
-      prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
-    setModeOsPrefers(prefersLightMode);
-    return prefersLightMode;
-  };
-  const getModeUserPrefers = () => {
-    if (isBrowser$1) {
-      const mode = localStorage.getItem("modeUserPrefers");
-      if (mode !== null)
-        modeUserPrefers.value = mode === "true";
+  const getModeFromCookie = (cookies) => {
+    const cookie = cookies.split(";").find((c2) => c2.trim().startsWith("vuetiful-mode="));
+    if (cookie) {
+      const value = cookie.split("=")[1];
+      return value;
     }
-    return modeUserPrefers.value;
+    return defaultMode;
   };
-  const getModeAutoPrefers = () => {
-    const os = getModeOsPrefers();
-    const user = getModeUserPrefers();
-    if (user === void 0)
-      return os;
-    return user;
+  const applyModeSSR = (html, mode) => {
+    if (mode === MODE.DARK)
+      html = html.replace("<html", '<html class="dark"');
+    return html;
   };
-  const setModeOsPrefers = (value) => {
-    modeOsPrefers.value = value;
-    if (isBrowser$1) {
-      localStorage.setItem("modeOsPrefers", value.toString());
-    }
-  };
-  const setModeUserPrefers = (value) => {
-    modeUserPrefers.value = value;
+  const initializeMode = () => {
     if (isBrowser$1) {
-      localStorage.setItem("modeUserPrefers", value.toString());
+      const mode = getModeFromCookie(document.cookie);
+      applyMode(mode);
     }
   };
-  const setModeCurrent = (value) => {
+  const applyMode = (value) => {
     const elemHtmlClasses = document.documentElement.classList;
     const classDark = "dark";
     value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-    currentMode.value = value;
-  };
-  const initializeMode = () => {
-    const mode = getModeAutoPrefers();
-    setModeCurrent(mode);
+    if (isBrowser$1) {
+      document.cookie = `vuetiful-mode=${value};path=/;max-age=31536000;SameSite=Lax`;
+    }
+    chosenMode.value = value;
   };
   const autoModeWatcher = () => {
     const mql = window.matchMedia("(prefers-color-scheme: light)");
     const setMode = (value) => {
       const elemHtmlClasses = document.documentElement.classList;
       const classDark = `dark`;
-      value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-      setModeCurrent(value);
+      const mode = value ? MODE.LIGHT : MODE.DARK;
+      mode === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+      applyMode(mode);
     };
     setMode(mql.matches);
     mql.onchange = () => {
@@ -210,17 +194,13 @@ const useDarkMode = () => {
     };
   };
   return {
-    modeOsPrefers: readonly(modeOsPrefers),
-    modeUserPrefers: readonly(modeUserPrefers),
-    currentMode: readonly(currentMode),
+    chosenMode,
     isDark: readonly(isDark),
-    getModeOsPrefers,
-    getModeUserPrefers,
-    getModeAutoPrefers,
-    setModeUserPrefers,
-    setModeCurrent,
-    autoModeWatcher,
     initializeMode,
+    applyMode,
+    autoModeWatcher,
+    applyModeSSR,
+    getModeFromCookie,
     MODE
   };
 };
@@ -46824,10 +46804,7 @@ const _sfc_main$u = defineComponent({
     }
   },
   setup(props, { attrs }) {
-    const { initializeMode, setModeCurrent, setModeUserPrefers, currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
-    onMounted(() => {
-      initializeMode();
-    });
+    const { applyMode, chosenMode: chosenMode2, MODE: MODE2 } = useDarkMode();
     const cTransition = `transition-all duration-[200ms]`;
     const cTrack = "cursor-pointer";
     const cThumb = "aspect-square scale-[0.8] flex justify-center items-center";
@@ -46837,9 +46814,8 @@ const _sfc_main$u = defineComponent({
       moon: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
     };
     const onToggleHandler = () => {
-      const toggle = !currentMode2.value;
-      setModeUserPrefers(toggle);
-      setModeCurrent(toggle);
+      const toggle = chosenMode2.value === MODE2.LIGHT ? MODE2.DARK : MODE2.LIGHT;
+      applyMode(toggle);
     };
     const onKeyDown = (event) => {
       if (["Enter", "Space"].includes(event.code)) {
@@ -46847,11 +46823,11 @@ const _sfc_main$u = defineComponent({
         event.currentTarget.click();
       }
     };
-    const trackBg = computed(() => currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark);
-    const thumbBg = computed(() => currentMode2.value === MODE2.LIGHT ? props.bgDark : props.bgLight);
-    const thumbPosition = computed(() => currentMode2.value === MODE2.LIGHT ? "translate-x-[100%]" : "");
+    const trackBg = computed(() => chosenMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark);
+    const thumbBg = computed(() => chosenMode2.value === MODE2.LIGHT ? props.bgDark : props.bgLight);
+    const thumbPosition = computed(() => chosenMode2.value === MODE2.LIGHT ? "translate-x-[100%]" : "");
     const iconFill = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.textLight : props.textDark;
+      return chosenMode2.value === MODE2.LIGHT ? props.textLight : props.textDark;
     });
     const classesTrack = computed(() => {
       var _a;
@@ -46868,8 +46844,9 @@ const _sfc_main$u = defineComponent({
       svgPath,
       onToggleHandler,
       onKeyDown,
-      currentMode: currentMode2,
-      iconFill
+      chosenMode: chosenMode2,
+      iconFill,
+      MODE: MODE2
     };
   }
 });
@@ -46880,12 +46857,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onToggleHandler && _ctx.onToggleHandler(...args)),
     onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args)),
-    "on:keyup": "",
-    "on:keypress": "",
     role: "switch",
     "aria-label": "Light Switch",
-    "aria-checked": _ctx.currentMode,
-    title: `Toggle ${_ctx.currentMode === false ? "Dark" : "Light"} Mode`,
+    "aria-checked": _ctx.chosenMode === _ctx.MODE.LIGHT,
+    title: `Toggle ${_ctx.chosenMode === _ctx.MODE.DARK ? "Dark" : "Light"} Mode`,
     tabindex: "0"
   }, [
     createElementVNode("div", {
@@ -46898,7 +46873,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, [
         createElementVNode("path", {
           fill: "currentColor",
-          d: _ctx.currentMode ? _ctx.svgPath.sun : _ctx.svgPath.moon
+          d: _ctx.chosenMode === _ctx.MODE.LIGHT ? _ctx.svgPath.sun : _ctx.svgPath.moon
         }, null, 8, _hoisted_2$6)
       ], 2))
     ], 2)
@@ -49852,6 +49827,198 @@ var components = /* @__PURE__ */ Object.freeze({
 });
 var main = "";
 var tailwind = "";
+const semanticNames = ["primary", "secondary", "tertiary", "success", "warning", "error", "surface"];
+const useColors = () => {
+  function hexToRgb(hex) {
+    const sanitizedHex = hex.replaceAll("##", "#");
+    const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
+    if (!colorParts)
+      return null;
+    const [, r2, g2, b2] = colorParts;
+    return {
+      r: parseInt(r2, 16),
+      g: parseInt(g2, 16),
+      b: parseInt(b2, 16)
+    };
+  }
+  function hexToTailwindRgbString(hex) {
+    const sanitizedHex = hex.replaceAll("##", "#");
+    const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
+    if (!colorParts)
+      return "(invalid)";
+    const [, r2, g2, b2] = colorParts;
+    return `${parseInt(r2, 16)} ${parseInt(g2, 16)} ${parseInt(b2, 16)}`;
+  }
+  function rgbToHex(r2, g2, b2) {
+    const toHex = (c2) => `0${c2.toString(16)}`.slice(-2);
+    return `#${toHex(r2)}${toHex(g2)}${toHex(b2)}`;
+  }
+  function generateA11yOnColor(hex) {
+    const black = calculateRatio(hex, "#000000");
+    const white = calculateRatio(hex, "#FFFFFF");
+    return black < white ? "0 0 0" : "255 255 255";
+  }
+  function lighten(hex, intensity) {
+    const color = hexToRgb(`#${hex}`);
+    if (!color)
+      return "";
+    const r2 = Math.round(color.r + (255 - color.r) * intensity);
+    const g2 = Math.round(color.g + (255 - color.g) * intensity);
+    const b2 = Math.round(color.b + (255 - color.b) * intensity);
+    return rgbToHex(r2, g2, b2);
+  }
+  function darken(hex, intensity) {
+    const color = hexToRgb(hex);
+    if (!color)
+      return "";
+    const r2 = Math.round(color.r * intensity);
+    const g2 = Math.round(color.g * intensity);
+    const b2 = Math.round(color.b * intensity);
+    return rgbToHex(r2, g2, b2);
+  }
+  function generatePalette2(baseColor) {
+    const hexValidation = new RegExp(/^#[0-9a-f]{6}$/i);
+    if (!hexValidation.test(baseColor))
+      baseColor = "#CCCCCC";
+    const hex500 = `#${baseColor}`.replace("##", "#");
+    const response = {
+      500: { hex: hex500, rgb: hexToTailwindRgbString(hex500), on: generateA11yOnColor(hex500) }
+    };
+    const intensityMap = {
+      50: 0.85,
+      100: 0.8,
+      200: 0.75,
+      300: 0.6,
+      400: 0.3,
+      600: 0.9,
+      700: 0.75,
+      800: 0.6,
+      900: 0.49
+    };
+    [50, 100, 200, 300, 400].forEach((level) => {
+      const hex = lighten(baseColor, intensityMap[level]);
+      response[level] = { hex, rgb: hexToTailwindRgbString(hex), on: generateA11yOnColor(hex) };
+    });
+    [600, 700, 800, 900].forEach((level) => {
+      const hex = darken(baseColor, intensityMap[level]);
+      response[level] = { hex, rgb: hexToTailwindRgbString(hex), on: generateA11yOnColor(hex) };
+    });
+    return response;
+  }
+  const contrastLevels = {
+    small: {
+      AA: 1 / 4.5,
+      AAA: 1 / 7
+    },
+    large: {
+      AA: 1 / 3,
+      AAA: 1 / 4.5
+    }
+  };
+  function getLuminance(r2, g2, b2) {
+    const { _r, _g, _b } = typeof r2 === "object" ? { _r: r2.r, _g: r2.g, _b: r2.b } : { _r: r2, _g: g2, _b: b2 };
+    if (_r === void 0 || _g === void 0 || _b === void 0)
+      throw new Error("Invalid RGB value!");
+    const a2 = [_r, _g, _b].map(function(v2) {
+      v2 /= 255;
+      return v2 <= 0.03928 ? v2 / 12.92 : Math.pow((v2 + 0.055) / 1.055, 2.4);
+    });
+    return a2[0] * 0.2126 + a2[1] * 0.7152 + a2[2] * 0.0722;
+  }
+  function destringRgb(rgbString) {
+    const rgb = rgbString.match(/(\d+),?\s*(\d+),?\s*(\d+)/);
+    if (!rgb)
+      throw new Error("Invalid RGB string!");
+    return { r: parseInt(rgb[1], 10), g: parseInt(rgb[2], 10), b: parseInt(rgb[3], 10) };
+  }
+  function handleStringColor(colorString, returnType = "rgb") {
+    if (colorString.includes("--")) {
+      colorString = colorString.replace(/var\(|\)/g, "");
+      const cssVarHydrated = getComputedStyle(document.documentElement).getPropertyValue(colorString).trim();
+      return handleStringColor(cssVarHydrated, returnType);
+    }
+    if (colorString.includes(" ")) {
+      const rgb = destringRgb(colorString);
+      return returnType === "hex" ? rgbToHex(rgb.r, rgb.g, rgb.b) : rgb;
+    }
+    if (colorString.includes("#")) {
+      const rgb = hexToRgb(colorString);
+      if (!rgb)
+        return "(invalid)";
+      return returnType === "hex" ? colorString : rgb;
+    }
+    return colorString;
+  }
+  function calculateRatio(luminance1, luminance2) {
+    const lum1 = typeof luminance1 === "string" ? getLuminance(handleStringColor(luminance1)) : luminance1;
+    const lum2 = typeof luminance2 === "string" ? getLuminance(handleStringColor(luminance2)) : luminance2;
+    if (lum1 === void 0 || lum2 === void 0)
+      throw new Error("Luminance is undefined!");
+    return lum1 > lum2 ? (lum2 + 0.05) / (lum1 + 0.05) : (lum1 + 0.05) / (lum2 + 0.05);
+  }
+  function textPasses(textColor, backgroundColor, size, level) {
+    const ratio = calculateRatio(textColor, backgroundColor);
+    return ratio <= contrastLevels[size][level];
+  }
+  function hexValueIsValid(textColor) {
+    return /^#[0-9A-F]{6}$/i.test(textColor);
+  }
+  function getPassReport(textColor, backgroundColor) {
+    const _textColor = handleStringColor(textColor, "hex");
+    const _backgroundColor = handleStringColor(backgroundColor, "hex");
+    const contrast = calculateRatio(_textColor, _backgroundColor);
+    const smallAA = textPasses(_textColor, _backgroundColor, "small", "AA");
+    const smallAAA = textPasses(_textColor, _backgroundColor, "small", "AAA");
+    const largeAA = textPasses(_textColor, _backgroundColor, "large", "AA");
+    const largeAAA = textPasses(_textColor, _backgroundColor, "large", "AAA");
+    const fails = !smallAA && !smallAAA && !largeAA && !largeAAA;
+    const AAAEmoji = '<i class="fa-solid fa-heart"></i>';
+    const AAEmoji = '<i class="fa-solid fa-star"></i>';
+    const largeAAEmoji = '<i class="fa-solid fa-star-half-stroke"></i>';
+    const failEmoji = '<i class="fa-solid fa-triangle-exclamation"></i>';
+    const report = {
+      emoji: smallAAA ? AAAEmoji : smallAA ? AAEmoji : largeAA ? largeAAEmoji : failEmoji,
+      note: `${_textColor} and ${_backgroundColor} ` + (smallAAA ? "has great contrast!" : smallAA ? "is satisfactory for larger text" : largeAA ? "has poor contrast" : "fail contrast guidelines")
+    };
+    return {
+      textColor: _textColor,
+      backgroundColor: _backgroundColor,
+      contrast,
+      report,
+      smallAA,
+      smallAAA,
+      largeAA,
+      largeAAA,
+      fails
+    };
+  }
+  const hexValuesAreValid2 = (colors) => {
+    let valid = true;
+    colors == null ? void 0 : colors.forEach((color) => {
+      valid = valid && hexValueIsValid(color.hex);
+    });
+    return valid;
+  };
+  return {
+    hexToRgb,
+    hexToTailwindRgbString,
+    rgbToHex,
+    generateA11yOnColor,
+    lighten,
+    darken,
+    generatePalette: generatePalette2,
+    contrastLevels,
+    getLuminance,
+    destringRgb,
+    handleStringColor,
+    calculateRatio,
+    textPasses,
+    hexValueIsValid,
+    getPassReport,
+    hexValuesAreValid: hexValuesAreValid2,
+    semanticNames
+  };
+};
 const _hoisted_1 = { class: "vuetiful-theme-switcher" };
 const _hoisted_2 = { class: "flex items-center justify-between" };
 const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "text-lg" }, "Mode", -1);
@@ -49888,11 +50055,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
   },
   setup(__props) {
-    const { initializeTheme, loadTheme, themes: themes2, chosenTheme: chosenTheme2 } = useTheme();
+    const { applyTheme, themes: themes2, chosenTheme: chosenTheme2 } = useTheme();
     const showPopup = ref(false);
-    onMounted(() => {
-      initializeTheme();
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(unref(_sfc_main$w), {
@@ -49917,9 +50081,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(themes2), (theme, index2) => {
               return openBlock(), createBlock(unref(_sfc_main$w), {
-                class: normalizeClass(["vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer", `${__props.classListItem} ${unref(chosenTheme2) === theme.name ? "variant-filled-surface" : ""}`]),
+                class: normalizeClass(["vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer", `${__props.classListItem} ${unref(chosenTheme2).name === theme.name ? "variant-filled-surface" : ""}`]),
                 key: index2,
-                onClick: ($event) => unref(loadTheme)(theme.name)
+                onClick: ($event) => unref(applyTheme)(theme)
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(theme.name), 1)
@@ -49933,92 +50097,229 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const themes = [
+  {
+    name: "vuetiful",
+    gradients: {
+      light: "radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%), radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%), radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%)",
+      dark: "radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%), radial-gradient(at 1% 0%, hsla(340,100%,76%,0.15) 0px, transparent 50%), radial-gradient(at 20% 100%, hsla(241,100%,70%,0.30) 0px, transparent 50%)"
+    },
+    colors: {
+      primary: { key: "primary", label: "Primary", hex: "#EC4899", rgb: "0 0 0", on: "0 0 0" },
+      secondary: { key: "secondary", label: "Secondary", hex: "#06B6D4", rgb: "0 0 0", on: "0 0 0" },
+      tertiary: { key: "tertiary", label: "Tertiary", hex: "#14B8A6", rgb: "0 0 0", on: "0 0 0" },
+      success: { key: "success", label: "Success", hex: "#84CC16", rgb: "0 0 0", on: "0 0 0" },
+      warning: { key: "warning", label: "Warning", hex: "#EAB308", rgb: "0 0 0", on: "0 0 0" },
+      error: { key: "error", label: "Error", hex: "#EF4444", rgb: "0 0 0", on: "255 255 255" },
+      surface: { key: "surface", label: "Surface", hex: "#6366F1", rgb: "0 0 0", on: "255 255 255" }
+    },
+    fonts: {
+      base: "system",
+      customBase: "Quicksand",
+      baseImports: '@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");',
+      headings: "system",
+      customHeadings: "Quicksand",
+      headingImports: ""
+    },
+    textColorLight: "0 0 0",
+    textColorDark: "255 255 255",
+    roundedBase: "12px",
+    roundedContainer: "12px",
+    borderBase: "0px",
+    customCss: `
+  [data-theme="vuetiful"] h1,
+  [data-theme="vuetiful"] h2,
+  [data-theme="vuetiful"] h3,
+  [data-theme="vuetiful"] h4,
+  [data-theme="vuetiful"] h5,
+  [data-theme="vuetiful"] h6,
+  [data-theme="vuetiful"] a,
+  [data-theme="vuetiful"] button {
+    font-weight: bold;
+  }`
+  },
+  {
+    name: "rocket",
+    gradients: {
+      light: "radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%), radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%)",
+      dark: "radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%), radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%)"
+    },
+    colors: {
+      primary: { key: "primary", label: "Primary", hex: "#06b6d4", rgb: "0 0 0", on: "0 0 0" },
+      secondary: { key: "secondary", label: "Secondary", hex: "#3b82f6", rgb: "0 0 0", on: "255 255 255" },
+      tertiary: { key: "tertiary", label: "Tertiary", hex: "#3b82f6", rgb: "0 0 0", on: "255 255 255" },
+      success: { key: "success", label: "Success", hex: "#4ccb15", rgb: "0 0 0", on: "0 0 0" },
+      warning: { key: "warning", label: "Warning", hex: "#f4c12a", rgb: "0 0 0", on: "0 0 0" },
+      error: { key: "error", label: "Error", hex: "#b52c55", rgb: "0 0 0", on: "255 255 255" },
+      surface: { key: "surface", label: "Surface", hex: "#64748b", rgb: "0 0 0", on: "255 255 255" }
+    },
+    fonts: {
+      base: "system",
+      customBase: "Roboto",
+      baseImports: '@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");',
+      headings: "system",
+      customHeadings: "Space Grotesk",
+      headingImports: '@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");'
+    },
+    textColorLight: "0 0 0",
+    textColorDark: "255 255 255",
+    roundedBase: "0px",
+    roundedContainer: "0px",
+    borderBase: "0px",
+    customCss: `
+  [data-theme='rocket'] h1,
+  [data-theme='rocket'] h2,
+  [data-theme='rocket'] h3,
+  [data-theme='rocket'] h4,
+  [data-theme='rocket'] h5,
+  [data-theme='rocket'] h6 {
+    font-weight: bold;
+  }`
+  }
+];
 const { isBrowser } = usePlatform();
-const THEMES = {
-  VUETIFUL: "vuetiful",
-  ROCKET: "rocket",
-  SAHARA: "sahara",
-  SEAFOAM: "seafoam",
-  SEASONAL: "seasonal",
-  SKELETON: "skeleton",
-  VINTAGE: "vintage"
-};
-const builtInUrl = (name) => {
-  return `https://code-coaching.dev/vuetiful-themes/theme-${name}.css`;
+const chosenTheme = ref(themes[0]);
+const { generatePalette, hexValuesAreValid } = useColors();
+const generateColorCSS = (theme) => {
+  let newCSS = "";
+  const newPalette = {};
+  Object.values(theme.colors).forEach((color) => {
+    const colorKey = color.key;
+    newPalette[color.key] = generatePalette(color.hex);
+    newCSS += "\n	";
+    newCSS += `/* ${colorKey} | ${newPalette[colorKey][500].hex} */
+	`;
+    for (let [k2, v2] of Object.entries(newPalette[colorKey])) {
+      newCSS += `--color-${colorKey}-${k2}: ${v2.rgb}; /* \u2B05 ${v2.hex} */
+	`;
+    }
+  });
+  return newCSS;
 };
-const builtInThemes = [
-  { name: THEMES.VUETIFUL, url: builtInUrl(`${THEMES.VUETIFUL}-0.0.1`) },
-  { name: THEMES.ROCKET, url: builtInUrl(`${THEMES.ROCKET}`) },
-  { name: THEMES.SAHARA, url: builtInUrl(`${THEMES.SAHARA}`) },
-  { name: THEMES.SEAFOAM, url: builtInUrl(`${THEMES.SEAFOAM}`) },
-  { name: THEMES.SEASONAL, url: builtInUrl(`${THEMES.SEASONAL}`) },
-  { name: THEMES.SKELETON, url: builtInUrl(`${THEMES.SKELETON}`) },
-  { name: THEMES.VINTAGE, url: builtInUrl(`${THEMES.VINTAGE}`) }
-];
-const themes = ref([...builtInThemes]);
-const defaultTheme = THEMES.VUETIFUL;
-const chosenTheme = ref(defaultTheme);
 const useTheme = () => {
-  const saveThemeToStorage = (name) => {
-    const theme = themes.value.find((t2) => t2.name === name);
-    if (!theme)
-      return;
-    if (isBrowser) {
-      localStorage.setItem("vuetiful-theme", theme.name);
-      document.body.setAttribute("data-theme", theme.name);
-    }
-  };
-  const initializeTheme = (callback) => {
-    if (isBrowser) {
-      const storedTheme = localStorage.getItem("vuetiful-theme");
-      if (storedTheme)
-        loadTheme(storedTheme, callback);
-      else
-        loadTheme(defaultTheme, callback);
+  const changeDataTheme = (name) => document.body.setAttribute("data-theme", name);
+  const getThemeFromCookie = (cookies) => {
+    const themeName = getThemeNameFromCookie(cookies);
+    const theme = themes.find((t2) => t2.name === themeName);
+    if (theme)
+      return theme;
+    return themes[0];
+  };
+  const getThemeNameFromCookie = (cookies) => {
+    const cookie = cookies.split(";").find((c2) => c2.trim().startsWith(`vuetiful-theme=`));
+    const value = cookie == null ? void 0 : cookie.split("=")[1];
+    return value || "";
+  };
+  const applyThemeSSR = (html, theme) => {
+    chosenTheme.value = theme;
+    const css2 = generateCss(theme);
+    html = html.replace("</head>", `<style type="text/css" id="vuetiful-theme">${css2}</style></head>`);
+    html = html.replace("<body", `<body data-theme="${theme.name}"`);
+    return html;
+  };
+  const generateCss = (theme) => {
+    if (hexValuesAreValid(Object.values(theme.colors))) {
+      return `${theme.fonts.baseImports}
+  ${theme.fonts.headingImports}
+  :root {
+      /* =~= Theme Properties =~= */
+      --theme-font-family-base: ${theme.fonts.customBase ? `"${theme.fonts.customBase}", ` : ""}${theme.fonts.base};
+      --theme-font-family-heading: ${theme.fonts.customHeadings ? `"${theme.fonts.customHeadings}", ` : ""}${theme.fonts.headings};
+      --theme-font-color-base: ${theme.textColorLight};
+      --theme-font-color-dark: ${theme.textColorDark};
+      --theme-rounded-base: ${theme.roundedBase};
+      --theme-rounded-container: ${theme.roundedContainer};
+      --theme-border-base: ${theme.borderBase};
+      /* =~= Theme On-X Colors  =~= */
+      --on-primary: ${theme.colors.primary.on};
+      --on-secondary: ${theme.colors.secondary.on};
+      --on-tertiary: ${theme.colors.tertiary.on};
+      --on-success: ${theme.colors.success.on};
+      --on-warning: ${theme.colors.warning.on};
+      --on-error: ${theme.colors.error.on};
+      --on-surface: ${theme.colors.surface.on};
+      /* =~= Theme Colors  =~= */
+${generateColorCSS(theme)}
+  }
+  ${theme.gradients.light.length ? `[data-theme="${theme.name}"] {
+      background-image:
+          ${theme.gradients.light};
+  }` : ""}
+  ${theme.gradients.dark.length ? `.dark [data-theme="${theme.name}"] {
+      background-image:
+          ${theme.gradients.dark};
+  }` : ""}
+  ${theme.customCss}
+  `;
     }
+    return "";
   };
-  const loadTheme = (themeName, callback) => {
-    let themeToLoad = themes.value.find((t2) => t2.name === themeName);
-    if (!themeToLoad)
-      themeToLoad = themes.value.find((t2) => t2.name === defaultTheme) || themes.value[0];
-    const theme = themeToLoad;
-    chosenTheme.value = theme.name;
-    const existingStyle = document.getElementById("theme");
-    let themeUrl = theme.url;
-    const link = document.createElement("link");
-    link.id = "theme";
-    link.href = themeUrl;
-    link.type = "text/css";
-    link.rel = "stylesheet";
-    link.onload = () => {
+  const applyTheme = (theme, callback) => {
+    const existingStyle = document.getElementById("vuetiful-theme");
+    const themeCss = generateCss(theme);
+    const style = document.createElement("style");
+    style.innerHTML = themeCss;
+    style.id = "vuetiful-theme";
+    style.onload = () => {
       if (existingStyle)
         existingStyle.remove();
-      saveThemeToStorage(theme.name);
       if (callback)
         callback();
     };
     const head = document.querySelector("head");
     if (head)
-      head.appendChild(link);
-  };
-  const registerAllBuiltInThemes = () => {
-    return [...builtInThemes];
+      head.appendChild(style);
+    chosenTheme.value = theme;
+    if (isBrowser) {
+      document.cookie = `vuetiful-theme=${theme.name};path=/;max-age=31536000;SameSite=Lax`;
+      changeDataTheme(theme.name);
+    }
   };
-  const registerTheme = (name, url) => {
-    return { url, name };
+  const initializeTheme = (callback) => {
+    if (isBrowser) {
+      const themeName = getThemeNameFromCookie(document.cookie);
+      if (themeName === "custom") {
+        const storedThemeJson = localStorage.getItem("vuetiful-custom-theme");
+        let storedTheme = null;
+        try {
+          storedTheme = storedThemeJson ? JSON.parse(storedThemeJson) : null;
+          if (storedTheme) {
+            applyTheme(storedTheme, callback);
+            registerTheme(storedTheme);
+          }
+        } catch (e2) {
+          applyTheme(themes[0], callback);
+        }
+      } else {
+        const theme = themes.find((t2) => t2.name === themeName);
+        if (theme) {
+          applyTheme(theme, callback);
+        } else {
+          applyTheme(themes[0], callback);
+        }
+      }
+    }
   };
-  const overwriteThemes = (newThemes) => {
-    themes.value = [...newThemes];
+  const registerTheme = (theme) => {
+    const existingTheme = themes.find((t2) => t2.name === theme.name);
+    if (existingTheme) {
+      const index2 = themes.indexOf(existingTheme);
+      themes[index2] = theme;
+    } else {
+      themes.push(theme);
+    }
   };
   return {
-    themes: readonly(themes),
-    chosenTheme: readonly(chosenTheme),
+    chosenTheme,
+    themes,
+    applyThemeSSR,
+    applyTheme,
+    getThemeFromCookie,
     initializeTheme,
-    loadTheme,
-    saveThemeToStorage,
-    THEMES,
-    overwriteThemes,
-    registerAllBuiltInThemes,
+    changeDataTheme,
     registerTheme
   };
 };
@@ -50033,4 +50334,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { _sfc_main as ThemeSwitcher, _sfc_main$8 as VAccordion, VAccordionItem, VAlert, _sfc_main$y as VAvatar, _sfc_main$x as VBadge, _sfc_main$w as VButton, _sfc_main$5 as VCard, _sfc_main$4 as VCardBody, _sfc_main$3 as VCardFooter, _sfc_main$2 as VCardHeader, _sfc_main$v as VChip, _sfc_main$1 as VCodeBlock, _sfc_main$l as VDrawer, VLightSwitch, _sfc_main$d as VListbox, VListboxButton, _sfc_main$c as VListboxItem, _sfc_main$f as VListboxItems, _sfc_main$e as VListboxLabel, VPreview, _sfc_main$t as VRadioDescription, _sfc_main$s as VRadioGroup, _sfc_main$r as VRadioItem, _sfc_main$q as VRadioLabel, _sfc_main$j as VRail, _sfc_main$i as VRailTile, _sfc_main$h as VShell, _sfc_main$p as VSwitch, _sfc_main$o as VSwitchDescription, _sfc_main$n as VSwitchGroup, _sfc_main$m as VSwitchLabel, _sfc_main$b as VTab, _sfc_main$a as VTabPanel, _sfc_main$9 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useSettings, useTheme, clipboard as vClipboard };
+export { _sfc_main as ThemeSwitcher, _sfc_main$8 as VAccordion, VAccordionItem, VAlert, _sfc_main$y as VAvatar, _sfc_main$x as VBadge, _sfc_main$w as VButton, _sfc_main$5 as VCard, _sfc_main$4 as VCardBody, _sfc_main$3 as VCardFooter, _sfc_main$2 as VCardHeader, _sfc_main$v as VChip, _sfc_main$1 as VCodeBlock, _sfc_main$l as VDrawer, VLightSwitch, _sfc_main$d as VListbox, VListboxButton, _sfc_main$c as VListboxItem, _sfc_main$f as VListboxItems, _sfc_main$e as VListboxLabel, VPreview, _sfc_main$t as VRadioDescription, _sfc_main$s as VRadioGroup, _sfc_main$r as VRadioItem, _sfc_main$q as VRadioLabel, _sfc_main$j as VRail, _sfc_main$i as VRailTile, _sfc_main$h as VShell, _sfc_main$p as VSwitch, _sfc_main$o as VSwitchDescription, _sfc_main$n as VSwitchGroup, _sfc_main$m as VSwitchLabel, _sfc_main$b as VTab, _sfc_main$a as VTabPanel, _sfc_main$9 as VTabs, index as default, useColors, useDarkMode, useDrawer, useHighlight, usePlatform, useRail, useSettings, useTheme, clipboard as vClipboard };