@industry-theme/theme-editor-panel 0.1.3 → 0.1.5

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import type { PanelDefinition } from './types';
+import type { PanelDefinition } from '@principal-ade/panel-framework-core';
 /**
  * Export array of panel definitions.
  * This is the required export for panel extensions.
  */
-export declare const panels: PanelDefinition[];
+export declare const panels: PanelDefinition<any, any>[];
 /**
  * Optional: Called once when the entire package is loaded.
  * Use this for package-level initialization.

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAGlE;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,EA6BnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC;AAGF,OAAO,EACL,gBAAgB,EAChB,wBAAwB,EACxB,iBAAiB,EACjB,cAAc,EACd,oBAAoB,EACpB,eAAe,GAChB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAG3E;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,EA6B7C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC;AAGF,OAAO,EACL,gBAAgB,EAChB,wBAAwB,EACxB,iBAAiB,EACjB,cAAc,EACd,oBAAoB,EACpB,eAAe,GAChB,MAAM,SAAS,CAAC"}

package/dist/panels/ThemeEditorPanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PanelComponentProps } from '../types';
+import type { ThemeEditorPanelPropsTyped } from '../types';
 /**
  * ThemeEditorPanel - A panel for customizing the Industry theme colors.
  *
@@ -9,5 +9,5 @@ import type { PanelComponentProps } from '../types';
  * - Reset individual colors to defaults
  * - Save theme customizations
  */
-export declare const ThemeEditorPanel: React.FC<PanelComponentProps>;
+export declare const ThemeEditorPanel: React.FC<ThemeEditorPanelPropsTyped>;
 //# sourceMappingURL=ThemeEditorPanel.d.ts.map

package/dist/panels/ThemeEditorPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ThemeEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAiB3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AA8apD;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+B1D,CAAC"}
+{"version":3,"file":"ThemeEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ThemeEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAiB3D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAyb3D;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA+BjE,CAAC"}

package/dist/panels.bundle.js

