claude-exode-mcp 7.5.7 → 7.5.8

package/src/widgets.ts

@@ -16,6 +16,38 @@ export interface WidgetContent {
   value?: number | string;     // Slider value, InputBox value, RadioGroup selection
   min?: number; max?: number; step?: number;
   color?: string;              // accent / primary colour
+  style?: WidgetStyle;         // look preset (default 'auto': derived from the artboard)
+}
+
+
+export const WIDGET_STYLES = ['auto', 'glass', 'neon', 'editorial', 'brutal', 'minimal'] as const;
+export type WidgetStyle = (typeof WIDGET_STYLES)[number];
+
+/** Colours and shape language for widgets, read from the artboard instead of stock blue/grey defaults. */
+export function widgetTheme(artboard: any, style: WidgetStyle = 'auto', accentIn?: string) {
+  const bg = String(artboard?.backgroundColor || '#0B0A0F');
+  const h = bg.replace('#', '');
+  const lum = /^[0-9a-f]{6}$/i.test(h) ? (0.2126 * parseInt(h.slice(0, 2), 16) + 0.7152 * parseInt(h.slice(2, 4), 16) + 0.0722 * parseInt(h.slice(4, 6), 16)) / 255 : 0;
+  const dark = lum < 0.5;
+  const ink = dark ? '#F2EFEA' : '#141210';
+  const accent = accentIn || artboard?.tokens?.colors?.primary || (style === 'neon' ? (dark ? '#5CE1E6' : '#7A3CFF') : style === 'brutal' ? (dark ? '#C6F432' : '#E30613') : ink);
+  const onAccent = (() => { const a = accent.replace('#', ''); if (!/^[0-9a-f]{6}$/i.test(a)) return dark ? '#0B0A0F' : '#FFFFFF'; const l = (0.2126 * parseInt(a.slice(0, 2), 16) + 0.7152 * parseInt(a.slice(2, 4), 16) + 0.0722 * parseInt(a.slice(4, 6), 16)) / 255; return l > 0.6 ? '#0B0A0F' : '#FFFFFF'; })();
+  const t = {
+    dark, ink, accent, onAccent,
+    muted: dark ? '#8D8796' : '#6E675C',
+    surface: dark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.04)',
+    surfaceSolid: dark ? '#17151C' : '#FFFFFF',
+    line: dark ? 'rgba(255, 255, 255, 0.14)' : 'rgba(0, 0, 0, 0.12)',
+    track: dark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.10)',
+    radius: 12, trackH: 4, thumb: 18, thumbShape: 'Ellipse', thumbRound: 0, thumbStroke: 0, trackStroke: 0, glow: '', font: 'Inter', weight: 600,
+    accentFill: accent as any,
+  };
+  if (style === 'glass') Object.assign(t, { trackH: 6, thumb: 22, radius: 14, glow: dark ? 'rgba(255, 255, 255, 0.35)' : 'rgba(0, 0, 0, 0.18)', surface: dark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(255, 255, 255, 0.55)' });
+  if (style === 'neon') Object.assign(t, { trackH: 3, thumb: 16, radius: 10, glow: accent, accentFill: { type: 'LinearGradient', start: [0, 0.5], end: [1, 0.5], stops: [{ offset: 0, color: accent, opacity: 1 }, { offset: 1, color: dark ? '#8B9CFF' : '#FF3D9A', opacity: 1 }] } });
+  if (style === 'editorial') Object.assign(t, { trackH: 2, thumb: 0, thumbShape: 'Rectangle', radius: 2, font: 'Georgia', weight: 400 });
+  if (style === 'brutal') Object.assign(t, { trackH: 12, thumb: 26, thumbShape: 'Rectangle', thumbRound: 0, thumbStroke: 2, trackStroke: 2, radius: 0, weight: 800, line: ink, track: dark ? '#1A1A1A' : '#FFFFFF' });
+  if (style === 'minimal') Object.assign(t, { trackH: 2, thumb: 12, radius: 8, weight: 500 });
+  return t;
 }
 
 type Input = { id: string; name: string; value: any; nodes: { id: string; x: number; y: number }[] };
@@ -49,7 +81,8 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
     return id;
   };
   const tokens = artboard.tokens || {};
