@carbon/ibm-products 1.25.1 → 2.0.0-rc.0

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -6,288 +6,292 @@
 //
 
 // Standard imports.
-@import '../../global/styles/project-settings';
-
-// NotificationsPanel uses the following Carbon components:
-// Button, Link, Toggle
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/link/link';
-@import 'carbon-components/scss/components/toggle/toggle';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/utilities';
 
 // NotificationsPanel uses the following IBM Products components:
 // NotificationsEmptyState
-@import '../EmptyStates/empty-state';
+@use '../EmptyStates/empty-state';
 
-@mixin notifications-panel {
-  $block-class: #{$pkg-prefix}--notifications-panel;
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateY(-38.5rem); // the height of the notification panel
-    }
+$block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-token-use
+    transform: translateY(-38.5rem); // the height of the notification panel
+  }
 
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
+}
 
-  @keyframes fade-out {
-    0% {
-      opacity: 1;
-      transform: translateY(0);
-    }
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 
-    100% {
-      opacity: 0;
-      // stylelint-disable-next-line carbon/layout-token-use
-      transform: translateY(-38.5rem); // the height of the notification panel
-    }
+  100% {
+    opacity: 0;
+    // stylelint-disable-next-line carbon/layout-token-use
+    transform: translateY(-38.5rem); // the height of the notification panel
   }
+}
 
-  .#{$block-class}__container {
-    @include carbon--theme($carbon--theme--g100, true);
+.#{$block-class}__container {
+  @include theme($g100);
 
-    position: fixed;
-    z-index: 2;
-    top: $spacing-09;
-    right: 0;
-    overflow: auto;
-    min-width: 22.75rem;
-    max-width: 22.75rem;
-    min-height: 38.5rem;
-    max-height: 38.5rem;
-    background-color: $ui-background;
-    color: $text-01;
-    transition: transform $duration--fast-02;
-    transition-timing-function: carbon--motion(standard);
+  position: fixed;
+  z-index: 2;
+  top: $spacing-09;
+  right: 0;
+  overflow: auto;
+  min-width: 22.75rem;
+  max-width: 22.75rem;
+  min-height: 38.5rem;
+  max-height: 38.5rem;
+  background-color: $background;
+  color: $text-primary;
+  transition: transform $duration-fast-02;
+  transition-timing-function: motion(standard);
 
-    .#{$block-class}__header-container {
-      position: sticky;
-      z-index: 2;
-      top: 0;
-      padding: $spacing-03 $spacing-05 $spacing-05;
-      border-bottom: 1px solid $ui-02;
-      background-color: $ui-background;
-      .#{$block-class}__header-flex {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-      .#{$block-class}__do-not-disturb-toggle
-        .#{$carbon-prefix}--toggle__switch {
-        margin-top: $spacing-02;
-      }
-      .#{$block-class}__dismiss-button {
-        color: $text-01;
-      }
-      .#{$block-class}__header {
-        @include carbon--type-style('productive-heading-01');
+  .#{$block-class}__header-container {
+    position: sticky;
+    z-index: 2;
+    top: 0;
+    padding: $spacing-03 $spacing-05 $spacing-05;
+    border-bottom: 1px solid $layer-02;
+    background-color: $background;
+    .#{$block-class}__header-flex {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .#{$block-class}__do-not-disturb-toggle
+      .#{c4p-settings.$carbon-prefix}--toggle__label-text {
+      @include utilities.visually-hidden;
+    }
+    .#{$block-class}__dismiss-button {
+      color: $text-primary;
+    }
+    .#{$block-class}__header {
+      @include type.type-style('productive-heading-01');
 
-        margin: 0;
-      }
+      margin: 0;
     }
-    .#{$block-class}__time-section-label {
-      @include carbon--type-style('label-01');
-      @include carbon--font-weight('semibold');
+  }
+  .#{$block-class}__time-section-label {
+    @include type.type-style('label-01');
+    @include font-weight('semibold');
 
