npm - @tanstack/devtools-ui - Versions diffs - 0.3.3 → 0.3.4 - Mend

@tanstack/devtools-ui 0.3.3 → 0.3.4

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 (16) hide show

package/dist/esm/components/main-panel.js +1 -3
package/dist/esm/components/main-panel.js.map +1 -1
package/dist/esm/components/theme.d.ts +12 -0
package/dist/esm/components/theme.js +30 -0
package/dist/esm/components/theme.js.map +1 -0
package/dist/esm/index.d.ts +1 -0
package/dist/esm/index.js +4 -1
package/dist/esm/index.js.map +1 -1
package/dist/esm/styles/use-styles.d.ts +1 -2
package/dist/esm/styles/use-styles.js +79 -72
package/dist/esm/styles/use-styles.js.map +1 -1
package/package.json +1 -1
package/src/components/main-panel.tsx +6 -3
package/src/components/theme.tsx +34 -0
package/src/index.ts +1 -0
package/src/styles/use-styles.ts +83 -73

package/dist/esm/components/main-panel.js CHANGED Viewed

@@ -12,9 +12,7 @@ const MainPanel = ({
   return (() => {
     var _el$ = _tmpl$();
     insert(_el$, children);
-    effect(() => className(_el$, clsx(styles().mainPanel.panel, className$1, classStyles, {
-      [styles().mainPanel.withPadding]: withPadding
-    })));
+    effect(() => className(_el$, clsx(styles().mainPanel.panel(Boolean(withPadding)), className$1, classStyles)));
     return _el$;
   })();
 };

package/dist/esm/components/main-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main-panel.js","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\ntype PanelProps = JSX.IntrinsicElements['div'] & {\n children?: any\n className?: string\n withPadding?: boolean\n}\n\nexport const MainPanel = ({\n className,\n children,\n class: classStyles,\n withPadding,\n}: PanelProps) => {\n const styles = useStyles()\n return (\n <div\n class={clsx(~~styles().mainPanel.panel, className, classStyles, {~~\n [styles().mainPanel.withPadding~~]: withPadding~~,\n })}\n >\n {children}\n </div>\n )\n}\n"],"names":["MainPanel","className","children","class","classStyles","withPadding","styles","useStyles","_el$","_tmpl$","_$insert","_$effect","_$className","clsx","mainPanel","panel"],"mappings":";;;;AAUO,MAAMA,YAAYA,CAAC;AAAA,EAAA,WACxBC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AAAAA,EACPC;AACU,MAAM;AAChB,QAAMC,SAASC,UAAAA;~~AACf~~,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,~~MAMKN~~,QAAQ;AAAAS,~~iBAAAC~~,UAAAJ,~~MAJFK~~,~~KAAKP~~,SAASQ,UAAUC,~~OAAOd~~,~~aAAWG~~,~~aAAa;AAAA~~,~~MAC5D~~,~~CAACE~~,~~OAAAA~~,~~EAASQ~~,~~UAAUT,WAAW,GAAGA;AAAAA,IAAAA,CACnC,~~CAAC,CAAA;AAAA,~~WAAAG~~;AAAAA,EAAA,GAAA;~~AAKR~~;"}
1	+ {"version":3,"file":"main-panel.js","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useStyles } from '../styles/use-styles'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\ntype PanelProps = JSX.IntrinsicElements['div'] & {\n children?: any\n className?: string\n withPadding?: boolean\n}\n\nexport const MainPanel = ({\n className,\n children,\n class: classStyles,\n withPadding,\n}: PanelProps) => {\n const styles = useStyles()\n\n return (\n <div\n class={clsx(\n styles().mainPanel.panel(Boolean(withPadding)),\n className,\n classStyles,\n )}\n >\n {children}\n </div>\n )\n}\n"],"names":["MainPanel","className","children","class","classStyles","withPadding","styles","useStyles","_el$","_tmpl$","_$insert","_$effect","_$className","clsx","mainPanel","panel","Boolean"],"mappings":";;;;AAUO,MAAMA,YAAYA,CAAC;AAAA,EAAA,WACxBC;AAAAA,EACAC;AAAAA,EACAC,OAAOC;AAAAA,EACPC;AACU,MAAM;AAChB,QAAMC,SAASC,UAAAA;AAEf,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAQKN,QAAQ;AAAAS,WAAA,MAAAC,UAAAJ,MANFK,KACLP,SAASQ,UAAUC,MAAMC,QAAQX,WAAW,CAAC,GAC7CJ,aACAG,WACF,CAAC,CAAA;AAAA,WAAAI;AAAAA,EAAA,GAAA;AAKP;"}

package/dist/esm/components/theme.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Accessor, JSX } from 'solid-js';
+export type Theme = 'light' | 'dark';
+type ThemeContextValue = {
+    theme: Accessor<Theme>;
+    setTheme: (theme: Theme) => void;
+};
+export declare const ThemeContextProvider: (props: {
+    children: JSX.Element;
+    theme: Theme;
+}) => JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};

