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

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

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

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

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

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

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

@@ -0,0 +1,164 @@
+/* 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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+/* 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

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

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

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

@@ -0,0 +1,48 @@
+/* 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

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