-      position: sticky;
-      z-index: 2;
-      // stylelint-disable-next-line carbon/layout-token-use
-      top: 4.8125rem;
-      padding: $spacing-03 $spacing-05;
-      background-color: $ui-01;
-      color: $text-02;
+    position: sticky;
+    z-index: 2;
+    // stylelint-disable-next-line carbon/layout-token-use
+    top: 4.8125rem;
+    padding: $spacing-03 $spacing-05;
+    background-color: $layer-01;
+    color: $text-secondary;
+  }
+  .#{$block-class}__notification:hover,
+  .#{$block-class}__notification:focus {
+    background-color: $layer-accent-01;
+    .#{$block-class}__dismiss-single-button {
+      opacity: 1;
     }
-    .#{$block-class}__notification:hover,
-    .#{$block-class}__notification:focus {
-      background-color: $ui-03;
-      .#{$block-class}__dismiss-single-button {
-        opacity: 1;
-      }
+  }
+  .#{$block-class}__notification:focus {
+    border-color: $focus;
+    box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 2px $background;
+    outline: 0;
+  }
+  .#{$block-class}__notification {
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-height: 6.25rem;
+    align-items: flex-start;
+    padding: $spacing-05;
+    border: 0;
+    background-color: $background;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color $duration-moderate-02;
+    transition-timing-function: motion(standard);
+    .#{$block-class}__notification-title {
+      margin-bottom: $spacing-02;
+      color: $text-on-color;
+      @include font-weight('regular');
     }
-    .#{$block-class}__notification:focus {
-      border-color: $focus;
-      box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 2px $ui-background;
-      outline: 0;
+    .#{$block-class}__notification-title.#{$block-class}__notification-title-unread {
+      margin-bottom: $spacing-02;
+      color: $text-on-color;
+      @include font-weight('semibold');
     }
-    .#{$block-class}__notification {
-      position: relative;
-      display: flex;
-      width: 100%;
-      min-height: 6.25rem;
-      align-items: flex-start;
-      padding: $spacing-05;
-      border: 0;
-      background-color: $ui-background;
-      cursor: pointer;
-      text-align: left;
-      transition: background-color $duration--moderate-02;
-      transition-timing-function: carbon--motion(standard);
-      .#{$block-class}__notification-title {
-        margin-bottom: $spacing-02;
-        color: $text-04;
-        @include carbon--font-weight('regular');
+    .#{$block-class}__notifications-link {
+      @include type.type-style('label-01');
+    }
+    .#{$block-class}__notification-status-icon {
+      min-width: 1rem;
+      margin-right: $spacing-03;
+      &.#{$block-class}__notification-status-icon-error {
+        fill: $support-error;
       }
-      .#{$block-class}__notification-title.#{$block-class}__notification-title-unread {
-        margin-bottom: $spacing-02;
-        color: $text-04;
-        @include carbon--font-weight('semibold');
+      &.#{$block-class}__notification-status-icon-success {
+        fill: $support-success;
       }
-      .#{$block-class}__notifications-link {
-        @include carbon--type-style('label-01');
+      &.#{$block-class}__notification-status-icon-warning {
+        fill: $support-warning;
       }
-      .#{$block-class}__notification-status-icon {
-        min-width: 1rem;
-        margin-right: $spacing-03;
-        &.#{$block-class}__notification-status-icon-error {
-          fill: $support-01;
-        }
-        &.#{$block-class}__notification-status-icon-success {
-          fill: $support-02;
-        }
-        &.#{$block-class}__notification-status-icon-warning {
-          fill: $support-03;
-        }
-        &.#{$block-class}__notification-status-icon-informational {
-          fill: $support-04;
-        }
+      &.#{$block-class}__notification-status-icon-informational {
+        fill: $support-info;
       }
-      .#{$block-class}__notification-content {
-        .#{$block-class}__notification-time-label {
-          margin-bottom: $spacing-03;
-        }
-        .#{$block-class}__notification-time-label,
-        .#{$block-class}__notification-description {
-          @include carbon--type-style('label-01');
+    }
+    .#{$block-class}__notification-content {
+      .#{$block-class}__notification-time-label {
+        margin-bottom: $spacing-03;
+      }
+      .#{$block-class}__notification-time-label,
+      .#{$block-class}__notification-description {
+        @include type.type-style('label-01');
 
