style(studio): place Color Chrome sub-buttons on 1 single row and format chip labels bold with theme accent colors

docker/frontend/src/App.tsx

@@ -3377,9 +3377,9 @@ export function Workspace() {
     wbFoot: (
       <div className="dev-box" data-key="dev-box-color-chrome" style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '8px 0' }}>
         <div>
-          <span className="dev-box-title" style={{ marginBottom: '4px', display: 'block', fontSize: '11px', opacity: 0.8 }}>COLOR CHROME</span>
+          <span className="dev-box-title" style={{ marginBottom: '4px', display: 'block' }}>COLOR CHROME</span>
           <ChipRow
-            grid
+            grid3
             chips={CHROME_OPTIONS.map((opt) => ({
               key: `cx-${opt.v}`,
               label: opt.d,
@@ -3392,9 +3392,9 @@ export function Workspace() {
           />
         </div>
         <div>
-          <span className="dev-box-title" style={{ marginBottom: '4px', display: 'block', fontSize: '11px', opacity: 0.8 }}>CHROME BLUE</span>
+          <span className="dev-box-title" style={{ marginBottom: '4px', display: 'block' }}>CHROME BLUE</span>
           <ChipRow
-            grid
+            grid3
             chips={CHROME_OPTIONS.map((opt) => ({
               key: `cxb-${opt.v}`,
               label: opt.d,

docker/frontend/src/styles/app.css

@@ -141,6 +141,30 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 6px;
 }
+.chip-row.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px;
+  width: 100%;
+}
+.chip-row.grid-3 .chip {
+  justify-content: center;
+  text-align: center;
+  padding: 4px 2px;
+  font-size: 10px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.chip-label {
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+.dev-box-title {
+  font-weight: 700;
+  color: var(--accent, #f59e0b);
+  letter-spacing: 0.05em;
+  font-size: 11px;
+}
 .chip-row.grid .chip {
   justify-content: center; text-align: center;
   /* Two of these share the column's width, so each is its own small card: the

docker/frontend/src/ui/ChipColumn.tsx

@@ -63,9 +63,9 @@ export interface SliderDef {
 // `grid` lays the row out as the table a set of same-kind values is read as
 // (WB's presets, LIGHT's two Color Chromes) instead of the wrapping strip the
 // option rows use.
-export function ChipRow({ chips, grid }: { chips: ChipDef[]; grid?: boolean }) {
+export function ChipRow({ chips, grid, grid3 }: { chips: ChipDef[]; grid?: boolean; grid3?: boolean }) {
   return (
-    <div className={`chip-row${grid ? ' grid' : ''}`}>
+    <div className={`chip-row${grid3 ? ' grid-3' : grid ? ' grid' : ''}`}>
       {chips.map((chip) =>
         chip.divider ? (
           <span key={chip.key} className="chip-rule" role="separator" aria-orientation="horizontal" />