@carbon/styles 1.50.0-rc.0 → 1.50.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.50.0-rc.0",
+  "version": "1.50.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.30.0",
+    "@carbon/themes": "^11.31.0",
     "@carbon/type": "^11.25.0",
     "@ibm/plex": "6.0.0-next.6"
   },
@@ -65,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "fbec0e13b29a1c9b19ed22a1ae9b6f87107ba920"
+  "gitHead": "eb7d66891262363368b48211b9fd1caa78fa58f9"
 }

package/scss/__tests__/theme-test.js

@@ -153,6 +153,7 @@ describe('@carbon/styles/scss/theme', () => {
         "slug-callout-shadow-outer-02",
         "ai-inner-shadow",
         "ai-aura-start",
+        "ai-aura-start-table",
         "ai-aura-end",
         "ai-aura-hover-background",
         "ai-aura-hover-start",

package/scss/components/_index.scss

@@ -9,6 +9,7 @@
 @use 'aspect-ratio';
 @use 'breadcrumb';
 @use 'button';
+@use 'chat-button';
 @use 'checkbox';
 @use 'code-snippet';
 @use 'combo-box';

package/scss/components/chat-button/_chat-button.scss

@@ -0,0 +1,69 @@
+//
+// Copyright IBM Corp. 2016, 2024
+//
+// 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 '../button';
+@use '../../config' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/convert';
+
+@mixin chat-button {
+  .#{$prefix}--chat-btn {
+    border-radius: convert.to-rem(24px);
+  }
+
+  .#{$prefix}--chat-btn.#{$prefix}--btn--md {
+    border-radius: convert.to-rem(20px);
+  }
+
+  .#{$prefix}--chat-btn.#{$prefix}--btn--sm {
+    border-radius: convert.to-rem(16px);
+  }
+
+  // Quick action button
+  .#{$prefix}--chat-btn--quick-action {
+    align-items: center;
+    border: 1px solid $link-primary;
+  }
+
+  .#{$prefix}--chat-btn--quick-action:hover:not(:active):not([disabled]) {
+    border-color: transparent;
+    background: $background-hover;
+  }
+
+  .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:focus {
+    border-color: $focus;
+    box-shadow: inset 0 0 0 1px $focus;
+  }
+
+  .#{$prefix}--chat-btn--quick-action.#{$prefix}--btn--ghost:hover:focus {
+    border-color: $focus;
+    box-shadow: inset 0 0 0 1px $focus-inset;
+  }
+
+  .#{$prefix}--chat-btn--quick-action[disabled],
+  .#{$prefix}--chat-btn--quick-action[disabled]:hover {
+    border-color: button.$button-disabled;
+    color: button.$button-disabled;
+  }
+
+  .#{$prefix}--chat-btn--quick-action--selected,
+  .#{$prefix}--chat-btn--quick-action--selected[disabled],
+  .#{$prefix}--chat-btn--quick-action--selected[disabled]:hover {
+    border-color: transparent;
+    background: $background-selected;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--chat-btn--quick-action--selected:hover {
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--chat-btn.#{$prefix}--skeleton {
+    overflow: hidden;
+  }
+}

package/scss/components/chat-button/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'chat-button';
+@use 'chat-button';
+
+@include chat-button.chat-button;

package/scss/components/data-table/_data-table.scss

@@ -945,20 +945,94 @@
     margin: convert.to-rem(-3px) 0;
   }
 
+  // -------------------
   // Slug styles
+  // -------------------
   .#{$prefix}--data-table .#{$prefix}--table-column-slug {
     inline-size: $spacing-05;
     padding-inline-end: 0;
   }
 
-  .#{$prefix}--data-table
-    tbody
-    tr:has(> .#{$prefix}--table-column-slug--active) {
-    @include ai-gradient('left', 50%);
+  tr.#{$prefix}--data-table--slug-row,
+  tr.#{$prefix}--data-table--slug-row + .#{$prefix}--expandable-row {
+    @include ai-table-gradient();
 
     background-attachment: fixed;
   }
 
+  .#{$prefix}--data-table--slug-row {
+    box-shadow: inset 1px 0 $ai-border-strong;
+  }
+
+  // Remove table cell backgrounds that are overriding gradient background on row
+  .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--slug-row:hover td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row:hover
+    + .#{$prefix}--expandable-row[data-child-row]
+    td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover
+    + .#{$prefix}--expandable-row[data-child-row]:hover
+    > td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover > td,
+  tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row
+    + tr.#{$prefix}--expandable-row[data-child-row]
+    > td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+    td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+    td:first-of-type,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
+      .#{$prefix}--expandable-row
+    ):hover
+    > td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+    + tr[data-child-row]
+    > td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
+    > td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
+    > td:first-of-type {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--slug-row:hover,
+  tr.#{$prefix}--data-table--slug-row:hover
+    + .#{$prefix}--expandable-row[data-child-row],
+  tr.#{$prefix}--expandable-row--hover
+    + .#{$prefix}--expandable-row[data-child-row]:hover,
+  tr.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row,
+  tr.#{$prefix}--data-table--selected.#{$prefix}--parent-row.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row {
+    @include ai-table-gradient('hover');
+  }
+
+  tr.#{$prefix}--parent-row.cds--data-table--selected.#{$prefix}--data-table--slug-row,
+  .#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
+  tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row
+    + .#{$prefix}--expandable-row {
+    @include ai-table-gradient('selected');
+  }
+
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--data-table--selected td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--data-table--selected:hover td,
+  tbody tr.#{$prefix}--data-table--slug-row:hover td,
+  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+    td:not(.#{$prefix}--table-expand):not(
+      .#{$prefix}--table-column-checkbox
+    ):not(.#{$prefix}--table-column-slug) {
+    border-block-end-color: $border-subtle;
+  }
+
+  tr.#{$prefix}--expandable-row.cds--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
+    > td:not(.#{$prefix}--table-expand):not(
+      .#{$prefix}--table-column-checkbox
+    ):not(.#{$prefix}--table-column-slug) {
+    border-block-end: 1px solid $layer-selected;
+  }
+
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row:hover
+    td:first-of-type {
+    border-block-end: 1px solid transparent;
+  }
+
   .#{$prefix}--data-table
     thead
     th.#{$prefix}--table-sort__header--slug
