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 date picker component #2330

Merged
merged 7 commits into from
May 21, 2021
Merged

docs: v11 color token updates for date picker component #2330

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
650509c
docs: v11 color token updates for date picker component
laurenmrice May 19, 2021
b25aacb
update: column header text and today token
laurenmrice May 20, 2021
9059411
chore: format
emyarod May 21, 2021
70e833c
Update src/pages/components/date-picker/style.mdx
laurenmrice May 21, 2021
d90d8aa
Merge branch 'v11' into laurenmrice-patch-2
laurenmrice May 21, 2021
3857df6
Merge branch 'v11' into laurenmrice-patch-2
laurenmrice May 21, 2021
023cd38
Merge branch 'v11' into laurenmrice-patch-2
kodiakhq[bot] May 21, 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
136 changes: 70 additions & 66 deletions src/pages/components/date-picker/style.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,38 +8,35 @@ 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.

### Date input

| Class | Property | Color token |
| -------------------------------------------------------- | ---------------- | ----------- |
| `.bx--label` | text color | `$text-02` |
| `.bx--date-picker__input` | background-color | `$field-01` |
| `.bx--date-picker__input` <br/> `.bx--text-input--light` | background-color | `$field-02` |
| `.bx--date-picker__input` | border-bottom | `$ui-04` |
| `.bx--date-picker__input` | text color | `$text-01` |
| `:placeholder` | text color | `$text-05` |
| `.bx--date-picker__icon` | color | `$icon-01` |
| Element | Property | Color token |
| ------------------ | ---------------- | ----------------- |
| Label | text-color | `$text-secondary` |
| Field | background-color | `$field` |
| | border-bottom | `$border-strong` |
| Field text | text-color | `$text-primary` |
| Field text: prompt | text-color | `$text-helper` |
| Calendar icon | svg | `$icon-primary` |

<br />

#### Interactive states

<br />

| Class | Property | Color token |
| --------------------------- | ---------------- | -------------- |
| `input:focus` | border | `$focus` |
| `input[data-invalid]` | border-bottom | `$support-01` |
| `.bx--form-requirement` | text color | `$support-01` |
| `input[data-invalid]:focus` | border-bottom | `$support-01` |
| `.bx--label:disabled` | text color | `$disabled-02` |
| `input:disabled` | background-color | `$disabled-01` |
| `input:disabled` | text color | `$disabled-02` |
| `icon:disabled` | color | `$disabled-02` |
| State | Element | Property | Color token |
| -------- | --------------- | ---------------- | ------------------ |
| Focus | Field | border | `$focus` |
| Invalid | Field | border | `$support-error` |
| | Error message | text-color | `$text-error` |
| | Error icon | svg | `$support-error` |
| Warning | Warning message | text-color | `$text-primary` |
| | Warning icon | svg | `$support-warning` |
| Disabled | Label | text-color | `$text-disabled` |
| | Field | background-color | `$field-disabled` |
| | Field text | text-color | `$text-disabled` |
| | Calendar icon | svg | `$icon-disabled` |

<Row>
<Column colLg={8}>
Expand All @@ -62,20 +59,22 @@ while invalid.

### Calendar menu

| Class | Property | Color token |
| ------------------ | ---------------- | ------------------------------------------ |
| `calendar` | background-color | `$ui-01` |
| `calendar` | box-shadow | `0 12px 24px 0` <br/> `rgba(0, 0, 0, 0.1)` |
| `today` | background-color | `$interactive-01` |
| `day` | text color | `$text-01` |
| `day.selected` | text color | `$text-04` |
| `day.selected` | background-color | `$interactive-01` |
| `day.inRange` | text color | `$interactive-01` |
| `day.endRange` | border | `$interactive-01` |
| `day.nextMonthDay` | text color | `$text-02` |
| `day:focus` | border | `$focus` |
| `day:hover` | background-color | `$hover-ui` |
| `day:disabled` | text color | `$text-02` |
| Element | Property | Color token |
| ------------------- | ---------------- | -------------------------------- |
| Calendar | background-color | `$layer` |
| Calendar menu | box-shadow | `0 2px 6px 0 rgba(0, 0, 0, 0.2)` |
| Today | text-color | `$link-01` |
| Day | text-color | `$text-primary` |
| Day: hover | background-color | `$layer-hover` |
| Day: focus | border | `$focus` |
| Day: selected | text-color | `$text-on-color` |
| | background-color | `$background-brand` |
| Day: disabled | text-color | `$text-disabled` |
| Day: in range | text-color | `$text-primary` |
| | background-color | `$highlight` |
| Day: end range | text-color | `$text-primary` |
| | border | `$focus` |
| Day: next month day | text-color | `$text-secondary` |