-  const primary = c.color || tokens.colors?.primary || '#3b82f6';
+  const T = widgetTheme(artboard, (c.style as WidgetStyle) || 'auto', c.color);
+  const primary = T.accent;
   const controlRadius = tokens.radii?.control ?? tokens.radii?.md ?? 8;
   const transform = { x: opts.x ?? Math.round((artboard.width || 800) / 2), y: opts.y ?? Math.round((artboard.height || 600) / 2), rotation: 0, scale_x: 1, scale_y: 1, opacity: 1, skew_x: 0, skew_y: 0 };
   const base = (variant: string, geometry: any, extra: any = {}) => ({
@@ -67,17 +100,18 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
 
   switch (type) {
     case 'Button': {
-      obj = base('button', { type: 'Widget', width: 150, height: 44, cornerRadius: controlRadius }, {
+      const r = T.radius >= 12 ? 22 : T.radius;
+      obj = base('button', { type: 'Widget', width: 160, height: 46, cornerRadius: r }, {
         semanticTag: 'control',
-        style: { stroke: { color: 'rgba(255, 255, 255, 0.18)', width: 1, opacity: 1 } },
+        style: { stroke: { color: T.line, width: T.trackStroke || 1, opacity: 1 } },
         options: {
-          backgroundColor: { type: 'LinearGradient', stops: [{ offset: 0, color: primary }, { offset: 1, color: primary }] },
-          borderColor: 'rgba(255, 255, 255, 0.18)', borderWidth: 1, accentColor: '#60a5fa', cornerRadius: controlRadius,
-          shadow: { isEnabled: false, blur: 16, offsetY: 6, offsetX: 0, color: 'rgba(37, 99, 235, 0.35)' },
-          label: { text: c.label ?? 'Button', color: '#ffffff', fontSize: 14, fontFamily: 'Inter', fontWeight: 600 },
+          backgroundColor: typeof T.accentFill === 'string' ? { type: 'LinearGradient', stops: [{ offset: 0, color: primary }, { offset: 1, color: primary }] } : T.accentFill,
+          borderColor: T.trackStroke ? T.ink : 'transparent', borderWidth: T.trackStroke, accentColor: primary, cornerRadius: r,
+          shadow: { isEnabled: !!T.glow, blur: 18, offsetY: 6, offsetX: 0, color: T.glow || 'rgba(0, 0, 0, 0.3)' },
+          label: { text: c.label ?? 'Button', color: T.onAccent, fontSize: 14, fontFamily: T.font, fontWeight: T.weight },
           icon: { enabled: false, svgPath: '', position: 'left', gap: 8 },
-          hoverStyle: { backgroundColor: { type: 'LinearGradient', stops: [{ offset: 0, color: primary }, { offset: 1, color: primary }] }, borderColor: 'rgba(255, 255, 255, 0.35)', color: '#ffffff', scale: 1.02, cornerRadius: controlRadius, shadow: { isEnabled: true, blur: 20, offsetY: 8, offsetX: 0, color: 'rgba(37, 99, 235, 0.5)' } },
-          activeStyle: { scale: 0.98, cornerRadius: controlRadius, shadow: { isEnabled: false, blur: 8, offsetY: 2, offsetX: 0, color: 'rgba(37, 99, 235, 0.2)' } },
+          hoverStyle: { scale: 1.03, cornerRadius: r, shadow: { isEnabled: true, blur: 26, offsetY: 10, offsetX: 0, color: T.glow || (T.dark ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.18)') } },
+          activeStyle: { scale: 0.97, cornerRadius: r, shadow: { isEnabled: false, blur: 6, offsetY: 2, offsetX: 0, color: 'rgba(0, 0, 0, 0.2)' } },
         },
       });
       obj.interactions = [...hoverPair(obj.id),
@@ -89,11 +123,11 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
       obj = base('inputbox', { type: 'Widget', width: 240, height: 42, cornerRadius: controlRadius }, {
         semanticTag: 'control', style: { stroke: { color: 'transparent', width: 0, opacity: 0 } },
         options: {
-          value: c.value !== undefined ? String(c.value) : '', placeholder: c.label ?? 'Type something...', fontSize: 14, fontFamily: 'Inter', fontWeight: 400, color: '#f8fafc',
-          backgroundColor: '#18181b', borderColor: '#334155', borderWidth: 1, cornerRadius: controlRadius, padding: { left: 14, right: 14, top: 0, bottom: 0 },
+          value: c.value !== undefined ? String(c.value) : '', placeholder: c.label ?? 'Type something...', fontSize: 14, fontFamily: T.font, fontWeight: 400, color: T.ink,
+          backgroundColor: T.surfaceSolid, borderColor: T.trackStroke ? T.ink : T.line, borderWidth: 1, cornerRadius: controlRadius, padding: { left: 14, right: 14, top: 0, bottom: 0 },
           accentColor: primary, leftIcon: { visible: false, char: '', svgPath: '' }, rightIcon: { visible: false, char: '', svgPath: '' }, disabled: false,
-          hoverStyle: { backgroundColor: '#27272a', borderColor: '#475569', color: '#ffffff', cornerRadius: controlRadius, scale: 1.01 },
-          activeStyle: { backgroundColor: '#18181b', borderColor: primary, color: '#ffffff', borderWidth: 1.5, cornerRadius: controlRadius, scale: 1.0 },
+          hoverStyle: { backgroundColor: T.surfaceSolid, borderColor: T.muted, color: T.ink, cornerRadius: controlRadius, scale: 1.0 },
+          activeStyle: { backgroundColor: T.surfaceSolid, borderColor: primary, color: T.ink, borderWidth: 1.5, cornerRadius: controlRadius, scale: 1.0 },
         },
       });
       obj.interactions = [...hoverPair(obj.id),
@@ -102,29 +136,38 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
       break;
     }
     case 'Toggle': {
-      obj = base('toggle', { type: 'Widget', width: 52, height: 30 }, {
+      const brutal = T.thumbShape === 'Rectangle' && T.trackStroke > 0;
+      obj = base('toggle', { type: 'Widget', width: brutal ? 60 : 52, height: brutal ? 32 : 30 }, {
         style: { stroke: { color: 'transparent', width: 0, opacity: 0 } },
         options: {
-          checked: !!c.checked, activeColor: primary, accentColor: primary, inactiveColor: '#cbd5e1', knobColor: '#ffffff', cornerRadius: 15,
-          knobShape: 'Circle', knobSize: 0, knobPadding: 2, trackShape: 'Pill',
-          leftLabel: { enabled: true, text: 'Off', fontSize: 12, fontFamily: 'Inter', color: '#6b7280', gap: 8 },
-          rightLabel: { enabled: true, text: 'On', fontSize: 12, fontFamily: 'Inter', color: '#6b7280', gap: 8 }, disabled: false,
+          checked: !!c.checked, activeColor: primary, accentColor: primary, inactiveColor: T.track, knobColor: T.dark ? '#FFFFFF' : (brutal ? T.ink : '#FFFFFF'), cornerRadius: brutal ? 0 : 15,
+          borderColor: brutal ? T.ink : T.line, borderWidth: brutal ? 2 : 1,
+          /* 'Rectangle' as a toggle shape is a 24×24 icon path that squashes; a Pill with radius 0 is a true rectangle */
+          knobShape: brutal ? 'Square' : 'Circle', knobSize: 0, knobPadding: brutal ? 4 : 3, trackShape: 'Pill',
+          toggleStyle: { knobColor: T.onAccent, borderColor: primary },
+          leftLabel: { enabled: c.label !== undefined, text: c.label ?? '', fontSize: 13, fontFamily: T.font, color: T.muted, gap: 10 },
+          rightLabel: { enabled: false, text: '', fontSize: 13, fontFamily: T.font, color: T.muted, gap: 10 }, disabled: false,
         },
       });
       obj.interactions = hoverPair(obj.id);
       break;
     }
     case 'Slider': {
-      obj = base('slider', { type: 'Widget', width: 200, height: 24 }, {
+      const editorial = T.thumb === 0;
+      obj = base('slider', { type: 'Widget', width: 260, height: 28 }, {
         style: { fill: { type: 'Solid', color: 'transparent', opacity: 0 }, stroke: { color: 'transparent', width: 0, opacity: 0 } },
         options: {
-          value: typeof c.value === 'number' ? c.value : 50, min: c.min ?? 0, max: c.max ?? 100, step: c.step ?? 1, trackHeight: 6, trackRoundedness: 3, trackShape: 'Rectangle', trackPath: '',
-          trackStrokeWidth: 0, trackStrokeColor: '', accentColor: primary, inactiveColor: '#cbd5e1', thumbShape: 'Ellipse', thumbPath: '', thumbIcon: '',
-          thumbWidth: 18, thumbHeight: 18, thumbRoundedness: 0, thumbColor: '#ffffff', thumbStrokeWidth: 0, thumbStrokeColor: '',
-          tooltipColor: '#ffffff', tooltipBgColor: '#1e293b', tooltipOffsetX: 0, tooltipOffsetY: -25, disabled: false, showValueTooltip: false,
-          hoverStyle: { scale: 1.04 }, activeStyle: { scale: 0.96 },
-          label: { text: c.label ?? 'Label', visible: c.label !== undefined, fontSize: 12, color: '#374151' },
-          helperText: { text: 'Helper text', visible: false, fontSize: 11, color: '#6b7280' },
+          value: typeof c.value === 'number' ? c.value : 50, min: c.min ?? 0, max: c.max ?? 100, step: c.step ?? 1,
+          trackHeight: T.trackH, trackRoundedness: T.trackStroke ? 0 : T.trackH / 2, trackShape: 'Rectangle', trackPath: '',
+          trackStrokeWidth: T.trackStroke, trackStrokeColor: T.trackStroke ? T.ink : '', accentColor: T.accentFill, activeColor: T.accentFill, inactiveColor: T.track,
+          thumbShape: T.thumbShape, thumbPath: '', thumbIcon: '',
+          thumbWidth: editorial ? 3 : T.thumb, thumbHeight: editorial ? 18 : T.thumb, thumbRoundedness: T.thumbRound,
+          thumbColor: T.thumbStroke ? (T.dark ? T.accent : '#FFFFFF') : (T.dark ? '#FFFFFF' : (editorial ? T.ink : '#FFFFFF')),
+          thumbStrokeWidth: T.thumbStroke || (T.dark || editorial ? 0 : 1), thumbStrokeColor: T.thumbStroke ? T.ink : T.line,
+          tooltipColor: T.onAccent, tooltipBgColor: primary, tooltipOffsetX: 0, tooltipOffsetY: -28, disabled: false, showValueTooltip: !!c.label || T.glow !== '',
+          hoverStyle: { thumbWidth: editorial ? 3 : T.thumb + 4, thumbHeight: editorial ? 24 : T.thumb + 4 }, activeStyle: { thumbWidth: editorial ? 4 : T.thumb + 6, thumbHeight: editorial ? 26 : T.thumb + 6, trackHeight: T.trackH + 1 },
+          label: { text: c.label ?? 'Label', visible: c.label !== undefined, fontSize: 13, color: T.muted },
+          helperText: { text: 'Helper text', visible: false, fontSize: 11, color: T.muted },
         },
       });
       obj.interactions = hoverPair(obj.id);
@@ -138,12 +181,12 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
         style: { fill: { type: 'Solid', color: 'transparent', opacity: 0 }, stroke: { color: 'transparent', width: 0, opacity: 0 } },
         options: {
           placeholder: c.label ?? 'Select...', selectedOption: null, optionsList: items, isOpen: false, previewState: 'default',
-          fontSize: 14, fontFamily: 'Inter', fontWeight: 400, color: '#f8fafc', backgroundColor: '#1e293b', borderColor: '#334155',
-          borderWidth: 1, cornerRadius: 8, chevronSize: 16, chevronColor: '#94a3b8', chevronType: 'chevron', closedIconPath: 'M 0 0 L 4 4 L 8 0',
-          openIconPath: 'M 0 0 L 4 4 L 8 0', closedIconAngle: 0, openIconAngle: 180, listBackgroundColor: '#0f172a', listTextColor: '#e2e8f0',
-          listHoverColor: '#1e293b', listBorderColor: '#334155', listBorderWidth: 1, listCornerRadius: 8, listPadding: 4,
-          itemHeight: 32, disabled: false, accentColor: primary, hoverBackgroundColor: '#334155', activeBackgroundColor: '#0f172a',
-          itemHoverBackgroundColor: '#1e293b', itemSelectedBackgroundColor: primary, itemSelectedColor: '#ffffff',
+          fontSize: 14, fontFamily: T.font, fontWeight: 400, color: T.ink, backgroundColor: T.surfaceSolid, borderColor: T.trackStroke ? T.ink : T.line,
+          borderWidth: 1, cornerRadius: 8, chevronSize: 16, chevronColor: T.muted, chevronType: 'chevron', closedIconPath: 'M 0 0 L 4 4 L 8 0',
+          openIconPath: 'M 0 0 L 4 4 L 8 0', closedIconAngle: 0, openIconAngle: 180, listBackgroundColor: T.surfaceSolid, listTextColor: T.ink,
+          listHoverColor: T.surface, listBorderColor: T.line, listBorderWidth: 1, listCornerRadius: 8, listPadding: 4,
+          itemHeight: 34, disabled: false, accentColor: primary, hoverBackgroundColor: T.surface, activeBackgroundColor: T.surfaceSolid,
+          itemHoverBackgroundColor: T.surface, itemSelectedBackgroundColor: primary, itemSelectedColor: T.onAccent,
           dataInputId: optionsVar, isDataVarEnabled: true, selectedOutputId: selectedVar,
         },
       });
@@ -154,11 +197,11 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
       obj = base('checkbox', { type: 'Checkbox', width: 140, height: 24 }, {
         style: { stroke: { color: 'transparent', width: 0, opacity: 0 } },
         options: {
-          checked: !!c.checked, activeColor: primary, inactiveColor: 'transparent', checkColor: '#ffffff', boxSize: 18, cornerRadius: 4, borderWidth: 1.5, borderColor: '#9ca3af',
-          label: { text: c.label ?? 'Checkbox', position: 'right', fontSize: 14, fontFamily: 'Inter', color: '#111827', gap: 8 },
+          checked: !!c.checked, activeColor: primary, inactiveColor: 'transparent', checkColor: T.onAccent, boxSize: 18, cornerRadius: T.trackStroke ? 0 : 5, borderWidth: T.trackStroke || 1.5, borderColor: T.trackStroke ? T.ink : T.line,
+          label: { text: c.label ?? 'Checkbox', position: 'right', fontSize: 14, fontFamily: T.font, color: T.ink, gap: 10 },
           disabled: false, previewState: 'default',
-          hoverStyle: { backgroundColor: '#2563eb', borderColor: '#2563eb', checkColor: '#ffffff', scale: 1.05 },
-          activeStyle: { backgroundColor: '#1d4ed8', borderColor: '#1d4ed8', checkColor: '#ffffff', scale: 0.95 },
+          hoverStyle: { borderColor: primary, checkColor: T.onAccent, scale: 1.05 },
+          activeStyle: { backgroundColor: primary, borderColor: primary, checkColor: T.onAccent, scale: 0.95 },
         },
         interactions: [{ trigger: 'onClick', action: 'Toggle Boolean', targetInputId: 'checked' }],
       });
@@ -172,12 +215,12 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
         options: {
           selectedValue: c.value !== undefined ? String(c.value) : items[0], optionsList: items, orientation: 'vertical', itemGap: 10,
           radioShape: 'circle', radioSize: 9, borderWidth: 2, borderRadius: 0, fillEmpty: 'transparent', customShapePath: '',
-          activeColor: primary, inactiveColor: '#94a3b8', textColor: '#111827', fontSize: 14, fontFamily: 'Inter', fontWeight: 400, disabled: false,
+          activeColor: primary, inactiveColor: T.muted, textColor: T.ink, fontSize: 14, fontFamily: T.font, fontWeight: 400, disabled: false,
           isDataVarEnabled: true, dataInputId: varId,
-          label: { text: c.label ?? 'Radio Group', position: 'top', fontSize: 12, fontFamily: 'Inter', color: '#374151', gap: 6 },
+          label: { text: c.label ?? 'Radio Group', position: 'top', fontSize: 12, fontFamily: T.font, color: T.muted, gap: 6 },
           previewState: 'default',
-          hoverStyle: { activeColor: '#2563eb', inactiveColor: '#64748b', textColor: '#111827', scale: 1.02 },
-          activeStyle: { activeColor: '#1d4ed8', inactiveColor: '#475569', textColor: '#111827', scale: 0.98 },
+          hoverStyle: { activeColor: primary, inactiveColor: T.ink, textColor: T.ink, scale: 1.02 },
+          activeStyle: { activeColor: primary, inactiveColor: T.ink, textColor: T.ink, scale: 0.98 },
         },
       });
       break;
@@ -191,7 +234,7 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
         type: 'Widget', style: none, constraints: [], isVisible: true, isLocked: false,
         options: {
           items, orientation: 'vertical', itemGap: 12, itemHeight: 50, itemWidth: 200, padding: 10, scrollOffset: 0, glassEffect: true, glowIntensity: 2,
-          glowColor: 'rgba(59, 130, 246, 0.3)', accentColor: primary, itemBackgroundColor: 'rgba(0, 0, 0, 0.04)', itemTextColor: '#111827',
+          glowColor: T.glow || T.line, accentColor: primary, itemBackgroundColor: T.surface, itemTextColor: T.ink,
           backgroundColor: 'transparent', borderColor: 'rgba(0, 0, 0, 0.12)', borderWidth: 0, cornerRadius: 12, showScrollbar: true,
           scrollbarColor: 'rgba(0, 0, 0, 0.2)', scrollbarWidth: 2, isDataVarEnabled: true, dataInputId: varId,
         },
@@ -207,7 +250,7 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
         geometry: {
           type: 'LineGraph', width: opts.width ?? 300, height: opts.height ?? 150,
           datasets: [{ id: 'dataset_1', label: c.seriesLabel ?? 'Revenue', data, lineColor: primary, lineWidth: 3, showArea: true, areaColor: 'rgba(59, 130, 246, 0.15)', smoothing: true, showPoints: true, pointSize: 6, pointFill: primary, pointStrokeColor: '#ffffff', pointStrokeWidth: 2, isVarEnabled: true, inputId: varId }],
-          showXAxis: true, showYAxis: true, xAxisColor: 'rgba(0, 0, 0, 0.15)', yAxisColor: 'rgba(0, 0, 0, 0.15)', showLegend: true, legendColor: '#374151',
+          showXAxis: true, showYAxis: true, xAxisColor: T.line, yAxisColor: T.line, showLegend: true, legendColor: T.muted,
           showXLabels: true, showYLabels: true, axisLabelColor: '#4b5563', backgroundColor: 'transparent', cornerRadius: 0,
         },
       };
@@ -225,7 +268,7 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
           orientation: 'vertical', barWidth: 18, barGap: 4, barCornerRadius: 4,
           showXAxis: true, showYAxis: true, xAxisColor: 'rgba(0, 0, 0, 0.15)', yAxisColor: 'rgba(0, 0, 0, 0.15)',
           showXLabels: true, showYLabels: true, axisLabelColor: '#4b5563', axisLabelFontSize: 10,
-          showLegend: true, legendColor: '#111827', legendFontSize: 10, showGridLines: true, gridColor: 'rgba(0, 0, 0, 0.06)',
+          showLegend: true, legendColor: T.muted, legendFontSize: 10, showGridLines: true, gridColor: T.track,
           cardBackground: '#ffffff', cardBackgroundOpacity: 0.04, cardBorderColor: 'rgba(0, 0, 0, 0.08)', barGradient: true, showValueOnTop: false,
           isDataVarEnabled: true, dataInputId: catVar, isDatasetsVarEnabled: true, datasetInputIds: [dsVar],
         },
@@ -239,8 +282,8 @@ export function createWidget(artboard: any, type: WidgetType, opts: {
       obj = base('piechart', { type: 'PieChart', width: 180, height: 180 }, { style: none });
       obj.options = {
         slices: data.map((v, i) => ({ id: `slice-${i}-${obj.id}`, label: labels[i] || `Item ${i + 1}`, value: v, color: '' })),
-        innerRadius: 0.5, showLabels: true, labelColor: '#111827', labelFontSize: 10, showLegend: true, legendColor: '#374151', legendFontSize: 10,
-        colorPalette: 'vibrant', chartType: 'donut', showCenterText: true, centerTextColor: '#111827', centerLabelColor: '#6b7280',
+        innerRadius: 0.5, showLabels: true, labelColor: T.ink, labelFontSize: 10, showLegend: true, legendColor: T.muted, legendFontSize: 10,
+        colorPalette: 'vibrant', chartType: 'donut', showCenterText: true, centerTextColor: T.ink, centerLabelColor: T.muted,
         centerLabel: c.label ?? 'Total', sliceGap: 3, cardBackground: '#ffffff', cardBackgroundOpacity: 0.04, cardBorderColor: 'rgba(0, 0, 0, 0.08)',
         isDataVarEnabled: true, dataInputId: varId,
       };