@carbon/styles 1.50.0 → 1.51.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.50.0",
+  "version": "1.51.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "@carbon/grid": "^11.21.0",
     "@carbon/layout": "^11.20.0",
     "@carbon/motion": "^11.16.0",
-    "@carbon/themes": "^11.31.0",
+    "@carbon/themes": "^11.32.0-rc.0",
     "@carbon/type": "^11.25.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "eb7d66891262363368b48211b9fd1caa78fa58f9"
+  "gitHead": "c70f968d388bbf968269066402a741327b00ac1c"
 }

package/scss/__tests__/theme-test.js

@@ -162,6 +162,7 @@ describe('@carbon/styles/scss/theme', () => {
         "ai-border-start",
         "ai-border-end",
         "ai-drop-shadow",
+        "ai-overlay",
         "slug-callout-caret-center",
         "slug-callout-caret-bottom",
         "slug-callout-caret-bottom-background",

package/scss/components/code-snippet/_code-snippet.scss

@@ -117,13 +117,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before,
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out
     .#{$prefix}--copy-btn__feedback {
-    animation: $duration-fast-02 motion(standard, productive) hide-feedback;
+    animation: $duration-fast-02 motion(standard, productive) #{$prefix}--hide-feedback;
   }
 
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before,
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in
     .#{$prefix}--copy-btn__feedback {
-    animation: $duration-fast-02 motion(standard, productive) show-feedback;
+    animation: $duration-fast-02 motion(standard, productive) #{$prefix}--show-feedback;
   }
 
   .#{$prefix}--snippet--inline code {

package/scss/components/copy-button/_copy-button.scss

@@ -73,13 +73,13 @@
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out
       .#{$prefix}--copy-btn__feedback {
       // https://github.com/stylelint/stylelint/issues/2363
-      animation: $duration-fast-02 motion(standard, productive) hide-feedback;
+      animation: $duration-fast-02 motion(standard, productive) #{$prefix}--hide-feedback;
     }
 
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before,
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in
       .#{$prefix}--copy-btn__feedback {
-      animation: $duration-fast-02 motion(standard, productive) show-feedback;
+      animation: $duration-fast-02 motion(standard, productive) #{$prefix}--show-feedback;
     }
   }
 

package/scss/components/inline-loading/_inline-loading.scss

@@ -61,7 +61,7 @@ $-loading-gap-small: 110;
   .#{$prefix}--inline-loading__checkmark {
     animation-duration: 250ms;
     animation-fill-mode: forwards;
-    animation-name: stroke;
+    animation-name: #{$prefix}--stroke;
     fill: none;
     stroke: $interactive;
     stroke-dasharray: 12;

package/scss/components/inline-loading/_keyframes.scss

