@carbon/styles 1.113.0 → 1.114.0-rc.0

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

@@ -0,0 +1,159 @@
+//
+// Copyright IBM Corp. 2024, 2026
+//
+// 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 '../../config' as *;
+@use '../../spacing' as *;
+@use '../../colors' as *;
+@use '../../theme' as *;
+@use '../../type';
+@use '../button/tokens' as *;
+@use '../../motion' as *;
+
+$beacon-animation-time: 2s;
+
+/// CoachmarkBeacon styles
+/// @access public
+/// @group coachmark
+@mixin coachmark-beacon {
+  $block-class: #{$prefix}--coachmark-beacon;
+
+  .#{$block-class} {
+    position: relative;
+
+    &-default {
+      .#{$block-class}__target {
+        &::before {
+          display: none;
+        }
+
+        // the blue dot
+        &::after {
+          position: absolute;
+          border-radius: 50%;
+          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;
+            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 {
+        animation: ripple $beacon-animation-time 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-tagline.scss

@@ -0,0 +1,142 @@
+//
+// Copyright IBM Corp. 2023, 2026
+//
+// 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 declaration-no-important */
+
+@use '../../config' as *;
+@use '../../spacing' as *;
+@use '../../motion' as *;
+@use '../../type';
+@use '../../colors' as *;
+@use '../../theme' as *;
+@use '../button/tokens' as *;
+
+/// CoachmarkTagline styles
+/// @access public
+/// @group coachmark
+@mixin coachmark-tagline {
+  $block-class: #{$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;
+    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;
+      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,56 @@
+//
+// Copyright IBM Corp. 2026
+//
+// 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 '../../config' as *;
+@use '../../theme' as *;
+@use '../../spacing' as *;
+@use '../button/tokens' as *;
+
+/// Coachmark styles
+/// @access public
+/// @group coachmark
+@mixin coachmark {
+  $block-class: #{$prefix}--coachmark;
+
+  .#{$block-class} {
+    &--floating {
+      span:has(> div > .#{$block-class}--content-header--drag-icon) {
+        margin-inline-end: auto;
+      }
+    }
+
+    .#{$block-class}--content-header--is-dragging {
+      border-radius: 0;
+      box-shadow: 0 0 0 $spacing-02 $icon-inverse;
+      outline: $spacing-01 solid $background-inverse;
+    }
+
+    .#{$block-class}--coachmark-content {
+      .#{$block-class}--content-header {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      .#{$block-class}--content-header--drag-icon,
+      .#{$block-class}--content-header .#{$prefix}--btn {
+        color: $icon-inverse;
+
+        .#{$prefix}--btn__icon,
+        svg {
+          color: $icon-inverse;
+          fill: $icon-inverse;
+        }
+      }
+
+      .#{$block-class}--content-body {
+        display: flex;
+        flex-direction: column;
+        padding: $spacing-01 $spacing-05 0;
+      }
+    }
+  }
+}

package/scss/components/coachmark/_index.scss

@@ -0,0 +1,17 @@
+//
+// Copyright IBM Corp. 2023, 2026
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'coachmark';
+@forward 'coachmark-beacon';
+@forward 'coachmark-tagline';
+@use 'coachmark';
+@use 'coachmark-beacon';
+@use 'coachmark-tagline';
+
+@include coachmark.coachmark;
+@include coachmark-beacon.coachmark-beacon;
+@include coachmark-tagline.coachmark-tagline;