@stackframe/stack 2.5.33 → 2.5.37

package/dist/esm/lib/translations.js

@@ -0,0 +1,20 @@
+// src/lib/translations.tsx
+import "client-only";
+import React from "react";
+import { TranslationContext } from "../providers/translation-provider-client";
+function useTranslation() {
+  const translationContext = React.useContext(TranslationContext);
+  if (!translationContext) {
+    throw new Error("Translation context not found; did you forget to wrap your app in a <StackProvider />?");
+  }
+  return {
+    t: (str) => {
+      const { quetzalKeys, quetzalLocale } = translationContext;
+      return quetzalLocale.get(quetzalKeys.get(str) ?? void 0) ?? str;
+    }
+  };
+}
+export {
+  useTranslation
+};
+//# sourceMappingURL=translations.js.map

package/dist/esm/lib/translations.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/translations.tsx"],"sourcesContent":["import \"client-only\";\nimport React from \"react\";\nimport { TranslationContext } from \"../providers/translation-provider-client\";\n\nexport function useTranslation() {\n  const translationContext = React.useContext(TranslationContext);\n  if (!translationContext) {\n    throw new Error(\"Translation context not found; did you forget to wrap your app in a <StackProvider />?\");\n  }\n  return {\n    t: (str: string) => {\n      const { quetzalKeys, quetzalLocale } = translationContext;\n      return quetzalLocale.get(quetzalKeys.get(str) ?? (undefined as never)) ?? str;\n    },\n  };\n}\n"],"mappings":";AAAA,OAAO;AACP,OAAO,WAAW;AAClB,SAAS,0BAA0B;AAE5B,SAAS,iBAAiB;AAC/B,QAAM,qBAAqB,MAAM,WAAW,kBAAkB;AAC9D,MAAI,CAAC,oBAAoB;AACvB,UAAM,IAAI,MAAM,wFAAwF;AAAA,EAC1G;AACA,SAAO;AAAA,IACL,GAAG,CAAC,QAAgB;AAClB,YAAM,EAAE,aAAa,cAAc,IAAI;AACvC,aAAO,cAAc,IAAI,YAAY,IAAI,GAAG,KAAM,MAAmB,KAAK;AAAA,IAC5E;AAAA,EACF;AACF;","names":[]}

package/dist/esm/providers/stack-provider.js

@@ -2,14 +2,16 @@
 import { Suspense } from "react";
 import { stackAppInternalsSymbol } from "../lib/stack-app";
 import { StackProviderClient, UserSetter } from "./stack-provider-client";