@@ -5,7 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@keyframes stroke {
+@use '../../config' as *;
+
+@keyframes #{prefix}--stroke {
   100% {
     stroke-dashoffset: 0;
   }

package/scss/components/loading/_animation.scss

@@ -6,19 +6,20 @@
 //
 
 @use '../../motion';
+@use '../../config' as *;
 
 @mixin spin {
   // Animate the container
   animation-duration: 690ms;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name: rotate;
+  animation-name: #{$prefix}--rotate;
   animation-timing-function: linear;
 
   // Animate the stroke
   svg circle {
     animation-duration: 10ms;
-    animation-name: init-stroke;
+    animation-name: #{$prefix}--init-stroke;
     animation-timing-function: motion.$standard-easing;
 
     @media screen and (prefers-reduced-motion: reduce) {
@@ -29,15 +30,15 @@
 
 @mixin stop {
   // Animate the container
-  animation: rotate-end-p1 700ms motion.$ease-out forwards,
-    rotate-end-p2 700ms motion.$ease-out 700ms forwards;
+  animation: #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards,
+    #{$prefix}--rotate-end-p2 700ms motion.$ease-out 700ms forwards;
 
   // Animate the stroke
   svg circle {
     animation-delay: 700ms;
     animation-duration: 700ms;
     animation-fill-mode: forwards;
-    animation-name: stroke-end;
+    animation-name: #{$prefix}--stroke-end;
     animation-timing-function: motion.$ease-out;
 
     @media screen and (prefers-reduced-motion: reduce) {

package/scss/components/loading/_loading.scss

@@ -103,7 +103,7 @@
     display: none;
   }
 
-  @keyframes rotate {
+  @keyframes #{$prefix}--rotate {
     0% {
       transform: rotate(0deg);
     }
@@ -113,20 +113,20 @@
     }
   }
 
-  @keyframes rotate-end-p1 {
+  @keyframes #{$prefix}--rotate-end-p1 {
     100% {
       transform: rotate(360deg);
     }
   }
 
-  @keyframes rotate-end-p2 {
+  @keyframes #{$prefix}--rotate-end-p2 {
     100% {
       transform: rotate(-360deg);
     }
   }
 
   /* Stroke animations */
-  @keyframes init-stroke {
+  @keyframes #{$prefix}--init-stroke {
     0% {
       stroke-dashoffset: loading-progress($circumference, 0);
     }
@@ -136,7 +136,7 @@
     }
   }
 
-  @keyframes stroke-end {
+  @keyframes #{$prefix}--stroke-end {
     0% {
       stroke-dashoffset: loading-progress($circumference, 81);
     }

package/scss/components/modal/_modal.scss

@@ -350,60 +350,22 @@
   .#{$prefix}--modal-scroll-content {
     // Required to accommodate focus outline's negative offset when scrolling in Chrome
     border-block-end: 2px solid transparent;
+    mask-image: linear-gradient(
+        to bottom,
+        $layer calc(100% - 80px),
+        transparent calc(100% - 48px),
+        transparent 100%
+      ),
+      linear-gradient(to left, $layer 0, 16px, transparent 16px),
+      linear-gradient(to right, $layer 0, 2px, transparent 2px),
+      linear-gradient(to top, $layer 0, 2px, transparent 2px);
   }
+
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
     padding-block-end: $spacing-06;
   }
 
-  .#{$prefix}--modal-content--overflow-indicator {
-    position: absolute;
-    background: $layer;
-    block-size: convert.to-rem(48px);
-    grid-column: 1/-1;
-    grid-row: 2/-2;
-    inline-size: calc(100% - $spacing-05);
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    pointer-events: none;
-
-    &::before {
-      position: absolute;
-      background-image: linear-gradient(to bottom, transparent, $layer);
-      block-size: convert.to-rem(32px);
-      content: '';
-      inline-size: 100%;
-      inset-block-start: -32px;
-      pointer-events: none;
-    }
-  }
-
-  // Safari-only media query
-  // won't appear correctly with CSS custom properties
-  // see: code snippet and tabs overflow indicators
-  @media not all and (min-resolution >= 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-      .#{$prefix}--modal-content--overflow-indicator {
-        background-image: linear-gradient(to bottom, rgba($layer, 0), $layer);
-      }
-    }
-  }
-
-  .#{$prefix}--modal-content:focus
-    ~ .#{$prefix}--modal-content--overflow-indicator {
-    margin: 0 2px 2px;
-  }
-
-  @media screen and (-ms-high-contrast: active) {
-    .#{$prefix}--modal-scroll-content > *:last-child {
-      padding-block-end: 0;
-    }
-
-    .#{$prefix}--modal-content--overflow-indicator {
-      display: none;
-    }
-  }
-
   // -----------------------------
   // Modal footer
   // -----------------------------
@@ -488,21 +450,25 @@
   }
 
   // Slug styles
+  .#{$prefix}--modal--slug.#{$prefix}--modal {
+    background-color: $ai-overlay;
+  }
+
   .#{$prefix}--modal--slug .#{$prefix}--modal-container {
-    @include callout-gradient();
+    @include callout-gradient('default', 0, 'layer');
 
+    border: 1px solid transparent;
     background-color: $layer;
+    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 4px 10px 2px $ai-drop-shadow;
   }
 
-  // Start the gradient 64px from bottom only when two buttons are present
   .#{$prefix}--modal--slug
-    .#{$prefix}--modal-container:has(
-      .#{$prefix}--btn-set:not(.#{$prefix}--modal-footer--three-button)
-        > button:not(:only-child)
-    ) {
-    @include callout-gradient('default', 64px);
+    .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) {
+    @include callout-gradient('default', 64px, 'layer');
 
-    background-color: $layer;
+    box-shadow: inset 0 -80px 0 -16px $layer,
+      inset 0 -160px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow;
   }
 
   .#{$prefix}--modal--slug .#{$prefix}--slug {
@@ -511,6 +477,19 @@
     inset-inline-end: 0;
   }
 
+  .#{$prefix}--modal--slug
+    .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content {
+    mask-image: linear-gradient(
+        to bottom,
+        $layer calc(100% - 80px),
+        transparent calc(100% - 48px),
+        transparent 100%
+      ),
+      linear-gradient(to left, $layer 0, 16px, transparent 16px),
+      linear-gradient(to right, $layer 0, 2px, transparent 2px),
+      linear-gradient(to top, $layer 0, 2px, transparent 2px);
+  }
+
   .#{$prefix}--modal-header
     > .#{$prefix}--slug:has(+ .#{$prefix}--modal-close-button),
   .#{$prefix}--modal-header
@@ -522,8 +501,14 @@
     inset-inline-end: convert.to-rem(48px);
   }
 
