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

package/scss/components/Guidebanner/_guidebanner.scss

@@ -1,277 +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.
-//
-
-/**
- * The Guidebanner specifically is theme-agnostic, and so we have to
- * use color tokens to keep the colors static instead of theme tokens
- * that will change depending on the selected theme.
- *
- * Because of this, we are triggering a *large* amount of linting errors.
- * So, we're adding a few "disable" rules for the file instead of 60
- * individual rules.
- */
-
-/* stylelint-disable carbon/layout-use */
-/* stylelint-disable carbon/motion-duration-use */
-/* stylelint-disable carbon/theme-use */
-/* stylelint-disable declaration-no-important */
-/* stylelint-disable function-no-unknown */
-/* stylelint-disable max-nesting-depth */
-
-// Standard imports.
-@use '@carbon/layout/scss/convert' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/themes';
-@use '@carbon/styles/scss/type' as *;
-@use '../../global/styles/project-settings' as c4p-settings;
-
-// Guidebanner uses the following Carbon for IBM Products components:
-@use '../Carousel/carousel';
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--guidebanner;
-
-// Each GuidebannerElement is contained in a CarouselItem.
-$carousel-item: #{c4p-settings.$pkg-prefix}--carousel__item;
-
-@mixin when-collapsed($selector: '&') {
-  .#{c4p-settings.$pkg-prefix}--guidebanner__collapsible-collapsed
-    #{$selector} {
-    @content;
-  }
-}
-
-$horizontal-margin: to-rem(52px);
-// Guidebanner-specific colors.
-$purple-1: #9b63ff;
-$purple-2: #7f3ae7;
-$purple-3: #7433e3;
-
-.#{$block-class} {
-  // Due to the Guidebanner's dark background,
-  // apply dark theme by default for all elements:
-  // i.e. light text, icons, tooltips, etc.
-  @include theme(themes.$g100, true);
-
-  position: relative;
-  background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
-  background-color: $blue-90;
-}
-
-.#{$block-class}__icon-idea {
-  position: absolute;
-  inset-block-start: $spacing-05;
-  inset-inline-start: $spacing-05;
-
-  path {
-    fill: $gray-10;
-  }
-}
-
-.#{$block-class}__title {
-  @include type-style('heading-compact-02');
-
-  padding: $spacing-05 to-rem(175px) 0 $horizontal-margin;
-  color: $gray-10;
-}
-
-.#{$block-class}__close-button {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: 0;
-}
-.#{$block-class}__close-button button {
-  block-size: $spacing-07;
-  inline-size: $spacing-07;
-  min-block-size: $spacing-07;
-  padding-block-start: 6px;
-
-  &:active,
-  &:hover {
-    background-color: $purple-3;
-  }
-
-  path {
-    fill: $white-0;
-  }
-}
-
-// Specify Carousel look and feel.
-.#{$block-class}__carousel {
-  padding: 0 0 $spacing-05;
-  color: $gray-10;
-
-  @include when-collapsed() {
-    margin-block-end: 0;
-  }
-}
-
-// All carousel elements are 400px wide,
-// except the last one (see below).
-.#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element {
-  display: flex;
-  flex-flow: column;
-  flex-shrink: 0;
-  margin: $spacing-05 0 0 0;
-  inline-size: to-rem(400px); // 25rem
-  max-block-size: to-rem(512px); // 32rem
-  opacity: 1;
-  padding-inline-start: $horizontal-margin;
-  scroll-snap-align: start;
-  transition:
-    max-height 50ms motion(exit, productive),
-    margin-top 50ms motion(exit, productive),
-    opacity 300ms motion(exit, productive);
-
-  @include when-collapsed() {
-    margin-block-start: 0;
-    max-block-size: $spacing-03;
-    opacity: 0;
-  }
-}
-// The last carousel item is wider, with more padding-right,
-// to provide more space against the right edge of the carousel.
-.#{$block-class}__carousel
-  .#{$carousel-item}:last-child
-  .#{$block-class}__element {
-  inline-size: to-rem(448px); // 28rem
-  padding-inline-end: $horizontal-margin;
-}
-
-.#{$block-class}__carousel .#{$carousel-item} .#{$block-class}__element-title {
-  @include type-style('heading-compact-01');
-
-  margin: $spacing-05 0 0 0;
-}
-
-.#{$block-class}__carousel .#{$block-class}__element-content {
-  @include type-style('body-01');
-
-  margin-block-end: $spacing-05;
-}
-
-// Button with crossroads icon
-.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--tertiary {
-  border-color: $white-0;
-  color: $white-0;
-
-  &:active,
-  &:hover {
-    border-color: $white-0;
-    background-color: $white-0;
-    color: $gray-100;
-  }
-
-  // The "render icon" CSS seems to be missing in the latest Carbon button.
-  // Specifically, getting the icon to move to right-hand side of the content area.
-  // Repeating here.
-  svg {
-    position: absolute;
-    flex-shrink: 0;
-    block-size: 1rem;
-    inline-size: 1rem;
-    inset-inline-end: $spacing-05;
-  }
-}
-
-.#{$block-class}__carousel .#{c4p-settings.$carbon-prefix}--btn--ghost {
-  color: $blue-30;
-  margin-inline-start: calc(-1 * $spacing-05);
-
-  &:active,
-  &:hover {
-    background-color: $purple-2;
-    color: $gray-10;
-  }
-}
-
-.#{$block-class}__carousel .#{$block-class}__element-link {
-  color: $blue-30;
-
-  &:visited {
-    color: $blue-30;
-  }
-
-  &:active,
-  &:hover {
-    color: $blue-20;
-  }
-}
-
-.#{$block-class}__navigation {
-  display: flex;
-  border-block-start: to-rem(1px) solid $purple-60;
-
-  @include when-collapsed() {
-    border-block-start: none;
-  }
-}
-.#{$block-class}__navigation .#{$block-class}__toggle-button {
-  color: $blue-30;
-  margin-inline-start: calc($horizontal-margin - to-rem(18px));
-
-  &:active,
-  &:hover {
-    background-color: $purple-3;
-    color: $gray-10;
-  }
-}
-
-// Push navigation buttons to the right
-.#{$block-class}__navigation .#{$block-class}__back-button {
-  margin-inline-start: auto;
-}
-// Hide navigation buttons when collapsed
-.#{$block-class}__navigation .#{$block-class}__back-button,
-.#{$block-class}__navigation .#{$block-class}__next-button {
-  @include when-collapsed() {
-    display: none;
-  }
-}
-.#{$block-class}__navigation .#{$block-class}__back-button button,
-.#{$block-class}__navigation .#{$block-class}__next-button button {
-  &:active,
-  &:hover {
-    background-color: $purple-3;
-  }
-
-  path {
-    fill: $white-0;
-  }
-
-  &[disabled] path {
-    fill: $purple-1;
-  }
-}
-
-// Exception handling.
-// If "withLeftGutter", then:
-// - insert 1 rem of more "space" on the left.
-// - move icon 1 rem more to the right.
-.#{$block-class}__with-left-gutter .#{$block-class}__icon-idea {
-  inset-inline-start: $spacing-07;
-}
-.#{$block-class}__with-left-gutter .#{$block-class}__title {
-  padding-inline-start: calc($horizontal-margin + $spacing-05);
-}
-.#{$block-class}__with-left-gutter .#{$block-class}__navigation {
-  padding-inline-start: $spacing-05;
-}
-// Override Carousel settings
-// - insert 1 rem of more "space" on the left.
-.#{$block-class}__with-left-gutter
-  .#{c4p-settings.$pkg-prefix}--carousel__elements-container {
-  padding-inline-start: $spacing-05;
-}
-// - expand "fade" to cover more of the left side of the carousel.
-.#{$block-class}__with-left-gutter
-  .#{c4p-settings.$pkg-prefix}--carousel__elements-container--scrolled {
-  inline-size: $spacing-10;
-}

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

