Skip to content

Commit

Permalink
docs: v11 color token updates for number input component (carbon-desi…
Browse files Browse the repository at this point in the history 
…gn-system#2317)

* docs(number-input): v11 color token updates

This PR updates the color tokens on the style tab for the number-input component.

* Update src/pages/components/number-input/style.mdx

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@johnbister @tw15egan
@kodiakhq @emyarod
3 people authored and emyarod committed May 21, 2021
1 parent 5043b45 commit c689da4
Showing 1 changed file with 20 additions and 22 deletions.
42 changes: 20 additions & 22 deletions src/pages/components/number-input/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,16 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

## Color

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--label` | text color | `$text-02` |
| `.bx--number input[type='number']` | text color | `$text-01` |
| `.bx--number` | background-color | `$field-01` |
| `.bx--number--light` | background-color | `$field-02` |
| `.bx--number` | border-bottom | `$ui-04` |
| `.bx--number__controls` | svg color | `$icon-01` |
Inputs come in two different colors. The default input color is `$field` and
is used on `$background` and `$overlay` page backgrounds.

| Class | Property | Color token |
| ---------------------------------- | ---------------- | ----------------- |
| `.bx--label` | text color | `$text-secondary` |
| `.bx--number input[type='number']` | text color | `$text-primary` |
| `.bx--number` | background-color | `$field` |
| `.bx--number` | border-bottom | `$border-strong` |
| `.bx--number__controls` | svg color | `$icon-primary` |

<div className="image--fixed">

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

### Interactive states

| Class | Property | Color token |
| ------------------------------------------- | ---------------- | -------------- |
| `.bx--number:focus` | border | `$focus` |
| `.bx--number__controls:focus` | border | `$focus` |
| `[data-invalid]` | border | `$support-01` |
| `[data-invalid]:focus` | color | `$support-01` |
| `.bx--form-requirement` | text color | `$support-01` |
| `.bx--label:disabled` | text color | `$disabled-02` |
| `.bx--number:disabled` | background-color | `$disabled-01` |
| `.bx--number input[type='number']:disabled` | text color | `$disabled-03` |
| Class | Property | Color token |
| ------------------------------------------- | ---------------- | ----------------- |
| `.bx--number:focus` | border | `$focus` |
| `.bx--number__controls:focus` | border | `$focus` |
| `[data-invalid]` | border | `$support-error` |
| `[data-invalid]:focus` | color | `$support-error` |
| `.bx--form-requirement` | text color | `$support-error` |
| `.bx--label:disabled` | text color | `$text-disabled` |
| `.bx--number:disabled` | background-color | `$field-disabled` |
| `.bx--number input[type='number']:disabled` | text color | `$text-disabled` |

**Active:** Number input should have a default number to start. The input should
never be empty.
Expand Down

0 comments on commit c689da4

Please sign in to comment.