A set of colors to pick one from, such as saved colors or colors to try, in rows that wrap.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
shapesmbk-color-swatch-picker--shape-<value> | squareround | square | Square swatches, or dots. |
sizesmbk-color-swatch-picker--size-<value> | mdsm | md | A 32 px item holding a 24 px swatch, or a 24 px item holding a 16 px one. |
Examples
Usage
Twelve colors with their names; the chosen one has a ring with a gap. Tab reaches the chosen color, the arrow keys move, Space or Enter picks.
Round
Dots, for a row of label or chart colors.
Small
The small size, as the color picker’s panel holds them: 24 px items with 16 px swatches.
A color that cannot be picked
A color that cannot be picked is dimmed, and the arrow keys pass it by.
Guidelines
Purpose
A set of colors to pick one from, such as a brand's colors, saved colors or colors to try, in rows that wrap. It is the fastest way to choose among a few set colors; for any color, use the color picker, which holds one at its foot.
When to use
- To choose among a set of colors: a brand's palette, label colors, chart colors, saved colors.
When not to use
- For any color at all. Use the color picker.
- To show colors that cannot be chosen. Use color swatches.
Usage rules
Do
- Name the list for what the color is for.
- Give the colors their own names when they have them.
Don't
- Offer colors so alike that the ring is the only way to tell which is which.
Name the set, such as “Brand color”, so a screen reader says what the colors are for.
Offer colors so alike that the ring is the only way to tell them apart.
Anatomy
- The block, the list, in rows that wrap with the extra small step between items both ways.
- The item part, one per color: a color swatch inside the extra small inset, a 24 px swatch in a 32 px item, or a 16 px swatch in a 24 px item at the small size. The chosen item has a ring inside its edge with a gap round the swatch; the item with keyboard focus draws the ring in the focus color. Hover lays the hover surface behind the swatch, and a color that cannot be picked is dimmed.
Behavior
A press on a color picks it. The picker holds its own choice from a first color, or follows the one the page gives it, and reports each color picked. A color matches the choice when its code and opacity are the same.
On a touch screen every color keeps its size and takes an invisible press area round it, reaching halfway into the gap between the colors, so each stays one press.
Accessibility
What it does for you
- It is a listbox, one stop in the Tab order: Tab reaches the chosen color, or the first.
- Each color is an option named in words, such as “vibrant red”, or by the name given; the chosen one is selected.
- The chosen color is shown by a ring and a gap, a shape, not by color alone.
- A color that cannot be picked is passed over by the arrow keys.
- In forced colors mode the rings become outlines in the reader's colors.
- On a touch screen every color keeps its size and takes an invisible press area round it, so each stays one press.
What you must do
- Name the list for what the colors are for, such as “Brand color”.
- Give the colors their own names when they have them; otherwise each is read by a name made from its value.
How to test
- Tab once: focus lands on the chosen color, or the first, and the next Tab leaves the list.
- With the arrow keys, Home and End, move through the colors, then press Space or Enter to pick one. A color that cannot be picked is skipped.
- With a screen reader, the list is read by its name, each color by its name, and the chosen one as selected.
- With text at 200% and the page 320 pixels wide, the colors wrap and each stays whole.
- In a forced-color mode, the chosen color and the one with focus each show an outline.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to the list, on the chosen color or the first. Tab again leaves it. |
| Left ArroworRight Arrow | Moves to the previous or next color that can be picked. |
| Up ArroworDown Arrow | Moves to the color above or below in the wrapped rows. |
| HomeorEnd | Moves to the first or last color that can be picked. |
| SpaceorEnter | Picks the color with focus. |
Source
The files the color swatch picker is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-color-swatch-picker — Color swatch picker. Figma "Color swatch picker" 7408:540 and its
* "ColorSwatchPickerItem" 7408:295.
* Rows of items that wrap, the extra small inline step apart both ways. Each item is a color swatch
* (smbk-color-swatch) inside the extra small inset, so a ring drawn inside the item's edge leaves a gap round
* the swatch: the chosen item's ring is the inverse border color, a shape as well as a color, so "chosen" is
* never told by color alone; the item with keyboard focus draws the ring in the focus color instead. Hover
* lays the hover surface behind the swatch; a disabled item is dimmed. */
.smbk-color-swatch-picker {
display: flex;
flex-wrap: wrap;
gap: var(--smbk-space-inline-xs);
outline: none;
}
.smbk-color-swatch-picker__item {
display: inline-flex;
flex-shrink: 0;
box-sizing: border-box;
padding: var(--smbk-space-inset-xs);
border-radius: var(--smbk-radius-container-sm);
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
.smbk-color-swatch-picker__item:hover {
background: var(--smbk-color-surface-hover);
}
}
.smbk-color-swatch-picker__item[aria-selected="true"] {
box-shadow: inset 0 0 0 var(--smbk-border-width-2) var(--smbk-color-border-inverse);
}
.smbk-color-swatch-picker__item:focus-visible {
box-shadow: inset 0 0 0 var(--smbk-border-width-2) var(--smbk-color-border-focus);
}
.smbk-color-swatch-picker__item[aria-disabled="true"] {
opacity: var(--smbk-opacity-disabled);
cursor: not-allowed;
}
@media (hover: hover) {
.smbk-color-swatch-picker__item[aria-disabled="true"]:hover {
background: none;
}
}
/* ---- small: a 24 px item; its square corner is the control's medium one ---- */
.smbk-color-swatch-picker--size-sm .smbk-color-swatch-picker__item {
border-radius: var(--smbk-radius-control-md);
}
/* Round: dots in round items. Two classes, so it wins over the small size's corner. */
.smbk-color-swatch-picker.smbk-color-swatch-picker--shape-round .smbk-color-swatch-picker__item {
border-radius: var(--smbk-radius-full);
}
/* ---- touch: every color takes an invisible press area ----
On a touch screen an invisible area, centred on each color, takes the press out to the comfortable target where it
can, but only halfway into the gap between the colors, so in rows this close each stays one press. The colors,
their ring and their places stay as drawn. */
@media (pointer: coarse) {
.smbk-color-swatch-picker__item {
position: relative;
}
.smbk-color-swatch-picker__item::after {
content: '';
position: absolute;
inset: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-inline-xs) / -2);
}
}
/* ---- high contrast (forced colors) ---- */
/* Shadows are dropped: the chosen ring and the focus ring become outlines in the reader's colors. */
@media (forced-colors: active) {
.smbk-color-swatch-picker__item[aria-selected="true"] {
outline: var(--smbk-border-width-2) solid CanvasText;
outline-offset: calc(-1 * var(--smbk-border-width-2));
}
.smbk-color-swatch-picker__item:focus-visible {
outline: var(--smbk-border-width-2) solid Highlight;
outline-offset: calc(-1 * var(--smbk-border-width-2));
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| space.inline.xs--smbk-space-inline-xs | 4px | Spacing | |
| space.inset.xs--smbk-space-inset-xs | 4px | Spacing | |
| radius.container.sm--smbk-radius-container-sm | 8px | Radius | |
| color.surface.hover--smbk-color-surface-hover | light: #373d4326dark: #606a754dchanges with theme | Color | |
| border-width.2--smbk-border-width-2 | 2px | Border width | |
| color.border.inverse--smbk-color-border-inverse | light: #232527dark: #f9fafbchanges with theme | Color | |
| color.border.focus--smbk-color-border-focus | light: #cc0d0ddark: #f34336changes with theme | Color | |
| opacity.disabled--smbk-opacity-disabled | 0.5 | Opacity | |
| radius.control.md--smbk-radius-control-md | 6px | Radius | |
| radius.full--smbk-radius-full | 9999px | Radius | |
| size.target.comfortable--smbk-size-target-comfortable | 44px | Size |
Manifest
{
"name": "color-swatch-picker",
"block": "smbk-color-swatch-picker",
"summary": "A set of colors to pick one from, such as saved colors or colors to try, in rows that wrap.",
"adapt": "css",
"axes": {
"shape": {
"values": [
"square",
"round"
],
"default": "square",
"description": "Square swatches, or dots."
},
"size": {
"values": [
"md",
"sm"
],
"default": "md",
"description": "A 32 px item holding a 24 px swatch, or a 24 px item holding a 16 px one."
}
},
"flags": {},
"parts": [
"item"
],
"figmaNodeId": "7408:540"
}