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

package/scss/components/SidePanel/_side-panel.scss

@@ -1,626 +0,0 @@
-//cspell: disable
-//
-// 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.
-//
-
-@use 'sass:map';
-
-// Other Carbon settings.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/grid' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/utilities';
-@use '@carbon-labs/react-resizer/scss/resizer';
-@use '@carbon/styles/scss/components/button/tokens' as *;
-
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins' as *;
-@use './side-panel-variables' as *;
-@use './animations' as *;
-
-// SidePanel uses the following IBM Products components:
-// ActionSet
-@use '../ActionSet/action-set';
-
-$block-class: #{c4p-settings.$pkg-prefix}--side-panel;
-$action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
-$clabs-prefix: 'clabs';
-
-@property --panel-transform {
-  inherits: true;
-  initial-value: 320px;
-  syntax: '<length>';
-}
-
-@mixin setPanelSize($size: map.get($side-panel-sizes, md)) {
-  inline-size: clamp(16rem, var(--c4p-side-panel-modified-size, $size), 100%);
-}
-
-@mixin setDividerStyles() {
-  position: absolute;
-  background-color: $border-subtle-01;
-  block-size: 1px;
-  content: '';
-  inline-size: 100%;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  opacity: var(--#{$block-class}--scroll-animation-progress);
-}
-
-@mixin setCommonTitleStyles() {
-  /* stylelint-disable-next-line carbon/layout-use -- custom css property set below */
-  padding-inline-end: var(--#{$block-class}--title-padding-right);
-}
-
-.#{$block-class}--scrolls {
-  overflow: auto;
-  overflow-x: hidden;
-  @supports (overflow-inline: hidden) {
-    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-    overflow-inline: hidden;
-  }
-}
-
-.#{$block-class} {
-  --panel-transform: 320px;
-  --#{$block-class}--title-stop: #{$spacing-05};
-  --#{$block-class}--scroll-animation-progress: 0;
-  --#{$block-class}--title-padding-right: #{$spacing-07};
-  --#{$block-class}--actions-height: #{$spacing-10};
-
-  position: fixed;
-  z-index: utilities.z('modal');
-  display: grid;
-  box-sizing: border-box;
-  background-color: $layer-01;
-  block-size: calc(100% - 3rem);
-  color: $text-primary;
-
-  /* if the title does not scroll then we have a child scrolling section. */
-  grid-template-rows: auto 1fr auto; /* titles content and actions */
-  inset-block-start: $spacing-09;
-  max-inline-size: 100%;
-  min-inline-size: map.get($side-panel-sizes, xs);
-
-  transform: translateX(0);
-  transition-behavior: allow-discrete;
-  transition-duration: $duration-moderate-01;
-  transition-property: display, opacity, transform;
-  &:not(.#{$block-class}--slide-in) {
-    // enableSidepanelResizer flag class
-    &.#{$block-class}--enable-sidepanel-resizer {
-      grid-template-columns: 0 1fr;
-      @media (prefers-reduced-motion: no-preference) {
-        transition: all $duration-moderate-01 linear;
-      }
-    }
-  }
-
-  @starting-style {
-    opacity: 0;
-    /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateX(var(--panel-transform));
-  }
-
-  @include breakpoint(md) {
-    max-inline-size: 75vw;
-  }
-
-  @each $size, $size_value in $side-panel-sizes {
-    &.#{$block-class}--#{$size} {
-      @include setPanelSize($size_value);
-    }
-  }
-
-  &.#{$block-class}--open.#{$block-class}--right-placement {
-    animation: side-panel-entrance-right $duration-moderate-01
-      motion(entrance, productive) forwards;
-  }
-
-  // animation only set for older browsers that do not support `transition-behavior: allow-discrete;`
-  &.#{$block-class}--open.#{$block-class}--left-placement {
-    animation: side-panel-entrance-left $duration-moderate-01
-      motion(entrance, productive) forwards;
-  }
-
-  // animation only set for older browsers that do not support `transition-behavior: allow-discrete;`
-  &.#{$block-class}--closing.#{$block-class}--right-placement {
-    animation: side-panel-exit-right $duration-moderate-01
-      motion(exit, productive) forwards;
-  }
-
-  &.#{$block-class}--closing.#{$block-class}--left-placement {
-    animation: side-panel-exit-left $duration-moderate-01
-      motion(exit, productive) forwards;
-  }
-
-  @supports (transition-behavior: allow-discrete) {
-    &.#{$block-class}--closing {
-      opacity: 0;
-      /* stylelint-disable-next-line carbon/layout-use */
-      transform: translateX(var(--panel-transform, 320px));
-      transition-duration: $duration-moderate-01;
-    }
-    &.#{$block-class}--closing.#{$block-class}--left-placement {
-      /* stylelint-disable-next-line carbon/layout-use */
-      transform: translateX(calc(-1 * var(--panel-transform, 320px)));
-    }
-  }
-
-  @media (prefers-reduced-motion) {
-    /* styles to apply if a user's device settings are set to reduced motion */
-    &.#{$block-class}--open.#{$block-class}--right-placement,
-    &.#{$block-class}--open.#{$block-class}--left-placement {
-      animation: side-panel-entrance-reduced $duration-moderate-01
-        motion(exit, productive) forwards;
-      @starting-style {
-        opacity: 0;
-        transform: translateX(0);
-      }
-    }
-    &.#{$block-class}--closing.#{$block-class}--left-placement,
-    &.#{$block-class}--closing.#{$block-class}--right-placement {
-      animation: side-panel-exit-reduced $duration-moderate-01
-        motion(exit, productive) forwards;
-      @starting-style {
-        opacity: 1;
-        transform: translateX(0);
-      }
-    }
-  }
-
-  &.#{$block-class}--animated-title {
-    grid-template-rows: 1fr auto; /* titles and content (actions are external to this element) */
-  }
-
-  &.#{$block-class}--condensed-actions {
-    --#{$block-class}--actions-height: #{$spacing-09};
-  }
-
-  &:not(.#{$block-class}--has-overlay) {
-    box-shadow: 0 $spacing-01 $spacing-02 $overlay;
-  }
-
-  // Slide-in panels should use border not shadows since they don’t layer
-  &.#{$block-class}--slide-in,
-  &.#{$block-class}--slide-in:not(.#{$block-class}--has-overlay) {
-    box-shadow: none;
-  }
-
-  .#{$block-class}__actions-container {
-    inline-size: 100%;
-  }
-  &.#{$block-class}--right-placement {
-    border-inline-start: 1px solid $border-subtle-01;
-    inset-inline-end: 0;
-  }
-  &.#{$block-class}--left-placement {
-    .#{$clabs-prefix}__resizer {
-      grid-column: 2;
-      inset-inline-start: 0;
-
-      &::before {
-        inset-inline-start: 0;
-      }
-    }
-    &:not(.#{$block-class}--slide-in) {
-      // enableSidepanelResizer FeatureFlag class
-      &.#{$block-class}--enable-sidepanel-resizer {
-        grid-template-columns: 1fr 0;
-
-        @media (prefers-reduced-motion: no-preference) {
-          transition: all $duration-moderate-01 linear;
-        }
-      }
-    }
-
-    border-inline-end: 1px solid $border-subtle-01;
-    inset-inline-start: 0;
-  }
-  &.#{$block-class}.#{$block-class}--has-slug,
-  &.#{$block-class}.#{$block-class}--has-ai-label,
-  &.#{$block-class}.#{$block-class}--has-decorator {
-    border-color: transparent;
-    box-shadow:
-      inset 0 -80px 70px -65px $ai-inner-shadow,
-      0 4px 10px 2px $ai-drop-shadow;
-  }
-
-  .#{$clabs-prefix}__resizer--vertical::before {
-    position: absolute;
-    z-index: -1;
-    background-color: transparent;
-    block-size: 100%;
-    content: '';
-    inline-size: $spacing-01;
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    transition: background-color $duration-moderate-01
-      motion(standard, productive);
-  }
-
-  &:hover {
-    .#{$clabs-prefix}__resizer--vertical::before {
-      background-color: $button-secondary-hover;
-    }
-  }
-
-  .#{$clabs-prefix}__resizer {
-    background-color: transparent;
-    grid-row: span 4 / span 3;
-    inset-inline-start: -$spacing-02;
-
-    &--vertical::after {
-      position: absolute;
-      z-index: 10;
-      block-size: 100%;
-      content: '';
-      inline-size: $spacing-03;
-      inset-inline-start: -$spacing-01;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: $border-interactive;
-    }
-  }
-
-  .#{$block-class}__header {
-    --#{$block-class}--title-padding-bottom: #{$spacing-05};
-
-    position: sticky;
-    z-index: 4;
-    padding: $spacing-05;
-    background-color: $layer-01;
-    /* stylelint-disable-next-line carbon/layout-use */
-    inset-block-start: calc(
-      -1px * var(--#{$block-class}--scroll-animation-distance)
-    );
-    min-block-size: $spacing-08;
-    padding-block-end: 0;
-
-    &.#{$block-class}__header--has-title {
-      min-block-size: auto;
-    }
-
-    &:has(.#{$block-class}__subtitle-text),
-    &.#{$block-class}__header--has-subtitle {
-      --#{$block-class}--title-padding-bottom: #{$spacing-03};
-    }
-
-    &:has(.#{$block-class}__navigation-back-button),
-    &.#{$block-class}__header--has-navigation-back {
-      padding-block-start: $spacing-07;
-    }
-
-    &:has(
-        .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
-      ),
-    &.#{$block-class}__header--has-navigation-back.#{c4p-settings.$carbon-prefix}--btn--md {
-      padding-block-start: $spacing-08;
-    }
-
-    /* stylelint-disable-next-line max-nesting-depth */
-    &::before {
-      @include setDividerStyles();
-
-      z-index: 9;
-    }
-
-    &.#{$block-class}__header--no-title-animation {
-      position: relative;
-      inset-block-start: 0;
-    }
-
-    &.#{$block-class}__header--no-title-animation::before {
-      opacity: 1;
-    }
-
-    &.#{$block-class}__header--reduced-motion {
-      z-index: 5;
-      border-block-end: 1px solid $border-subtle-01;
-      margin-block-end: $spacing-05;
-    }
-
-    &.#{$block-class}__header--reduced-motion.#{$block-class}__header--no-title-animation {
-      border-block-end: 0;
-      margin-block-end: 0;
-    }
-
-    &.#{$block-class}__header--on-detail-step
-      .#{$block-class}__navigation-back-button.#{c4p-settings.$carbon-prefix}--btn--md
-      ~ .#{$block-class}__collapsed-title-text {
-      inset-block-start: $spacing-06;
-    }
-
-    &.#{$block-class}__header--on-detail-step:not(
-        .#{$block-class}__header--has-title
-      ) {
-      padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
-      block-size: calc(#{$spacing-08} + #{$spacing-02});
-    }
-
-    &:not(.#{$block-class}__header--has-title)::before {
-      background-color: transparent;
-    }
-  }
-
-  // Remove min‑block‑size when the header contains no child elements to prevent unnecessary blank space
-  .#{$block-class}__header:empty {
-    min-block-size: unset;
-  }
-
-  &.#{$block-class}:has(.#{$block-class}__action-toolbar),
-  &.#{$block-class}--has-action-toolbar,
-  &.#{$block-class}--has-slug,
-  &.#{$block-class}--has-ai-label,
-  &.#{$block-class}--has-decorator {
-    --#{$block-class}--title-padding-right: #{$spacing-10};
-  }
-
-  &.#{$block-class}:has(.#{$block-class}__action-toolbar),
-  &.#{$block-class}--has-action-toolbar {
-    &.#{$block-class}--has-slug,
-    &.#{$block-class}--has-ai-label,
-    &.#{$block-class}--has-decorator {
-      --#{$block-class}--title-padding-right: #{$spacing-11};
-    }
-  }
-
-  .#{$block-class}__animated-scroll-wrapper {
-    display: grid;
-    grid-template-rows: auto 1fr;
-  }
-
-  .#{$block-class}__title {
-    position: sticky;
-    z-index: 4;
-    background-color: $layer-01;
-
-    /* border-bottom used instead of padding which wrapped text shows through */
-    border-block-end: var(--#{$block-class}--title-padding-bottom) solid
-      transparent;
-    /* stylelint-disable-next-line carbon/layout-use */
-    inset-block-start: var(--#{$block-class}--title-stop);
-  }
-
-  .#{$block-class}__title-text {
-    @include type.type-style('heading-03');
-    @include setCommonTitleStyles();
-
-    opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
-  }
-
-  .#{$block-class}__title--no-label .#{$block-class}__title-text {
-    /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateY(
-      calc(
-        -1 * #{$spacing-05} * var(--#{$block-class}--scroll-animation-progress)
-      )
-    );
-  }
-
-  .#{$block-class}__header--no-title-animation .#{$block-class}__title-text {
-    position: static;
-  }
-
-  .#{$block-class}__label-text {
-    @include type.type-style('label-01');
-
-    opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
-    padding-inline-end: var(--#{$block-class}--title-padding-right);
-  }
-
-  .#{$block-class}__collapsed-title-text {
-    @include type.type-style('heading-compact-02');
-    @include setCommonTitleStyles();
-
-    position: absolute;
-    inset-block-start: 0;
-    opacity: var(--#{$block-class}--scroll-animation-progress);
-  }
-
-  .#{$block-class}__title--no-label .#{$block-class}__collapsed-title-text {
-    /* stylelint-disable-next-line carbon/layout-use */
-    transform: translateY(
-      calc(
-        #{$spacing-05} * (1 - var(--#{$block-class}--scroll-animation-progress))
-      )
-    );
-  }
-
-  .#{$block-class}__subtitle-text {
-    @include type.type-style('body-compact-01');
-
-    opacity: calc(1 - var(--#{$block-class}--scroll-animation-progress));
-    padding-block-end: $spacing-05;
-    padding-inline-end: var(--#{$block-class}--title-padding-right);
-  }
-
-  .#{$block-class}__header--no-title-animation .#{$block-class}__subtitle-text {
-    z-index: 2;
-    background-color: $layer-01;
-  }
-
-  .#{$block-class}__title-text + .#{$block-class}__subtitle-text {
-    padding-block-start: $spacing-05;
-  }
-  .#{$block-class}__inner-content {
-    padding: 0 $spacing-05 $spacing-05;
-  }
-
-  .#{$block-class}__inner-content--no-animated-title {
-    padding-block-start: $spacing-05;
-  }
-
-  .#{$block-class}__header:has(.#{$block-class}__action-toolbar)
-    + .#{$block-class}__inner-content,
-  .#{$block-class}__header--has-action-toolbar
-    + .#{$block-class}__inner-content {
-    padding-block-start: $spacing-03;
-  }
-
-  &.#{$block-class}--has-slug .#{$block-class}--scrolls,
-  &.#{$block-class}--has-ai-label .#{$block-class}--scrolls,
-  &.#{$block-class}--has-decorator .#{$block-class}--scrolls {
-    @include utilities.ai-popover-gradient('default', 0, 'layer');
-
-    box-shadow:
-      inset 0 -80px 70px -65px $ai-inner-shadow,
-      0 4px 10px 2px $ai-drop-shadow;
-  }
-
-  .#{$block-class}__action-toolbar {
-    position: sticky;
-    z-index: 4;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    background-color: $layer-01;
-  }
-
-  .#{$block-class}__action-toolbar-leading-button {
-    margin-inline-end: $spacing-03;
-  }
-
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button {
-    position: fixed;
-    z-index: 5;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-  }
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button,
-  .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-    background-color: unset;
-    block-size: $spacing-07;
-    color: $text-primary;
-    inline-size: $spacing-07;
-    min-block-size: 0;
-
-    /* stylelint-disable-next-line max-nesting-depth */
-    &:hover {
-      background-color: $background-hover;
-    }
-    .#{$block-class}--btn__icon {
-      margin: 0;
-    }
-  }
-
-  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__navigation-back-button,
-  .#{c4p-settings.$carbon-prefix}--btn--md.#{$block-class}__close-button {
-    block-size: $spacing-08;
-    inline-size: $spacing-08;
-  }
-
-  .#{$block-class}__slug-and-close,
-  .#{$block-class}__ai-label-and-close,
-  .#{$block-class}__decorator-and-close {
-    position: absolute;
-    z-index: 10; /* must be higher than title container border bottom */
-    display: flex;
-    block-size: $spacing-07;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    /* stylelint-disable-next-line max-nesting-depth */
-    @media (prefers-reduced-motion) {
-      position: absolute;
-    }
-  }
-
-  .#{$block-class}__actions-container {
-    position: sticky; // stick to bottom
-    background-color: $layer-01;
-    border-block-start: 1px solid $border-subtle-01;
-    inset-block-end: 0;
-
-    &.#{$action-set-block-class}--2xl {
-      .#{$action-set-block-class}__action-button {
-        inline-size: 100%;
-        max-inline-size: 100%;
-      }
-
-      @include breakpoint(md) {
-        flex-direction: row;
-        .#{$action-set-block-class}__action-button {
-          inline-size: 25%;
-        }
-      }
-
-      flex-direction: column;
-    }
-
-    .#{$action-set-block-class}__action-button.#{$action-set-block-class}__action-button {
-      // extra class needed to override default size
-      block-size: var(--#{$block-class}--actions-height);
-    }
-  }
-}
-
-@keyframes side-panel-overlay-entrance {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes side-panel-overlay-exit {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.#{$block-class}__visually-hidden {
-  position: absolute;
-  overflow: hidden;
-  padding: 0;
-  border: 0;
-  // stylelint-disable-next-line carbon/layout-use
-  margin: -1px;
-  block-size: 1px;
-  clip: rect(0, 0, 0, 0);
-  inline-size: 1px;
-  visibility: inherit;
-  white-space: nowrap;
-}
-
-.#{$block-class}__overlay {
-  position: fixed;
-  z-index: utilities.z('overlay');
-  animation: side-panel-overlay-entrance $duration-moderate-01
-    motion(entrance, productive) forwards;
-  background-color: $overlay;
-  block-size: 100%;
-  inline-size: 100%;
-  inset: 0;
-}
-
-.#{$block-class}__overlay--closing {
-  animation: side-panel-overlay-exit $duration-moderate-01
-    motion(exit, productive) forwards;
-}
-
-/* stylelint-disable-next-line carbon/theme-token-use */
-.#{$block-class}--has-slug + .#{$block-class}__overlay,
-.#{$block-class}--has-ai-label + .#{$block-class}__overlay,
-.#{$block-class}--has-decorator + .#{$block-class}__overlay {
-  background-color: $ai-overlay;
-}

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

