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

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

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

package/scss/components/ProductiveCard/_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 './productive-card';

package/scss/components/ProductiveCard/_index.scss

@@ -0,0 +1,10 @@
+//
+// 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 './productive-card';

package/scss/components/ProductiveCard/_productive-card.scss

@@ -0,0 +1,116 @@
+//
+// 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.
+//
+
+// ProductiveCard uses the following IBM Products components:
+// Card
+@use '../Card/card' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--card;
+
+.#{$block-class}__productive {
+  display: flex;
+  flex-direction: column;
+
+  .#{$block-class}__title {
+    @include type.type-style('heading-compact-02');
+  }
+
+  .#{$block-class}__title-lg .#{$block-class}__title {
+    @include type.type-style('heading-03');
+  }
+
+  .#{$block-class}__body {
+    padding-block-start: $spacing-03;
+  }
+
+  .#{$block-class}__footer {
+    align-items: center;
+    justify-content: space-between;
+    border-block-start: 1px solid theme.$border-subtle-01;
+  }
+
+  .#{$block-class}__footer-no-button {
+    justify-content: flex-end;
+  }
+
+  .#{$block-class}__actions {
+    margin: 0;
+    min-block-size: $spacing-07;
+  }
+
+  .#{$block-class}__actions-header {
+    margin-block-start: calc(-1 * #{$spacing-02});
+  }
+
+  .#{$block-class}__actions-header-ghost-button {
+    min-block-size: $spacing-07;
+    // stylelint-disable-next-line carbon/layout-use
+    padding-inline: calc($spacing-01 + $spacing-03);
+    // stylelint-disable-next-line carbon/layout-use
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &::before {
+      position: absolute;
+      background-color: theme.$layer-hover-01;
+      block-size: $spacing-06;
+      content: '';
+      inline-size: 0.05rem;
+      inset-inline-start: 0;
+      opacity: 1;
+    }
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:hover {
+      /* stylelint-disable-next-line max-nesting-depth */
+      &::before {
+        opacity: 0;
+      }
+
+      + .#{$block-class}__actions-header-ghost-button {
+        /* stylelint-disable-next-line max-nesting-depth */
+        &::before {
+          opacity: 0;
+        }
+      }
+    }
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:first-child:not(:last-child) {
+      /* stylelint-disable-next-line max-nesting-depth */
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .#{$block-class}__title-lg .#{$block-class}__actions-header,
+  .#{$block-class}__header-has-label .#{$block-class}__actions-header {
+    margin-block-start: 0;
+  }
+
+  .#{$block-class}__icon {
+    margin-inline-end: $spacing-05;
+  }
+
+  .#{$block-class}__header-container {
+    align-items: flex-start;
+  }
+
+  .#{$block-class}__content-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .#{$block-class}__header-body-container {
+    flex: 1;
+  }
+}

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

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+// RemoveModal uses the following Carbon components:
+// Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/text-input';

package/scss/components/RemoveModal/_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 './remove-modal';

package/scss/components/RemoveModal/_index.scss

@@ -0,0 +1,10 @@
+//
+// 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 './remove-modal';

package/scss/components/RemoveModal/_remove-modal.scss

@@ -0,0 +1,27 @@
+//
+// Copyright IBM Corp. 2020, 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/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--remove-modal;
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--modal-footer
+  .#{c4p-settings.$carbon-prefix}--btn {
+  max-inline-size: none;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-content {
+  padding-inline-end: $spacing-05;
+}
+
+.#{$block-class}__body {
+  margin-block-end: $spacing-05;
+  padding-inline-end: 20%;
+}

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

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+// Saving uses the following Carbon components:
+// Button, InlineLoading
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/inline-loading';

package/scss/components/Saving/_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 './saving';

package/scss/components/Saving/_index.scss

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

package/scss/components/Saving/_saving.scss

@@ -0,0 +1,40 @@
+//
+// 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/type';
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$block-class: #{c4p-settings.$pkg-prefix}--saving;
+
+.#{$block-class}__message {
+  display: flex;
+}
+
+.#{$block-class}__error-icon {
+  margin-inline-end: $spacing-05;
+}
+
+.#{$block-class}__error-icon svg {
+  fill: $button-danger-primary;
+}
+
+.#{$block-class}__text {
+  @include type.type-style('body-compact-01');
+}
+
+.#{$block-class}__buttons {
+  display: flex;
+}
+
+.#{$block-class}__buttons
+  .#{c4p-settings.$carbon-prefix}--btn
+  .#{c4p-settings.$carbon-prefix}--inline-loading {
+  min-block-size: auto;
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 any Carbon component styles used from ScrollGradient in this file.
+// ScrollGradient uses the following Carbon components:

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './scroll-gradient';

package/scss/components/ScrollGradient/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './scroll-gradient';

