[input type="date"] dark mode low contrast icon

gpbmike commented 4 months ago

Check existing issues

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

Actual Behavior

The calendar icon on the calcite-input component with type="date" is hard to distinguish from the background.

Expected Behavior

The calendar icon color contrast should make it more visible (left).

Reproduction Sample

https://codepen.io/gpbmike/pen/eYomOQY?editors=100

Reproduction Steps

<body class="calcite-mode-dark">
  <calcite-input type="date"></calcite-input>
</body>

Reproduction Version

2.6.0

Relevant Info

MacOS 14.3.1 Chrome 122

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

Accessibility issue.

Calcite package

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

Esri team

ArcGIS Site Scan

gpbmike commented 4 months ago

Setting color-scheme: dark on the shadow DOM input is how I changed the icon in the "expected" screenshot.

geospatialem commented 3 months ago

Spike to determine next steps.

Can we support native and browser icons when the input is set to "date", "week", "time", "month", etc...?

gpbmike commented 3 months ago

I ended up working around this by adding html { color-scheme: dark; }.

Some possible solutions to this:

library applies color-scheme to individual components
library recommends adding color-scheme at a higher level
or perhaps color-scheme is how the library should determine what theme to use

github-actions[bot] commented 3 months ago

cc @geospatialem, @brittneytewks

geospatialem commented 3 months ago

Based on Mike's sleuthing above we can add a dark mode css selector - updated the estimate and priority for future implementation.

Esri / calcite-design-system