@carbon/styles 1.113.0 → 1.114.0

package/scss/components/big-number/_big-number.scss

@@ -0,0 +1,164 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Big number
+//-----------------------------
+
+@use '../../config' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../spacing' as *;
+
+/// BigNumber styles
+/// @access public
+/// @group big-number
+@mixin big-number {
+  .#{$prefix}--big-number {
+    margin: 0;
+  }
+
+  .#{$prefix}--big-number__label {
+    @include type-style('label-01');
+
+    display: block;
+    margin: 0;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--big-number__value {
+    @include type-style('heading-04');
+
+    margin-block-end: 0;
+  }
+
+  .#{$prefix}--big-number__total {
+    @include type-style('body-compact-01');
+  }
+
+  .#{$prefix}--big-number__total,
+  .#{$prefix}--big-number__percentage-mark {
+    margin-block: auto $spacing-02;
+  }
+
+  .#{$prefix}--big-number__info {
+    padding-inline-start: $spacing-03;
+    vertical-align: top;
+  }
+
+  .#{$prefix}--big-number__trend {
+    margin-block-start: $spacing-03;
+    vertical-align: top;
+  }
+
+  .#{$prefix}--big-number__row {
+    display: flex;
+  }
+
+  .#{$prefix}--big-number__percentage {
+    @include type-style('heading-04');
+  }
+
+  .#{$prefix}--big-number__percentage-mark {
+    @include type-style('body-compact-01');
+  }
+
+  .#{$prefix}--big-number__icon-button {
+    margin-inline-start: $spacing-02;
+  }
+
+  .#{$prefix}--big-number--lg .#{$prefix}--big-number__value,
+  .#{$prefix}--big-number--lg .#{$prefix}--big-number__percentage {
+    @include type-style('heading-06');
+  }
+
+  .#{$prefix}--big-number--lg .#{$prefix}--big-number__total,
+  .#{$prefix}--big-number--lg .#{$prefix}--big-number__percentage-mark {
+    @include type-style('heading-03');
+  }
+
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__label {
+    @include type-style('body-compact-01');
+  }
+
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__value,
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__percentage {
+    @include type-style('heading-07');
+  }
+
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__total,
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__percentage-mark {
+    @include type-style('heading-04');
+  }
+
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__trend {
+    margin-block-start: $spacing-04;
+  }
+
+  .#{$prefix}--big-number .#{$prefix}--big-number__tooltip-trigger {
+    display: inline-flex;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    vertical-align: top;
+
+    &:focus {
+      outline: 1px solid $focus;
+    }
+  }
+
+  //
+  // Skeleton
+  //
+
+  .#{$prefix}--big-number-skeleton {
+    inline-size: 4rem;
+  }
+
+  .#{$prefix}--big-number-skeleton__label {
+    block-size: $spacing-04;
+    margin-block: 0 $spacing-03;
+  }
+
+  .#{$prefix}--big-number-skeleton__value {
+    margin: 0;
+    /* stylelint-disable-next-line declaration-no-important */
+    block-size: $spacing-08 !important;
+  }
+
+  .#{$prefix}--big-number-skeleton--lg {
+    inline-size: 5rem;
+  }
+
+  .#{$prefix}--big-number-skeleton--xl {
+    inline-size: 6rem;
+  }
+
+  .#{$prefix}--big-number-skeleton.#{$prefix}--big-number-skeleton--lg
+    .#{$prefix}--big-number-skeleton__label {
+    block-size: $spacing-04;
+  }
+
+  .#{$prefix}--big-number-skeleton.#{$prefix}--big-number-skeleton--lg
+    .#{$prefix}--big-number-skeleton__value {
+    /* stylelint-disable-next-line declaration-no-important */
+    block-size: $spacing-09 !important;
+  }
+
+  .#{$prefix}--big-number-skeleton.#{$prefix}--big-number-skeleton--xl
+    .#{$prefix}--big-number-skeleton__label {
+    block-size: $spacing-04;
+  }
+
+  .#{$prefix}--big-number-skeleton.#{$prefix}--big-number-skeleton--xl
+    .#{$prefix}--big-number-skeleton__value {
+    /* stylelint-disable-next-line declaration-no-important */
+    block-size: $spacing-10 !important;
+  }
+}

