feat(notification): support component tokens (#7808)

* feat(notification): use component tokens for inline-notification * feat(notification): use component tokens for toast-notification * chore(storybook): emit notification component tokens Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 17, 2021 · 36fcaaf · 36fcaaf
1 parent 7dd6a3f
commit 36fcaaf
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 34 deletions.
diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -12,9 +12,11 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/layout';
+@import '../../globals/scss/component-tokens';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../../globals/scss/css--reset';
 @import 'mixins';
+@import 'tokens';
 
 /// Inline notification styles
 /// @access private
@@ -78,8 +80,7 @@
   }
 
   .#{$prefix}--inline-notification--low-contrast {
-    // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
-    color: map-get($carbon--theme--white, 'text-01');
+    color: $text-01;
 
     &::before {
       position: absolute;
@@ -103,7 +104,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error {
     @include notification--experimental(
       $support-01,
-      $notification-error-background-color
+      get-token-value($notification-colors, 'notification-background-error')
     );
 
     &::before {
@@ -118,7 +119,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success {
     @include notification--experimental(
       $support-02,
-      $notification-success-background-color
+      get-token-value($notification-colors, 'notification-background-success')
     );
 
     &::before {
@@ -135,7 +136,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info-square {
     @include notification--experimental(
       $support-04,
-      $notification-info-background-color
+      get-token-value($notification-colors, 'notification-background-info')
     );
 
     &::before {
@@ -152,7 +153,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning-alt {
     @include notification--experimental(
       $support-03,
-      $notification-warning-background-color
+      get-token-value($notification-colors, 'notification-background-warning')
     );
 
     &::before {
@@ -205,13 +206,17 @@
     height: rem(32px);
     margin-bottom: $carbon--spacing-03;
     margin-left: $carbon--spacing-08;
-    color: $inverse-link;
 
     @include carbon--breakpoint(md) {
       margin: $carbon--spacing-03 0;
     }
   }
 
+  .#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast)
+    .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
+    color: $inverse-link;
+  }
+
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
     background-color: $inverse-hover-ui;
@@ -221,7 +226,10 @@
     .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
   .#{$prefix}--inline-notification--low-contrast
     .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
-    background-color: $carbon--white-0;
+    background-color: get-token-value(
+      $notification-colors,
+      'notification-action-hover'
+    );
   }
 
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus {
@@ -295,21 +303,7 @@
   .#{$prefix}--inline-notification--low-contrast
     .#{$prefix}--inline-notification__close-button
     .#{$prefix}--inline-notification__close-icon {
-    fill: map-get($carbon--theme--white, 'text-01');
-  }
-
-  .#{$prefix}--inline-notification--low-contrast
-    .#{$prefix}--inline-notification__action-button {
-    color: $interactive-01;
-
-    &:active {
-      color: $interactive-01;
-    }
-
-    &:active,
-    &:hover {
-      background-color: $carbon--white-0;
-    }
+    fill: $icon-01;
   }
 }
 

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -11,10 +11,12 @@
 
 @import '../../globals/scss/vars';
 @import '../../globals/scss/layout';
+@import '../../globals/scss/component-tokens';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/css--reset';
 @import 'mixins';
+@import 'tokens';
 
 /// Toast notification styles
 /// @access private
@@ -71,8 +73,7 @@
   }
 
   .#{$prefix}--toast-notification--low-contrast {
-    // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
-    color: map-get($carbon--theme--white, 'text-01');
+    color: $text-01;
   }
 
   .#{$prefix}--toast-notification--error {
@@ -82,7 +83,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
     @include notification--experimental(
       $support-01,
-      $notification-error-background-color
+      get-token-value($notification-colors, 'notification-background-error')
     );
   }
 
@@ -93,7 +94,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
     @include notification--experimental(
       $support-02,
-      $notification-success-background-color
+      get-token-value($notification-colors, 'notification-background-success')
     );
   }
 
@@ -106,7 +107,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info-square {
     @include notification--experimental(
       $support-04,
-      $notification-info-background-color
+      get-token-value($notification-colors, 'notification-background-info')
     );
   }
 
@@ -119,7 +120,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt {
     @include notification--experimental(
       $support-03,
-      $notification-warning-background-color
+      get-token-value($notification-colors, 'notification-background-warning')
     );
   }
 
@@ -181,7 +182,7 @@
   .#{$prefix}--toast-notification--low-contrast
     .#{$prefix}--toast-notification__close-button
     .#{$prefix}--toast-notification__close-icon {
-    fill: map-get($carbon--theme--white, 'text-01');
+    fill: $icon-01;
   }
 
   .#{$prefix}--toast-notification__title {
