Input Date Picker: Incorrect variable usage

[fishNimo]

monday.com sync: #11127783197

Check existing issues

• I have checked for existing issues to avoid duplicates

Which Component

N/A, Input Date Picker

Actual Behavior

It uses selected-background-color instead of range-background-color.

--calcite-date-picker-day-range-background-color: var(--calcite-input-date-picker-calendar-selected-background-color)

Expected Behavior

It should use range-background-color.

Reproduction Sample

• Sample 1: https://codepen.io/su-lin/pen/zxBpmXP
• Sample 2: https://codepen.io/geospatialem/pen/PwzEVRg

Reproduction Steps

Sample 1

1. Open the codePen
2. Open a new tab for the demo container.
   
3. Inspect the day DOM and observe.
   

Sample 2

1. Open the sample
2. Observe the first example using range-named tokens are not displaying as-expected
3. Observe the second example with range is displaying the specified --calcite-input-date-picker-calendar-selected-background-color (the workaround, but not expected behavior)

Reproduction Version

calcite-components@5.0.0-next.80

Relevant Info

No response

Regression?

Last working version was 3.2.1, regression introduced at 3.3.0

Priority impact

impact - p0 - emergency

Impact

We're targeting the release of a new widget in 26R1, which will meet the needs of users and the internal team (e.g., LRS). This bug is currently blocking the development of this new widget with the input style.

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 Experience Builder

[fishNimo]

@anveshmekala Please help take a look at it. Thanks~