+import { TranslationProvider } from "./translation-provider";
 import { jsx, jsxs } from "react/jsx-runtime";
 function StackProvider({
   children,
-  app
+  app,
+  lang
 }) {
   return /* @__PURE__ */ jsxs(StackProviderClient, { appJson: app[stackAppInternalsSymbol].toClientJson(), children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(UserFetcher, { app }) }),
-    children
+    /* @__PURE__ */ jsx(TranslationProvider, { lang, children })
   ] });
 }
 function UserFetcher(props) {

package/dist/esm/providers/stack-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/providers/stack-provider.tsx"],"sourcesContent":["import React, { Suspense } from 'react';\nimport { StackAdminApp, StackClientApp, StackServerApp, stackAppInternalsSymbol } from '../lib/stack-app';\nimport { StackProviderClient, UserSetter } from './stack-provider-client';\n\n\nexport default function StackProvider({\n  children,\n  app,\n}: {\n  children: React.ReactNode,\n  // list all three types of apps even though server and admin are subclasses of client so it's clear that you can pass any\n  app: StackClientApp<true> | StackServerApp<true> | StackAdminApp<true>,\n}) {\n  return (\n    <StackProviderClient appJson={app[stackAppInternalsSymbol].toClientJson()}>\n      <Suspense fallback={null}>\n        <UserFetcher app={app} />\n      </Suspense>\n      {children}\n    </StackProviderClient>\n  );\n}\n\nfunction UserFetcher(props: { app: StackClientApp<true> }) {\n  const userPromise = props.app.getUser().then((user) => user?.toClientJson() ?? null);\n  return <UserSetter userJsonPromise={userPromise} />;\n}\n"],"mappings":";AAAA,SAAgB,gBAAgB;AAChC,SAAwD,+BAA+B;AACvF,SAAS,qBAAqB,kBAAkB;AAY5C,SAEI,KAFJ;AATW,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,uBAAoB,SAAS,IAAI,uBAAuB,EAAE,aAAa,GACtE;AAAA,wBAAC,YAAS,UAAU,MAClB,8BAAC,eAAY,KAAU,GACzB;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,SAAS,YAAY,OAAsC;AACzD,QAAM,cAAc,MAAM,IAAI,QAAQ,EAAE,KAAK,CAAC,SAAS,MAAM,aAAa,KAAK,IAAI;AACnF,SAAO,oBAAC,cAAW,iBAAiB,aAAa;AACnD;","names":[]}
+{"version":3,"sources":["../../../src/providers/stack-provider.tsx"],"sourcesContent":["import React, { Suspense } from 'react';\nimport { StackAdminApp, StackClientApp, StackServerApp, stackAppInternalsSymbol } from '../lib/stack-app';\nimport { StackProviderClient, UserSetter } from './stack-provider-client';\nimport { TranslationProvider } from './translation-provider';\n\n\nexport default function StackProvider({\n  children,\n  app,\n  lang,\n}: {\n  lang?: React.ComponentProps<typeof TranslationProvider>['lang'],\n  children: React.ReactNode,\n  // list all three types of apps even though server and admin are subclasses of client so it's clear that you can pass any\n  app: StackClientApp<true> | StackServerApp<true> | StackAdminApp<true>,\n}) {\n  return (\n    <StackProviderClient appJson={app[stackAppInternalsSymbol].toClientJson()}>\n      <Suspense fallback={null}>\n        <UserFetcher app={app} />\n      </Suspense>\n      <TranslationProvider lang={lang}>\n        {children}\n      </TranslationProvider>\n    </StackProviderClient>\n  );\n}\n\nfunction UserFetcher(props: { app: StackClientApp<true> }) {\n  const userPromise = props.app.getUser().then((user) => user?.toClientJson() ?? null);\n  return <UserSetter userJsonPromise={userPromise} />;\n}\n"],"mappings":";AAAA,SAAgB,gBAAgB;AAChC,SAAwD,+BAA+B;AACvF,SAAS,qBAAqB,kBAAkB;AAChD,SAAS,2BAA2B;AAchC,SAEI,KAFJ;AAXW,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE,qBAAC,uBAAoB,SAAS,IAAI,uBAAuB,EAAE,aAAa,GACtE;AAAA,wBAAC,YAAS,UAAU,MAClB,8BAAC,eAAY,KAAU,GACzB;AAAA,IACA,oBAAC,uBAAoB,MAClB,UACH;AAAA,KACF;AAEJ;AAEA,SAAS,YAAY,OAAsC;AACzD,QAAM,cAAc,MAAM,IAAI,QAAQ,EAAE,KAAK,CAAC,SAAS,MAAM,aAAa,KAAK,IAAI;AACnF,SAAO,oBAAC,cAAW,iBAAiB,aAAa;AACnD;","names":[]}

package/dist/esm/providers/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/providers/theme-provider.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { globalCSS } from \"../generated/global-css\";\nimport { BrowserScript } from \"../utils/browser-script\";\nimport { DEFAULT_THEME } from \"../utils/constants\";\nimport Color from \"color\";\nimport { deindent } from \"@stackframe/stack-shared/dist/utils/strings\";\n\ntype Colors = {\n  background: string,\n  foreground: string,\n  card: string,\n  cardForeground: string,\n  popover: string,\n  popoverForeground: string,\n  primary: string,\n  primaryForeground: string,\n  secondary: string,\n  secondaryForeground: string,\n  muted: string,\n  mutedForeground: string,\n  accent: string,\n  accentForeground: string,\n  destructive: string,\n  destructiveForeground: string,\n  border: string,\n  input: string,\n  ring: string,\n}\n\nexport type Theme = {\n  light: Colors,\n  dark: Colors,\n  radius: string,\n};\n\ntype ThemeConfig = {\n  light?: Partial<Colors>,\n  dark?: Partial<Colors>,\n} & Partial<Omit<Theme, 'light' | 'dark'>>;\n\nfunction convertColorToCSSVars(obj: Record<string, string>) {\n  return Object.fromEntries(Object.entries(obj).map(([key, value]) => {\n    const color = Color(value).hsl().array();\n    return [\n      // Convert camelCase key to dash-case\n      key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`),\n      // Convert color to CSS HSL string\n      `${color[0]} ${color[1]}% ${color[2]}%`\n    ];\n  }));\n}\n\nfunction convertColorsToCSS(theme: Theme) {\n  const { dark, light, ...rest } = theme;\n  const colors = {\n    light: { ...convertColorToCSSVars(light), ...rest },\n    dark: convertColorToCSSVars(dark),\n  };\n\n  function colorsToCSSVars(colors: Record<string, string>) {\n    return Object.entries(colors).map((params) => {\n      return `--${params[0]}: ${params[1]};\\n`;\n    }).join('');\n  }\n\n  return deindent`\n  .stack-scope {\n  ${colorsToCSSVars(colors.light)}\n  }\n  [data-stack-theme=\"dark\"] .stack-scope {\n  ${colorsToCSSVars(colors.dark)}\n  }`;\n}\n\n\nexport function StackTheme({\n  theme,\n  children,\n  nonce,\n} : {\n  theme?: ThemeConfig,\n  children?: React.ReactNode,\n  nonce?: string,\n}) {\n  const themeValue: Theme = {\n    ...DEFAULT_THEME,\n    ...theme,\n    dark: { ...DEFAULT_THEME.dark, ...theme?.dark },\n    light: { ...DEFAULT_THEME.light, ...theme?.light },\n  };\n\n  return (\n    <>\n      <BrowserScript nonce={nonce} />\n      <style\n        suppressHydrationWarning\n        nonce={nonce}\n        dangerouslySetInnerHTML={{\n          __html: globalCSS + \"\\n\" + convertColorsToCSS(themeValue),\n        }}\n      />\n      {children}\n    </>\n  );\n}"],"mappings":";;;AAGA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAuFrB,mBACE,KADF;AApDJ,SAAS,sBAAsB,KAA6B;AAC1D,SAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAClE,UAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,EAAE,MAAM;AACvC,WAAO;AAAA;AAAA,MAEL,IAAI,QAAQ,UAAU,OAAK,IAAI,EAAE,YAAY,CAAC,EAAE;AAAA;AAAA,MAEhD,GAAG,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;AAAA,IACtC;AAAA,EACF,CAAC,CAAC;AACJ;AAEA,SAAS,mBAAmB,OAAc;AACxC,QAAM,EAAE,MAAM,OAAO,GAAG,KAAK,IAAI;AACjC,QAAM,SAAS;AAAA,IACb,OAAO,EAAE,GAAG,sBAAsB,KAAK,GAAG,GAAG,KAAK;AAAA,IAClD,MAAM,sBAAsB,IAAI;AAAA,EAClC;AAEA,WAAS,gBAAgBA,SAAgC;AACvD,WAAO,OAAO,QAAQA,OAAM,EAAE,IAAI,CAAC,WAAW;AAC5C,aAAO,KAAK,OAAO,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA,IACrC,CAAC,EAAE,KAAK,EAAE;AAAA,EACZ;AAEA,SAAO;AAAA;AAAA,IAEL,gBAAgB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA,IAG7B,gBAAgB,OAAO,IAAI,CAAC;AAAA;AAEhC;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,aAAoB;AAAA,IACxB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM,EAAE,GAAG,cAAc,MAAM,GAAG,OAAO,KAAK;AAAA,IAC9C,OAAO,EAAE,GAAG,cAAc,OAAO,GAAG,OAAO,MAAM;AAAA,EACnD;AAEA,SACE,iCACE;AAAA,wBAAC,iBAAc,OAAc;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB;AAAA,QACxB;AAAA,QACA,yBAAyB;AAAA,UACvB,QAAQ,YAAY,OAAO,mBAAmB,UAAU;AAAA,QAC1D;AAAA;AAAA,IACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":["colors"]}
+{"version":3,"sources":["../../../src/providers/theme-provider.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { globalCSS } from \"../generated/global-css\";\nimport { BrowserScript } from \"../utils/browser-script\";\nimport { DEFAULT_THEME } from \"../utils/constants\";\nimport Color from \"color\";\nimport { deindent } from \"@stackframe/stack-shared/dist/utils/strings\";\n\ntype Colors = {\n  background: string,\n  foreground: string,\n  card: string,\n  cardForeground: string,\n  popover: string,\n  popoverForeground: string,\n  primary: string,\n  primaryForeground: string,\n  secondary: string,\n  secondaryForeground: string,\n  muted: string,\n  mutedForeground: string,\n  accent: string,\n  accentForeground: string,\n  destructive: string,\n  destructiveForeground: string,\n  border: string,\n  input: string,\n  ring: string,\n}\n\nexport type Theme = {\n  light: Colors,\n  dark: Colors,\n  radius: string,\n};\n\ntype ThemeConfig = {\n  light?: Partial<Colors>,\n  dark?: Partial<Colors>,\n} & Partial<Omit<Theme, 'light' | 'dark'>>;\n\nfunction convertColorToCSSVars(obj: Record<string, string>) {\n  return Object.fromEntries(Object.entries(obj).map(([key, value]) => {\n    const color = Color(value).hsl().array();\n    return [\n      // Convert camelCase key to dash-case\n      key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`),\n      // Convert color to CSS HSL string\n      `${color[0]} ${color[1]}% ${color[2]}%`\n    ];\n  }));\n}\n\nfunction convertColorsToCSS(theme: Theme) {\n  const { dark, light, ...rest } = theme;\n  const colors = {\n    light: { ...convertColorToCSSVars(light), ...rest },\n    dark: convertColorToCSSVars(dark),\n  };\n\n  function colorsToCSSVars(colors: Record<string, string>) {\n    return Object.entries(colors).map((params) => {\n      return `--${params[0]}: ${params[1]};\\n`;\n    }).join('');\n  }\n\n  return deindent`\n  .stack-scope {\n  ${colorsToCSSVars(colors.light)}\n  }\n  [data-stack-theme=\"dark\"] .stack-scope {\n  ${colorsToCSSVars(colors.dark)}\n  }`;\n}\n\n\nexport function StackTheme({\n  theme,\n  children,\n  nonce,\n} : {\n  theme?: ThemeConfig,\n  children?: React.ReactNode,\n  nonce?: string,\n}) {\n  const themeValue: Theme = {\n    ...DEFAULT_THEME,\n    ...theme,\n    dark: { ...DEFAULT_THEME.dark, ...theme?.dark },\n    light: { ...DEFAULT_THEME.light, ...theme?.light },\n  };\n\n  return (\n    <>\n      <BrowserScript nonce={nonce} />\n      <style\n        suppressHydrationWarning\n        nonce={nonce}\n        dangerouslySetInnerHTML={{\n          __html: globalCSS + \"\\n\" + convertColorsToCSS(themeValue),\n        }}\n      />\n      {children}\n    </>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,OAAO,WAAW;AAClB,SAAS,gBAAgB;AAuFrB,mBACE,KADF;AApDJ,SAAS,sBAAsB,KAA6B;AAC1D,SAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAClE,UAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,EAAE,MAAM;AACvC,WAAO;AAAA;AAAA,MAEL,IAAI,QAAQ,UAAU,OAAK,IAAI,EAAE,YAAY,CAAC,EAAE;AAAA;AAAA,MAEhD,GAAG,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC;AAAA,IACtC;AAAA,EACF,CAAC,CAAC;AACJ;AAEA,SAAS,mBAAmB,OAAc;AACxC,QAAM,EAAE,MAAM,OAAO,GAAG,KAAK,IAAI;AACjC,QAAM,SAAS;AAAA,IACb,OAAO,EAAE,GAAG,sBAAsB,KAAK,GAAG,GAAG,KAAK;AAAA,IAClD,MAAM,sBAAsB,IAAI;AAAA,EAClC;AAEA,WAAS,gBAAgBA,SAAgC;AACvD,WAAO,OAAO,QAAQA,OAAM,EAAE,IAAI,CAAC,WAAW;AAC5C,aAAO,KAAK,OAAO,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC;AAAA;AAAA,IACrC,CAAC,EAAE,KAAK,EAAE;AAAA,EACZ;AAEA,SAAO;AAAA;AAAA,IAEL,gBAAgB,OAAO,KAAK,CAAC;AAAA;AAAA;AAAA,IAG7B,gBAAgB,OAAO,IAAI,CAAC;AAAA;AAEhC;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,aAAoB;AAAA,IACxB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM,EAAE,GAAG,cAAc,MAAM,GAAG,OAAO,KAAK;AAAA,IAC9C,OAAO,EAAE,GAAG,cAAc,OAAO,GAAG,OAAO,MAAM;AAAA,EACnD;AAEA,SACE,iCACE;AAAA,wBAAC,iBAAc,OAAc;AAAA,IAC7B;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB;AAAA,QACxB;AAAA,QACA,yBAAyB;AAAA,UACvB,QAAQ,YAAY,OAAO,mBAAmB,UAAU;AAAA,QAC1D;AAAA;AAAA,IACF;AAAA,IACC;AAAA,KACH;AAEJ;","names":["colors"]}

package/dist/esm/providers/translation-provider-client.js

@@ -0,0 +1,18 @@
+"use client";
+"use client";
+
+// src/providers/translation-provider-client.tsx
+import { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var TranslationContext = createContext(null);
+function TranslationProviderClient(props) {
+  return /* @__PURE__ */ jsx(TranslationContext.Provider, { value: {
+    quetzalKeys: props.quetzalKeys,
+    quetzalLocale: props.quetzalLocale
+  }, children: props.children });
+}
+export {
+  TranslationContext,
+  TranslationProviderClient
+};
+//# sourceMappingURL=translation-provider-client.js.map

package/dist/esm/providers/translation-provider-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/providers/translation-provider-client.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nexport const TranslationContext = createContext<null | {\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n}>(null);\n\nexport function TranslationProviderClient(props: {\n  children: React.ReactNode,\n  quetzalKeys: Map<string, string>,\n  quetzalLocale: Map<string, string>,\n}) {\n  return (\n    <TranslationContext.Provider value={{\n      quetzalKeys: props.quetzalKeys,\n      quetzalLocale: props.quetzalLocale,\n    }}>\n      {props.children}\n    </TranslationContext.Provider>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,qBAAiC;AAatC;AAXG,IAAM,qBAAqB,cAG/B,IAAI;AAEA,SAAS,0BAA0B,OAIvC;AACD,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO;AAAA,IAClC,aAAa,MAAM;AAAA,IACnB,eAAe,MAAM;AAAA,EACvB,GACG,gBAAM,UACT;AAEJ;","names":[]}

package/dist/esm/providers/translation-provider.js

@@ -0,0 +1,12 @@
+// src/providers/translation-provider.tsx
+import { quetzalLocales, quetzalKeys } from "../generated/quetzal-translations";
+import { TranslationProviderClient } from "./translation-provider-client";
+import { jsx } from "react/jsx-runtime";
+async function TranslationProvider({ lang, children }) {
+  const locale = quetzalLocales.get(lang ?? void 0);
+  return /* @__PURE__ */ jsx(TranslationProviderClient, { quetzalKeys, quetzalLocale: locale ?? /* @__PURE__ */ new Map(), children });
+}
+export {
+  TranslationProvider
+};
+//# sourceMappingURL=translation-provider.js.map

package/dist/esm/providers/translation-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/providers/translation-provider.tsx"],"sourcesContent":["import { quetzalLocales, quetzalKeys } from \"../generated/quetzal-translations\";\nimport { TranslationProviderClient } from \"./translation-provider-client\";\n\nexport async function TranslationProvider({ lang, children }: {\n  lang: Parameters<typeof quetzalLocales.get>[0] | undefined,\n  children: React.ReactNode,\n}) {\n  const locale = quetzalLocales.get(lang ?? (undefined as never));\n  return <TranslationProviderClient quetzalKeys={quetzalKeys} quetzalLocale={locale ?? new Map()}>\n    {children}\n  </TranslationProviderClient>;\n}\n"],"mappings":";AAAA,SAAS,gBAAgB,mBAAmB;AAC5C,SAAS,iCAAiC;AAOjC;AALT,eAAsB,oBAAoB,EAAE,MAAM,SAAS,GAGxD;AACD,QAAM,SAAS,eAAe,IAAI,QAAS,MAAmB;AAC9D,SAAO,oBAAC,6BAA0B,aAA0B,eAAe,UAAU,oBAAI,IAAI,GAC1F,UACH;AACF;","names":[]}

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

@@ -15,14 +15,24 @@ var script = () => {
   const setTheme = (mode) => {
     document.documentElement.setAttribute("data-stack-theme", mode);
   };
+  const colorToRGB = (color) => {
+    const temp = document.createElement("div");
+    temp.style.color = color;
+    document.body.appendChild(temp);
+    const computedColor = getComputedStyle(temp).color;
+    document.body.removeChild(temp);
+    const match = computedColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (match) {
+      return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
+    }
+    return null;
+  };
+  const rgbToLuma = (rgb) => {
+    return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3;
+  };
   const copyFromColorScheme = () => {
     const colorScheme = getComputedStyle(document.documentElement).getPropertyValue("color-scheme");
     if (colorScheme) {
-      if (colorScheme === "normal") {
-        const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-        setTheme(isDark ? "dark" : "light");
-        return true;
-      }
       const mode = getColorMode(colorScheme);
       if (mode) {
         setTheme(mode);
@@ -31,6 +41,26 @@ var script = () => {
     }
     return false;
   };
+  const copyFromVariables = () => {
+    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);
+        if (luma < 128) {
+          setTheme("dark");
+        } else {
+          setTheme("light");
+        }
+        return true;
+      }
+    }
+    return false;
+  };
   const copyFromAttributes = () => {
     for (const attributeName of attributes) {
       const colorTheme = document.documentElement.getAttribute(attributeName);
@@ -49,8 +79,11 @@ var script = () => {
       if (copyFromColorScheme()) {
         return;
       }
-      if (mutation.attributeName && attributes.includes(mutation.attributeName)) {
-        copyFromAttributes();
+      if (mutation.attributeName && attributes.includes(mutation.attributeName) && copyFromAttributes()) {
+        return;
+      }
+      if (copyFromVariables()) {
+        return;
       }
     });
   });
@@ -59,7 +92,9 @@ var script = () => {
     attributeFilter: attributes
   });
   if (!copyFromColorScheme()) {
-    copyFromAttributes();
+    if (!copyFromAttributes()) {
+      copyFromVariables();
+    }
   }
 };
 function BrowserScript(props) {

package/dist/esm/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 copyFromColorScheme = () => {\n    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');\n\n    if (colorScheme) {\n      if (colorScheme === 'normal') {\n        const isDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n        setTheme(isDark ? 'dark' : 'light');\n        return true;\n      }\n      const mode = getColorMode(colorScheme);\n      if (mode) {\n        setTheme(mode);\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)) {\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    copyFromAttributes();\n  }\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AA2EjB;AAxET,IAAM,SAAS,MAAM;AACnB,QAAM,aAAa,CAAC,yBAAyB,yBAAyB,cAAc,qBAAqB,OAAO;AAEhH,QAAM,eAAe,CAAC,UAAkB;AACtC,QAAI,MAAM,SAAS,MAAM,GAAG;AAC1B,aAAO;AAAA,IACT;AACA,QAAI,MAAM,SAAS,OAAO,GAAG;AAC3B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,CAAC,SAA2B;AAC3C,aAAS,gBAAgB,aAAa,oBAAoB,IAAI;AAAA,EAChE;AAEA,QAAM,sBAAsB,MAAM;AAChC,UAAM,cAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAc;AAE9F,QAAI,aAAa;AACf,UAAI,gBAAgB,UAAU;AAC5B,cAAM,SAAS,OAAO,WAAW,8BAA8B,EAAE;AACjE,iBAAS,SAAS,SAAS,OAAO;AAClC,eAAO;AAAA,MACT;AACA,YAAM,OAAO,aAAa,WAAW;AACrC,UAAI,MAAM;AACR,iBAAS,IAAI;AACb,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,qBAAqB,MAAM;AAC/B,eAAW,iBAAiB,YAAY;AACtC,YAAM,aAAa,SAAS,gBAAgB,aAAa,aAAa;AACtE,UAAI,YAAY;AACd,cAAM,OAAO,aAAa,UAAU;AACpC,YAAI,MAAM;AACR,mBAAS,IAAI;AACb,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,cAAU,QAAQ,CAAC,aAAa;AAC9B,UAAI,oBAAoB,GAAG;AACzB;AAAA,MACF;AACA,UAAI,SAAS,iBAAiB,WAAW,SAAS,SAAS,aAAa,GAAG;AACzE,2BAAmB;AAAA,MACrB;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB,CAAC;AAGD,MAAI,CAAC,oBAAoB,GAAG;AAC1B,uBAAmB;AAAA,EACrB;AACF;AAEO,SAAS,cAAc,OAA4B;AACxD,SAAO,oBAAC,aAAU,OAAO,MAAM,OAAO,QAAQ,IAAI,OAAO,SAAS,CAAC,OAAM;AAC3E;","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":";AAEA,SAAS,iBAAiB;AA0HjB;AAvHT,IAAM,SAAS,MAAM;AACnB,QAAM,aAAa,CAAC,yBAAyB,yBAAyB,cAAc,qBAAqB,OAAO;AAEhH,QAAM,eAAe,CAAC,UAAkB;AACtC,QAAI,MAAM,SAAS,MAAM,GAAG;AAC1B,aAAO;AAAA,IACT;AACA,QAAI,MAAM,SAAS,OAAO,GAAG;AAC3B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,CAAC,SAA2B;AAC3C,aAAS,gBAAgB,aAAa,oBAAoB,IAAI;AAAA,EAChE;AAEA,QAAM,aAAa,CAAC,UAAmD;AAErE,UAAM,OAAO,SAAS,cAAc,KAAK;AACzC,SAAK,MAAM,QAAQ;AACnB,aAAS,KAAK,YAAY,IAAI;AAG9B,UAAM,gBAAgB,iBAAiB,IAAI,EAAE;AAC7C,aAAS,KAAK,YAAY,IAAI;AAG9B,UAAM,QAAQ,cAAc,MAAM,kCAAkC;AACpE,QAAI,OAAO;AACT,aAAO,CAAC,SAAS,MAAM,CAAC,CAAC,GAAG,SAAS,MAAM,CAAC,CAAC,GAAG,SAAS,MAAM,CAAC,CAAC,CAAC;AAAA,IACpE;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,CAAC,QAAkC;AACnD,YAAQ,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,OAAO;AAAA,EACxD;AAEA,QAAM,sBAAsB,MAAM;AAChC,UAAM,cAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAc;AAE9F,QAAI,aAAa;AACf,YAAM,OAAO,aAAa,WAAW;AACrC,UAAI,MAAM;AACR,iBAAS,IAAI;AACb,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,kBAAkB,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAc;AAChG,QAAI,iBAAiB;AAEnB,UAAI,4BAA4B,KAAK,eAAe,GAAG;AACrD,0BAAkB,OAAO,eAAe;AAAA,MAC1C;AAGA,YAAM,MAAM,WAAW,eAAe;AACtC,cAAQ,IAAI,GAAG;AACf,UAAI,KAAK;AACP,cAAM,OAAO,UAAU,GAAG;AAC1B,YAAI,OAAO,KAAK;AACd,mBAAS,MAAM;AAAA,QACjB,OAAO;AACL,mBAAS,OAAO;AAAA,QAClB;AACA,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,qBAAqB,MAAM;AAC/B,eAAW,iBAAiB,YAAY;AACtC,YAAM,aAAa,SAAS,gBAAgB,aAAa,aAAa;AACtE,UAAI,YAAY;AACd,cAAM,OAAO,aAAa,UAAU;AACpC,YAAI,MAAM;AACR,mBAAS,IAAI;AACb,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,cAAU,QAAQ,CAAC,aAAa;AAC9B,UAAI,oBAAoB,GAAG;AACzB;AAAA,MACF;AACA,UAAI,SAAS,iBAAiB,WAAW,SAAS,SAAS,aAAa,KAAK,mBAAmB,GAAG;AACjG;AAAA,MACF;AACA,UAAI,kBAAkB,GAAG;AACvB;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB,CAAC;AAGD,MAAI,CAAC,oBAAoB,GAAG;AAC1B,QAAI,CAAC,mBAAmB,GAAG;AACzB,wBAAkB;AAAA,IACpB;AAAA,EACF;AACF;AAEO,SAAS,cAAc,OAA4B;AACxD,SAAO,oBAAC,aAAU,OAAO,MAAM,OAAO,QAAQ,IAAI,OAAO,SAAS,CAAC,OAAM;AAC3E;","names":[]}