@stackframe/stack 2.5.35 → 2.5.37

package/dist/utils/browser-script.js

@@ -66,12 +66,15 @@ var script = () => {
     return false;
   };
   const copyFromVariables = () => {
-    const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue("--background");
+    let backgroundColor = getComputedStyle(document.documentElement).getPropertyValue("--background");
     if (backgroundColor) {
+      if (/^\d+\s\d+%\s\d+(\.\d+)?%$/.test(backgroundColor)) {
+        backgroundColor = `hsl(${backgroundColor})`;
+      }
       const rgb = colorToRGB(backgroundColor);
+      console.log(rgb);
       if (rgb) {
         const luma = rgbToLuma(rgb);
-        console.log("luma", luma);
         if (luma < 128) {
           setTheme("dark");
         } else {
@@ -100,11 +103,11 @@ var script = () => {
       if (copyFromColorScheme()) {
         return;
       }
-      if (copyFromVariables()) {
+      if (mutation.attributeName && attributes.includes(mutation.attributeName) && copyFromAttributes()) {
         return;
       }
-      if (mutation.attributeName && attributes.includes(mutation.attributeName)) {
-        copyFromAttributes();
+      if (copyFromVariables()) {
+        return;
       }
     });
   });
@@ -113,8 +116,8 @@ var script = () => {
     attributeFilter: attributes
   });
   if (!copyFromColorScheme()) {
-    if (!copyFromVariables()) {
-      copyFromAttributes();
+    if (!copyFromAttributes()) {
+      copyFromVariables();
     }
   }
 };

package/dist/utils/browser-script.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/browser-script.tsx"],"sourcesContent":["// Note that this script can not import anything from outside as it will be converted to a string and executed in the browser.\n\nimport { SsrScript } from \"../components/elements/ssr-layout-effect\";\n\n// Also please note that there might be hydration issues with this script, always check the browser console for errors after changing this script.\nconst script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const getColorMode = (value: string) => {\n    if (value.includes('dark')) {\n      return 'dark';\n    }\n    if (value.includes('light')) {\n      return 'light';\n    }\n    return null;\n  };\n\n  const setTheme = (mode: 'dark' | 'light') => {\n    document.documentElement.setAttribute('data-stack-theme', mode);\n  };\n\n  const colorToRGB = (color: string): [number, number, number] | null => {\n    // Create a temporary element to use for color conversion\n    const temp = document.createElement('div');\n    temp.style.color = color;\n    document.body.appendChild(temp);\n\n    // Get the computed style\n    const computedColor = getComputedStyle(temp).color;\n    document.body.removeChild(temp);\n\n    // Parse the RGB values\n    const match = computedColor.match(/^rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)$/);\n    if (match) {\n      return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];\n    }\n\n    return null;\n  };\n\n  const rgbToLuma = (rgb: [number, number, number]) => {\n    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;\n  };\n\n  const copyFromColorScheme = () => {\n    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');\n\n    if (colorScheme) {\n      const mode = getColorMode(colorScheme);\n      if (mode) {\n        setTheme(mode);\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromVariables = () => {\n    const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background');\n    if (backgroundColor) {\n      // convert backgroundColor to hsl and check if it's dark\n      const rgb = colorToRGB(backgroundColor);\n      if (rgb) {\n        const luma = rgbToLuma(rgb);\n        console.log('luma', luma);\n        if (luma < 128) {\n          setTheme('dark');\n        } else {\n          setTheme('light');\n        }\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromAttributes = () => {\n    for (const attributeName of attributes) {\n      const colorTheme = document.documentElement.getAttribute(attributeName);\n      if (colorTheme) {\n        const mode = getColorMode(colorTheme);\n        if (mode) {\n          setTheme(mode);\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (copyFromColorScheme()) {\n        return;\n      }\n      if (copyFromVariables()) {\n        return;\n      }\n      if (mutation.attributeName && attributes.includes(mutation.attributeName)) {\n        copyFromAttributes();\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n\n  // Initial check on page load\n  if (!copyFromColorScheme()) {\n    if (!copyFromVariables()) {\n      copyFromAttributes();\n    }\n  }\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/utils/browser-script.tsx"],"sourcesContent":["// Note that this script can not import anything from outside as it will be converted to a string and executed in the browser.\n\nimport { SsrScript } from \"../components/elements/ssr-layout-effect\";\n\n// Also please note that there might be hydration issues with this script, always check the browser console for errors after changing this script.\nconst script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const getColorMode = (value: string) => {\n    if (value.includes('dark')) {\n      return 'dark';\n    }\n    if (value.includes('light')) {\n      return 'light';\n    }\n    return null;\n  };\n\n  const setTheme = (mode: 'dark' | 'light') => {\n    document.documentElement.setAttribute('data-stack-theme', mode);\n  };\n\n  const colorToRGB = (color: string): [number, number, number] | null => {\n    // Create a temporary element to use for color conversion\n    const temp = document.createElement('div');\n    temp.style.color = color;\n    document.body.appendChild(temp);\n\n    // Get the computed style\n    const computedColor = getComputedStyle(temp).color;\n    document.body.removeChild(temp);\n\n    // Parse the RGB values\n    const match = computedColor.match(/^rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)$/);\n    if (match) {\n      return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];\n    }\n\n    return null;\n  };\n\n  const rgbToLuma = (rgb: [number, number, number]) => {\n    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;\n  };\n\n  const copyFromColorScheme = () => {\n    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');\n\n    if (colorScheme) {\n      const mode = getColorMode(colorScheme);\n      if (mode) {\n        setTheme(mode);\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromVariables = () => {\n    let backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background');\n    if (backgroundColor) {\n      // shadcn by default uses the hsl values with the format \"123 45% 6.5%\"\n      if (/^\\d+\\s\\d+%\\s\\d+(\\.\\d+)?%$/.test(backgroundColor)) {\n        backgroundColor = `hsl(${backgroundColor})`;\n      }\n\n      // convert backgroundColor to luma and check if it's dark\n      const rgb = colorToRGB(backgroundColor);\n      console.log(rgb);\n      if (rgb) {\n        const luma = rgbToLuma(rgb);\n        if (luma < 128) {\n          setTheme('dark');\n        } else {\n          setTheme('light');\n        }\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromAttributes = () => {\n    for (const attributeName of attributes) {\n      const colorTheme = document.documentElement.getAttribute(attributeName);\n      if (colorTheme) {\n        const mode = getColorMode(colorTheme);\n        if (mode) {\n          setTheme(mode);\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (copyFromColorScheme()) {\n        return;\n      }\n      if (mutation.attributeName && attributes.includes(mutation.attributeName) && copyFromAttributes()) {\n        return;\n      }\n      if (copyFromVariables()) {\n        return;\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n\n  // Initial check on page load\n  if (!copyFromColorScheme()) {\n    if (!copyFromAttributes()) {\n      copyFromVariables();\n    }\n  }\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack",
-  "version": "2.5.35",
+  "version": "2.5.37",
   "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,9 +42,9 @@
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.7.2",
     "yup": "^1.4.0",
-    "@stackframe/stack-sc": "2.5.35",
-    "@stackframe/stack-shared": "2.5.35",
-    "@stackframe/stack-ui": "2.5.35"
+    "@stackframe/stack-sc": "2.5.37",
+    "@stackframe/stack-ui": "2.5.37",
+    "@stackframe/stack-shared": "2.5.37"
   },
   "peerDependencies": {
     "next": ">=14.1",