[Accordion] Item hight not using a controlled CSS Custom Property

[Westbrook]

Description

There is an uncontrolled unit of measure used to calculate the height of the Accordion Header that ends up having the same value for medium and large themes. This is indicated in the below CSS samples and in the dist/vars.css file which lists the value as 40px rather than a derivative of a system wide custom property:

.spectrum-Accordion-itemIndicator {
    top: calc(
        (
                var(--spectrum-accordion-item-height, 40px) -
                    var(
                        --spectrum-accordion-item-border-size,
                        var(--spectrum-alias-border-size-thin)
                    )
            ) / 2 -
            var(
                --spectrum-accordion-icon-height,
                var(--spectrum-global-dimension-size-125)
            ) / 2
    );
}

 .spectrum-Accordion-itemHeading {
    height: var(--spectrum-accordion-item-height, 40px);
}

.spectrum-Accordion-itemHeader {
    min-height: calc(
        var(--spectrum-accordion-item-height, 40px) -
            var(
                --spectrum-accordion-item-border-size,
                var(--spectrum-alias-border-size-thin)
            )
    );
}

 .spectrum-Accordion-item.is-open>.spectrum-Accordion-itemHeader:after {
    height: calc(
        var(--spectrum-accordion-item-height, 40px) -
            var(
                --spectrum-accordion-item-border-size,
                var(--spectrum-alias-border-size-thin)
            )
    );
}

Steps to reproduce

1. Go to https://opensource.adobe.com/spectrum-css/accordion.html
2. Choose the "Large" size
3. Observe how hovering on an Accordion Item causes the hover styling to bleed past the standard styling.

Expected behavior

A controlled variable ensures correct delivery across all scales and color sets.

Screenshots

Environment

• Spectrum CSS version: Latest beta
• Browser(s) and OS(s): observed on Chrome, macOS: though all environments are likely here.

[Westbrook]

Upon closer review, this issue could also be avoided by not relying on this value all together and leveraging the following styles instead:

.spectrum-Accordion-itemIndicator {
    top: calc(
                50% -
            var(
                --spectrum-accordion-icon-height,
                var(--spectrum-global-dimension-size-125)
            ) / 2
    );
}

.spectrum-Accordion-itemHeading {
    height: auto;
    position: relative;
}

.spectrum-Accordion-itemHeader {
    min-height: calc(
        100% -
            var(
                --spectrum-accordion-item-border-size,
                var(--spectrum-alias-border-size-thin)
            )
    );
}

 .spectrum-Accordion-item.is-open>.spectrum-Accordion-itemHeader:after {
    height: calc(
        100% -
            var(
                --spectrum-accordion-item-border-size,
                var(--spectrum-alias-border-size-thin)
            )
    );
}

[lazd]

If that fixes the alignment of the icon, I'd accept a PR!