+  .#{$prefix}--modal--slug
+    .#{$prefix}--modal-content--overflow-indicator::before,
+  .#{$prefix}--modal--slug .#{$prefix}--modal-content--overflow-indicator {
+    display: none;
+  }
+
   // Windows HCM fix
-  /* stylelint-disable */
+  /* stylelint-disable no-duplicate-selectors */
   .#{$prefix}--modal-close__icon {
     @include high-contrast-mode('icon-fill');
   }
@@ -531,5 +516,5 @@
   .#{$prefix}--modal-close:focus {
     @include high-contrast-mode('focus');
   }
-  /* stylelint-enable */
+  /* stylelint-enable no-duplicate-selectors */
 }

package/scss/components/progress-bar/_progress-bar.scss

@@ -75,7 +75,7 @@
     position: absolute;
     animation-duration: 1400ms;
     animation-iteration-count: infinite;
-    animation-name: progress-bar-indeterminate;
+    animation-name: #{$prefix}--progress-bar-indeterminate;
     animation-timing-function: linear;
     background-image: linear-gradient(
       90deg,
@@ -91,7 +91,7 @@
   [dir='rtl']
     .#{$prefix}--progress-bar--indeterminate
     .#{$prefix}--progress-bar__track::after {
-    animation-name: progress-bar-indeterminate-rtl;
+    animation-name: #{$prefix}--progress-bar-indeterminate-rtl;
   }
 
   .#{$prefix}--progress-bar__helper-text {
@@ -139,7 +139,7 @@
     margin-inline-end: 0;
   }
 
-  @keyframes progress-bar-indeterminate {
+  @keyframes #{$prefix}--progress-bar-indeterminate {
     0% {
       background-position-x: 25%;
     }
@@ -150,7 +150,7 @@
     }
   }
 
-  @keyframes progress-bar-indeterminate-rtl {
+  @keyframes #{$prefix}--progress-bar-indeterminate-rtl {
     0% {
       background-position-x: -105%;
     }

package/scss/components/tile/_tile.scss

@@ -274,10 +274,6 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--tile-content__above-the-fold {
-    display: block;
-  }
-
   .#{$prefix}--tile-content__below-the-fold {
     display: block;
     opacity: 0;

package/scss/utilities/_ai-gradient.scss

@@ -124,6 +124,7 @@
   } @else {
     background: linear-gradient(
           to top,
+          $background $start,
           theme.$ai-aura-start $start,
           theme.$ai-aura-end 50%
         )

package/scss/utilities/_keyframes.scss

@@ -4,6 +4,7 @@
 // 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 *;
 
 @mixin content-visible {
   opacity: 1;
@@ -15,7 +16,7 @@
   visibility: hidden;
 }
 
-@keyframes hide-feedback {
+@keyframes #{$prefix}--hide-feedback {
   0% {
     @include content-visible;
   }
@@ -25,7 +26,7 @@
   }
 }
 
-@keyframes show-feedback {
+@keyframes #{$prefix}--show-feedback {
   0% {
     @include content-hidden;
   }
@@ -35,7 +36,7 @@
   }
 }
 
-@keyframes skeleton {
+@keyframes #{$prefix}--skeleton {
   0% {
     opacity: 0.3;
     transform: scaleX(0);

package/scss/utilities/_skeleton.scss

@@ -7,6 +7,7 @@
 
 @use 'keyframes';
 @use '../theme' as *;
+@use '../config' as *;
 
 /// Skeleton loading animation
 /// @access public
@@ -30,7 +31,7 @@
 
   &::before {
     position: absolute;
-    animation: 3000ms ease-in-out skeleton infinite;
+    animation: 3000ms ease-in-out #{$prefix}--skeleton infinite;
     background: $skeleton-element;
     block-size: 100%;
     content: '';
@@ -55,7 +56,7 @@
 
   &::before {
     position: absolute;
-    animation: 3000ms ease-in-out skeleton infinite;
+    animation: 3000ms ease-in-out #{$prefix}--skeleton infinite;
     background: $skeleton-element;
     block-size: 100%;
     content: '';

package/scss/utilities/_tooltip.scss

@@ -182,7 +182,7 @@
       opacity: 1;
     }
 
-    @keyframes tooltip-fade {
+    @keyframes #{$prefix}--tooltip-fade {
       from {
         opacity: 0;
       }
@@ -202,7 +202,8 @@
     .#{$prefix}--assistive-text,
     + .#{$prefix}--assistive-text,
     &.#{$prefix}--tooltip--a11y::before {
-      animation: tooltip-fade $duration-fast-01 motion(standard, productive);
+      animation: #{$prefix}--tooltip-fade $duration-fast-01
+        motion(standard, productive);
     }
   }