@carbon/styles 1.39.0 → 1.41.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.39.0",
+  "version": "1.41.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -38,13 +38,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.19.0",
+    "@carbon/colors": "^11.20.0-rc.0",
     "@carbon/feature-flags": "^0.16.0",
-    "@carbon/grid": "^11.20.0",
-    "@carbon/layout": "^11.19.0",
-    "@carbon/motion": "^11.15.0",
-    "@carbon/themes": "^11.25.0",
-    "@carbon/type": "^11.24.0",
+    "@carbon/grid": "^11.21.0-rc.0",
+    "@carbon/layout": "^11.20.0-rc.0",
+    "@carbon/motion": "^11.16.0-rc.0",
+    "@carbon/themes": "^11.26.0-rc.0",
+    "@carbon/type": "^11.25.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "7c151d929564f2cf414f3a0fef4a5fc888242fae"
+  "gitHead": "da28d28a2d3a34503099e25255076efd3da4db9f"
 }

package/scss/_zone.scss

@@ -36,8 +36,8 @@ $-components: (
 
 @each $name, $theme in $zones {
   .#{config.$prefix}--#{'' + $name} {
-    background: var(--cds-background);
-    color: var(--cds-text-primary);
+    background-color: custom-property.get-var('background');
+    color: custom-property.get-var('text-primary');
 
     @each $key, $value in $theme {
       @if type-of($value) == color {

package/scss/components/accordion/_accordion.scss

@@ -82,27 +82,17 @@ $content-padding: 0 0 0 $spacing-05 !default;
     padding-inline-end: layout.density('padding-inline');
     transition: background-color motion(standard, productive) $duration-fast-02;
 
-    &:hover::before,
-    &:focus::before {
-      position: absolute;
-      block-size: calc(100% + 2px);
-      content: '';
-      inline-size: 100%;
-      inset-block-start: -1px;
-      inset-inline-start: 0;
-    }
-
-    &:hover::before {
+    &:hover {
       background-color: $layer-hover;
     }
 
     &:focus {
+      box-shadow: /* Border top */ 0 -1px 0 0 $focus, inset 0 1px 0 0 $focus,
+        /* Border right */ inset 2px 0 0 0 $focus,
+        /* Border bottom */ 0 1px 0 0 $focus, inset 0 -1px 0 0 $focus,
+        /* Border left */ inset -2px 0 0 0 $focus;
       outline: none;
     }
-
-    &:focus::before {
-      @include focus-outline('outline-compat');
-    }
   }
 
   // Disabled styles

package/scss/components/date-picker/_date-picker.scss

@@ -51,11 +51,14 @@
   }
 
   .#{$prefix}--date-picker-input__wrapper {
-    position: relative;
     display: flex;
     align-items: center;
   }
 
+  .#{$prefix}--date-picker-input__wrapper span {
+    position: relative;
+  }
+
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple
     .#{$prefix}--date-picker__input,
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple .#{$prefix}--label {

package/scss/components/file-uploader/_file-uploader.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 '../../breakpoint' as *;
 
 @use '../../config' as *;
 @use '../../motion' as *;
@@ -139,7 +140,7 @@
     display: grid;
     align-items: center;
     background-color: $layer;
-    gap: convert.to-rem(12px) $spacing-05;
+    gap: convert.to-rem(12px) 0;
     grid-auto-rows: auto;
     grid-template-columns: 1fr auto;
     margin-block-end: $spacing-03;
@@ -171,15 +172,66 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    .#{$prefix}--file-filename-container-wrap {
+      margin-block-start: 1px;
+      max-inline-size: 17.5rem;
+      padding-inline-start: $spacing-05;
+      @include breakpoint-down(410px) {
+        max-inline-size: 13.5rem;
+      }
+    }
+
+    .#{$prefix}--file-filename-container-wrap-invalid {
+      max-inline-size: 15.5rem;
+
+      .#{$prefix}--file-filename-tooltip {
+        inline-size: -webkit-fill-available;
+        padding-inline-start: $spacing-05;
+        @-moz-document url-prefix() {
+          inline-size: -moz-available;
+        }
+      }
+    }
+
+    .#{$prefix}--file-filename-tooltip {
+      inline-size: -webkit-fill-available;
+      @-moz-document url-prefix() {
+        inline-size: -moz-available;
+      }
+    }
+
+    .#{$prefix}--file-filename-button {
+      @include type-style('body-compact-01');
+
+      overflow: hidden;
+      padding: 0;
+      border: none;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+      font: inherit;
+      inline-size: -webkit-fill-available;
+      outline: inherit;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      @-moz-document url-prefix() {
+        inline-size: -moz-available;
+      }
+    }
+    .#{$prefix}--file-filename-button:focus {
+      outline: revert;
+    }
   }
 
   .#{$prefix}--file__selected-file--md {
