From eb57846897ef3ffbd26c32ea38799f1706ac9b1f Mon Sep 17 00:00:00 2001 From: Angus Fretwell Date: Wed, 25 Feb 2026 11:41:08 +1100 Subject: [PATCH] add --vj-shadow and --vj-shadow-subtle CSS custom properties Replace hardcoded box-shadow values in breadcrumbs, enum-input, and context-menu with themeable CSS custom properties. Co-Authored-By: Claude Opus 4.6 --- packages/react/src/breadcrumbs.tsx | 2 +- packages/react/src/context-menu.tsx | 2 +- packages/react/src/enum-input.tsx | 2 +- packages/react/src/json-editor.tsx | 2 ++ 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react/src/breadcrumbs.tsx b/packages/react/src/breadcrumbs.tsx index a6c8f46..c1d9320 100644 --- a/packages/react/src/breadcrumbs.tsx +++ b/packages/react/src/breadcrumbs.tsx @@ -165,7 +165,7 @@ export function Breadcrumbs({ className }: BreadcrumbsProps) { overflowY: "auto", backgroundColor: "var(--vj-bg-panel, #252526)", border: "1px solid var(--vj-border, #333333)", - boxShadow: "0 4px 12px rgba(0,0,0,0.3)", + boxShadow: "var(--vj-shadow-subtle, 0 4px 12px rgba(0,0,0,0.3))", }} > {suggestions.map((s, i) => ( diff --git a/packages/react/src/context-menu.tsx b/packages/react/src/context-menu.tsx index 80db145..4d9cf96 100644 --- a/packages/react/src/context-menu.tsx +++ b/packages/react/src/context-menu.tsx @@ -63,7 +63,7 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) { backgroundColor: "var(--vj-bg-panel, #252526)", border: "1px solid var(--vj-border, #454545)", borderRadius: 4, - boxShadow: "0 4px 12px rgba(0,0,0,0.5)", + boxShadow: "var(--vj-shadow, 0 4px 12px rgba(0,0,0,0.5))", padding: "4px 0", minWidth: 160, }} diff --git a/packages/react/src/enum-input.tsx b/packages/react/src/enum-input.tsx index 2db52d6..9f5a445 100644 --- a/packages/react/src/enum-input.tsx +++ b/packages/react/src/enum-input.tsx @@ -153,7 +153,7 @@ export function EnumInput({ overflowY: "auto", backgroundColor: "var(--vj-bg-panel, #252526)", border: "1px solid var(--vj-border, #333333)", - boxShadow: "0 4px 12px rgba(0,0,0,0.3)", + boxShadow: "var(--vj-shadow-subtle, 0 4px 12px rgba(0,0,0,0.3))", }} > {suggestions.map((s, i) => ( diff --git a/packages/react/src/json-editor.tsx b/packages/react/src/json-editor.tsx index 135bff7..c152142 100644 --- a/packages/react/src/json-editor.tsx +++ b/packages/react/src/json-editor.tsx @@ -50,6 +50,8 @@ const DEFAULT_CSS_VARS: Record = { "--vj-input-bg": "#3c3c3c", "--vj-input-border": "#555555", "--vj-error": "#f48771", + "--vj-shadow": "0 4px 12px rgba(0,0,0,0.5)", + "--vj-shadow-subtle": "0 4px 12px rgba(0,0,0,0.3)", "--vj-font": "monospace", "--vj-input-font-size": "13px", };