package/scss/components/Guidebanner/_index.scss

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

package/scss/components/HTTPErrors/_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.
-//
-
-// HTTP errors use the following Carbon components:
-// Link
-@use '@carbon/styles/scss/components/link';

package/scss/components/HTTPErrors/_http-errors.scss

@@ -1,145 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 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.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '../../global/styles/project-settings' as c4p-settings;
-
-$block-class: #{c4p-settings.$pkg-prefix}--http-errors;
-$block-class-404: #{c4p-settings.$pkg-prefix}--http-errors-404;
-$block-class-403: #{c4p-settings.$pkg-prefix}--http-errors-403;
-$block-class-other: #{c4p-settings.$pkg-prefix}--http-errors-other;
-
-.#{$block-class} .#{$block-class}__content {
-  position: fixed;
-  z-index: 2;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -75%);
-  @include breakpoint(md) {
-    transform: translate(-50%, -100%);
-  }
-  @include breakpoint(lg) {
-    transform: translate(-50%, -50%);
-  }
-}
-
-.#{$block-class} .#{$block-class}__error-code-label {
-  @include type.type-style('heading-compact-02');
-
-  margin-block-end: $spacing-02;
-}
-
-.#{$block-class} .#{$block-class}__title {
-  @include type.type-style('heading-05');
-
-  margin-block-end: $spacing-04;
-}
-
-.#{$block-class} .#{$block-class}__description {
-  @include type.type-style('body-compact-01');
-
-  margin-block-end: $spacing-06;
-}
-
-.#{$block-class} .#{$block-class}__error-code-label,
-.#{$block-class} .#{$block-class}__title,
-.#{$block-class} .#{$block-class}__description {
-  color: $text-primary;
-}
-.#{$block-class} .#{$block-class}__link {
-  display: block;
-  margin-block-end: $spacing-02;
-}
-.#{$block-class} .#{$block-class}__image {
-  position: fixed;
-  inline-size: 100%;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  max-block-size: 100%;
-  @include breakpoint-down(md) {
-    inset-inline-start: 10%;
-    transform: scale(1.5);
-  }
-}
-/* stylelint-disable carbon/theme-use */
-
-.#{$block-class-404}__prefix-cls-1 {
-  fill: none;
-}
-.#{$block-class-404}__prefix-cls-67 {
-  fill: #697077;
-}
-.#{$block-class-404}__prefix-cls-68 {
-  fill: #282828;
-}
-.#{$block-class-404}__prefix-cls-69 {
-  fill: #51565c;
-}
-.#{$block-class-404}__prefix-cls-70 {
-  fill: #002b50;
-}
-.#{$block-class-404}__prefix-cls-71 {
-  fill: #413d3d;
-}
-.#{$block-class-404}__prefix-cls-72 {
-  fill: #908b8b;
-}
-.#{$block-class-404}__prefix-cls-75 {
-  fill: #a4a4a5;
-}
-.#{$block-class-404}__prefix-cls-76 {
-  opacity: 0.15;
-}
-.#{$block-class-403}__prefix-cls-1 {
-  fill: none;
-}
-.#{$block-class-403}__prefix-cls-80 {
-  mix-blend-mode: multiply;
-  opacity: 0.25;
-}
-.#{$block-class-403}__prefix-cls-75 {
-  fill: #595655;
-}
-.#{$block-class-403}__prefix-cls-76 {
-  opacity: 0.15;
-}
-.#{$block-class-403}__prefix-cls-77 {
-  fill: #373d42;
-}
-.#{$block-class-403}__prefix-cls-78 {
-  fill: #002b50;
-}
-.#{$block-class-403}__prefix-cls-81 {
-  fill: #2b2828;
-}
-.#{$block-class-other}__prefix-cls-1 {
-  fill: none;
-}
-.#{$block-class-other}__prefix-cls-69 {
-  fill: #697077;
-}
-.#{$block-class-other}__prefix-cls-70 {
-  fill: #282828;
-}
-.#{$block-class-other}__prefix-cls-71 {
-  fill: #51565c;
-}
-.#{$block-class-other}__prefix-cls-72 {
-  fill: #e0dbda;
-}
-.#{$block-class-other}__prefix-cls-73 {
-  fill: #003d73;
-}
-.#{$block-class-other}__prefix-cls-75 {
-  opacity: 0.15;
-}
-
-/* stylelint-enable */

