Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: v11 color token updates for dropdown component #2333

Merged
merged 4 commits into from
May 24, 2021
Merged

docs: v11 color token updates for dropdown component #2333

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ddd6fc
docs: v11 color token updates for dropdown component
laurenmrice May 20, 2021
eae9d47
Update style.mdx
laurenmrice May 20, 2021
3a74dcb
fix: color tokens
laurenmrice May 21, 2021
ba82452
Merge branch 'v11' into laurenmrice-patch-5
kodiakhq[bot] May 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 83 additions & 94 deletions src/pages/components/dropdown/style.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,22 @@ 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.

| Element | Property | Color token |
| ------------------ | ---------------- | ---------------------------- |
| Label | text color | `$text-02` |
| Field text | text color | `$text-01` |
| Field text: prompt | text color | `$text-05` |
| Helper text | text color | `$text-05` |
| Field | background-color | `$field-01` |
| | border-bottom | `$ui-04` |
| Field: light | background-color | `$field-02` |
| Chevron | svg | `$icon-01` |
| Menu option | text color | `$text-02` |
| | background-color | `$field-01` |
| | border-top | `$ui-03` |
| Menu option: light | background-color | `$field-02` |
| Label | text-color | `$text-secondary` |
| Field text | text-color | `$text-primary` |
| Field text: prompt | text-color | `$text-helper` |
| Helper text | text-color | `$text-helper` |
| Field | background-color | `$field` |
| | border-bottom | `$border-strong` |
| Chevron icon | svg | `$icon-primary` |
| Menu option | text-color | `$text-secondary` |
| | background-color | `$field` |
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved
| | border-top | `$border-subtle` |
| Menu | box-shadow | `0 2px 6px 0 rgba(0,0,0,.2)` |
| Checkbox | background-color | `$icon-01` |
| | check | `$inverse-01` |
| | border | `$icon-01` |
| Checkbox icon | background-color | `$icon-primary` |
| | check | `$icon-inverse` |
| | border | `$icon-primary` |

<Row>
<Column colLg={12}>
Expand All @@ -45,29 +39,26 @@ input color is `$field-02` and is used on `$ui-01` page backgrounds.

### Interactive states

| State | Element | Property | Color token |
| -------------- | ------------------ | ---------------- | -------------------- |
| Focus | Field | border | `$focus` |
| Hover | Field | background-color | `$hover-ui` |
| | Menu option | background-color | `$hover-ui` |
| | Menu option | text color | `$text-01` |
| | Field: light | background-color | `$hover-light-ui` |
| | Menu option: light | background-color | `$hover-light-ui` |
| Invalid | Error icon | svg | `$support-01` |
| | Field | border | `$support-01` |
| | Error message | text-color | `$text-error` |
| Warning | Warning message | text-color | `$text-01` |
| | Warning icon | svg | `$support-03` |
| Active | Menu option | background-color | `$selected-ui` |
| | Menu option: light | background-color | `$selected-light-ui` |
| Selected | Menu option | background-color | `$selected-ui` |
| | Menu option | checkmark | `$icon-01` |
| Multi-selected | Tag | background-color | `$inverse-02` |
| | Tag | text color | `$inverse-02` |
| Disabled | Field | background-color | `$disabled-01` |
| | Field | text color | `$disabled-02` |
| | Label | text color | `$disabled-02` |
| | Chevron | svg | `$disabled-02` |
| State | Element | Property | Color token |
| -------------- | --------------- | ---------------- | --------------------- |
| Focus | Field | border | `$focus` |
| Hover | Field | background-color | `$layer-hover` |
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved
| | Menu option | background-color | `$layer-hover` |
| | Menu option | text-color | `$text-primary` |
| Invalid | Error icon | svg | `$support-error` |
| | Field | border | `$support-error` |
| | Error message | text-color | `$text-error` |
| Warning | Warning message | text-color | `$text-primary` |
| | Warning icon | svg | `$support-warning` |
| Active | Menu option | background-color | `$layer-selected` |
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved
| Selected | Menu option | background-color | `$layer-selected` |
| | Menu option | checkmark | `$icon-primary` |
| Multi-selected | Tag | background-color | `$background-inverse` |
| | Tag | text-color | `$text-inverse` |
| Disabled | Field | background-color | `$field-disabled` |
| | Field | text-color | `$text-disabled` |
| | Label | text-color | `$text-disabled` |
| | Chevron icon | svg | `$icon-disabled` |

<Row>
<Column colLg={12}>
Expand All @@ -91,25 +82,23 @@ input color is `$field-02` and is used on `$ui-01` page backgrounds.

### Inline dropdown

| Element | State | Property | Color token |
| -------- | ------------------ | ---------------- | -------------------- |
| Enabled | Field | background-color | `transparent` |
| | Field text | text color | `$text-01` |
| | Chevron | svg | `$icon-01` |
| | Menu option | text color | `$text-02` |
| | Menu option | background-color | `$field-01` |
| | Menu option: light | background-color | `$field-02` |
| Hover | Field | background-color | `$hover-ui` |
| | Menu option | background-color | `$hover-ui` |
| | Menu option | text color | `$text-01` |
| | Menu option: light | background-color | `$hover-light-ui` |
| Active | Menu option | background-color | `$selected-ui` |
| | Menu option: light | background-color | `$selected-light-ui` |
| Selected | Menu option | background-color | `$selected-ui` |
| | Menu option | checkmark | `$icon-01` |
| Invalid | Error icon | svg | `$support-01` |
| | Field | border | `$support-01` |
| | Error message | text-color | `$text-error` |
| State | Element | Property | Color token |
| -------- | ------------- | ---------------- | ---------------------- |
| Enabled | Field | background-color | `transparent` |
| | Field text | text-color | `$text-primary` |
| | Chevron icon | svg | `$icon-primary` |
| | Menu option | text-color | `$text-secondary` |
| | Menu option | background-color | `$field` |
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved
| Hover | Field | background-color | `$background-hover` |
| | Menu option | background-color | `$background-hover` |
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved
| | Menu option | text-color | `$text-primary` |
| Active | Menu option | background-color | `$background-selected` |
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved
| Selected | Menu option | background-color | `$background-selected` |
laurenmrice marked this conversation as resolved.
Show resolved Hide resolved
| | Menu option | checkmark | `$icon-primary` |
| Invalid | Field | border | `$support-error` |
| | Error message | text-color | `$text-error` |
| | Error icon | svg | `$support-error` |


