@carbon/ibm-products 2.32.0 → 2.34.0

package/lib/index.js

@@ -114,12 +114,24 @@ var DecoratorLink = require('./components/DecoratorLink/DecoratorLink.js');
 var DecoratorSingleButton = require('./components/DecoratorSingleButton/DecoratorSingleButton.js');
 var DecoratorDualButton = require('./components/DecoratorDualButton/DecoratorDualButton.js');
 var DescriptionList = require('./components/DescriptionList/DescriptionList.js');
+var DescriptionListBody = require('./components/DescriptionList/DescriptionListBody.js');
+var DescriptionListCell = require('./components/DescriptionList/DescriptionListCell.js');
+var DescriptionListRow = require('./components/DescriptionList/DescriptionListRow.js');
 var FullPageError = require('./components/FullPageError/FullPageError.js');
 var SearchBar = require('./components/SearchBar/SearchBar.js');
 var Nav = require('./components/Nav/Nav.js');
 var StringFormatter = require('./components/StringFormatter/StringFormatter.js');
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
+var ScrollGradient = require('./components/ScrollGradient/ScrollGradient.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
+var ActionBar = require('./components/ActionBar/ActionBar.js');
+var FilterPanel = require('./components/FilterPanel/FilterPanel.js');
+var FilterPanelAccordion = require('./components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js');
+var FilterPanelAccordionItem = require('./components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js');
+var FilterPanelCheckbox = require('./components/FilterPanel/FilterPanelCheckbox/FilterPanelCheckbox.js');
+var FilterPanelCheckboxWithOverflow = require('./components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js');
+var FilterPanelGroup = require('./components/FilterPanel/FilterPanelGroup/FilterPanelGroup.js');
+var FilterPanelLabel = require('./components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js');
 
 
 
@@ -475,6 +487,18 @@ Object.defineProperty(exports, 'DescriptionList', {
 	enumerable: true,
 	get: function () { return DescriptionList.DescriptionList; }
 });
+Object.defineProperty(exports, 'DescriptionListBody', {
+	enumerable: true,
+	get: function () { return DescriptionListBody.DescriptionListBody; }
+});
+Object.defineProperty(exports, 'DescriptionListCell', {
+	enumerable: true,
+	get: function () { return DescriptionListCell.DescriptionListCell; }
+});
+Object.defineProperty(exports, 'DescriptionListRow', {
+	enumerable: true,
+	get: function () { return DescriptionListRow.DescriptionListRow; }
+});
 Object.defineProperty(exports, 'FullPageError', {
 	enumerable: true,
 	get: function () { return FullPageError.FullPageError; }
@@ -495,7 +519,43 @@ Object.defineProperty(exports, 'UserAvatar', {
 	enumerable: true,
 	get: function () { return UserAvatar.UserAvatar; }
 });
+Object.defineProperty(exports, 'ScrollGradient', {
+	enumerable: true,
+	get: function () { return ScrollGradient.ScrollGradient; }
+});
 Object.defineProperty(exports, 'StatusIndicator', {
 	enumerable: true,
 	get: function () { return StatusIndicator.StatusIndicator; }
 });
+Object.defineProperty(exports, 'ActionBar', {
+	enumerable: true,
+	get: function () { return ActionBar.ActionBar; }
+});
+Object.defineProperty(exports, 'FilterPanel', {
+	enumerable: true,
+	get: function () { return FilterPanel.FilterPanel; }
+});
+Object.defineProperty(exports, 'FilterPanelAccordion', {
+	enumerable: true,
+	get: function () { return FilterPanelAccordion.FilterPanelAccordion; }
+});
+Object.defineProperty(exports, 'FilterPanelAccordionItem', {
+	enumerable: true,
+	get: function () { return FilterPanelAccordionItem.FilterPanelAccordionItem; }
+});
+Object.defineProperty(exports, 'FilterPanelCheckbox', {
+	enumerable: true,
+	get: function () { return FilterPanelCheckbox.FilterPanelCheckbox; }
+});
+Object.defineProperty(exports, 'FilterPanelCheckboxWithOverflow', {
+	enumerable: true,
+	get: function () { return FilterPanelCheckboxWithOverflow.FilterPanelCheckboxWithOverflow; }
+});
+Object.defineProperty(exports, 'FilterPanelGroup', {
+	enumerable: true,
+	get: function () { return FilterPanelGroup.FilterPanelGroup; }
+});
+Object.defineProperty(exports, 'FilterPanelLabel', {
+	enumerable: true,
+	get: function () { return FilterPanelLabel.FilterPanelLabel; }
+});

package/lib/settings.d.ts

@@ -66,9 +66,18 @@ export const pkg: {
         TruncatedList: boolean;
         DelimitedList: boolean;
         FullPageError: boolean;
+        ScrollGradient: boolean;
         StringFormatter: boolean;
         StatusIndicator: boolean;
         StatusIndicatorStep: boolean;
+        ActionBar: boolean;
+        FilterPanel: boolean;
+        FilterPanelAccordion: boolean;
+        FilterPanelAccordionItem: boolean;
+        FilterPanelCheckbox: boolean;
+        FilterPanelCheckboxWithOverflow: boolean;
+        FilterPanelGroup: boolean;
+        FilterPanelLabel: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;
@@ -81,6 +90,9 @@ export const pkg: {
         DecoratorSingleButton: boolean;
         DecoratorDualButton: boolean;
         DescriptionList: boolean;
+        DescriptionListBody: boolean;
+        DescriptionListCell: boolean;
+        DescriptionListRow: boolean;
         SearchBar: boolean;
         UserAvatar: boolean;
         Checklist: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.32.0",
+  "version": "2.34.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.30.1",
+    "@carbon/ibm-products-styles": "^2.32.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -114,5 +114,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "1785ad497681a5f69574c808db00e251625c4be9"
+  "gitHead": "8c3c324be171a801b4d966e94c54ca01a99eb82f"
 }

package/scss/components/FilterPanel/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Import any Carbon component styles used from FilterPanel in this file.
+// FilterPanel uses the following Carbon components:

package/scss/components/FilterPanel/_filter-panel-accordion-item.scss

@@ -0,0 +1,56 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-accordion-item;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+// Remove top and bottom borders.
+html .#{$block-class} {
+  border-block-start: 0;
+}
+html .#{$block-class}:last-child {
+  border-block-end: 0;
+}
+
+// Override Carbon Accordion Item styling
+html .#{$block-class} .#{$carbon}--accordion__wrapper {
+  padding-block: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__heading {
+  min-block-size: 2rem;
+  padding-inline-end: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__title {
+  width: 100%;
+  // 100% - the space taken up by the expand/collapse icon.
+  max-width: calc(100% - $spacing-07);
+  margin-inline-end: 0;
+}
+html .#{$block-class} .#{$carbon}--accordion__content {
+  padding-inline-end: 0;
+}
+
+// Override Filter Panel Label
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--filter-panel-label__text {
+  @include type.type-style('body-01');
+}
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--filter-panel-label__count {
+  @include type.type-style('label-01');
+}

package/scss/components/FilterPanel/_filter-panel-accordion.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//

package/scss/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss

@@ -0,0 +1,62 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox-with-overflow;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+.#{$block-class} {
+  position: relative;
+}
+.#{$block-class}--open,
+.#{$block-class}:hover,
+.#{$block-class}:focus-within {
+  background-color: $field;
+}
+
+// Position the menu button via its wrapper, not the button itself.
+.#{$block-class} .#{$carbon}--overflow-menu__wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+// Size the menu button.
+.#{$block-class} .#{$block-class}__overflow-button {
+  width: $spacing-06;
+  background-color: $layer;
+  block-size: $spacing-06;
+  min-block-size: $spacing-06;
+}
+
+// OverflowMenu <li>
+.#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__option {
+  height: $spacing-06;
+}
+// OverflowMenu <button>
+.#{$block-class}__overflow-options .#{$carbon}--overflow-menu-options__btn {
+  max-width: none;
+  justify-content: flex-end;
+}
+// SIZE FIX: This element is being used to "erase" the drop shadow
+// created by the menu items overtop the menu button.
+.#{$block-class}__overflow-options.#{$carbon}--overflow-menu-options[data-floating-menu-direction='bottom']:not(
+    .#{$carbon}--breadcrumb-menu-options
+  )::after {
+  inline-size: $spacing-06;
+}

