@stackframe/stack 2.4.27 → 2.5.0

package/dist/providers/stack-provider-client.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StackClientApp, StackClientAppJson } from '../lib/stack-app.mjs';
-import React__default from 'react';
+import React from 'react';
 import { UserJson } from '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/interface/clientInterface';
 import '@stackframe/stack-shared/dist/utils/json';
@@ -9,12 +9,12 @@ import '@stackframe/stack-shared/dist/interface/serverInterface';
 import '@stackframe/stack-shared/dist/interface/crud/email-templates';
 import '@stackframe/stack-shared/dist/sessions';
 
-declare const StackContext: React__default.Context<{
+declare const StackContext: React.Context<{
     app: StackClientApp<true>;
 } | null>;
 declare function StackProviderClient(props: {
     appJson: StackClientAppJson<true, string>;
-    children?: React__default.ReactNode;
+    children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function UserSetter(props: {
     userJsonPromise: Promise<UserJson | null>;

package/dist/providers/stack-provider-client.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StackClientApp, StackClientAppJson } from '../lib/stack-app.js';
-import React__default from 'react';
+import React from 'react';
 import { UserJson } from '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/interface/clientInterface';
 import '@stackframe/stack-shared/dist/utils/json';
@@ -9,12 +9,12 @@ import '@stackframe/stack-shared/dist/interface/serverInterface';
 import '@stackframe/stack-shared/dist/interface/crud/email-templates';
 import '@stackframe/stack-shared/dist/sessions';
 
-declare const StackContext: React__default.Context<{
+declare const StackContext: React.Context<{
     app: StackClientApp<true>;
 } | null>;
 declare function StackProviderClient(props: {
     appJson: StackClientAppJson<true, string>;
-    children?: React__default.ReactNode;
+    children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function UserSetter(props: {
     userJsonPromise: Promise<UserJson | null>;

package/dist/providers/stack-provider.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 import { StackClientApp } from '../lib/stack-app.mjs';
 import '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/interface/clientInterface';
@@ -10,7 +10,7 @@ import '@stackframe/stack-shared/dist/interface/crud/email-templates';
 import '@stackframe/stack-shared/dist/sessions';
 
 declare function StackProvider({ children, app, }: {
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     app: StackClientApp<true>;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/providers/stack-provider.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 import { StackClientApp } from '../lib/stack-app.js';
 import '@stackframe/stack-shared';
 import '@stackframe/stack-shared/dist/interface/clientInterface';
@@ -10,7 +10,7 @@ import '@stackframe/stack-shared/dist/interface/crud/email-templates';
 import '@stackframe/stack-shared/dist/sessions';
 
 declare function StackProvider({ children, app, }: {
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     app: StackClientApp<true>;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/providers/styled-components-registry.d.mts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 
 declare function StyledComponentsRegistry({ children, }: {
-    children: React__default.ReactNode;
+    children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
 export { StyledComponentsRegistry as default };

package/dist/providers/styled-components-registry.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 
 declare function StyledComponentsRegistry({ children, }: {
-    children: React__default.ReactNode;
+    children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
 export { StyledComponentsRegistry as default };

package/dist/providers/theme-provider.d.mts

@@ -1,22 +1,39 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
-import { DesignConfig } from './design-provider.mjs';
-import { ComponentConfig } from './component-provider.mjs';
-import '@radix-ui/react-tabs';
-import '@radix-ui/react-collapsible';
-import '@radix-ui/react-avatar';
-import '@radix-ui/react-dropdown-menu';
-import '@radix-ui/react-popover';
-import 'url';
-import '@radix-ui/react-label';
-import '@radix-ui/react-separator';
-import '../components-core/button.mjs';
-import '../components-core/container.mjs';
+import React from 'react';
 
-type ThemeConfig = DesignConfig & ComponentConfig;
+type Colors = {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+};
+type Theme = {
+    light: Colors;
+    dark: Colors;
+    radius: string;
+};
+type ThemeConfig = {
+    light?: Partial<Colors>;
+    dark?: Partial<Colors>;
+} & Partial<Omit<Theme, 'light' | 'dark'>>;
 declare function StackTheme({ theme, children, }: {
-    children?: React__default.ReactNode;
-    theme?: DesignConfig & ComponentConfig;
+    theme?: ThemeConfig;
+    children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-export { StackTheme, type ThemeConfig };
+export { StackTheme, type Theme };

package/dist/providers/theme-provider.d.ts

@@ -1,22 +1,39 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
-import { DesignConfig } from './design-provider.js';
-import { ComponentConfig } from './component-provider.js';
-import '@radix-ui/react-tabs';
-import '@radix-ui/react-collapsible';
-import '@radix-ui/react-avatar';
-import '@radix-ui/react-dropdown-menu';
-import '@radix-ui/react-popover';
-import 'url';
-import '@radix-ui/react-label';
-import '@radix-ui/react-separator';
-import '../components-core/button.js';
-import '../components-core/container.js';
+import React from 'react';
 
-type ThemeConfig = DesignConfig & ComponentConfig;
+type Colors = {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+};
+type Theme = {
+    light: Colors;
+    dark: Colors;
+    radius: string;
+};
+type ThemeConfig = {
+    light?: Partial<Colors>;
+    dark?: Partial<Colors>;
+} & Partial<Omit<Theme, 'light' | 'dark'>>;
 declare function StackTheme({ theme, children, }: {
-    children?: React__default.ReactNode;
-    theme?: DesignConfig & ComponentConfig;
+    theme?: ThemeConfig;
+    children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-export { StackTheme, type ThemeConfig };
+export { StackTheme, type Theme };

package/dist/providers/theme-provider.js

@@ -35,19 +35,58 @@ __export(theme_provider_exports, {
   StackTheme: () => StackTheme
 });
 module.exports = __toCommonJS(theme_provider_exports);
-var import_design_provider = require("./design-provider");
-var import_component_provider = require("./component-provider");
 var import_styled_components_registry = __toESM(require("./styled-components-registry"));
+var import_global_css = require("../generated/global-css");
 var import_browser_script = require("../utils/browser-script");
+var import_constants = require("../utils/constants");
+var import_color = __toESM(require("color"));
+var import_strings = require("@stackframe/stack-shared/dist/utils/strings");
 var import_jsx_runtime = require("react/jsx-runtime");
+function convertColorToCSSVars(obj) {
+  return Object.fromEntries(Object.entries(obj).map(([key, value]) => {
+    const color = (0, import_color.default)(value).hsl().array();
+    return [
+      // Convert camelCase key to dash-case
+      key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),
+      // Convert color to CSS HSL string 
+      `${color[0]} ${color[1]}% ${color[2]}%`
+    ];
+  }));
+}
+function convertColorsToCSS(theme) {
+  const { dark, light, ...rest } = theme;
+  const colors = {
+    light: { ...convertColorToCSSVars(light), ...rest },
+    dark: convertColorToCSSVars(dark)
+  };
+  function colorsToCSSVars(colors2) {
+    return Object.entries(colors2).map((params) => {
+      return `--${params[0]}: ${params[1]};
+`;
+    }).join("");
+  }
+  return import_strings.deindent`
+  .stack-scope {
+  ${colorsToCSSVars(colors.light)}
+  }
+  [data-stack-theme="dark"] .stack-scope {
+  ${colorsToCSSVars(colors.dark)}
+  }`;
+}
 function StackTheme({
   theme,
   children
 }) {
-  const componentProps = { components: theme?.components };
+  const themeValue = {
+    ...import_constants.DEFAULT_THEME,
+    ...theme,
+    dark: { ...import_constants.DEFAULT_THEME.dark, ...theme?.dark },
+    light: { ...import_constants.DEFAULT_THEME.light, ...theme?.light }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled_components_registry.default, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_browser_script.BrowserScript, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design_provider.StackDesignProvider, { ...theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_component_provider.StackComponentProvider, { ...componentProps, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: import_global_css.globalCSS + "\n" + convertColorsToCSS(themeValue) } }),
+    children
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport { StackDesignProvider, DesignConfig } from \"./design-provider\";\nimport { StackComponentProvider, ComponentConfig } from \"./component-provider\";\nimport StyledComponentsRegistry from \"./styled-components-registry\";\nimport { BrowserScript } from \"../utils/browser-script\";\n\nexport type ThemeConfig = DesignConfig & ComponentConfig;\n\nexport function StackTheme({\n  theme,\n  children,\n} : { \n  children?: React.ReactNode,\n  theme?: DesignConfig & ComponentConfig,\n}) {\n  const componentProps = { components: theme?.components };\n\n  return (\n    <StyledComponentsRegistry>\n      <BrowserScript />\n      <StackDesignProvider {...theme}>\n        <StackComponentProvider {...componentProps}>\n          {children}\n        </StackComponentProvider>\n      </StackDesignProvider>\n    </StyledComponentsRegistry>\n  );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,6BAAkD;AAClD,gCAAwD;AACxD,wCAAqC;AACrC,4BAA8B;AAc1B;AAVG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,iBAAiB,EAAE,YAAY,OAAO,WAAW;AAEvD,SACE,6CAAC,kCAAAA,SAAA,EACC;AAAA,gDAAC,uCAAc;AAAA,IACf,4CAAC,8CAAqB,GAAG,OACvB,sDAAC,oDAAwB,GAAG,gBACzB,UACH,GACF;AAAA,KACF;AAEJ;","names":["StyledComponentsRegistry"]}
+{"version":3,"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["'use client';\n\nimport React from \"react\";\nimport StyledComponentsRegistry from \"./styled-components-registry\";\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} : {\n  theme?: ThemeConfig,\n  children?: React.ReactNode,\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    <StyledComponentsRegistry>\n      <BrowserScript />\n      <style dangerouslySetInnerHTML={{ __html: globalCSS + '\\n' + convertColorsToCSS(themeValue) }} />\n      {children}\n    </StyledComponentsRegistry>\n  );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wCAAqC;AACrC,wBAA0B;AAC1B,4BAA8B;AAC9B,uBAA8B;AAC9B,mBAAkB;AAClB,qBAAyB;AAqFrB;AAlDJ,SAAS,sBAAsB,KAA6B;AAC1D,SAAO,OAAO,YAAY,OAAO,QAAQ,GAAG,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAClE,UAAM,YAAQ,aAAAA,SAAM,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,gBAAgBC,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;AACF,GAGG;AACD,QAAM,aAAoB;AAAA,IACxB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM,EAAE,GAAG,+BAAc,MAAM,GAAG,OAAO,KAAK;AAAA,IAC9C,OAAO,EAAE,GAAG,+BAAc,OAAO,GAAG,OAAO,MAAM;AAAA,EACnD;AAEA,SACE,6CAAC,kCAAAC,SAAA,EACC;AAAA,gDAAC,uCAAc;AAAA,IACf,4CAAC,WAAM,yBAAyB,EAAE,QAAQ,8BAAY,OAAO,mBAAmB,UAAU,EAAE,GAAG;AAAA,IAC9F;AAAA,KACH;AAEJ;","names":["Color","colors","StyledComponentsRegistry"]}

package/dist/utils/browser-script.js

@@ -23,6 +23,7 @@ __export(browser_script_exports, {
   BrowserScript: () => BrowserScript
 });
 module.exports = __toCommonJS(browser_script_exports);
+var import_ssr_layout_effect = require("../components/elements/ssr-layout-effect");
 var import_jsx_runtime = require("react/jsx-runtime");
 var script = () => {
   const attributes = ["data-joy-color-scheme", "data-mui-color-scheme", "data-theme", "data-color-scheme", "class"];
@@ -50,7 +51,7 @@ var script = () => {
   });
 };
 function BrowserScript() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { dangerouslySetInnerHTML: { __html: `(${script.toString()})()` } });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ssr_layout_effect.SsrScript, { script: `(${script.toString()})()` });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/browser-script.tsx"],"sourcesContent":["const script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      for (const attributeName of attributes) {\n        if (mutation.attributeName === attributeName) {\n          const colorTheme = document.documentElement.getAttribute(attributeName);\n          if (!colorTheme) {\n            continue;\n          }\n          const darkMode = colorTheme.includes('dark');\n          const lightMode = colorTheme.includes('light');\n          if (!darkMode && !lightMode) {\n            continue;\n          }\n          document.documentElement.setAttribute('data-stack-theme', darkMode ? 'dark' : 'light');\n        }\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n};\n\nexport function BrowserScript() {\n  return (\n    <script dangerouslySetInnerHTML={{ __html: `(${script.toString()})()` }}/>\n  );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BI;AA9BJ,IAAM,SAAS,MAAM;AACnB,QAAM,aAAa,CAAC,yBAAyB,yBAAyB,cAAc,qBAAqB,OAAO;AAEhH,QAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,cAAU,QAAQ,CAAC,aAAa;AAC9B,iBAAW,iBAAiB,YAAY;AACtC,YAAI,SAAS,kBAAkB,eAAe;AAC5C,gBAAM,aAAa,SAAS,gBAAgB,aAAa,aAAa;AACtE,cAAI,CAAC,YAAY;AACf;AAAA,UACF;AACA,gBAAM,WAAW,WAAW,SAAS,MAAM;AAC3C,gBAAM,YAAY,WAAW,SAAS,OAAO;AAC7C,cAAI,CAAC,YAAY,CAAC,WAAW;AAC3B;AAAA,UACF;AACA,mBAAS,gBAAgB,aAAa,oBAAoB,WAAW,SAAS,OAAO;AAAA,QACvF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB,CAAC;AACH;AAEO,SAAS,gBAAgB;AAC9B,SACE,4CAAC,YAAO,yBAAyB,EAAE,QAAQ,IAAI,OAAO,SAAS,CAAC,MAAM,GAAE;AAE5E;","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 observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      for (const attributeName of attributes) {\n        if (mutation.attributeName === attributeName) {\n          const colorTheme = document.documentElement.getAttribute(attributeName);\n          if (!colorTheme) {\n            continue;\n          }\n          const darkMode = colorTheme.includes('dark');\n          const lightMode = colorTheme.includes('light');\n          if (!darkMode && !lightMode) {\n            continue;\n          }\n          document.documentElement.setAttribute('data-stack-theme', darkMode ? 'dark' : 'light');\n        }\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n};\n\nexport function BrowserScript() {\n  return <SsrScript script={`(${script.toString()})()`}/>;\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,+BAA0B;AAgCjB;AA7BT,IAAM,SAAS,MAAM;AACnB,QAAM,aAAa,CAAC,yBAAyB,yBAAyB,cAAc,qBAAqB,OAAO;AAEhH,QAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,cAAU,QAAQ,CAAC,aAAa;AAC9B,iBAAW,iBAAiB,YAAY;AACtC,YAAI,SAAS,kBAAkB,eAAe;AAC5C,gBAAM,aAAa,SAAS,gBAAgB,aAAa,aAAa;AACtE,cAAI,CAAC,YAAY;AACf;AAAA,UACF;AACA,gBAAM,WAAW,WAAW,SAAS,MAAM;AAC3C,gBAAM,YAAY,WAAW,SAAS,OAAO;AAC7C,cAAI,CAAC,YAAY,CAAC,WAAW;AAC3B;AAAA,UACF;AACA,mBAAS,gBAAgB,aAAa,oBAAoB,WAAW,SAAS,OAAO;AAAA,QACvF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB,CAAC;AACH;AAEO,SAAS,gBAAgB;AAC9B,SAAO,4CAAC,sCAAU,QAAQ,IAAI,OAAO,SAAS,CAAC,OAAM;AACvD;","names":[]}

package/dist/utils/constants.d.mts

@@ -30,19 +30,50 @@ declare const LINK_COLORS: {
     readonly light: "#000";
 };
 declare const SHADOW = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
-declare const DEFAULT_COLORS: {
-    readonly dark: {
-        readonly primaryColor: "#ffffff";
-        readonly secondaryColor: "#27272a";
-        readonly backgroundColor: "#000000";
-        readonly neutralColor: "#27272a";
-    };
+declare const DEFAULT_THEME: {
     readonly light: {
-        readonly primaryColor: "#000000";
-        readonly secondaryColor: "#f4f4f5";
-        readonly backgroundColor: "#ffffff";
-        readonly neutralColor: "#e4e4e7";
+        readonly background: "hsl(0 0% 100%)";
+        readonly foreground: "hsl(240 10% 3.9%)";
+        readonly card: "hsl(0 0% 100%)";
+        readonly cardForeground: "hsl(240 10% 3.9%)";
+        readonly popover: "hsl(0 0% 100%)";
+        readonly popoverForeground: "hsl(240 10% 3.9%)";
+        readonly primary: "hsl(240 5.9% 10%)";
+        readonly primaryForeground: "hsl(0 0% 98%)";
+        readonly secondary: "hsl(240 4.8% 95.9%)";
+        readonly secondaryForeground: "hsl(240 5.9% 10%)";
+        readonly muted: "hsl(240 4.8% 95.9%)";
+        readonly mutedForeground: "hsl(240 3.8% 46.1%)";
+        readonly accent: "hsl(240 4.8% 95.9%)";
+        readonly accentForeground: "hsl(240 5.9% 10%)";
+        readonly destructive: "hsl(0 84.2% 60.2%)";
+        readonly destructiveForeground: "hsl(0 0% 98%)";
+        readonly border: "hsl(240 5.9% 90%)";
+        readonly input: "hsl(240 5.9% 90%)";
+        readonly ring: "hsl(240 10% 3.9%)";
+    };
+    readonly dark: {
+        readonly background: "hsl(240 10% 3.9%)";
+        readonly foreground: "hsl(0 0% 98%)";
+        readonly card: "hsl(240 10% 3.9%)";
+        readonly cardForeground: "hsl(0 0% 98%)";
+        readonly popover: "hsl(240 10% 3.9%)";
+        readonly popoverForeground: "hsl(0 0% 98%)";
+        readonly primary: "hsl(0 0% 98%)";
+        readonly primaryForeground: "hsl(240 5.9% 10%)";
+        readonly secondary: "hsl(240 3.7% 15.9%)";
+        readonly secondaryForeground: "hsl(0 0% 98%)";
+        readonly muted: "hsl(240 3.7% 15.9%)";
+        readonly mutedForeground: "hsl(240 5% 64.9%)";
+        readonly accent: "hsl(240 3.7% 15.9%)";
+        readonly accentForeground: "hsl(0 0% 98%)";
+        readonly destructive: "hsl(0 62.8% 30.6%)";
+        readonly destructiveForeground: "hsl(0 0% 98%)";
+        readonly border: "hsl(240 3.7% 15.9%)";
+        readonly input: "hsl(240 3.7% 15.9%)";
+        readonly ring: "hsl(240 4.9% 83.9%)";
     };
+    readonly radius: "0.5rem";
 };
 
-export { DEFAULT_COLORS, FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS, SELECTED_BACKGROUND_COLORS, SHADOW };
+export { DEFAULT_THEME, FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS, SELECTED_BACKGROUND_COLORS, SHADOW };

package/dist/utils/constants.d.ts

@@ -30,19 +30,50 @@ declare const LINK_COLORS: {
     readonly light: "#000";
 };
 declare const SHADOW = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
-declare const DEFAULT_COLORS: {
-    readonly dark: {
-        readonly primaryColor: "#ffffff";
-        readonly secondaryColor: "#27272a";
-        readonly backgroundColor: "#000000";
-        readonly neutralColor: "#27272a";
-    };
+declare const DEFAULT_THEME: {
     readonly light: {
-        readonly primaryColor: "#000000";
-        readonly secondaryColor: "#f4f4f5";
-        readonly backgroundColor: "#ffffff";
-        readonly neutralColor: "#e4e4e7";
+        readonly background: "hsl(0 0% 100%)";
+        readonly foreground: "hsl(240 10% 3.9%)";
+        readonly card: "hsl(0 0% 100%)";
+        readonly cardForeground: "hsl(240 10% 3.9%)";
+        readonly popover: "hsl(0 0% 100%)";
+        readonly popoverForeground: "hsl(240 10% 3.9%)";
+        readonly primary: "hsl(240 5.9% 10%)";
+        readonly primaryForeground: "hsl(0 0% 98%)";
+        readonly secondary: "hsl(240 4.8% 95.9%)";
+        readonly secondaryForeground: "hsl(240 5.9% 10%)";
+        readonly muted: "hsl(240 4.8% 95.9%)";
+        readonly mutedForeground: "hsl(240 3.8% 46.1%)";
+        readonly accent: "hsl(240 4.8% 95.9%)";
+        readonly accentForeground: "hsl(240 5.9% 10%)";
+        readonly destructive: "hsl(0 84.2% 60.2%)";
+        readonly destructiveForeground: "hsl(0 0% 98%)";
+        readonly border: "hsl(240 5.9% 90%)";
+        readonly input: "hsl(240 5.9% 90%)";
+        readonly ring: "hsl(240 10% 3.9%)";
+    };
+    readonly dark: {
+        readonly background: "hsl(240 10% 3.9%)";
+        readonly foreground: "hsl(0 0% 98%)";
+        readonly card: "hsl(240 10% 3.9%)";
+        readonly cardForeground: "hsl(0 0% 98%)";
+        readonly popover: "hsl(240 10% 3.9%)";
+        readonly popoverForeground: "hsl(0 0% 98%)";
+        readonly primary: "hsl(0 0% 98%)";
+        readonly primaryForeground: "hsl(240 5.9% 10%)";
+        readonly secondary: "hsl(240 3.7% 15.9%)";
+        readonly secondaryForeground: "hsl(0 0% 98%)";
+        readonly muted: "hsl(240 3.7% 15.9%)";
+        readonly mutedForeground: "hsl(240 5% 64.9%)";
+        readonly accent: "hsl(240 3.7% 15.9%)";
+        readonly accentForeground: "hsl(0 0% 98%)";
+        readonly destructive: "hsl(0 62.8% 30.6%)";
+        readonly destructiveForeground: "hsl(0 0% 98%)";
+        readonly border: "hsl(240 3.7% 15.9%)";
+        readonly input: "hsl(240 3.7% 15.9%)";
+        readonly ring: "hsl(240 4.9% 83.9%)";
     };
+    readonly radius: "0.5rem";
 };
 
-export { DEFAULT_COLORS, FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS, SELECTED_BACKGROUND_COLORS, SHADOW };
+export { DEFAULT_THEME, FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS, PRIMARY_FONT_COLORS, SECONDARY_FONT_COLORS, SELECTED_BACKGROUND_COLORS, SHADOW };

package/dist/utils/constants.js

@@ -20,7 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/utils/constants.tsx
 var constants_exports = {};
 __export(constants_exports, {
-  DEFAULT_COLORS: () => DEFAULT_COLORS,
+  DEFAULT_THEME: () => DEFAULT_THEME,
   FONT_FAMILY: () => FONT_FAMILY,
   FONT_SIZES: () => FONT_SIZES,
   LINE_HEIGHTS: () => LINE_HEIGHTS,
@@ -39,23 +39,54 @@ var SECONDARY_FONT_COLORS = { "dark": "#a8a8a8", "light": "#737373" };
 var SELECTED_BACKGROUND_COLORS = { "dark": "rgba(255, 255, 255, 0.1)", "light": "rgba(0, 0, 0, 0.04)" };
 var LINK_COLORS = { "dark": "#fff", "light": "#000" };
 var SHADOW = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
-var DEFAULT_COLORS = {
+var DEFAULT_THEME = {
+  light: {
+    background: "hsl(0 0% 100%)",
+    foreground: "hsl(240 10% 3.9%)",
+    card: "hsl(0 0% 100%)",
+    cardForeground: "hsl(240 10% 3.9%)",
+    popover: "hsl(0 0% 100%)",
+    popoverForeground: "hsl(240 10% 3.9%)",
+    primary: "hsl(240 5.9% 10%)",
+    primaryForeground: "hsl(0 0% 98%)",
+    secondary: "hsl(240 4.8% 95.9%)",
+    secondaryForeground: "hsl(240 5.9% 10%)",
+    muted: "hsl(240 4.8% 95.9%)",
+    mutedForeground: "hsl(240 3.8% 46.1%)",
+    accent: "hsl(240 4.8% 95.9%)",
+    accentForeground: "hsl(240 5.9% 10%)",
+    destructive: "hsl(0 84.2% 60.2%)",
+    destructiveForeground: "hsl(0 0% 98%)",
+    border: "hsl(240 5.9% 90%)",
+    input: "hsl(240 5.9% 90%)",
+    ring: "hsl(240 10% 3.9%)"
+  },
   dark: {
-    primaryColor: "#ffffff",
-    secondaryColor: "#27272a",
-    backgroundColor: "#000000",
-    neutralColor: "#27272a"
+    background: "hsl(240 10% 3.9%)",
+    foreground: "hsl(0 0% 98%)",
+    card: "hsl(240 10% 3.9%)",
+    cardForeground: "hsl(0 0% 98%)",
+    popover: "hsl(240 10% 3.9%)",
+    popoverForeground: "hsl(0 0% 98%)",
+    primary: "hsl(0 0% 98%)",
+    primaryForeground: "hsl(240 5.9% 10%)",
+    secondary: "hsl(240 3.7% 15.9%)",
+    secondaryForeground: "hsl(0 0% 98%)",
+    muted: "hsl(240 3.7% 15.9%)",
+    mutedForeground: "hsl(240 5% 64.9%)",
+    accent: "hsl(240 3.7% 15.9%)",
+    accentForeground: "hsl(0 0% 98%)",
+    destructive: "hsl(0 62.8% 30.6%)",
+    destructiveForeground: "hsl(0 0% 98%)",
+    border: "hsl(240 3.7% 15.9%)",
+    input: "hsl(240 3.7% 15.9%)",
+    ring: "hsl(240 4.9% 83.9%)"
   },
-  light: {
-    primaryColor: "#000000",
-    secondaryColor: "#f4f4f5",
-    backgroundColor: "#ffffff",
-    neutralColor: "#e4e4e7"
-  }
+  radius: "0.5rem"
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DEFAULT_COLORS,
+  DEFAULT_THEME,
   FONT_FAMILY,
   FONT_SIZES,
   LINE_HEIGHTS,

package/dist/utils/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/constants.tsx"],"sourcesContent":["export const FONT_SIZES = {'xs': '0.75rem', 'sm': '0.875rem', 'md': '1rem', 'lg': '1.125rem', 'xl': '1.25rem'} as const;\nexport const LINE_HEIGHTS = {'xs': '1rem', 'sm': '1.25rem', 'md': '1.5rem', 'lg': '1.75rem', 'xl': '2rem'} as const;\nexport const FONT_FAMILY = 'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"';\nexport const PRIMARY_FONT_COLORS = { 'dark': 'white', 'light': 'black' } as const;\nexport const SECONDARY_FONT_COLORS = { 'dark': '#a8a8a8', 'light': '#737373' } as const;\nexport const SELECTED_BACKGROUND_COLORS = { 'dark': 'rgba(255, 255, 255, 0.1)', 'light': 'rgba(0, 0, 0, 0.04)' } as const;\nexport const LINK_COLORS = { 'dark': '#fff', 'light': '#000' } as const;\nexport const SHADOW = '0 1px 2px 0 rgba(0, 0, 0, 0.05)';\nexport const DEFAULT_COLORS = ({\n  dark: {\n    primaryColor: '#ffffff',\n    secondaryColor: '#27272a',\n    backgroundColor: '#000000',\n    neutralColor: '#27272a',\n  },\n  light: {\n    primaryColor: '#000000',\n    secondaryColor: '#f4f4f5',\n    backgroundColor: '#ffffff',\n    neutralColor: '#e4e4e7',\n  },\n} as const);"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,aAAa,EAAC,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ,MAAM,YAAY,MAAM,UAAS;AACtG,IAAM,eAAe,EAAC,MAAM,QAAQ,MAAM,WAAW,MAAM,UAAU,MAAM,WAAW,MAAM,OAAM;AAClG,IAAM,cAAc;AACpB,IAAM,sBAAsB,EAAE,QAAQ,SAAS,SAAS,QAAQ;AAChE,IAAM,wBAAwB,EAAE,QAAQ,WAAW,SAAS,UAAU;AACtE,IAAM,6BAA6B,EAAE,QAAQ,4BAA4B,SAAS,sBAAsB;AACxG,IAAM,cAAc,EAAE,QAAQ,QAAQ,SAAS,OAAO;AACtD,IAAM,SAAS;AACf,IAAM,iBAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,cAAc;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,IACL,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,cAAc;AAAA,EAChB;AACF;","names":[]}
+{"version":3,"sources":["../../src/utils/constants.tsx"],"sourcesContent":["export const FONT_SIZES = {'xs': '0.75rem', 'sm': '0.875rem', 'md': '1rem', 'lg': '1.125rem', 'xl': '1.25rem'} as const;\nexport const LINE_HEIGHTS = {'xs': '1rem', 'sm': '1.25rem', 'md': '1.5rem', 'lg': '1.75rem', 'xl': '2rem'} as const;\nexport const FONT_FAMILY = 'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"';\nexport const PRIMARY_FONT_COLORS = { 'dark': 'white', 'light': 'black' } as const;\nexport const SECONDARY_FONT_COLORS = { 'dark': '#a8a8a8', 'light': '#737373' } as const;\nexport const SELECTED_BACKGROUND_COLORS = { 'dark': 'rgba(255, 255, 255, 0.1)', 'light': 'rgba(0, 0, 0, 0.04)' } as const;\nexport const LINK_COLORS = { 'dark': '#fff', 'light': '#000' } as const;\nexport const SHADOW = '0 1px 2px 0 rgba(0, 0, 0, 0.05)';\n\nexport const DEFAULT_THEME = {\n  light: {\n    background: 'hsl(0 0% 100%)',\n    foreground: 'hsl(240 10% 3.9%)',\n    card: 'hsl(0 0% 100%)',\n    cardForeground: 'hsl(240 10% 3.9%)',\n    popover: 'hsl(0 0% 100%)',\n    popoverForeground: 'hsl(240 10% 3.9%)',\n    primary: 'hsl(240 5.9% 10%)',\n    primaryForeground: 'hsl(0 0% 98%)',\n    secondary: 'hsl(240 4.8% 95.9%)',\n    secondaryForeground: 'hsl(240 5.9% 10%)',\n    muted: 'hsl(240 4.8% 95.9%)',\n    mutedForeground: 'hsl(240 3.8% 46.1%)',\n    accent: 'hsl(240 4.8% 95.9%)',\n    accentForeground: 'hsl(240 5.9% 10%)',\n    destructive: 'hsl(0 84.2% 60.2%)',\n    destructiveForeground: 'hsl(0 0% 98%)',\n    border: 'hsl(240 5.9% 90%)',\n    input: 'hsl(240 5.9% 90%)',\n    ring: 'hsl(240 10% 3.9%)',\n  },\n  dark: {\n    background: 'hsl(240 10% 3.9%)',\n    foreground: 'hsl(0 0% 98%)',\n    card: 'hsl(240 10% 3.9%)',\n    cardForeground: 'hsl(0 0% 98%)',\n    popover: 'hsl(240 10% 3.9%)',\n    popoverForeground: 'hsl(0 0% 98%)',\n    primary: 'hsl(0 0% 98%)',\n    primaryForeground: 'hsl(240 5.9% 10%)',\n    secondary: 'hsl(240 3.7% 15.9%)',\n    secondaryForeground: 'hsl(0 0% 98%)',\n    muted: 'hsl(240 3.7% 15.9%)',\n    mutedForeground: 'hsl(240 5% 64.9%)',\n    accent: 'hsl(240 3.7% 15.9%)',\n    accentForeground: 'hsl(0 0% 98%)',\n    destructive: 'hsl(0 62.8% 30.6%)',\n    destructiveForeground: 'hsl(0 0% 98%)',\n    border: 'hsl(240 3.7% 15.9%)',\n    input: 'hsl(240 3.7% 15.9%)',\n    ring: 'hsl(240 4.9% 83.9%)',\n  },\n  radius: '0.5rem',\n} as const;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,aAAa,EAAC,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ,MAAM,YAAY,MAAM,UAAS;AACtG,IAAM,eAAe,EAAC,MAAM,QAAQ,MAAM,WAAW,MAAM,UAAU,MAAM,WAAW,MAAM,OAAM;AAClG,IAAM,cAAc;AACpB,IAAM,sBAAsB,EAAE,QAAQ,SAAS,SAAS,QAAQ;AAChE,IAAM,wBAAwB,EAAE,QAAQ,WAAW,SAAS,UAAU;AACtE,IAAM,6BAA6B,EAAE,QAAQ,4BAA4B,SAAS,sBAAsB;AACxG,IAAM,cAAc,EAAE,QAAQ,QAAQ,SAAS,OAAO;AACtD,IAAM,SAAS;AAEf,IAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AACV;","names":[]}