package/scss/components/ScrollGradient/_scroll-gradient.scss

@@ -0,0 +1,132 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
+$intersection-value: 3rem;
+
+.#{$block-class} {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  block-size: inherit;
+  inline-size: inherit;
+}
+.#{$block-class}__content {
+  display: grid;
+  overflow: auto;
+  block-size: inherit;
+  grid-template-columns: 1fr;
+  inline-size: 100%;
+}
+
+.#{$block-class}__content-children {
+  block-size: 100%;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  inline-size: 100%;
+}
+
+.#{$block-class}__content-children > * {
+  grid-area: 1 / 1;
+}
+// All gradients
+.#{$block-class}__start-vertical,
+.#{$block-class}__start-horizontal,
+.#{$block-class}__end-vertical,
+.#{$block-class}__end-horizontal {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  pointer-events: none;
+}
+
+// Vertical start
+.#{$block-class}--y-scrollable .#{$block-class}__start-vertical {
+  block-size: $spacing-09;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+// Vertical end
+.#{$block-class}--y-scrollable .#{$block-class}__end-vertical {
+  block-size: $spacing-09;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+
+// Horizontal start
+.#{$block-class}--x-scrollable .#{$block-class}__start-horizontal {
+  inline-size: $spacing-09;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+// Horizontal end
+.#{$block-class}--x-scrollable .#{$block-class}__end-horizontal {
+  inline-size: $spacing-09;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+// Vertical start states
+.#{$block-class}--y-started.#{$block-class}--y-scrollable
+  .#{$block-class}__start-vertical,
+.#{$block-class}--y-end.#{$block-class}--y-scrollable
+  .#{$block-class}__start-vertical {
+  display: block;
+}
+
+// Vertical end states
+.#{$block-class}--y-initial.#{$block-class}--y-scrollable
+  .#{$block-class}__end-vertical,
+.#{$block-class}--y-started.#{$block-class}--y-scrollable
+  .#{$block-class}__end-vertical {
+  display: block;
+}
+
+// Horizontal start states
+.#{$block-class}--x-started.#{$block-class}--x-scrollable
+  .#{$block-class}__start-horizontal,
+.#{$block-class}--x-end.#{$block-class}--x-scrollable
+  .#{$block-class}__start-horizontal {
+  display: block;
+}
+
+// Horizontal end states
+.#{$block-class}--x-initial.#{$block-class}--x-scrollable
+  .#{$block-class}__end-horizontal,
+.#{$block-class}--x-started.#{$block-class}--x-scrollable
+  .#{$block-class}__end-horizontal {
+  display: block;
+}
+
+.#{$block-class} [data-start-vertical],
+.#{$block-class} [data-end-vertical] {
+  block-size: $intersection-value;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  inline-size: 100%;
+}
+
+.#{$block-class} [data-end-vertical],
+.#{$block-class} [data-end-horizontal] {
+  place-self: flex-end;
+}
+
+.#{$block-class} [data-start-horizontal],
+.#{$block-class} [data-end-horizontal] {
+  block-size: 100%;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  inline-size: $intersection-value;
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 any Carbon component styles used from SearchBar in this file.
+// SearchBar uses the following Carbon components:

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './search-bar';

package/scss/components/SearchBar/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './search-bar';

package/scss/components/SearchBar/_search-bar.scss

@@ -0,0 +1,26 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/utilities' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--search-bar;
+
+.#{$block-class} {
+  position: relative;
+  display: flex;
+
+  .#{c4p-settings.$pkg-prefix}--search-bar__scopes {
+    .#{c4p-settings.$carbon-prefix}--label {
+      position: absolute;
+    }
+  }
+}

package/scss/components/SidePanel/_animations.scss

@@ -0,0 +1,78 @@
+//
+// Copyright IBM Corp. 2025, 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.
+//
+
+@keyframes side-panel-entrance-reduced {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes side-panel-exit-reduced {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes side-panel-entrance-right {
+  0% {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes side-panel-entrance-left {
+  0% {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes side-panel-exit-right {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(var(--panel-transform));
+  }
+}
+
+@keyframes side-panel-exit-left {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    /* stylelint-disable-next-line carbon/layout-use */
+    transform: translateX(calc(var(--panel-transform) * -1));
+  }
+}

package/scss/components/SidePanel/_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.
+//
+
+// SidePanel uses the following Carbon components:
+// Button
+@use '@carbon/styles/scss/components/button';

package/scss/components/SidePanel/_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 './side-panel';

package/scss/components/SidePanel/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use './side-panel';

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

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2021, 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.
+//
+
+$side-panel-sizes: (
+  xs: 16rem,
+  sm: 20rem,
+  md: 30rem,
+  lg: 40rem,
+  xl: 65rem,
+  2xl: 80rem,
+);