chore: Use design tokens for shared panel styles

[jkuelz]

Description

This commit is part of an effort to unify the styles of panel components (e.g. drawers, side nav, help panel, split panel). It also fixes an inconsistency with the divider widths and help panel footer content alignment.

Related links, issue #, if available:

How has this been tested?

Ran through dev pipeline. Everything should be visually backward compatible with the exception of the divider indentation fix, which is intended.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 95.39%. Comparing base (23c9b8e) to head (7aaa9b1). Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2217      +/-   ##
==========================================
+ Coverage   95.37%   95.39%   +0.01%     
==========================================
  Files         696      696              
  Lines       18584    18591       +7     
  Branches     6200     5887     -313     
==========================================
+ Hits        17725    17735      +10     
- Misses        805      849      +44     
+ Partials       54        7      -47     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[jperals]

Everything should be visually backward compatible with the exception of the divider indentation fix, which is intended.

The BackstopJs tests don't reveal any diff regarding the dividers but instead they show that the indentation of the help panel footer decreased. Is this the intention?

[jkuelz]

Everything should be visually backward compatible with the exception of the divider indentation fix, which is intended.

The BackstopJs tests don't reveal any diff regarding the dividers but instead they show that the indentation of the help panel footer decreased. Is this the intention? @jperals

Yes. There are two expected changes.

1. The help panel footer indentation fix: Before After

2. The other fix is that the side navigation divider width is now the same as the help panel divider width. These were mismatched and have different values in classic and VR. In VR, this results in a change to the side nav divider width, in classic this results in a change to the help panel divider width: Before After

[jperals]

In VR, this results in a change to the side nav divider width

Shouldn't BackstopJS have caught a diff in the side nav permutations page then?