-          color: $text-02;
+        color: $text-secondary;
+      }
+      .#{$block-class}__notification-description {
+        &.#{$block-class}__notification-short-description {
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
         }
-        .#{$block-class}__notification-description {
-          &.#{$block-class}__notification-short-description {
-            display: -webkit-box;
-            overflow: hidden;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-          }
-          &.#{$block-class}__notification-long-description {
-            display: block;
-            overflow: initial;
-            -webkit-line-clamp: initial;
-          }
+        &.#{$block-class}__notification-long-description {
+          display: block;
+          overflow: initial;
+          -webkit-line-clamp: initial;
         }
-        .#{$block-class}__notification-read-more-button,
-        .#{$block-class}__notification-read-less-button {
-          @include carbon--type-style('label-01');
+      }
+      .#{$block-class}__notification-read-more-button,
+      .#{$block-class}__notification-read-less-button {
+        @include type.type-style('label-01');
 
-          min-width: 5.5rem;
-          padding: 0;
+        min-width: 5.5rem;
+        padding: 0;
 
-          .#{$carbon-prefix}--btn__icon {
-            // stylelint-disable-next-line carbon/motion-easing-use
-            transition: transform $duration--moderate-02 ease;
-            @media (prefers-reduced-motion: reduce) {
-              transition: none;
-            }
-          }
-          &.#{$block-class}__notification-read-more-button {
-            .#{$carbon-prefix}--btn__icon {
-              transform: rotate(0deg);
-            }
+        .#{c4p-settings.$carbon-prefix}--btn__icon {
+          // stylelint-disable-next-line carbon/motion-easing-use
+          transition: transform $duration-moderate-02 ease;
+          /* stylelint-disable-next-line max-nesting-depth */
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
           }
-          &.#{$block-class}__notification-read-less-button {
-            .#{$carbon-prefix}--btn__icon {
-              transform: rotate(180deg);
-            }
+        }
+        &.#{$block-class}__notification-read-more-button {
+          .#{c4p-settings.$carbon-prefix}--btn__icon {
+            transform: rotate(0deg);
           }
         }
-      }
-      .#{$block-class}__dismiss-single-button {
-        position: absolute;
-        top: 0;
-        right: 0;
-        min-width: 2rem;
-        padding: 0;
-        color: $text-01;
-        opacity: 0;
-
-        &:hover,
-        &:focus {
-          opacity: 1;
+        &.#{$block-class}__notification-read-less-button {
+          .#{c4p-settings.$carbon-prefix}--btn__icon {
+            transform: rotate(180deg);
+          }
         }
       }
     }
-    .#{$block-class}__notification-today:not(:first-of-type):before,
-    .#{$block-class}__notification-yesterday:not(:first-of-type):before,
-    .#{$block-class}__notification-previous:not(:first-of-type):before {
+    .#{c4p-settings.$carbon-prefix}--popover-container {
+      position: initial;
+    }
+    .#{$block-class}__dismiss-single-button {
       position: absolute;
       top: 0;
-      width: calc(100% - (2 * #{$spacing-05}));
-      height: 1px;
-      margin: 0 auto;
-      background-color: $ui-02;
-      content: '';
-      transition: background-color $duration--moderate-02;
-      transition-timing-function: carbon--motion(standard);
-    }
-    .#{$block-class}__notification-today:hover
-      + .#{$block-class}__notification-today:not(:first-of-type):before,
-    .#{$block-class}__notification-yesterday:hover
-      + .#{$block-class}__notification-yesterday:not(:first-of-type):before,
-    .#{$block-class}__notification-previous:hover
-      + .#{$block-class}__notification-previous:not(:first-of-type):before {
-      background-color: transparent;
-    }
-    .#{$block-class}__main-section-empty.#{$block-class}__main-section {
+      right: 0;
       display: flex;
-      height: 100%;
-      min-height: initial;
+      min-width: 2rem;
       align-items: center;
       justify-content: center;
