@carbon/styles 1.4.0 → 1.6.0-rc.0

package/README.md

@@ -81,7 +81,7 @@ You can change the default theme of Carbon by doing the following:
 ```scss
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/theme' with (
-  $theme: themes.$g100,
+  $theme: themes.$g100
 );
 ```
 
@@ -95,7 +95,7 @@ extend the theme.
   $theme: (
     background: #e2e2e2,
     text-primary: #ffffff,
-  ),
+  )
 );
 ```
 
@@ -106,7 +106,7 @@ extend the theme.
   $fallback: themes.$g100,
   $theme: (
     custom-token-01: #000000,
-  ),
+  )
 );
 ```
 

package/css/styles.css

@@ -3193,61 +3193,56 @@ em {
   --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
-  --cds-button-separator: #e0e0e0;
+  --cds-button-separator: #161616;
   --cds-button-primary: #0f62fe;
-  --cds-button-secondary: #393939;
-  --cds-button-tertiary: #0f62fe;
+  --cds-button-secondary: #6f6f6f;
+  --cds-button-tertiary: #ffffff;
   --cds-button-danger-primary: #da1e28;
-  --cds-button-danger-secondary: #da1e28;
+  --cds-button-danger-secondary: #ff8389;
   --cds-button-danger-active: #750e13;
   --cds-button-primary-active: #002d9c;
-  --cds-button-secondary-active: #6f6f6f;
-  --cds-button-tertiary-active: #002d9c;
-  --cds-button-danger-hover: #b81922;
+  --cds-button-secondary-active: #393939;
+  --cds-button-tertiary-active: #c6c6c6;
+  --cds-button-danger-hover: #b81921;
   --cds-button-primary-hover: #0050e6;
-  --cds-button-secondary-hover: #474747;
-  --cds-button-tertiary-hover: #0050e6;
-  --cds-button-disabled: #c6c6c6;
-  --cds-notification-background-error: #fff1f1;
-  --cds-notification-background-success: #defbe6;
-  --cds-notification-background-info: #edf5ff;
-  --cds-notification-background-warning: #fdf6dd;
-  --cds-notification-action-hover: #ffffff;
-  --cds-notification-action-tertiary-inverse: #ffffff;
-  --cds-notification-action-tertiary-inverse-active: #c6c6c6;
-  --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
-  --cds-notification-action-tertiary-inverse-text: #161616;
-  --cds-notification-action-tertiary-inverse-text-on-color-disabled: rgba(255, 255, 255, 0.25);
-  --cds-tag-background-red: #ffd7d9;
-  --cds-tag-color-red: #750e13;
-  --cds-tag-hover-red: #ffb3b8;
-  --cds-tag-background-magenta: #ffd6e8;
-  --cds-tag-color-magenta: #740937;
-  --cds-tag-hover-magenta: #ffafd2;
-  --cds-tag-background-purple: #e8daff;
-  --cds-tag-color-purple: #491d8b;
-  --cds-tag-hover-purple: #d4bbff;
-  --cds-tag-background-blue: #d0e2ff;
-  --cds-tag-color-blue: #002d9c;
-  --cds-tag-hover-blue: #a6c8ff;
-  --cds-tag-background-cyan: #bae6ff;
-  --cds-tag-color-cyan: #003a6d;
-  --cds-tag-hover-cyan: #82cfff;
-  --cds-tag-background-teal: #9ef0f0;
-  --cds-tag-color-teal: #004144;
-  --cds-tag-hover-teal: #3ddbd9;
-  --cds-tag-background-green: #a7f0ba;
-  --cds-tag-color-green: #044317;
-  --cds-tag-hover-green: #6fdc8c;
-  --cds-tag-background-gray: #e0e0e0;
-  --cds-tag-color-gray: #393939;
-  --cds-tag-hover-gray: #c6c6c6;
-  --cds-tag-background-cool-gray: #dde1e6;
-  --cds-tag-color-cool-gray: #343a3f;
-  --cds-tag-hover-cool-gray: #c1c7cd;
-  --cds-tag-background-warm-gray: #e5e0df;
-  --cds-tag-color-warm-gray: #3c3838;
-  --cds-tag-hover-warm-gray: #cac5c4;
+  --cds-button-secondary-hover: #5e5e5e;
+  --cds-button-tertiary-hover: #f4f4f4;
+  --cds-button-disabled: rgba(141, 141, 141, 0.3);
+  --cds-notification-action-tertiary-inverse: #0f62fe;
+  --cds-notification-action-tertiary-inverse-active: #002d9c;
+  --cds-notification-action-tertiary-inverse-hover: #0050e6;
+  --cds-notification-action-tertiary-inverse-text: #ffffff;
+  --cds-notification-action-tertiary-inverse-text-on-color-disabled: #8d8d8d;
+  --cds-tag-background-red: #a2191f;
+  --cds-tag-color-red: #ffd7d9;
+  --cds-tag-hover-red: #c21e25;
+  --cds-tag-background-magenta: #9f1853;
+  --cds-tag-color-magenta: #ffd6e8;
+  --cds-tag-hover-magenta: #bf1d63;
+  --cds-tag-background-purple: #6929c4;
+  --cds-tag-color-purple: #e8daff;
+  --cds-tag-hover-purple: #7c3dd6;
+  --cds-tag-background-blue: #0043ce;
+  --cds-tag-color-blue: #d0e2ff;
+  --cds-tag-hover-blue: #0053ff;
+  --cds-tag-background-cyan: #00539a;
+  --cds-tag-color-cyan: #bae6ff;
+  --cds-tag-hover-cyan: #0066bd;
+  --cds-tag-background-teal: #005d5d;
+  --cds-tag-color-teal: #9ef0f0;
+  --cds-tag-hover-teal: #007070;
+  --cds-tag-background-green: #0e6027;
+  --cds-tag-color-green: #a7f0ba;
+  --cds-tag-hover-green: #11742f;
+  --cds-tag-background-gray: #525252;
+  --cds-tag-color-gray: #e0e0e0;
+  --cds-tag-hover-gray: #636363;
+  --cds-tag-background-cool-gray: #4d5358;
+  --cds-tag-color-cool-gray: #dde1e6;
+  --cds-tag-hover-cool-gray: #5d646a;
+  --cds-tag-background-warm-gray: #565151;
+  --cds-tag-color-warm-gray: #e5e0df;
+  --cds-tag-hover-warm-gray: #696363;
 }
 
 .cds--g100 {
@@ -3360,61 +3355,56 @@ em {
   --cds-border-subtle: var(--cds-border-subtle-01, #e0e0e0);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
-  --cds-button-separator: #e0e0e0;
+  --cds-button-separator: #161616;
   --cds-button-primary: #0f62fe;
-  --cds-button-secondary: #393939;
-  --cds-button-tertiary: #0f62fe;
+  --cds-button-secondary: #6f6f6f;
+  --cds-button-tertiary: #ffffff;
   --cds-button-danger-primary: #da1e28;
-  --cds-button-danger-secondary: #da1e28;
+  --cds-button-danger-secondary: #fa4d56;
   --cds-button-danger-active: #750e13;
   --cds-button-primary-active: #002d9c;
-  --cds-button-secondary-active: #6f6f6f;
-  --cds-button-tertiary-active: #002d9c;
-  --cds-button-danger-hover: #b81922;
+  --cds-button-secondary-active: #393939;
+  --cds-button-tertiary-active: #c6c6c6;
+  --cds-button-danger-hover: #b81921;
   --cds-button-primary-hover: #0050e6;
-  --cds-button-secondary-hover: #474747;
-  --cds-button-tertiary-hover: #0050e6;
-  --cds-button-disabled: #c6c6c6;
-  --cds-notification-background-error: #fff1f1;
-  --cds-notification-background-success: #defbe6;
-  --cds-notification-background-info: #edf5ff;
-  --cds-notification-background-warning: #fdf6dd;
-  --cds-notification-action-hover: #ffffff;
-  --cds-notification-action-tertiary-inverse: #ffffff;
-  --cds-notification-action-tertiary-inverse-active: #c6c6c6;
-  --cds-notification-action-tertiary-inverse-hover: #f4f4f4;
-  --cds-notification-action-tertiary-inverse-text: #161616;
-  --cds-notification-action-tertiary-inverse-text-on-color-disabled: rgba(255, 255, 255, 0.25);
-  --cds-tag-background-red: #ffd7d9;
-  --cds-tag-color-red: #750e13;
-  --cds-tag-hover-red: #ffb3b8;
-  --cds-tag-background-magenta: #ffd6e8;
-  --cds-tag-color-magenta: #740937;
-  --cds-tag-hover-magenta: #ffafd2;
-  --cds-tag-background-purple: #e8daff;
-  --cds-tag-color-purple: #491d8b;
-  --cds-tag-hover-purple: #d4bbff;
-  --cds-tag-background-blue: #d0e2ff;
-  --cds-tag-color-blue: #002d9c;
-  --cds-tag-hover-blue: #a6c8ff;
-  --cds-tag-background-cyan: #bae6ff;
-  --cds-tag-color-cyan: #003a6d;
-  --cds-tag-hover-cyan: #82cfff;
-  --cds-tag-background-teal: #9ef0f0;
-  --cds-tag-color-teal: #004144;
-  --cds-tag-hover-teal: #3ddbd9;
-  --cds-tag-background-green: #a7f0ba;
-  --cds-tag-color-green: #044317;
-  --cds-tag-hover-green: #6fdc8c;
-  --cds-tag-background-gray: #e0e0e0;
-  --cds-tag-color-gray: #393939;
-  --cds-tag-hover-gray: #c6c6c6;
-  --cds-tag-background-cool-gray: #dde1e6;
-  --cds-tag-color-cool-gray: #343a3f;
-  --cds-tag-hover-cool-gray: #c1c7cd;
-  --cds-tag-background-warm-gray: #e5e0df;
-  --cds-tag-color-warm-gray: #3c3838;
-  --cds-tag-hover-warm-gray: #cac5c4;
+  --cds-button-secondary-hover: #5e5e5e;
+  --cds-button-tertiary-hover: #f4f4f4;
+  --cds-button-disabled: rgba(141, 141, 141, 0.3);
+  --cds-notification-action-tertiary-inverse: #0f62fe;
+  --cds-notification-action-tertiary-inverse-active: #002d9c;
+  --cds-notification-action-tertiary-inverse-hover: #0050e6;
+  --cds-notification-action-tertiary-inverse-text: #ffffff;
+  --cds-notification-action-tertiary-inverse-text-on-color-disabled: #8d8d8d;
+  --cds-tag-background-red: #a2191f;
+  --cds-tag-color-red: #ffd7d9;
+  --cds-tag-hover-red: #c21e25;
+  --cds-tag-background-magenta: #9f1853;
+  --cds-tag-color-magenta: #ffd6e8;
+  --cds-tag-hover-magenta: #bf1d63;
+  --cds-tag-background-purple: #6929c4;
+  --cds-tag-color-purple: #e8daff;
+  --cds-tag-hover-purple: #7c3dd6;
+  --cds-tag-background-blue: #0043ce;
+  --cds-tag-color-blue: #d0e2ff;
+  --cds-tag-hover-blue: #0053ff;
+  --cds-tag-background-cyan: #00539a;
+  --cds-tag-color-cyan: #bae6ff;
+  --cds-tag-hover-cyan: #0066bd;
+  --cds-tag-background-teal: #005d5d;
+  --cds-tag-color-teal: #9ef0f0;
+  --cds-tag-hover-teal: #007070;
+  --cds-tag-background-green: #0e6027;
+  --cds-tag-color-green: #a7f0ba;
+  --cds-tag-hover-green: #11742f;
+  --cds-tag-background-gray: #525252;
+  --cds-tag-color-gray: #e0e0e0;
+  --cds-tag-hover-gray: #636363;
+  --cds-tag-background-cool-gray: #4d5358;
+  --cds-tag-color-cool-gray: #dde1e6;
+  --cds-tag-hover-cool-gray: #5d646a;
+  --cds-tag-background-warm-gray: #565151;
+  --cds-tag-color-warm-gray: #e5e0df;
+  --cds-tag-hover-warm-gray: #696363;
 }
 
 .cds--accordion {
@@ -9959,6 +9949,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
 .cds--data-table.cds--data-table--sort th > .cds--table-header-label {
   padding-right: 1rem;
   padding-left: 1rem;
+  line-height: 1;
 }
 
 th .cds--table-sort__flex {
@@ -12645,11 +12636,11 @@ button.cds--dropdown-text:focus {
 
 .cds--modal-content p,
 .cds--modal-content__regular-content {
-  padding-right: 20%;
   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);
+  padding-right: calc(20% - 2rem);
 }
 
 .cds--modal-content--with-form {
@@ -13845,7 +13836,6 @@ button.cds--dropdown-text:focus {
   border-color: var(--cds-support-warning, #f1c21b);
 }
 
-.cds--actionable-notification--warning .cds--inline-notification__icon,
 .cds--actionable-notification--warning .cds--toast-notification__icon path[opacity="0"] {
   fill: #000000;
   opacity: 1;
@@ -13902,6 +13892,8 @@ button.cds--dropdown-text:focus {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   word-break: break-word;
 }
 
@@ -18775,6 +18767,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   }
 }
 
+.cds--tab-content--interactive:focus {
+  outline: none;
+}
+
 .cds--tabs.cds--skeleton {
   cursor: default;
   pointer-events: none;
@@ -19763,43 +19759,50 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tree {
   overflow: hidden;
 }
-.cds--tree .cds--tree-node {
+
+.cds--tree-node {
   padding-left: 1rem;
   background-color: var(--cds-layer-01, #f4f4f4);
   color: var(--cds-text-secondary, #525252);
 }
-.cds--tree .cds--tree-node:focus {
+.cds--tree-node:focus {
   outline: none;
 }
-.cds--tree .cds--tree-node:focus > .cds--tree-node__label {
+
+.cds--tree-node:focus > .cds--tree-node__label {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
-  .cds--tree .cds--tree-node:focus > .cds--tree-node__label {
+  .cds--tree-node:focus > .cds--tree-node__label {
     outline-style: dotted;
   }
 }
-.cds--tree .cds--tree-node--disabled:focus > .cds--tree-node__label {
+
+.cds--tree-node--disabled:focus > .cds--tree-node__label {
   outline: none;
 }
-.cds--tree .cds--tree-node--disabled,
-.cds--tree .cds--tree-node--disabled .cds--tree-node__label:hover,
-.cds--tree .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__label__details {
+
+.cds--tree-node--disabled,
+.cds--tree-node--disabled .cds--tree-node__label:hover,
+.cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__label__details {
   background-color: var(--cds-field-01, #f4f4f4);
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
-.cds--tree .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon,
-.cds--tree .cds--tree-node--disabled .cds--tree-node__icon,
-.cds--tree .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
-.cds--tree .cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__icon {
+
+.cds--tree-node--disabled .cds--tree-parent-node__toggle-icon,
+.cds--tree-node--disabled .cds--tree-node__icon,
+.cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
+.cds--tree-node--disabled .cds--tree-node__label:hover .cds--tree-node__icon {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
-.cds--tree .cds--tree-node--disabled,
-.cds--tree .cds--tree-node--disabled .cds--tree-parent-node__toggle-icon:hover {
+
+.cds--tree-node--disabled,
+.cds--tree-node--disabled .cds--tree-parent-node__toggle-icon:hover {
   cursor: not-allowed;
 }
-.cds--tree .cds--tree-node__label {
+
+.cds--tree-node__label {
   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);
@@ -19815,27 +19818,32 @@ span.cds--pagination__text.cds--pagination__items-count {
       -ms-flex-align: center;
           align-items: center;
 }
-.cds--tree .cds--tree-node__label:hover {
+.cds--tree-node__label:hover {
   background-color: var(--cds-layer-hover-01, #e8e8e8);
   color: var(--cds-text-primary, #161616);
 }
-.cds--tree .cds--tree-node__label:hover .cds--tree-node__label__details {
+
+.cds--tree-node__label:hover .cds--tree-node__label__details {
   color: var(--cds-text-primary, #161616);
 }
-.cds--tree .cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
-.cds--tree .cds--tree-node__label:hover .cds--tree-node__icon {
+
+.cds--tree-node__label:hover .cds--tree-parent-node__toggle-icon,
+.cds--tree-node__label:hover .cds--tree-node__icon {
   fill: var(--cds-icon-primary, #161616);
 }
-.cds--tree .cds--tree-leaf-node {
+
+.cds--tree-leaf-node {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding-left: 2.5rem;
 }
-.cds--tree .cds--tree-leaf-node.cds--tree-node--with-icon {
+
+.cds--tree-leaf-node.cds--tree-node--with-icon {
   padding-left: 2rem;
 }
-.cds--tree .cds--tree-node__label__details {
+
+.cds--tree-node__label__details {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -19843,52 +19851,60 @@ span.cds--pagination__text.cds--pagination__items-count {
       -ms-flex-align: center;
           align-items: center;
 }
-.cds--tree .cds--tree-node--with-icon .cds--tree-parent-node__toggle {
+
+.cds--tree-node--with-icon .cds--tree-parent-node__toggle {
   margin-right: 0;
 }
-.cds--tree .cds--tree-parent-node__toggle {
+
+.cds--tree-parent-node__toggle {
   padding: 0;
   border: 0;
   margin-right: 0.5rem;
 }
-.cds--tree .cds--tree-parent-node__toggle:hover {
+.cds--tree-parent-node__toggle:hover {
   cursor: pointer;
 }
-.cds--tree .cds--tree-parent-node__toggle:focus {
+.cds--tree-parent-node__toggle:focus {
   outline: none;
 }
-.cds--tree .cds--tree-parent-node__toggle-icon {
+
+.cds--tree-parent-node__toggle-icon {
   fill: var(--cds-icon-secondary, #525252);
   -webkit-transform: rotate(-90deg);
           transform: rotate(-90deg);
   -webkit-transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-.cds--tree .cds--tree-parent-node__toggle-icon--expanded {
+
+.cds--tree-parent-node__toggle-icon--expanded {
   -webkit-transform: rotate(0);
           transform: rotate(0);
 }
-.cds--tree .cds--tree-node__icon {
+
+.cds--tree-node__icon {
   min-width: 1rem;
   min-height: 1rem;
   margin-right: 0.5rem;
   fill: var(--cds-icon-secondary, #525252);
 }
-.cds--tree .cds--tree-node--selected > .cds--tree-node__label {
+
+.cds--tree-node--selected > .cds--tree-node__label {
   background-color: var(--cds-layer-selected-01, #e0e0e0);
   color: var(--cds-text-primary, #161616);
 }
-.cds--tree .cds--tree-node--selected > .cds--tree-node__label:hover {
+.cds--tree-node--selected > .cds--tree-node__label:hover {
   background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
 }
-.cds--tree .cds--tree-node--selected > .cds--tree-node__label .cds--tree-parent-node__toggle-icon,
-.cds--tree .cds--tree-node--selected > .cds--tree-node__label .cds--tree-node__icon {
+
+.cds--tree-node--selected > .cds--tree-node__label .cds--tree-parent-node__toggle-icon,
+.cds--tree-node--selected > .cds--tree-node__label .cds--tree-node__icon {
   fill: var(--cds-icon-primary, #161616);
 }
-.cds--tree .cds--tree-node--active > .cds--tree-node__label {
+
+.cds--tree-node--active > .cds--tree-node__label {
   position: relative;
 }
-.cds--tree .cds--tree-node--active > .cds--tree-node__label::before {
+.cds--tree-node--active > .cds--tree-node__label::before {
   position: absolute;
   top: 0;
   left: 0;