package/scss/components/HTTPErrors/_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 './http-errors';

package/scss/components/HTTPErrors/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2020
-//
-// 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 './http-errors';

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

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

package/scss/components/ImportModal/_import-modal.scss

@@ -1,82 +0,0 @@
-//
-// 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.
-//
-
-// Standard imports.
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '../../global/styles/project-settings' as c4p-settings;
-
-$block-class: #{c4p-settings.$pkg-prefix}--import-modal;
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal-close {
-  display: none;
-}
-
-.#{$block-class}
-  .#{c4p-settings.$carbon-prefix}--modal-footer
-  .#{c4p-settings.$carbon-prefix}--btn {
-  max-inline-size: none;
-}
-
-.#{$block-class}.#{c4p-settings.$carbon-prefix}--modal
-  .#{c4p-settings.$carbon-prefix}--modal-content {
-  padding-inline-end: $spacing-05;
-}
-
-.#{c4p-settings.$carbon-prefix}--file
-  .#{c4p-settings.$carbon-prefix}--file-container,
-.#{c4p-settings.$carbon-prefix}--file
-  ~ .#{c4p-settings.$carbon-prefix}--file-container {
-  margin-block-start: 0;
-}
-
-.#{c4p-settings.$carbon-prefix}--modal-container--sm
-  .#{c4p-settings.$carbon-prefix}--modal-header {
-  padding-inline-end: calc(20% - #{$spacing-05});
-}
-
-.#{$block-class}__input-group {
-  display: flex;
-}
-
-.#{$block-class}__import-button.#{c4p-settings.$carbon-prefix}--btn {
-  margin-inline-start: $spacing-03;
-}
-
-.#{$block-class}__file-container {
-  inline-size: 100%;
-}
-
-.#{$block-class} .#{$block-class}__file-drop-header,
-.#{$block-class} .#{$block-class}__label {
-  margin-block-end: $spacing-03;
-  @include type.type-style('heading-compact-01');
-}
-
-.#{$block-class}__helper-text {
-  margin-block: $spacing-06 $spacing-03;
-  @include type.type-style('helper-text-01');
-}
-
-.#{$block-class}__body {
-  margin-block-end: $spacing-06;
-  padding-inline-end: calc(20% - #{$spacing-05});
-}
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--file__selected-file {
-  background: $layer-02;
-  max-inline-size: none;
-}
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--file {
-  margin-block-end: $spacing-05;
-}
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--text-input:disabled {
-  background: $layer-02;
-}

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

package/scss/components/ImportModal/_index.scss

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

package/scss/components/InlineTip/_index.scss

@@ -1,8 +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 './inline-tip';