Our Color Palette is basically an arrangement of Color Swatches representing various colors and styles.
In ColorPalette only a single color swatch can be selected.
- Overview
- Dev
In some cases, product or flow will benefit from a bigger palette.
This type of palette is navigated with pagination.
Minimum number of rows is 2 and maximum is 5.
The palette adapts to the screen width, with a minimum spacing of S5 between colors swatches.
In screens with a limited space a smaller palette can be used.
If the amount of color swatches is larger than the screen width, the Color Palette becomes scrollable.
Tapping the “+” button will open the Color Picker dialog, allowing user to create a custom color.
When Color Palette is scrollable, “add” button will be sticky to screen left.
After the custom color is created, it’s added as a Color Swatch to the right of the “add” button, and selected as the main color.
If the selected color is outside of the view port when screen is loaded, the palette will be scrolled to the primary swatch.
Transparent swatches are fixed to the left of other (regular) Color Swatches.
