@tanstack/devtools-ui 0.3.3 → 0.3.5

package/dist/esm/components/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\n\nexport function JsonTree(props: { value: any; copyable?: boolean }) {\n  return <JsonValue isRoot value={props.value} copyable={props.copyable} />\n}\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n  const styles = useStyles()\n  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n  return (\n    <button\n      class={styles().tree.actionButton}\n      title=\"Copy object to clipboard\"\n      aria-label={`${\n        copyState() === 'NoCopy'\n          ? 'Copy object to clipboard'\n          : copyState() === 'SuccessCopy'\n            ? 'Object copied to clipboard'\n            : 'Error copying object to clipboard'\n      }`}\n      onClick={\n        copyState() === 'NoCopy'\n          ? () => {\n              navigator.clipboard\n                .writeText(JSON.stringify(props.value, null, 2))\n                .then(\n                  () => {\n                    setCopyState('SuccessCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                  (err) => {\n                    console.error('Failed to copy: ', err)\n                    setCopyState('ErrorCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                )\n            }\n          : undefined\n      }\n    >\n      <Switch>\n        <Match when={copyState() === 'NoCopy'}>\n          <Copier />\n        </Match>\n        <Match when={copyState() === 'SuccessCopy'}>\n          <CopiedCopier theme={'dark'} />\n        </Match>\n        <Match when={copyState() === 'ErrorCopy'}>\n          <ErrorCopier />\n        </Match>\n      </Switch>\n    </button>\n  )\n}\n\nconst Expander = (props: { expanded: boolean }) => {\n  const styles = useStyles()\n  return (\n    <span\n      class={clsx(\n        styles().tree.expander,\n        css`\n          transform: rotate(${props.expanded ? 90 : 0}deg);\n        `,\n        props.expanded &&\n          css`\n            & svg {\n              top: -1px;\n            }\n          `,\n      )}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 12L10 8L6 4\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n}) {\n  const { value, keyName, isRoot = false, isLastKey, copyable } = props\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(isRoot)}>\n      {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>\n      )}\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n          )\n        }\n        if (typeof value === 'number') {\n          return <span class={styles().tree.valueNumber}>{value}</span>\n        }\n        if (typeof value === 'boolean') {\n          return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n        }\n        if (value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>{String(value)}</span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return (\n            <ArrayValue copyable={copyable} keyName={keyName} value={value} />\n          )\n        }\n        if (typeof value === 'object') {\n          return (\n            <ObjectValue copyable={copyable} keyName={keyName} value={value} />\n          )\n        }\n        return <span />\n      })()}\n      {copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={value} />\n        </div>\n      )}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = ({\n  value,\n  keyName,\n  copyable,\n}: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander expanded={expanded()} />\n      {keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{value.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>[</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={value}>\n            {(item, i) => {\n              const isLastKey = i() === value.length - 1\n              return (\n                <JsonValue\n                  copyable={copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = ({\n  value,\n  keyName,\n  copyable,\n}: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  const keys = Object.keys(value)\n  const lastKeyName = keys[keys.length - 1]\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {keyName && <Expander expanded={expanded()} />}\n      {keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={copyable}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","CopyButton","styles","useStyles","copyState","setCopyState","createSignal","_el$","_tmpl$","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","undefined","_$insert","Switch","children","Match","when","Copier","CopiedCopier","theme","ErrorCopier","_$effect","_p$","_v$","tree","actionButton","_v$2","e","_$className","t","_$setAttribute","Expander","_el$2","_tmpl$2","clsx","expander","css","expanded","keyName","isLastKey","_el$3","_tmpl$3","_c$","_$memo","Array","isArray","_el$4","_tmpl$4","_el$5","firstChild","_el$7","nextSibling","valueKey","_el$8","_tmpl$5","_el$9","_el$1","valueString","_el$10","valueNumber","_el$11","String","valueBoolean","_el$12","_tmpl$6","valueNull","_el$13","_tmpl$7","_el$14","valueFunction","ArrayValue","ObjectValue","_el$16","_tmpl$8","actions","_tmpl$9","valueContainer","setExpanded","_el$18","_tmpl$1","_el$19","_el$22","_el$23","_tmpl$10","_el$24","_el$29","_el$25","_el$27","_el$28","$$click","stopPropagation","stopImmediatePropagation","length","_v$6","collapsible","_v$7","info","Show","_el$20","For","each","item","i","expandedLine","Boolean","_el$21","_tmpl$0","_v$3","expanderContainer","_v$4","valueBraces","_v$5","a","keys","Object","lastKeyName","_el$30","_tmpl$11","_el$31","_el$34","_el$35","_el$36","_el$41","_el$37","_el$39","_el$40","_v$1","_v$10","_el$32","k","_el$33","_v$8","_v$9","_v$0","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\n\nexport function JsonTree(props: {\n  value: any\n  copyable?: boolean\n  defaultExpansionDepth?: number\n}) {\n  return (\n    <JsonValue\n      isRoot\n      value={props.value}\n      copyable={props.copyable}\n      depth={0}\n      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n    />\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n}) {\n  const {\n    value,\n    keyName,\n    isRoot = false,\n    isLastKey,\n    copyable,\n    defaultExpansionDepth,\n    depth,\n  } = props\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(isRoot)}>\n      {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>\n      )}\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n          )\n        }\n        if (typeof value === 'number') {\n          return <span class={styles().tree.valueNumber}>{value}</span>\n        }\n        if (typeof value === 'boolean') {\n          return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n        }\n        if (value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>{String(value)}</span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return (\n            <ArrayValue\n              defaultExpansionDepth={defaultExpansionDepth}\n              depth={depth}\n              copyable={copyable}\n              keyName={keyName}\n              value={value}\n            />\n          )\n        }\n        if (typeof value === 'object') {\n          return (\n            <ObjectValue\n              defaultExpansionDepth={defaultExpansionDepth}\n              depth={depth}\n              copyable={copyable}\n              keyName={keyName}\n              value={value}\n            />\n          )\n        }\n        return <span />\n      })()}\n      {copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={value} />\n        </div>\n      )}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = ({\n  value,\n  keyName,\n  copyable,\n  defaultExpansionDepth,\n  depth,\n}: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n  defaultExpansionDepth: number\n  depth: number\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)\n\n  if (value.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{keyName}&quot;:{' '}\n          </span>\n        )}\n        <span class={styles().tree.valueBraces}>[]</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander\n        onClick={() => setExpanded(!expanded())}\n        expanded={expanded()}\n      />\n      {keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{value.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>[</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={value}>\n            {(item, i) => {\n              const isLastKey = i() === value.length - 1\n              return (\n                <JsonValue\n                  copyable={copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                  defaultExpansionDepth={defaultExpansionDepth}\n                  depth={depth + 1}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = ({\n  value,\n  keyName,\n  copyable,\n  defaultExpansionDepth,\n  depth,\n}: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)\n  const keys = Object.keys(value)\n  const lastKeyName = keys[keys.length - 1]\n\n  if (keys.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{keyName}&quot;:{' '}\n          </span>\n        )}\n        <span class={styles().tree.valueBraces}>{'{}'}</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {keyName && (\n        <Expander\n          onClick={() => setExpanded(!expanded())}\n          expanded={expanded()}\n        />\n      )}\n      {keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={copyable}\n                  defaultExpansionDepth={defaultExpansionDepth}\n                  depth={depth + 1}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n  const styles = useStyles()\n  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n  return (\n    <button\n      class={styles().tree.actionButton}\n      title=\"Copy object to clipboard\"\n      aria-label={`${\n        copyState() === 'NoCopy'\n          ? 'Copy object to clipboard'\n          : copyState() === 'SuccessCopy'\n            ? 'Object copied to clipboard'\n            : 'Error copying object to clipboard'\n      }`}\n      onClick={\n        copyState() === 'NoCopy'\n          ? () => {\n              navigator.clipboard\n                .writeText(JSON.stringify(props.value, null, 2))\n                .then(\n                  () => {\n                    setCopyState('SuccessCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                  (err) => {\n                    console.error('Failed to copy: ', err)\n                    setCopyState('ErrorCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                )\n            }\n          : undefined\n      }\n    >\n      <Switch>\n        <Match when={copyState() === 'NoCopy'}>\n          <Copier />\n        </Match>\n        <Match when={copyState() === 'SuccessCopy'}>\n          <CopiedCopier theme={'dark'} />\n        </Match>\n        <Match when={copyState() === 'ErrorCopy'}>\n          <ErrorCopier />\n        </Match>\n      </Switch>\n    </button>\n  )\n}\n\nconst Expander = (props: { expanded: boolean; onClick: () => void }) => {\n  const styles = useStyles()\n  return (\n    <span\n      onClick={props.onClick}\n      class={clsx(\n        styles().tree.expander,\n        css`\n          transform: rotate(${props.expanded ? 90 : 0}deg);\n        `,\n        props.expanded &&\n          css`\n            & svg {\n              top: -1px;\n            }\n          `,\n      )}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 12L10 8L6 4\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_el$14","_tmpl$6","CopyButton","clsx","actions","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","length","_el$16","_tmpl$8","_el$17","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","_el$34","_tmpl$10","_el$35","_el$36","_el$37","_el$39","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_el$44","_el$45","_el$46","_el$51","_el$47","_el$49","_el$50","_v$11","_v$12","_el$42","k","_el$43","_v$0","_v$1","_v$10","copyState","setCopyState","_el$52","_tmpl$12","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$13","actionButton","_v$14","_$setAttribute","_el$53","_tmpl$13","expander","css","_$delegateEvents"],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -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

@@ -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

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

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

@@ -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

@@ -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;
         }
       `,
@@ -379,10 +383,11 @@ const stylesFactory = (theme = "dark") => {
       `,
       expander: css`
         position: absolute;
+        cursor: pointer;
         left: -16px;
         top: 3px;
         & path {
-          stroke: ${colors.blue[300]};
+          stroke: ${t(colors.blue[400], colors.blue[300])};
         }
         & svg {
           width: ${size[3]};
@@ -392,19 +397,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 +424,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 +506,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 +523,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 +550,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 +561,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,