diff --git a/packages/components/src/components/notification/README.md b/packages/components/src/components/notification/README.md index 29a03ebb8ef1..0a99ae882843 100644 --- a/packages/components/src/components/notification/README.md +++ b/packages/components/src/components/notification/README.md @@ -11,21 +11,23 @@ Use these modifiers with `.bx--inline-notification` class. -| Selector | Description | -| ----------------------------------- | -------------------------------------- | -| `.bx--inline-notification--error` | Apply error color to border and icon | -| `.bx--inline-notification--success` | Apply success color to border and icon | -| `.bx--inline-notification--info` | Apply info color to border and icon | -| `.bx--inline-notification--warning` | Apply warning color to border and icon | +| Selector | Description | +| ---------------------------------------- | -------------------------------------------------------------- | +| `.bx--inline-notification--low-contrast` | Use low contrast variant (The color scheme used until `v10.2`) | +| `.bx--inline-notification--error` | Apply error color to border and icon | +| `.bx--inline-notification--success` | Apply success color to border and icon | +| `.bx--inline-notification--info` | Apply info color to border and icon | +| `.bx--inline-notification--warning` | Apply warning color to border and icon | Use these modifiers with `.bx--toast-notification` class. -| Selector | Description | -| ---------------------------------- | ---------------------------------- | -| `.bx--toast-notification--error` | Apply error color on left border | -| `.bx--toast-notification--success` | Apply success color on left border | -| `.bx--toast-notification--info` | Apply info color on left border | -| `.bx--toast-notification--warning` | Apply warning color on left border | +| Selector | Description | +| --------------------------------------- | -------------------------------------------------------------- | +| `.bx--toast-notification--low-contrast` | Use low contrast variant (The color scheme used until `v10.2`) | +| `.bx--toast-notification--error` | Apply error color on left border | +| `.bx--toast-notification--success` | Apply success color on left border | +| `.bx--toast-notification--info` | Apply info color on left border | +| `.bx--toast-notification--warning` | Apply warning color on left border | ### JavaScript diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss index fc9df9556b4f..7c6c8a9b0363 100644 --- a/packages/components/src/components/notification/_inline-notification.scss +++ b/packages/components/src/components/notification/_inline-notification.scss @@ -30,10 +30,9 @@ min-height: rem(48px); min-width: rem(288px); max-width: rem(288px); - color: $text-01; + color: $inverse-01; margin-top: $carbon--spacing-05; margin-bottom: $carbon--spacing-05; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); @include carbon--breakpoint(md) { max-width: rem(608px); @@ -48,7 +47,16 @@ } } + .#{$prefix}--inline-notification--low-contrast { + color: $text-01; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); + } + .#{$prefix}--inline-notification--error { + @include notification--experimental($inverse-support-01, $inverse-02); + } + + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error { @include notification--experimental( $support-01, $notification-error-background-color @@ -56,6 +64,10 @@ } .#{$prefix}--inline-notification--success { + @include notification--experimental($inverse-support-02, $inverse-02); + } + + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success { @include notification--experimental( $support-02, $notification-success-background-color @@ -63,6 +75,10 @@ } .#{$prefix}--inline-notification--info { + @include notification--experimental($inverse-support-04, $inverse-02); + } + + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info { @include notification--experimental( $support-04, $notification-info-background-color @@ -74,6 +90,10 @@ } .#{$prefix}--inline-notification--warning { + @include notification--experimental($inverse-support-03, $inverse-02); + } + + .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning { @include notification--experimental( $support-03, $notification-warning-background-color @@ -136,9 +156,15 @@ .#{$prefix}--inline-notification__close-icon { height: 1rem; width: 1rem; - fill: $ui-05; + fill: $inverse-01; } } + + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__close-button + .#{$prefix}--inline-notification__close-icon { + fill: $ui-05; + } } @include exports('inline-notifications') { diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss index c230eb0eaf4f..346ccb84035d 100644 --- a/packages/components/src/components/notification/_toast-notification.scss +++ b/packages/components/src/components/notification/_toast-notification.scss @@ -28,7 +28,7 @@ width: rem(288px); height: auto; padding-left: $carbon--spacing-05; - color: $text-01; + color: $inverse-01; margin-top: $carbon--spacing-03; margin-bottom: $carbon--spacing-03; margin-right: $carbon--spacing-05; @@ -43,7 +43,15 @@ } } + .#{$prefix}--toast-notification--low-contrast { + color: $text-01; + } + .#{$prefix}--toast-notification--error { + @include notification--experimental($inverse-support-01, $inverse-02); + } + + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error { @include notification--experimental( $support-01, $notification-error-background-color @@ -51,6 +59,10 @@ } .#{$prefix}--toast-notification--success { + @include notification--experimental($inverse-support-02, $inverse-02); + } + + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success { @include notification--experimental( $support-02, $notification-success-background-color @@ -58,6 +70,10 @@ } .#{$prefix}--toast-notification--info { + @include notification--experimental($inverse-support-04, $inverse-02); + } + + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info { @include notification--experimental( $support-04, $notification-info-background-color @@ -65,6 +81,10 @@ } .#{$prefix}--toast-notification--warning { + @include notification--experimental($inverse-support-03, $inverse-02); + } + + .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning { @include notification--experimental( $support-03, $notification-warning-background-color @@ -108,10 +128,16 @@ .#{$prefix}--toast-notification__close-icon { height: 1rem; width: 1rem; - fill: $ui-05; + fill: $inverse-01; } } + .#{$prefix}--toast-notification--low-contrast + .#{$prefix}--toast-notification__close-button + .#{$prefix}--toast-notification__close-icon { + fill: $ui-05; + } + .#{$prefix}--toast-notification__title { @include type-style('heading-01'); @@ -123,18 +149,28 @@ .#{$prefix}--toast-notification__subtitle { @include type-style('body-short-01'); - color: $text-01; + color: $inverse-01; margin-top: 0; margin-bottom: $carbon--spacing-06; word-break: break-word; } + .#{$prefix}--toast-notification--low-contrast + .#{$prefix}--toast-notification__subtitle { + color: $text-01; + } + .#{$prefix}--toast-notification__caption { @include type-style('body-short-01'); - color: $text-01; + color: $inverse-01; margin-bottom: $carbon--spacing-05; } + + .#{$prefix}--toast-notification--low-contrast + .#{$prefix}--toast-notification__caption { + color: $text-01; + } } @include exports('toast-notifications') { diff --git a/packages/components/src/components/notification/notification.config.js b/packages/components/src/components/notification/notification.config.js index a81328246dfc..49f68bf5b48c 100644 --- a/packages/components/src/components/notification/notification.config.js +++ b/packages/components/src/components/notification/notification.config.js @@ -52,6 +52,15 @@ module.exports = { items, }, }, + { + name: 'low-contrast', + label: 'Inline Notification (Low contrast)', + context: { + variant: 'inline', + lowContrast: true, + items, + }, + }, { name: 'toast', label: 'Toast Notification', @@ -65,5 +74,19 @@ module.exports = { items, }, }, + { + name: 'low-contrast', + label: 'Toast Notification (Low contrast)', + notes: ` + Toast notifications are typically passive, meaning they won't affect the user's workflow if not addressed. + Toast Notifications use 'kind' props to specify the kind of notification that should render + (error, info, success, warning). + `, + context: { + variant: 'toast', + lowContrast: true, + items, + }, + }, ], }; diff --git a/packages/components/src/components/notification/notification.hbs b/packages/components/src/components/notification/notification.hbs index ea0308c29927..40d370235011 100644 --- a/packages/components/src/components/notification/notification.hbs +++ b/packages/components/src/components/notification/notification.hbs @@ -6,7 +6,7 @@ --> {{#each items}} -