@carbon/styles 1.17.0 → 1.18.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.17.0",
+  "version": "1.18.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,13 +32,13 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.8.0",
-    "@carbon/feature-flags": "^0.9.0",
-    "@carbon/grid": "^11.7.0",
-    "@carbon/layout": "^11.7.0",
-    "@carbon/motion": "^11.5.0",
-    "@carbon/themes": "^11.12.0",
-    "@carbon/type": "^11.11.0",
+    "@carbon/colors": "^11.9.0-rc.0",
+    "@carbon/feature-flags": "^0.10.0-rc.0",
+    "@carbon/grid": "^11.8.0-rc.0",
+    "@carbon/layout": "^11.8.0-rc.0",
+    "@carbon/motion": "^11.6.0-rc.0",
+    "@carbon/themes": "^11.13.0-rc.0",
+    "@carbon/type": "^11.12.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "06fdbdbc9cade1f6c352024175d348f9bd107b14"
+  "gitHead": "50cfaf729cfe80fecb6f7371ef13b53b25514145"
 }

package/scss/components/checkbox/_checkbox.scss

@@ -180,6 +180,37 @@
     background-color: $icon-disabled;
   }
 
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  .#{$prefix}--checkbox-wrapper--readonly .#{$prefix}--checkbox-label {
+    cursor: default;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly .#{$prefix}--checkbox-label-text {
+    cursor: text;
+    user-select: text;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly
+    .#{$prefix}--checkbox
+    + .#{$prefix}--checkbox-label::before {
+    border-color: $icon-disabled;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::before {
+    border: 1px solid $icon-disabled;
+    background: transparent;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::after {
+    border-color: $text-primary;
+  }
+
   //-----------------------------------------------
   // Skeleton
   //-----------------------------------------------

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

@@ -234,14 +234,15 @@ $copy-btn-feedback: $background-inverse !default;
     overflow-x: auto;
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre::after {
+  .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow
+    .#{$prefix}--snippet-container
+    pre::after {
     position: absolute;
     top: 0;
     right: 0;
     width: rem(16px);
     height: 100%;
-    // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
+    background-image: linear-gradient(to right, transparent, $layer);
     content: '';
   }
 

package/scss/components/contained-list/_contained-list.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:list';
+
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -31,6 +33,35 @@
     width: 100%;
   }
 
+  // Sizes
+
+  $sizes: (
+    // size: (height, item-block-padding)
+    'sm': (rem(32px), $spacing-03),
+    'md': (rem(40px), $spacing-04),
+    'lg': (rem(48px), $spacing-05),
+    'xl': (rem(64px), $spacing-06)
+  );
+
+  @each $size, $definition in $sizes {
+    $height: list.nth($definition, 1);
+    $item-block-padding: list.nth($definition, 2);
+
+    .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--#{$size}
+      .#{$prefix}--contained-list__header {
+      height: $height;
+    }
+
+    .#{$prefix}--contained-list--#{$size}
+      .#{$prefix}--contained-list-item__content,
+    .#{$prefix}--contained-list--#{$size}
+      .#{$prefix}--contained-list-item--clickable
+      .#{$prefix}--contained-list-item__content {
+      min-height: $height;
+      padding: calc(#{$item-block-padding} - #{rem(2px)}) $spacing-05;
+    }
+  }
+
   // "On Page" variant
 
   .#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
@@ -40,7 +71,6 @@
   .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
     @include type-style('heading-compact-01');
 
-    height: $spacing-09;
     border-bottom: 1px solid $border-subtle;
     background-color: $background;
     color: $text-primary;
@@ -92,7 +122,6 @@
     .#{$prefix}--contained-list-item__content {
     @include type-style('body-01');
 
-    padding: calc(#{$spacing-05} - #{rem(2px)}) $spacing-05;
     color: $text-primary;
   }
 

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

@@ -210,4 +210,14 @@
   .#{$prefix}--date-picker__icon {
     @include high-contrast-mode('icon-fill');
   }
+
+  // readonly
+  .#{$prefix}--date-picker__input[readonly] {
+    background: transparent;
+    cursor: text;
+  }
+
+  .#{$prefix}--date-picker__input[readonly] + .#{$prefix}--date-picker__icon {
+    fill: $icon-disabled;
+  }
 }

package/scss/components/number-input/_number-input.scss

@@ -440,13 +440,37 @@
     background: transparent;
   }
 
-  .#{$prefix}--number--readonly .#{$prefix}--number__controls {
-    display: none;
+  .#{$prefix}--number--readonly .#{$prefix}--number__control-btn {
+    color: $icon-disabled;
+    pointer-events: none;
+
+    &:hover {
+      background-color: transparent;
+      cursor: pointer;
+
+      &::before,
+      &::after {
+        background-color: transparent;
+      }
+    }
   }
 
