@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/inspector-widgets/ShadowEditor.tsx

@@ -1,3 +1,4 @@
+import { Button, Checkbox } from '../../design-system';
 /**
  * ShadowEditor / TextShadowEditor — a list of box/text shadows (add/remove,
  * x/y/blur/(spread)/color, inset for box-shadow) (spec 27 §5 C1). Ported from
@@ -166,20 +167,15 @@ export function ShadowListEditor({
         <span style={{ fontSize: 9, color: THEME.textMuted }}>{label}</span>
         <div style={{ flex: 1 }} />
         {!disabled && (
-          <button
+          <Button
             type="button"
+            variant="ghost"
+            size="compact"
             data-testid={`${testId}-add`}
             onClick={add}
-            style={{
-              border: 'none',
-              background: 'none',
-              color: THEME.accent,
-              cursor: 'pointer',
-              fontSize: 12,
-            }}
           >
             +
-          </button>
+          </Button>
         )}
       </div>
       {value.map((shadow, i) => {
@@ -191,25 +187,18 @@ export function ShadowListEditor({
             style={{ marginBottom: 6, padding: '4px 0', borderBottom: `1px solid ${THEME.border}` }}
           >
             <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="compact"
+                aria-pressed={shadow.enabled}
                 data-testid={`${testId}-toggle-${i}`}
                 onClick={() => {
                   if (!disabled) update(i, { enabled: !shadow.enabled }, true);
                 }}
-                style={{
-                  width: 14,
-                  height: 14,
-                  border: 'none',
-                  background: 'none',
-                  padding: 0,
-                  cursor: disabled ? 'not-allowed' : 'pointer',
-                  fontSize: 10,
-                  color: shadow.enabled ? THEME.accent : THEME.textMuted,
-                }}
               >
                 {shadow.enabled ? '●' : '○'}
-              </button>
+              </Button>
               <ColorSwatch
                 testId={`${testId}-color-${i}`}
                 value={hexColor}
@@ -230,33 +219,31 @@ export function ShadowListEditor({
                     cursor: 'pointer',
                   }}
                 >
-                  <input
-                    type="checkbox"
+                  <Checkbox
+                    // Standard checkbox size via the shared class (I-30: this
+                    // was the one checkbox in the codebase with its own 10px
+                    // explicit dimensions).
+                    className="vgai-checkbox"
                     data-testid={`${testId}-inset-${i}`}
                     checked={shadow.inset}
                     disabled={disabled}
                     onChange={(e) => update(i, { inset: e.target.checked }, true)}
-                    style={{ width: 10, height: 10 }}
                   />
                   in
                 </label>
               )}
               <div style={{ flex: 1 }} />
               {!disabled && (
-                <button
+                <Button
                   type="button"
+                  variant="ghost"
+                  size="compact"
+                  aria-label={`Remove ${label.toLowerCase()} ${i + 1}`}
                   data-testid={`${testId}-remove-${i}`}
                   onClick={() => remove(i)}
-                  style={{
-                    border: 'none',
-                    background: 'none',
-                    color: THEME.textMuted,
-                    cursor: 'pointer',
-                    fontSize: 11,
-                  }}
                 >
                   ×
-                </button>
+                </Button>
               )}
             </div>
             {shadow.enabled && (

package/src/components/inspector-widgets/shared.tsx

@@ -1,30 +1,41 @@
+import { Button } from '../../design-system';
 /**
  * Shared theme + tiny primitives for the inspector widget kit (spec 27 §5
- * C1). Colors match the editor's own dark-panel convention (`components/
- * primitives/Panel.tsx` — `#242424`/`#2c2c2c`/`#333`; `components/
- * Inspector.tsx`'s `NUM_STYLE` — `#1e1e1e` inputs/`#c5c8ce` text/`#9aa0a6`
- * muted labels; `#3b82f6` accent from `PrefabSaveDialog.tsx`/
- * `RootActivateDialog.tsx`) rather than visual-edit's Figma-dark palette, so
- * the kit drops into this editor's panels without a visual seam.
+ * C1). Values are now sourced from `../../theme.ts` (editor-style-polish
+ * U0) — the editor's single canonical token module — rather than
+ * independently retyped here, which is how this kit's `themeVars.accent.default` had drifted
+ * from the app's actual dominant themeVars.accent.default blue (`EDITOR-STYLE-AUDIT.md` C-2/
+ * §3): `THEME.accent` is now `#579EFF`, matching the app-wide plurality
+ * color, not the old locally-invented `#3b82f6`. `FONT` also drops
+ * `'Inter'` (never loaded anywhere — 0 `@font-face` hits — so it only ever
+ * silently fell back to its own fallback chain, per finding I-29); `FONT`/
+ * `FONT_MONO` now resolve through the editor theme variables. The
+ * exported shape (`THEME`, `FONT`, `FONT_MONO`, `inputStyle()`) is
+ * unchanged — only the values now flow from one source of truth.
  */
 
 import type React from 'react';
