@wix/design-system/dist/docs/components/PaletteExamples.md

@wix/design-system

## Feature Examples


### Fills
- description: Add any number of fill options inside of a palette. 
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack height="42px">
    <Palette fill={['rgb(50, 132, 144)', 'rgb(50, 183, 198)']} />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="42px">
    <Palette
      fill={[
        'rgb(50, 132, 144)',
        'rgb(50, 183, 198)',
        'rgb(146, 224, 225)',
        'rgb(203, 246, 255)',
        'rgb(255, 255, 255)',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Type
- description: Accepts following `fill types`:<br/>
        &emsp;- `solid color` <br/>
        &emsp;- `gradient` <br/>
        &emsp;- `image`
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack height="30px">
    <Palette
      fill={['rgb(50, 132, 144)', 'rgb(50, 183, 198)', 'rgb(146, 224, 225)']}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="30px">
    <Palette
      fill={[
        'linear-gradient(to right, #8364e8, #d397fa)',
        'linear-gradient(to right, #0061ff, #60efff)',
        'linear-gradient(to right , #099773, #87f4b5)',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="30px">
    <Palette
      fill={[
        <Image src="PatternExample1.jpg" borderRadius={0} />,
        <Image src="PatternExample2.jpg" borderRadius={0} />,
        <Image src="PatternExample3.jpg" borderRadius={0} />,
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Dimensions
- description: Control component dimensions with a parent container. 
        Component have no dimensions of its own - It inherits the width and height of a container it is wrapped to. 
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack height="42px">
    <Palette
      fill={[
        'rgb(50, 132, 144)',
        'rgb(50, 183, 198)',
        'rgb(146, 224, 225)',
        'rgb(203, 246, 255)',
        'rgb(255, 255, 255)',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="24px" width="40%">
    <Palette
      fill={[
        'rgb(50, 132, 144)',
        'rgb(50, 183, 198)',
        'rgb(146, 224, 225)',
        'rgb(203, 246, 255)',
        'rgb(255, 255, 255)',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```




    


## Common Use Case Examples


### Form Field
- description: Use `<FormField/>` to give the palette a label.
- example: 
```jsx 
<FormField label="Mellow Salmon">
  <Box height="24px" width="50%">
    <Palette
      fill={[
        'rgb(84, 84, 84)',
        'rgb(229, 150, 111)',
        'rgb(252, 225, 207)',
        'rgb(254, 194, 130)',
        'rgb(255, 255, 255)',
      ]}
    />
  </Box>
</FormField>;
```

### Thumbnail
- description: Create a selection of palette using `<Thumbnail/>` component.
- example: 
```jsx 
() => {
  const [selected, setSelected] = React.useState(0);

  return (
    <Layout>
      <Cell span={6}>
        <FormField label="Select a palette">
          <Layout gap="12px">
            <Cell span={12}>
              <Thumbnail
                selected={selected === 0}
                onClick={() => setSelected(0)}
              >
                <Box height="30px">
                  <Palette
                    fill={[
                      '#003049',
                      '#d62828',
                      '#f77f00',
                      '#fcbf49',
                      '#f3dfc1',
                    ]}
                  />
                </Box>
              </Thumbnail>
            </Cell>
            <Cell span={12}>
              <Thumbnail
                selected={selected === 1}
                onClick={() => setSelected(1)}
              >
                <Box height="30px">
                  <Palette
                    fill={[
                      '#6d2e46',
                      '#a26769',
                      '#c09891',
                      '#cebebe',
                      '#f4dbd8',
                    ]}
                  />
                </Box>
              </Thumbnail>
            </Cell>
          </Layout>
        </FormField>
      </Cell>
    </Layout>
  );
};
```

### Composer
- description: Use a palette in a variety of composer side panels to allow users to select themes for their designs.
- example: 
```jsx 
() => {
  const [selected, setSelected] = React.useState(0);

  return (
    <SidePanel>
      <SidePanel.Header title="Theme" />
      <SidePanel.Content>
        <Layout gap="12px">
          <Cell span={12}>
            <Text>Current theme</Text>
            <Thumbnail selected={selected === 0} onClick={() => setSelected(0)}>
              <Box padding="12px" direction="vertical">
                <FormField label="Palette 1">
                  <Box height="24px">
                    <Palette
                      fill={[
                        '#000000',
                        '#E43510',
                        '#D6CEDF',
                        '#0227CF',
                        '#00CE83',
                      ]}
                    />
                  </Box>
                </FormField>
              </Box>
            </Thumbnail>
          </Cell>
          <Cell span={12}>
            <Box paddingTop="24px">
              <Text>Featured themes</Text>
            </Box>
          </Cell>
          <Cell span={12}>
            <Thumbnail selected={selected === 1} onClick={() => setSelected(1)}>
              <Box padding="12px" direction="vertical">
                <FormField label="Palette 2">
                  <Box height="24px">
                    <Palette
                      fill={[
                        '#000000',
                        '#C97D7C',
                        '#637EB3',
                        '#5EA6B0',
                        '#DFC2B8',
                      ]}
                    />
                  </Box>
                </FormField>
              </Box>
            </Thumbnail>
          </Cell>
          <Cell span={12}>
            <Thumbnail selected={selected === 2} onClick={() => setSelected(2)}>
              <Box padding="12px" direction="vertical">
                <FormField label="Palette 2">
                  <Box height="24px">
                    <Palette
                      fill={[
                        '#F2F2F2',
                        '#FFC824',
                        '#E68E93',
                        '#FD773F',
                        '#A01F25',
                      ]}
                    />
                  </Box>
                </FormField>
              </Box>
            </Thumbnail>
          </Cell>
        </Layout>
      </SidePanel.Content>
      <SidePanel.Footer>
        <Box align="right" gap="12px">
          <Button priority="secondary">Cancel</Button>
          <Button>Save</Button>
        </Box>
      </SidePanel.Footer>
    </SidePanel>
  );
};
```