{"componentChunkName":"component---src-pages-components-notification-style-mdx","path":"/components/notification/style/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/notification/style.mdx","titleType":"prepend","MdxNode":{"id":"da7d99a0-f7ec-57c9-b144-fa54fb8dfb0f","children":[],"parent":"dc05217c-9936-5737-9f12-576f0eb527cb","internal":{"content":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n### Low contrast\n\n\n\nLow contrast notifications in the White theme\n\n| Class | Property | Color token |\n| --------------------------------------------------------------------------------------- | ---------- | ----------- |\n| `.bx--inline-notification__title`
`.bx--toast-notification__title` | text color | `$text-01` |\n| `.bx--inline-notification__subtitle`
`.bx--toast-notification__subtitle` | text color | `$text-01` |\n| `.bx--inline-notification__close-button`
`.bx--toast-notification__close-button` | fill | `$icon-01` |\n| `.bx--inline-notification__action-button` | text color | `$link-01` |\n\n
\n\n#### Error — low contrast\n\n
\n\n| Class | Property | Color token |\n| --------------------- | ---------------- | -------------------------------------- |\n| `notification--error` | background-color | `$notification-error-background-color` |\n| `notification--error` | border-left | `$support-01` |\n| `svg.error--filled` | fill | `$support-01` |\n\n
\n\n#### Success — low contrast\n\n
\n\n| Class | Property | Color token |\n| ----------------------- | ---------------- | ---------------------------------------- |\n| `notification--success` | background-color | `$notification-success-background-color` |\n| `notification--success` | border-left | `$support-02` |\n| `svg.checkmark-filled` | fill | `$support-02` |\n\n
\n\n#### Warning — low contrast\n\n
\n\n| Class | Property | Color token |\n| ----------------------- | ---------------- | ---------------------------------------- |\n| `notification--warning` | background-color | `$notification-warning-background-color` |\n| `notification--warning` | border-left | `$support-03` |\n| `svg.warning-filled` | fill | `$support-03` |\n\n
\n\n#### Info — low contrast\n\n
\n\n| Class | Property | Color token |\n| -------------------- | ---------------- | ------------------------------------- |\n| `notification--info` | background-color | `$notification-info-background-color` |\n| `notification--info` | border-left | `$support-04` |\n\n### High contrast\n\n\n\nHigh contrast notifications in the White theme\n\n
\n\n| Class | Property | Color token |\n| --------------------------------------------------------------------------------------- | ---------------- | ------------- |\n| `.bx--inline-notification__title`
`.bx--toast-notification__title` | text color | `$inverse-01` |\n| `.bx--inline-notification__subtitle`
`.bx--toast-notification__subtitle` | text color | `$inverse-01` |\n| `.bx--inline-notification__close-button`
`.bx--toast-notification__close-button` | fill | `$inverse-01` |\n| `.bx--inline-notification`
`.bx--toast-notification` | background-color | `$inverse-02` |\n\n
\n\n#### Error — high contrast\n\n
\n\n| Class | Property | Color token |\n| --------------------- | ----------- | --------------------- |\n| `notification--error` | border-left | `$inverse-support-01` |\n| `svg.error--filled` | fill | `$inverse-support-01` |\n\n
\n\n#### Success — high contrast\n\n
\n\n| Class | Property | Color token |\n| ----------------------- | ----------- | --------------------- |\n| `notification--success` | border-left | `$inverse-support-02` |\n| `svg.checkmark-filled` | fill | `$inverse-support-02` |\n\n
\n\n#### Warning — high contrast\n\n
\n\n| Class | Property | Color token |\n| ----------------------- | ----------- | --------------------- |\n| `notification--warning` | border-left | `$inverse-support-03` |\n| `svg.warning-filled` | fill | `$inverse-support-03` |\n\n
\n\n#### Info — high contrast\n\n
\n\n| Class | Property | Color token |\n| -------------------- | ----------- | --------------------- |\n| `notification--info` | border-left | `$inverse-support-04` |\n\n## Typography\n\nNotification text should be set in sentence case with only the first word capitalized. Notification titles should be concise and to the point.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------------------------------------------------------------ | ------------------ | -------------- | ---------------- |\n| `.bx--toast-notification__title`
`.bx--inline-notification__title` | 14 / 0.875 | SemiBold / 600 | `$heading-03` |\n| `.bx--toast-notification__subtitle`
`.bx--inline-notification__subtitle` | 14 / 0.875 | Regular / 400 | `$body-short-01` | |\n\n## Structure\n\n### Toast notification\n\n| Property | Property | px / rem | Spacing token |\n| ---------------------------------------- | ------------------------ | -------- | ------------- |\n| `.bx--toast-notification` | width | 288 / 18 | – |\n| `.bx--toast-notification` | border-left | 3px | – |\n| `.bx--toast-notification` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__title` | margin-top | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__subtitle` | margin-bottom | 24 / 1.5 | `$spacing-06` |\n| `.bx--toast-notification__details` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__caption` | margin-bottom | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |\n| `close-icon` | margin-top, margin-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a toast notification | px / rem\n\n\n### Inline notification\n\nThe width of an _inline notification_ will vary based on content or layout.\n\n| Property | Property | px / rem | Spacing token |\n| ---------------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--inline-notification` | min-height | 48 / 3 | `$spacing-09` |\n| `.bx--inline-notification` | border-left | 3px | – |\n| `.bx--inline-notification__details` | margin-left, margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__text-wrapper` | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |\n| `.bx--inline-notification__icon` | margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |\n| `close-icon` | icon size | 16 x 16 | – |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a inline notification | px / rem\n\n","type":"Mdx","contentDigest":"324e2aba15b69b110bad8073db9feb12","counter":1490,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n### Low contrast\n\n\n\nLow contrast notifications in the White theme\n\n| Class | Property | Color token |\n| --------------------------------------------------------------------------------------- | ---------- | ----------- |\n| `.bx--inline-notification__title`
`.bx--toast-notification__title` | text color | `$text-01` |\n| `.bx--inline-notification__subtitle`
`.bx--toast-notification__subtitle` | text color | `$text-01` |\n| `.bx--inline-notification__close-button`
`.bx--toast-notification__close-button` | fill | `$icon-01` |\n| `.bx--inline-notification__action-button` | text color | `$link-01` |\n\n
\n\n#### Error — low contrast\n\n
\n\n| Class | Property | Color token |\n| --------------------- | ---------------- | -------------------------------------- |\n| `notification--error` | background-color | `$notification-error-background-color` |\n| `notification--error` | border-left | `$support-01` |\n| `svg.error--filled` | fill | `$support-01` |\n\n
\n\n#### Success — low contrast\n\n
\n\n| Class | Property | Color token |\n| ----------------------- | ---------------- | ---------------------------------------- |\n| `notification--success` | background-color | `$notification-success-background-color` |\n| `notification--success` | border-left | `$support-02` |\n| `svg.checkmark-filled` | fill | `$support-02` |\n\n
\n\n#### Warning — low contrast\n\n
\n\n| Class | Property | Color token |\n| ----------------------- | ---------------- | ---------------------------------------- |\n| `notification--warning` | background-color | `$notification-warning-background-color` |\n| `notification--warning` | border-left | `$support-03` |\n| `svg.warning-filled` | fill | `$support-03` |\n\n
\n\n#### Info — low contrast\n\n
\n\n| Class | Property | Color token |\n| -------------------- | ---------------- | ------------------------------------- |\n| `notification--info` | background-color | `$notification-info-background-color` |\n| `notification--info` | border-left | `$support-04` |\n\n### High contrast\n\n\n\nHigh contrast notifications in the White theme\n\n
\n\n| Class | Property | Color token |\n| --------------------------------------------------------------------------------------- | ---------------- | ------------- |\n| `.bx--inline-notification__title`
`.bx--toast-notification__title` | text color | `$inverse-01` |\n| `.bx--inline-notification__subtitle`
`.bx--toast-notification__subtitle` | text color | `$inverse-01` |\n| `.bx--inline-notification__close-button`
`.bx--toast-notification__close-button` | fill | `$inverse-01` |\n| `.bx--inline-notification`
`.bx--toast-notification` | background-color | `$inverse-02` |\n\n
\n\n#### Error — high contrast\n\n
\n\n| Class | Property | Color token |\n| --------------------- | ----------- | --------------------- |\n| `notification--error` | border-left | `$inverse-support-01` |\n| `svg.error--filled` | fill | `$inverse-support-01` |\n\n
\n\n#### Success — high contrast\n\n
\n\n| Class | Property | Color token |\n| ----------------------- | ----------- | --------------------- |\n| `notification--success` | border-left | `$inverse-support-02` |\n| `svg.checkmark-filled` | fill | `$inverse-support-02` |\n\n
\n\n#### Warning — high contrast\n\n
\n\n| Class | Property | Color token |\n| ----------------------- | ----------- | --------------------- |\n| `notification--warning` | border-left | `$inverse-support-03` |\n| `svg.warning-filled` | fill | `$inverse-support-03` |\n\n
\n\n#### Info — high contrast\n\n
\n\n| Class | Property | Color token |\n| -------------------- | ----------- | --------------------- |\n| `notification--info` | border-left | `$inverse-support-04` |\n\n## Typography\n\nNotification text should be set in sentence case with only the first word capitalized. Notification titles should be concise and to the point.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------------------------------------------------------------ | ------------------ | -------------- | ---------------- |\n| `.bx--toast-notification__title`
`.bx--inline-notification__title` | 14 / 0.875 | SemiBold / 600 | `$heading-03` |\n| `.bx--toast-notification__subtitle`
`.bx--inline-notification__subtitle` | 14 / 0.875 | Regular / 400 | `$body-short-01` | |\n\n## Structure\n\n### Toast notification\n\n| Property | Property | px / rem | Spacing token |\n| ---------------------------------------- | ------------------------ | -------- | ------------- |\n| `.bx--toast-notification` | width | 288 / 18 | – |\n| `.bx--toast-notification` | border-left | 3px | – |\n| `.bx--toast-notification` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__title` | margin-top | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__subtitle` | margin-bottom | 24 / 1.5 | `$spacing-06` |\n| `.bx--toast-notification__details` | padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--toast-notification__caption` | margin-bottom | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |\n| `close-icon` | margin-top, margin-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a toast notification | px / rem\n\n\n### Inline notification\n\nThe width of an _inline notification_ will vary based on content or layout.\n\n| Property | Property | px / rem | Spacing token |\n| ---------------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--inline-notification` | min-height | 48 / 3 | `$spacing-09` |\n| `.bx--inline-notification` | border-left | 3px | – |\n| `.bx--inline-notification__details` | margin-left, margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__text-wrapper` | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |\n| `.bx--inline-notification__icon` | margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--inline-notification__close-button` | height, width | 48 / 3 | – |\n| `close-icon` | icon size | 16 x 16 | – |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a inline notification | px / rem\n\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/notification/style.mdx"}}}}