# Tokens

## .sds\_Tag

| Component Tokens          | Theme Tokens                                                                                                                                  |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| --sds\_tag\_background    | <p>--sds_theme_background_gradient</p><p>linear-gradient( </p><p>to bottom, </p><p>sds-color(white) 0%, </p><p>sds-color(grey, 05) 100% )</p> |
| --sds\_tag\_border\_color | <p>--sds_theme_border</p><p>sds-color(grey, 30)</p>                                                                                           |
| --sds\_tag\_text          | <p>--sds_theme_text</p><p>sds-color(grey, 100)</p>                                                                                            |

## .sds\_Tag\_Selectable

| Component Tokens                    | Theme Tokens                                                                                          |
| ----------------------------------- | ----------------------------------------------------------------------------------------------------- |
| --sds\_tag\_hover\_background       | <p>--sds_theme_background_low</p><p>sds-color(grey, 10)</p>                                           |
| --sds\_tag\_hover\_border\_color    | <p>--sds_theme_color_neutral</p><p>sds-color(grey)</p>                                                |
| --sds\_tag\_hover\_text             | <p>--sds_tag_text</p><p>sds-color(grey, 100)</p>                                                      |
|                                     |                                                                                                       |
| --sds\_tag\_focus\_shadow           | <p>--sds_theme_focus_shadow</p><p>0 0 0 2px sds-color(grey, 05), </p><p>0 0 0 4px sds-color(blue)</p> |
|                                     |                                                                                                       |
| --sds\_tag\_selected\_background    | <p>--sds_theme_background_low</p><p>sds-color(grey, 10)</p>                                           |
| --sds\_tag\_selected\_border\_color | <p>--sds_theme_color_neutral</p><p>sds-color(grey)</p>                                                |
| --sds\_tag\_selected\_text          | <p>--sds_tag_text</p><p>sds-color(grey, 100)</p>                                                      |

## .sds\_Tag\_Removable

| Component Tokens                      | Theme Tokens                                                |
| ------------------------------------- | ----------------------------------------------------------- |
| --sds\_tag\_action\_background        | transparent                                                 |
| --sds\_tag\_action\_icon              | <p>--sds_theme_icon</p><p>sds-color(grey, 70)</p>           |
|                                       |                                                             |
| --sds\_tag\_action\_hover\_background | <p>--sds_theme_background_low</p><p>sds-color(grey, 10)</p> |
| --sds\_tag\_action\_hover\_icon       | <p>--sds_theme_icon_dark</p><p>sds-color(grey, 100)</p>     |
