Skip to content

Commit

Permalink
v11 color token updates for select component (carbon-design-system#2341)
Browse files Browse the repository at this point in the history
* v11 color token updates for select component

This PR updates the color tokens on the Style tab for the select component.

* change background to field

changed background to fields and deleted light variant

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
kingtraceyj and kodiakhq[bot] authored May 24, 2021
1 parent be26084 commit 4fbca36
Showing 1 changed file with 15 additions and 16 deletions.
31 changes: 15 additions & 16 deletions src/pages/components/select/style.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,14 @@ 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 toke |
| --------------------- | ---------- | ----------- |
| `.bx--select-input` | background | `$field-01` |
| `.bx--select--light` | background | `$field-02` |
| `.bx--select--inline` | background | transparent |
| `.bx--label` | text color | `$text-01` |
| `.bx--select-input` | text color | `$text-01` |
| `.bx--select--inline` | text color | `$icon-01` |
| `.bx--select__arrow` | fill | `$icon-01` |
| Class | Property | Color token |
| --------------------- | ---------- | --------------------------- |
| `.bx--select-input` | background | `$field` |
| `.bx--select--inline` | background | transparent |
| `.bx--label` | text color | `$text-primary` |
| `.bx--select-input` | text color | `$text-primary` |
| `.bx--select--inline` | text color | `$icon-primary` |
| `.bx--select__arrow` | fill | `$icon-primary` |

<div className="image--fixed">

Expand All @@ -32,13 +31,13 @@ input color is `$field-02` and is used on `$ui-01` page backgrounds.

### Interaction states

| Class | Property | Color token |
| --------------------------------- | ---------- | -------------- |
| `.bx--select-input:focus` | border | `$focus` |
| `.bx--select-input[data-invalid]` | border | `$support-01` |
| `.bx--form-requirement` | text color | `$support-01` |
| `.bx--select-input:disabled` | background | `$disabled-01` |
| `.bx--select-input:disabled` | text color | `$disabled-02` |
| Class | Property | Color token |
| --------------------------------- | ---------- | ---------------------- |
| `.bx--select-input:focus` | border | `$focus` |
| `.bx--select-input[data-invalid]` | border | `$support-error` |
| `.bx--form-requirement` | text color | `$support-error` |
| `.bx--select-input:disabled` | background | `$field-disabled` |
| `.bx--select-input:disabled` | text color | `$text-disabled` |

**Open:** Style determined by browser

Expand Down

0 comments on commit 4fbca36

Please sign in to comment.