@@ -966,11 +1040,12 @@
   .#{$prefix}--data-table
     thead
     th:has(> .#{$prefix}--table-header-label--slug) {
-    @include ai-gradient('top', 100%);
+    @include ai-table-gradient();
   }
 
   .#{$prefix}--table-column-slug .#{$prefix}--slug {
     position: absolute;
+    z-index: 2;
     transform: translateY(-50%);
   }
 
@@ -987,9 +1062,32 @@
   th
     .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
     .#{$prefix}--slug {
-    margin-inline-start: $spacing-03;
+    margin-inline-start: auto;
+  }
+
+  th.#{$prefix}--table-sort__header--slug,
+  th:has(.#{$prefix}--table-header-label--slug) {
+    box-shadow: inset 0 1px $ai-border-strong;
   }
 
+  td.#{$prefix}--table-cell--column-slug {
+    @include ai-table-gradient();
+  }
+
+  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):not(:first-of-type)
+    td.#{$prefix}--table-cell--column-slug {
+    // Same gradient as background
+    border-block-start: linear-gradient(
+      to right,
+      $ai-aura-start-table 0%,
+      $ai-aura-end 50%,
+      transparent 50%
+    );
+  }
+
+  tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row):not(:first-of-type)
+    td.#{$prefix}--table-cell--column-slug,
+
   // Windows HCM fix
   // stylelint-disable-next-line no-duplicate-selectors
   .#{$prefix}--data-table-content {

package/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -78,7 +78,7 @@
   }
 
   // Increase padding inside expandable row when only a slug OR checkbox is present in row
-  tbody:has(> tr.#{$prefix}--parent-row--slug)
+  tbody:has(> tr.#{$prefix}--data-table--slug-row)
     > tr.#{$prefix}--expandable-row[data-child-row]
     td,
   tbody:has(td.#{$prefix}--table-column-checkbox)
@@ -88,7 +88,7 @@
   }
 
   // Increase padding inside expandable row when slug AND checkbox is present in row
-  tbody:has(> tr.#{$prefix}--parent-row--slug):has(
+  tbody:has(> tr.#{$prefix}--data-table--slug-row):has(
       td.#{$prefix}--table-column-checkbox
     )
     > tr.#{$prefix}--expandable-row[data-child-row]
@@ -476,8 +476,8 @@
     border-block-end: 1px solid transparent;
   }
 
-  .#{$prefix}--parent-row--slug td,
-  .#{$prefix}--data-table tr.#{$prefix}--parent-row--slug:hover td {
+  .#{$prefix}--data-table--slug-row td,
+  .#{$prefix}--data-table tr.#{$prefix}--data-table--slug-row:hover td {
     border-block-start: 1px solid transparent;
   }
 

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -249,9 +249,14 @@
   }
 
   // Slug styles
+  .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon,
+  .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon-unsorted {
+    margin-inline-end: convert.to-rem(8px);
+    margin-inline-start: auto;
+  }
+
   .#{$prefix}--table-sort__header--slug .#{$prefix}--slug {
-    margin-inline-end: auto;
-    margin-inline-start: convert.to-rem(8px);
+    margin-inline-end: convert.to-rem(8px);
   }
 
   // Windows HCM fix

package/scss/utilities/_ai-gradient.scss

@@ -6,6 +6,7 @@
 //
 
 @use '../theme';
+@use './custom-property';
 
 /// Experimental - name and structure subject to change. Use at your own risk!
 /// Adds AI gradient styles to a component
@@ -37,27 +38,52 @@
   border-block-end-color: theme.$ai-border-strong;
 }
 
+@mixin ai-table-gradient($type: 'default', $span: 50%) {
+  @if $type == 'hover' {
+    background: linear-gradient(
+        to right,
+        theme.$ai-aura-hover-start 0%,
+        15%,
+        theme.$ai-aura-hover-end 50%
+      ),
+      theme.$ai-aura-hover-background;
+  } @else if $type == 'selected' {
+    background: linear-gradient(
+        to right,
+        theme.$ai-inner-shadow 0%,
+        theme.$ai-aura-end 50%,
+        transparent 50%
+      ),
+      theme.$layer-selected;
+  } @else {
+    background: linear-gradient(
+      to right,
+      theme.$ai-aura-start-table 0%,
+      theme.$ai-aura-end $span,
+      transparent 50%
+    );
+  }
+}
+
 /// Experimental - name and structure subject to change. Use at your own risk!
 /// Adds callout gradient styles to a component
 /// @access private
 /// @example @include callout-gradient();
 /// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
 /// @param {Number} $offset  - specify a pixel offset the callout should start from the bottom
-/// @param {String} $background  - specify if the background should be `layer` or `background`
+/// @param {String} $background  - specify the token to be used as the background
 /// @group utilities
 @mixin callout-gradient(
   $type: 'default',
   $offset: 0,
-  $background: theme.$background
+  $background: 'background'
 ) {
   $start: 0%;
   @if $offset != 0 {
     $start: calc(0% + #{$offset});
   }
 
-  @if $background == 'layer' {
-    $background: theme.$layer;
-  }
+  $background: custom-property.get-var(#{$background}, theme.$background);
 
   @if $type == 'hover' {
     background: linear-gradient(