# Tokens

## .sds\_Textarea

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

## .sds\_Textarea\_Error

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

## .sds\_Textarea\_Disabled

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