@carbon/styles 1.76.0 → 1.77.0-rc.0

package/css/styles.css

@@ -3181,7 +3181,9 @@ em {
   --cds-tag-hover-warm-gray: #d8d0cf;
   --cds-status-red: #da1e28;
   --cds-status-orange: #ff832b;
+  --cds-status-orange-outline: #ba4e00;
   --cds-status-yellow: #f1c21b;
+  --cds-status-yellow-outline: #8e6a00;
   --cds-status-green: #24a148;
   --cds-status-blue: #0043ce;
   --cds-status-purple: #8a3ffc;
@@ -3411,7 +3413,9 @@ em {
   --cds-tag-hover-warm-gray: #d8d0cf;
   --cds-status-red: #da1e28;
   --cds-status-orange: #ff832b;
+  --cds-status-orange-outline: #ba4e00;
   --cds-status-yellow: #f1c21b;
+  --cds-status-yellow-outline: #8e6a00;
   --cds-status-green: #24a148;
   --cds-status-blue: #0043ce;
   --cds-status-purple: #8a3ffc;
@@ -3640,7 +3644,9 @@ em {
   --cds-tag-hover-warm-gray: #696363;
   --cds-status-red: #fa4d56;
   --cds-status-orange: #ff832b;
+  --cds-status-orange-outline: #ff832b;
   --cds-status-yellow: #f1c21b;
+  --cds-status-yellow-outline: #f1c21b;
   --cds-status-green: #42be65;
   --cds-status-blue: #4589ff;
   --cds-status-purple: #a56eff;
@@ -3869,7 +3875,9 @@ em {
   --cds-tag-hover-warm-gray: #696363;
   --cds-status-red: #fa4d56;
   --cds-status-orange: #ff832b;
+  --cds-status-orange-outline: #ff832b;
   --cds-status-yellow: #f1c21b;
+  --cds-status-yellow-outline: #f1c21b;
   --cds-status-green: #42be65;
   --cds-status-blue: #4589ff;
   --cds-status-purple: #a56eff;
@@ -4414,6 +4422,27 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
+.cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
+.cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  inset-inline-start: auto;
+}
+
+.cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
+  inset-block-end: 0;
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+  transform: translate(50%, calc(var(--cds-popover-offset, 0rem)));
+}
+
+.cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
+  inset-block-end: 0;
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+  transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
+}
+
 [dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 [dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-inline-start: 0;
@@ -4765,7 +4794,6 @@ li.cds--accordion__item--disabled:last-of-type {
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem);
-  color: var(--cds-text-inverse, #ffffff);
   max-inline-size: 18rem;
 }
 
@@ -4835,6 +4863,8 @@ li.cds--accordion__item--disabled:last-of-type {
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   padding: 0.5rem 1rem;
   max-inline-size: 11rem;
+  text-wrap: auto;
+  word-break: break-word;
 }
 
 .cds--btn {
@@ -5296,6 +5326,11 @@ li.cds--accordion__item--disabled:last-of-type {
   box-shadow: none;
 }
 
+.cds--btn--sm .cds--badge-indicator {
+  margin-block-start: 0.25rem;
+  margin-inline-end: 0.25rem;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--btn:focus {
     color: Highlight;
@@ -6284,6 +6319,30 @@ li.cds--accordion__item--disabled:last-of-type {
   padding-block-start: 100%;
 }
 
+.cds--badge-indicator {
+  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
+  line-height: var(--cds-helper-text-01-line-height, 1.33333);
+  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
+  position: absolute;
+  display: flex;
+  padding: 0 0.25rem 0.125rem;
+  border-radius: 100px;
+  background: var(--cds-support-error, #da1e28);
+  color: var(--cds-text-on-color, #ffffff);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  margin-block-start: 0.5rem;
+  margin-inline-end: 0.5rem;
+  max-block-size: 1rem;
+  min-block-size: 0.5rem;
+  min-inline-size: 0.5rem;
+}
+
+.cds--badge-indicator--count {
+  margin-block-start: 0.25rem;
+  margin-inline-end: 0.25rem;
+}
+
 .cds--overflow-menu,
 .cds--overflow-menu__trigger {
   box-sizing: border-box;
@@ -6709,6 +6768,17 @@ a.cds--overflow-menu-options__btn::before {
   }
 }
 
+.cds--breadcrumb--sm {
+  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);
+}
+
+.cds--breadcrumb .cds--link {
+  font: inherit;
+}
+
 .cds--breadcrumb-item {
   position: relative;
   display: flex;
@@ -6716,6 +6786,10 @@ a.cds--overflow-menu-options__btn::before {
   margin-inline-end: 0.5rem;
 }
 
+.cds--breadcrumb--sm .cds--breadcrumb-item {
+  margin-inline-end: 0.25rem;
+}
+
 .cds--breadcrumb-item .cds--link:visited {
   color: var(--cds-link-primary, #0f62fe);
 }
@@ -6729,6 +6803,10 @@ a.cds--overflow-menu-options__btn::before {
   margin-inline-start: 0.5rem;
 }
 
+.cds--breadcrumb--sm .cds--breadcrumb-item::after {
+  margin-inline-start: 0.25rem;
+}
+
 .cds--breadcrumb--no-trailing-slash .cds--breadcrumb-item:last-child::after {
   content: "";
 }
@@ -6779,6 +6857,10 @@ a.cds--overflow-menu-options__btn::before {
   }
 }
 
+.cds--breadcrumb--sm .cds--breadcrumb-item .cds--overflow-menu {
+  inline-size: 1rem;
+}
+
 .cds--breadcrumb-item .cds--overflow-menu:hover::after {
   opacity: 1;
 }
@@ -6788,7 +6870,7 @@ a.cds--overflow-menu-options__btn::before {
   box-shadow: none;
 }
 
-.cds--breadcrumb-item .cds--overflow-menu__icon {
+.cds--breadcrumb-item .cds--overflow-menu .cds--overflow-menu__icon {
   position: relative;
   fill: var(--cds-link-primary, #0f62fe);
   transform: translateY(4px);
@@ -22434,6 +22516,79 @@ span.cds--pagination__text.cds--pagination__items-count {
   inset-inline-start: 0;
 }
 
+.cds--shape-indicator {
+  font-size: var(--cds-helper-text-01-font-size, 0.75rem);
+  line-height: var(--cds-helper-text-01-line-height, 1.33333);
+  letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
+  display: flex;
+  color: var(--cds-text-secondary, #525252);
+}
+
+.cds--shape-indicator svg {
+  align-self: center;
+  margin-inline-end: 0.5rem;
+}
+
+.cds--shape-indicator--14 {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-compact-01-font-weight, 400);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+}
+
+.cds--shape-indicator--failed {
+  fill: var(--cds-status-red, #da1e28);
+}
+
+.cds--shape-indicator--critical {
+  fill: var(--cds-status-red, #da1e28);
+}
+
+.cds--shape-indicator--high {
+  fill: var(--cds-status-red, #da1e28);
+}
+
+.cds--shape-indicator--medium {
+  fill: var(--cds-status-orange, #ff832b);
+}
+.cds--shape-indicator--medium path:first-of-type {
+  fill: var(--cds-status-orange-outline, #ba4e00);
+}
+
+.cds--shape-indicator--low {
+  fill: var(--cds-status-yellow, #f1c21b);
+}
+.cds--shape-indicator--low path:nth-of-type(2) {
+  fill: var(--cds-status-yellow-outline, #8e6a00);
+}
+
+.cds--shape-indicator--cautious {
+  fill: var(--cds-status-yellow, #f1c21b);
+}
+.cds--shape-indicator--cautious path:first-of-type {
+  fill: var(--cds-status-yellow-outline, #8e6a00);
+}
+
+.cds--shape-indicator--undefined {
+  fill: var(--cds-status-purple, #8a3ffc);
+}
+
+.cds--shape-indicator--stable {
+  fill: var(--cds-status-green, #24a148);
+}
+
+.cds--shape-indicator--informative {
+  fill: var(--cds-status-blue, #0043ce);
+}
+
+.cds--shape-indicator--incomplete path:nth-of-type(2) {
+  fill: var(--cds-status-blue, #0043ce);
+}
+
+.cds--shape-indicator--draft {
+  fill: var(--cds-status-gray, #6f6f6f);
+}
+
 @keyframes ai-skeleton-animation {
   0% {
     transform: translateX(-100%);
@@ -23594,6 +23749,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   inset-block-start: 0.0625rem;
 }
 .cds--tabs .cds--tabs__nav-item {
+  position: relative;
   display: flex;
   flex: 1 0 auto;
   padding: 0;
@@ -23845,6 +24001,10 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tabs .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon-only .cds--tabs__nav-item-label {
   line-height: 0;
 }
+.cds--tabs .cds--tabs__nav-item--icon-only:not(.cds--tabs__nav-item--icon-only__20) .cds--badge-indicator {
+  margin-block-start: 0.25rem;
+  margin-inline-end: 0.25rem;
+}
 .cds--tabs:not(.cds--tabs--contained) .cds--tabs__nav-item:not(.cds--tabs__nav-item--selected):not(.cds--tabs__nav-item--disabled):hover {
   border-block-end: 2px solid var(--cds-border-strong);
   color: var(--cds-text-primary, #161616);
@@ -25128,11 +25288,9 @@ li.cds--tree-node-link-parent > .cds--tree-node__children {
 .cds--tree-parent-node__toggle {
   display: flex;
   align-items: center;
-  align-self: flex-start;
   border: 0;
   block-size: 1.5rem;
   inline-size: 1.5rem;
-  margin-block-start: 0.25rem;
   margin-inline: -0.25rem 0.25rem;
   padding-inline-start: 0.25rem;
 }
@@ -25154,9 +25312,7 @@ li.cds--tree-node-link-parent > .cds--tree-node__children {
 }
 
 .cds--tree-node__icon {
-  align-self: flex-start;
   fill: var(--cds-icon-secondary, #525252);
-  margin-block-start: 0.0625rem;
   margin-inline: 0.5rem 0.5rem;
   min-block-size: 1rem;
   min-inline-size: 1rem;