package/scss/components/FilterPanel/_filter-panel-checkbox.scss

@@ -0,0 +1,54 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox;
+$label: #{c4p-settings.$pkg-prefix}--filter-panel-label;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+// UNDO Carbon's concept that a Checkbox is always a list item (":last-of-type").
+// This also allows the TruncatedList to calculate the correct height for expanding/collapsing the list.
+.#{$block-class}.#{$carbon}--form-item.#{$carbon}--checkbox-wrapper,
+.#{$block-class}.#{$carbon}--form-item.#{$carbon}--checkbox-wrapper:last-of-type {
+  margin-block-end: 0;
+}
+
+// Surround a checkbox's count with parentheses.
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--filter-panel-label__count::before {
+  content: '(';
+}
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--filter-panel-label__count::after {
+  content: ')';
+}
+
+.#{$block-class} .#{$carbon}--checkbox-label,
+.#{$block-class} .#{$carbon}--checkbox-label-text {
+  // Set Carbon's Checkbox label to 100% the width of the filter panel.
+  width: 100%;
+  // Match height to the "checkbox with overflow" button.
+  height: $spacing-06;
+}
+
+.#{$block-class} .#{$label}__text {
+  @include type.type-style('body-compact-01');
+}
+
+.#{$block-class} .#{$label}__count {
+  @include type.type-style('label-01');
+}