package/scss/components/big-number/_index.scss

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+@forward 'big-number';
+@use 'big-number';
+
+@include big-number.big-number;

package/scss/components/button/_button.scss

@@ -260,7 +260,6 @@
 
     &.#{$prefix}--btn--ghost {
       &:focus {
-        background-color: $background-active;
         box-shadow: inset 0 0 0 $button-outline-width $button-focus-color;
       }
     }

package/scss/components/card/_card.scss

@@ -24,33 +24,53 @@
   // ─── Base ────────────────────────────────────────────────────────────
   .#{$prefix}--card {
     position: relative;
-    border: 1px solid $border-subtle-01;
-    background-color: $layer-01;
+    background-color: $layer;
     color: $text-primary;
   }
 
   // ─── Clickable ───────────────────────────────────────────────────────
   .#{$prefix}--card--clickable {
+    display: block;
+    border: 1px solid $border-tile-01;
     cursor: pointer;
+    // Reset anchor defaults when card is rendered as <a>
+    text-decoration: none;
     transition: background-color $duration-fast-02 motion(standard, productive);
 
     &:hover {
-      background-color: $layer-hover-01;
+      background-color: $layer-hover;
     }
 
     &:focus {
       @include focus-outline('outline');
+
+      outline-offset: 0;
     }
 
     &:active {
-      background-color: $layer-active-01;
+      background-color: $layer-active;
     }
   }
 
+  // ─── Clickable footer affordance ─────────────────────────────────────
+  // Auto-rendered by Card when clickable is true.
+  .#{$prefix}--card__clickable-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: $spacing-05;
+    color: $icon-interactive;
+  }
+
+  // Disabled state: mute the footer icon
+  .#{$prefix}--card--disabled .#{$prefix}--card__clickable-footer {
+    color: $icon-disabled;
+  }
+
   // ─── Disabled ────────────────────────────────────────────────────────
   .#{$prefix}--card--disabled {
     border-color: $border-disabled;
-    background-color: $layer-01;
+    background-color: $layer;
     color: $text-disabled;
     cursor: not-allowed;
     pointer-events: none;
@@ -71,14 +91,12 @@
   .#{$prefix}--card__body {
     @include type-style('body-compact-01');
 
-    margin-block: $spacing-05;
-    margin-block-start: 0;
-    margin-inline: $spacing-05;
+    padding-block: $spacing-05;
+    padding-inline: $spacing-05;
   }
 
-  // When body is the first child (no header), restore top padding
-  .#{$prefix}--card > .#{$prefix}--card__body:first-child {
-    margin-block-start: $spacing-05;
+  .#{$prefix}--card__body--flush {
+    padding: 0;
   }
 
   // ─── Footer ──────────────────────────────────────────────────────────
@@ -231,6 +249,10 @@
     color: $text-secondary;
   }
 
+  .#{$prefix}--card--disabled .#{$prefix}--card__label {
+    color: $text-disabled;
+  }
+
   .#{$prefix}--card__label--truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -250,7 +272,6 @@
     display: flex;
     overflow: hidden;
     flex-direction: column;
-    color: $text-primary;
     // 2px between label / text-row / description
     gap: $spacing-01;
     margin-inline: $spacing-05;
@@ -325,6 +346,10 @@
     color: $text-secondary;
   }
 
+  .#{$prefix}--card--disabled .#{$prefix}--card__description {
+    color: $text-disabled;
+  }
+
   .#{$prefix}--card__description--truncate {
     overflow: hidden;
     text-overflow: ellipsis;

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;