@carbon/ibm-products-styles 2.76.0-rc.0 → 2.77.0-rc.0

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

@@ -1,359 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2025
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/theme' 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
-@use '../EmptyStates/empty-state';
-
-$block-class: #{c4p-settings.$pkg-prefix}--notifications-panel;
-$block-size: 38.5rem;
-
-@keyframes notifications-panel-fade-in {
-  0% {
-    opacity: 0;
-    // stylelint-disable-next-line carbon/layout-use
-    transform: translateY(-$block-size); // the height of the notification panel
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes notifications-panel-fade-out {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  100% {
-    opacity: 0;
-    // stylelint-disable-next-line carbon/layout-use
-    transform: translateY(-$block-size); // the height of the notification panel
-  }
-}
-
-@keyframes notifications-panel-entrance-reduced {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes notifications-panel-exit-reduced {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.#{$block-class}__entrance {
-  animation: notifications-panel-fade-in $duration-moderate-02 motion(standard);
-}
-
-.#{$block-class}__exit {
-  animation: notifications-panel-fade-out $duration-moderate-02 motion(standard)
-    forwards;
-}
-
-@media (prefers-reduced-motion) {
-  .#{$block-class}__entrance {
-    animation: notifications-panel-entrance-reduced $duration-moderate-01
-      motion(exit, productive) forwards;
-  }
-
-  .#{$block-class}__exit {
-    animation: notifications-panel-exit-reduced $duration-moderate-01
-      motion(exit, productive) forwards;
-  }
-}
-
-.#{$block-class}__container {
-  position: fixed;
-  z-index: 2;
-  overflow: auto;
-  background-color: $layer-01;
-  border-block-end: 1px solid $border-subtle-02;
-  border-inline-start: 1px solid $border-subtle-02;
-  box-shadow: 0 $spacing-01 $spacing-02 $overlay;
-  color: $text-primary;
-  inset-block-start: $spacing-09;
-  inset-inline-end: 0;
-  max-block-size: $block-size;
-  max-inline-size: 22.75rem;
-  min-block-size: $block-size;
-  min-inline-size: 20rem;
-  transition: transform $duration-fast-02 motion(standard);
-
-  .#{$block-class}__header-container {
-    position: sticky;
-    z-index: 2;
-    padding: $spacing-03 $spacing-05;
-    background-color: $layer-01;
-    border-block-end: 1px solid $border-subtle-01;
-    inset-block-start: 0;
-    .#{$block-class}__header-flex {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .#{$block-class}__do-not-disturb-toggle {
-      padding-block-end: $spacing-03;
-
-      .#{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('heading-compact-01');
-
-      margin: 0;
-    }
-  }
-  .#{$block-class}__time-section-label {
-    @include type.type-style('label-01');
-    @include font-weight('semibold');
-
-    position: sticky;
-    z-index: 2;
-    padding: $spacing-03 $spacing-05;
-    background-color: $layer-01;
-    color: $text-secondary;
-    // stylelint-disable-next-line carbon/layout-use
-    inset-block-start: 3.0625rem;
-  }
-  .#{$block-class}__notification:hover,
-  .#{$block-class}__notification:focus {
-    background-color: $layer-accent-01;
-    .#{$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;
-    align-items: flex-start;
-    padding: $spacing-05;
-    border: 0;
-    background-color: $layer-01;
-    cursor: pointer;
-    inline-size: 100%;
-    min-block-size: 6.25rem;
-    text-align: start;
-    transition: background-color $duration-moderate-02 motion(standard);
-    .#{$block-class}__notification-title {
-      @include type.type-style('heading-01');
-
-      color: $text-secondary;
-      margin-block-end: $spacing-02;
-      @include font-weight('regular');
-    }
-    .#{$block-class}__notification-title.#{$block-class}__notification-title-unread {
-      color: $text-secondary;
-      margin-block-end: $spacing-02;
-      @include font-weight('semibold');
-    }
-    .#{$block-class}__notifications-link {
-      @include type.type-style('label-01');
-    }
-    .#{$block-class}__notification-status-icon {
-      margin-inline-end: $spacing-03;
-      min-inline-size: 1rem;
-      &.#{$block-class}__notification-status-icon-error {
-        fill: $support-error;
-      }
-      &.#{$block-class}__notification-status-icon-success {
-        fill: $support-success;
-      }
-      &.#{$block-class}__notification-status-icon-warning {
-        fill: $support-warning;
-      }
-      &.#{$block-class}__notification-status-icon-informational {
-        fill: $support-info;
-      }
-    }
-    .#{$block-class}__notification-content {
-      .#{$block-class}__notification-time-label {
-        margin-block-end: $spacing-03;
-      }
-      .#{$block-class}__notification-time-label,
-      .#{$block-class}__notification-description {
-        @include type.type-style('label-01');
-
-        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;
-          line-clamp: 2;
-        }
-        &.#{$block-class}__notification-long-description {
-          display: block;
-          overflow: initial;
-          -webkit-line-clamp: initial;
-          line-clamp: initial;
-        }
-      }
-      .#{$block-class}__notification-read-more-button,
-      .#{$block-class}__notification-read-less-button {
-        @include type.type-style('label-01');
-
-        display: flex;
-        align-items: center;
-        padding: 0;
-        min-inline-size: 5.5rem;
-
-        .#{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-more-button {
-          .#{c4p-settings.$carbon-prefix}--btn__icon {
-            transform: rotate(0deg);
-          }
-        }
-        &.#{$block-class}__notification-read-less-button {
-          .#{c4p-settings.$carbon-prefix}--btn__icon {
-            transform: rotate(180deg);
-          }
-        }
-      }
-    }
-    .#{c4p-settings.$carbon-prefix}--popover-container {
-      position: initial;
-    }
-    .#{$block-class}__dismiss-single-button {
-      position: absolute;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      color: $text-primary;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-      min-inline-size: 2rem;
-      opacity: 0;
-
-      /* stylelint-disable-next-line max-nesting-depth */
-      &:hover,
-      &:focus {
-        opacity: 1;
-      }
-    }
-  }
-  .#{$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;
-    margin: 0 auto;
-    background-color: $border-subtle-01;
-    block-size: 1px;
-    content: '';
-    inline-size: calc(100% - (2 * #{$spacing-05}));
-    inset-block-start: 0;
-    transition: background-color $duration-moderate-02 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;
-    align-items: center;
-    justify-content: center;
-    block-size: 100%;
-    margin-block-start: $spacing-13;
-    min-block-size: initial;
-    .#{c4p-settings.$pkg-prefix}-subtext {
-      @include type.type-style('body-compact-01');
-    }
-  }
-  .#{$block-class}__main-section {
-    min-block-size: 498px;
-  }
-  .#{$block-class}__bottom-actions {
-    position: sticky;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    background-color: $layer-01;
-    block-size: 2.5rem;
-    border-block-start: 1px solid $border-subtle-01;
-    inset-block-end: 0;
-    min-block-size: 2.5rem;
-    .#{$block-class}__view-all-button {
-      display: flex;
-      align-items: center;
-      block-size: 2.5rem;
-      border-inline-end: 1px solid $border-subtle-01;
-      color: $text-primary;
-      inline-size: 100%;
-      max-inline-size: calc(100% - 2.5rem);
-      min-block-size: 2.5rem;
-    }
-    .#{$block-class}__settings-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      block-size: 2.5rem;
-      color: $text-primary;
-      min-block-size: 2.5rem;
-      min-inline-size: 2.5rem;
-    }
-    .#{$block-class}__settings-button
-      .#{c4p-settings.$carbon-prefix}--btn__icon {
-      margin: 0;
-    }
-  }
-}
-
-.#{$block-class}__header-container:has(
-    .#{$block-class}__do-not-disturb-toggle
-  ) {
-  + .#{$block-class}__main-section .#{$block-class}__time-section-label {
-    // stylelint-disable-next-line carbon/layout-use
-    inset-block-start: 4.8125rem;
-  }
-}

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