-    gap: $spacing-03 $spacing-05;
+    gap: $spacing-03 0;
     min-block-size: convert.to-rem(40px);
   }
 
   .#{$prefix}--file__selected-file--sm {
-    gap: $spacing-02 $spacing-05;
+    gap: $spacing-02 0;
     min-block-size: convert.to-rem(32px);
   }
 
@@ -259,21 +311,32 @@
     color: $text-primary;
     padding-block-end: $spacing-03;
   }
-
   .#{$prefix}--file__state-container {
     display: flex;
     align-items: center;
     justify-content: center;
     min-inline-size: 1.5rem;
-    padding-inline-end: $spacing-05;
+    padding-inline-end: convert.to-rem(12px);
 
     .#{$prefix}--loading__svg {
       stroke: $icon-primary;
     }
   }
 
+  .#{$prefix}--file__state-container .#{$prefix}--file-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-02;
+    border: none;
+    background-color: transparent;
+    block-size: $spacing-05;
+    inline-size: $spacing-06;
+  }
+
   .#{$prefix}--file__state-container .#{$prefix}--file-complete {
     fill: $interactive;
+    inline-size: $spacing-06;
 
     &:focus {
       @include focus-outline('border');

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -60,6 +60,12 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper
+    > span {
+    inline-size: 100%;
+  }
+
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper
     .#{$prefix}--date-picker__input {

package/scss/components/list-box/_list-box.scss

@@ -405,7 +405,7 @@ $list-box-menu-width: convert.to-rem(300px);
     block-size: convert.to-rem(24px);
     cursor: pointer;
     inline-size: convert.to-rem(24px);
-    inset-inline-end: $spacing-05;
+    inset-inline-end: $spacing-04;
     outline: none;
     transition: transform $duration-fast-01 motion(standard, productive);
   }

package/scss/components/modal/_modal.scss

@@ -202,8 +202,8 @@
     font-weight: 400;
     grid-column: 1/-1;
     grid-row: 2/-2;
-    margin-block-end: $spacing-09;
     overflow-y: auto;
+    padding-block-end: $spacing-09;
     // Required to accommodate focus outline's negative offset:
     padding-block-start: $spacing-03;
     // anything besides text/p spans full width, with just 16px padding
@@ -347,22 +347,35 @@
   // -----------------------------
   // Modal overflow
   // -----------------------------
+  .#{$prefix}--modal-scroll-content {
+    // Required to accommodate focus outline's negative offset when scrolling in Chrome
+    border-block-end: 2px solid transparent;
+  }
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
-    padding-block-end: $spacing-07;
+    padding-block-end: $spacing-06;
   }
 
   .#{$prefix}--modal-content--overflow-indicator {
     position: absolute;
-    background-image: linear-gradient(to bottom, transparent, $layer);
-    block-size: convert.to-rem(32px);
-    content: '';
+    background: $layer;
+    block-size: convert.to-rem(48px);
     grid-column: 1/-1;
     grid-row: 2/-2;
-    inline-size: 100%;
-    inset-block-end: $spacing-09;
+    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
@@ -379,7 +392,6 @@
   .#{$prefix}--modal-content:focus
     ~ .#{$prefix}--modal-content--overflow-indicator {
     margin: 0 2px 2px;
-    inline-size: calc(100% - 4px);
   }
 
   @media screen and (-ms-high-contrast: active) {

package/scss/components/slider/_slider.scss

@@ -30,17 +30,21 @@
     position: relative;
     display: flex;
     align-items: center;
+    gap: 1rem;
     user-select: none;
   }
 
   .#{$prefix}--slider {
     position: relative;
     padding: $spacing-05 0;
-    margin: 0 $spacing-05;
     cursor: pointer;
     inline-size: 100%;
     max-inline-size: convert.to-rem(640px);
     min-inline-size: convert.to-rem(200px);
+
+    .#{$prefix}--slider-container--two-handles & {
+      margin-inline: rem(4px);
+    }
   }
 
   .#{$prefix}--slider__range-label {
@@ -48,10 +52,6 @@
 
     color: $text-primary;
     white-space: nowrap;
