[Color Picker] Adjust component's scope and color swatch sizing

[geospatialem]

Check existing issues

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

Description

Improve the color-picker design with the alpha channel and color swatch, where:

1. The color swatch size is smaller when alpha-channel is not used
2. The scope thumb is also reduced in size to match the slider heights

Acceptance Criteria

• [ ] Reduce size of scope to 14px circles to match slider height (applies to all scales)
• [ ] When alpha-channel is not used, reduce sampled color swatch to match size of saved color swatches: 20px for small scale and 24 px for medium scale. No changes are required for large scale.

Relevant Info

• For full details, Figma file can be found here.
• 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 - p2 - want for an upcoming milestone

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

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍡 Verified locally on dev