@carbon/styles 1.70.0-rc.0 → 1.70.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.70.0-rc.0",
+  "version": "1.70.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "d3bd715a72872535c5b4156720828fe1cd9365f5"
+  "gitHead": "ab3eba8531c341d5ee5d956b962d7cce04944ac3"
 }

package/scss/components/checkbox/_checkbox.scss

@@ -229,6 +229,7 @@
   .#{$prefix}--checkbox__validation-msg {
     display: none;
     align-items: flex-start;
+    inline-size: 100%;
     margin-block-start: $spacing-02;
   }
 
@@ -366,12 +367,30 @@
     transform: scale(1.2) rotate3d(0.5, 1, 0, 158deg);
   }
 
-  // Slug styles
+  //-----------------------------------------------
+  // Decorator
+  //-----------------------------------------------
+  .#{$prefix}--checkbox-group--decorator legend.#{$prefix}--label,
+  .#{$prefix}--checkbox-wrapper--decorator .#{$prefix}--checkbox-label-text {
+    display: flex;
+  }
+  // Remove v12
   .#{$prefix}--checkbox-group--slug legend.#{$prefix}--label,
   .#{$prefix}--checkbox-wrapper--slug .#{$prefix}--checkbox-label-text {
     display: flex;
   }
 
+  .#{$prefix}--checkbox-group--decorator
+    legend.#{$prefix}--label
+    .#{$prefix}--checkbox-group-inner--decorator
+    > *,
+  .#{$prefix}--checkbox-wrapper--decorator
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--checkbox-wrapper-inner--decorator
+    > * {
+    margin-inline-start: $spacing-03;
+  }
+  // Remove v12
   .#{$prefix}--checkbox-group--slug
     legend.#{$prefix}--label
     .#{$prefix}--ai-label,
@@ -385,6 +404,13 @@
     margin-inline-start: $spacing-03;
   }
 
+  .#{$prefix}--checkbox-wrapper--decorator
+    .#{$prefix}--checkbox-label-text
+    .#{$prefix}--ai-label__button--inline {
+    line-height: inherit;
+    margin-block-start: convert.to-rem(-1px);
+  }
+  // Remove v12
   .#{$prefix}--checkbox-wrapper--slug
     .#{$prefix}--checkbox-label-text
     .#{$prefix}--ai-label__button--inline,
@@ -395,7 +421,9 @@
     margin-block-start: convert.to-rem(-1px);
   }
 
-  // horizontal checkbox group
+  //-----------------------------------------------
+  // Horizontal group
+  //-----------------------------------------------
   .#{$prefix}--checkbox-group--horizontal {
     position: relative;
     display: flex;

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

@@ -54,6 +54,12 @@
     transition: opacity $duration-fast-01 motion(standard, productive);
   }
 
+  .#{$prefix}--select--readonly .#{$prefix}--select-input__wrapper::before {
+    background-color: $border-subtle !important; /* stylelint-disable-line declaration-no-important */
+    opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+    transition: none;
+  }
+
   .#{$prefix}--time-picker--fluid__wrapper
     .#{$prefix}--select-input__wrapper::after {
     inset-inline-end: 0;

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

@@ -99,6 +99,10 @@ $list-box-menu-width: convert.to-rem(300px);
     }
   }
 
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly.#{$prefix}--list-box {
+    cursor: default;
+  }
+
   .#{$prefix}--list-box--lg {
     block-size: convert.to-rem(48px);
     max-block-size: convert.to-rem(48px);

package/scss/components/modal/_modal.scss

@@ -365,12 +365,15 @@
     margin: 0;
   }
 
-  // Slug styles
-  .#{$prefix}--modal--slug.#{$prefix}--modal {
+  // AIlabel styles
+  .#{$prefix}--modal--slug.#{$prefix}--modal,
+  .#{$prefix}--modal--decorator:has(.#{$prefix}--ai-label).#{$prefix}--modal {
     background-color: $ai-overlay;
   }
 
-  .#{$prefix}--modal--slug .#{$prefix}--modal-container {
+  .#{$prefix}--modal--slug .#{$prefix}--modal-container,
+  .#{$prefix}--modal--decorator:has(.#{$prefix}--ai-label)
+    .#{$prefix}--modal-container {
     @include ai-popover-gradient('default', 0, 'layer');
 
     border: 1px solid transparent;
@@ -381,6 +384,8 @@
   }
 
   .#{$prefix}--modal--slug
+    .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer),
+  .#{$prefix}--modal--decorator:has(.#{$prefix}--ai-label)
     .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) {
     @include ai-popover-gradient('default', 64px, 'layer');
 
@@ -391,6 +396,8 @@
   }
 
   .#{$prefix}--modal--slug
+    .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content,
+  .#{$prefix}--modal--decorator
     .#{$prefix}--modal-content.#{$prefix}--modal-scroll-content {
     mask-image: linear-gradient(
         to bottom,
@@ -403,6 +410,19 @@
       linear-gradient(to top, $layer 0, 2px, transparent 2px);
   }
 
