Cartouches improvements

[lankaukk]

Problem

• Our cartouches for data (internal and external) look a bit helpless
• their selected state is a hack (blue outline), and they need a hover state
• they should feel like they can exist, and are composable in, inputs (even if they are not yet!)
• they should also behave consistently!

Solution

• [x] Add a new hover state to the cartouche, colours specified below
• [x] Change the selected state for the cartouche, colours specified below
• [x] kill the 'x'
• [x] in the inspector, a single click should select the cartouche - not invoke the data picker
• [x] we can invoke the data picker on double click there, just like in the navigator

Rendering these inside an input

• [x] in the inspector, render a full width fake 'input' control around the cartouche
• [x] on hover over the entire row, show the border (just like we do for our text inputs)
• [ ] if you select a data cartouche (ideally via the ability to focus it), the fake input should show the blue border (via focus-within)

Aligning the fake 'JSX / element' entries with cartouche Cartouches for data, text, and components should share the visual style with the grey background, hover state, and selected state that is used for text nodes.

For the element cartouche, use the following reference implementation and design Use the actual icon, not just the component one

Cartouche Colors:

Text nodes and components: default background: bg5, foreground: fg1 hovered background: fg8, foreground: fg1 selected background: fg6, , foreground: white

Internal Data: default background: selectionBlue10, foreground: selectionBlue hovered background: selectionBlue20, foreground: selectionBlue selected background: selectionBlue, foreground: white

External Data: default background: green10, foreground: green hovered background: green20, foreground: green selected background: green, foreground: white

When any cartouche is part of a selected row: default background: whiteOpacity20, foreground: white hovered background: whiteOpacity35, foreground: white **Note: you will have to add these to the light.ts and dark.ts theme files: whiteOpacity20: createUtopiColor('oklch(100% 0 0 /20%)') whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)')

(Feel free to make separate PRs for this)

[ruggi]

also https://github.com/concrete-utopia/utopia/issues/5916