<Row>
<Column colLg={12}>
Expand All @@ -95,26 +94,23 @@ while invalid.
Labels should be set in sentence case, with only the first word in a phrase and
any proper nouns capitalized, and no more than three words.

| Class | Font-size | Font-weight | Type token |
| ------------------------- | ---------- | ------------- | ----------- |
| `.bx--label` | 14 / 0.875 | Regular / 400 | `$label-01` |
| `.bx--date-picker__input` | 14 / 0.875 | Regular / 400 | `$code-02` |
| `.bx--form-requirement` | 12 / 0.75 | Regular / 400 | `$label-01` |
| Element | Font-size | Font-weight | Type token |
| ------------- | ---------- | ------------- | ----------- |
| Label | 12 / 0.75 | Regular / 400 | `$label-01` |
| Field text | 14 / 0.875 | Regular / 400 | `$code-02` |
| Error message | 12 / 0.75 | Regular / 400 | `$label-01` |

## Structure

### Date inputs

The widths of the date inputs may vary based on the grid and layout.

| Class | Property | px / rem | Spacing token |
| ----------------------------- | --------------------------- | -------- | ------------- |
| `.bx--label` | padding-bottom | 8 / 0.5 | `$spacing-03` |
| `.bx--date-picker__input` | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| `.bx--date-picker__input` | border-bottom | 1px | - |
| `.bx--date-picker__input` | height | 40 / 2.5 | – |
| `.bx--date-picker__input--xl` | height | 48 / 3 | – |
| `.bx--date-picker__input--sm` | height | 32 / 2 | – |
| Element | Property | px / rem | Spacing token |
| ------- | --------------------------- | -------- | ------------- |
| Label | padding-bottom | 8 / 0.5 | `$spacing-03` |
| Field | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| | border-bottom | 1px | - |

<div className="image--fixed">

Expand All @@ -124,6 +120,14 @@ The widths of the date inputs may vary based on the grid and layout.

<Caption>Structure and spacing for date picker inputs | px / rem</Caption>

### Sizes

| Element | Property | Size | px / rem |
| ------- | -------- | ------- | -------- |
| Field | height | Small | 32 / 2 |
| | height | Default | 40 / 2.5 |
| | height | Large | 48 / 3 |

<div className="image--fixed">

![Sizes for date picker inputs](images/date-picker-style-5.png)
Expand All @@ -134,16 +138,16 @@ The widths of the date inputs may vary based on the grid and layout.

### Calendar menu

| Class | Property | px / rem | Spacing token |
| ---------------------------- | ---------------------------------------- | -------- | ------------- |
| `.bx--date-picker__calendar` | height | 336 / 21 | – |
| `.bx--date-picker__calendar` | width | 288 | – |
| `.bx--date-picker__calendar` | padding-top, padding-right, padding-left | 4 / 0.25 | `$spacing-02` |
| `.bx--date-picker__calendar` | padding-bottom | 8 / 0.5 | `$spacing-03` |
| `.bx--date-picker__icon` | height, width | 16 / 1 | – |
| `.bx--date-picker__icon` | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| `.today` dot | height & width | 4 /0.25 | – |
| `day` | height & width | 40 / 2.5 | – |
| Element | Property | px / rem | Spacing token |
| -------------- | ---------------------------------------- | -------- | ------------- |
| Calendar | height | 336 / 21 | – |
| | width | 288 / 18 | – |
| | padding-top, padding-right, padding-left | 4 / 0.25 | `$spacing-02` |
| | padding-bottom | 8 / 0.5 | `$spacing-03` |
| Calendar: icon | height, width | 16 / 1 | – |
| | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Day | height, width | 40 / 2.5 | – |
| Today: dot | height, width | 4 / 0.25 | – |

<div className="image--fixed">

Expand All @@ -168,12 +172,12 @@ There are two types of time pickers; a 12-hour and 24-hour time picker. The
24-hour clock is not. Refer to [select](/components/select/code) for inline
select styling.

| Class | Property | px / rem | Spacing token |
| ------------------------------- | --------------------------- | -------- | ------------- |
| `.bx--label` | padding-bottom | 8 / 0.5 | `$spacing-03` |
| `.bx--time-picker__input-field` | height | 40 / 2.5 | - |
| `.bx--time-picker__input-field` | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| `.bx--select-input` | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Element | Property | px / rem | Spacing token |
| ------- | --------------------------- | -------- | ------------- |
| Label | padding-bottom | 8 / 0.5 | `$spacing-03` |
| Field | height | 40 / 2.5 | - |
| | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Select | padding-right, padding-left | 16 / 1 | `$spacing-05` |

<div className="image--fixed">

Expand Down