Improvements to Lists in the navigator

[lankaukk]

Problem:

This is not a harmonious design

Solution

Implement a new design for lists cartouches in the navigator

• move the list length (and functionality for overriding it) inside the cartouche
• stop showing the "List" text in those rows
• use the new array icon in the cartouche
• update the visual style of the cartouches to have a hovered state and a better selected state (which is also part of this ticket)

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%)')