@carbon/charts 0.58.0 → 0.58.1

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_actionable-notification.scss

@@ -0,0 +1,413 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+@use 'mixins' as *;
+@use '../../breakpoint' as *;
+@use '../../colors' as *;
+@use '../../config' as *;
+@use '../../feature-flags' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../themes' as *;
+@use '../../type' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/focus-outline' as *;
+@use './tokens' as *;
+@use '../button/mixins' as button-mixins;
+@use '../button/vars' as button-vars;
+
+/// Actionable notification styles
+/// @access public
+/// @group notification
+@mixin actionable-notification {
+  .#{$prefix}--actionable-notification {
+    @include reset;
+
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-width: rem(288px);
+    max-width: rem(288px);
+    height: auto;
+    min-height: rem(48px);
+    flex-wrap: wrap;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
+    color: $text-inverse;
+
+    @include breakpoint(md) {
+      max-width: rem(608px);
+      flex-wrap: nowrap;
+    }
+
+    @include breakpoint(lg) {
+      max-width: rem(736px);
+    }
+
+    @include breakpoint(max) {
+      max-width: rem(832px);
+    }
+  }
+
+  .#{$prefix}--actionable-notification--toast {
+    min-width: rem(288px);
+    max-width: rem(288px);
+    flex-wrap: wrap;
+    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    a {
+    color: $link-inverse;
+  }
+
+  .#{$prefix}--actionable-notification a {
+    text-decoration: none;
+  }
+
+  .#{$prefix}--actionable-notification a:hover {
+    text-decoration: underline;
+  }
+
+  .#{$prefix}--actionable-notification a:focus {
+    outline: 1px solid $link-inverse;
+  }
+
+  .#{$prefix}--actionable-notification.#{$prefix}--actionable-notification--low-contrast
+    a:focus {
+    @include focus-outline;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast {
+    color: $text-primary;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border-width: 1px 1px 1px 0;
+      border-style: solid;
+      content: '';
+      filter: opacity(0.4);
+      pointer-events: none;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--error {
+    @include notification--experimental(
+      $support-error-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--error {
+    @include notification--experimental(
+      $support-error,
+      $notification-background-error
+    );
+
+    &::before {
+      border-color: $support-error;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--success {
+    @include notification--experimental(
+      $support-success-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--success {
+    @include notification--experimental(
+      $support-success,
+      $notification-background-success
+    );
+
+    &::before {
+      border-color: $support-success;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--info,
+  .#{$prefix}--actionable-notification--info-square {
+    @include notification--experimental(
+      $support-info-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--info,
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--info-square {
+    @include notification--experimental(
+      $support-info,
+      $notification-background-info
+    );
+
+    &::before {
+      border-color: $support-info;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--warning,
+  .#{$prefix}--actionable-notification--warning-alt {
+    @include notification--experimental(
+      $support-warning-inverse,
+      $background-inverse
+    );
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--warning,
+  .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--warning-alt {
+    @include notification--experimental(
+      $support-warning,
+      $notification-background-warning
+    );
+
+    &::before {
+      border-color: $support-warning;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--warning
+    .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--actionable-notification--warning
+    .#{$prefix}--toast-notification__icon
+    path[opacity='0'] {
+    fill: $black-100;
+    opacity: 1;
+  }
+
+  .#{$prefix}--actionable-notification__details {
+    display: flex;
+    flex-grow: 1;
+    margin: 0 $spacing-09 0 $spacing-05;
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--toast)
+    .#{$prefix}--actionable-notification__details {
+    @include breakpoint(md) {
+      margin: 0 $spacing-05;
+    }
+  }
+
+  .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon {
+    flex-shrink: 0;
+    margin-top: rem(14px);
+    margin-right: $spacing-05;
+  }
+
+  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon {
+    flex-shrink: 0;
+    margin-top: $spacing-05;
+    margin-right: $spacing-05;
+  }
+
+  .#{$prefix}--actionable-notification__text-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    padding: rem(15px) 0;
+  }
+
+  .#{$prefix}--actionable-notification__content {
+    @include type-style('body-compact-01');
+
+    word-break: break-word;
+  }
+
+  /* Ghost action button when inline */
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
+    height: rem(32px);
+    margin-bottom: $spacing-03;
+    margin-left: $spacing-08;
+
+    @include breakpoint(md) {
+      margin: $spacing-03 0;
+    }
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
+    color: $link-inverse;
+  }
+
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active,
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:hover {
+    background-color: $background-inverse-hover;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active,
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:hover {
+    background-color: $notification-action-hover;
+  }
+
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:focus {
+    border-color: transparent;
+    box-shadow: none;
+    outline: 2px solid $focus-inverse;
+    outline-offset: -2px;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:focus {
+    outline-color: $focus;
+  }
+
+  .#{$prefix}--actionable-notification--hide-close-button
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
+    margin-right: $spacing-03;
+  }
+
+  /* Tertiary action button when not inline (toast) */
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
+    margin-bottom: $spacing-03;
+
+    // Button should be left aligned with text. 20px is the width of the notification icon
+    margin-left: calc(#{$spacing-07} + #{rem(20px)});
+  }
+
+  // Tertiary button styles by default use mostly "inverse" tokens. Since the non-low-contrast notification
+  // background is dark, the button styles have to be inversed again.
+  // So essentially the:
+  // btn-tertiary white theme button styles should become g100 button styles
+  // btn-tertiary g10 theme button styles should become g90 button styles
+  // btn-tertiary g90 theme button styles should become g10 button styles
+  // btn-tertiary g100 theme button styles should become white button styles
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
+    @include button-mixins.button-theme(
+      transparent,
+      $notification-action-tertiary-inverse,
+      $notification-action-tertiary-inverse,
+      $notification-action-tertiary-inverse-hover,
+      currentColor,
+      $notification-action-tertiary-inverse-active
+    );
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover {
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus {
+    border-color: $focus-inverse;
+    background-color: $notification-action-tertiary-inverse;
+    box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
+      inset 0 0 0 button-vars.$button-border-width $background-inverse;
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:active {
+    border-color: transparent;
+    background-color: $notification-action-tertiary-inverse-active;
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:disabled,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover:disabled,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus:disabled,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:hover,
+  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:focus {
+    background: transparent;
+    color: $notification-action-tertiary-inverse-text-on-color-disabled;
+    outline: none;
+  }
+
+  .#{$prefix}--actionable-notification--hide-close-button
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
+    margin-right: $spacing-03;
+  }
+
+  .#{$prefix}--actionable-notification__close-button {
+    @include focus-outline('reset');
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    width: rem(48px);
+    min-width: rem(48px);
+    max-width: rem(48px);
+    height: rem(48px);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: outline $duration-fast-02 motion(standard, productive),
+      background-color $duration-fast-02 motion(standard, productive);
+
+    &:focus {
+      outline: 2px solid $focus-inverse;
+      outline-offset: -2px;
+    }
+
+    .#{$prefix}--actionable-notification__close-icon {
+      fill: $icon-inverse;
+    }
+
+    @include breakpoint(md) {
+      position: static;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--toast
+    .#{$prefix}--actionable-notification__close-button {
+    @include breakpoint(md) {
+      position: absolute;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__close-button:focus {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__close-button
+    .#{$prefix}--actionable-notification__close-icon {
+    fill: $icon-primary;
+  }
+
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--actionable-notification {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--actionable-notification__close-button:focus,
+  .#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--actionable-notification__action-button:focus {
+    @include high-contrast-mode('focus');
+  }
+
+  .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon {
+    @include high-contrast-mode('icon-fill');
+  }
+  /* stylelint-enable */
+}

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_index.scss

@@ -8,9 +8,15 @@
 @forward './tokens';
 @forward 'inline-notification';
 @forward 'toast-notification';
+@forward 'actionable-notification';
 
-@use 'inline-notification';
-@use 'toast-notification';
+@use '../../theme';
+@use './tokens';
+@use './inline-notification';
+@use './toast-notification';
+@use './actionable-notification';
 
+@include theme.add-component-tokens(tokens.$notification-tokens);
 @include inline-notification.inline-notification;
 @include toast-notification.toast-notification;
+@include actionable-notification.actionable-notification;

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_inline-notification.scss

@@ -8,16 +8,16 @@
 @use '../../breakpoint' as *;
 @use '../../colors' as *;
 @use '../../config' as *;
-@use '../../feature-flags' as *;
+@use '../../feature-flags';
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../themes' as *;
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
-@use '../../utilities/component-tokens' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
+@use './tokens' as *;
 
 /// Inline notification styles
 /// @access public
@@ -34,8 +34,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
     color: $text-inverse;
 
     @include breakpoint(md) {
@@ -102,7 +105,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error {
     @include notification--experimental(
       $support-error,
-      get-token(var(--cds-background-error))
+      $notification-background-error
     );
 
     &::before {
@@ -120,7 +123,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success {
     @include notification--experimental(
       $support-success,
-      get-token-value(var(--cds-background-success))
+      $notification-background-success
     );
 
     &::before {
@@ -140,7 +143,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info-square {
     @include notification--experimental(
       $support-info,
-      get-token-value(var(--cds-background-info))
+      $notification-background-info
     );
 
     &::before {
@@ -160,7 +163,7 @@
   .#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning-alt {
     @include notification--experimental(
       $support-warning,
-      get-token-value(var(--cds-background-warning))
+      $notification-background-warning
     );
 
     &::before {
@@ -197,21 +200,21 @@
     padding: rem(15px) 0;
   }
 
-  @if enabled('enable-v11-release') {
+  @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--inline-notification__content {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       word-break: break-word;
     }
   } @else {
     .#{$prefix}--inline-notification__title {
-      @include type-style('productive-heading-01');
+      @include type-style('heading-compact-01');
 
       margin: 0 $spacing-02 0 0;
     }
 
     .#{$prefix}--inline-notification__subtitle {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       word-break: break-word;
     }
@@ -241,7 +244,7 @@
     .#{$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: get-token-value(var(--cds-action-hover));
+    background-color: $notification-action-hover;
   }
 
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus {
@@ -321,5 +324,8 @@
   .#{$prefix}--inline-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
+  .#{$prefix}--inline-notification__close-icon {
+    @include high-contrast-mode('icon-fill');
+  }
   /* stylelint-enable */
 }

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_mixins.scss

@@ -35,7 +35,8 @@
   background: $background-color;
 
   .#{$prefix}--inline-notification__icon,
-  .#{$prefix}--toast-notification__icon {
+  .#{$prefix}--toast-notification__icon,
+  .#{$prefix}--actionable-notification__icon {
     fill: $color;
   }
 }

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/notification/_toast-notification.scss

@@ -10,7 +10,7 @@
 @use '../../breakpoint' as *;
 @use '../../colors' as *;
 @use '../../config' as *;
-@use '../../feature-flags' as *;
+@use '../../feature-flags';
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
@@ -19,6 +19,7 @@
 @use '../../utilities/convert' as *;
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
+@use './tokens' as *;
 
 /// Toast notification styles
 /// @access public
@@ -31,14 +32,19 @@
     width: rem(288px);
     height: auto;
     padding-left: $spacing-05;
-    margin-top: $spacing-03;
-    margin-right: $spacing-05;
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-03;
+      margin-right: $spacing-05;
+      margin-bottom: $spacing-03;
+    }
+
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $text-inverse;
 
-    &:first-child {
-      margin-top: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      &:first-child {
+        margin-top: $spacing-05;
+      }
     }
 
     @include breakpoint(max) {
@@ -82,7 +88,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
     @include notification--experimental(
       $support-error,
-      get-token(var(--cds-background-error))
+      $notification-background-error
     );
   }
 
@@ -96,7 +102,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
     @include notification--experimental(
       $support-success,
-      get-token(var(--cds-background-success))
+      $notification-background-success
     );
   }
 
@@ -112,7 +118,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info-square {
     @include notification--experimental(
       $support-info,
-      get-token(var(--cds-background-info))
+      $notification-background-info
     );
   }
 
@@ -128,7 +134,7 @@
   .#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning-alt {
     @include notification--experimental(
       $support-warning,
-      get-token(var(--cds-background-warning))
+      $notification-background-warning
     );
   }
 
@@ -145,9 +151,9 @@
     margin-right: $spacing-05;
   }
 
-  @if enabled('enable-v11-release') {
+  @if feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__content {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       margin-top: $spacing-05;
       margin-right: $spacing-05;
@@ -181,7 +187,7 @@
     margin-left: auto;
     background-color: transparent;
     cursor: pointer;
-    transition: outline $transition--base, background-color $transition--base;
+    transition: outline $transition-base, background-color $transition-base;
 
     &:focus {
       outline: 2px solid $focus-inverse;
@@ -204,9 +210,9 @@
     fill: $icon-primary;
   }
 
-  @if not enabled('enable-v11-release') {
+  @if not feature-flags.enabled('enable-v11-release') {
     .#{$prefix}--toast-notification__title {
-      @include type-style('productive-heading-01');
+      @include type-style('heading-compact-01');
 
       margin-top: $spacing-05;
       font-weight: 600;
@@ -214,7 +220,7 @@
     }
 
     .#{$prefix}--toast-notification__subtitle {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       margin-top: 0;
       margin-bottom: $spacing-05;
@@ -228,7 +234,7 @@
     }
 
     .#{$prefix}--toast-notification__caption {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       padding-top: $spacing-03;
       margin-bottom: $spacing-05;
@@ -249,6 +255,9 @@
   .#{$prefix}--toast-notification__close-button:focus {
     @include high-contrast-mode('focus');
   }
+  .#{$prefix}--toast-notification__close-icon {
+    @include high-contrast-mode('icon-fill');
+  }
   .#{$prefix}--toast-notification__icon {
     @include high-contrast-mode('icon-fill');
   }