CSS Variable for text-area footer font-size

[tom12993]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

I want to decouple the font-size of calcite-text-area's body and footer. Example: 14px for text-area body, and 12px for the footer text

Acceptance Criteria

Add --calcite-text-area-footer-font-size which will affect just the footer's font-size.

Relevant Info

No response

Which Component

calcite-text-area

Example Use Case

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [X] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Monitor

[alisonailea]

Can you describe a bit more about your use case for this?

[tom12993]

@alisonailea I just want the footer font-size, including the character count, to be smaller than the text-area body. To achieve this same effect, we're currently setting the scale of calcite-text-area to s so the footer font-size can be 12px. And then we're using shadowRoot to modify the font-size of the body to 14px.

    const textArea = document.querySelector('calcite-text-area')
    if (textArea?.shadowRoot) {
      textArea.shadowRoot.innerHTML += `<style>textarea {font-size: var(--calcite-font-size--1) !important;}</style>`
    }