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

package/scss/components/InlineTip/_inline-tip.scss

@@ -1,242 +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 InlineTip 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.
- *
- * We are triggering a *large* amount of linting errors.
- * So, we're using the following "disable" rules for the entire file
- * instead of many individual rules.
- */
-
-/* stylelint-disable carbon/layout-use */
-/* stylelint-disable carbon/theme-use */
-/* stylelint-disable declaration-no-important */
-/* stylelint-disable function-no-unknown */
-/* stylelint-disable max-nesting-depth */
-
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/layout/scss/convert' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--inline-tip;
-// Images and animation are the same fixed size
-$media-height: to-rem(118px);
-$media-width: calc(#{$media-height} * 2);
-$purple: #7f3ae7;
-
-.#{$block-class} {
-  position: relative;
-  display: flex;
-  background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
-}
-// layout only: wide
-.#{$block-class}__wide {
-  padding: $spacing-05 $spacing-10 $spacing-05 $spacing-09;
-}
-// layout: wide, with image
-.#{$block-class}__wide.#{$block-class}__has-media {
-  padding-inline-end: $spacing-09;
-}
-
-.#{$block-class}__wide.#{$block-class}__has-media .#{$block-class}__media {
-  padding-inline-start: $spacing-10;
-}
-
-.#{$block-class}__wide.#{$block-class}__has-media .#{$block-class}__media img {
-  display: block;
-  block-size: $media-height;
-}
-
-.#{$block-class}__wide.#{$block-class}__has-media .#{$block-class}__media svg {
-  block-size: $media-height !important;
-  // Overrides the inline CSS of "100%".
-  inline-size: $media-width !important;
-}
-
-// layout only: narrow
-.#{$block-class}__narrow {
-  flex-direction: column-reverse;
-  padding: to-rem(52px) $spacing-07 $spacing-05 $spacing-05;
-}
-// layout: narrow, with image
-.#{$block-class}__narrow.#{$block-class}__has-media {
-  padding-block-start: $spacing-07;
-  padding-inline-end: $spacing-05;
-}
-
-.#{$block-class}__narrow.#{$block-class}__has-media .#{$block-class}__media {
-  padding-block-end: $spacing-05;
-
-  img {
-    inline-size: 100%;
-  }
-}
-
-.#{$block-class}__narrow.#{$block-class}__has-media .#{$block-class}__content {
-  padding-inline-end: $spacing-05;
-}
-
-.#{$block-class}__narrow.#{$block-class}__has-media .#{$block-class}__footer {
-  justify-content: space-between;
-}
-.#{$block-class}__narrow.#{$block-class}__has-media
-  .#{$block-class}__footer
-  .#{$block-class}__close-btn {
-  margin-inline-end: calc(-1 * $spacing-05);
-}
-
-// All links in use by this component and provided by the user must reflect the 'dark' theme.
-.#{$block-class} a {
-  color: $blue-30;
-
-  &:visited,
-  &:hover,
-  &:visited:hover {
-    color: $blue-30;
-  }
-}
-
-.#{$block-class}__title {
-  @include type-style('productive-heading-01');
-
-  color: $white-0;
-}
-
-.#{$block-class}__body {
-  @include type-style('body-short-01');
-
-  color: $gray-10;
-}
-.#{$block-class}__body p {
-  @include type-style('body-short-01');
-
-  font-size: inherit;
-  line-height: inherit;
-
-  margin-block-end: $spacing-03;
-
-  &:last-of-type {
-    margin-block-end: 0;
-  }
-}
-
-.#{$block-class}__body .#{$block-class}__secondary-btn {
-  margin-block-start: $spacing-03;
-}
-.#{$block-class}__body
-  .#{$block-class}__secondary-btn
-  .#{$block-class}__button {
-  color: $blue-30;
-  margin-inline-start: calc(-1 * $spacing-05);
-
-  &:active,
-  &:hover {
-    background-color: $purple;
-    color: $gray-10;
-  }
-}
-
-.#{$block-class}__footer {
-  display: flex;
-  padding-block-start: $spacing-05;
-
-  &:empty {
-    display: none;
-  }
-}
-
-// When 'collapsed', a text-only preview with ellipsis is shown.
-.#{$block-class}__preview-text {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
-.#{$block-class}__icon-idea {
-  position: absolute;
-  color: $white-0;
-  inline-size: to-rem(20px);
-  inset: $spacing-05 0 0 $spacing-05;
-}
-
-.#{$block-class}__close-icon-wrapper {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: 0;
-}
-
-.#{$block-class} .#{$block-class}__close-icon {
-  padding: to-rem(6px) 0 0;
-  block-size: $spacing-07;
-  color: $white-0;
-  inline-size: $spacing-07;
-  min-block-size: $spacing-07;
-
-  &:active,
-  &:hover {
-    background-color: $purple;
-    color: $text-primary;
-  }
-
-  path {
-    margin: 0;
-    fill: $white-0;
-  }
-}
-
-.#{$block-class} .#{$block-class}__toggle-btn {
-  border: none;
-  margin: 0 $spacing-05 0 calc(-1 * $spacing-05);
-  color: $blue-30;
-
-  &:hover {
-    background-color: $purple-70-hover;
-    color: $gray-10;
-  }
-}
-
-.#{$block-class} .#{$block-class}__close-btn {
-  border: to-rem(1px) solid $white-0;
-  color: $white-0;
-
-  &:active,
-  &:hover {
-    background-color: $gray-10;
-    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;
-  }
-}
-
-// Exception handling.
-// If "withLeftGutter", then:
-// - insert 1 rem of more "space" on the left.
-// - move icon 1 rem more to the right.
-.#{$block-class}__wide.#{$block-class}__with-left-gutter {
-  padding-inline-start: $spacing-10;
-}
-.#{$block-class}__wide.#{$block-class}__with-left-gutter
-  .#{$block-class}__icon-idea {
-  inset-inline-start: $spacing-07;
-}

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