-
-    &:last-of-type {
-      margin-inline-end: $spacing-05;
-    }
   }
 
   .#{$prefix}--slider__track {
@@ -117,10 +117,102 @@
     }
   }
 
+  .#{$prefix}--slider__thumb-icon {
+    fill: $layer-selected-inverse;
+  }
+
+  .#{$prefix}--slider__thumb-icon--focus {
+    display: none;
+    fill: $interactive;
+  }
+
+  .#{$prefix}--slider__thumb--lower,
+  .#{$prefix}--slider__thumb--upper {
+    display: block;
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    border-radius: unset;
+    background-color: transparent;
+    block-size: 24px;
+    box-shadow: none;
+    inline-size: 16px;
+    transform: translate(-100%, -50%);
+    transition: none;
+
+    &::before {
+      position: absolute;
+      z-index: -1;
+      display: block;
+      background: $background;
+      block-size: convert.to-rem(2px);
+      content: '';
+      inline-size: convert.to-rem(6px);
+      inset-block-start: calc(50% - #{convert.to-rem(2px) / 2});
+      inset-inline-end: 0;
+    }
+
+    &:hover {
+      transform: translate(-100%, -50%);
+
+      .#{$prefix}--slider__thumb-icon {
+        fill: $text-secondary;
+      }
+    }
+
+    &:active {
+      box-shadow: none;
+      transform: translate(-100%, -50%);
+    }
+
+    &:focus {
+      background-color: transparent;
+      box-shadow: none;
+      transform: translate(-100%, -50%);
+
+      .#{$prefix}--slider__thumb-icon {
+        display: none;
+        fill: $interactive;
+      }
+
+      .#{$prefix}--slider__thumb-icon--focus {
+        display: block;
+      }
+    }
+  }
+
+  .#{$prefix}--slider__thumb--lower:focus::before,
+  .#{$prefix}--slider__thumb--upper:focus::before {
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--slider__thumb--upper {
+    transform: translate(0, -50%);
+
+    &::before {
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+    }
+
+    &:hover {
+      transform: translate(0, -50%);
+    }
+
+    &:active {
+      transform: translate(0, -50%);
+    }
+
+    &:focus {
+      transform: translate(0, -50%);
+    }
+  }
+
   .#{$prefix}--slider__input {
     display: none;
   }
 
+  .#{$prefix}--slider-text-input-wrapper {
+    position: relative;
+  }
+
   .#{$prefix}--slider-text-input,
   .#{$prefix}-slider-text-input {
     -moz-appearance: textfield;
@@ -139,7 +231,7 @@
   }
 
   .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
-    background-color: $interactive;
+    background-color: $border-interactive;
   }
 
   // Invalid & warn state
@@ -161,7 +253,6 @@
   .#{$prefix}--slider__validation-msg.#{$prefix}--form-requirement {
     display: block;
     overflow: visible;
-    margin-block-start: 0;
     max-block-size: 100%;
   }
 
@@ -241,15 +332,26 @@
     cursor: default;
   }
 
-  .#{$prefix}--slider--readonly .#{$prefix}--slider__thumb {
+  .#{$prefix}--slider-container--readonly .#{$prefix}--slider__thumb {
     block-size: 0;
     inline-size: 0;
+
+    &::before,
+    &::after {
+      display: none;
+    }
   }
 
-  .#{$prefix}--slider--readonly ~ .#{$prefix}--slider-text-input {
+  .#{$prefix}--slider-container--readonly .#{$prefix}--slider-text-input {
     background-color: transparent;
   }
 
+  .#{$prefix}--slider__status-msg.#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-block-size: 100%;
+  }
+
   // Skeleton state
   .#{$prefix}--slider-container.#{$prefix}--skeleton
     .#{$prefix}--slider__range-label {
@@ -265,11 +367,20 @@
     pointer-events: none;
   }
 
-  .#{$prefix}--slider-container.#{$prefix}--skeleton
+  .#{$prefix}--slider-container.#{$prefix}--skeleton {
     .#{$prefix}--slider__thumb {
-    cursor: default;
-    inset-inline-start: 50%;
-    pointer-events: none;
+      cursor: default;
+      inset-inline-start: 50%;
+      pointer-events: none;
+    }
+
+    .#{$prefix}--slider__thumb--lower {
+      inset-inline-start: 0;
+    }
+
+    .#{$prefix}--slider__thumb--upper {
+      inset-inline-start: 100%;
+    }
   }
 
   // Windows HCM fix