Panel: tokens to target header actions not working

[allyshah]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Tokens for header actions don't work. Our team (ArcGIS Dashboards) sees that the PR was merged and the new tokens are on the doc site but they don't work. Solution released on Feb 6,2025 did not resolve issue. Not working in next.116.

Puled from original note/ request from our team describing issue (1/10):

Panel header background & action colors
Changing a panel header background with the new --calcite-panel-header-background doesn't look great without also changing the action colors to match using the --calcite-action-*-color variables. However, setting these variables on the calcite-panel will affect all actions in the panel and there isn’t a way to target only the actions in the header. Selecting the actions slotted in the header isn’t sufficient as that won’t include the menu.

What I could do is set the actions to the header color on the panel, and then select the actions in the panel body and “reset” them.

calcite-panel {
--calcite-panel-header-background-color: #4874;
--calcite-panel-heading-text-color: #fff;
--calcite-action-background-color: #4874;
--calcite-action-background-color-hover: #023452;
--calcite-action-background-color-pressed: #023452;
--calcite-action-text-color: #fff;
--calcite-action-text-color-hover: #fff;
--calcite-action-text-color-pressed: #fff;
.panel-body {
--calcite-action-background-color: initial;
--calcite-action-background-color-hover: initial;
--calcite-action-background-color-pressed: initial;
--calcite-action-text-color: intial;
--calcite-action-text-color-hover: initial;
--calcite-action-text-color-pressed: initial;
}
}

Would this be the recommended workflow or would calcite consider adding variables to directly target the header actions?-----

---

(2/6) Proposed work around noted, but our team will wait for a true fix. Posting work around:
Ali Stump: I would recommend you use the panel body and “reset” solution for the time being. I have been trying to identify the error here and running into problems.

Our team will not release in 25.R1. and awaits the fix.

Similarity with this issue is noted in this existing, closed issue: #10519

Tagging @alisonailea @jcfranco

Expected Behavior

Functional header token

Reproduction Sample

coming soon

Reproduction Steps

1. go to https://next-preview.sites.afd.arcgis.com/calcite-design-system/components/panel/
2. check here by changing any of the --calcite-panel-header-action-* colors
3. notice the issue: there is no change

Reproduction Version

3.0.0-next.132

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

Our team will not release in 25.R1. and awaits the fix.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Dashboards