@carbon/styles 1.9.0-rc.0 → 1.11.0-rc.0

package/css/styles.css

@@ -2751,6 +2751,8 @@ em {
 }
 
 .cds--white {
+  background: var(--cds-background);
+  color: var(--cds-text-primary);
   --cds-background: #ffffff;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -2918,6 +2920,8 @@ em {
 }
 
 .cds--g10 {
+  background: var(--cds-background);
+  color: var(--cds-text-primary);
   --cds-background: #f4f4f4;
   --cds-background-active: rgba(141, 141, 141, 0.5);
   --cds-background-brand: #0f62fe;
@@ -3085,6 +3089,8 @@ em {
 }
 
 .cds--g90 {
+  background: var(--cds-background);
+  color: var(--cds-text-primary);
   --cds-background: #262626;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -3247,6 +3253,8 @@ em {
 }
 
 .cds--g100 {
+  background: var(--cds-background);
+  color: var(--cds-text-primary);
   --cds-background: #161616;
   --cds-background-active: rgba(141, 141, 141, 0.4);
   --cds-background-brand: #0f62fe;
@@ -3454,6 +3462,7 @@ em {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   position: relative;
   display: -webkit-box;
@@ -4856,12 +4865,71 @@ li.cds--accordion__item--disabled:last-of-type {
   margin-bottom: 0;
 }
 
-.cds--label .cds--tooltip__trigger {
+.cds--label + .cds--tooltip {
+  position: relative;
+  top: 0.2rem;
+  left: 0.5rem;
+}
+
+.cds--label + .cds--tooltip .cds--tooltip__trigger {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   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--label + .cds--tooltip .cds--tooltip__trigger *,
+.cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
+.cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+.cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
+  border: 0;
+}
+
+.cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
+  outline: 1px solid var(--cds-focus, #0f62fe);
+}
+
+.cds--label + .cds--tooltip .cds--tooltip__trigger svg {
+  fill: var(--cds-icon-secondary, #525252);
+}
+
+.cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.cds--label + .cds--toggletip {
+  top: 0.2rem;
+  left: 0.5rem;
+}
 
 .cds--label.cds--skeleton {
   position: relative;
@@ -5136,8 +5204,7 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--checkbox:checked + .cds--checkbox-label::before,
 .cds--checkbox:indeterminate + .cds--checkbox-label::before,
-.cds--checkbox-label[data-contained-checkbox-state=true]::before,
-.cds--checkbox-label[data-contained-checkbox-state=mixed]::before {
+.cds--checkbox-label[data-contained-checkbox-state=true]::before {
   border: none;
   border-width: 1px;
   background-color: var(--cds-icon-primary, #161616);
@@ -5149,8 +5216,7 @@ fieldset[disabled] .cds--form__helper-text {
           transform: scale(1) rotate(-45deg) /*rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/;
 }
 
-.cds--checkbox:indeterminate + .cds--checkbox-label::after,
-.cds--checkbox-label[data-contained-checkbox-state=mixed]::after {
+.cds--checkbox:indeterminate + .cds--checkbox-label::after {
   top: 0.6875rem;
   width: 0.5rem;
   border-bottom: 2px solid var(--cds-icon-inverse, #ffffff);
@@ -5163,8 +5229,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--checkbox-label__focus::before,
 .cds--checkbox:checked:focus + .cds--checkbox-label::before,
 .cds--checkbox-label[data-contained-checkbox-state=true].cds--checkbox-label__focus::before,
-.cds--checkbox:indeterminate:focus + .cds--checkbox-label::before,
-.cds--checkbox-label[data-contained-checkbox-state=mixed].cds--checkbox-label__focus::before {
+.cds--checkbox:indeterminate:focus + .cds--checkbox-label::before {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: 1px;
 }
@@ -5182,8 +5247,7 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--checkbox:checked:disabled + .cds--checkbox-label::before,
 .cds--checkbox:indeterminate:disabled + .cds--checkbox-label::before,
-.cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before,
-.cds--checkbox-label[data-contained-checkbox-state=mixed][data-contained-checkbox-disabled=true]::before {
+.cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before {
   background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
@@ -7251,6 +7315,7 @@ fieldset[disabled] .cds--form__helper-text {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   position: relative;
   display: -webkit-inline-box;
@@ -7353,6 +7418,7 @@ fieldset[disabled] .cds--form__helper-text {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   position: absolute;
   right: 1rem;
   display: -webkit-box;
@@ -7413,6 +7479,7 @@ fieldset[disabled] .cds--form__helper-text {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   position: absolute;
   top: 50%;
   /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
@@ -8112,6 +8179,16 @@ fieldset[disabled] .cds--form__helper-text {
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   color: var(--cds-text-secondary, #525252);
 }
+@media (min-width: 42rem) {
+  .cds--data-table-header__description {
+    max-width: 50ch;
+  }
+}
+@media (min-width: 66rem) {
+  .cds--data-table-header__description {
+    max-width: 80ch;
+  }
+}
 
 .cds--data-table {
   width: 100%;
@@ -8964,6 +9041,7 @@ tr.cds--data-table--selected:last-of-type td {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -9002,6 +9080,7 @@ tr.cds--data-table--selected:last-of-type td {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -9562,6 +9641,7 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -9901,6 +9981,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -12944,7 +13025,7 @@ button.cds--dropdown-text:focus {
   padding-left: 0;
 }
 
-.cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input {
+.cds--multi-select--filterable.cds--list-box--disabled:hover:not(.cds--multi-select--filterable) .cds--text-input {
   background-color: var(--cds-field);
 }
 
@@ -14286,6 +14367,7 @@ button.cds--dropdown-text:focus {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   position: relative;
   display: -webkit-inline-box;
@@ -14646,6 +14728,7 @@ button.cds--dropdown-text:focus {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   outline: 2px solid transparent;
   outline-offset: -2px;
@@ -15893,6 +15976,7 @@ span.cds--pagination__text.cds--pagination__items-count {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   position: relative;
   display: block;
   min-width: 3rem;
@@ -16544,6 +16628,7 @@ span.cds--pagination__text.cds--pagination__items-count {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   border-bottom: 1px dotted var(--cds-border-strong);
   border-radius: 0;
@@ -16785,6 +16870,7 @@ span.cds--pagination__text.cds--pagination__items-count {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -17355,6 +17441,7 @@ span.cds--pagination__text.cds--pagination__items-count {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   outline: 2px solid transparent;
   outline-offset: -2px;
   position: absolute;
@@ -18445,6 +18532,7 @@ span.cds--pagination__text.cds--pagination__items-count {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -18625,6 +18713,7 @@ span.cds--pagination__text.cds--pagination__items-count {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   outline: 2px solid transparent;
   outline-offset: -2px;
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -19234,6 +19323,7 @@ span.cds--pagination__text.cds--pagination__items-count {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   position: absolute;
   right: 0;
@@ -19540,6 +19630,7 @@ span.cds--pagination__text.cds--pagination__items-count {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -19985,6 +20076,7 @@ span.cds--pagination__text.cds--pagination__items-count {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -20550,6 +20642,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -21016,6 +21109,7 @@ a.cds--side-nav__link--current::before {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -21581,6 +21675,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
           appearance: none;
   background: none;
   cursor: pointer;
+  text-align: start;
   width: 100%;
   font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-heading-compact-01-font-weight, 600);