@carbon/styles 1.40.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.40.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": "99314f69da3f5791c3c0f46564a47ef9ee7c9e0f"
+  "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/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/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/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