Fix usage of theme package

thetarnav · thetarnav · commit dca83c053e79 · 2024-12-15T10:02:11.000+01:00
diff --git a/.changeset/angry-cameras-happen.md b/.changeset/angry-cameras-happen.md
@@ -0,0 +1,5 @@
+---
+"@solid-devtools/frontend": patch
+---
+
+Fix usage of theme package
diff --git a/examples/sandbox/src/Recursive.tsx b/examples/sandbox/src/Recursive.tsx
@@ -69,7 +69,8 @@ const Node: Component<NodeType> = props => {
             <button
             style={{
                 "border-radius": "9999px",
-                "background-color": "#1e293b"
+                "background-color": "#1e293b",
+                "color": "white",
             }}
             onClick={e => addNode(nodeProps.id, nodeSignals.parents)}
             >
diff --git a/examples/sandbox/src/styles.css b/examples/sandbox/src/styles.css
@@ -5,6 +5,3 @@ body {
     padding-top: 82px;
     margin: 0;
 }
-button {
-    color: inherit;
-}
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -1,4 +1,5 @@
 import * as s from 'solid-js'
+import * as theme from '@solid-devtools/shared/theme'
 import * as ui from './ui/index.ts'
 import {createSidePanel} from './SidePanel.tsx'
 import {StructureView} from './structure.tsx'
@@ -74,7 +75,7 @@ export const App: s.Component<{headerSubtitle?: s.JSX.Element}> = props => {
     return (
         <div
             class="h-full w-full overflow-hidden grid text-base font-sans bg-panel-bg text-text"
-            style={{'grid-template-rows': `${ui.spacing[10]} 1fr`}}
+            style={{'grid-template-rows': `${theme.spacing[10]} 1fr`}}
         >
             <header class="p-2 flex items-center gap-x-2 bg-panel-bg b-b b-solid b-panel-border text-text">
                 <div class="flex items-center gap-x-2">
@@ -90,16 +91,16 @@ export const App: s.Component<{headerSubtitle?: s.JSX.Element}> = props => {
                 <Options />
             </header>
             <div class="overflow-hidden">
-                <ui.Splitter.Root>
-                    <ui.Splitter.Panel>
+                <ui.SplitterRoot>
+                    <ui.SplitterPanel>
                         <StructureView />
-                    </ui.Splitter.Panel>
+                    </ui.SplitterPanel>
                     {sidePanel.isOpen() && (
-                        <ui.Splitter.Panel>
+                        <ui.SplitterPanel>
                             <sidePanel.SidePanel />
-                        </ui.Splitter.Panel>
+                        </ui.SplitterPanel>
                     )}
-                </ui.Splitter.Root>
+                </ui.SplitterRoot>
             </div>
         </div>
     )
diff --git a/packages/frontend/src/SidePanel.tsx b/packages/frontend/src/SidePanel.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import * as s from 'solid-js'
+import * as theme from '@solid-devtools/shared/theme'
 import {useController} from './controller.tsx'
 import * as dgraph from './dgraph.tsx'
 import {InspectorView} from './inspector.tsx'
@@ -53,7 +54,7 @@ export function createSidePanel() {
                 <div
                     class="h-full grid"
                     style={{
-                        'grid-template-rows': `${ui.spacing.header_height} 1fr`,
+                        'grid-template-rows': `${theme.spacing.header_height} 1fr`,
                         'grid-template-columns': '100%',
                     }}
                 >
diff --git a/packages/frontend/src/dgraph.tsx b/packages/frontend/src/dgraph.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import * as s from 'solid-js'
 import * as debug from '@solid-devtools/debugger/types'
 import {createHover} from '@solid-devtools/shared/primitives'
+import * as theme from '@solid-devtools/shared/theme'
 import {useController} from './controller.tsx'
 import * as ui from './ui/index.ts'
 
@@ -117,7 +118,7 @@ function calculateNodeOrder(
     return {flowOrder, depthMap}
 }
 
-const grid_size = ui.spacing[10]
+const grid_size = theme.spacing[10]
 
 const GraphNode: s.Component<{
     id: debug.NodeID
@@ -135,7 +136,7 @@ const GraphNode: s.Component<{
     const {pingUpdated, OwnerName} = ui.createHighlightedOwnerName()
     props.listenToUpdate(pingUpdated)
 
-    const margin = ui.spacing[2]
+    const margin = theme.spacing[2]
 
     return (
         <div
@@ -160,7 +161,7 @@ const GraphNode: s.Component<{
                     props.isHovered ? 'bg-panel-2' : 'bg-transparent group-hover:bg-panel-2',
                     props.isInspected ? 'b-panel-6' : 'b-transparent group-active:b-panel-4',
                 )}
-                style={{'box-shadow': `0 0 ${margin} ${ui.spacing[1]} ${ui.vars.panel[1]}`}}
+                style={{'box-shadow': `0 0 ${margin} ${theme.spacing[1]} ${theme.vars.panel[1]}`}}
             />
             <OwnerName name={name} type={type} />
         </div>
@@ -227,8 +228,8 @@ export function Dgraph_View(): s.JSX.Element {
     const thereIsAHoveredNode = s.createMemo(() => !!hovered.hoveredId())
 
     const pattern_size = '1px'
-    const pattern = `${ui.vars.panel[2]} 0,
-        ${ui.vars.panel[2]} ${pattern_size},
+    const pattern = `${theme.vars.panel[2]} 0,
+        ${theme.vars.panel[2]} ${pattern_size},
         transparent ${pattern_size},
         transparent ${grid_size}`
 
diff --git a/packages/frontend/src/inspector.tsx b/packages/frontend/src/inspector.tsx
@@ -6,6 +6,7 @@ import {defer} from '@solid-primitives/utils'
 import {handleTupleUpdates, createHover, createPingedSignal} from '@solid-devtools/shared/primitives'
 import {splitOnColon, warn} from '@solid-devtools/shared/utils'
 import * as debug from '@solid-devtools/debugger/types'
+import * as theme from '@solid-devtools/shared/theme'
 import {SidePanelCtx} from './SidePanel.tsx'
 import {useController, type DebuggerBridge} from './controller.tsx'
 import * as ui from './ui/index.ts'
@@ -590,7 +591,7 @@ const value_element_container = clsx(
 export const value_node_styles = /*css*/ `
     .${string_value_class}:before, .${string_value_class}:after {
         content: '"';
-        color: ${ui.vars.disabled};
+        color: ${theme.vars.disabled};
     }
 
     .${value_element_container_class}:hover {
diff --git a/packages/frontend/src/structure.tsx b/packages/frontend/src/structure.tsx
@@ -6,6 +6,7 @@ import {createElementSize, createResizeObserver} from '@solid-primitives/resize-
 import {useRemSize} from '@solid-primitives/styles'
 
 import {type Atom, atom, createHover} from '@solid-devtools/shared/primitives'
+import * as theme from '@solid-devtools/shared/theme'
 import * as debug from '@solid-devtools/debugger/types'
 import {hover_background, panel_header_el_border} from './SidePanel.tsx'
 import {useController, useDevtoolsOptions} from './controller.tsx'
@@ -268,14 +269,14 @@ export function reconcileStructure(
     return {roots: nextRoots, nodeList: NewNodeList}
 }
 
-export const path_height = ui.spacing[4.5]
-export const row_height = ui.spacing[4.5]
-export const row_padding = ui.spacing[3.5]
-export const v_margin = ui.spacing[3]
+export const path_height = theme.spacing[4.5]
+export const row_height = theme.spacing[4.5]
+export const row_padding = theme.spacing[3.5]
+export const v_margin = theme.spacing[3]
 
-export const path_height_in_rem = ui.remValue(path_height)
-export const row_height_in_rem = ui.remValue(row_height)
-export const v_margin_in_rem = ui.remValue(v_margin)
+export const path_height_in_rem = theme.remValue(path_height)
+export const row_height_in_rem = theme.remValue(row_height)
+export const v_margin_in_rem = theme.remValue(v_margin)
 
 export const path_height_class = 'h-owner-path-height'
 export const path_min_height_class = 'min-h-owner-path-height'
@@ -290,9 +291,9 @@ export const owner_path_styles = /*css*/ `
 `
 
 export const row_padding_minus_px = `calc(${row_padding} - 0.95px)`
-export const lines_color = ui.vars.panel[3]
+export const lines_color = theme.vars.panel[3]
 export const background_gradient = `repeating-linear-gradient(to right, transparent, transparent ${row_padding_minus_px}, ${lines_color} ${row_padding_minus_px}, ${lines_color} ${row_padding})`
-export const padding_mask = `linear-gradient(to right, rgba(0,0,0, 0.4), black ${ui.spacing[48]})`
+export const padding_mask = `linear-gradient(to right, rgba(0,0,0, 0.4), black ${theme.spacing[48]})`
 
 export function getVirtualVars(
     listLength: number,
@@ -328,7 +329,7 @@ export function StructureView(): s.JSXElement {
             <div
                 class="relative h-full w-full overflow-hidden grid"
                 style={{
-                    'grid-template-rows': `${ui.spacing.header_height} 1fr ${path_height}`,
+                    'grid-template-rows': `${theme.spacing.header_height} 1fr ${path_height}`,
                     'grid-template-columns': '100%',
                 }}
             >
@@ -385,7 +386,7 @@ const Search: s.Component = () => {
             <style>{
                 /*css*/ `
                     .edge-container-base {
-                        height: calc(100% - ${ui.spacing[2]})
+                        height: calc(100% - ${theme.spacing[2]})
                     }
                 `
             }</style>
@@ -401,7 +402,7 @@ const Search: s.Component = () => {
                 }}
                 class="w-full text-lg p-x-6 transition-padding leading-9 placeholder:text-disabled group-focus-within:p-l-2"
                 style={{
-                    height: ui.spacing.header_height,
+                    height: theme.spacing.header_height,
                 }}
                 type="text"
                 placeholder="Search"
@@ -450,10 +451,10 @@ const ToggleMode: s.Component = () => {
                                 style={{
                                     [ui.toggle_tab_color_var]:
                                         mode === debug.TreeWalkerMode.Owners
-                                            ? ui.vars.text.DEFAULT
+                                            ? theme.vars.text.DEFAULT
                                             : mode === debug.TreeWalkerMode.DOM
-                                              ? ui.vars.dom
-                                              : ui.vars.component,
+                                              ? theme.vars.dom
+                                              : theme.vars.component,
                                 }}
                             >
                                 <div
@@ -831,7 +832,7 @@ export const OwnerPath: s.Component = () => {
                         flex items-center pointer-events-none
                         group-hover:opacity-0"
                         style={{
-                            'background-image': `linear-gradient(to right, ${ui.vars.panel.bg} ${ui.spacing[8]}, transparent ${ui.spacing[32]})`,
+                            'background-image': `linear-gradient(to right, ${theme.vars.panel.bg} ${theme.spacing[8]}, transparent ${theme.spacing[32]})`,
                         }}
                     >
                         <ui.Icon.Options class="w-3 h3 text-disabled" />
@@ -925,7 +926,7 @@ export const OwnerNode: s.Component<{
             <div
                 class="relative -z-2 ml-3.5"
                 style={{
-                    width: `calc(${props.owner.level} * ${row_padding} + ${ui.spacing[2]})`,
+                    width: `calc(${props.owner.level} * ${row_padding} + ${theme.spacing[2]})`,
                     height: `calc(${row_height} + 0.95px)`,
                     background: background_gradient,
                     'mask-image': padding_mask,
diff --git a/packages/frontend/src/ui/highlight.tsx b/packages/frontend/src/ui/highlight.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import {type ParentComponent} from 'solid-js'
-import * as ui from '../ui/index.ts'
+import * as theme from '@solid-devtools/shared/theme'
 
 export const highlight_color_var = '--highlight_color_var'
 export const highlight_opacity_var = '--highlight_opacity_var'
@@ -9,7 +9,7 @@ export const highlight_container = 'relative z-1'
 export const highlight_element = `highlight_element absolute -z-1 inset-y-0 -inset-x-1 rounded transition-opacity`
 export const highlight_styles = /*css*/`
     .highlight_element {
-        background-color: var(${highlight_color_var}, ${ui.vars.highlight.bg});
+        background-color: var(${highlight_color_var}, ${theme.vars.highlight.bg});
         opacity: var(${highlight_opacity_var}, 0);
     }
     @media (prefers-color-scheme: dark) {
@@ -30,8 +30,8 @@ export const Highlight: ParentComponent<{
                 class={highlight_element}
                 style={{
                     [highlight_color_var]: props.isSignal
-                        ? ui.colors.amber[500]
-                        : ui.colors.cyan[400],
+                        ? theme.colors.amber[500]
+                        : theme.colors.cyan[400],
                     [highlight_opacity_var]: props.highlight ? 0.6 : 0,
                 }}
             ></div>
diff --git a/packages/frontend/src/ui/index.ts b/packages/frontend/src/ui/index.ts
@@ -1,4 +1,3 @@
-export * from '@solid-devtools/shared/theme'
 export * from './styles.tsx'
 
 export * from './badge.tsx'
@@ -9,7 +8,7 @@ export type {IconComponent} from './icons.tsx'
 export * from './owner-name.tsx'
 export {Scrollable} from './scrollable.tsx'
 export {Skeleton} from './skeleton.tsx'
-export * as Splitter from './splitter.tsx'
+export * from './splitter.tsx'
 
 export {CollapseToggle, ToggleButton} from './toggle-button.tsx'
 export {ToggleTabs, toggle_tab_color_var} from './toggle-tabs.tsx'
diff --git a/packages/frontend/src/ui/scrollable.tsx b/packages/frontend/src/ui/scrollable.tsx
@@ -1,17 +1,17 @@
 import * as s from 'solid-js'
 import clsx from 'clsx'
 import {combineProps} from '@solid-primitives/props'
-import * as ui from '../ui/index.ts'
+import * as theme from '@solid-devtools/shared/theme'
 import * as color from './color.ts'
 
 const thumb_color = (opacity: number): string =>
-    color.rgb_to_rgba(color.hex_to_rgb(ui.colors.gray[500]), opacity).toString()
+    color.rgb_to_rgba(color.hex_to_rgb(theme.colors.gray[500]), opacity).toString()
 
 export const custom_scrollbar = 'custom_scrollbar'
 export const custom_scrollbar_styles = /*css*/`
 .${custom_scrollbar}::-webkit-scrollbar {
     display: block;
-    width: ${ui.spacing[4]};
+    width: ${theme.spacing[4]};
 }
 .${custom_scrollbar}::-webkit-scrollbar-button {
     display: none;
diff --git a/packages/frontend/src/ui/splitter.tsx b/packages/frontend/src/ui/splitter.tsx
@@ -9,15 +9,15 @@ import {scheduleIdle} from '@solid-primitives/scheduled'
 import {useRemSize} from '@solid-primitives/styles'
 import {clamp} from '@solid-primitives/utils'
 
-export type PanelProps = {children: s.JSX.Element}
+export type SplitterPanelProps = {children: s.JSX.Element}
 
-const SplitterPanel = createToken<PanelProps>()
+export const SplitterPanel = createToken<SplitterPanelProps>()
 
 const MIN_SIZE_IN_REM = 8
 const MIN_SIZE = `${MIN_SIZE_IN_REM}rem`
 const SPLIT_SIZE = '1px'
 
-function SplitterRoot(props: {children: s.JSX.Element}): s.JSX.Element {
+export function SplitterRoot(props: {children: s.JSX.Element}): s.JSX.Element {
     const tokens = resolveTokens(SplitterPanel, () => props.children)
 
     const isMobile = createMediaQuery('(max-width: 640px)')
@@ -117,5 +117,3 @@ function SplitterRoot(props: {children: s.JSX.Element}): s.JSX.Element {
         </div>
     )
 }
-
-export {SplitterPanel as Panel, SplitterRoot as Root}
diff --git a/packages/frontend/src/ui/styles.tsx b/packages/frontend/src/ui/styles.tsx
@@ -1,8 +1,7 @@
 import * as s from 'solid-js'
-import {make_var_styles} from '@solid-devtools/shared/theme'
+import * as theme from '@solid-devtools/shared/theme'
 import {value_node_styles} from '../inspector.tsx'
 import {owner_path_styles} from '../structure.tsx'
-import * as ui from '../ui/index.ts'
 import {highlight_styles} from './highlight.tsx'
 import {custom_scrollbar_styles} from './scrollable.tsx'
 import {toggle_button_styles} from './toggle-button.tsx'
@@ -21,18 +20,18 @@ export const tag_brackets = 'tag_brackets'
 export const tag_brackets_styles = /*css*/ `
     .${tag_brackets}:before {
         content: '\<';
-        color: ${ui.vars.disabled};
+        color: ${theme.vars.disabled};
     }
     .${tag_brackets}:after {
         content: '>';
-        color: ${ui.vars.disabled};
+        color: ${theme.vars.disabled};
     }
 `
 
 export const devtools_root_class = 'devtools-root'
 
 export function Styles(): s.JSXElement {
-    const var_styles = make_var_styles(devtools_root_class)
+    const var_styles = theme.make_var_styles(devtools_root_class)
 
     return (
         <style>
diff --git a/packages/frontend/src/ui/toggle-button.tsx b/packages/frontend/src/ui/toggle-button.tsx
diff --git a/packages/frontend/src/ui/toggle-tabs.tsx b/packages/frontend/src/ui/toggle-tabs.tsx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@solid-devtools/frontend": patch
 +---
++
 +Fix usage of theme package
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,3 @@ body {`
`5`	`5`	`padding-top: 82px;`
`6`	`6`	`margin: 0;`
`7`	`7`	`}`
`8`		`-button {`
`9`		`- color: inherit;`
`10`		`-}`