npm - @carbon/styles - Versions diffs - 1.23.1 → 1.24.0 - Mend

@carbon/styles 1.23.1 → 1.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (232) hide show

package/css/styles.css CHANGED Viewed

@@ -2697,7 +2697,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2714,7 +2714,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2748,7 +2748,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
   --cds-field: var(--cds-field-03, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-03, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-03, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
@@ -2772,9 +2772,9 @@ em {
   --cds-border-strong-02: #8d8d8d;
   --cds-border-strong-03: #8d8d8d;
   --cds-border-subtle-00: #e0e0e0;
-  --cds-border-subtle-01: #e0e0e0;
+  --cds-border-subtle-01: #c6c6c6;
   --cds-border-subtle-02: #e0e0e0;
-  --cds-border-subtle-03: #e0e0e0;
+  --cds-border-subtle-03: #c6c6c6;
   --cds-border-subtle-selected-01: #c6c6c6;
   --cds-border-subtle-selected-02: #c6c6c6;
   --cds-border-subtle-selected-03: #c6c6c6;
@@ -2792,6 +2792,7 @@ em {
   --cds-focus-inverse: #ffffff;
   --cds-highlight: #d0e2ff;
   --cds-icon-disabled: rgba(22, 22, 22, 0.25);
+  --cds-icon-interactive: #0f62fe;
   --cds-icon-inverse: #ffffff;
   --cds-icon-on-color: #ffffff;
   --cds-icon-on-color-disabled: #8d8d8d;
@@ -2866,7 +2867,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2944,9 +2945,9 @@ em {
   --cds-border-strong-01: #8d8d8d;
   --cds-border-strong-02: #8d8d8d;
   --cds-border-strong-03: #8d8d8d;
-  --cds-border-subtle-00: #e0e0e0;
+  --cds-border-subtle-00: #c6c6c6;
   --cds-border-subtle-01: #e0e0e0;
-  --cds-border-subtle-02: #e0e0e0;
+  --cds-border-subtle-02: #c6c6c6;
   --cds-border-subtle-03: #e0e0e0;
   --cds-border-subtle-selected-01: #c6c6c6;
   --cds-border-subtle-selected-02: #c6c6c6;
@@ -2965,6 +2966,7 @@ em {
   --cds-focus-inverse: #ffffff;
   --cds-highlight: #d0e2ff;
   --cds-icon-disabled: rgba(22, 22, 22, 0.25);
+  --cds-icon-interactive: #0f62fe;
   --cds-icon-inverse: #ffffff;
   --cds-icon-on-color: #ffffff;
   --cds-icon-on-color-disabled: #8d8d8d;
@@ -3039,7 +3041,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -3138,6 +3140,7 @@ em {
   --cds-focus-inverse: #0f62fe;
   --cds-highlight: #0043ce;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
+  --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
   --cds-icon-on-color: #ffffff;
   --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -3212,7 +3215,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -3310,6 +3313,7 @@ em {
   --cds-focus-inverse: #0f62fe;
   --cds-highlight: #002d9c;
   --cds-icon-disabled: rgba(244, 244, 244, 0.25);
+  --cds-icon-interactive: #ffffff;
   --cds-icon-inverse: #161616;
   --cds-icon-on-color: #ffffff;
   --cds-icon-on-color-disabled: rgba(255, 255, 255, 0.25);
@@ -3384,7 +3388,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -4282,6 +4286,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 .cds--link.cds--link--inline {
+  display: inline;
   text-decoration: underline;
 }
 .cds--link.cds--link--inline:focus, .cds--link.cds--link--inline:visited {
@@ -15829,8 +15834,10 @@ optgroup.cds--select-optgroup:disabled,
   cursor: not-allowed;
 }
-.cds--menu-item--disabled:hover {
+.cds--menu-item--disabled:hover,
+.cds--menu-item--disabled.cds--menu-item--danger:hover {
   background-color: var(--cds-layer);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 .cds--menu-item--danger:focus,
@@ -18883,15 +18890,15 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--popover--left-top .cds--popover-content {
   top: -50%;
   right: 100%;
-  -webkit-transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
-          transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
+  -webkit-transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
+          transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 .cds--popover--left-bottom .cds--popover-content {
   right: 100%;
   bottom: -50%;
-  -webkit-transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
-          transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
+  -webkit-transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
+          transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
 }
 .cds--popover--left .cds--popover-content::before,