package/dist/esm/components/theme.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { createComponent } from "solid-js/web";
+import { createContext, createSignal, createEffect, useContext } from "solid-js";
+const ThemeContext = createContext(void 0);
+const ThemeContextProvider = (props) => {
+  const [theme, setTheme] = createSignal(props.theme);
+  createEffect(() => {
+    setTheme(props.theme);
+  });
+  return createComponent(ThemeContext.Provider, {
+    value: {
+      theme,
+      setTheme
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeContextProvider");
+  }
+  return context;
+}
+export {
+  ThemeContextProvider,
+  useTheme
+};
+//# sourceMappingURL=theme.js.map

package/dist/esm/components/theme.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"theme.js","sources":["../../../src/components/theme.tsx"],"sourcesContent":["import { createContext, createEffect, createSignal, useContext } from 'solid-js'\nimport type { Accessor, JSX } from 'solid-js'\n\nexport type Theme = 'light' | 'dark'\n\ntype ThemeContextValue = {\n theme: Accessor<Theme>\n setTheme: (theme: Theme) => void\n}\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined)\n\nexport const ThemeContextProvider = (props: {\n children: JSX.Element\n theme: Theme\n}) => {\n const [theme, setTheme] = createSignal<Theme>(props.theme)\n createEffect(() => {\n setTheme(props.theme)\n })\n return (\n <ThemeContext.Provider value={{ theme, setTheme }}>\n {props.children}\n </ThemeContext.Provider>\n )\n}\n\nexport function useTheme() {\n const context = useContext(ThemeContext)\n if (!context) {\n throw new Error('useTheme must be used within a ThemeContextProvider')\n }\n\n return context\n}\n"],"names":["ThemeContext","createContext","undefined","ThemeContextProvider","props","theme","setTheme","createSignal","createEffect","_$createComponent","Provider","value","children","useTheme","context","useContext","Error"],"mappings":";;AASA,MAAMA,eAAeC,cAA6CC,MAAS;AAEpE,MAAMC,uBAAuBA,CAACC,UAG/B;AACJ,QAAM,CAACC,OAAOC,QAAQ,IAAIC,aAAoBH,MAAMC,KAAK;AACzDG,eAAa,MAAM;AACjBF,aAASF,MAAMC,KAAK;AAAA,EACtB,CAAC;AACD,SAAAI,gBACGT,aAAaU,UAAQ;AAAA,IAACC,OAAO;AAAA,MAAEN;AAAAA,MAAOC;AAAAA,IAAAA;AAAAA,IAAU,IAAAM,WAAA;AAAA,aAC9CR,MAAMQ;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;AAEO,SAASC,WAAW;AACzB,QAAMC,UAAUC,WAAWf,YAAY;AACvC,MAAI,CAACc,SAAS;AACZ,UAAM,IAAIE,MAAM,qDAAqD;AAAA,EACvE;AAEA,SAAOF;AACT;"}

package/dist/esm/index.d.ts CHANGED Viewed

@@ -8,3 +8,4 @@ export { Tag } from './components/tag.js';
 export { MainPanel } from './components/main-panel.js';
 export { Section, SectionTitle, SectionDescription, SectionIcon, } from './components/section.js';
 export { Header, HeaderLogo } from './components/header.js';
+export { useTheme, ThemeContextProvider } from './components/theme.js';

package/dist/esm/index.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { Tag } from "./components/tag.js";
 import { MainPanel } from "./components/main-panel.js";
 import { Section, SectionDescription, SectionIcon, SectionTitle } from "./components/section.js";
 import { Header, HeaderLogo } from "./components/header.js";
+import { ThemeContextProvider, useTheme } from "./components/theme.js";
 export {
   Button,
   Checkbox,
@@ -22,6 +23,8 @@ export {
   SectionTitle,
   Select,
   Tag,
-  TanStackLogo
+  TanStackLogo,
+  ThemeContextProvider,
+  useTheme
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/esm/styles/use-styles.d.ts CHANGED Viewed

@@ -62,7 +62,6 @@ export declare function useStyles(): import('solid-js').Accessor<{
         description: string;
     };
     mainPanel: {
-        panel: string;
-        withPadding: string;
+        panel: (withPadding: boolean) => string;
     };
 }>;

package/dist/esm/styles/use-styles.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import * as goober from "goober";
-import { createSignal } from "solid-js";
+import { createSignal, createEffect } from "solid-js";
+import { useTheme } from "../components/theme.js";
 import { tokens } from "./tokens.js";
 const buttonVariantColors = {
   primary: {
@@ -79,12 +80,12 @@ const stylesFactory = (theme = "dark") => {
     selectLabel: css`
       font-size: 0.875rem;
       font-weight: 500;
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       text-align: left;
     `,
     selectDescription: css`
       font-size: 0.8rem;
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[500], colors.gray[400])};
       margin: 0;
       line-height: 1.3;
       text-align: left;
@@ -94,9 +95,9 @@ const stylesFactory = (theme = "dark") => {
       width: 100%;
       padding: 0.75rem 3rem 0.75rem 0.75rem;
       border-radius: 0.5rem;
-      background-color: ${colors.darkGray[800]};
-      color: ${colors.gray[100]};
-      border: 1px solid ${colors.gray[700]};
+      background-color: ${t(colors.gray[50], colors.darkGray[800])};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
       font-size: 0.875rem;
       transition: all 0.2s ease;
       cursor: pointer;
@@ -108,7 +109,7 @@ const stylesFactory = (theme = "dark") => {
       background-size: 1.25rem;
       &:hover {
-        border-color: ${colors.gray[600]};
+        border-color: ${t(colors.gray[400], colors.gray[600])};
       }
       &:focus {
@@ -130,12 +131,12 @@ const stylesFactory = (theme = "dark") => {
     inputLabel: css`
       font-size: 0.875rem;
       font-weight: 500;
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       text-align: left;
     `,
     inputDescription: css`
       font-size: 0.8rem;
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[500], colors.gray[400])};
       margin: 0;
       line-height: 1.3;
       text-align: left;
@@ -145,25 +146,26 @@ const stylesFactory = (theme = "dark") => {
       width: 100%;
       padding: 0.75rem;
       border-radius: 0.5rem;
-      background-color: ${colors.darkGray[800]};
-      color: ${colors.gray[100]};
-      border: 1px solid ${colors.gray[700]};
+      background-color: ${t(colors.gray[50], colors.darkGray[800])};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
       font-size: 0.875rem;
       font-family: ${fontFamily.mono};
       transition: all 0.2s ease;
       &::placeholder {
-        color: ${colors.gray[500]};
+        color: ${t(colors.gray[400], colors.gray[500])};
       }
       &:hover {
-        border-color: ${colors.gray[600]};
+        border-color: ${t(colors.gray[400], colors.gray[600])};
       }
       &:focus {
         outline: none;
-        border-color: ${colors.purple[400]};
-        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+        border-color: ${t(colors.purple[500], colors.purple[400])};
+        box-shadow: 0 0 0 3px
+          ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};
       }
     `,
     checkboxWrapper: css`
@@ -177,7 +179,7 @@ const stylesFactory = (theme = "dark") => {
       transition: background-color 0.2s ease;
       &:hover {
-        background-color: ${colors.darkGray[800]};
+        background-color: ${t(colors.gray[100], colors.darkGray[800])};
       }
     `,
     checkboxContainer: css`
@@ -193,9 +195,9 @@ const stylesFactory = (theme = "dark") => {
       appearance: none;
       width: 1.25rem;
       height: 1.25rem;
-      border: 2px solid ${colors.gray[700]};
+      border: 2px solid ${t(colors.gray[300], colors.gray[700])};
       border-radius: 0.375rem;
-      background-color: ${colors.darkGray[800]};
+      background-color: ${t(colors.gray[50], colors.darkGray[800])};
       display: grid;
       place-items: center;
       transition: all 0.2s ease;
@@ -203,33 +205,33 @@ const stylesFactory = (theme = "dark") => {
       margin-top: 0.125rem;
       &:hover {
-        border-color: ${colors.purple[400]};
+        border-color: ${t(colors.purple[500], colors.purple[400])};
       }
       &:checked {
-        background-color: ${colors.purple[500]};
-        border-color: ${colors.purple[500]};
+        background-color: ${t(colors.purple[500], colors.purple[700])};
+        border-color: ${t(colors.purple[500], colors.purple[700])};
       }
       &:checked::after {
         content: '';
         width: 0.4rem;
         height: 0.6rem;
-        border: solid white;
+        border: solid ${t("#fff", colors.gray[100])};
         border-width: 0 2px 2px 0;
         transform: rotate(45deg);
         margin-top: -3px;
       }
     `,
     checkboxLabel: css`
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       font-size: 0.875rem;
       font-weight: 500;
       line-height: 1.4;
       text-align: left;
     `,
     checkboxDescription: css`
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[500], colors.gray[400])};
       font-size: 0.8rem;
       line-height: 1.3;
       text-align: left;
@@ -259,42 +261,42 @@ const stylesFactory = (theme = "dark") => {
         if (ghost) {
           return css`
             background: transparent;
-            color: ${v.bg};
+            color: ${t(v.bg, v.bg)};
             border-color: transparent;
             &:hover {
-              background: ${tokens.colors.purple[100]};
+              background: ${t(colors.purple[100], colors.darkGray[700])};
             }
             &:active {
-              background: ${tokens.colors.purple[200]};
+              background: ${t(colors.purple[200], colors.darkGray[800])};
             }
           `;
         }
         if (outline) {
           return css`
             background: transparent;
-            color: ${v.bg};
-            border-color: ${v.bg};
+            color: ${t(v.bg, v.bg)};
+            border-color: ${t(v.bg, v.bg)};
             &:hover {
-              background: ${tokens.colors.purple[100]};
-              border-color: ${v.hover};
+              background: ${t(colors.purple[100], colors.darkGray[700])};
+              border-color: ${t(v.hover, v.hover)};
             }
             &:active {
-              background: ${tokens.colors.purple[200]};
-              border-color: ${v.active};
+              background: ${t(colors.purple[200], colors.darkGray[800])};
+              border-color: ${t(v.active, v.active)};
             }
           `;
         }
         return css`
-          background: ${v.bg};
-          color: ${v.text};
-          border-color: ${v.border};
+          background: ${t(v.bg, v.bg)};
+          color: ${t(v.text, v.text)};
+          border-color: ${t(v.border, v.border)};
           &:hover {
-            background: ${v.hover};
-            border-color: ${v.hover};
+            background: ${t(v.hover, v.hover)};
+            border-color: ${t(v.hover, v.hover)};
           }
           &:active {
-            background: ${v.active};
-            border-color: ${v.active};
+            background: ${t(v.active, v.active)};
+            border-color: ${t(v.active, v.active)};
           }
         `;
       }
@@ -304,7 +306,10 @@ const stylesFactory = (theme = "dark") => {
         width: ${tokens.size[1.5]};
         height: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.full};
-        background-color: ${tokens.colors[color][500]};
+        background-color: ${t(
+        tokens.colors[color][500],
+        tokens.colors[color][500]
+      )};
       `,
       base: css`
         display: flex;
@@ -324,7 +329,7 @@ const stylesFactory = (theme = "dark") => {
         position: relative;
         &:focus-visible {
           outline-offset: 2px;
-          outline: 2px solid ${colors.blue[800]};
+          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
         }
       `,
       label: css`
@@ -348,7 +353,6 @@ const stylesFactory = (theme = "dark") => {
         color: ${t(colors.gray[500], colors.gray[500])};
         font-size: ${font.size.xs};
         margin-right: ${size[1]};
-        /* outline: 1px solid ${colors.yellow[400]}; */
       `,
       actionButton: css`
         background-color: transparent;
@@ -370,7 +374,7 @@ const stylesFactory = (theme = "dark") => {
         &:focus-visible {
           border-radius: ${border.radius.xs};
-          outline: 2px solid ${colors.blue[800]};
+          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
           outline-offset: 2px;
         }
       `,
@@ -382,7 +386,7 @@ const stylesFactory = (theme = "dark") => {
         left: -16px;
         top: 3px;
         & path {
-          stroke: ${colors.blue[300]};
+          stroke: ${t(colors.blue[400], colors.blue[300])};
         }
         & svg {
           width: ${size[3]};
@@ -392,19 +396,18 @@ const stylesFactory = (theme = "dark") => {
         display: inline-flex;
         align-items: center;
         transition: all 0.1s ease;
-        /* outline: 1px solid ${colors.blue[400]}; */
       `,
       expandedLine: (hasBorder) => css`
         display: block;
         padding-left: 0.75rem;
         margin-left: -0.7rem;
-        ${hasBorder ? `border-left: 1px solid ${colors.blue[300]};` : ""}
+        ${hasBorder ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};` : ""}
       `,
       collapsible: css`
         cursor: pointer;
         transition: all 0.2s ease;
         &:hover {
-          background-color: ${colors.darkGray[700]};
+          background-color: ${t(colors.gray[100], colors.darkGray[700])};
           border-radius: ${tokens.border.radius.sm};
           padding: 0 ${tokens.size[1]};
         }
@@ -420,26 +423,26 @@ const stylesFactory = (theme = "dark") => {
         }
       `,
       valueCollapsed: css`
-        color: ${colors.gray[400]};
+        color: ${t(colors.gray[500], colors.gray[400])};
       `,
       valueFunction: css`
-        color: ${colors.cyan[400]};
+        color: ${t(colors.cyan[500], colors.cyan[400])};
       `,
       valueString: css`
-        color: ${colors.green[400]};
+        color: ${t(colors.green[500], colors.green[400])};
       `,
       valueNumber: css`
-        color: ${colors.yellow[400]};
+        color: ${t(colors.yellow[500], colors.yellow[400])};
       `,
       valueBoolean: css`
-        color: ${colors.pink[400]};
+        color: ${t(colors.pink[500], colors.pink[400])};
       `,
       valueNull: css`
-        color: ${colors.gray[400]};
+        color: ${t(colors.gray[500], colors.gray[400])};
         font-style: italic;
       `,
       valueKey: css`
-        color: ${colors.blue[300]};
+        color: ${t(colors.blue[400], colors.blue[300])};
       `,
       valueBraces: css`
         color: ${colors.gray[500]};
@@ -502,7 +505,7 @@ const stylesFactory = (theme = "dark") => {
         font-weight: ${font.weight.bold};
         line-height: ${font.lineHeight.xs};
         white-space: nowrap;
-        color: ${t(colors.gray[600], colors.gray[300])};
+        color: ${t(colors.gray[700], colors.gray[300])};
       `,
       flavorLogo: (flavorLight, flavorDark) => css`
         font-weight: ${font.weight.semibold};
@@ -519,18 +522,21 @@ const stylesFactory = (theme = "dark") => {
       main: css`
         margin-bottom: 2rem;
         padding: 1.5rem;
-        background-color: ${colors.darkGray[800]};
-        border: 1px solid ${colors.gray[700]};
+        background-color: ${t(colors.gray[50], colors.darkGray[800])};
+        border: 1px solid ${t(colors.gray[300], colors.gray[700])};
         border-radius: 0.75rem;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        box-shadow: ${t(
+        "0 1px 3px rgba(0,0,0,0.06)",
+        "0 1px 3px rgba(0,0,0,0.18)"
+      )};
       `,
       title: css`
         font-size: 1.125rem;
         font-weight: 600;
-        color: ${colors.gray[100]};
+        color: ${t(colors.gray[900], colors.gray[100])};
         margin: 0 0 1rem 0;
         padding-bottom: 0.5rem;
-        border-bottom: 1px solid ${colors.gray[700]};
+        border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
         display: flex;
         align-items: center;
         gap: 0.5rem;
@@ -543,10 +549,10 @@ const stylesFactory = (theme = "dark") => {
           height: 100%;
           width: 100%;
         }
-        color: ${colors.purple[400]};
+        color: ${t(colors.purple[500], colors.purple[400])};
       `,
       description: css`
-        color: ${colors.gray[400]};
+        color: ${t(colors.gray[500], colors.gray[400])};
         font-size: 0.875rem;
         margin: 0 0 1.5rem 0;
         line-height: 1.5;
@@ -554,21 +560,22 @@ const stylesFactory = (theme = "dark") => {
       `
     },
     mainPanel: {
-      panel: css`
-        padding: 0;
-        background: ${colors.darkGray[700]};
+      panel: (withPadding) => css`
+        padding: ${withPadding ? tokens.size[4] : 0};
+        background: ${t(colors.gray[50], colors.darkGray[700])};
         overflow-y: auto;
         height: 100%;
-      `,
-      withPadding: css`
-        padding: ${tokens.size[4]};
       `
     }
   };
 };
 function useStyles() {
-  const [_styles] = createSignal(stylesFactory());
-  return _styles;
+  const { theme } = useTheme();
+  const [styles, setStyles] = createSignal(stylesFactory(theme()));
+  createEffect(() => {
+    setStyles(stylesFactory(theme()));
+  });
+  return styles;
 }
 export {
   css,

package/dist/esm/styles/use-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\n\nconst buttonVariantColors: Record<\n ButtonVariant,\n { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n primary: {\n bg: tokens.colors.purple[500],\n hover: tokens.colors.purple[600],\n active: tokens.colors.purple[700],\n text: '#fff',\n border: tokens.colors.purple[500],\n },\n secondary: {\n bg: tokens.colors.gray[800],\n hover: tokens.colors.gray[700],\n active: tokens.colors.gray[600],\n text: tokens.colors.gray[100],\n border: tokens.colors.gray[700],\n },\n info: {\n bg: tokens.colors.blue[500],\n hover: tokens.colors.blue[600],\n active: tokens.colors.blue[700],\n text: '#fff',\n border: tokens.colors.blue[500],\n },\n warning: {\n bg: tokens.colors.yellow[500],\n hover: tokens.colors.yellow[600],\n active: tokens.colors.yellow[700],\n text: '#fff',\n border: tokens.colors.yellow[500],\n },\n danger: {\n bg: tokens.colors.red[500],\n hover: tokens.colors.red[600],\n active: tokens.colors.red[700],\n text: '#fff',\n border: tokens.colors.red[500],\n },\n success: {\n bg: tokens.colors.green[500],\n hover: tokens.colors.green[600],\n active: tokens.colors.green[700],\n text: '#fff',\n border: tokens.colors.green[500],\n },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: 'light' \| 'dark' = 'dark') => {\n const { colors, font, size, alpha, border } = tokens\n const { fontFamily } = font\n\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n return {\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n width: ${size[12]};\n height: ${size[12]};\n font-family: ${fontFamily.sans};\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n `,\n\n selectWrapper: css`\n width: 100%;\n max-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n selectContainer: css`\n width: 100%;\n `,\n selectLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${colors.gray[100]};\n text-align: left;\n `,\n selectDescription: css`\n font-size: 0.8rem;\n color: ${colors.gray[400]};\n margin: 0;\n line-height: 1.3;\n text-align: left;\n `,\n select: css`\n appearance: none;\n width: 100%;\n padding: 0.75rem 3rem 0.75rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ${colors.darkGray[800]};\n color: ${colors.gray[100]};\n border: 1px solid ${colors.gray[700]};\n font-size: 0.875rem;\n transition: all 0.2s ease;\n cursor: pointer;\n\n /* Custom arrow /\n background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n background-repeat: no-repeat;\n background-position: right 0.75rem center;\n background-size: 1.25rem;\n\n &:hover {\n border-color: ${colors.gray[600]};\n }\n\n &:focus {\n outline: none;\n border-color: ${colors.purple[400]};\n box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n }\n `,\n inputWrapper: css`\n width: 100%;\n max-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n inputContainer: css`\n width: 100%;\n `,\n inputLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${colors.gray[100]};\n text-align: left;\n `,\n inputDescription: css`\n font-size: 0.8rem;\n color: ${colors.gray[400]};\n margin: 0;\n line-height: 1.3;\n text-align: left;\n `,\n input: css`\n appearance: none;\n width: 100%;\n padding: 0.75rem;\n border-radius: 0.5rem;\n background-color: ${colors.darkGray[800]};\n color: ${colors.gray[100]};\n border: 1px solid ${colors.gray[700]};\n font-size: 0.875rem;\n font-family: ${fontFamily.mono};\n transition: all 0.2s ease;\n\n &::placeholder {\n color: ${colors.gray[500]};\n }\n\n &:hover {\n border-color: ${colors.gray[600]};\n }\n\n &:focus {\n outline: none;\n border-color: ${colors.purple[400]};\n box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n }\n `,\n checkboxWrapper: css`\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n cursor: pointer;\n user-select: none;\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ${colors.darkGray[800]};\n }\n `,\n checkboxContainer: css`\n width: 100%;\n `,\n checkboxLabelContainer: css`\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n flex: 1;\n `,\n checkbox: css`\n appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid ${colors.gray[700]};\n border-radius: 0.375rem;\n background-color: ${colors.darkGray[800]};\n display: grid;\n place-items: center;\n transition: all 0.2s ease;\n flex-shrink: 0;\n margin-top: 0.125rem;\n\n &:hover {\n border-color: ${colors.purple[400]};\n }\n\n &:checked {\n background-color: ${colors.purple[500]};\n border-color: ${colors.purple[500]};\n }\n\n &:checked::after {\n content: '';\n width: 0.4rem;\n height: 0.6rem;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n margin-top: -3px;\n }\n `,\n checkboxLabel: css`\n color: ${colors.gray[100]};\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.4;\n text-align: left;\n `,\n checkboxDescription: css`\n color: ${colors.gray[400]};\n font-size: 0.8rem;\n line-height: 1.3;\n text-align: left;\n `,\n button: {\n base: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: ${tokens.font.fontFamily.sans};\n font-size: 0.8rem;\n font-weight: 500;\n border-radius: 0.2rem;\n padding: 0.2rem 0.6rem;\n cursor: pointer;\n transition:\n background 0.2s,\n color 0.2s,\n border 0.2s,\n box-shadow 0.2s;\n outline: none;\n border-width: 1px;\n border-style: solid;\n `,\n variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n const v = buttonVariantColors[variant]\n if (ghost) {\n return css`\n background: transparent;\n color: ${v.bg};\n border-color: transparent;\n &:hover {\n background: ${tokens.colors.purple[100]};\n }\n &:active {\n background: ${tokens.colors.purple[200]};\n }\n `\n }\n if (outline) {\n return css`\n background: transparent;\n color: ${v.bg};\n border-color: ${v.bg};\n &:hover {\n background: ${tokens.colors.purple[100]};\n border-color: ${v.hover};\n }\n &:active {\n background: ${tokens.colors.purple[200]};\n border-color: ${v.active};\n }\n `\n }\n // Default solid button\n return css`\n background: ${v.bg};\n color: ${v.text};\n border-color: ${v.border};\n &:hover {\n background: ${v.hover};\n border-color: ${v.hover};\n }\n &:active {\n background: ${v.active};\n border-color: ${v.active};\n }\n `\n },\n },\n tag: {\n dot: (color: keyof typeof tokens.colors) => css`\n width: ${tokens.size[1.5]};\n height: ${tokens.size[1.5]};\n border-radius: ${tokens.border.radius.full};\n background-color: ${tokens.colors[color][500]};\n `,\n base: css`\n display: flex;\n gap: ${tokens.size[1.5]};\n box-sizing: border-box;\n height: ${tokens.size[6.5]};\n background: ${t(colors.gray[50], colors.darkGray[500])};\n color: ${t(colors.gray[700], colors.gray[300])};\n border-radius: ${tokens.border.radius.sm};\n font-size: ${font.size.sm};\n padding: ${tokens.size[1]};\n padding-left: ${tokens.size[1.5]};\n align-items: center;\n font-weight: ${font.weight.medium};\n border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n user-select: none;\n position: relative;\n &:focus-visible {\n outline-offset: 2px;\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n label: css`\n font-size: ${font.size.xs};\n `,\n count: css`\n font-size: ${font.size.xs};\n padding: 0 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${t(colors.gray[500], colors.gray[400])};\n background-color: ${t(colors.gray[200], colors.darkGray[300])};\n border-radius: 2px;\n font-variant-numeric: tabular-nums;\n height: ${tokens.size[4.5]};\n `,\n },\n tree: {\n info: css`\n color: ${t(colors.gray[500], colors.gray[500])};\n font-size: ${font.size.xs};\n margin-right: ${size[1]};\n / outline: 1px solid ${colors.yellow[400]}; /\n `,\n actionButton: css`\n background-color: transparent;\n color: ${t(colors.gray[500], colors.gray[500])};\n border: none;\n display: inline-flex;\n padding: 0px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: ${size[3]};\n height: ${size[3]};\n position: relative;\n z-index: 1;\n\n &:hover svg {\n color: ${t(colors.gray[600], colors.gray[400])};\n }\n\n &:focus-visible {\n border-radius: ${border.radius.xs};\n outline: 2px solid ${colors.blue[800]};\n outline-offset: 2px;\n }\n `,\n expanderContainer: css`\n position: relative;\n `,\n expander: css`\n position: absolute;\n left: -16px;\n top: 3px;\n & path {\n stroke: ${colors.blue[300]};\n }\n & svg {\n width: ${size[3]};\n height: ${size[3]};\n }\n\n display: inline-flex;\n align-items: center;\n transition: all 0.1s ease;\n / outline: 1px solid ${colors.blue[400]}; */\n `,\n expandedLine: (hasBorder: boolean) => css`\n display: block;\n padding-left: 0.75rem;\n margin-left: -0.7rem;\n ${hasBorder ? `border-left: 1px solid ${colors.blue[300]};` : ''}\n `,\n collapsible: css`\n cursor: pointer;\n transition: all 0.2s ease;\n &:hover {\n background-color: ${colors.darkGray[700]};\n border-radius: ${tokens.border.radius.sm};\n padding: 0 ${tokens.size[1]};\n }\n `,\n actions: css`\n display: inline-flex;\n margin-left: ${size[2]};\n gap: ${size[2]};\n align-items: center;\n & svg {\n height: 12px;\n width: 12px;\n }\n `,\n valueCollapsed: css`\n color: ${colors.gray[400]};\n `,\n valueFunction: css`\n color: ${colors.cyan[400]};\n `,\n valueString: css`\n color: ${colors.green[400]};\n `,\n valueNumber: css`\n color: ${colors.yellow[400]};\n `,\n valueBoolean: css`\n color: ${colors.pink[400]};\n `,\n valueNull: css`\n color: ${colors.gray[400]};\n font-style: italic;\n `,\n valueKey: css`\n color: ${colors.blue[300]};\n `,\n valueBraces: css`\n color: ${colors.gray[500]};\n `,\n valueContainer: (isRoot: boolean) => css`\n display: block;\n margin-left: ${isRoot ? '0' : '1rem'};\n\n &:not(:hover) .actions {\n display: none;\n }\n\n &:hover .actions {\n display: inline-flex;\n }\n `,\n },\n header: {\n row: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ${tokens.size[2]} ${tokens.size[2.5]};\n gap: ${tokens.size[2.5]};\n border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;\n align-items: center;\n `,\n logoAndToggleContainer: css`\n display: flex;\n gap: ${tokens.size[3]};\n align-items: center;\n & > button {\n padding: 0;\n background: transparent;\n border: none;\n display: flex;\n gap: ${size[0.5]};\n flex-direction: column;\n }\n `,\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n &:focus-visible {\n outline-offset: 4px;\n border-radius: ${border.radius.xs};\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n tanstackLogo: css`\n font-size: ${font.size.md};\n font-weight: ${font.weight.bold};\n line-height: ${font.lineHeight.xs};\n white-space: nowrap;\n color: ${t(colors.gray[600], colors.gray[300])};\n `,\n flavorLogo: (flavorLight: string, flavorDark: string) => css`\n font-weight: ${font.weight.semibold};\n font-size: ${font.size.xs};\n background: linear-gradient(to right, ${t(flavorLight, flavorDark)});\n background-clip: text;\n -webkit-background-clip: text;\n line-height: 1;\n -webkit-text-fill-color: transparent;\n white-space: nowrap;\n `,\n },\n section: {\n main: css`\n margin-bottom: 2rem;\n padding: 1.5rem;\n background-color: ${colors.darkGray[800]};\n border: 1px solid ${colors.gray[700]};\n border-radius: 0.75rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n `,\n title: css`\n font-size: 1.125rem;\n font-weight: 600;\n color: ${colors.gray[100]};\n margin: 0 0 1rem 0;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid ${colors.gray[700]};\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n `,\n icon: css`\n height: 20px;\n width: 20px;\n & > svg {\n height: 100%;\n width: 100%;\n }\n color: ${colors.purple[400]};\n `,\n description: css`\n color: ${colors.gray[400]};\n font-size: 0.875rem;\n margin: 0 0 1.5rem 0;\n line-height: 1.5;\n text-align: left;\n `,\n },\n mainPanel: {\n panel: css`\n padding: 0;\n background: ${colors.darkGray[700]};\n overflow-y: auto;\n height: 100%;\n `,\n withPadding: css`\n padding: ${tokens.size[4]};\n `,\n },\n }\n}\n\nexport function useStyles() {\n const [_styles] = createSignal(stylesFactory())\n return _styles\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,sBAGF;AAAA,EACF,SAAS;AAAA,IACP,IAAI,OAAO,OAAO,OAAO,GAAG;AAAA,IAC5B,OAAO,OAAO,OAAO,OAAO,GAAG;AAAA,IAC/B,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,IAChC,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElC,WAAW;AAAA,IACT,IAAI,OAAO,OAAO,KAAK,GAAG;AAAA,IAC1B,OAAO,OAAO,OAAO,KAAK,GAAG;AAAA,IAC7B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,IAC9B,MAAM,OAAO,OAAO,KAAK,GAAG;AAAA,IAC5B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhC,MAAM;AAAA,IACJ,IAAI,OAAO,OAAO,KAAK,GAAG;AAAA,IAC1B,OAAO,OAAO,OAAO,KAAK,GAAG;AAAA,IAC7B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,IAC9B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhC,SAAS;AAAA,IACP,IAAI,OAAO,OAAO,OAAO,GAAG;AAAA,IAC5B,OAAO,OAAO,OAAO,OAAO,GAAG;AAAA,IAC/B,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,IAChC,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElC,QAAQ;AAAA,IACN,IAAI,OAAO,OAAO,IAAI,GAAG;AAAA,IACzB,OAAO,OAAO,OAAO,IAAI,GAAG;AAAA,IAC5B,QAAQ,OAAO,OAAO,IAAI,GAAG;AAAA,IAC7B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/B,SAAS;AAAA,IACP,IAAI,OAAO,OAAO,MAAM,GAAG;AAAA,IAC3B,OAAO,OAAO,OAAO,MAAM,GAAG;AAAA,IAC9B,QAAQ,OAAO,OAAO,MAAM,GAAG;AAAA,IAC/B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,MAAM,GAAG;AAAA,EAAA;AAEnC;AACO,MAAM,MAAM,OAAO;AAC1B,MAAM,gBAAgB,CAAC,QAA0B,WAAW;AAC1D,QAAM,EAAE,QAAQ,MAAM,MAAM,OAAO,WAAW;AAC9C,QAAM,EAAE,eAAe;AAEvB,QAAM,IAAI,CAAC,OAAe,SAAkB,UAAU,UAAU,QAAQ;AAExE,SAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMK,KAAK,EAAE,CAAC;AAAA,gBACP,KAAK,EAAE,CAAC;AAAA,qBACH,WAAW,IAAI;AAAA,aACvB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOf,iBAAiB;AAAA;AAAA;AAAA,IAGjB,aAAa;AAAA;AAAA;AAAA,eAGF,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,IAG3B,mBAAmB;AAAA;AAAA,eAER,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3B,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKc,OAAO,SAAS,GAAG,CAAC;AAAA,eAC/B,OAAO,KAAK,GAAG,CAAC;AAAA,0BACL,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYlB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKhB,OAAO,OAAO,GAAG,CAAC;AAAA,gCACV,OAAO,OAAO,GAAG,CAAC,GAAG,MAAM,EAAE,CAAC;AAAA;AAAA;AAAA,IAG1D,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOd,gBAAgB;AAAA;AAAA;AAAA,IAGhB,YAAY;AAAA;AAAA;AAAA,eAGD,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,IAG3B,kBAAkB;AAAA;AAAA,eAEP,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKe,OAAO,SAAS,GAAG,CAAC;AAAA,eAC/B,OAAO,KAAK,GAAG,CAAC;AAAA,0BACL,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,qBAErB,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,iBAInB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIT,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKhB,OAAO,OAAO,GAAG,CAAC;AAAA,gCACV,OAAO,OAAO,GAAG,CAAC,GAAG,MAAM,EAAE,CAAC;AAAA;AAAA;AAAA,IAG1D,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWO,OAAO,SAAS,GAAG,CAAC;AAAA;AAAA;AAAA,IAG5C,mBAAmB;AAAA;AAAA;AAAA,IAGnB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,UAAU;AAAA;AAAA;AAAA;AAAA,0BAIY,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,0BAEhB,OAAO,SAAS,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQtB,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,4BAId,OAAO,OAAO,GAAG,CAAC;AAAA,wBACtB,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAatC,eAAe;AAAA,eACJ,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM3B,qBAAqB;AAAA,eACV,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3B,QAAQ;AAAA,MACN,MAAM;AAAA;AAAA;AAAA;AAAA,uBAIW,OAAO,KAAK,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAe5C,QAAQ,SAAwB,SAAmB,OAAiB;AAClE,cAAM,IAAI,oBAAoB,OAAO;AACrC,YAAI,OAAO;AACT,iBAAO;AAAA;AAAA,qBAEI,EAAE,EAAE;AAAA;AAAA;AAAA,4BAGG,OAAO,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA,4BAGzB,OAAO,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA,QAG7C;AACA,YAAI,SAAS;AACX,iBAAO;AAAA;AAAA,qBAEI,EAAE,EAAE;AAAA,4BACG,EAAE,EAAE;AAAA;AAAA,4BAEJ,OAAO,OAAO,OAAO,GAAG,CAAC;AAAA,8BACvB,EAAE,KAAK;AAAA;AAAA;AAAA,4BAGT,OAAO,OAAO,OAAO,GAAG,CAAC;AAAA,8BACvB,EAAE,MAAM;AAAA;AAAA;AAAA,QAG9B;AAEA,eAAO;AAAA,wBACS,EAAE,EAAE;AAAA,mBACT,EAAE,IAAI;AAAA,0BACC,EAAE,MAAM;AAAA;AAAA,0BAER,EAAE,KAAK;AAAA,4BACL,EAAE,KAAK;AAAA;AAAA;AAAA,0BAGT,EAAE,MAAM;AAAA,4BACN,EAAE,MAAM;AAAA;AAAA;AAAA,MAG9B;AAAA,IAAA;AAAA,IAEF,KAAK;AAAA,MACH,KAAK,CAAC,UAAsC;AAAA,iBACjC,OAAO,KAAK,GAAG,CAAC;AAAA,kBACf,OAAO,KAAK,GAAG,CAAC;AAAA,yBACT,OAAO,OAAO,OAAO,IAAI;AAAA,4BACtB,OAAO,OAAO,KAAK,EAAE,GAAG,CAAC;AAAA;AAAA,MAE/C,MAAM;AAAA;AAAA,eAEG,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,kBAEb,OAAO,KAAK,GAAG,CAAC;AAAA,sBACZ,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,iBAC7C,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,yBAC7B,OAAO,OAAO,OAAO,EAAE;AAAA,qBAC3B,KAAK,KAAK,EAAE;AAAA,mBACd,OAAO,KAAK,CAAC,CAAC;AAAA,wBACT,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,uBAEjB,KAAK,OAAO,MAAM;AAAA,kBACvB,EAAE,eAAe,OAAO,KAAK,GAAG,GAAG,uBAAuB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,+BAK9C,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,MAGzC,OAAO;AAAA,qBACQ,KAAK,KAAK,EAAE;AAAA;AAAA,MAE3B,OAAO;AAAA,qBACQ,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKhB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,4BAC1B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,kBAGnD,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,IAAA;AAAA,IAG9B,MAAM;AAAA,MACJ,MAAM;AAAA,iBACK,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,qBACjC,KAAK,KAAK,EAAE;AAAA,wBACT,KAAK,CAAC,CAAC;AAAA,gCACC,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA,MAE5C,cAAc;AAAA;AAAA,iBAEH,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOrC,KAAK,CAAC,CAAC;AAAA,kBACN,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKN,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,2BAI7B,OAAO,OAAO,EAAE;AAAA,+BACZ,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAIzC,mBAAmB;AAAA;AAAA;AAAA,MAGnB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKI,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,mBAGjB,KAAK,CAAC,CAAC;AAAA,oBACN,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAMK,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,MAE1C,cAAc,CAAC,cAAuB;AAAA;AAAA;AAAA;AAAA,UAIlC,YAAY,0BAA0B,OAAO,KAAK,GAAG,CAAC,MAAM,EAAE;AAAA;AAAA,MAElE,aAAa;AAAA;AAAA;AAAA;AAAA,8BAIW,OAAO,SAAS,GAAG,CAAC;AAAA,2BACvB,OAAO,OAAO,OAAO,EAAE;AAAA,uBAC3B,OAAO,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,MAG/B,SAAS;AAAA;AAAA,uBAEQ,KAAK,CAAC,CAAC;AAAA,eACf,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOhB,gBAAgB;AAAA,iBACL,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,MAE3B,eAAe;AAAA,iBACJ,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,MAE3B,aAAa;AAAA,iBACF,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,MAE5B,aAAa;AAAA,iBACF,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA,MAE7B,cAAc;AAAA,iBACH,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,MAE3B,WAAW;AAAA,iBACA,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,MAG3B,UAAU;AAAA,iBACC,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,MAE3B,aAAa;AAAA,iBACF,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,MAE3B,gBAAgB,CAAC,WAAoB;AAAA;AAAA,uBAEpB,SAAS,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,IAWxC,QAAQ;AAAA,MACN,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIQ,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,KAAK,GAAG,CAAC;AAAA,eACtC,OAAO,KAAK,GAAG,CAAC;AAAA,yBACN,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,MAG5D,wBAAwB;AAAA;AAAA,eAEf,OAAO,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOZ,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAIpB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMG,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAOJ,OAAO,OAAO,EAAE;AAAA,+BACZ,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,MAGzC,cAAc;AAAA,qBACC,KAAK,KAAK,EAAE;AAAA,uBACV,KAAK,OAAO,IAAI;AAAA,uBAChB,KAAK,WAAW,EAAE;AAAA;AAAA,iBAExB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,YAAY,CAAC,aAAqB,eAAuB;AAAA,uBACxC,KAAK,OAAO,QAAQ;AAAA,qBACtB,KAAK,KAAK,EAAE;AAAA,gDACe,EAAE,aAAa,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,IAQtE,SAAS;AAAA,MACP,MAAM;AAAA;AAAA;AAAA,4BAGgB,OAAO,SAAS,GAAG,CAAC;AAAA,4BACpB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAItC,OAAO;AAAA;AAAA;AAAA,iBAGI,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,mCAGE,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM7C,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOK,OAAO,OAAO,GAAG,CAAC;AAAA;AAAA,MAE7B,aAAa;AAAA,iBACF,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,IAO7B,WAAW;AAAA,MACT,OAAO;AAAA;AAAA,sBAES,OAAO,SAAS,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAIpC,aAAa;AAAA,mBACA,OAAO,KAAK,CAAC,CAAC;AAAA;AAAA,IAAA;AAAA,EAE7B;AAEJ;AAEO,SAAS,YAAY;AAC1B,QAAM,CAAC,OAAO,IAAI,aAAa,eAAe;AAC9C,SAAO;AACT;"}
1	+ {"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../components/theme'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\nimport type { Theme } from '../components/theme'\n\nconst buttonVariantColors: Record<\n ButtonVariant,\n { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n primary: {\n bg: tokens.colors.purple[500],\n hover: tokens.colors.purple[600],\n active: tokens.colors.purple[700],\n text: '#fff',\n border: tokens.colors.purple[500],\n },\n secondary: {\n bg: tokens.colors.gray[800],\n hover: tokens.colors.gray[700],\n active: tokens.colors.gray[600],\n text: tokens.colors.gray[100],\n border: tokens.colors.gray[700],\n },\n info: {\n bg: tokens.colors.blue[500],\n hover: tokens.colors.blue[600],\n active: tokens.colors.blue[700],\n text: '#fff',\n border: tokens.colors.blue[500],\n },\n warning: {\n bg: tokens.colors.yellow[500],\n hover: tokens.colors.yellow[600],\n active: tokens.colors.yellow[700],\n text: '#fff',\n border: tokens.colors.yellow[500],\n },\n danger: {\n bg: tokens.colors.red[500],\n hover: tokens.colors.red[600],\n active: tokens.colors.red[700],\n text: '#fff',\n border: tokens.colors.red[500],\n },\n success: {\n bg: tokens.colors.green[500],\n hover: tokens.colors.green[600],\n active: tokens.colors.green[700],\n text: '#fff',\n border: tokens.colors.green[500],\n },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: Theme = 'dark') => {\n const { colors, font, size, alpha, border } = tokens\n const { fontFamily } = font\n\n const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n return {\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n width: ${size[12]};\n height: ${size[12]};\n font-family: ${fontFamily.sans};\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n `,\n\n selectWrapper: css`\n width: 100%;\n max-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n selectContainer: css`\n width: 100%;\n `,\n selectLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${t(colors.gray[900], colors.gray[100])};\n text-align: left;\n `,\n selectDescription: css`\n font-size: 0.8rem;\n color: ${t(colors.gray[500], colors.gray[400])};\n margin: 0;\n line-height: 1.3;\n text-align: left;\n `,\n select: css`\n appearance: none;\n width: 100%;\n padding: 0.75rem 3rem 0.75rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n color: ${t(colors.gray[900], colors.gray[100])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n font-size: 0.875rem;\n transition: all 0.2s ease;\n cursor: pointer;\n\n /* Custom arrow */\n background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n background-repeat: no-repeat;\n background-position: right 0.75rem center;\n background-size: 1.25rem;\n\n &:hover {\n border-color: ${t(colors.gray[400], colors.gray[600])};\n }\n\n &:focus {\n outline: none;\n border-color: ${colors.purple[400]};\n box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n }\n `,\n inputWrapper: css`\n width: 100%;\n max-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n `,\n inputContainer: css`\n width: 100%;\n `,\n inputLabel: css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${t(colors.gray[900], colors.gray[100])};\n text-align: left;\n `,\n inputDescription: css`\n font-size: 0.8rem;\n color: ${t(colors.gray[500], colors.gray[400])};\n margin: 0;\n line-height: 1.3;\n text-align: left;\n `,\n input: css`\n appearance: none;\n width: 100%;\n padding: 0.75rem;\n border-radius: 0.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n color: ${t(colors.gray[900], colors.gray[100])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n font-size: 0.875rem;\n font-family: ${fontFamily.mono};\n transition: all 0.2s ease;\n\n &::placeholder {\n color: ${t(colors.gray[400], colors.gray[500])};\n }\n\n &:hover {\n border-color: ${t(colors.gray[400], colors.gray[600])};\n }\n\n &:focus {\n outline: none;\n border-color: ${t(colors.purple[500], colors.purple[400])};\n box-shadow: 0 0 0 3px\n ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};\n }\n `,\n checkboxWrapper: css`\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n cursor: pointer;\n user-select: none;\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ${t(colors.gray[100], colors.darkGray[800])};\n }\n `,\n checkboxContainer: css`\n width: 100%;\n `,\n checkboxLabelContainer: css`\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n flex: 1;\n `,\n checkbox: css`\n appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n border: 2px solid ${t(colors.gray[300], colors.gray[700])};\n border-radius: 0.375rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n display: grid;\n place-items: center;\n transition: all 0.2s ease;\n flex-shrink: 0;\n margin-top: 0.125rem;\n\n &:hover {\n border-color: ${t(colors.purple[500], colors.purple[400])};\n }\n\n &:checked {\n background-color: ${t(colors.purple[500], colors.purple[700])};\n border-color: ${t(colors.purple[500], colors.purple[700])};\n }\n\n &:checked::after {\n content: '';\n width: 0.4rem;\n height: 0.6rem;\n border: solid ${t('#fff', colors.gray[100])};\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n margin-top: -3px;\n }\n `,\n checkboxLabel: css`\n color: ${t(colors.gray[900], colors.gray[100])};\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.4;\n text-align: left;\n `,\n checkboxDescription: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-size: 0.8rem;\n line-height: 1.3;\n text-align: left;\n `,\n button: {\n base: css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: ${tokens.font.fontFamily.sans};\n font-size: 0.8rem;\n font-weight: 500;\n border-radius: 0.2rem;\n padding: 0.2rem 0.6rem;\n cursor: pointer;\n transition:\n background 0.2s,\n color 0.2s,\n border 0.2s,\n box-shadow 0.2s;\n outline: none;\n border-width: 1px;\n border-style: solid;\n `,\n variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n const v = buttonVariantColors[variant]\n if (ghost) {\n return css`\n background: transparent;\n color: ${t(v.bg, v.bg)};\n border-color: transparent;\n &:hover {\n background: ${t(colors.purple[100], colors.darkGray[700])};\n }\n &:active {\n background: ${t(colors.purple[200], colors.darkGray[800])};\n }\n `\n }\n if (outline) {\n return css`\n background: transparent;\n color: ${t(v.bg, v.bg)};\n border-color: ${t(v.bg, v.bg)};\n &:hover {\n background: ${t(colors.purple[100], colors.darkGray[700])};\n border-color: ${t(v.hover, v.hover)};\n }\n &:active {\n background: ${t(colors.purple[200], colors.darkGray[800])};\n border-color: ${t(v.active, v.active)};\n }\n `\n }\n // Default solid button\n return css`\n background: ${t(v.bg, v.bg)};\n color: ${t(v.text, v.text)};\n border-color: ${t(v.border, v.border)};\n &:hover {\n background: ${t(v.hover, v.hover)};\n border-color: ${t(v.hover, v.hover)};\n }\n &:active {\n background: ${t(v.active, v.active)};\n border-color: ${t(v.active, v.active)};\n }\n `\n },\n },\n tag: {\n dot: (color: keyof typeof tokens.colors) => css`\n width: ${tokens.size[1.5]};\n height: ${tokens.size[1.5]};\n border-radius: ${tokens.border.radius.full};\n background-color: ${t(\n tokens.colors[color][500],\n tokens.colors[color][500],\n )};\n `,\n base: css`\n display: flex;\n gap: ${tokens.size[1.5]};\n box-sizing: border-box;\n height: ${tokens.size[6.5]};\n background: ${t(colors.gray[50], colors.darkGray[500])};\n color: ${t(colors.gray[700], colors.gray[300])};\n border-radius: ${tokens.border.radius.sm};\n font-size: ${font.size.sm};\n padding: ${tokens.size[1]};\n padding-left: ${tokens.size[1.5]};\n align-items: center;\n font-weight: ${font.weight.medium};\n border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n user-select: none;\n position: relative;\n &:focus-visible {\n outline-offset: 2px;\n outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n }\n `,\n label: css`\n font-size: ${font.size.xs};\n `,\n count: css`\n font-size: ${font.size.xs};\n padding: 0 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${t(colors.gray[500], colors.gray[400])};\n background-color: ${t(colors.gray[200], colors.darkGray[300])};\n border-radius: 2px;\n font-variant-numeric: tabular-nums;\n height: ${tokens.size[4.5]};\n `,\n },\n tree: {\n info: css`\n color: ${t(colors.gray[500], colors.gray[500])};\n font-size: ${font.size.xs};\n margin-right: ${size[1]};\n `,\n actionButton: css`\n background-color: transparent;\n color: ${t(colors.gray[500], colors.gray[500])};\n border: none;\n display: inline-flex;\n padding: 0px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n width: ${size[3]};\n height: ${size[3]};\n position: relative;\n z-index: 1;\n\n &:hover svg {\n color: ${t(colors.gray[600], colors.gray[400])};\n }\n\n &:focus-visible {\n border-radius: ${border.radius.xs};\n outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n outline-offset: 2px;\n }\n `,\n expanderContainer: css`\n position: relative;\n `,\n expander: css`\n position: absolute;\n left: -16px;\n top: 3px;\n & path {\n stroke: ${t(colors.blue[400], colors.blue[300])};\n }\n & svg {\n width: ${size[3]};\n height: ${size[3]};\n }\n\n display: inline-flex;\n align-items: center;\n transition: all 0.1s ease;\n `,\n expandedLine: (hasBorder: boolean) => css`\n display: block;\n padding-left: 0.75rem;\n margin-left: -0.7rem;\n ${hasBorder\n ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`\n : ''}\n `,\n collapsible: css`\n cursor: pointer;\n transition: all 0.2s ease;\n &:hover {\n background-color: ${t(colors.gray[100], colors.darkGray[700])};\n border-radius: ${tokens.border.radius.sm};\n padding: 0 ${tokens.size[1]};\n }\n `,\n actions: css`\n display: inline-flex;\n margin-left: ${size[2]};\n gap: ${size[2]};\n align-items: center;\n & svg {\n height: 12px;\n width: 12px;\n }\n `,\n valueCollapsed: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n `,\n valueFunction: css`\n color: ${t(colors.cyan[500], colors.cyan[400])};\n `,\n valueString: css`\n color: ${t(colors.green[500], colors.green[400])};\n `,\n valueNumber: css`\n color: ${t(colors.yellow[500], colors.yellow[400])};\n `,\n valueBoolean: css`\n color: ${t(colors.pink[500], colors.pink[400])};\n `,\n valueNull: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-style: italic;\n `,\n valueKey: css`\n color: ${t(colors.blue[400], colors.blue[300])};\n `,\n valueBraces: css`\n color: ${colors.gray[500]};\n `,\n valueContainer: (isRoot: boolean) => css`\n display: block;\n margin-left: ${isRoot ? '0' : '1rem'};\n\n &:not(:hover) .actions {\n display: none;\n }\n\n &:hover .actions {\n display: inline-flex;\n }\n `,\n },\n header: {\n row: css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ${tokens.size[2]} ${tokens.size[2.5]};\n gap: ${tokens.size[2.5]};\n border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;\n align-items: center;\n `,\n logoAndToggleContainer: css`\n display: flex;\n gap: ${tokens.size[3]};\n align-items: center;\n & > button {\n padding: 0;\n background: transparent;\n border: none;\n display: flex;\n gap: ${size[0.5]};\n flex-direction: column;\n }\n `,\n logo: css`\n cursor: pointer;\n display: flex;\n flex-direction: column;\n background-color: transparent;\n border: none;\n gap: ${tokens.size[0.5]};\n padding: 0px;\n &:hover {\n opacity: 0.7;\n }\n &:focus-visible {\n outline-offset: 4px;\n border-radius: ${border.radius.xs};\n outline: 2px solid ${colors.blue[800]};\n }\n `,\n tanstackLogo: css`\n font-size: ${font.size.md};\n font-weight: ${font.weight.bold};\n line-height: ${font.lineHeight.xs};\n white-space: nowrap;\n color: ${t(colors.gray[700], colors.gray[300])};\n `,\n flavorLogo: (flavorLight: string, flavorDark: string) => css`\n font-weight: ${font.weight.semibold};\n font-size: ${font.size.xs};\n background: linear-gradient(to right, ${t(flavorLight, flavorDark)});\n background-clip: text;\n -webkit-background-clip: text;\n line-height: 1;\n -webkit-text-fill-color: transparent;\n white-space: nowrap;\n `,\n },\n section: {\n main: css`\n margin-bottom: 2rem;\n padding: 1.5rem;\n background-color: ${t(colors.gray[50], colors.darkGray[800])};\n border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n border-radius: 0.75rem;\n box-shadow: ${t(\n '0 1px 3px rgba(0,0,0,0.06)',\n '0 1px 3px rgba(0,0,0,0.18)',\n )};\n `,\n title: css`\n font-size: 1.125rem;\n font-weight: 600;\n color: ${t(colors.gray[900], colors.gray[100])};\n margin: 0 0 1rem 0;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-align: left;\n `,\n icon: css`\n height: 20px;\n width: 20px;\n & > svg {\n height: 100%;\n width: 100%;\n }\n color: ${t(colors.purple[500], colors.purple[400])};\n `,\n description: css`\n color: ${t(colors.gray[500], colors.gray[400])};\n font-size: 0.875rem;\n margin: 0 0 1.5rem 0;\n line-height: 1.5;\n text-align: left;\n `,\n },\n mainPanel: {\n panel: (withPadding: boolean) => css`\n padding: ${withPadding ? tokens.size[4] : 0};\n background: ${t(colors.gray[50], colors.darkGray[700])};\n overflow-y: auto;\n height: 100%;\n `,\n },\n }\n}\n\nexport function useStyles() {\n const { theme } = useTheme()\n const [styles, setStyles] = createSignal(stylesFactory(theme()))\n createEffect(() => {\n setStyles(stylesFactory(theme()))\n })\n return styles\n}\n"],"names":[],"mappings":";;;;AAOA,MAAM,sBAGF;AAAA,EACF,SAAS;AAAA,IACP,IAAI,OAAO,OAAO,OAAO,GAAG;AAAA,IAC5B,OAAO,OAAO,OAAO,OAAO,GAAG;AAAA,IAC/B,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,IAChC,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElC,WAAW;AAAA,IACT,IAAI,OAAO,OAAO,KAAK,GAAG;AAAA,IAC1B,OAAO,OAAO,OAAO,KAAK,GAAG;AAAA,IAC7B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,IAC9B,MAAM,OAAO,OAAO,KAAK,GAAG;AAAA,IAC5B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhC,MAAM;AAAA,IACJ,IAAI,OAAO,OAAO,KAAK,GAAG;AAAA,IAC1B,OAAO,OAAO,OAAO,KAAK,GAAG;AAAA,IAC7B,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,IAC9B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,KAAK,GAAG;AAAA,EAAA;AAAA,EAEhC,SAAS;AAAA,IACP,IAAI,OAAO,OAAO,OAAO,GAAG;AAAA,IAC5B,OAAO,OAAO,OAAO,OAAO,GAAG;AAAA,IAC/B,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,IAChC,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAElC,QAAQ;AAAA,IACN,IAAI,OAAO,OAAO,IAAI,GAAG;AAAA,IACzB,OAAO,OAAO,OAAO,IAAI,GAAG;AAAA,IAC5B,QAAQ,OAAO,OAAO,IAAI,GAAG;AAAA,IAC7B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,IAAI,GAAG;AAAA,EAAA;AAAA,EAE/B,SAAS;AAAA,IACP,IAAI,OAAO,OAAO,MAAM,GAAG;AAAA,IAC3B,OAAO,OAAO,OAAO,MAAM,GAAG;AAAA,IAC9B,QAAQ,OAAO,OAAO,MAAM,GAAG;AAAA,IAC/B,MAAM;AAAA,IACN,QAAQ,OAAO,OAAO,MAAM,GAAG;AAAA,EAAA;AAEnC;AACO,MAAM,MAAM,OAAO;AAC1B,MAAM,gBAAgB,CAAC,QAAe,WAAW;AAC/C,QAAM,EAAE,QAAQ,MAAM,MAAM,OAAO,WAAW;AAC9C,QAAM,EAAE,eAAe;AAEvB,QAAM,IAAI,CAAC,OAAe,SAAkB,UAAU,UAAU,QAAQ;AAExE,SAAO;AAAA,IACL,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMK,KAAK,EAAE,CAAC;AAAA,gBACP,KAAK,EAAE,CAAC;AAAA,qBACH,WAAW,IAAI;AAAA,aACvB,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOf,iBAAiB;AAAA;AAAA;AAAA,IAGjB,aAAa;AAAA;AAAA;AAAA,eAGF,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAGhD,mBAAmB;AAAA;AAAA,eAER,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhD,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKc,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,eACnD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,0BAC1B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYvC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKrC,OAAO,OAAO,GAAG,CAAC;AAAA,gCACV,OAAO,OAAO,GAAG,CAAC,GAAG,MAAM,EAAE,CAAC;AAAA;AAAA;AAAA,IAG1D,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOd,gBAAgB;AAAA;AAAA;AAAA,IAGhB,YAAY;AAAA;AAAA;AAAA,eAGD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAGhD,kBAAkB;AAAA;AAAA,eAEP,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhD,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKe,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,eACnD,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,0BAC1B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,qBAE1C,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,iBAInB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,wBAI9B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKrC,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA,YAErD,EAAE,OAAO,OAAO,GAAG,IAAI,MAAM,EAAE,GAAG,OAAO,OAAO,GAAG,IAAI,MAAM,EAAE,CAAC,CAAC;AAAA;AAAA;AAAA,IAGzE,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWO,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,IAGjE,mBAAmB;AAAA;AAAA;AAAA,IAGnB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,UAAU;AAAA;AAAA;AAAA;AAAA,0BAIY,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,0BAErC,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ1C,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,4BAIrC,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA,wBAC7C,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOzC,EAAE,QAAQ,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM/C,eAAe;AAAA,eACJ,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMhD,qBAAqB;AAAA,eACV,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhD,QAAQ;AAAA,MACN,MAAM;AAAA;AAAA;AAAA;AAAA,uBAIW,OAAO,KAAK,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAe5C,QAAQ,SAAwB,SAAmB,OAAiB;AAClE,cAAM,IAAI,oBAAoB,OAAO;AACrC,YAAI,OAAO;AACT,iBAAO;AAAA;AAAA,qBAEI,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA;AAAA;AAAA,4BAGN,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,4BAG3C,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,QAG/D;AACA,YAAI,SAAS;AACX,iBAAO;AAAA;AAAA,qBAEI,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA,4BACN,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA;AAAA,4BAEb,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,8BACzC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC;AAAA;AAAA;AAAA,4BAGrB,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,8BACzC,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA,QAG3C;AAEA,eAAO;AAAA,wBACS,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC;AAAA,mBAClB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC;AAAA,0BACV,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC;AAAA;AAAA,0BAErB,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC;AAAA,4BACjB,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC;AAAA;AAAA;AAAA,0BAGrB,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC;AAAA,4BACnB,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA,MAG3C;AAAA,IAAA;AAAA,IAEF,KAAK;AAAA,MACH,KAAK,CAAC,UAAsC;AAAA,iBACjC,OAAO,KAAK,GAAG,CAAC;AAAA,kBACf,OAAO,KAAK,GAAG,CAAC;AAAA,yBACT,OAAO,OAAO,OAAO,IAAI;AAAA,4BACtB;AAAA,QAClB,OAAO,OAAO,KAAK,EAAE,GAAG;AAAA,QACxB,OAAO,OAAO,KAAK,EAAE,GAAG;AAAA,MAAA,CACzB;AAAA;AAAA,MAEH,MAAM;AAAA;AAAA,eAEG,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,kBAEb,OAAO,KAAK,GAAG,CAAC;AAAA,sBACZ,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,iBAC7C,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,yBAC7B,OAAO,OAAO,OAAO,EAAE;AAAA,qBAC3B,KAAK,KAAK,EAAE;AAAA,mBACd,OAAO,KAAK,CAAC,CAAC;AAAA,wBACT,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,uBAEjB,KAAK,OAAO,MAAM;AAAA,kBACvB,EAAE,eAAe,OAAO,KAAK,GAAG,GAAG,uBAAuB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,+BAK9C,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,MAG9D,OAAO;AAAA,qBACQ,KAAK,KAAK,EAAE;AAAA;AAAA,MAE3B,OAAO;AAAA,qBACQ,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKhB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,4BAC1B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,kBAGnD,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,IAAA;AAAA,IAG9B,MAAM;AAAA,MACJ,MAAM;AAAA,iBACK,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA,qBACjC,KAAK,KAAK,EAAE;AAAA,wBACT,KAAK,CAAC,CAAC;AAAA;AAAA,MAEzB,cAAc;AAAA;AAAA,iBAEH,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOrC,KAAK,CAAC,CAAC;AAAA,kBACN,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKN,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,2BAI7B,OAAO,OAAO,EAAE;AAAA,+BACZ,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,MAI9D,mBAAmB;AAAA;AAAA;AAAA,MAGnB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKI,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,mBAGtC,KAAK,CAAC,CAAC;AAAA,oBACN,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOrB,cAAc,CAAC,cAAuB;AAAA;AAAA;AAAA;AAAA,UAIlC,YACE,0BAA0B,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC,MAC/D,EAAE;AAAA;AAAA,MAER,aAAa;AAAA;AAAA;AAAA;AAAA,8BAIW,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,2BAC5C,OAAO,OAAO,OAAO,EAAE;AAAA,uBAC3B,OAAO,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,MAG/B,SAAS;AAAA;AAAA,uBAEQ,KAAK,CAAC,CAAC;AAAA,eACf,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOhB,gBAAgB;AAAA,iBACL,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,eAAe;AAAA,iBACJ,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,aAAa;AAAA,iBACF,EAAE,OAAO,MAAM,GAAG,GAAG,OAAO,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA,MAElD,aAAa;AAAA,iBACF,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA,MAEpD,cAAc;AAAA,iBACH,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,WAAW;AAAA,iBACA,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,MAGhD,UAAU;AAAA,iBACC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,aAAa;AAAA,iBACF,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA,MAE3B,gBAAgB,CAAC,WAAoB;AAAA;AAAA,uBAEpB,SAAS,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,IAWxC,QAAQ;AAAA,MACN,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIQ,OAAO,KAAK,CAAC,CAAC,IAAI,OAAO,KAAK,GAAG,CAAC;AAAA,eACtC,OAAO,KAAK,GAAG,CAAC;AAAA,yBACN,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,MAG5D,wBAAwB;AAAA;AAAA,eAEf,OAAO,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOZ,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAIpB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMG,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAOJ,OAAO,OAAO,EAAE;AAAA,+BACZ,OAAO,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA,MAGzC,cAAc;AAAA,qBACC,KAAK,KAAK,EAAE;AAAA,uBACV,KAAK,OAAO,IAAI;AAAA,uBAChB,KAAK,WAAW,EAAE;AAAA;AAAA,iBAExB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,MAEhD,YAAY,CAAC,aAAqB,eAAuB;AAAA,uBACxC,KAAK,OAAO,QAAQ;AAAA,qBACtB,KAAK,KAAK,EAAE;AAAA,gDACe,EAAE,aAAa,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,IAQtE,SAAS;AAAA,MACP,MAAM;AAAA;AAAA;AAAA,4BAGgB,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA,4BACxC,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA,sBAE3C;AAAA,QACZ;AAAA,QACA;AAAA,MAAA,CACD;AAAA;AAAA,MAEH,OAAO;AAAA;AAAA;AAAA,iBAGI,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA,mCAGnB,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMlE,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAOK,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,CAAC,CAAC;AAAA;AAAA,MAEpD,aAAa;AAAA,iBACF,EAAE,OAAO,KAAK,GAAG,GAAG,OAAO,KAAK,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,IAOlD,WAAW;AAAA,MACT,OAAO,CAAC,gBAAyB;AAAA,mBACpB,cAAc,OAAO,KAAK,CAAC,IAAI,CAAC;AAAA,sBAC7B,EAAE,OAAO,KAAK,EAAE,GAAG,OAAO,SAAS,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAI1D;AAEJ;AAEO,SAAS,YAAY;AAC1B,QAAM,EAAE,MAAA,IAAU,SAAA;AAClB,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,cAAc,MAAA,CAAO,CAAC;AAC/D,eAAa,MAAM;AACjB,cAAU,cAAc,MAAA,CAAO,CAAC;AAAA,EAClC,CAAC;AACD,SAAO;AACT;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/components/main-panel.tsx CHANGED Viewed

@@ -15,11 +15,14 @@ export const MainPanel = ({
   withPadding,
 }: PanelProps) => {
   const styles = useStyles()
   return (
     <div
-      class={clsx(styles().mainPanel.panel, className, classStyles, {
-        [styles().mainPanel.withPadding]: withPadding,
-      })}
+      class={clsx(
+        styles().mainPanel.panel(Boolean(withPadding)),
+        className,
+        classStyles,
+      )}
     >
       {children}
     </div>

package/src/components/theme.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { createContext, createEffect, createSignal, useContext } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
+export type Theme = 'light' | 'dark'
+type ThemeContextValue = {
+  theme: Accessor<Theme>
+  setTheme: (theme: Theme) => void
+}
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
+export const ThemeContextProvider = (props: {
+  children: JSX.Element
+  theme: Theme
+}) => {
+  const [theme, setTheme] = createSignal<Theme>(props.theme)
+  createEffect(() => {
+    setTheme(props.theme)
+  })
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {props.children}
+    </ThemeContext.Provider>
+  )
+}
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeContextProvider')
+  }
+  return context
+}

package/src/index.ts CHANGED Viewed

@@ -13,3 +13,4 @@ export {
   SectionIcon,
 } from './components/section'
 export { Header, HeaderLogo } from './components/header'
+export { useTheme, ThemeContextProvider } from './components/theme'

package/src/styles/use-styles.ts CHANGED Viewed

@@ -1,7 +1,9 @@
 import * as goober from 'goober'
-import { createSignal } from 'solid-js'
+import { createEffect, createSignal } from 'solid-js'
+import { useTheme } from '../components/theme'
 import { tokens } from './tokens'
 import type { ButtonVariant } from '../components/button'
+import type { Theme } from '../components/theme'
 const buttonVariantColors: Record<
   ButtonVariant,
@@ -51,7 +53,7 @@ const buttonVariantColors: Record<
   },
 }
 export const css = goober.css
-const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
+const stylesFactory = (theme: Theme = 'dark') => {
   const { colors, font, size, alpha, border } = tokens
   const { fontFamily } = font
@@ -87,12 +89,12 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
     selectLabel: css`
       font-size: 0.875rem;
       font-weight: 500;
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       text-align: left;
     `,
     selectDescription: css`
       font-size: 0.8rem;
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[500], colors.gray[400])};
       margin: 0;
       line-height: 1.3;
       text-align: left;
@@ -102,9 +104,9 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       width: 100%;
       padding: 0.75rem 3rem 0.75rem 0.75rem;
       border-radius: 0.5rem;
-      background-color: ${colors.darkGray[800]};
-      color: ${colors.gray[100]};
-      border: 1px solid ${colors.gray[700]};
+      background-color: ${t(colors.gray[50], colors.darkGray[800])};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
       font-size: 0.875rem;
       transition: all 0.2s ease;
       cursor: pointer;
@@ -116,7 +118,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       background-size: 1.25rem;
       &:hover {
-        border-color: ${colors.gray[600]};
+        border-color: ${t(colors.gray[400], colors.gray[600])};
       }
       &:focus {
@@ -138,12 +140,12 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
     inputLabel: css`
       font-size: 0.875rem;
       font-weight: 500;
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       text-align: left;
     `,
     inputDescription: css`
       font-size: 0.8rem;
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[500], colors.gray[400])};
       margin: 0;
       line-height: 1.3;
       text-align: left;
@@ -153,25 +155,26 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       width: 100%;
       padding: 0.75rem;
       border-radius: 0.5rem;
-      background-color: ${colors.darkGray[800]};
-      color: ${colors.gray[100]};
-      border: 1px solid ${colors.gray[700]};
+      background-color: ${t(colors.gray[50], colors.darkGray[800])};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
       font-size: 0.875rem;
       font-family: ${fontFamily.mono};
       transition: all 0.2s ease;
       &::placeholder {
-        color: ${colors.gray[500]};
+        color: ${t(colors.gray[400], colors.gray[500])};
       }
       &:hover {
-        border-color: ${colors.gray[600]};
+        border-color: ${t(colors.gray[400], colors.gray[600])};
       }
       &:focus {
         outline: none;
-        border-color: ${colors.purple[400]};
-        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+        border-color: ${t(colors.purple[500], colors.purple[400])};
+        box-shadow: 0 0 0 3px
+          ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};
       }
     `,
     checkboxWrapper: css`
@@ -185,7 +188,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       transition: background-color 0.2s ease;
       &:hover {
-        background-color: ${colors.darkGray[800]};
+        background-color: ${t(colors.gray[100], colors.darkGray[800])};
       }
     `,
     checkboxContainer: css`
@@ -201,9 +204,9 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       appearance: none;
       width: 1.25rem;
       height: 1.25rem;
-      border: 2px solid ${colors.gray[700]};
+      border: 2px solid ${t(colors.gray[300], colors.gray[700])};
       border-radius: 0.375rem;
-      background-color: ${colors.darkGray[800]};
+      background-color: ${t(colors.gray[50], colors.darkGray[800])};
       display: grid;
       place-items: center;
       transition: all 0.2s ease;
@@ -211,33 +214,33 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       margin-top: 0.125rem;
       &:hover {
-        border-color: ${colors.purple[400]};
+        border-color: ${t(colors.purple[500], colors.purple[400])};
       }
       &:checked {
-        background-color: ${colors.purple[500]};
-        border-color: ${colors.purple[500]};
+        background-color: ${t(colors.purple[500], colors.purple[700])};
+        border-color: ${t(colors.purple[500], colors.purple[700])};
       }
       &:checked::after {
         content: '';
         width: 0.4rem;
         height: 0.6rem;
-        border: solid white;
+        border: solid ${t('#fff', colors.gray[100])};
         border-width: 0 2px 2px 0;
         transform: rotate(45deg);
         margin-top: -3px;
       }
     `,
     checkboxLabel: css`
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       font-size: 0.875rem;
       font-weight: 500;
       line-height: 1.4;
       text-align: left;
     `,
     checkboxDescription: css`
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[500], colors.gray[400])};
       font-size: 0.8rem;
       line-height: 1.3;
       text-align: left;
@@ -267,43 +270,43 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         if (ghost) {
           return css`
             background: transparent;
-            color: ${v.bg};
+            color: ${t(v.bg, v.bg)};
             border-color: transparent;
             &:hover {
-              background: ${tokens.colors.purple[100]};
+              background: ${t(colors.purple[100], colors.darkGray[700])};
             }
             &:active {
-              background: ${tokens.colors.purple[200]};
+              background: ${t(colors.purple[200], colors.darkGray[800])};
             }
           `
         }
         if (outline) {
           return css`
             background: transparent;
-            color: ${v.bg};
-            border-color: ${v.bg};
+            color: ${t(v.bg, v.bg)};
+            border-color: ${t(v.bg, v.bg)};
             &:hover {
-              background: ${tokens.colors.purple[100]};
-              border-color: ${v.hover};
+              background: ${t(colors.purple[100], colors.darkGray[700])};
+              border-color: ${t(v.hover, v.hover)};
             }
             &:active {
-              background: ${tokens.colors.purple[200]};
-              border-color: ${v.active};
+              background: ${t(colors.purple[200], colors.darkGray[800])};
+              border-color: ${t(v.active, v.active)};
             }
           `
         }
         // Default solid button
         return css`
-          background: ${v.bg};
-          color: ${v.text};
-          border-color: ${v.border};
+          background: ${t(v.bg, v.bg)};
+          color: ${t(v.text, v.text)};
+          border-color: ${t(v.border, v.border)};
           &:hover {
-            background: ${v.hover};
-            border-color: ${v.hover};
+            background: ${t(v.hover, v.hover)};
+            border-color: ${t(v.hover, v.hover)};
           }
           &:active {
-            background: ${v.active};
-            border-color: ${v.active};
+            background: ${t(v.active, v.active)};
+            border-color: ${t(v.active, v.active)};
           }
         `
       },
@@ -313,7 +316,10 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         width: ${tokens.size[1.5]};
         height: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.full};
-        background-color: ${tokens.colors[color][500]};
+        background-color: ${t(
+          tokens.colors[color][500],
+          tokens.colors[color][500],
+        )};
       `,
       base: css`
         display: flex;
@@ -333,7 +339,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         position: relative;
         &:focus-visible {
           outline-offset: 2px;
-          outline: 2px solid ${colors.blue[800]};
+          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
         }
       `,
       label: css`
@@ -357,7 +363,6 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         color: ${t(colors.gray[500], colors.gray[500])};
         font-size: ${font.size.xs};
         margin-right: ${size[1]};
-        /* outline: 1px solid ${colors.yellow[400]}; */
       `,
       actionButton: css`
         background-color: transparent;
@@ -379,7 +384,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         &:focus-visible {
           border-radius: ${border.radius.xs};
-          outline: 2px solid ${colors.blue[800]};
+          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
           outline-offset: 2px;
         }
       `,
@@ -391,7 +396,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         left: -16px;
         top: 3px;
         & path {
-          stroke: ${colors.blue[300]};
+          stroke: ${t(colors.blue[400], colors.blue[300])};
         }
         & svg {
           width: ${size[3]};
@@ -401,19 +406,20 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         display: inline-flex;
         align-items: center;
         transition: all 0.1s ease;
-        /* outline: 1px solid ${colors.blue[400]}; */
       `,
       expandedLine: (hasBorder: boolean) => css`
         display: block;
         padding-left: 0.75rem;
         margin-left: -0.7rem;
-        ${hasBorder ? `border-left: 1px solid ${colors.blue[300]};` : ''}
+        ${hasBorder
+          ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`
+          : ''}
       `,
       collapsible: css`
         cursor: pointer;
         transition: all 0.2s ease;
         &:hover {
-          background-color: ${colors.darkGray[700]};
+          background-color: ${t(colors.gray[100], colors.darkGray[700])};
           border-radius: ${tokens.border.radius.sm};
           padding: 0 ${tokens.size[1]};
         }
@@ -429,26 +435,26 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         }
       `,
       valueCollapsed: css`
-        color: ${colors.gray[400]};
+        color: ${t(colors.gray[500], colors.gray[400])};
       `,
       valueFunction: css`
-        color: ${colors.cyan[400]};
+        color: ${t(colors.cyan[500], colors.cyan[400])};
       `,
       valueString: css`
-        color: ${colors.green[400]};
+        color: ${t(colors.green[500], colors.green[400])};
       `,
       valueNumber: css`
-        color: ${colors.yellow[400]};
+        color: ${t(colors.yellow[500], colors.yellow[400])};
       `,
       valueBoolean: css`
-        color: ${colors.pink[400]};
+        color: ${t(colors.pink[500], colors.pink[400])};
       `,
       valueNull: css`
-        color: ${colors.gray[400]};
+        color: ${t(colors.gray[500], colors.gray[400])};
         font-style: italic;
       `,
       valueKey: css`
-        color: ${colors.blue[300]};
+        color: ${t(colors.blue[400], colors.blue[300])};
       `,
       valueBraces: css`
         color: ${colors.gray[500]};
@@ -511,7 +517,7 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         font-weight: ${font.weight.bold};
         line-height: ${font.lineHeight.xs};
         white-space: nowrap;
-        color: ${t(colors.gray[600], colors.gray[300])};
+        color: ${t(colors.gray[700], colors.gray[300])};
       `,
       flavorLogo: (flavorLight: string, flavorDark: string) => css`
         font-weight: ${font.weight.semibold};
@@ -528,18 +534,21 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       main: css`
         margin-bottom: 2rem;
         padding: 1.5rem;
-        background-color: ${colors.darkGray[800]};
-        border: 1px solid ${colors.gray[700]};
+        background-color: ${t(colors.gray[50], colors.darkGray[800])};
+        border: 1px solid ${t(colors.gray[300], colors.gray[700])};
         border-radius: 0.75rem;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        box-shadow: ${t(
+          '0 1px 3px rgba(0,0,0,0.06)',
+          '0 1px 3px rgba(0,0,0,0.18)',
+        )};
       `,
       title: css`
         font-size: 1.125rem;
         font-weight: 600;
-        color: ${colors.gray[100]};
+        color: ${t(colors.gray[900], colors.gray[100])};
         margin: 0 0 1rem 0;
         padding-bottom: 0.5rem;
-        border-bottom: 1px solid ${colors.gray[700]};
+        border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
         display: flex;
         align-items: center;
         gap: 0.5rem;
@@ -552,10 +561,10 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
           height: 100%;
           width: 100%;
         }
-        color: ${colors.purple[400]};
+        color: ${t(colors.purple[500], colors.purple[400])};
       `,
       description: css`
-        color: ${colors.gray[400]};
+        color: ${t(colors.gray[500], colors.gray[400])};
         font-size: 0.875rem;
         margin: 0 0 1.5rem 0;
         line-height: 1.5;
@@ -563,20 +572,21 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
       `,
     },
     mainPanel: {
-      panel: css`
-        padding: 0;
-        background: ${colors.darkGray[700]};
+      panel: (withPadding: boolean) => css`
+        padding: ${withPadding ? tokens.size[4] : 0};
+        background: ${t(colors.gray[50], colors.darkGray[700])};
         overflow-y: auto;
         height: 100%;
       `,
-      withPadding: css`
-        padding: ${tokens.size[4]};
-      `,
     },
   }
 }
 export function useStyles() {
-  const [_styles] = createSignal(stylesFactory())
-  return _styles
+  const { theme } = useTheme()
+  const [styles, setStyles] = createSignal(stylesFactory(theme()))
+  createEffect(() => {
+    setStyles(stylesFactory(theme()))
+  })
+  return styles
 }