feat(accordion-item): style accordion item header in expanded state

[alisonailea]

Related Issue: #7180 #4060

Summary

While this does not create additional tokens for the background color in a -hover or -press state explicitly because this is outside of our current design patterns, it does allow a user to accomplish this by only targeting the top-level component styles.

calcite-accordion-item:hover {
--calcite-accordion-item-background-color: blue;
}
calcite-accordion-item[expanded] {
--calcite-accordion-item-header-background-color: blue;
}

Tokens

--calcite-accordion-item-background-color: Specifies the component's background color.
--calcite-accordion-item-border-color: Specifies the component's border color.
--calcite-accordion-item-content-space: Specifies the component's padding.
--calcite-accordion-item-header-background-color: Specifies the background color of the component's header.
--calcite-accordion-item-text-color: Specifies the component's text color.
--calcite-accordion-item-heading-text-color: Specifies the component's heading text color.
--calcite-accordion-item-icon-color: Specifies the component's default icon color.
--calcite-accordion-item-start-icon-color: Specifies the component's start icon color. Fallback to --calcite-accordion-item-icon-color or current color.
--calcite-accordion-item-end-icon-color: Specifies the component's end icon color. Fallback to --calcite-accordion-item-icon-color or current color.
--calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color.

Deprecated

--calcite-accordion-border-color: Use --calcite-accordion-item-border-color. Specifies the component's border color.
--calcite-accordion-text-color-hover: Use --calcite-accordion-item-text-color-hover. Specifies the component's main text color on hover.
--calcite-accordion-text-color-pressed: Use --calcite-accordion-item-text-color-press. Specifies the component's main text color when pressed.
--calcite-accordion-text-color: Use --calcite-accordion-item-text-color. Specifies the component's text color.

[macandcheese]

Looks good! Just one comment on text colors

[macandcheese]

Do we need two separate ones here for heading / description (and then apply whichever matches icon to icon) - They seem to use different values here? https://www.figma.com/design/vB6xFCAFeW0zKrT4nKlh8Z/Calcite-UI-Kit-%26-Styles?m=auto&node-id=3921-13&t=GRKfhHOwKkhpaNZS-1

[alisonailea]

The design pattern followed the -default, -hover, -press pattern, if we were to set tokens for heading / description we would be tripling the required tokens and breaking the design pattern.

[ashetland]

All of our components with a heading and a description will use two different colors for the text. Accordion Item currently functions differently than the rest in that it has color changes onHover.

At rest:

• heading is text.2
• description + icon are text.3

onHover:

• heading is text.1
• description + icon are text.2
• weird animation timings are present here: the icon and the description "fade" in at different rates while the heading doesn't not

When expanded (matches onHover):

• heading is text.1
• description + icon are text.2
• no hover state when expanded

No other components with headings and descriptions behave this way and in issue #10016 (and epic #9299) we've outlined specs to consolidate these patterns. Even with the updated pattern though, the heading and description will be different colors, but they won't change on hover/press.

Since they use different colors I'd expect separate props for them. As for the hover/pressed tokens, I'm less sure since we're in the process of consolidating and aligning some of these different patterns across the system. If it's important to define these tokens for the current state, then I suppose they could be deprecated later when the pattern is updated?

[alisonailea]

So here's what I've done.

I have left the default styling as-is so that

At rest:
heading is text.2
description + icon are text.3

onHover:
heading is text.1
description + icon are text.2
weird animation timings are present here: the icon and the description "fade" in at different rates while the heading doesn't not

When expanded (matches onHover):
heading is text.1
description + icon are text.2
no hover state when expanded

HOWEVER, the component tokens available to the user reflect the future pattern where-in there is no extra hover/press state tokens.

[ashetland]

Dig it.

[macandcheese]

Just confirming:

Should this have --calcite-accordion-item-description-text-color in addition to --calcite-accordion-item-heading-text-color?

In this set up - a user can override the internally rendered icons, but only through --calcite-icon-color, nothing scoped to Accordion?

[alisonailea]

--calcite-accordion-item-text-color == --calcite-accordion-item-description-text-color