@carbon/ibm-products 2.33.0 → 2.34.0

package/css/index.css

@@ -37902,12 +37902,124 @@ a.cds--side-nav__link--current::before {
   outline: 2px solid var(--cds-focus, #0f62fe);
 }
 
-.c4p--user-avatar--light-cyan {
+.cds--g10 .c4p--user-avatar--order-1-cyan,
+.cds--white .c4p--user-avatar--order-1-cyan {
+  background-color: #0072c3;
+}
+
+.cds--g10 .c4p--user-avatar--order-2-gray,
+.cds--white .c4p--user-avatar--order-2-gray {
+  background-color: #6f6f6f;
+}
+
+.cds--g10 .c4p--user-avatar--order-3-green,
+.cds--white .c4p--user-avatar--order-3-green {
+  background-color: #198038;
+}
+
+.cds--g10 .c4p--user-avatar--order-4-magenta,
+.cds--white .c4p--user-avatar--order-4-magenta {
+  background-color: #d02670;
+}
+
+.cds--g10 .c4p--user-avatar--order-5-purple,
+.cds--white .c4p--user-avatar--order-5-purple {
+  background-color: #8a3ffc;
+}
+
+.cds--g10 .c4p--user-avatar--order-6-teal,
+.cds--white .c4p--user-avatar--order-6-teal {
+  background-color: #007d79;
+}
+
+.cds--g10 .c4p--user-avatar--order-7-cyan,
+.cds--white .c4p--user-avatar--order-7-cyan {
+  background-color: #003a6d;
+}
+
+.cds--g10 .c4p--user-avatar--order-8-gray,
+.cds--white .c4p--user-avatar--order-8-gray {
+  background-color: #393939;
+}
+
+.cds--g10 .c4p--user-avatar--order-9-green,
+.cds--white .c4p--user-avatar--order-9-green {
+  background-color: #044317;
+}
+
+.cds--g10 .c4p--user-avatar--order-10-magenta,
+.cds--white .c4p--user-avatar--order-10-magenta {
+  background-color: #740937;
+}
+
+.cds--g10 .c4p--user-avatar--order-11-purple,
+.cds--white .c4p--user-avatar--order-11-purple {
+  background-color: #491d8b;
+}
+
+.cds--g10 .c4p--user-avatar--order-12-teal,
+.cds--white .c4p--user-avatar--order-12-teal {
+  background-color: #004144;
+}
+
+.cds--g90 .c4p--user-avatar--order-1-cyan,
+.cds--g100 .c4p--user-avatar--order-1-cyan {
   background-color: #1192e8;
 }
 
-.c4p--user-avatar--dark-cyan {
-  background-color: #0072c3;
+.cds--g90 .c4p--user-avatar--order-2-gray,
+.cds--g100 .c4p--user-avatar--order-2-gray {
+  background-color: #8d8d8d;
+}
+
+.cds--g90 .c4p--user-avatar--order-3-green,
+.cds--g100 .c4p--user-avatar--order-3-green {
+  background-color: #24a148;
+}
+
+.cds--g90 .c4p--user-avatar--order-4-magenta,
+.cds--g100 .c4p--user-avatar--order-4-magenta {
+  background-color: #ee5396;
+}
+
+.cds--g90 .c4p--user-avatar--order-5-purple,
+.cds--g100 .c4p--user-avatar--order-5-purple {
+  background-color: #a56eff;
+}
+
+.cds--g90 .c4p--user-avatar--order-6-teal,
+.cds--g100 .c4p--user-avatar--order-6-teal {
+  background-color: #009d9a;
+}
+
+.cds--g90 .c4p--user-avatar--order-7-cyan,
+.cds--g100 .c4p--user-avatar--order-7-cyan {
+  background-color: #82cfff;
+}
+
+.cds--g90 .c4p--user-avatar--order-8-gray,
+.cds--g100 .c4p--user-avatar--order-8-gray {
+  background-color: #c6c6c6;
+}
+
+.cds--g90 .c4p--user-avatar--order-9-green,
+.cds--g100 .c4p--user-avatar--order-9-green {
+  background-color: #6fdc8c;
+}
+
+.cds--g90 .c4p--user-avatar--order-10-magenta,
+.cds--g100 .c4p--user-avatar--order-10-magenta {
+  background-color: #ffafd2;
+}
+
+.cds--g90 .c4p--user-avatar--order-11-purple,
+.cds--g100 .c4p--user-avatar--order-11-purple {
+  background-color: #d4bbff;
+}
+
+.cds--g90 .c4p--user-avatar--order-12-teal,
+.cds--g100 .c4p--user-avatar--order-12-teal {
+  background-color: #3ddbd9;
 }
 
 .c4p--user-avatar--xl {
@@ -37983,6 +38095,80 @@ a.cds--side-nav__link--current::before {
   height: 1.5rem;
 }
 
+.c4p--scroll-gradient {
+  position: relative;
+  display: flex;
+  width: inherit;
+  height: inherit;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.c4p--scroll-gradient__content {
+  overflow: auto;
+  width: 100%;
+  height: inherit;
+}
+
+.c4p--scroll-gradient__content-children {
+  width: 100%;
+  height: 100%;
+}
+
+.c4p--scroll-gradient__start-vertical,
+.c4p--scroll-gradient__start-horizontal,
+.c4p--scroll-gradient__end-vertical,
+.c4p--scroll-gradient__end-horizontal {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  pointer-events: none;
+}
+
+.c4p--scroll-gradient--y-scrollable .c4p--scroll-gradient__start-vertical {
+  top: 0;
+  left: 0;
+  height: 3rem;
+}
+
+.c4p--scroll-gradient--y-scrollable .c4p--scroll-gradient__end-vertical {
+  bottom: 0;
+  left: 0;
+  height: 3rem;
+}
+
+.c4p--scroll-gradient--x-scrollable .c4p--scroll-gradient__start-horizontal {
+  top: 0;
+  left: 0;
+  width: 3rem;
+}
+
+.c4p--scroll-gradient--x-scrollable .c4p--scroll-gradient__end-horizontal {
+  top: 0;
+  right: 0;
+  width: 3rem;
+}
+
+.c4p--scroll-gradient--y-started.c4p--scroll-gradient--y-scrollable .c4p--scroll-gradient__start-vertical,
+.c4p--scroll-gradient--y-end.c4p--scroll-gradient--y-scrollable .c4p--scroll-gradient__start-vertical {
+  display: block;
+}
+
+.c4p--scroll-gradient--y-initial.c4p--scroll-gradient--y-scrollable .c4p--scroll-gradient__end-vertical,
+.c4p--scroll-gradient--y-started.c4p--scroll-gradient--y-scrollable .c4p--scroll-gradient__end-vertical {
+  display: block;
+}
+
+.c4p--scroll-gradient--x-started.c4p--scroll-gradient--x-scrollable .c4p--scroll-gradient__start-horizontal,
+.c4p--scroll-gradient--x-end.c4p--scroll-gradient--x-scrollable .c4p--scroll-gradient__start-horizontal {
+  display: block;
+}
+
+.c4p--scroll-gradient--x-initial.c4p--scroll-gradient--x-scrollable .c4p--scroll-gradient__end-horizontal,
+.c4p--scroll-gradient--x-started.c4p--scroll-gradient--x-scrollable .c4p--scroll-gradient__end-horizontal {
+  display: block;
+}
+
 /* stylelint-disable carbon/layout-token-use */
 /* stylelint-disable function-no-unknown */
 .c4p--status-indicator__title {
@@ -38069,10 +38255,67 @@ a.cds--side-nav__link--current::before {
   margin-bottom: 0.75rem;
 }
 
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+html .c4p--filter-panel-accordion-item {
+  border-block-start: 0;
+}
+
+html .c4p--filter-panel-accordion-item:last-child {
+  border-block-end: 0;
+}
+
+html .c4p--filter-panel-accordion-item .cds--accordion__wrapper {
+  padding-block: 0;
+}
+
+html .c4p--filter-panel-accordion-item .cds--accordion__heading {
+  min-block-size: 2rem;
+  padding-inline-end: 0;
+}
+
+html .c4p--filter-panel-accordion-item .cds--accordion__title {
+  width: 100%;
+  max-width: calc(100% - 2rem);
+  margin-inline-end: 0;
+}
+
+html .c4p--filter-panel-accordion-item .cds--accordion__content {
+  padding-inline-end: 0;
+}
+
+.c4p--filter-panel-accordion-item .c4p--filter-panel-label__text {
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
+}
+
+.c4p--filter-panel-accordion-item .c4p--filter-panel-label__count {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+}
+
 /* stylelint-disable max-nesting-depth */
+.c4p--filter-panel-checkbox.cds--form-item.cds--checkbox-wrapper,
+.c4p--filter-panel-checkbox.cds--form-item.cds--checkbox-wrapper:last-of-type {
+  margin-block-end: 0;
+}
+
+.c4p--filter-panel-checkbox .c4p--filter-panel-label__count::before {
+  content: "(";
+}
+
+.c4p--filter-panel-checkbox .c4p--filter-panel-label__count::after {
+  content: ")";
+}
+
 .c4p--filter-panel-checkbox .cds--checkbox-label,
 .c4p--filter-panel-checkbox .cds--checkbox-label-text {
   width: 100%;
+  height: 1.5rem;
 }
 
 .c4p--filter-panel-checkbox .c4p--filter-panel-label__text {
@@ -38089,6 +38332,63 @@ a.cds--side-nav__link--current::before {
   letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
 }
 
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+.c4p--filter-panel-checkbox-with-overflow {
+  position: relative;
+}
+
+.c4p--filter-panel-checkbox-with-overflow--open,
+.c4p--filter-panel-checkbox-with-overflow:hover,
+.c4p--filter-panel-checkbox-with-overflow:focus-within {
+  background-color: var(--cds-field);
+}
+
+.c4p--filter-panel-checkbox-with-overflow .cds--overflow-menu__wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.c4p--filter-panel-checkbox-with-overflow .c4p--filter-panel-checkbox-with-overflow__overflow-button {
+  width: 1.5rem;
+  background-color: var(--cds-layer);
+  block-size: 1.5rem;
+  min-block-size: 1.5rem;
+}
+
+.c4p--filter-panel-checkbox-with-overflow__overflow-options .cds--overflow-menu-options__option {
+  height: 1.5rem;
+}
+
+.c4p--filter-panel-checkbox-with-overflow__overflow-options .cds--overflow-menu-options__btn {
+  max-width: none;
+  justify-content: flex-end;
+}
+
+.c4p--filter-panel-checkbox-with-overflow__overflow-options.cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
+  inline-size: 1.5rem;
+}
+
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+.c4p--filter-panel-group {
+  padding-top: 0.75rem;
+  border-top: 0.0625rem solid var(--cds-border-subtle);
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.c4p--filter-panel-group__title {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  font-weight: 600;
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+}
+
 /* stylelint-disable max-nesting-depth */
 .c4p--filter-panel-label {
   display: flex;
@@ -38107,12 +38407,4 @@ a.cds--side-nav__link--current::before {
   color: var(--cds-text-secondary, #525252);
 }
 
-.c4p--filter-panel-label__count::before {
-  content: "(";
-}
-
-.c4p--filter-panel-label__count::after {
-  content: ")";
-}
-
 /*# sourceMappingURL=index.css.map */