feat(react-swatch-picker): Added borderColor prop and fixed styles

[ValentinaKozlova]

New Behavior

• Added contrast utils and tests
• fixed positioning of icon/initials in disabled state
• added shadow for disabled icon
• Added example with low contrast colors

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-swatch-picker-preview @fluentui/react-swatch-picker-preview - package	109.013 kB 30.362 kB	109.288 kB 30.485 kB	275 B 123 B

_{🤖 This report was generated against 79b73d920ef1a89e5daff165f28f0afe966afb01}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[layershifter]

• Let's ensure that we have the best possible behavior built-in, at least for ColorSwatch it seems to be achievable
• We need to have color computations under useEffect (probably useLayoutEffect() to avoid flickering)
  • I would propose something like that (we will avoid state updates i.e. re-renders 👍 ):

  const { color } = props
  const ref = React.useRef();
  
  React.useLayoutEffect(() => {
    const constrastColor = DO_SOMETHING(color);
  
    ref.current.style.setProperty('--fui-switch-SMTH', constrastColor);
  }, [color])

• We need to handle scenarios with CSS variables
• We need more powerful color parsing to handle cases not only for rgb() or HEX values. color-parse looks promising (5kb minified)

[ValentinaKozlova]

• Let's ensure that we have the best possible behavior built-in, at least for ColorSwatch it seems to be achievable

• We need to have color computations under useEffect (probably useLayoutEffect() to avoid flickering)

  • I would propose something like that (we will avoid state updates i.e. re-renders 👍 ):

  const { color } = props
  const ref = React.useRef();
  
  React.useLayoutEffect(() => {
    const constrastColor = DO_SOMETHING(color);
  
    ref.current.style.setProperty('--fui-switch-SMTH', constrastColor);
  }, [color])

• We need to handle scenarios with CSS variables

• We need more powerful color parsing to handle cases not only for rgb() or HEX values. color-parse looks promising (5kb minified)

Yeah, it's a good idea. We'll add those after going stable