# Tokens

## .sds\_TextInput

| Component Tokens                       | Theme Tokens                                                                        |
| -------------------------------------- | ----------------------------------------------------------------------------------- |
| --sds\_textInput\_background           | <p><strong>--sds_theme_control_background</strong></p><p>sds-color(white)</p>       |
| --sds\_textInput\_border\_color:       | <p><strong>--sds_theme_control_border</strong></p><p>sds-color(grey, 30)</p>        |
| --sds\_textInput\_border\_radius       | <p><strong>--sds_theme_border_radius</strong></p><p>0.5rem</p>                      |
| --sds\_textInput\_border\_style        | solid                                                                               |
| --sds\_textInput\_border\_width        | 1px                                                                                 |
| --sds\_textInput\_icon                 | <p><strong>--sds_theme_control_icon</strong></p><p>sds-color(grey, 40)</p>          |
| --sds\_textInput\_placeholder          | <p><strong>--sds_theme_control_placeholder</strong></p><p>sds-color(grey, 70)</p>   |
| --sds\_textInput\_text                 | <p><strong>--sds_theme_control_text</strong></p><p>sds-color(grey, 100)</p>         |
| --sds\_textInput\_helptext             | <p><strong>--sds_theme_text_muted</strong></p><p>sds-color(grey, 70)</p>            |
|                                        |                                                                                     |
| --sds\_textInput\_hover\_background    | <p><strong>--sds_theme_control_hover_background</strong></p><p>sds-color(white)</p> |
| --sds\_textInput\_hover\_border\_color | <p><strong>--sds_theme_control_hover_border</strong></p><p>sds-color(grey)</p>      |
| --sds\_textInput\_hover\_border\_width | 1px                                                                                 |
| --sds\_textInput\_hover\_placeholder   | --sds\_textInput\_placeholder                                                       |
| --sds\_textInput\_focus\_background    | <p><strong>--sds_theme_control_focus_background</strong></p><p>sds-color(white)</p> |
|                                        |                                                                                     |
| --sds\_textInput\_focus\_border\_color | <p><strong>--sds_theme_focus_highlight</strong></p><p>sds-color(blue)</p>           |
| --sds\_textInput\_focus\_border\_width | 2px                                                                                 |
| --sds\_textInput\_focus\_placeholder   | --sds\_textInput\_placeholder                                                       |
| --sds\_textInput\_icon                 | <p><strong>--sds_theme_control_icon</strong></p><p>sds-color(grey, 40)</p>          |

## .sds\_InputText\_Error

| Component Tokens                       | Theme Tokens                                                                          |
| -------------------------------------- | ------------------------------------------------------------------------------------- |
| --sds\_textInput\_error\_background    | <p><strong>--sds_theme_control_error_background</strong></p><p>sds-color(red, 05)</p> |
| --sds\_textInput\_error\_border\_color | <p><strong>--sds_theme_control_error_border</strong></p><p>sds-color(red)</p>         |
| --sds\_textInput\_error\_border\_width | 2px                                                                                   |
| --sds\_textInput\_error\_placeholder   | --sds\_textInput\_placeholder)                                                        |
| --sds\_textInput\_error\_icon          | <p><strong>--sds_theme_control_error_icon</strong></p><p>sds-color(red)</p>           |
| --sds\_textInput\_error\_text          | <p><strong>--sds_theme_control_error_text</strong></p><p>sds-color(red, 60)</p>       |
| --sds\_textInput\_error\_helptext      | <p><strong>--sds_theme_control_error_text</strong></p><p>sds-color(red, 60)</p>       |

## .sds\_InputText\_Disabled

| Component Tokens                          | Theme Tokens                                                                               |
| ----------------------------------------- | ------------------------------------------------------------------------------------------ |
| --sds\_textInput\_disabled\_background    | <p><strong>--sds_theme_control_disabled_background</strong></p><p>sds-color(white)</p>     |
| --sds\_textInput\_disabled\_border\_color | <p><strong>--sds_theme_control_disabled_border</strong></p><p>sds-color(grey, 30)</p>      |
| --sds\_textInput\_disabled\_border\_width | 1px                                                                                        |
| --sds\_textInput\_disabled\_icon          | <p><strong>--sds_theme_control_disabled_icon</strong></p><p>sds-color(grey, 40)</p>        |
| --sds\_textInput\_disabled\_opacity       | <p><strong>--sds_theme_disabled_opacity</strong></p><p>48%</p>                             |
| --sds\_textInput\_disabled\_placeholder   | <p><strong>--sds_theme_control_disabled_placeholder</strong></p><p>sds-color(grey, 70)</p> |
| --sds\_textInput\_disabled\_text          | <p><strong>--sds_theme_control_disabled_text</strong></p><p>sds-color(grey, 100)</p>       |
