[Color Picker] Color field design improvement for values and scales

[geospatialem]

Check existing issues

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

Description

The design phase for adding alpha channel support to Color Picker (issue https://github.com/Esri/calcite-design-system/issues/749) proposed additional improvements that were intended to be tackled after the initial alpha channel support was implemented. This issue is to document the remaining tasks to complete, and the two items below should be considered together for next steps for their implementation.

Note: depending on the discussions, could result in a breaking change.

cc @ashetland

Acceptance Criteria

• [ ] Consider changing updating the widths of Color Picker at each scale. Proposed widths are 200px (small), 240px (medium), 304px (large).
  • [ ] Should we consider as a new prop?
  • [ ] Related issue #8463, is it possible to change how the color field in drawn to enable responsive resizing?
• [ ] Also consider updating color fields to be square. This will ensure saturation and brightness values have a linear relationship and improve the UX of selecting a color inside the field.
  • [ ] Run past internal teams for additional expertise and insights
  • [ ] Should we consider as a new prop?

Relevant Info

Figma file Part of the https://github.com/Esri/calcite-design-system/issues/7163 epic

Which Component

color-picker

Example Use Case

No response

Priority impact

impact - p3 - not time sensitive

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

Calcite (design)

[github-actions[bot]]

cc @geospatialem, @brittneytewks