-  .#{$prefix}--number__readonly-icon {
-    position: absolute;
-    right: rem(16px);
+  .#{$prefix}--number--readonly
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover {
+    outline: none;
+  }
+
+  .#{$prefix}--number--readonly .#{$prefix}--number__control-btn::before,
+  .#{$prefix}--number--readonly .#{$prefix}--number__control-btn::after {
+    background: transparent;
+  }
+
+  .#{$prefix}--number--readonly
+    .#{$prefix}--number__controls:hover
+    .#{$prefix}--number__rule-divider:not(:first-of-type) {
+    background-color: $border-subtle;
   }
 
   // Skeleton State

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -43,7 +43,7 @@
     }
 
     &:hover {
-      background-color: $background-hover;
+      background-color: $layer-hover;
     }
   }
 

package/scss/components/pagination/_pagination.scss

@@ -134,9 +134,7 @@
     border-right: 1px solid $border-subtle;
   }
 
-  .#{$prefix}--pagination
-    .#{$prefix}--select__page-number
-    .#{$prefix}--select-input {
+  .#{$prefix}--pagination__right {
     border-left: 1px solid $border-subtle;
   }
 
@@ -166,6 +164,16 @@
     margin-left: rem(1px);
   }
 
+  .#{$prefix}--pagination__right
+    .#{$prefix}--pagination__text.#{$prefix}--pagination__page-text {
+    margin-right: rem(1px);
+    margin-left: 1rem;
+  }
+
+  .#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty {
+    margin: 0;
+  }
+
   .#{$prefix}--pagination__left {
     padding: 0 $spacing-05 0 0;
 

package/scss/components/radio-button/_radio-button.scss

@@ -135,6 +135,24 @@ $radio-border-width: 1px !default;
     }
   }
 
+  // readonly
+  .#{$prefix}--radio-button-group--readonly
+    .#{$prefix}--radio-button
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    border-color: $icon-disabled;
+  }
+
+  .#{$prefix}--radio-button-group--readonly .#{$prefix}--radio-button__label {
+    cursor: default;
+  }
+
+  .#{$prefix}--radio-button-group--readonly
+    .#{$prefix}--radio-button__label-text {
+    cursor: text;
+    user-select: text;
+  }
+
   // Focus
 
   .#{$prefix}--radio-button:focus

package/scss/components/select/_select.scss

@@ -252,6 +252,16 @@
     }
   }
 
+  // readonly
+  .#{$prefix}--select--readonly .#{$prefix}--select-input {
+    background-color: transparent;
+    cursor: default;
+  }
+
+  .#{$prefix}--select--readonly .#{$prefix}--select__arrow {
+    fill: $icon-disabled;
+  }
+
   //Skeleton State
   .#{$prefix}--select.#{$prefix}--skeleton {
     @include skeleton;

package/scss/components/slider/_slider.scss

@@ -200,6 +200,20 @@
     }
   }
 
+  // readonly state
+  .#{$prefix}--slider--readonly {
+    cursor: default;
+  }
+
+  .#{$prefix}--slider--readonly .#{$prefix}--slider__thumb {
+    width: 0;
+    height: 0;
+  }
+
+  .#{$prefix}--slider--readonly ~ .#{$prefix}--slider-text-input {
+    background-color: transparent;
+  }
+
   // Skeleton state
   .#{$prefix}--slider-container.#{$prefix}--skeleton
     .#{$prefix}--slider__range-label {

package/scss/components/tabs/_tabs.scss

@@ -307,6 +307,10 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     //-----------------------------
     // Icon Item
     //-----------------------------
+    &.#{$prefix}--tabs__icon--default .#{$prefix}--tab--list,
+    &.#{$prefix}--tabs__icon--lg .#{$prefix}--tab--list {
+      overflow-x: visible;
+    }
 
     .#{$prefix}--tabs__nav-item--icon,
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {

package/scss/components/time-picker/_time-picker.scss

@@ -88,4 +88,20 @@
     height: rem(48px);
     max-height: rem(48px);
   }
+
+  // readonly
+  .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--time-picker--readonly .#{$prefix}--select-input {
+    background-color: transparent;
+    cursor: default;
+  }
+
+  .#{$prefix}--time-picker--readonly
+    .#{$prefix}--select-input
+    + .#{$prefix}--select__arrow {
+    fill: $icon-disabled;
+  }
 }

package/scss/components/toggle/_toggle.scss

@@ -126,6 +126,10 @@
     visibility: visible;
   }
 
+  // ----------------------------------------
+  // disabled
+  // ----------------------------------------
+
   .#{$prefix}--toggle--disabled .#{$prefix}--toggle__appearance {
     cursor: not-allowed;
   }
@@ -147,6 +151,35 @@
     fill: button.$button-disabled;
   }
 
+  // ----------------------------------------
+  // readonly
+  // ----------------------------------------
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__appearance {
+    cursor: default;
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__switch {
+    border: 1px solid $icon-disabled;
+    background-color: transparent;
+
+    &::before {
+      top: rem(2px);
+      left: rem(2px);
+      background-color: $text-primary;
+    }
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__check {
+    top: rem(5px);
+    right: rem(4px);
+    fill: $background;
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__text {
+    cursor: text;
+    user-select: text;
+  }
+
   // HCM
 
   .#{$prefix}--toggle__switch,