fix(panel): apply custom styles correctly to header actions

[alisonailea]

Related Issue: #11491 #8675 #7180

Summary

Allow calcite-actions to be styled specific to the panel-header.
include ::slotted(calcite-action) in selectors and set proper variable fallbacks
Correctly pass corner-radius through the component

[macandcheese]

My 2c - supporting css parts has been discussed and we decided not to pursue for the near-term. It's a significant shift in customization story.

The css token approach seems more on-story here - I do think it could perhaps be simplified to just target the internally rendered Actions and Action Menu - keeping your new props here and making the user story this:

  .my-great-panel {
    --calcite-panel-header-action-background-color: blue;
    --calcite-panel-header-action-background-color-hover: blue;
    --calcite-panel-header-action-background-color-press: blue;
     etc...
  }

  .my-great-panel calcite-action[slot="header-actions-end"] {
    --calcite-action-background-color: blue;
    --calcite-action-background-color-hover: blue;
    --calcite-action-background-color-press: blue;
    etc... 
  }

This way, a user would just need to style Actions slotted in header-actions-end - internally rendered Action and internally rendered Action Menu for the header-menu-actions slot are handled through the new Panel props you added here, and users wouldn't need to reset any Actions slotted elsewhere in the Panel.

Example : https://github.com/Esri/calcite-design-system/blob/macandcheese/wip-panel-tokens-idea/packages/calcite-components/src/components/panel/panel.scss - this would mean we could remove the "pass through docs" for Action props on Panel to reduce confusion.

[driskull]

I agree with @macandcheese here.

[jcfranco]

@alisonailea Can you fix the typo in the title and update the description with details of the final approach? Thanks!

[driskull]

👍