+  .#{$prefix}--modal-header
+    > .#{$prefix}--modal--inner__decorator:has(
+      + .#{$prefix}--modal-close-button
+    )
+    > *,
+  .#{$prefix}--modal-header
+    > .#{$prefix}--modal-close-button
+    ~ .#{$prefix}--modal--inner__decorator
+    > *,
+  .#{$prefix}--modal--decorator
+    .#{$prefix}--modal-container-body
+    > .#{$prefix}--modal--inner__decorator
+    > *,
   .#{$prefix}--modal-header
     > .#{$prefix}--ai-label:has(+ .#{$prefix}--modal-close-button),
   .#{$prefix}--modal-header
@@ -424,9 +444,21 @@
     inset-inline-end: convert.to-rem(48px);
   }
 
-  .#{$prefix}--modal--slug
+  .#{$prefix}--modal-header
+    > .#{$prefix}--modal--inner__decorator:not(:has(.#{$prefix}--ai-label))
+    > * {
+    inset-block-start: 1rem;
+  }
+
+  .#{$prefix}--modal-header
+    > .#{$prefix}--modal--inner__decorator:has(.#{$prefix}--ai-label--revert)
+    > * {
+    inset-block-start: 1.475rem;
+  }
+
+  .#{$prefix}--modal--decorator
     .#{$prefix}--modal-content--overflow-indicator::before,
-  .#{$prefix}--modal--slug .#{$prefix}--modal-content--overflow-indicator {
+  .#{$prefix}--modal--decorator .#{$prefix}--modal-content--overflow-indicator {
     display: none;
   }
 

package/scss/components/multiselect/_multiselect.scss

@@ -201,7 +201,7 @@
 
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
     .#{$prefix}--tag--filter {
-    box-shadow: 0 0 0 1px $background-inverse;
+    box-shadow: 0 0 0 1px $border-subtle;
   }
 
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly

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

@@ -289,12 +289,23 @@ $radio-border-width: 1px !default;
   }
 
   // AILabel styles
+  .#{$prefix}--radio-button-group--decorator legend.#{$prefix}--label,
+  .#{$prefix}--radio-button-wrapper--decorator
+    .#{$prefix}--radio-button__label-text,
   .#{$prefix}--radio-button-group--slug legend.#{$prefix}--label,
   .#{$prefix}--radio-button-wrapper--slug
     .#{$prefix}--radio-button__label-text {
     display: flex;
   }
 
+  .#{$prefix}--radio-button-group--decorator
+    legend.#{$prefix}--label
+    .#{$prefix}--radio-button-group-inner--decorator
+    > *,
+  .#{$prefix}--radio-button-wrapper--decorator
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--radio-button-wrapper-inner--decorator
+    > *,
   .#{$prefix}--radio-button-group--slug
     legend.#{$prefix}--label
     .#{$prefix}--ai-label,
@@ -310,6 +321,9 @@ $radio-border-width: 1px !default;
     margin-inline-start: $spacing-03;
   }
 
+  .#{$prefix}--radio-button-wrapper--decorator
+    .#{$prefix}--radio-button__label-text
+    .#{$prefix}--ai-label__button--inline,
   .#{$prefix}--radio-button-wrapper--slug
     .#{$prefix}--radio-button__label-text
     .#{$prefix}--ai-label__button--inline,

package/scss/components/tag/_tag.scss

@@ -246,6 +246,14 @@
     );
   }
 
+  .#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--high-contrast:not(.#{$prefix}--tag--operational)
+    .#{$prefix}--tag__close-icon {
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
   .#{$prefix}--tag--outline:not(.#{$prefix}--tag--operational):not(span):not(
       [disabled]
     ) {
@@ -405,11 +413,19 @@
     border-color: currentColor;
   }
 
+  .#{$prefix}--tag--filter .#{$prefix}--tag__decorator > *,
   .#{$prefix}--tag--filter .#{$prefix}--ai-label,
   .#{$prefix}--tag--filter .#{$prefix}--slug {
     min-inline-size: convert.to-rem(32.14px);
   }
 
+  // Decorator styles
+  .#{$prefix}--tag
+    .#{$prefix}--tag__decorator:not(:has(.#{$prefix}--ai-label)) {
+    block-size: 1rem;
+    text-align: center;
+  }
+
   // Windows HCM fix
 
   .#{$prefix}--tag {

package/scss/components/tile/_tile.scss

@@ -388,21 +388,29 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   // AILabel styles
+  .#{$prefix}--tile > .#{$prefix}--tile--inner-decorator > *,
+  .#{$prefix}--tile--expandable > div > .#{$prefix}--tile--inner-decorator > *,
   .#{$prefix}--tile > .#{$prefix}--ai-label,
   .#{$prefix}--tile--expandable > div > .#{$prefix}--ai-label,
   .#{$prefix}--tile > .#{$prefix}--slug,
   .#{$prefix}--tile--expandable > div > .#{$prefix}--slug,
