@carbon/styles 1.4.0 → 1.5.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

@@ -13845,7 +13845,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;
@@ -19763,43 +19762,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 +19821,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 +19854,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;