<Row>
<Column colLg={12}>
Expand All @@ -127,8 +116,8 @@ All dropdown text should be set in sentence case, with only the first word in a
phrase and any proper nouns capitalized. Dropdown options should not exceed
three words.

| Class | Font-size | Font-weight | Type style |
| ---------------- | ---------- | ------------- | ----------------- |
| Element | Font-size | Font-weight | Type token |
| ---------------- | ---------- | ------------- | ------------------|
| Label | 12 / 0.75 | Regular / 400 | `$label-01` |
| Field text | 14 / 0.875 | Regular / 400 | `$body-short-01` |
| Menu option text | 14 / 0.875 | Regular / 400 | `$body-short-01` |
Expand All @@ -143,15 +132,15 @@ height of a closed dropdown stays consistent while the height of an open
dropdown will vary based on the amount of options it has. Please note the
various color differences for closed and open dropdowns.

| Element | Property | px / rem | Spacing tokens |
| ----------- | --------------------------- | -------- | -------------- |
| Label | margin-bottom | 8 / 0.5 | `$spacing-03` |
| Field | padding-left | 16 / 1 | `$spacing-05` |
| | padding-right | 48 / 3 | `$spacing-09` |
| | border-bottom | 1px | – |
| Chevron | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Helper text | margin-top | 4 / 0.25 | `$spacing-02` |
| State icon | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Element | Property | px / rem | Spacing token |
| ------------ | --------------------------- | -------- | ------------- |
| Label | margin-bottom | 8 / 0.5 | `$spacing-03` |
| Field | padding-left | 16 / 1 | `$spacing-05` |
| | padding-right | 48 / 3 | `$spacing-09` |
| | border-bottom | 1px | – |
| Chevron icon | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Helper text | margin-top | 4 / 0.25 | `$spacing-02` |
| State icon | padding-right, padding-left | 16 / 1 | `$spacing-05` |

<div className="image--fixed">

Expand Down Expand Up @@ -185,13 +174,13 @@ can be applied to all variants of dropdown.

### Combo box

| Element | Property | px / rem | Spacing token |
| ---------- | ------------- | -------- | ------------- |
| Label | margin-bottom | 8 / 0.5 | `$spacing-03` |
| Field | padding-left | 16 / 1 | `$spacing-05` |
| | padding-right | 72 / 4.5 | – |
| Chevron | padding-right | 16 / 1 | `$spacing-05` |
| Clear icon | padding-right | 8 / .5 | `$spacing-03` |
| Element | Property | px / rem | Spacing token |
| ------------ | ------------- | -------- | ------------- |
| Label | margin-bottom | 8 / 0.5 | `$spacing-03` |
| Field | padding-left | 16 / 1 | `$spacing-05` |
| | padding-right | 72 / 4.5 | – |
| Chevron icon | padding-right | 16 / 1 | `$spacing-05` |
| Clear icon | padding-right | 8 / 0.5 | `$spacing-03` |

<div className="image--fixed">

Expand All @@ -203,16 +192,16 @@ can be applied to all variants of dropdown.

### Multiselect dropdown

| Element | Property | px / rem | Spacing tokens |
| -------- | --------------------------- | -------- | -------------- |
| Label | margin-bottom | 8 / 0.5 | `$spacing-03` |
| Field | padding-left | 16 / 1 | `$spacing-05` |
| | padding-right | 48 / 3 | `$spacing-09` |
| Chevron | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| Tag | height | 24 / 1.5 | – |
| | padding-right | 8 / .5 | `$spacing-03` |
| Checkbox | padding-left | 16 / 1 | `$spacing-05` |
| | padding-right | 8 / .5 | `$spacing-03` |
| Element | Property | px / rem | Spacing token |
| ------------- | --------------------------- | -------- | ------------- |
| Label | margin-bottom | 8 / 0.5 | `$spacing-03` |
| Field | padding-left | 16 / 1 | `$spacing-05` |
| | padding-right | 48 / 3 | `$spacing-09` |
| Chevron icon | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| Tag | height | 24 / 1.5 | – |
| | padding-right | 8 / 0.5 | `$spacing-03` |
| Checkbox icon | padding-left | 16 / 1 | `$spacing-05` |
| | padding-right | 8 / 0.5 | `$spacing-03` |

<div className="image--fixed">

Expand All @@ -226,11 +215,11 @@ can be applied to all variants of dropdown.

### Inline dropdown

| Class | Property | px / rem | Spacing token |
| ----------- | --------------------------- | -------- | ------------- |
| Field text | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Menu option | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Chevron | padding-left | 16 / 1 | `$spacing-05` |
| Element | Property | px / rem | Spacing token |
| ------------ | --------------------------- | -------- | ------------- |
| Field text | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Menu option | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Chevron icon | padding-left | 16 / 1 | `$spacing-05` |

<div className="image--fixed">

Expand Down