+import { themeVars } from '../../design-system';
 
 export const THEME = {
-  bg: '#242424',
-  surface: '#2c2c2c',
-  surfaceHover: '#333333',
-  border: '#333333',
-  text: '#c5c8ce',
-  textMuted: '#9aa0a6',
-  accent: '#3b82f6',
-  inputBg: '#1e1e1e',
-  dynamic: '#ff79c6',
-  dynamicBg: 'rgba(255,121,198,0.08)',
+  bg: themeVars.surface.panel,
+  surface: themeVars.surface.chrome,
+  surfaceHover: themeVars.surface.raised,
+  border: themeVars.boundary.default,
+  text: themeVars.content.primary,
+  textMuted: themeVars.content.muted,
+  onAccent: themeVars.content.onAccent,
+  accent: themeVars.accent.default,
+  neutralHover: themeVars.neutralOverlay.hover,
+  radiusSmall: themeVars.shape.small,
+  radiusMedium: themeVars.shape.medium,
+  inputBg: themeVars.surface.inset,
+  dynamic: themeVars.semantic.dynamic,
+  dynamicBg: themeVars.semantic.dynamicMuted,
 } as const;
 
-export const FONT = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif";
-export const FONT_MONO = "'SF Mono', 'Fira Code', Menlo, Consolas, monospace";
+export const FONT = themeVars.typography.sans;
+export const FONT_MONO = themeVars.typography.mono;
 
 /**
  * Every widget's change contract (report §"prop shape" for the C2 wiring
@@ -34,7 +45,7 @@ export const FONT_MONO = "'SF Mono', 'Fira Code', Menlo, Consolas, monospace";
  * gesture (pointerup/blur/Enter — the COMMIT a caller should push through
  * `writeStyleAuto`/`inspector.set` as a single undo step, mirroring
  * `BoxEditProvider.end`). A caller that only cares about single-shot edits
- * (a `<select>`, a click) may omit `onChangeEnd` — widgets fall back to
+ * (a `<Select>`, a click) may omit `onChangeEnd` — widgets fall back to
  * treating `onChange` as the commit in that case.
  */
 export interface ChangeHandlers<T> {
@@ -59,10 +70,13 @@ export function inputStyle(disabled = false): React.CSSProperties {
   return {
     background: disabled ? THEME.dynamicBg : THEME.inputBg,
     color: disabled ? THEME.dynamic : THEME.text,
-    border: `1px solid ${disabled ? 'rgba(255,121,198,0.15)' : THEME.border}`,
-    borderRadius: 3,
-    padding: '3px 6px',
-    fontSize: 11,
+    border: `1px solid ${disabled ? THEME.dynamic : THEME.border}`,
+    borderRadius: themeVars.shape.small,
+    // Uniform field metrics (editor-style-polish U3): matches theme-css.ts's
+    // `.vgai-input`/`.vgai-select` classes exactly (space-1/space-3 padding,
+    // font-base) so kit fields and className'd fields render one height.
+    padding: '2px 6px',
+    fontSize: 'var(--vgai-font-base)',
     fontFamily: FONT,
     outline: 'none',
     minWidth: 0,
@@ -73,30 +87,54 @@ export function inputStyle(disabled = false): React.CSSProperties {
 
 export const rowStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: 4 };
 
-export const miniButtonStyle: React.CSSProperties = {
-  background: 'rgba(255,255,255,0.06)',
-  border: 'none',
-  borderRadius: 3,
-  color: THEME.textMuted,
-  fontSize: 10,
-  padding: '3px 6px',
-  cursor: 'pointer',
-  lineHeight: 1,
+/* ------------------------------------------------------------------------ */
+/* Inspector-section style kit (editor-style-polish U3, I-8/I-10/I-12/I-13/  */
+/* I-17/I-22) — the ONE home for the style objects the first-party sections  */
+/* used to hand-duplicate ~15 times each with tiny unintentional drift.      */
+/* ------------------------------------------------------------------------ */
+
+/** Stacked field label ("label on its own line, field below" grammar) —
+ *  replaces the `{fontSize:10, color:'#8c8c8c', marginBottom:2}` literal
+ *  re-authored in nearly every `components/inspectors/*` section (I-8). */
+export const fieldLabelStyle: React.CSSProperties = {
+  fontSize: 'var(--vgai-font-sm)',
+  color: themeVars.content.muted,
+  marginBottom: 2,
 };
 
-export function toggleButtonStyle(active: boolean, disabled?: boolean): React.CSSProperties {
-  return {
-    flex: 1,
-    padding: '3px 0',
-    background: active ? THEME.accent : THEME.inputBg,
-    color: active ? '#fff' : THEME.textMuted,
-    border: `1px solid ${active ? THEME.accent : THEME.border}`,
-    borderRadius: 3,
-    fontSize: 10,
-    fontFamily: FONT,
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    opacity: disabled ? 0.4 : 1,
-  };
+/** Sub-header / group label ("label over a related cluster of fields") — the
+ *  ONE treatment for what used to be four (I-12): `Inspector.tsx`'s generic
+ *  group header (11/600/uppercase/ls 0.4/#9aa0a6 — the incumbent this
+ *  standardizes on), `ParticleSection.subHeaderStyle`,
+ *  `PostProcessingSection.effectLabel`, and `MaterialSection`'s Textures. */
+export const groupLabelStyle: React.CSSProperties = {
+  fontSize: 'var(--vgai-font-base)',
+  fontWeight: 600,
+  color: themeVars.content.muted,
+  textTransform: 'uppercase',
+  letterSpacing: 0.4,
+};
+
+/** One label-column width for every label-left/field-right row (I-13 —
+ *  replaces the 56/64/70/76/80 ladder across Inspector.tsx/`Field`/
+ *  `ComponentsSection`). */
+export const LABEL_COL_WIDTH = 72;
+
+/** Floating-surface (popover/dropdown) chrome — the menu contract (bg-2,
+ *  border-2, radius-md, shadow-md; I-22). ColorPicker/FontPicker/tag
+ *  suggestions all sit on this. */
+export const popoverStyle: React.CSSProperties = {
+  background: themeVars.surface.chrome,
+  border: `1px solid ${themeVars.boundary.strong}`,
+  borderRadius: themeVars.shape.medium,
+  boxShadow: themeVars.elevation.medium,
+};
+
+/** Mixed-value (multi-select) presentation for a `<Select>` — italic, dim,
+ *  matching `NumberInput`'s `—` mixed state so string/enum and numeric mixed
+ *  values speak ONE visual language (I-15). */
+export function mixedStyle(isMixed: boolean): React.CSSProperties {
+  return isMixed ? { color: themeVars.content.dim, fontStyle: 'italic' } : {};
 }
 
 export function ToggleButton({
@@ -113,16 +151,19 @@ export function ToggleButton({
   testId?: string | undefined;
 }): React.ReactElement {
   return (
-    <button
-      type="button"
+    <Button
+      variant={active ? 'primary' : 'secondary'}
+      size="compact"
+      aria-pressed={active}
+      disabled={disabled}
       data-testid={testId}
       onClick={() => {
         if (!disabled) onClick();
       }}
-      style={toggleButtonStyle(active, disabled)}
+      style={{ flex: 1 }}
     >
       {label}
-    </button>
+    </Button>
   );
 }
 

package/src/components/inspectors/AnimationSection.tsx

@@ -1,34 +1,13 @@
 import type { SceneAnimation, SceneEntity } from '@engine/scene/scene-types';
 import { getUserData } from '@engine/scene/user-data';
+import { Button, Checkbox, SectionHeader, Select } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { fieldLabelStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 
-const labelStyle: React.CSSProperties = {
-  fontSize: 10,
-  color: '#8c8c8c',
-  marginBottom: 2,
-};
+const labelStyle: React.CSSProperties = fieldLabelStyle;
 
-const inputStyle: React.CSSProperties = {
-  width: '100%',
-  background: '#1e1e1e',
-  color: '#c5c8ce',
-  border: '1px solid #333',
-  borderRadius: 2,
-  padding: '3px 6px',
-  fontSize: 12,
-};
-
-const btnStyle: React.CSSProperties = {
-  background: '#333',
-  color: '#c5c8ce',
-  border: '1px solid #444',
-  borderRadius: 3,
-  padding: '3px 8px',
-  cursor: 'pointer',
-  fontSize: 11,
-};
+// Shared chrome buttons (I-8/I-10) — the old per-file literals.
 
 /**
  * Plain-gltf-clip animation UI (E5 — the AnimGraph state-machine section this
@@ -39,7 +18,13 @@ const btnStyle: React.CSSProperties = {
  * that wants discrete state-machine-driven animation now builds its own XState
  * machine + `bindXStateAnimation` in code (see
  * packages/engine/src/animation/xstate-animation-binding.ts) — there is no
- * second authored format or editor section for it.
+ * second AUTHORED format or authoring section for it (E4,
+ * `docs/decisions/e4-xstate-authoring-boundary.md`: hand-authored TypeScript
+ * is the authoring boundary, deliberately not visually editable). A
+ * read-only VISUAL INSPECTOR for such a machine does exist (E3) — the
+ * selected-live-entity `State Machine` section + Debugger > Machines graph
+ * (`components/xstate-documents.tsx`), not a
+ * section here — this section stays GLTF-clip-only.
  */
 export function AnimationSection({ entities }: SectionProps) {
   const store = useEditorStore();
@@ -60,17 +45,28 @@ export function AnimationSection({ entities }: SectionProps) {
 
   // Available clips from the loaded GLTF model
   const availableClips = (getUserData(obj, '_availableClips') as string[] | undefined) ?? [];
+  const skeletonVisible = store.isSkeletonVisible(id);
+
+  const skeletonToggle = (
+    <label
+      style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, cursor: 'pointer' }}
+    >
+      <Checkbox
+        className="vgai-checkbox"
+        checked={skeletonVisible}
+        onChange={(event) => store.setSkeletonVisible(id, event.target.checked)}
+      />
+      Show Skeleton
+    </label>
+  );
 
   if (!animation) {
     return (
       <SectionHeader label="Animation" defaultOpen={false}>
-        <button
-          type="button"
-          style={btnStyle}
-          onClick={() => store.updateEntity(id, { animation: {} })}
-        >
+        {skeletonToggle}
+        <Button type="button" onClick={() => store.updateEntity(id, { animation: {} })}>
           Add Animation
-        </button>
+        </Button>
       </SectionHeader>
     );
   }
@@ -78,11 +74,12 @@ export function AnimationSection({ entities }: SectionProps) {
   return (
     <SectionHeader label="Animation">
       <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        {skeletonToggle}
         {/* Autoplay clip picker */}
         {availableClips.length > 0 && (
           <div>
             <div style={labelStyle}>Autoplay Clip</div>
-            <select
+            <Select
               value={animation.autoplay ?? ''}
               onChange={(e) => {
                 const val = e.target.value;
@@ -93,7 +90,8 @@ export function AnimationSection({ entities }: SectionProps) {
                   store.updateEntity(id, { animation: Object.keys(rest).length > 0 ? rest : {} });
                 }
               }}
-              style={{ ...inputStyle, cursor: 'pointer' }}
+              className="vgai-select"
+              style={{ width: '100%' }}
             >
               <option value="">(none)</option>
               {availableClips.map((clip) => (
@@ -101,7 +99,7 @@ export function AnimationSection({ entities }: SectionProps) {
                   {clip}
                 </option>
               ))}
-            </select>
+            </Select>
           </div>
         )}
 
@@ -117,8 +115,8 @@ export function AnimationSection({ entities }: SectionProps) {
                 cursor: 'pointer',
               }}
             >
-              <input
-                type="checkbox"
+              <Checkbox
+                className="vgai-checkbox"
                 checked={animation.loop !== false}
                 onChange={(e) => update({ loop: e.target.checked })}
               />
@@ -127,16 +125,17 @@ export function AnimationSection({ entities }: SectionProps) {
           </div>
         )}
 
-        <button
+        <Button
           type="button"
-          style={{ ...btnStyle, color: '#F53352', fontSize: 10, padding: '2px 6px' }}
+          variant="danger"
+          size="compact"
           onClick={() => {
             const patch: Record<string, unknown> = { animation: undefined };
             store.updateEntity(id, patch as Partial<SceneEntity>);
           }}
         >
           Remove Animation
-        </button>
+        </Button>
       </div>
     </SectionHeader>
   );

package/src/components/inspectors/AudioSection.tsx

@@ -1,13 +1,20 @@
 import type { SceneAudio } from '@engine/scene/scene-types';
 import { useEffect, useRef, useState } from 'react';
+import {
+  Button,
+  Checkbox,
+  NumberInput,
+  SectionHeader,
+  TextInput,
+  Tooltip,
+  themeVars,
+} from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { NumberInput } from '../primitives/NumberInput';
-import { SectionHeader } from '../primitives/SectionHeader';
-import { Tooltip } from '../primitives/Tooltip';
+import { fieldLabelStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { commonBool, commonNum } from './multi-edit-utils';
 
-const labelStyle: React.CSSProperties = { fontSize: 10, color: '#8c8c8c', marginBottom: 2 };
+const labelStyle: React.CSSProperties = fieldLabelStyle;
 
 export function AudioSection({ entities, ids }: SectionProps) {
   const store = useEditorStore();
@@ -72,7 +79,7 @@ export function AudioSection({ entities, ids }: SectionProps) {
         {!multi && (
           <div>
             <div style={labelStyle}>Source</div>
-            <input
+            <TextInput
               value={audioData.src ?? ''}
               placeholder="path/to/audio.mp3"
               onChange={(e) => {
@@ -84,48 +91,30 @@ export function AudioSection({ entities, ids }: SectionProps) {
                   store.updateEntity(entity.id!, { audio: next });
                 }
               }}
-              style={{
-                width: '100%',
-                background: '#1e1e1e',
-                color: '#c5c8ce',
-                border: '1px solid #333',
-                borderRadius: 2,
-                padding: '2px 4px',
-                fontSize: 11,
-              }}
+              className="vgai-input"
+              style={{ width: '100%' }}
             />
           </div>
         )}
 
         {/* Preview — single entity only */}
         {!multi && (
-          <button
+          <Button
+            variant={playing ? 'danger' : 'secondary'}
+            size="compact"
             onClick={togglePreview}
             disabled={!audioData.src}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: 4,
-              width: '100%',
-              padding: '3px 0',
-              background: playing ? '#3a2a2a' : '#2a2a2a',
-              color: !audioData.src ? '#555' : playing ? '#e06060' : '#c5c8ce',
-              border: `1px solid ${playing ? '#6a3a3a' : '#333'}`,
-              borderRadius: 2,
-              fontSize: 11,
-              cursor: audioData.src ? 'pointer' : 'default',
-            }}
+            style={{ width: '100%' }}
           >
             {playing ? '\u25A0 Stop' : '\u25B6 Preview'}
-          </button>
+          </Button>
         )}
 
         {/* Spatial */}
         <div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-            <input
-              type="checkbox"
+            <Checkbox
+              className="vgai-checkbox"
               checked={spatial ?? false}
               ref={(el) => {
                 if (el) el.indeterminate = spatial === null;
@@ -133,7 +122,7 @@ export function AudioSection({ entities, ids }: SectionProps) {
               onChange={(e) => update({ spatial: e.target.checked })}
             />
             <Tooltip text="Positional 3D audio vs non-spatial background audio" position="right">
-              <span style={{ fontSize: 11, color: '#c5c8ce' }}>Spatial</span>
+              <span style={{ fontSize: 11, color: themeVars.content.primary }}>Spatial</span>
             </Tooltip>
           </div>
         </div>
@@ -183,30 +172,30 @@ export function AudioSection({ entities, ids }: SectionProps) {
         {/* Loop */}
         <div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-            <input
-              type="checkbox"
+            <Checkbox
+              className="vgai-checkbox"
               checked={loop ?? false}
               ref={(el) => {
                 if (el) el.indeterminate = loop === null;
               }}
               onChange={(e) => update({ loop: e.target.checked })}
             />
-            <span style={{ fontSize: 11, color: '#c5c8ce' }}>Loop</span>
+            <span style={{ fontSize: 11, color: themeVars.content.primary }}>Loop</span>
           </div>
         </div>
 
         {/* Autoplay */}
         <div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-            <input
-              type="checkbox"
+            <Checkbox
+              className="vgai-checkbox"
               checked={autoplay ?? false}
               ref={(el) => {
                 if (el) el.indeterminate = autoplay === null;
               }}
               onChange={(e) => update({ autoplay: e.target.checked })}
             />
-            <span style={{ fontSize: 11, color: '#c5c8ce' }}>Autoplay</span>
+            <span style={{ fontSize: 11, color: themeVars.content.primary }}>Autoplay</span>
           </div>
         </div>
       </div>

package/src/components/inspectors/BoneAttachmentSection.tsx

@@ -1,22 +1,12 @@
-import type { SceneEntity } from '@engine/scene/scene-types';
+import { Button, SectionHeader, Select, TextInput, themeVars } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { fieldLabelStyle, mixedStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { commonStr } from './multi-edit-utils';
 
-const inputStyle: React.CSSProperties = {
-  width: '100%',
-  background: '#1e1e1e',
-  color: '#c5c8ce',
-  border: '1px solid #333',
-  borderRadius: 2,
-  padding: '3px 4px',
-  fontSize: 11,
-};
+const labelStyle: React.CSSProperties = fieldLabelStyle;
 
-const labelStyle: React.CSSProperties = { fontSize: 10, color: '#8c8c8c', marginBottom: 2 };
-
-type BoneAttachment = NonNullable<SceneEntity['boneAttachment']>;
+type BoneAttachment = NonNullable<SectionProps['entities'][number]['boneAttachment']>;
 
 export function BoneAttachmentSection({ entities, ids }: SectionProps) {
   const store = useEditorStore();
@@ -44,38 +34,43 @@ export function BoneAttachmentSection({ entities, ids }: SectionProps) {
       <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
         <div>
           <div style={labelStyle}>Target entity</div>
-          <select
+          <Select
+            className="vgai-select"
             value={target ?? ''}
             onChange={(event) => update({ target: event.target.value })}
-            style={inputStyle}
+            style={{ width: '100%', ...mixedStyle(target === null) }}
           >
-            {target === null && <option value="">(mixed)</option>}
+            {target === null && <option value="">—</option>}
             {targets.map((entity) => (
               <option key={entity.id} value={entity.id}>
                 {entity.name}
               </option>
             ))}
-          </select>
+          </Select>
         </div>
         <div>
           <div style={labelStyle}>Bone / socket name</div>
-          <input
+          <TextInput
+            className="vgai-input"
             value={bone ?? ''}
             placeholder="hand_r"
             onChange={(event) => update({ bone: event.target.value })}
-            style={inputStyle}
+            style={{ width: '100%' }}
           />
         </div>
-        <div style={{ fontSize: 10, color: '#777' }}>
+        <div style={{ fontSize: 10, color: themeVars.content.dim }}>
           Transform position, rotation, and scale are the local socket offsets.
         </div>
-        <button
+        <Button
           type="button"
+          variant="danger"
           onClick={remove}
-          style={{ ...inputStyle, cursor: 'pointer', color: '#d98a8a' }}
+          // Real button chrome + themeVars.semantic.danger text (I-27: this used to wear the
+          // text-field style and read as an input with red text).
+          style={{ width: '100%' }}
         >
           Remove attachment
-        </button>
+        </Button>
       </div>
     </SectionHeader>
   );