Skip to content

Commit

Permalink
docs: v11 color token updates for notification (carbon-design-system#…
Browse files Browse the repository at this point in the history 
…2345)

* docs: v11 color token updates for notification

* Update style.mdx

* combined tables

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@aagonzales @kodiakhq @emyarod
2 people authored and emyarod committed Jun 8, 2021
1 parent ff094bc commit 2971bcf
Showing 1 changed file with 55 additions and 107 deletions.
162 changes: 55 additions & 107 deletions src/pages/components/notification/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,51 +14,25 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

<Caption>Low contrast notifications in the White theme</Caption>

| Class | Property | Color token |
| --------------------------------------------------------------------------------------- | ---------- | ----------- |
| `.bx--inline-notification__title` <br /> `.bx--toast-notification__title` | text color | `$text-01` |
| `.bx--inline-notification__subtitle` <br /> `.bx--toast-notification__subtitle` | text color | `$text-01` |
| `.bx--inline-notification__close-button` <br /> `.bx--toast-notification__close-button` | fill | `$icon-01` |
| `.bx--inline-notification__action-button` | text color | `$link-01` |
| Element | Property | Color token |
| ---------------- | ----------------------- | ----------- |
| Title | text color | `$text-primary` |
| Subtitle | text color | `$text-primary` |
| Close button | fill | `$icon-primary` |
| Action button | text color | `$link-primary` |
| Error | background-color | `$notification-error-background-color` |
| | border-left | `$support-error` |
| | svg | `$support-error` |
| Success | background-color. | `$notification-success-background-color` |
| | border-left | `$support-success` |
| | svg | `$support-success` |
| Warning | background-color | `$notification-warning-background-color` |
| | border-left | `$support-warning` |
| | svg | `$support-warning` |
| Information | background-color | `$notification-info-background-color` |
| | border-left | `$support-info` |
| | svg | `$support-info` |

<br />

<Title> Error — low contrast </Title>

| Class | Property | Color token |
| --------------------- | ---------------- | -------------------------------------- |
| `notification--error` | background-color | `$notification-error-background-color` |
| `notification--error` | border-left | `$support-01` |
| `svg.error--filled` | fill | `$support-01` |

<br />

<Title> Success — low contrast </Title>

| Class | Property | Color token |
| ----------------------- | ---------------- | ---------------------------------------- |
| `notification--success` | background-color | `$notification-success-background-color` |
| `notification--success` | border-left | `$support-02` |
| `svg.checkmark-filled` | fill | `$support-02` |

<br />

<Title> Warning — low contrast </Title>

| Class | Property | Color token |
| ----------------------- | ---------------- | ---------------------------------------- |
| `notification--warning` | background-color | `$notification-warning-background-color` |
| `notification--warning` | border-left | `$support-03` |
| `svg.warning-filled` | fill | `$support-03` |

<br />

<Title> Info — low contrast </Title>

| Class | Property | Color token |
| -------------------- | ---------------- | ------------------------------------- |
| `notification--info` | background-color | `$notification-info-background-color` |
| `notification--info` | border-left | `$support-04` |

### High contrast

Expand All @@ -68,73 +42,47 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

<br />

| Class | Property | Color token |
| --------------------------------------------------------------------------------------- | ---------------- | ------------- |
| `.bx--inline-notification__title` <br /> `.bx--toast-notification__title` | text color | `$inverse-01` |
| `.bx--inline-notification__subtitle` <br /> `.bx--toast-notification__subtitle` | text color | `$inverse-01` |
| `.bx--inline-notification__close-button` <br /> `.bx--toast-notification__close-button` | fill | `$inverse-01` |
| `.bx--inline-notification` <br /> `.bx--toast-notification` | background-color | `$inverse-02` |

<br />

<Title> Error — high contrast </Title>

| Class | Property | Color token |
| --------------------- | ----------- | --------------------- |
| `notification--error` | border-left | `$inverse-support-01` |
| `svg.error--filled` | fill | `$inverse-support-01` |

<br />

<Title> Success — high contrast </Title>

| Class | Property | Color token |
| ----------------------- | ----------- | --------------------- |
| `notification--success` | border-left | `$inverse-support-02` |
| `svg.checkmark-filled` | fill | `$inverse-support-02` |

<br />

<Title> Warning — high contrast </Title>

| Class | Property | Color token |
| ----------------------- | ----------- | --------------------- |
| `notification--warning` | border-left | `$inverse-support-03` |
| `svg.warning-filled` | fill | `$inverse-support-03` |

<br />

<Title> Info — high contrast </Title>

