ColorField: shared color-input primitive, Theme Builder + Chart Builder migration

src/app/components/ChartBuilderModal.tsx

@@ -76,6 +76,7 @@ import {
 } from '../stores/ChartBuilderStore';
 import { SegmentedControl, type SegmentedOption } from './SegmentedControl';
 import { Button } from './Button';
+import { ColorField } from './ColorField';
 import { IconButton } from './IconButton';
 import { SelectControl } from './SelectControl';
 import { Icon } from './Icon';
@@ -310,12 +311,12 @@ function ChannelPill({
       <div className={`${styles.pill} ${styles.pillConst}`}>
         <span className={styles.pillTag}>value</span>
         {isColor ? (
-          <input
-            type="color"
+          <ColorField
+            size="sm"
             className={styles.constColor}
-            aria-label={`${CHANNEL_LABELS[channel]} constant colour`}
+            label={`${CHANNEL_LABELS[channel]} constant colour`}
             value={typeof mapping.value === 'string' ? mapping.value : '#000000'}
-            onChange={(e) => setChannelConstant(channel, e.target.value)}
+            onChange={(v) => setChannelConstant(channel, v)}
           />
         ) : (
           <input