Separate background color variables for the calcite-dialog would be very helpful

[jesseadamsnpgs]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Currently the --calcite-modal-content-background variable works well for customizing the background color of the modal content, however, there isn't a clear way to customize only the modal header or footer background colors. The --calcite-ui-foreground-1 variable is used as the header background color, however, changing that variable results in also changing the header and footer background colors. It would be great if the header, content, and footer had separate CSS variables for more flexible targeted styling.

Acceptance Criteria

Separate background color override selectors, ie:

--calcite-modal-header-background
--calcite-modal-footer-background

Relevant Info

No response

Which Component

calcite-modal

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

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

Esri team

N/A

[ellenupp]

Dashboards team is also interested in this.

We'll be introducing user-configurable "information windows" and would like more flexible styling options, specifically being able to target only the header background:

A separate CSS variable for the header would be great.

[geospatialem]

With the deprecation of the modal component, in favor of dialog - re-scoping the title of the request to dialog. Implementation timeline TBD after the initial token effort makes headway in #7180 ✨

[macandcheese]

This can leverage the tokens introduced here in Panel #10822

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 3.0.0-next.68 with the following tokens:

• --calcite-dialog-background-color
• --calcite-panel-header-background-color
• --calcite-panel-footer-background-color

#my-custom-dialog {
  --calcite-dialog-background-color: var(--calcite-color-background);
  --calcite-action-background-color: var(--calcite-color-brand);
  --calcite-action-background-color-hover: var(--calcite-color-brand-hover);
  --calcite-action-background-color-pressed: var(--calcite-color-brand-pressed);
  --calcite-action-text-color: #000;
  --calcite-action-text-color-pressed: #000;
  --calcite-action-text-color-hover: #000;
  --calcite-panel-header-background-color: var(--calcite-color-brand);
  --calcite-panel-footer-background-color: var(--calcite-color-border-3);
}