@carbon/styles 1.32.0-rc.0 → 1.32.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 (6) hide show
  1. package/css/styles.css +74 -11
  2. package/css/styles.min.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/components/list-box/_list-box.scss +74 -10
  5. package/scss/components/modal/_modal.scss +14 -0
  6. package/scss/components/tabs/_tabs.scss +22 -0
package/css/styles.css CHANGED
@@ -6916,7 +6916,15 @@ fieldset[disabled] .cds--form__helper-text {
6916
6916
  }
6917
6917
 
6918
6918
  .cds--list-box--expanded {
6919
- border-bottom-color: var(--cds-border-subtle);
6919
+ border-bottom-color: var(--cds-border-subtle-01, #c6c6c6);
6920
+ }
6921
+
6922
+ .cds--layer-two .cds--list-box--expanded {
6923
+ border-bottom-color: var(--cds-border-subtle-02, #e0e0e0);
6924
+ }
6925
+
6926
+ .cds--layer-three .cds--list-box--expanded {
6927
+ border-bottom-color: var(--cds-border-subtle-03, #c6c6c6);
6920
6928
  }
6921
6929
 
6922
6930
  .cds--list-box--expanded:hover {
@@ -7423,7 +7431,15 @@ fieldset[disabled] .cds--form__helper-text {
7423
7431
  }
7424
7432
 
7425
7433
  .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
7426
- border-top-color: var(--cds-border-subtle);
7434
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
7435
+ }
7436
+
7437
+ .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
7438
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
7439
+ }
7440
+
7441
+ .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
7442
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
7427
7443
  }
7428
7444
 
7429
7445
  .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option {
@@ -7434,12 +7450,24 @@ fieldset[disabled] .cds--form__helper-text {
7434
7450
  color: var(--cds-text-primary, #161616);
7435
7451
  }
7436
7452
 
7437
- .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7438
- border-top-color: transparent;
7453
+ .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7454
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
7439
7455
  }
7440
7456
 
7441
- .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7442
- border-top-color: var(--cds-border-subtle);
7457
+ .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7458
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
7459
+ }
7460
+
7461
+ .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7462
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
7463
+ }
7464
+
7465
+ .cds--layer-two .cds--list-box__menu-item__option {
7466
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
7467
+ }
7468
+
7469
+ .cds--layer-three .cds--list-box__menu-item__option {
7470
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
7443
7471
  }
7444
7472
 
7445
7473
  .cds--list-box__menu-item__option {
@@ -7451,7 +7479,7 @@ fieldset[disabled] .cds--form__helper-text {
7451
7479
  padding: 0.6875rem 0;
7452
7480
  padding-right: 1.5rem;
7453
7481
  border-top: 1px solid transparent;
7454
- border-top-color: var(--cds-border-subtle);
7482
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
7455
7483
  border-bottom: 1px solid transparent;
7456
7484
  margin: 0 1rem;
7457
7485
  color: var(--cds-text-secondary, #525252);
@@ -7513,12 +7541,24 @@ fieldset[disabled] .cds--form__helper-text {
7513
7541
  border-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
7514
7542
  }
7515
7543
 
7516
- .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option {
7517
- border-top-color: var(--cds-border-subtle);
7544
+ .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
7545
+ .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7546
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
7518
7547
  }
7519
7548
 
7520
- .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7521
- border-top-color: var(--cds-border-subtle);
7549
+ .cds--layer-two .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
7550
+ .cds--layer-two .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7551
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
7552
+ }
7553
+
7554
+ .cds--layer-three .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
7555
+ .cds--layer-three .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7556
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
7557
+ }
7558
+
7559
+ .cds--list-box__menu-item--active + .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
7560
+ .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
7561
+ border-top-color: transparent;
7522
7562
  }
7523
7563
 
7524
7564
  .cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option {
@@ -15048,6 +15088,15 @@ optgroup.cds--select-optgroup:disabled,
15048
15088
  .cds--modal .cds--number__rule-divider {
15049
15089
  background-color: var(--cds-border-subtle-02, #e0e0e0);
15050
15090
  }
15091
+ .cds--modal .cds--list-box__menu-item__option {
15092
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
15093
+ }
15094
+ .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
15095
+ border-top-color: var(--cds-layer-hover);
15096
+ }
15097
+ .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
15098
+ border-top-color: var(--cds-layer-selected-hover);
15099
+ }
15051
15100
  .cds--modal .cds--text-input--fluid .cds--text-input,
15052
15101
  .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
15053
15102
  .cds--modal .cds--text-area--fluid .cds--text-area,
@@ -19460,6 +19509,20 @@ span.cds--pagination__text.cds--pagination__items-count {
19460
19509
  }
19461
19510
  }
19462
19511
 
19512
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list {
19513
+ display: grid;
19514
+ width: 100%;
19515
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
19516
+ }
19517
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-label,
19518
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-secondary-label {
19519
+ overflow: hidden;
19520
+ text-overflow: ellipsis;
19521
+ }
19522
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item--icon {
19523
+ margin-left: auto;
19524
+ }
19525
+
19463
19526
  .cds--tabs {
19464
19527
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
19465
19528
  font-weight: var(--cds-body-compact-01-font-weight, 400);