# Tokens

## .sds\_ColorPicker

| Component Tokens                               | Theme Tokens                                                                                     |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| --sds\_colorPicker\_border\_color              | <p>--sds_theme_control_border<br>sds-color(grey, 30)</p>                                         |
| --sds\_colorPicker\_border\_width              | 1px                                                                                              |
| --sds\_colorPicker\_border\_style              | solid                                                                                            |
| --sds\_colorPicker\_helptext                   | <p>--sds_theme_text_muted<br>sds-color(grey, 70)</p>                                             |
| --sds\_colorPicker\_hover\_border\_color       | <p>--sds_theme_control_hover_border<br>sds-color(grey)</p>                                       |
| --sds\_colorPicker\_interactive\_border\_color | --sds\_colorPicker\_hover\_border\_color                                                         |
| --sds\_colorPicker\_interactive\_border\_width | 2px                                                                                              |
| --sds\_colorPicker\_interactive\_shadow        | <p>--sds_theme_focus_shadow,<br>0 0 0 2px sds-color(grey, 05), <br>0 0 0 4px sds-color(blue)</p> |

## .sdsColorPickerTool

| Component Tokens                         | Theme Tokens                                              |
| ---------------------------------------- | --------------------------------------------------------- |
| ----sds\_colorPicker\_tool\_background   | <p>--sds_theme_control_background<br>sds-color(white)</p> |
| --sds\_colorPicker\_tool\_swatch\_border | <p>--sds_theme_control_border<br>sds-color(grey, 30)</p>  |