-      margin-top: $layout-07;
-      .#{$pkg-prefix}-subtext {
-        @include carbon--type-style('body-short-01');
+      padding: 0;
+      color: $text-primary;
+      opacity: 0;
+
+      /* stylelint-disable-next-line max-nesting-depth */
+      &:hover,
+      &:focus {
+        opacity: 1;
       }
     }
-    .#{$block-class}__main-section {
-      min-height: 498px;
+  }
+  .#{$block-class}__notification-today:not(:first-of-type):before,
+  .#{$block-class}__notification-yesterday:not(:first-of-type):before,
+  .#{$block-class}__notification-previous:not(:first-of-type):before {
+    position: absolute;
+    top: 0;
+    width: calc(100% - (2 * #{$spacing-05}));
+    height: 1px;
+    margin: 0 auto;
+    background-color: $layer-02;
+    content: '';
+    transition: background-color $duration-moderate-02;
+    transition-timing-function: motion(standard);
+  }
+  .#{$block-class}__notification-today:hover
+    + .#{$block-class}__notification-today:not(:first-of-type):before,
+  .#{$block-class}__notification-yesterday:hover
+    + .#{$block-class}__notification-yesterday:not(:first-of-type):before,
+  .#{$block-class}__notification-previous:hover
+    + .#{$block-class}__notification-previous:not(:first-of-type):before {
+    background-color: transparent;
+  }
+  .#{$block-class}__main-section-empty.#{$block-class}__main-section {
+    display: flex;
+    height: 100%;
+    min-height: initial;
+    align-items: center;
+    justify-content: center;
+    margin-top: $spacing-13;
+    .#{c4p-settings.$pkg-prefix}-subtext {
+      @include type.type-style('body-short-01');
     }
-    .#{$block-class}__bottom-actions {
-      position: sticky;
-      z-index: 2;
-      bottom: 0;
+  }
+  .#{$block-class}__main-section {
+    min-height: 498px;
+  }
+  .#{$block-class}__bottom-actions {
+    position: sticky;
+    z-index: 2;
+    bottom: 0;
+    display: flex;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    align-items: center;
+    border-top: 1px solid $layer-02;
+    background-color: $background;
+    .#{$block-class}__view-all-button {
+      width: 100%;
+      max-width: calc(100% - 2.5rem);
+      height: 2.5rem;
+      min-height: 2.5rem;
+      border-right: 1px solid $layer-02;
+      color: $text-primary;
+    }
+    .#{$block-class}__settings-button {
       display: flex;
+      min-width: 2.5rem;
       height: 2.5rem;
       min-height: 2.5rem;
       align-items: center;
-      border-top: 1px solid $ui-02;
-      background-color: $ui-background;
-      .#{$block-class}__view-all-button {
-        width: 100%;
-        max-width: calc(100% - 2.5rem);
-        height: 2.5rem;
-        min-height: 2.5rem;
-        border-right: 1px solid $ui-02;
-        color: $text-01;
-      }
-      .#{$block-class}__settings-button {
-        display: flex;
-        min-width: 2.5rem;
-        height: 2.5rem;
-        min-height: 2.5rem;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        color: $text-01;
-      }
-      .#{$block-class}__settings-button .#{$carbon-prefix}--btn__icon {
-        margin: 0;
-      }
+      justify-content: center;
+      padding: 0;
+      color: $text-primary;
+    }
+    .#{$block-class}__settings-button
+      .#{c4p-settings.$carbon-prefix}--btn__icon {
+      margin: 0;
     }
   }
 }
-
-@include exports('notifications-panel') {
-  @include notifications-panel;
-}

package/scss/components/NotificationsPanel/_storybook-styles.scss

@@ -4,3 +4,12 @@
 // 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 '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
+
+.#{$storybook-block-class}--header {
+  @include theme(themes.$g100);
+}

package/scss/components/OptionsTile/_carbon-imports.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// OptionsTile uses the following Carbon components:
+// Toggle
+@use '@carbon/react/scss/components/toggle';

package/scss/components/OptionsTile/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// 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 './carbon-imports';
+@use './options-tile';

package/scss/components/OptionsTile/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './options-tile';
+@use './options-tile';