v11 color token updates for search component (carbon-design-system#2326)

* v11 color token updates for search component This PR updates the color tokens on the Style tab for the search component. * Update style.mdx -took out .bx--search--light prop line -updated to $field-disabled * Update style.mdx updated search image caption from field-01 to field Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
emyarod · Jun 8, 2021 · 315b377 · 315b377
1 parent fa2f65b
commit 315b377
Showing 1 changed file with 14 additions and 15 deletions.
diff --git a/src/pages/components/search/style.mdx b/src/pages/components/search/style.mdx
@@ -12,31 +12,30 @@ Inputs come in two different colors. The default input color is `$field-01` and
 is used on `$ui-background` and `$ui-02` page backgrounds. The `--light` version
 input color is `$field-02` and is used on `$ui-01` page backgrounds.
 
-| Class                            | Property         | Color token |
-| -------------------------------- | ---------------- | ----------- |
-| `.bx--search-input`              | background-color | `$field-01` |
-| `.bx--search--light`             | background-color | `$field-02` |
-| `.bx--search-input`              | border-bottom    | `$ui-04`    |
-| `.bx--search-input`              | text color       | `$text-01`  |
-| `.bx--search-input::placeholder` | text color       | `$text-03`  |
-| `.bx--search-magnifier`          | fill             | `$icon-02`  |
+| Class                            | Property         | Color token         |
+| -------------------------------- | ---------------- | --------------------|
+| `.bx--search-input`              | background-color | `$field`            |
+| `.bx--search-input`              | border-bottom    | `$border-strong`    |
+| `.bx--search-input`              | text color       | `$text-primary`     |
+| `.bx--search-input::placeholder` | text color       | `$text-placeholder` |
+| `.bx--search-magnifier`          | fill             | `$icon-secondary`   |
 
 <div className="image--fixed">
 
 ![Example of Search using $field-01](images/search-style-4.png)
 
 </div>
 
-<Caption>Example of Search using $field-01</Caption>
+<Caption>Example of Search using $field</Caption>
 
 ### Interactive colors
 
-| Class                            | Property         | Color token    |
-| -------------------------------- | ---------------- | -------------- |
-| `.bx--search-input:focus`        | border           | `$focus`       |
-| `.bx--search-input:disabled`     | background-color | `$disabled-01` |
-| `.bx--search-input:disabled`     | text color       | `$disabled-02` |
-| `.bx--search-magnifier:disabled` | fill             | `$disabled-02` |
+| Class                            | Property         | Color token       |
+| -------------------------------- | ---------------- | ----------------- |
+| `.bx--search-input:focus`        | border           | `$focus`          |
+| `.bx--search-input:disabled`     | background-color | `$field-disabled` |
+| `.bx--search-input:disabled`     | text color       | `$text-disabled`  |
+| `.bx--search-magnifier:disabled` | fill             | `$icon-disabled`  |
 
 <div className="image--fixed">