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

package/scss/components/Coachmark/_coachmark-tagline.scss

@@ -1,143 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 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 carbon/theme-use */
-/* stylelint-disable declaration-no-important */
-
-// Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
-@use '../../global/styles/mixins';
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/motion' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/components/button/tokens' as *;
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline;
-
-.#{$block-class} {
-  position: fixed;
-  z-index: 1000;
-  display: grid;
-  overflow: hidden;
-  border-radius: $spacing-01 $spacing-01 0 0;
-  background: $purple-70;
-  background-image: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
-  color: $white-0 !important;
-  grid-template-columns: [cta-col] auto [close-btn-col] $spacing-08;
-  inline-size: 18rem;
-  inset-block-end: 0;
-  inset-inline-end: $spacing-05;
-  opacity: 1;
-  // stylelint-disable-next-line carbon/motion-duration-use
-  transition: opacity $duration-moderate-02 motion(exit, productive) 300ms;
-  transition-delay: $duration-moderate-02;
-
-  @media (prefers-reduced-motion) {
-    transition: none;
-  }
-
-  &::before {
-    position: absolute;
-    z-index: -1;
-    background: linear-gradient(90deg, $blue-70 0%, $purple-70 100%);
-    content: '';
-    inset: 0;
-    opacity: 0;
-    /* stylelint-disable-next-line carbon/motion-duration-use */
-    transition: opacity $duration-moderate-02 motion(exit, productive);
-    @media (prefers-reduced-motion) {
-      transition: none;
-    }
-  }
-
-  &:hover::before {
-    opacity: 1;
-  }
-
-  &--is-open {
-    background: $white-0;
-    opacity: 0;
-    #{$block-class}__cta {
-      opacity: 0;
-    }
-
-    #{$block-class}--close-btn {
-      display: none;
-    }
-
-    &::before {
-      background: $white-0;
-    }
-  }
-
-  &__cta {
-    display: grid;
-    padding: $spacing-03 0;
-    border: none;
-    background: transparent;
-    color: $white-0 !important;
-    grid-template-columns: [icon-col] $spacing-07 [body-col] auto;
-    text-align: start;
-    @include type.type-style('body-short-01');
-
-    &:focus {
-      box-shadow:
-        inset 0 0 0 3px $purple-70,
-        inset 0 0 0 $spacing-02 $white-0;
-      outline: 1px solid transparent;
-    }
-
-    &:hover {
-      cursor: pointer !important;
-    }
-
-    .#{$block-class}__idea {
-      justify-self: center;
-    }
-  }
-
-  &--close-btn-container {
-    block-size: $spacing-07;
-    inline-size: $spacing-07;
-    margin-inline-start: auto;
-  }
-
-  &--close-btn {
-    border-color: transparent !important;
-    border-radius: 0;
-    block-size: $spacing-07;
-    color: $white-0;
-    inline-size: $spacing-07;
-    margin-inline-start: auto !important;
-    outline: 1px solid transparent;
-
-    &:active {
-      background-color: $button-secondary-active;
-    }
-
-    &:focus {
-      box-shadow:
-        inset 0 0 0 1px $background-inverse,
-        inset 0 0 0 $spacing-01 $white-0 !important;
-    }
-
-    svg > path {
-      margin: 0;
-      fill: $white-0 !important;
-    }
-
-    &:hover {
-      background-color: $purple-70-hover !important;
-    }
-  }
-}

package/scss/components/Coachmark/_coachmark.scss

@@ -1,53 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 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/config';
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/theme' as *;
-
-@use './coachmark-dragbar';
-@use './coachmark-header';
-@use './coachmark-overlay';
-@use './coachmark-tagline';
-@use './bubble';
-@use './coachmark-beacon';
-@use '../../global/styles/mixins' as *;
-
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// Coachmark uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by Coachmark
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--coachmark;
-
-.#{$block-class} {
-  position: relative;
-}
-
-// Onboarding/Coachmark/next
-
-$block-class-next: #{c4p-settings.$pkg-prefix}--coachmark__next;
-
-@include block-wrap(#{$block-class}__next) {
-  &.#{$block-class-next}--floating {
-    span:has(> div > .#{$block-class-next}--content-header--drag-icon) {
-      margin-inline-end: auto;
-    }
-  }
-  .#{$block-class-next}--content-header--is-dragging {
-    border-radius: 0;
-    box-shadow: 0 0 0 $spacing-02 $icon-inverse;
-    outline: $spacing-01 solid $background-inverse;
-  }
-}

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

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