@@ -203,8 +204,7 @@
 
   .#{$prefix}--toast-notification--low-contrast
     .#{$prefix}--toast-notification__subtitle {
-    // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
-    color: map-get($carbon--theme--white, 'text-01');
+    color: $text-01;
   }
 
   .#{$prefix}--toast-notification__caption {
@@ -216,8 +216,7 @@
 
   .#{$prefix}--toast-notification--low-contrast
     .#{$prefix}--toast-notification__caption {
-    // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
-    color: map-get($carbon--theme--white, 'text-01');
+    color: $text-01;
   }
 }
 

diff --git a/packages/components/src/components/notification/_tokens.scss b/packages/components/src/components/notification/_tokens.scss
@@ -0,0 +1,139 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../../globals/scss/component-tokens';
+@import '../../globals/scss/vendor/@carbon/elements/scss/colors/colors';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+
+// prettier-ignore
+$notification-colors: (
+  'notification-background-error': (
+    fallback: $carbon__red-10,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__red-10,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__red-10,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $ui-01,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $ui-01,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__red-10,
+      ),
+    ),
+  ),
+  'notification-background-success': (
+    fallback: $carbon__green-10,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__green-10,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__green-10,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $ui-01,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $ui-01,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__green-10,
+      ),
+    ),
+  ),
+  'notification-background-info': (
+    fallback: $carbon__blue-10,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__blue-10,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__blue-10,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $ui-01,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $ui-01,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__blue-10,
+      ),
+    ),
+  ),
+  'notification-background-warning': (
+    fallback: mix($carbon__yellow-30, $carbon__white-0, 15%),
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: mix($carbon__yellow-30, $carbon__white-0, 15%),
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: mix($carbon__yellow-30, $carbon__white-0, 15%),
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $ui-01,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $ui-01,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: mix($carbon__yellow-30, $carbon__white-0, 15%),
+      ),
+    ),
+  ),
+  'notification-action-hover': (
+    fallback: $carbon__white-0,
+    values: (
+      (
+        theme: $carbon--theme--white,
+        value: $carbon__white-0,
+      ),
+      (
+        theme: $carbon--theme--g10,
+        value: $carbon__white-0,
+      ),
+      (
+        theme: $carbon--theme--g90,
+        value: $hover-ui,
+      ),
+      (
+        theme: $carbon--theme--g100,
+        value: $hover-ui,
+      ),
+      (
+        theme: $carbon--theme--v9,
+        value: $carbon__white-0,
+      ),
+    ),
+  ),
+);
diff --git a/packages/components/src/globals/scss/_theme-tokens.scss b/packages/components/src/globals/scss/_theme-tokens.scss
@@ -269,16 +269,19 @@ $modal-footer-background-color: $ui-03 !default;
 /// @type Color
 /// @access public
 /// @group notification
+/// @deprecated
 $notification-info-background-color: $ibm-color__blue-10 !default;
 
 /// @type Color
 /// @access public
 /// @group notification
+/// @deprecated
 $notification-error-background-color: $ibm-color__red-10 !default;
 
 /// @type Color
 /// @access public
 /// @group notification
+/// @deprecated
 $notification-warning-background-color: mix(
   $ibm-color__yellow-30,
   $ibm-color__white-0,
@@ -288,6 +291,7 @@ $notification-warning-background-color: mix(
 /// @type Color
 /// @access public
 /// @group notification
+/// @deprecated
 $notification-success-background-color: $ibm-color__green-10 !default;
 
 // Progress Indicator

diff --git a/packages/react/.storybook/styles.scss b/packages/react/.storybook/styles.scss
@@ -79,24 +79,28 @@ $prefix: 'bx';
   :root {
     @include carbon--theme($carbon--theme--white, true) {
       @include emit-component-tokens($tag-colors);
+      @include emit-component-tokens($notification-colors);
     }
   }
 
   :root[storybook-carbon-theme='g10'] {
     @include carbon--theme($carbon--theme--g10, true) {
       @include emit-component-tokens($tag-colors);
+      @include emit-component-tokens($notification-colors);
     }
   }
 
   :root[storybook-carbon-theme='g90'] {
     @include carbon--theme($carbon--theme--g90, true) {
       @include emit-component-tokens($tag-colors);
+      @include emit-component-tokens($notification-colors);
     }
   }
 
   :root[storybook-carbon-theme='g100'] {
     @include carbon--theme($carbon--theme--g100, true) {
       @include emit-component-tokens($tag-colors);
+      @include emit-component-tokens($notification-colors);
     }
   }
 }