@@ -41,23 +41,24 @@ var defaultMarkdownTheme = {
     primary: "#007acc",
     secondary: "#005a9e",
     accent: "#1a1a1a",
-    highlight: "rgba(0, 122, 204, 0.1)",
+    highlight: "#e6f4fb",
     muted: "#f0f0f0",
     success: "#28a745",
     warning: "#ffc107",
     error: "#dc3545",
     info: "#17a2b8",
-    border: "rgba(0, 0, 0, 0.1)",
+    border: "#e6e6e6",
     backgroundSecondary: "#f8f9fa",
     backgroundTertiary: "#e9ecef",
-    backgroundLight: "rgba(0, 0, 0, 0.03)",
-    backgroundHover: "rgba(0, 0, 0, 0.05)",
+    backgroundLight: "#f7f7f7",
+    backgroundHover: "#f2f2f2",
     surface: "#ffffff",
     textSecondary: "#555555",
     textTertiary: "#888888",
     textMuted: "#aaaaaa",
-    highlightBg: "rgba(255, 235, 59, 0.3)",
-    highlightBorder: "rgba(255, 235, 59, 0.6)"
+    highlightBg: "#fff9c4",
+    highlightBorder: "#fff389",
+    textOnPrimary: "#ffffff"
   },
   buttons: {
     primary: {
@@ -151,23 +152,24 @@ var defaultTerminalTheme = {
     primary: "#ffc107",
     secondary: "#ffb300",
     accent: "#ffffff",
-    highlight: "rgba(255, 193, 7, 0.1)",
+    highlight: "#1a1301",
     muted: "#1a1a1a",
     success: "#4caf50",
     warning: "#ff9800",
     error: "#f44336",
     info: "#2196f3",
-    border: "rgba(255, 193, 7, 0.2)",
+    border: "#332701",
     backgroundSecondary: "#0a0a0a",
     backgroundTertiary: "#111111",
-    backgroundLight: "rgba(255, 193, 7, 0.03)",
-    backgroundHover: "rgba(255, 193, 7, 0.05)",
+    backgroundLight: "#080600",
+    backgroundHover: "#0d0a00",
     surface: "#050505",
     textSecondary: "#e0e0e0",
     textTertiary: "#b0b0b0",
     textMuted: "#808080",
-    highlightBg: "rgba(255, 193, 7, 0.2)",
-    highlightBorder: "rgba(255, 193, 7, 0.4)"
+    highlightBg: "#332701",
+    highlightBorder: "#664d03",
+    textOnPrimary: "#000000"
   },
   buttons: {
     primary: {
@@ -262,23 +264,24 @@ var defaultEditorTheme = {
     primary: "#569cd6",
     secondary: "#408ac9",
     accent: "#c586c0",
-    highlight: "rgba(86, 156, 214, 0.1)",
+    highlight: "#242b30",
     muted: "#2a2a2a",
     success: "#6a9955",
     warning: "#d18616",
     error: "#f44747",
     info: "#569cd6",
-    border: "rgba(255, 255, 255, 0.1)",
+    border: "#343434",
     backgroundSecondary: "#252526",
     backgroundTertiary: "#333333",
-    backgroundLight: "rgba(255, 255, 255, 0.03)",
-    backgroundHover: "rgba(255, 255, 255, 0.05)",
+    backgroundLight: "#252525",
+    backgroundHover: "#292929",
     surface: "#252526",
     textSecondary: "#cccccc",
     textTertiary: "#999999",
     textMuted: "#666666",
-    highlightBg: "rgba(255, 235, 59, 0.2)",
-    highlightBorder: "rgba(255, 235, 59, 0.4)"
+    highlightBg: "#4b4724",
+    highlightBorder: "#78702a",
+    textOnPrimary: "#ffffff"
   },
   buttons: {
     primary: {
@@ -338,7 +341,7 @@ var landingPageTheme = {
     heading: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
     monospace: '"SF Mono", Monaco, Inconsolata, "Fira Code", monospace'
   },
-  fontSizes: [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 24, 28, 32, 36, 48, 56, 68, 84, 96],
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
   fontScale: 1,
   fontWeights: {
     body: 400,
@@ -372,23 +375,24 @@ var landingPageTheme = {
     primary: "#00C2FF",
     secondary: "#0098CC",
     accent: "#0066FF",
-    highlight: "rgba(0, 194, 255, 0.15)",
+    highlight: "#001d26",
     muted: "#1a1a1a",
     success: "#4caf50",
     warning: "#ff9800",
     error: "#f44336",
     info: "#2196f3",
-    border: "rgba(0, 194, 255, 0.2)",
+    border: "#002733",
     backgroundSecondary: "#0a1628",
     backgroundTertiary: "#0f1c2e",
-    backgroundLight: "rgba(0, 194, 255, 0.04)",
-    backgroundHover: "rgba(0, 194, 255, 0.1)",
-    surface: "rgba(0, 0, 0, 0.4)",
+    backgroundLight: "#00080a",
+    backgroundHover: "#00131a",
+    surface: "#000000",
     textSecondary: "#d1d5db",
     textTertiary: "#9ca3af",
     textMuted: "#6b7280",
-    highlightBg: "rgba(255, 235, 59, 0.25)",
-    highlightBorder: "rgba(255, 235, 59, 0.5)"
+    highlightBg: "#403b0f",
+    highlightBorder: "#80761e",
+    textOnPrimary: "#000000"
   },
   buttons: {
     primary: {
@@ -408,13 +412,13 @@ var landingPageTheme = {
       bg: "transparent",
       borderWidth: 1,
       borderStyle: "solid",
-      borderColor: "rgba(0, 194, 255, 0.3)",
+      borderColor: "#003a4d",
       padding: "8px 16px",
       fontSize: 14,
       fontWeight: 600,
       cursor: "pointer",
       "&:hover": {
-        bg: "rgba(0, 194, 255, 0.1)",
+        bg: "#00131a",
         borderColor: "#00C2FF"
       }
     },
@@ -428,7 +432,7 @@ var landingPageTheme = {
       cursor: "pointer",
       "&:hover": {
         color: "#00D9FF",
-        bg: "rgba(0, 194, 255, 0.1)"
+        bg: "#00131a"
       }
     }
   },
@@ -458,9 +462,9 @@ var landingPageTheme = {
       borderRadius: 4
     },
     secondary: {
-      bg: "rgba(0, 194, 255, 0.05)",
+      bg: "#000a0d",
       border: "1px solid",
-      borderColor: "rgba(0, 194, 255, 0.2)",
+      borderColor: "#002733",
       borderRadius: 4
     }
   }
@@ -473,23 +477,24 @@ var landingPageLightTheme = {
     primary: "#0098CC",
     secondary: "#00C2FF",
     accent: "#0066FF",
-    highlight: "rgba(0, 152, 204, 0.1)",
+    highlight: "#e6f5fa",
     muted: "#f0f0f0",
     success: "#4caf50",
     warning: "#ff9800",
     error: "#f44336",
     info: "#2196f3",
-    border: "rgba(0, 152, 204, 0.2)",
+    border: "#cceaf5",
     backgroundSecondary: "#f8f9fa",
     backgroundTertiary: "#e9ecef",
-    backgroundLight: "rgba(0, 152, 204, 0.03)",
-    backgroundHover: "rgba(0, 152, 204, 0.05)",
-    surface: "rgba(255, 255, 255, 0.95)",
+    backgroundLight: "#f7fcfd",
+    backgroundHover: "#f2fafc",
+    surface: "#ffffff",
     textSecondary: "#555555",
     textTertiary: "#888888",
     textMuted: "#aaaaaa",
-    highlightBg: "rgba(255, 235, 59, 0.3)",
-    highlightBorder: "rgba(255, 235, 59, 0.6)"
+    highlightBg: "#fff9c4",
+    highlightBorder: "#fff389",
+    textOnPrimary: "#ffffff"
   },
   buttons: {
     primary: {
@@ -509,13 +514,13 @@ var landingPageLightTheme = {
       bg: "transparent",
       borderWidth: 1,
       borderStyle: "solid",
-      borderColor: "rgba(0, 152, 204, 0.3)",
+      borderColor: "#b2e0f0",
       padding: "8px 16px",
       fontSize: 14,
       fontWeight: 600,
       cursor: "pointer",
       "&:hover": {
-        bg: "rgba(0, 152, 204, 0.05)",
+        bg: "#f2fafc",
         borderColor: "#0098CC"
       }
     },
@@ -529,7 +534,7 @@ var landingPageLightTheme = {
       cursor: "pointer",
       "&:hover": {
         color: "#007aa8",
-        bg: "rgba(0, 152, 204, 0.05)"
+        bg: "#f2fafc"
       }
     }
   }
@@ -575,23 +580,24 @@ var regalTheme = {
     primary: "#d4a574",
     secondary: "#e0b584",
     accent: "#c9b8a3",
-    highlight: "rgba(212, 165, 116, 0.15)",
+    highlight: "#363338",
     muted: "#8b7968",
     success: "#5c8a72",
     warning: "#d4a574",
     error: "#a85751",
     info: "#d4a574",
-    border: "rgba(212, 165, 116, 0.2)",
+    border: "#3f3a3c",
     backgroundSecondary: "#212738",
     backgroundTertiary: "#2d3446",
-    backgroundLight: "rgba(212, 165, 116, 0.08)",
-    backgroundHover: "rgba(212, 165, 116, 0.15)",
+    backgroundLight: "#292a34",
+    backgroundHover: "#363338",
     surface: "#212738",
     textSecondary: "#c9b8a3",
     textTertiary: "#8b7968",
     textMuted: "#8b7968",
-    highlightBg: "rgba(255, 193, 7, 0.25)",
-    highlightBorder: "rgba(255, 193, 7, 0.5)"
+    highlightBg: "#534724",
+    highlightBorder: "#8c701a",
+    textOnPrimary: "#1a1f2e"
   },
   buttons: {
     primary: {
@@ -684,52 +690,53 @@ var terminalTheme = {
   zIndices: [0, 1, 10, 20, 30, 40, 50],
   colors: {
     text: "#e4e4e4",
-    background: "rgba(10, 10, 10, 0.85)",
+    background: "#0a0a0a",
     primary: "#66b3ff",
     secondary: "#80c4ff",
     accent: "#66ff99",
-    highlight: "rgba(102, 179, 255, 0.15)",
-    muted: "rgba(26, 26, 26, 0.8)",
+    highlight: "#18283d",
+    muted: "#1a1a1a",
     success: "#66ff99",
     warning: "#ffcc66",
     error: "#ff6666",
     info: "#66b3ff",
-    border: "rgba(255, 255, 255, 0.1)",
-    backgroundSecondary: "rgba(15, 15, 15, 0.9)",
-    backgroundTertiary: "rgba(20, 20, 20, 0.9)",
-    backgroundLight: "rgba(255, 255, 255, 0.05)",
-    backgroundHover: "rgba(102, 179, 255, 0.08)",
-    surface: "rgba(15, 15, 15, 0.95)",
-    textSecondary: "rgba(255, 255, 255, 0.7)",
-    textTertiary: "rgba(255, 255, 255, 0.5)",
-    textMuted: "rgba(255, 255, 255, 0.4)",
-    highlightBg: "rgba(255, 235, 59, 0.25)",
-    highlightBorder: "rgba(255, 235, 59, 0.5)"
+    border: "#1a1a1a",
+    backgroundSecondary: "#0f0f0f",
+    backgroundTertiary: "#141414",
+    backgroundLight: "#0d0d0d",
+    backgroundHover: "#0d1520",
+    surface: "#0f0f0f",
+    textSecondary: "#b3b3b3",
+    textTertiary: "#808080",
+    textMuted: "#666666",
+    highlightBg: "#40391e",
+    highlightBorder: "#7f7530",
+    textOnPrimary: "#ffffff"
   },
   modes: {
     light: {
       text: "#1a1a1a",
-      background: "rgba(255, 255, 255, 0.9)",
+      background: "#ffffff",
       primary: "#0066cc",
       secondary: "#0052a3",
       accent: "#00cc88",
-      highlight: "rgba(0, 102, 204, 0.08)",
-      muted: "rgba(245, 245, 245, 0.8)",
+      highlight: "#e6f2ff",
+      muted: "#f5f5f5",
       success: "#00cc88",
       warning: "#ffaa00",
       error: "#ff3333",
       info: "#0066cc",
-      border: "rgba(0, 0, 0, 0.1)",
-      backgroundSecondary: "rgba(250, 250, 250, 0.9)",
-      backgroundTertiary: "rgba(245, 245, 245, 0.9)",
-      backgroundLight: "rgba(0, 0, 0, 0.02)",
-      backgroundHover: "rgba(0, 102, 204, 0.04)",
-      surface: "rgba(255, 255, 255, 0.95)",
-      textSecondary: "rgba(0, 0, 0, 0.6)",
-      textTertiary: "rgba(0, 0, 0, 0.4)",
-      textMuted: "rgba(0, 0, 0, 0.3)",
-      highlightBg: "rgba(255, 235, 59, 0.3)",
-      highlightBorder: "rgba(255, 235, 59, 0.6)"
+      border: "#e6e6e6",
+      backgroundSecondary: "#fafafa",
+      backgroundTertiary: "#f5f5f5",
+      backgroundLight: "#fafafa",
+      backgroundHover: "#f5f9fd",
+      surface: "#ffffff",
+      textSecondary: "#666666",
+      textTertiary: "#999999",
+      textMuted: "#b3b3b3",
+      highlightBg: "#fff9c4",
+      highlightBorder: "#fff389"
     }
   },
   buttons: {
@@ -831,23 +838,24 @@ var matrixTheme = {
     primary: "#00d835",
     secondary: "#00a828",
     accent: "#00d835",
-    highlight: "rgba(0, 216, 53, 0.15)",
+    highlight: "#002008",
     muted: "#0a0a0a",
     success: "#00d835",
     warning: "#d4a000",
     error: "#d63333",
     info: "#00a8d6",
-    border: "rgba(0, 216, 53, 0.2)",
+    border: "#002b0b",
     backgroundSecondary: "#0a0a0a",
     backgroundTertiary: "#111111",
-    backgroundLight: "rgba(0, 216, 53, 0.03)",
-    backgroundHover: "rgba(0, 216, 53, 0.08)",
+    backgroundLight: "#000602",
+    backgroundHover: "#001104",
     surface: "#050505",
     textSecondary: "#808080",
     textTertiary: "#606060",
     textMuted: "#484848",
-    highlightBg: "rgba(0, 216, 53, 0.25)",
-    highlightBorder: "rgba(0, 216, 53, 0.5)"
+    highlightBg: "#00360d",
+    highlightBorder: "#006c1b",
+    textOnPrimary: "#000000"
   },
   buttons: {
     primary: {
@@ -948,23 +956,24 @@ var matrixMinimalTheme = {
     primary: "#b8b8b8",
     secondary: "#909090",
     accent: "#00d835",
-    highlight: "rgba(0, 216, 53, 0.1)",
+    highlight: "#001605",
     muted: "#0a0a0a",
     success: "#00d835",
     warning: "#d4a000",
     error: "#d63333",
     info: "#00a8d6",
-    border: "rgba(184, 184, 184, 0.1)",
+    border: "#121212",
     backgroundSecondary: "#0a0a0a",
     backgroundTertiary: "#111111",
-    backgroundLight: "rgba(184, 184, 184, 0.02)",
-    backgroundHover: "rgba(0, 216, 53, 0.05)",
+    backgroundLight: "#040404",
+    backgroundHover: "#000b03",
     surface: "#050505",
     textSecondary: "#808080",
     textTertiary: "#606060",
     textMuted: "#484848",
-    highlightBg: "rgba(0, 216, 53, 0.2)",
-    highlightBorder: "rgba(0, 216, 53, 0.4)"
+    highlightBg: "#002b0b",
+    highlightBorder: "#005615",
+    textOnPrimary: "#000000"
   },
   buttons: {
     primary: {
@@ -1065,23 +1074,24 @@ var slateTheme = {
     primary: "#d1d5db",
     secondary: "#6b7280",
     accent: "#f59e0b",
-    highlight: "rgba(209, 213, 219, 0.15)",
+    highlight: "#353838",
     muted: "#2d3134",
     success: "#10b981",
     warning: "#f59e0b",
     error: "#ef4444",
     info: "#3b82f6",
-    border: "rgba(156, 163, 175, 0.15)",
+    border: "#2d3034",
     backgroundSecondary: "#22252a",
     backgroundTertiary: "#2d3134",
-    backgroundLight: "rgba(156, 163, 175, 0.05)",
-    backgroundHover: "rgba(156, 163, 175, 0.1)",
+    backgroundLight: "#202325",
+    backgroundHover: "#27292c",
     surface: "#1f2124",
     textSecondary: "#e5e7eb",
     textTertiary: "#6b7280",
     textMuted: "#4b5563",
-    highlightBg: "rgba(245, 158, 11, 0.25)",
-    highlightBorder: "rgba(245, 158, 11, 0.5)"
+    highlightBg: "#513c19",
+    highlightBorder: "#875d14",
+    textOnPrimary: "#1a1c1e"
   },
   buttons: {
     primary: {
@@ -1854,19 +1864,27 @@ const ThemeEditorPanelContent = ({
           "div",
           {
             style: {
-              padding: "20px",
+              height: "40px",
+              minHeight: "40px",
+              maxHeight: "40px",
+              paddingLeft: "12px",
+              paddingRight: "12px",
               borderBottom: `1px solid ${theme2.colors.border}`,
-              flex: "0 0 auto"
+              flex: "0 0 40px",
+              display: "flex",
+              alignItems: "center",
+              boxSizing: "border-box"
             },
-            children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
-                /* @__PURE__ */ jsx(Palette, { size: 24, color: theme2.colors.primary }),
+            children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", justifyContent: "space-between", width: "100%" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx(Palette, { size: 18, color: theme2.colors.primary }),
                 /* @__PURE__ */ jsx(
                   "h2",
                   {
                     style: {
                       margin: 0,
-                      fontSize: theme2.fontSizes[4],
+                      fontSize: theme2.fontSizes[2],
+                      fontWeight: 600,
                       color: theme2.colors.text
                     },
                     children: "Theme Editor"
@@ -1880,20 +1898,21 @@ const ThemeEditorPanelContent = ({
                     {
                       onClick: () => setPresetDropdownOpen(!presetDropdownOpen),
                       style: {
-                        padding: "8px 12px",
-                        borderRadius: "6px",
+                        padding: "4px 8px",
+                        borderRadius: "4px",
                         border: `1px solid ${theme2.colors.border}`,
                         backgroundColor: presetDropdownOpen ? theme2.colors.backgroundSecondary : theme2.colors.background,
                         color: theme2.colors.text,
                         cursor: "pointer",
                         display: "flex",
                         alignItems: "center",
-                        gap: "8px",
+                        gap: "6px",
                         fontSize: theme2.fontSizes[1],
                         fontFamily: theme2.fonts.body,
                         transition: "all 0.15s",
-                        minWidth: "140px",
-                        justifyContent: "space-between"
+                        minWidth: "120px",
+                        justifyContent: "space-between",
+                        height: "28px"
                       },
                       onMouseEnter: (e) => {
                         if (!presetDropdownOpen) {
@@ -2014,8 +2033,8 @@ const ThemeEditorPanelContent = ({
                     onClick: () => setShowHelp(!showHelp),
                     title: "Help",
                     style: {
-                      padding: "8px",
-                      borderRadius: "6px",
+                      padding: "4px",
+                      borderRadius: "4px",
                       border: `1px solid ${theme2.colors.border}`,
                       backgroundColor: showHelp ? theme2.colors.backgroundSecondary : theme2.colors.background,
                       color: theme2.colors.text,
@@ -2023,7 +2042,9 @@ const ThemeEditorPanelContent = ({
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                      transition: "all 0.15s"
+                      transition: "all 0.15s",
+                      width: "28px",
+                      height: "28px"
                     },
                     onMouseEnter: (e) => {
                       if (!showHelp) {
@@ -2035,7 +2056,7 @@ const ThemeEditorPanelContent = ({
                         e.currentTarget.style.backgroundColor = theme2.colors.background;
                       }
                     },
-                    children: /* @__PURE__ */ jsx(CircleQuestionMark, { size: 18 })
+                    children: /* @__PURE__ */ jsx(CircleQuestionMark, { size: 16 })
                   }
                 )
               ] })