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

package/scss/components/Coachmark/_bubble.scss

@@ -0,0 +1,61 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as theme;
+@use '@carbon/styles/scss/themes' as themes;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/utilities';
+@use '../../global/styles/project-settings' as c4p-settings;
+
+$prefix: #{c4p-settings.$pkg-prefix} !default;
+
+.#{$prefix}__bubble {
+  position: fixed;
+  z-index: 10000;
+  display: none;
+  padding: $spacing-05;
+  border-radius: $spacing-01;
+  /* stylelint-disable-next-line declaration-no-important */
+  background: theme.$layer !important;
+  color: theme.$text-primary;
+  font-weight: bold;
+  inline-size: max-content;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+}
+
+.#{$prefix}__bubble-hidden {
+  display: none;
+}
+
+.#{$prefix}__bubble-open {
+  display: grid;
+  pointer-events: all;
+}
+
+.#{$prefix}__bubble-drop-shadow {
+  filter: drop-shadow(0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2));
+}
+
+.#{$prefix}__bubble__arrow {
+  position: absolute;
+  z-index: 10010;
+  background: theme.$layer;
+  block-size: $spacing-04;
+  inline-size: $spacing-04;
+  transform: rotate(45deg);
+}
+
+.#{$prefix}__bubble__header {
+  z-index: 10020;
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: -$spacing-05;
+  margin-inline: -$spacing-05;
+}

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

@@ -0,0 +1,10 @@
+//
+// 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 Coachmark in this file.
+// Coachmark uses the following Carbon components:
+@use '@carbon/styles/scss/components/button';

package/scss/components/Coachmark/_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. 2024, 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.
+//
+
+// 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/Coachmark/_coachmark-dragbar.scss

@@ -0,0 +1,26 @@
+//
+// 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/theme' 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-dragbar;
+$handle-class: #{c4p-settings.$pkg-prefix}--coachmark-dragbar__handle;
+
+.#{$block-class} {
+  display: flex;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  svg {
+    color: $icon-inverse;
+  }
+}

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

@@ -0,0 +1,20 @@
+//
+// 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';
+
+// 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-header;
+
+.#{$block-class} {
+  display: flex;
+}

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

