# Silke CSS Color Picker

pick color plz

## Inline color-picker with swatches

```js
const [value, setValue] = React.useState(``);
const [variables, setVariabels] = React.useState({
  primary: 'rgba(0, 150, 136, 1)',
  accent: 'rgba(233, 30, 99, 1)',
  bg: 'rgba(250, 250, 250, 1)',
  text: false,
});
const handleAddVariable = () => {
  setVariabels({
    ...variables,
    ['--swatch' + Object.keys(variables).length]: value,
  });
};

<SilkeCSSContext variables={variables} onVariableAdd={handleAddVariable}>
  <SilkeColorPicker value={value} onChange={setValue} />
</SilkeCSSContext>;
```

## Default button trigger

```js
const [value, setValue] = React.useState(`rgba(10, 10, 10, 100`);
const [variables, setVariabels] = React.useState({
  primary: 'rgba(0, 150, 136, 1)',
  accent: 'rgba(233, 30, 99, 1)',
  bg: 'rgba(250, 250, 250, 1)',
  text: false,
});
const handleAddVariable = () => {
  setVariabels({
    ...variables,
    ['--swatch' + Object.keys(variables).length]: value,
  });
};
<SilkeCSSContext variables={variables} onVariableAdd={handleAddVariable}>
  <SilkeBox gap="m" vAlign="center">
    <SilkeColorPickerButton value={value} onChange={setValue}>
      <h3>Custom contnet</h3>
    </SilkeColorPickerButton>

    <SilkeColorPickerButton value={value} size="s" onChange={setValue} />

    <SilkeColorPickerButton value={value} label="Some random label" onChange={setValue} />
  </SilkeBox>
</SilkeCSSContext>;
```

## Hue slider

```js
const [rgb, setRgb] = React.useState(`green`);
const [hue, setHue] = React.useState(0);
const [multipleHue, setMultipleHue] = React.useState([0, 1]);
<SilkeBox column gap="m">
  <SilkeHueSlider value={rgb} onChange={setRgb} />
  <SilkeHueSlider value={hue} onChange={setHue} />
  <SilkeHueSlider value={multipleHue} onChange={setMultipleHue} />
  <SilkeHueSlider
    value={multipleHue}
    onChange={setMultipleHue}
    onTrackClick={(e, v) => setMultipleHue([...multipleHue, v])}
  />
</SilkeBox>;
```