package/scss/components/Coachmark/_index.scss

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

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

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

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -1,164 +0,0 @@
-/* stylelint-disable carbon/layout-use */
-/* stylelint-disable carbon/motion-easing-use */
-/* stylelint-disable max-nesting-depth */
-//
-// Copyright IBM Corp. 2023, 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/spacing' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/components/button/tokens' as *;
-@use '@carbon/styles/scss/motion' as *;
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// CoachmarkBeacon uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by CoachmarkBeacon
-$beaconAnimationTime: 2s;
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
-
-.#{$block-class} {
-  position: relative;
-
-  &-default {
-    .#{$block-class}__target {
-      &::before {
-        display: none;
-      }
-      // the blue dot
-      &::after {
-        position: absolute;
-        border-radius: 50%;
-        /* stylelint-disable-next-line carbon/theme-use */
-        background-color: $blue-50;
-        block-size: $spacing-04;
-        content: '';
-        inline-size: $spacing-04;
-        inset-block-start: calc($spacing-01 + $spacing-03);
-        inset-inline-start: calc($spacing-01 + $spacing-03);
-      }
-
-      &:focus {
-        outline: transparent;
-
-        &::before {
-          position: absolute;
-          display: block;
-          border-radius: 100%;
-          block-size: 18px;
-          content: '';
-          inline-size: 18px;
-          inset-block-start: 7px;
-          inset-inline-start: 7px;
-          /* stylelint-disable-next-line carbon/theme-use */
-          outline: $spacing-01 $focus solid;
-        }
-      }
-    }
-  }
-  .#{$block-class}__target {
-    // the hit area
-    display: flex;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background-color: transparent;
-    block-size: $spacing-07;
-    cursor: pointer;
-    inline-size: $spacing-07;
-
-    &[aria-expanded='true'] {
-      circle {
-        animation: none;
-      }
-    }
-  }
-
-  &__center {
-    position: absolute;
-    z-index: 6900;
-    block-size: $spacing-11;
-    inline-size: $spacing-11;
-    inset-block-start: calc(($spacing-06 - $spacing-01) * -1);
-    inset-inline-start: calc(($spacing-06 - $spacing-01) * -1);
-    pointer-events: none;
-
-    circle {
-      /* stylelint-disable-next-line carbon/motion-duration-use */
-      animation: ripple $beaconAnimationTime infinite;
-      fill: $support-info;
-      fill-opacity: 0;
-      -webkit-mask-image: none;
-      mask-image: none;
-      stroke: $support-info;
-      stroke-opacity: 0;
-      stroke-width: 1px;
-      transition-timing-function: motion (exit, productive);
-      @media (prefers-reduced-motion) {
-        animation: none;
-      }
-    }
-  }
-}
-@keyframes ripple {
-  0% {
-    fill-opacity: 0;
-    r: 1px;
-    stroke-opacity: 0;
-    transition-timing-function: motion(entrance, productive);
-  }
-
-  31% {
-    fill-opacity: 0.2;
-    stroke-opacity: 1;
-  }
-
-  62% {
-    fill-opacity: 0;
-    r: 32px;
-    stroke-opacity: 0;
-  }
-
-  100% {
-    fill-opacity: 0;
-    r: 32px;
-    stroke-opacity: 0;
-  }
-}
-
-@keyframes ring-ripple {
-  0% {
-    fill-opacity: 0;
-    r: 12px;
-    stroke-opacity: 0;
-    transition-timing-function: motion(entrance, productive);
-  }
-
-  31% {
-    fill-opacity: 0.2;
-    stroke-opacity: 1;
-  }
-
-  62% {
-    fill-opacity: 0;
-    r: 32px;
-    stroke-opacity: 0;
-  }
-
-  100% {
-    fill-opacity: 0;
-    r: 32px;
-    stroke-opacity: 0;
-  }
-}

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

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

package/scss/components/CoachmarkBeacon/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 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 './coachmark-beacon';

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

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

package/scss/components/CoachmarkButton/_coachmark-button.scss

@@ -1,25 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 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';
-
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// CoachmarkButton uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by CoachmarkButton
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--coachmark-button;
-
-// .#{$block-class} {
-//   // TODO: Styles.
-// }

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

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

package/scss/components/CoachmarkButton/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 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 './coachmark-button';

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

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

package/scss/components/CoachmarkFixed/_coachmark-fixed.scss

@@ -1,25 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 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';
-
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// CoachmarkFixed uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by CoachmarkFixed
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--coachmark-fixed;
-
-// .#{$block-class} {
-//   // TODO: Styles.
-// }

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

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

package/scss/components/CoachmarkFixed/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 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 './coachmark-fixed';

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

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

package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss

@@ -1,52 +0,0 @@
-/* stylelint-disable max-nesting-depth */
-//
-// Copyright IBM Corp. 2023, 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/spacing' as *;
-@use '@carbon/styles/scss/type' as *;
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// CoachmarkOverlayElement uses the following Carbon for IBM Products components:
-// TODO: @use(s) of IBM Products component styles used by CoachmarkOverlayElement
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-element;
-$carousel-item-class: #{c4p-settings.$pkg-prefix}--carousel__item;
-.#{$block-class} {
-  padding: $spacing-01 $spacing-05 0;
-
-  &__content {
-    padding-block-end: $spacing-05;
-  }
-
-  &__title {
-    @include type-style('productive-heading-02');
-
-    margin: 0 0 $spacing-03;
-  }
-
-  &__body {
-    @include type-style('body-long-01');
-  }
-
-  &__button {
-    margin-block-end: 0;
-  }
-}
-.#{$carousel-item-class} {
-  .#{$block-class} {
-    &__button {
-      margin-block-end: $spacing-05;
-    }
-  }
-}

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

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

package/scss/components/CoachmarkOverlayElement/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 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 './coachmark-overlay-element';

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

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

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -1,48 +0,0 @@
-/* stylelint-disable max-nesting-depth */
-//
-// Copyright IBM Corp. 2023, 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/layout/scss/convert' as *;
-
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing' as *;
-// Other Carbon settings if needed
-// TODO: @use '@carbon/styles/scss/grid';
-// or
-// TODO: @use '@carbon/styles/scss/grid';
-
-// CoachmarkOverlayElements 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}--coachmark-overlay-elements;
-
-.#{$block-class} {
-  &__element-stepped-media {
-    padding: 0 $spacing-05;
-    /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
-    block-size: to-rem(128px);
-    margin-block-end: $spacing-05;
-  }
-
-  &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 0 $spacing-05 $spacing-05;
-  }
-
-  &--controls-progress {
-    justify-self: flex-start;
-    margin-inline-end: auto;
-    @include type.type-style('helper-text-01');
-  }
-}

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

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