@@ -0,0 +1,376 @@
+/* stylelint-disable function-no-unknown */
+/* 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.
+//
+
+/* stylelint-disable carbon/layout-use */
+/* stylelint-disable carbon/theme-use */
+/* stylelint-disable declaration-no-important */
+
+// Standard imports.
+@use '@carbon/layout/scss/convert' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/motion' 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-overlay;
+$carousel-class: #{c4p-settings.$pkg-prefix}--carousel;
+$close-btn-class: #{$block-class}--close-btn;
+$draghandle-btn-class: #{$block-class}__handle;
+
+.#{$block-class} {
+  position: absolute;
+  z-index: 5901;
+  border-radius: $spacing-01;
+  background-color: $background-inverse;
+  color: $text-inverse;
+  inline-size: 18rem;
+
+  visibility: hidden;
+  $caret-height: calc(
+    $spacing-03 - $spacing-01
+  ); // from the "peak" of the pyramid to its "base"
+  $caret-center: $caret-height; // use "center" for left-right calculations, and "height" for top-bottom calculations
+  $distance-offset: $spacing-06; // see also ./utils/constants.js > distanceOffset
+
+  &--tooltip {
+    position: initial;
+    transform: none !important;
+  }
+
+  &--fixed {
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline-end: $spacing-05;
+    transform: translateY(100%);
+
+    transition: transform $duration-moderate-02 motion(exit, productive);
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+  }
+
+  &--is-dragmode {
+    border-radius: 0;
+    box-shadow: 0 0 0 $spacing-02 $background-inverse;
+    outline: $spacing-01 solid $icon-inverse;
+  }
+
+  &--is-visible {
+    transform: translateY(0);
+    visibility: visible;
+  }
+
+  // OVERLAY POSITIONING
+  &--top {
+    $horizontal-push: calc($distance-offset - $caret-center);
+    $translate-y: calc(-1 * (100% + $distance-offset + $caret-height));
+
+    transform: translate(-50%, $translate-y);
+
+    &-left {
+      transform: translate(calc(-1 * $distance-offset), $translate-y);
+    }
+
+    &-right {
+      transform: translate(calc(-1 * (100% - $distance-offset)), $translate-y);
+    }
+  }
+
+  &--bottom {
+    $horizontal-push: calc($distance-offset - $caret-center);
+    $top: calc(-1 * $caret-height);
+    $translate-y: calc($distance-offset + $caret-height);
+
+    transform: translate(-50%, $translate-y);
+
+    &-left {
+      transform: translate(calc(-1 * $distance-offset), $translate-y);
+    }
+
+    &-right {
+      transform: translate(calc(-1 * (100% - $distance-offset)), $translate-y);
+    }
+  }
+
+  &--left {
+    $right: calc(-1 * $caret-center * 1.5);
+    $translate-x: calc(-1 * (100% + $distance-offset + $caret-center));
+    $vertical-push: calc($distance-offset - ($caret-height * 0.5));
+
+    transform: translate($translate-x, -50%);
+
+    &-top {
+      transform: translate($translate-x, calc(-1 * $distance-offset));
+    }
+
+    &-bottom {
+      transform: translate($translate-x, calc(-1 * (100% - $distance-offset)));
+    }
+  }
+
+  &--right {
+    $left: calc(-1 * $caret-center * 1.5);
+    $translate-x: calc($distance-offset + $caret-center);
+    $vertical-push: calc($distance-offset - ($caret-height * 0.5));
+
+    transform: translate($translate-x, -50%);
+
+    &-top {
+      transform: translate($translate-x, calc(-1 * $distance-offset));
+    }
+
+    &-bottom {
+      transform: translate($translate-x, calc(-1 * (100% - $distance-offset)));
+    }
+  }
+
+  // ANIMATED MEDIA
+  &__element-stepped-media {
+    block-size: calc($spacing-07 + $spacing-12); // 32 + 96 = 128
+    margin-block-end: $spacing-05;
+  }
+
+  // BODY
+  &__body {
+    .#{c4p-settings.$carbon-prefix}--btn--ghost {
+      color: $link-inverse;
+
+      &:hover {
+        color: $link-inverse;
+      }
+    }
+
+    // CAROUSEL ELEMENTS
+    #{$block-class}-element {
+      display: block;
+      flex: 0 0 100%;
+      max-inline-size: 100%;
+
+      #{$block-class}-element__content {
+        padding-block-end: $spacing-05;
+      }
+
+      #{$block-class}-element__title > div {
+        margin: 0 0 $spacing-03;
+
+        > h2 {
+          @include type.type-style('productive-heading-02');
+
+          order: 1;
+        }
+      }
+    }
+  }
+
+  // HEADER BUTTONS
+  &__handle {
+    position: relative;
+    flex-grow: 1;
+    padding: $spacing-02 0 0 $spacing-03;
+    border: 0;
+    background-color: transparent;
+    text-align: start;
+
+    &::before {
+      position: absolute;
+      block-size: calc($spacing-06 + $spacing-01);
+      content: '';
+      inline-size: calc($spacing-06 + $spacing-01);
+      inset-block-start: $spacing-01;
+      inset-inline-start: $spacing-01;
+    }
+
+    &:hover {
+      cursor: move;
+    }
+
+    &:focus {
+      border: none;
+      outline: none;
+
+      &::before {
+        border: 1px solid $icon-inverse;
+        outline: 1px solid $blue-60;
+      }
+    }
+  }
+
+  &--close-btn-container {
+    block-size: $spacing-07;
+    inline-size: $spacing-07;
+    margin-inline-start: auto !important;
+  }
+
+  &--close-btn {
+    block-size: $spacing-07;
+    inline-size: $spacing-07;
+    margin-inline-start: auto !important;
+
+    svg > path {
+      margin: 0;
+      fill: $icon-inverse !important;
+    }
+
+    &:hover {
+      background-color: $background-inverse-hover !important;
+    }
+  }
+
+  // FOOTER
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-block-start: $spacing-05;
+    padding-block-end: $spacing-05;
+  }
+
+  // THEME
+  &__light {
+    .#{$block-class}__body {
+      .#{c4p-settings.$carbon-prefix}--link {
+        color: $link-inverse;
+
+        &:hover {
+          color: #a6c8ff;
+        }
+
+        &:active {
+          color: $text-on-color;
+        }
+
+        &:focus {
+          outline-color: $text-on-color;
+        }
+      }
+
+      .#{c4p-settings.$carbon-prefix}--btn--ghost {
+        border-color: transparent !important;
+        border-radius: 0;
+        outline: 1px solid transparent;
+
+        &:hover {
+          background-color: $background-inverse-hover;
+        }
+
+        &:active {
+          background-color: $button-secondary-active;
+        }
+
+        &:focus {
+          box-shadow:
+            inset 0 0 0 1px $background-inverse,
+            inset 0 0 0 $spacing-01 $white-0;
+        }
+      }
+    }
+    .#{$draghandle-btn-class} {
+      &:focus {
+        &::before {
+          border: 1px solid $white-0;
+          outline: 1px solid transparent;
+        }
+      }
+    }
+    .#{$close-btn-class} {
+      border-color: transparent !important;
+      border-radius: 0;
+      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;
+      }
+    }
+  }
+
+  &__dark {
+    .#{$block-class}__body {
+      .#{c4p-settings.$carbon-prefix}--link {
+        color: #0062fe;
+
+        &:hover {
+          color: #0043ce;
+        }
+
+        &:active {
+          color: $link-secondary;
+        }
+
+        &:focus {
+          color: $text-inverse;
+          outline-color: $text-inverse;
+        }
+      }
+
+      .#{c4p-settings.$carbon-prefix}--btn--primary {
+        &:focus {
+          background-color: $button-primary-active;
+          box-shadow:
+            inset 0 0 0 $spacing-01 $button-primary,
+            inset 0 0 0 to-rem(3px) $button-tertiary;
+        }
+      }
+
+      .#{c4p-settings.$carbon-prefix}--btn--ghost {
+        border-color: transparent;
+
+        &:hover {
+          background-color: $background-inverse-hover;
+        }
+
+        &:active {
+          background-color: $button-tertiary-active;
+        }
+
+        &:focus {
+          box-shadow:
+            inset 0 0 0 1px $blue-60,
+            inset 0 0 0 $spacing-01 $white-0;
+        }
+      }
+    }
+    .#{$draghandle-btn-class} {
+      &:focus {
+        &::before {
+          border: 1px solid $white-0;
+          outline: 1px solid $blue-60;
+        }
+      }
+    }
+    .#{$close-btn-class} {
+      border-color: transparent;
+
+      &:focus {
+        box-shadow:
+          inset 0 0 0 1px $blue-60,
+          inset 0 0 0 $spacing-01 $white-0;
+      }
+
+      &:active {
+        background-color: $button-tertiary-active;
+      }
+    }
+  }
+  .#{$carousel-class}__item {
+    flex: 0 0 100% !important;
+  }
+}