vueless 1.2.15-beta.6 → 1.2.15-beta.8

package/constants.d.ts

@@ -16,6 +16,7 @@ export const COLOR_MODE_KEY: "vl-color-mode";
 export const AUTO_MODE_KEY: "vl-auto-mode";
 export const DARK_MODE_CLASS: "vl-dark";
 export const LIGHT_MODE_CLASS: "vl-light";
+export const THEME_TOKENS: "vueless-theme-tokens";
 export const DEFAULT_PRIMARY_COLOR: "grayscale";
 export const DEFAULT_NEUTRAL_COLOR: "gray";
 export const DEFAULT_TEXT: 14;

package/constants.js

@@ -26,6 +26,7 @@ export const COLOR_MODE_KEY = "vl-color-mode";
 export const AUTO_MODE_KEY = "vl-auto-mode";
 export const DARK_MODE_CLASS = "vl-dark";
 export const LIGHT_MODE_CLASS = "vl-light";
+export const THEME_TOKENS = "vueless-theme-tokens";
 
 /* Vueless defaults */
 export const DEFAULT_PRIMARY_COLOR = GRAYSCALE_COLOR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.15-beta.6",
+  "version": "1.2.15-beta.8",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.other-theme-color-toggle/storybook/stories.ts

@@ -5,6 +5,7 @@ import {
   getSlotsFragment,
   getDocsDescription,
 } from "../../utils/storybook";
+import { getTheme } from "../../utils/theme";
 
 import UThemeColorToggle from "../UThemeColorToggle.vue";
 import UCol from "../../ui.container-col/UCol.vue";
@@ -19,13 +20,15 @@ interface UThemeColorToggleArgs extends Props {
   enum: "size";
 }
 
+const theme = getTheme();
+
 export default {
   id: "100030",
   title: "Other / Theme Color Toggle",
   component: UThemeColorToggle,
   args: {
-    primary: "",
-    neutral: "",
+    primary: theme.primary,
+    neutral: theme.neutral,
     primaryColors: {
       grayscale: "bg-grayscale",
       red: "bg-red-600",

package/utils/theme.ts

@@ -898,14 +898,21 @@ function setCSSVariables(
   `;
 
   if (isCSR) {
-    const firstStyleOrLink = document.querySelector("link[rel='stylesheet'], style");
-    const style = document.createElement("style");
+    const vuelessStyleId = "vueless-theme-tokens";
+    let style = document.getElementById(vuelessStyleId) as HTMLStyleElement | null;
 
-    style.innerHTML = rootVariables;
+    if (!style) {
+      style = document.createElement("style");
+      style.id = vuelessStyleId;
+
+      const firstStyleOrLink = document.querySelector("link[rel='stylesheet'], style");
 
-    firstStyleOrLink && firstStyleOrLink.parentNode
-      ? firstStyleOrLink.parentNode.insertBefore(style, firstStyleOrLink)
-      : document.head.appendChild(style);
+      firstStyleOrLink && firstStyleOrLink.parentNode
+        ? firstStyleOrLink.parentNode.insertBefore(style, firstStyleOrLink)
+        : document.head.appendChild(style);
+    }
+
+    style.innerHTML = rootVariables;
   }
 
   return rootVariables;