| Class | Property | Color token |
| -------------------- | ----------- | --------------------- |
| `notification--info` | border-left | `$inverse-support-04` |
| Element | Property | Color token |
| --------------------- | ---------- | ----------- |
| Title | text color | `$text-inverse` |
| Subtitle | text color | `$text-inverse` |
| Close button | fill | `$icon-inverse` |
| Action button | text color | `$link-inverse` |
| Background | background-color | `$background-inverse` |
| Error | border-left | `$support-error-inverse` |
| | svg | `$support-error-inverse` |
| Success | border-left | `$support-success-inverse` |
| | svg | `$support-success-inverse` |
| Warning | border-left | `$support-warning-inverse` |
| | svg | `$support-warning-inverse` |
| Information | border-left | `$support-info-inverse` |
| | svg | `$support-info-inverse` |

## Typography

Notification text should be set in sentence case with only the first word
capitalized. Notification titles should be concise and to the point.

| Class | Font-size (px/rem) | Font-weight | Type token |
| ------------------------------------------------------------------------------ | ------------------ | -------------- | ---------------- | --- |
| `.bx--toast-notification__title` <br/> `.bx--inline-notification__title` | 14 / 0.875 | SemiBold / 600 | `$heading-01` |
| `.bx--toast-notification__subtitle` <br/> `.bx--inline-notification__subtitle` | 14 / 0.875 | Regular / 400 | `$body-short-01` | |
| Element | Font-size (px/rem) | Font-weight | Type token |
| ------------------------------------------------------------------------------ | ------------------ | -------------- | ---------------- |
| Title | 14 / 0.875 | SemiBold / 600 | `$heading-01` |
| Subtitle | 14 / 0.875 | Regular / 400 | `$body-short-01` |

## Structure

### Toast notification

| Property | Property | px / rem | Spacing token |
| Element | Property | px / rem | Spacing token |
| ---------------------------------------- | ------------------------ | -------- | ------------- |
| `.bx--toast-notification` | width | 288 / 18 | – |
| `.bx--toast-notification` | border-left | 3px | – |
| `.bx--toast-notification` | padding-right | 16 / 1 | `$spacing-05` |
| `.bx--toast-notification__title` | margin-top | 16 / 1 | `$spacing-05` |
| `.bx--toast-notification__subtitle` | margin-bottom | 24 / 1.5 | `$spacing-06` |
| `.bx--toast-notification__details` | padding-right | 16 / 1 | `$spacing-05` |
| `.bx--toast-notification__caption` | margin-bottom | 16 / 1 | `$spacing-05` |
| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |
| `close-icon` | margin-top, margin-right | 16 / 1 | `$spacing-05` |
| Notification | width | 288 / 18 | – |
| | border-left | 3px | – |
| | padding-right | 16 / 1 | `$spacing-05` |
| Title | margin-top | 16 / 1 | `$spacing-05` |
| Subtitle | margin-bottom | 24 / 1.5 | `$spacing-06` |
| Details | padding-right | 16 / 1 | `$spacing-05` |
| Caption | margin-bottom | 16 / 1 | `$spacing-05` |
| Close button | height, width | 48 / 3 | – |
| Close icon | margin-top, margin-right | 16 / 1 | `$spacing-05` |

<div className="image--fixed">

Expand All @@ -150,15 +98,15 @@ capitalized. Notification titles should be concise and to the point.

The width of an _inline notification_ will vary based on content or layout.

| Property | Property | px / rem | Spacing token |
| Element | Property | px / rem | Spacing token |
| ---------------------------------------- | --------------------------- | --------- | ------------- |
| `.bx--inline-notification` | min-height | 48 / 3 | `$spacing-09` |
| `.bx--inline-notification` | border-left | 3px | – |
| `.bx--inline-notification__details` | margin-left, margin-right | 16 / 1 | `$spacing-05` |
| `.bx--inline-notification__text-wrapper` | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |
| `.bx--inline-notification__icon` | margin-right | 16 / 1 | `$spacing-05` |
| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |
| `close-icon` | icon size | 16 x 16 | – |
| Inline notification | min-height | 48 / 3 | `$spacing-09` |
| | border-left | 3px | – |
| Details | margin-left, margin-right | 16 / 1 | `$spacing-05` |
| Text-wrapper | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |
| Icon | margin-right | 16 / 1 | `$spacing-05` |
| Close button | height, width | 48 / 3 | – |
| Close icon | icon size | 16 x 16 | – |

<div className="image--fixed">

Expand Down

0 comments on commit 2971bcf

Please sign in to comment.