feat(color): add color component

[jcfranco]

Issue #64

This adds the following components:

• calcite-color
• calcite-color-hex-input
• calcite-color-swatch

API

interface CalciteColor {
  // intl props omitted
  scale: "s" | "m" | "l";
  storageId: string;
  theme: "dark" | "light";
  value: ColorValue; 

  calciteColorChange: EventEmitter<void>;

  setFocus(): Promise<void>;
}

// CSS color | 
// { r: number, g: number: b: number} | 
// { h: number, s: number: v: number} |  
// { h: number, s: number: l: number};
type ColorValue = string | object; 

interface CalciteColorHexInput {
  hexLabel: string; // text used for aria-label
  scale: "s" | "m" | "l";
  theme: "dark" | "light";
  value: string;  // hex value

  onCalciteColorHexInputChange();

  setFocus(): Promise<void>;
}

interface CalciteColorSwatch {
  active: boolean;
  color: string;  // CSS color values
  scale: "s" | "m" | "l";
  theme: "dark" | "light";
}

Pending

• Confirm naming convention of label props (intlProp?).
• Update canvas rendering code for HD displays (looks a bit blurry in those cases)
• Update tests
• a11y audit
• Add stories

Notes

• The format of value will be preserved as the user makes updates (e.g., if user specifies value as rgb(), it will remain rgb() after making updates).
• This adds https://www.npmjs.com/package/color as a dependency for working for color values.
• This version does not handle alpha (will be handled in separate issue)
• This also adds a new helper for testing component focus.
• The change event has no detail object for the following reasons:
  • input value format is preserved (assumes input value is the desired output one)
  • color can change frequently and adding all of the possible color formats to the event seems unnecessary
  • secret color prop is available for advanced color use cases
• Hex values are normalized to be lowercase
• Has groundwork for handling/preserving alpha values
• Simplifies tsconfig.json.

Questions

• What should the default color be? It's currently set to #007AC2.
• Similar to calcite-date, should this be renamed to calcite-color?

[jcfranco]

calcite-color is now dogfooding components! 🐶 ⬅ such a good boy!

The only outstanding item now is what to do with the small scale layout (see previous comment ☝️).

[paulcpederson]

For now, in small scale we could just drop the r g b text, maybe?

[driskull]

Commentz

[bstifle]

ok @jcfranco here we go again...

sorry for the back and forth and universal sadness throughout this component.

But... here's the latest. Provided some spacing specs too. (all the typography is 14px)

any questions please let me know

[bstifle]

@jcfranco @macandcheese @julio8a

This is getting really confusing since we already have calcite-colors as a library.

Let's change the name back to calcite-color-picker

[macandcheese]

calcite-color makes more sense to me... it's more consistent with calcite-date, and lends itself more to granular component use for things like calcite-color-swatch outside of the color picking context.

[TheBlueDog]

If you are using the scale system the graph height on M and L is slightly off.

[bstifle]

ship ittttt