UIShell: [Figma] discrepancy with UI shell header and right panel color tokens

[laurenmrice]

Acceptance criteria

• There seems to be some discrepancies across the code, design kit, and website docs for the color tokens used in the UI Shell Header and the Right panel.
• Double check to see what the correct color tokens to be and if they are being applied correctly across these three different areas.

[alina-jacob]

Inference

Figma reference file

---

UI shell header

• Style tab
• Color: Add spec for divider - Divider | border | $border-subtle
• Sub-menu: Update sub-menu's Selected state to Open / Expanded.
• Sub-menu: Update sub-menu item's image to include item's Selected state as well.
• Typography: Add typography spec for sub-menu item - Sub-menu item | 14 / 0.875 | Regular / 400 | $body-compact-01

--

• Figma
• Sub-menu: Sub-menu item's Selected state is missing in Figma.
• Header actions: [Enhancement] - The header action buttons can have an open state which opens up a side nav / panel / popover.

UI shell right panel

• Style tab
• Color: Update Panel's border spec as - border-left, border-right, border-bottom
• Color: Should we be adding shadow, overlay specs in our docs? (Yes, audit for other components as well)
• Item: Add border spec for Selected state - border-left | $focus-interactive

UI shell left panel

• Style tab
• Color: [Enhancement] Potential to add border-right and border-left to the UI shell left panel. (Yes, can be included as a prop)
  These are the UI shell theme options explored by Anna.
• Color: Add specs for Overlay - Overlay | background-color | $overlay
• Icon: Delete this section as this is repeat information.

[alina-jacob]

Updated the story points from 3 to 5 for this issue.