@@ -1,11 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// SimpleHeader uses the following Carbon components:
-// Breadcrumb, BreadcrumbItem
-
-@use '@carbon/styles/scss/components/breadcrumb';

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

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// 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 './simple-header';

package/scss/components/SimpleHeader/_index.scss

@@ -1,10 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// 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 './simple-header';

package/scss/components/SimpleHeader/_simple-header.scss

@@ -1,37 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// 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/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type';
-
-@use '../../global/styles/project-settings' as *;
-
-$block-class: #{$pkg-prefix}--simple-header;
-
-.#{$block-class} {
-  padding: $spacing-04 $spacing-07;
-  background-color: $layer-01;
-  border-block-end: 1px solid $border-subtle-01;
-  inline-size: 100%;
-}
-
-.#{$block-class}__title {
-  @include type.type-style('heading-04');
-}
-
-.#{$block-class}__breadcrumbs + .#{$block-class}__title {
-  // add margin top to the title if breadcrumbs exist
-  margin-block-start: $spacing-02;
-}
-
-.#{$block-class}__breadcrumbs .#{$carbon-prefix}--breadcrumb-item,
-.#{$block-class}__breadcrumbs
-  .#{$carbon-prefix}--breadcrumb-item
-  .#{$carbon-prefix}--link {
-  @include type.type-style('label-01');
-}

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

@@ -1,6 +0,0 @@
-//
-// Copyright IBM Corp. 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.
-//

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

@@ -1,9 +0,0 @@
-//
-// Copyright IBM Corp. 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 './single-add-select';