@@ -1,10 +0,0 @@
-//
-// 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/styles/scss/components/toggle';

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

@@ -1,9 +0,0 @@
-//
-// 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

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 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 './options-tile';

package/scss/components/OptionsTile/_options-tile.scss

@@ -1,226 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 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.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins' as *;
-
-// Other Carbon settings.
-@use '@carbon/styles/scss/utilities' as *;
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--options-tile;
-
-.#{$block-class} {
-  position: relative;
-  background-color: $layer;
-  border-block-end: 1px solid $border-subtle;
-}
-
-.#{$block-class}__toggle-container {
-  position: absolute;
-  inline-size: calc(
-    #{$spacing-05} + 2rem + #{$spacing-05}
-  ); // spacing + toggle width + spacing
-
-  inset-block: 0;
-  inset-inline-end: 0;
-}
-
-.#{$block-class}__toggle {
-  position: absolute;
-  inset-inline-end: $spacing-05;
-}
-
-.#{$block-class}__toggle
-  .#{c4p-settings.$carbon-prefix}--toggle-input__label
-  .#{c4p-settings.$carbon-prefix}--toggle__switch {
-  margin: 0;
-}
-
-.#{$block-class}__toggle .#{c4p-settings.$carbon-prefix}--toggle__label-text {
-  @include visually-hidden;
-}
-
-.#{$block-class}__header,
-.#{$block-class}__static-content {
-  display: grid;
-  box-sizing: border-box;
-  align-items: center;
-  grid-template-columns: 3rem 1fr 2rem; // chevron container, heading, toggle width
-  padding-inline-end: $spacing-05;
-}
-
-.#{$block-class}__header {
-  background-color: transparent;
-  cursor: pointer;
-  transition: background-color $duration-fast-01 motion(entrance, productive);
-}
-
-.#{$block-class}__header::-webkit-details-marker {
-  display: none;
-}
-
-.#{$block-class}__header:hover {
-  background-color: $background-hover;
-}
-
-.#{$block-class}__header:focus {
-  @include focus-outline('outline');
-}
-
-.#{$block-class}__heading {
-  grid-column: 2;
-}
-
-.#{$block-class}__title {
-  @include type.type-style('productive-heading-01');
-
-  color: $text-primary;
-}
-
-.#{$block-class}__summary {
-  @include type.type-style('helper-text-01');
-
-  display: grid;
-  block-size: $spacing-05;
-  color: $text-secondary;
-  margin-block-start: $spacing-02;
-  opacity: 1;
-  transition-duration: $duration-moderate-01;
-  transition-property: height, opacity, margin-top;
-  transition-timing-function: motion(standard, productive);
-}
-
-.#{$block-class}__summary--invalid,
-.#{$block-class}__summary--warn,
-.#{$block-class}__summary--locked {
-  column-gap: $spacing-02;
-  grid-template-columns: 1rem 1fr; // icon, text
-}
-
-.#{$block-class}__summary--invalid {
-  color: $support-error;
-}
-
-.#{$block-class}__summary--warn {
-  color: $text-primary;
-}
-
-.#{$block-class}__summary--warn svg {
-  color: $support-warning;
-}
-
-.#{$block-class}__summary--warn svg path[fill='none'] {
-  /* stylelint-disable-next-line carbon/theme-use */
-  fill: $black-100;
-}
-
-.#{$block-class}__summary--warn svg path[fill='none'] {
-  /* stylelint-disable-next-line carbon/theme-use */
-  fill: $black-100;
-}
-
-.#{$block-class}__summary-text {
-  overflow: hidden;
-  block-size: max-content;
-  // spacing-05 + toggle width
-  // stylelint-disable-next-line carbon/layout-use
-  padding-inline-end: calc(#{$spacing-05} + 2rem);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.#{$block-class}__chevron {
-  display: block;
-  justify-self: center;
-  transition: transform $duration-fast-02 motion(standard, productive);
-}
-
-.#{$block-class}__content {
-  padding-inline: $spacing-09 $spacing-05;
-  // spacing-05 + chevron size + spacing-05
-  // stylelint-disable-next-line carbon/layout-use
-}
-
-.#{$block-class}__content
-  > .#{c4p-settings.$carbon-prefix}--fieldset
-  > .#{c4p-settings.$carbon-prefix}--label:empty {
-  display: none;
-}
-
-.#{$block-class}--closing .#{$block-class}__content {
-  overflow: hidden;
-}
-
-.#{$block-class}__summary.#{$block-class}__summary--open:not(
-    .#{$block-class}__summary--closing
-  ),
-.#{$block-class}__summary--hidden {
-  block-size: 0;
-  margin-block-start: 0;
-  opacity: 0;
-}
-
-.#{$block-class}__chevron.#{$block-class}__chevron--open:not(
-    .#{$block-class}__chevron--closing
-  ) {
-  transform: rotate(180deg);
-}
-
-.#{$block-class} > details[open] .#{$block-class}__content {
-  padding-block: $spacing-03 $spacing-06;
-}
-
-.#{$block-class}__locked-text {
-  @include type.type-style('body-long-01');
-
-  display: inline-flex;
-  align-items: center;
-  color: $text-secondary;
-  margin-block-end: $spacing-06;
-}
-
-.#{$block-class}__locked-text > svg {
-  margin-inline-end: $spacing-02;
-}
-
-.#{$block-class}--lg .#{$block-class}__header,
-.#{$block-class}--lg .#{$block-class}__static-content {
-  block-size: 3rem;
-}
-
-.#{$block-class}--xl .#{$block-class}__header,
-.#{$block-class}--xl .#{$block-class}__static-content {
-  block-size: 4rem;
-}
-
-.#{$block-class}--lg .#{$block-class}__toggle {
-  // "top" shouldn't be spacing token as it depends on the toggle size
-  inset-block-start: $spacing-05;
-}
-
-.#{$block-class}--xl .#{$block-class}__toggle {
-  // "top" shouldn't be spacing token as it depends on the toggle size
-  inset-block-start: $spacing-06;
-}
-
-.#{$block-class}--lg .#{$block-class}__summary {
-  margin-block-start: $spacing-01;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .#{$block-class}__summary,
-  .#{$block-class}__chevron {
-    transition: none;
-  }
-}

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

@@ -1,13 +0,0 @@
-//
-// 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.
-//
-
-// PageHeader uses the following Carbon components:
-// BreadcrumbItem, Grid, Column, Row, Button, SkeletonText, Tag
-@use '@carbon/styles/scss/components/breadcrumb';
-@use '@carbon/styles/scss/components/button';
-@use '@carbon/styles/scss/components/skeleton-styles';
-@use '@carbon/styles/scss/components/tag';

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

@@ -1,9 +0,0 @@
-//
-// 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 './page-header';

package/scss/components/PageHeader/_index.scss

@@ -1,10 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 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.
-//
-
-// An index file is most useful when you have multiple components
-
-@use './page-header';