package/scss/components/FilterPanel/_filter-panel-group.scss

@@ -0,0 +1,39 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-group;
+
+.#{$block-class} {
+  padding-top: $spacing-04;
+  border-top: to-rem(1px) solid $border-subtle;
+  margin-top: $spacing-04;
+  margin-bottom: $spacing-04;
+}
+
+.#{$block-class}__title {
+  @include type.type-style('label-01');
+  @include type.font-weight('semibold');
+
+  margin-top: 0;
+  margin-bottom: $spacing-04;
+}

package/scss/components/FilterPanel/_filter-panel-label.scss

@@ -0,0 +1,39 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel-label;
+
+.#{$block-class} {
+  display: flex;
+  align-items: center;
+}
+
+.#{$block-class}__text {
+  overflow: hidden;
+  flex: 1 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__count {
+  margin-left: $spacing-04;
+  color: $text-secondary;
+}

package/scss/components/FilterPanel/_filter-panel.scss

@@ -0,0 +1,31 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// FilterPanel uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by FilterPanel
+@use '../TruncatedList';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--filter-panel;
+$carbon: #{c4p-settings.$carbon-prefix};
+
+.#{$block-class}__title {
+  @include type.type-style('body-compact-01');
+
+  margin-top: $spacing-04;
+  margin-bottom: $spacing-04;
+}

package/scss/components/FilterPanel/_index-with-carbon.scss

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2024, 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 './carbon-imports';
+@use './filter-panel';
+@use './filter-panel-accordion';
+@use './filter-panel-accordion-item';
+@use './filter-panel-checkbox';
+@use './filter-panel-checkbox-with-overflow';
+@use './filter-panel-group';
+@use './filter-panel-label';

package/scss/components/FilterPanel/_index.scss

@@ -0,0 +1,14 @@
+//
+// Copyright IBM Corp. 2024, 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 './filter-panel';
+@use './filter-panel-accordion';
+@use './filter-panel-accordion-item';
+@use './filter-panel-checkbox';
+@use './filter-panel-checkbox-with-overflow';
+@use './filter-panel-group';
+@use './filter-panel-label';

package/scss/components/ScrollGradient/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Import any Carbon component styles used from ScrollGradient in this file.
+// ScrollGradient uses the following Carbon components:

package/scss/components/ScrollGradient/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 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 './carbon-imports';
+@use './scroll-gradient';

package/scss/components/ScrollGradient/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 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 './scroll-gradient';

package/scss/components/ScrollGradient/_scroll-gradient.scss

