update style.mdx

andreancardona · Mar 2, 2023 · 2874ae3 · 2874ae3
1 parent a7fe21f
commit 2874ae3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/src/pages/components/select/images/select-style-states-fixed.png b/src/pages/components/select/images/select-style-states-fixed.png
diff --git a/src/pages/components/select/images/select-style-states-fluid.png b/src/pages/components/select/images/select-style-states-fluid.png
diff --git a/src/pages/components/select/style.mdx b/src/pages/components/select/style.mdx
@@ -47,27 +47,34 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive states
 
-| State    | Element         | Property         | Color token         |
-| -------- | --------------- | ---------------- | ------------------- |
-| Hover    | Field           | background-color | `$field-hover` \*   |
-| Focus    | Field           | border           | `$focus`            |
-| Invalid  | Field           | border           | `$support-error`    |
-|          | Error message   | text-color       | `$text-error`       |
-|          | Error icon      | fill             | `$support-error`    |
-| Warning  | Warning message | text-color       | `$text-primary`     |
-|          | Warning icon    | fill             | `$support-warning`  |
-| Disabled | Field           | background-color | `$field` \*         |
-|          | Input text      | text-color       | `$text-disabled     |
-|          | Field           | border-bottom    | transparent         |
-|          | Field (fluid)   | border-bottom    | `$border-subtle` \* |
-|          | Label           | text-color       | `$text-disabled`    |
-|          | Chevron icon    | fill             | `$icon-disabled`    |
+| State     | Element         | Property                   | Color token         |
+| --------- | --------------- | -------------------------- | ------------------- |
+| Hover     | Field           | background-color           | `$field-hover` \*   |
+| Focus     | Field           | border                     | `$focus`            |
+| Invalid   | Field           | border                     | `$support-error`    |
+|           | Error message   | text-color                 | `$text-error`       |
+|           | Error icon      | fill                       | `$support-error`    |
+| Warning   | Warning message | text-color                 | `$text-primary`     |
+|           | Warning icon    | fill                       | `$support-warning`  |
+| Disabled  | Field           | background-color           | `$field` \*         |
+|           |                 | border-bottom (default)    | transparent         |
+|           |                 | border-bottom (fluid)      | `$border-subtle` \* |
+|           | Label           | text-color                 | `$text-disabled`    |
+|           | Input text      | text-color                 | `$text-disabled     |
+|           | Chevron icon    | fill                       | `$icon-disabled`    |
+| Read-only | Field           | background-color (default) | transparent         |
+|           |                 | background-color (fluid)   | `$layer` \*         |
+|           |                 | border-bottom              | `$border-subtle` \* |
+|           | Label           | text-color                 | `$text-secondary`   |
+|           | Input text      | text-color (default)       | `$text-primary`     |
+|           |                 | text-color (fluid)         | `$text-secondary`   |
+|           | Chevron icon    | fill                       | `$icon-disabled`    |
 
 - Denotes a contextual color token that will change values based on the layer it
   is placed on.
 
 <Row>
-<Column colLg={12}>
+<Column colLg={8}>
 
 <Tabs>