feat: enhance property tree styling and type badge functionality

- Added new CSS variables for improved styling of property rows based on depth and odd/even states.
- Refactored the property type badge rendering in JavaScript to utilize a circular design with dynamic colors based on type.
- Improved the visual representation of property types in the property tree for better user experience.

Author: dertwist

src/prop-tree.js

@@ -118,25 +118,42 @@ function inferType(key, value) {
   return 'unknown';
 }
 
-const TYPE_ICONS = {
-  string: 'typeString',
-  int: 'typeInt',
-  float: 'typeFloat',
-  bool: 'typeBool',
-  color: 'typeColor',
-  object: 'typeObject',
-  array: 'typeArray',
-  vec2: 'typeVec2',
-  vec3: 'typeVec3',
-  vec4: 'typeVec4',
-  resource: 'typeResource',
-  soundevent: 'typeSound',
-  null: 'typeNull',
-  unknown: 'typeUnknown',
-  components: 'typeVec3',
-  readonly_string: 'typeString',
-  float_slider_01: 'typeFloat'
+const TYPE_ICON_COLORS = {
+  int: '#4A90D9',
+  float: '#7EC8E3',
+  string: '#E8943A',
+  bool: '#5CB85C',
+  color: '#9B59B6',
+  vec2: '#9B59B6',
+  vec3: '#9B59B6',
+  vec4: '#9B59B6',
+  array: '#F0C040',
+  object: '#E05555',
+  components: '#9B59B6',
+  readonly_string: '#E8943A',
+  float_slider_01: '#7EC8E3'
 };
+const TYPE_ICON_FALLBACK_COLOR = '#AAAAAA';
+
+function darkenHexColor(hex, amount = 28) {
+  if (typeof hex !== 'string') return TYPE_ICON_FALLBACK_COLOR;
+  const clean = hex.replace('#', '');
+  if (!/^[0-9a-fA-F]{6}$/.test(clean)) return TYPE_ICON_FALLBACK_COLOR;
+  const clamp = (n) => Math.max(0, Math.min(255, n));
+  const r = clamp(parseInt(clean.slice(0, 2), 16) - amount);
+  const g = clamp(parseInt(clean.slice(2, 4), 16) - amount);
+  const b = clamp(parseInt(clean.slice(4, 6), 16) - amount);
+  return '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
+}
+
+function paintTypeBadgeCircle(el, type) {
+  if (!el) return;
+  const fill = TYPE_ICON_COLORS[type] || TYPE_ICON_FALLBACK_COLOR;
+  const border = darkenHexColor(fill, 24);
+  el.innerHTML = '<span class="prop-type-circle" aria-hidden="true"></span>';
+  el.style.setProperty('--type-circle-fill', fill);
+  el.style.setProperty('--type-circle-border', border);
+}
 
 function getActiveMode() {
   if (window.VDataEditorModes?.resolveActiveEditorMode) {
@@ -174,8 +191,7 @@ function buildTypeBadge(currentType, onCast) {
   const wrap = document.createElement('span');
   wrap.className = 'prop-type-icon-badge prop-type-badge-interactive';
   wrap.title = `Type: ${currentType} (click to change)`;
-  const ik = TYPE_ICONS[currentType];
-  if (ik && ICONS[ik]) wrap.innerHTML = ICONS[ik];
+  paintTypeBadgeCircle(wrap, currentType);
 
   const options = TYPE_CAST_OPTIONS[currentType];
   if (!options || options.length === 0) {
@@ -608,8 +624,7 @@ function buildPropRow(key, value, type, depth, parentRef, arrayIdx, propPath, hi
   const keyIcon = document.createElement('span');
   keyIcon.className = 'prop-type-icon-badge';
   keyIcon.title = type;
-  const iconKey = TYPE_ICONS[type];
-  if (iconKey && ICONS[iconKey]) keyIcon.innerHTML = ICONS[iconKey];
+  paintTypeBadgeCircle(keyIcon, type);
 
   const treeNodeIcon = document.createElement('span');
   treeNodeIcon.className = 'prop-tree-node-icon';

style.css

@@ -70,6 +70,17 @@
   --color-string:rgb(255,209,153);--color-expr:rgb(255,123,125);
   --color-bool:var(--text-primary);--color-combo:var(--text-secondary);
   --color-vec3:rgb(181,255,239);--color-color:#f5c2e7;
+  --prop-row-even-bg:transparent;
+  --prop-row-odd-bg:rgba(255,255,255,.018);
+  --prop-row-depth-1:rgba(255,255,255,.006);
+  --prop-row-depth-2:rgba(255,255,255,.010);
+  --prop-row-depth-3:rgba(255,255,255,.014);
+  --prop-row-depth-4:rgba(255,255,255,.018);
+  --prop-row-depth-5:rgba(255,255,255,.020);
+  --prop-row-depth-6:rgba(255,255,255,.022);
+  --prop-row-depth-7:rgba(255,255,255,.024);
+  --prop-row-depth-8:rgba(255,255,255,.026);
+  --prop-row-depth-9:rgba(255,255,255,.028);
 }
 html[data-theme="light"]{
   color-scheme:light;
@@ -92,6 +103,17 @@ html[data-theme="light"]{
   --border:#c4c4cc;
   --border-subtle:#d0d0d8;
   --scrollbar-thumb:#b0b8c4;
+  --prop-row-even-bg:#ffffff;
+  --prop-row-odd-bg:#f3f5f9;
+  --prop-row-depth-1:#f8f9fc;
+  --prop-row-depth-2:#f4f6fb;
+  --prop-row-depth-3:#f1f3f9;
+  --prop-row-depth-4:#eef1f8;
+  --prop-row-depth-5:#ebeff7;
+  --prop-row-depth-6:#e9edf6;
+  --prop-row-depth-7:#e6ebf5;
+  --prop-row-depth-8:#e4e9f4;
+  --prop-row-depth-9:#e2e7f3;
 }
 html,body{height:100%;overflow:hidden;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);font-size:10pt;line-height:1.5}
 input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
@@ -344,19 +366,19 @@ input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit
 .prop-tree-panel{display:flex;flex-direction:column;height:100%;overflow:hidden;min-height:0}
 .prop-tree{flex:1;overflow-y:auto;padding:4px 0;min-height:0}
 .prop-row{display:grid;grid-template-columns:minmax(120px,220px) 1fr;align-items:center;min-height:28px;padding:0 8px;border-bottom:1px solid var(--border-subtle);gap:8px}
-.prop-row.prop-row-even{background:transparent}
-.prop-row.prop-row-odd{background:rgba(255,255,255,.018)}
+.prop-row.prop-row-even{background:var(--prop-row-even-bg)}
+.prop-row.prop-row-odd{background:var(--prop-row-odd-bg)}
 .prop-row:hover{background:var(--bg-hover)!important}
-.prop-row[data-depth="1"]{--row-indent-tint:rgba(255,255,255,.006)}
-.prop-row[data-depth="2"]{--row-indent-tint:rgba(255,255,255,.010)}
-.prop-row[data-depth="3"]{--row-indent-tint:rgba(255,255,255,.014)}
-.prop-row[data-depth="4"]{--row-indent-tint:rgba(255,255,255,.018)}
-.prop-row[data-depth="5"]{--row-indent-tint:rgba(255,255,255,.020)}
-.prop-row[data-depth="6"]{--row-indent-tint:rgba(255,255,255,.022)}
-.prop-row[data-depth="7"]{--row-indent-tint:rgba(255,255,255,.024)}
-.prop-row[data-depth="8"]{--row-indent-tint:rgba(255,255,255,.026)}
-.prop-row[data-depth="9"]{--row-indent-tint:rgba(255,255,255,.028)}
-.prop-row[data-depth]:not([data-depth="0"]).prop-row-odd{background:var(--row-indent-tint,rgba(255,255,255,.018))}
+.prop-row[data-depth="1"]{--row-indent-tint:var(--prop-row-depth-1)}
+.prop-row[data-depth="2"]{--row-indent-tint:var(--prop-row-depth-2)}
+.prop-row[data-depth="3"]{--row-indent-tint:var(--prop-row-depth-3)}
+.prop-row[data-depth="4"]{--row-indent-tint:var(--prop-row-depth-4)}
+.prop-row[data-depth="5"]{--row-indent-tint:var(--prop-row-depth-5)}
+.prop-row[data-depth="6"]{--row-indent-tint:var(--prop-row-depth-6)}
+.prop-row[data-depth="7"]{--row-indent-tint:var(--prop-row-depth-7)}
+.prop-row[data-depth="8"]{--row-indent-tint:var(--prop-row-depth-8)}
+.prop-row[data-depth="9"]{--row-indent-tint:var(--prop-row-depth-9)}
+.prop-row[data-depth]:not([data-depth="0"]).prop-row-odd{background:var(--row-indent-tint,var(--prop-row-odd-bg))}
 .prop-row[data-depth="1"] .prop-key{padding-left:16px}
 .prop-row[data-depth="2"] .prop-key{padding-left:32px}
 .prop-row[data-depth="3"] .prop-key{padding-left:48px}
@@ -739,19 +761,26 @@ html[data-theme="light"] #cmEditor .cm-content:focus *::selection{
 .wc-readonly-list{opacity:.55;pointer-events:none}
 .wc-sys-row{margin-bottom:3px}
 /* ── Property type icon (key column) ────────────── */
-.prop-type-icon-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--text-muted);opacity:.7}
-.prop-type-icon-badge svg{width:13px;height:13px}
-.prop-type-badge-interactive.prop-type-icon-badge{cursor:pointer;border-radius:3px;padding:1px;transition:background .1s,opacity .1s}
-.prop-type-badge-interactive.prop-type-icon-badge:hover{background:var(--bg-hover);opacity:1;color:var(--text-primary)}
+.prop-type-icon-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;opacity:.95}
+.prop-type-circle{
+  width:12px;
+  height:12px;
+  border-radius:50%;
+  background:var(--type-circle-fill,#AAAAAA);
+  border:1px solid transparent;
+  box-sizing:border-box;
+}
+.prop-type-badge-interactive.prop-type-icon-badge{
+  cursor:pointer;
+  border-radius:3px;
+  padding:1px;
+  transition:background .1s,opacity .1s;
+}
+.prop-type-badge-interactive.prop-type-icon-badge:hover{
+  background:var(--bg-hover);
+  opacity:1;
+}
+.prop-type-badge-interactive.prop-type-icon-badge:hover .prop-type-circle{
+  border-color:var(--type-circle-border,#888888);
+}
 .prop-value-summary{font-size:10px;color:var(--text-muted);font-family:var(--font-mono),monospace;flex-shrink:0}
-.prop-row[data-type="string"] .prop-type-icon-badge{color:var(--color-string)}
-.prop-row[data-type="int"] .prop-type-icon-badge{color:var(--color-int)}
-.prop-row[data-type="float"] .prop-type-icon-badge{color:var(--color-float)}
-.prop-row[data-type="bool"] .prop-type-icon-badge{color:var(--color-bool)}
-.prop-row[data-type="color"] .prop-type-icon-badge{color:var(--color-color)}
-.prop-row[data-type="vec2"] .prop-type-icon-badge,.prop-row[data-type="vec3"] .prop-type-icon-badge,.prop-row[data-type="vec4"] .prop-type-icon-badge{color:var(--color-vec3)}
-.prop-row[data-type="resource"] .prop-type-icon-badge{color:var(--accent)}
-.prop-row[data-type="soundevent"] .prop-type-icon-badge{color:var(--green)}
-.prop-row[data-type="object"] .prop-type-icon-badge{color:var(--yellow)}
-.prop-row[data-type="array"] .prop-type-icon-badge{color:var(--peach)}
-.prop-row[data-type="null"] .prop-type-icon-badge,.prop-row[data-type="unknown"] .prop-type-icon-badge{color:var(--text-muted)}