@@ -0,0 +1,102 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient;
+
+.#{$block-class} {
+  position: relative;
+  display: flex;
+  width: inherit;
+  height: inherit;
+  align-items: stretch;
+  justify-content: stretch;
+}
+.#{$block-class}__content {
+  overflow: auto;
+  width: 100%;
+  height: inherit;
+}
+
+.#{$block-class}__content-children {
+  width: 100%;
+  height: 100%;
+}
+// All gradients
+.#{$block-class}__start-vertical,
+.#{$block-class}__start-horizontal,
+.#{$block-class}__end-vertical,
+.#{$block-class}__end-horizontal {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  pointer-events: none;
+}
+
+// Vertical start
+.#{$block-class}--y-scrollable .#{$block-class}__start-vertical {
+  top: 0;
+  left: 0;
+  height: $spacing-09;
+}
+// Vertical end
+.#{$block-class}--y-scrollable .#{$block-class}__end-vertical {
+  bottom: 0;
+  left: 0;
+  height: $spacing-09;
+}
+
+// Horizontal start
+.#{$block-class}--x-scrollable .#{$block-class}__start-horizontal {
+  top: 0;
+  left: 0;
+  width: $spacing-09;
+}
+
+// Horizontal end
+.#{$block-class}--x-scrollable .#{$block-class}__end-horizontal {
+  top: 0;
+  right: 0;
+  width: $spacing-09;
+}
+
+// Vertical start states
+.#{$block-class}--y-started.#{$block-class}--y-scrollable
+  .#{$block-class}__start-vertical,
+.#{$block-class}--y-end.#{$block-class}--y-scrollable
+  .#{$block-class}__start-vertical {
+  display: block;
+}
+
+// Vertical end states
+.#{$block-class}--y-initial.#{$block-class}--y-scrollable
+  .#{$block-class}__end-vertical,
+.#{$block-class}--y-started.#{$block-class}--y-scrollable
+  .#{$block-class}__end-vertical {
+  display: block;
+}
+
+// Horizontal start states
+.#{$block-class}--x-started.#{$block-class}--x-scrollable
+  .#{$block-class}__start-horizontal,
+.#{$block-class}--x-end.#{$block-class}--x-scrollable
+  .#{$block-class}__start-horizontal {
+  display: block;
+}
+
+// Horizontal end states
+.#{$block-class}--x-initial.#{$block-class}--x-scrollable
+  .#{$block-class}__end-horizontal,
+.#{$block-class}--x-started.#{$block-class}--x-scrollable
+  .#{$block-class}__end-horizontal {
+  display: block;
+}

package/scss/components/UserAvatar/_user-avatar.scss

@@ -75,13 +75,46 @@ $sizes: (
   background-color: $color;
 }
 
-.#{$block-class}--light-cyan {
-  @include setBgColor($cyan-50);
+@mixin setLightBg($order, $color) {
+  .#{$carbon-prefix}--g10 .#{$block-class}--#{$order},
+  .#{$carbon-prefix}--white .#{$block-class}--#{$order} {
+    @include setBgColor($color);
+  }
 }
 
-.#{$block-class}--dark-cyan {
-  @include setBgColor($cyan-60);
+@mixin setDarkBg($order, $color) {
+  .#{$carbon-prefix}--g90 .#{$block-class}--#{$order},
+  .#{$carbon-prefix}--g100 .#{$block-class}--#{$order} {
+    @include setBgColor($color);
+  }
 }
+
+@include setLightBg(order-1-cyan, $cyan-60);
+@include setLightBg(order-2-gray, $gray-60);
+@include setLightBg(order-3-green, $green-60);
+@include setLightBg(order-4-magenta, $magenta-60);
+@include setLightBg(order-5-purple, $purple-60);
+@include setLightBg(order-6-teal, $teal-60);
+@include setLightBg(order-7-cyan, $cyan-80);
+@include setLightBg(order-8-gray, $gray-80);
+@include setLightBg(order-9-green, $green-80);
+@include setLightBg(order-10-magenta, $magenta-80);
+@include setLightBg(order-11-purple, $purple-80);
+@include setLightBg(order-12-teal, $teal-80);
+
+@include setDarkBg(order-1-cyan, $cyan-50);
+@include setDarkBg(order-2-gray, $gray-50);
+@include setDarkBg(order-3-green, $green-50);
+@include setDarkBg(order-4-magenta, $magenta-50);
+@include setDarkBg(order-5-purple, $purple-50);
+@include setDarkBg(order-6-teal, $teal-50);
+@include setDarkBg(order-7-cyan, $cyan-30);
+@include setDarkBg(order-8-gray, $gray-30);
+@include setDarkBg(order-9-green, $green-30);
+@include setDarkBg(order-10-magenta, $magenta-30);
+@include setDarkBg(order-11-purple, $purple-30);
+@include setDarkBg(order-12-teal, $teal-30);
+
 .#{$block-class}--xl {
   @include size('xl');
   @include type.type-style('heading-04');

package/scss/components/_index-with-carbon.scss

@@ -70,4 +70,6 @@
 @use './Nav/index-with-carbon' as *;
 @use './StringFormatter/index-with-carbon' as *;
 @use './UserAvatar/index-with-carbon' as *;
+@use './ScrollGradient/index-with-carbon' as *;
 @use './StatusIndicator/index-with-carbon' as *;
+@use './FilterPanel/index-with-carbon' as *;