@@ -1,9 +0,0 @@
-//
-// 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 InterstitialScreen in this file.
-// InterstitialScreen uses the following Carbon components:

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

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

package/scss/components/InterstitialScreen/_index.scss

@@ -1,8 +0,0 @@
-//
-// 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 './interstitial-screen';

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -1,158 +0,0 @@
-//
-// 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.
-//
-
-/* stylelint-disable max-nesting-depth */
-/* stylelint-disable declaration-no-important */
-
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/type';
-
-// InterstitialScreen 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}--interstitial-screen;
-$carousel: #{c4p-settings.$pkg-prefix}--carousel;
-$carousel-item: #{c4p-settings.$pkg-prefix}--carousel__item;
-$one-grid-column: calc(100% / 16);
-
-.#{$block-class} {
-  $block: &;
-
-  &--body {
-    overflow: hidden auto;
-    flex-grow: 1;
-    padding: 0;
-    margin: 0;
-    background-color: $background;
-  }
-
-  &--progress {
-    margin-block-end: $spacing-04;
-  }
-
-  &__carousel {
-    block-size: 100%;
-    .#{$carousel-item} {
-      flex: 0 0 100%;
-      scroll-snap-align: start;
-    }
-  }
-
-  &--internal-body {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-
-  &--content {
-    block-size: 100%;
-  }
-
-  // HEADER
-  &--internal-header {
-    position: relative;
-    background-color: $background;
-    margin-block-end: 0 !important;
-    min-block-size: $spacing-09;
-    padding-block-start: $spacing-06;
-    padding-inline-start: $spacing-07 !important;
-
-    &:empty {
-      min-block-size: 0;
-    }
-
-    .#{$block-class}--titleContainer {
-      margin-block-end: $spacing-05;
-
-      h1 {
-        @include type.type-style('productive-heading-04');
-
-        margin-block-end: $spacing-03;
-
-        &:empty {
-          padding: 0;
-        }
-      }
-
-      h2 {
-        @include type.type-style('productive-heading-03');
-
-        &:empty {
-          padding: 0;
-        }
-      }
-    }
-
-    &--has-title {
-      background: $layer-01;
-      border-block-end: 1px solid $border-subtle-01;
-
-      #{$block}--progress {
-        margin-block-start: 0;
-      }
-    }
-  }
-
-  // FOOTER
-  &--footer {
-    display: flex;
-    box-sizing: initial;
-    flex-direction: row;
-    justify-content: flex-end;
-    background: $background;
-    border-block-start: 1px solid $border-subtle-01;
-    inline-size: 100%;
-
-    #{$block}--prev-btn,
-    #{$block}--next-btn,
-    #{$block}--start-btn {
-      inline-size: calc($one-grid-column * 3);
-      min-inline-size: 12.5rem;
-      padding-block-end: $spacing-07;
-    }
-
-    #{$block}--skip-btn {
-      flex-grow: 1 !important;
-      max-inline-size: none;
-      padding-inline-start: $spacing-07;
-    }
-    .#{c4p-settings.$carbon-prefix}--inline-loading {
-      position: absolute;
-      inline-size: $spacing-07;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-    }
-  }
-
-  &--footer-controls {
-    display: flex;
-    flex-direction: row;
-    // flex: 1;
-    margin-inline-start: auto;
-  }
-
-  // FULL SCREEN (settings exclusive of "MODAL")
-  &--full-screen {
-    position: fixed;
-    inset-block-start: 0;
-    inset-inline: 0;
-    #{$block}--container {
-      display: flex;
-      flex-direction: column;
-      padding: 0;
-      margin: 0;
-      block-size: 100vh;
-      max-inline-size: 100vw;
-    }
-  }
-}

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

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

package/scss/components/MultiAddSelect/_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 './multi-add-select';

package/scss/components/MultiAddSelect/_index.scss

@@ -1,8 +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 './multi-add-select';

package/scss/components/MultiAddSelect/_multi-add-select.scss

@@ -1,8 +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 '../AddSelect/add-select' as *;

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

@@ -1,9 +0,0 @@
-//
-// 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 Nav in this file.
-// Nav uses the following Carbon components:

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

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

package/scss/components/Nav/_index.scss

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