-  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon {
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--ai-label-icon {
     position: absolute;
     inset-block-start: $spacing-05;
     inset-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable > .#{$prefix}--slug {
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
+    > .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
     > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio
@@ -418,6 +426,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     }
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
+    > .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
     > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--selectable.#{$prefix}--tile--radio.#{$prefix}--tile--is-selected
@@ -425,11 +436,18 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     inset-inline-end: $spacing-08;
   }
 
+  .#{$prefix}--tile.#{$prefix}--tile--clickable
+    > .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--ai-label,
   .#{$prefix}--tile.#{$prefix}--tile--clickable > .#{$prefix}--slug {
     pointer-events: none;
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--tile--ai-label-icon
+    ).#{$prefix}--tile,
+  .#{$prefix}--tile--decorator:has(.#{$prefix}--ai-label).#{$prefix}--tile,
   .#{$prefix}--tile--slug.#{$prefix}--tile {
     @include ai-popover-gradient('default', 0, 'layer');
 
@@ -439,10 +457,16 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       0 4px 8px 0 $ai-drop-shadow;
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--ai-label
+    ).#{$prefix}--tile--expandable:hover,
   .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
     @include ai-popover-gradient('default', 0, 'layer');
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
@@ -457,6 +481,12 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     transition: opacity $duration-fast-02 motion(standard, productive);
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--ai-label
+    ).#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--ai-label
+    ).#{$prefix}--tile--clickable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
     @include ai-popover-gradient('hover', 0, 'layer');
@@ -466,17 +496,25 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       0 4px 10px 2px $ai-drop-shadow;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable:hover::before,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable:hover::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:hover::before {
     opacity: 1;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable:focus,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable:focus,
+  .#{$prefix}--tile-input:focus + .#{$prefix}--tile--decorator.#{$prefix}--tile,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:focus,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable:focus,
   .#{$prefix}--tile-input:focus + .#{$prefix}--tile--slug.#{$prefix}--tile {
     outline-offset: -1px;
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--tile--inner-decorator .#{$prefix}--ai-label
+    ).#{$prefix}--tile--selectable::after,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
     @include ai-popover-gradient('selected', 0, 'layer');
 
@@ -485,18 +523,27 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       0 4px 8px 0 $ai-drop-shadow;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable:hover::after,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable:hover::after {
     opacity: 0;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--is-selected::after,
   .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected::after {
     opacity: 1;
   }
 
+  .#{$prefix}--tile--decorator:has(
+      .#{$prefix}--tile--inner-decorator
+    ).#{$prefix}--tile--is-selected,
   .#{$prefix}--tile--slug.#{$prefix}--tile--is-selected {
     border-color: $border-inverse;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable
+    .#{$prefix}--tile-content,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     .#{$prefix}--tile-content,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable
@@ -505,6 +552,15 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     cursor: pointer;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--clickable
+    .#{$prefix}--tile-content,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--is-selected
+    .#{$prefix}--tile--inner-decorator
+    > *,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     .#{$prefix}--tile-content,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable .#{$prefix}--tile-content,
@@ -515,6 +571,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     z-index: 1;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    .#{$prefix}--tile--inner-decorator
+    > *:has(> .#{$prefix}--popover--open),
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
     .#{$prefix}--ai-label:has(> .#{$prefix}--popover--open),
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
@@ -522,6 +581,11 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     z-index: 2;
   }
 
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile--inner-decorator
+    > *,
+  .#{$prefix}--tile--decorator.#{$prefix}--tile--selectable
+    > .#{$prefix}--tile__checkmark,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--ai-label,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable > .#{$prefix}--slug,
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable
@@ -529,6 +593,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     z-index: 1;
   }
 
+  .#{$prefix}--tile--expandable:has(
+      .#{$prefix}--tile--inner-decorator > * > .#{$prefix}--popover--open
+    ),
   .#{$prefix}--tile--expandable:has(
       .#{$prefix}--ai-label > .#{$prefix}--popover--open
     ),
@@ -538,16 +605,19 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     overflow: visible;
   }
 
-  // To Do: Replace svg overrides with actual AI icon
-  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon rect {
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--ai-label-icon rect {
     stroke: $icon-primary;
   }
 
-  .#{$prefix}--tile--clickable .#{$prefix}--tile--slug-icon path {
+  .#{$prefix}--tile--clickable .#{$prefix}--tile--ai-label-icon path {
     fill: $icon-primary;
   }
 
   // Tile with slug and rounded corners
+  .#{$prefix}--tile--decorator-rounded,
+  .#{$prefix}--tile--decorator-rounded.#{$prefix}--tile--selectable::before,
+  .#{$prefix}--tile--decorator-rounded.#{$prefix}--tile--selectable::after,
+  .#{$prefix}--tile--decorator-rounded.#{$prefix}--tile--clickable::before,
   .#{$prefix}--tile--slug-rounded,
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug-rounded.#{$prefix}--tile--selectable::after,
@@ -555,6 +625,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     border-radius: $spacing-03;
   }
 
+  .#{$prefix}--tile--decorator-rounded .#{$prefix}--tile__chevron,
   .#{$prefix}--tile--slug-rounded .#{$prefix}--tile__chevron {
     border-end-end-radius: $spacing-03;
   }