@carbon/styles 1.20.0 → 1.21.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 (11) hide show
  1. package/css/styles.css +24 -23
  2. package/css/styles.min.css +1 -1
  3. package/package.json +10 -10
  4. package/scss/__tests__/type-test.js +24 -0
  5. package/scss/components/code-snippet/_code-snippet.scss +1 -0
  6. package/scss/components/combo-box/_combo-box.scss +1 -1
  7. package/scss/components/dropdown/_dropdown.scss +2 -2
  8. package/scss/components/list-box/_list-box.scss +3 -3
  9. package/scss/components/select/_select.scss +2 -2
  10. package/scss/components/tile/_tile.scss +1 -1
  11. package/scss/type/_index.scss +26 -0
package/css/styles.css CHANGED
@@ -2842,7 +2842,7 @@ em {
2842
2842
  --cds-support-error-inverse: #fa4d56;
2843
2843
  --cds-support-info: #0043ce;
2844
2844
  --cds-support-info-inverse: #4589ff;
2845
- --cds-support-success: #198038;
2845
+ --cds-support-success: #24a148;
2846
2846
  --cds-support-success-inverse: #42be65;
2847
2847
  --cds-support-warning: #f1c21b;
2848
2848
  --cds-support-warning-inverse: #f1c21b;
@@ -3015,7 +3015,7 @@ em {
3015
3015
  --cds-support-error-inverse: #fa4d56;
3016
3016
  --cds-support-info: #0043ce;
3017
3017
  --cds-support-info-inverse: #4589ff;
3018
- --cds-support-success: #198038;
3018
+ --cds-support-success: #24a148;
3019
3019
  --cds-support-success-inverse: #42be65;
3020
3020
  --cds-support-warning: #f1c21b;
3021
3021
  --cds-support-warning-inverse: #f1c21b;
@@ -5531,6 +5531,7 @@ fieldset[disabled] .cds--form__helper-text {
5531
5531
  }
5532
5532
 
5533
5533
  .cds--snippet--disabled .cds--snippet-btn--expand:hover,
5534
+ .cds--snippet--disabled .cds--copy-btn,
5534
5535
  .cds--snippet--disabled .cds--copy-btn:hover {
5535
5536
  background-color: var(--cds-layer);
5536
5537
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
@@ -7277,7 +7278,7 @@ fieldset[disabled] .cds--form__helper-text {
7277
7278
  }
7278
7279
 
7279
7280
  .cds--list-box--expanded:hover.cds--list-box--light:hover {
7280
- background-color: var(--cds-field);
7281
+ background-color: var(--cds-field-02, #ffffff);
7281
7282
  }
7282
7283
 
7283
7284
  .cds--list-box .cds--text-input {
@@ -7315,7 +7316,7 @@ fieldset[disabled] .cds--form__helper-text {
7315
7316
  }
7316
7317
 
7317
7318
  .cds--list-box--light {
7318
- background-color: var(--cds-field);
7319
+ background-color: var(--cds-field-02, #ffffff);
7319
7320
  }
7320
7321
  .cds--list-box--light:hover {
7321
7322
  background-color: var(--cds-field-hover);
@@ -7338,7 +7339,7 @@ fieldset[disabled] .cds--form__helper-text {
7338
7339
  }
7339
7340
 
7340
7341
  .cds--list-box--light.cds--list-box--disabled {
7341
- background-color: var(--cds-field);
7342
+ background-color: var(--cds-field-02, #ffffff);
7342
7343
  }
7343
7344
 
7344
7345
  .cds--list-box--disabled,
@@ -8046,7 +8047,7 @@ fieldset[disabled] .cds--form__helper-text {
8046
8047
  }
8047
8048
 
8048
8049
  .cds--combo-box.cds--list-box--light:hover {
8049
- background-color: var(--cds-field);
8050
+ background-color: var(--cds-field-02, #ffffff);
8050
8051
  }
8051
8052
 
8052
8053
  .cds--combo-box .cds--text-input::-ms-clear {
@@ -11681,7 +11682,7 @@ th .cds--table-sort__flex {
11681
11682
  }
11682
11683
 
11683
11684
  .cds--dropdown--light {
11684
- background-color: var(--cds-field);
11685
+ background-color: var(--cds-field-02, #ffffff);
11685
11686
  }
11686
11687
  .cds--dropdown--light:hover {
11687
11688
  background-color: var(--cds-field-hover);
@@ -11915,7 +11916,7 @@ button.cds--dropdown-text:focus {
11915
11916
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11916
11917
  }
11917
11918
  .cds--dropdown--disabled.cds--dropdown--light:hover {
11918
- background-color: var(--cds-field);
11919
+ background-color: var(--cds-field-02, #ffffff);
11919
11920
  }
11920
11921
 
11921
11922
  .cds--dropdown--disabled .cds--list-box__field,
@@ -14685,13 +14686,13 @@ button.cds--dropdown-text:focus {
14685
14686
  }
14686
14687
 
14687
14688
  .cds--select--light .cds--select-input {
14688
- background-color: var(--cds-field);
14689
+ background-color: var(--cds-field-02, #ffffff);
14689
14690
  }
14690
14691
  .cds--select--light .cds--select-input:hover {
14691
14692
  background-color: var(--cds-field-hover);
14692
14693
  }
14693
14694
  .cds--select--light .cds--select-input:disabled, .cds--select--light .cds--select-input:hover:disabled {
14694
- background-color: var(--cds-field);
14695
+ background-color: var(--cds-field-02, #ffffff);
14695
14696
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
14696
14697
  cursor: not-allowed;
14697
14698
  }
@@ -15551,7 +15552,7 @@ optgroup.cds--select-optgroup:disabled,
15551
15552
  }
15552
15553
 
15553
15554
  .cds--inline-loading__checkmark-container {
15554
- fill: var(--cds-support-success, #198038);
15555
+ fill: var(--cds-support-success, #24a148);
15555
15556
  }
15556
15557
  .cds--inline-loading__checkmark-container.cds--inline-loading__svg {
15557
15558
  position: absolute;
@@ -16460,16 +16461,16 @@ optgroup.cds--select-optgroup:disabled,
16460
16461
  }
16461
16462
 
16462
16463
  .cds--inline-notification--low-contrast.cds--inline-notification--success {
16463
- border-left: 3px solid var(--cds-support-success, #198038);
16464
+ border-left: 3px solid var(--cds-support-success, #24a148);
16464
16465
  background: var(--cds-notification-background-success, #defbe6);
16465
16466
  }
16466
16467
  .cds--inline-notification--low-contrast.cds--inline-notification--success .cds--inline-notification__icon,
16467
16468
  .cds--inline-notification--low-contrast.cds--inline-notification--success .cds--toast-notification__icon,
16468
16469
  .cds--inline-notification--low-contrast.cds--inline-notification--success .cds--actionable-notification__icon {
16469
- fill: var(--cds-support-success, #198038);
16470
+ fill: var(--cds-support-success, #24a148);
16470
16471
  }
16471
16472
  .cds--inline-notification--low-contrast.cds--inline-notification--success::before {
16472
- border-color: var(--cds-support-success, #198038);
16473
+ border-color: var(--cds-support-success, #24a148);
16473
16474
  }
16474
16475
 
16475
16476
  .cds--inline-notification--info,
@@ -16807,13 +16808,13 @@ optgroup.cds--select-optgroup:disabled,
16807
16808
  }
16808
16809
 
16809
16810
  .cds--toast-notification--low-contrast.cds--toast-notification--success {
16810
- border-left: 3px solid var(--cds-support-success, #198038);
16811
+ border-left: 3px solid var(--cds-support-success, #24a148);
16811
16812
  background: var(--cds-notification-background-success, #defbe6);
16812
16813
  }
16813
16814
  .cds--toast-notification--low-contrast.cds--toast-notification--success .cds--inline-notification__icon,
16814
16815
  .cds--toast-notification--low-contrast.cds--toast-notification--success .cds--toast-notification__icon,
16815
16816
  .cds--toast-notification--low-contrast.cds--toast-notification--success .cds--actionable-notification__icon {
16816
- fill: var(--cds-support-success, #198038);
16817
+ fill: var(--cds-support-success, #24a148);
16817
16818
  }
16818
16819
 
16819
16820
  .cds--toast-notification--info,
@@ -17140,16 +17141,16 @@ optgroup.cds--select-optgroup:disabled,
17140
17141
  }
17141
17142
 
17142
17143
  .cds--actionable-notification--low-contrast.cds--actionable-notification--success {
17143
- border-left: 3px solid var(--cds-support-success, #198038);
17144
+ border-left: 3px solid var(--cds-support-success, #24a148);
17144
17145
  background: var(--cds-notification-background-success, #defbe6);
17145
17146
  }
17146
17147
  .cds--actionable-notification--low-contrast.cds--actionable-notification--success .cds--inline-notification__icon,
17147
17148
  .cds--actionable-notification--low-contrast.cds--actionable-notification--success .cds--toast-notification__icon,
17148
17149
  .cds--actionable-notification--low-contrast.cds--actionable-notification--success .cds--actionable-notification__icon {
17149
- fill: var(--cds-support-success, #198038);
17150
+ fill: var(--cds-support-success, #24a148);
17150
17151
  }
17151
17152
  .cds--actionable-notification--low-contrast.cds--actionable-notification--success::before {
17152
- border-color: var(--cds-support-success, #198038);
17153
+ border-color: var(--cds-support-success, #24a148);
17153
17154
  }
17154
17155
 
17155
17156
  .cds--actionable-notification--info,
@@ -18999,7 +19000,7 @@ span.cds--pagination__text.cds--pagination__items-count {
18999
19000
 
19000
19001
  .cds--progress-bar--finished .cds--progress-bar__bar,
19001
19002
  .cds--progress-bar--finished .cds--progress-bar__status-icon {
19002
- color: var(--cds-support-success, #198038);
19003
+ color: var(--cds-support-success, #24a148);
19003
19004
  }
19004
19005
 
19005
19006
  .cds--progress-bar--error .cds--progress-bar__bar,
@@ -21199,7 +21200,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21199
21200
  }
21200
21201
 
21201
21202
  .cds--tile--light {
21202
- background-color: var(--cds-layer);
21203
+ background-color: var(--cds-layer-02, #ffffff);
21203
21204
  }
21204
21205
 
21205
21206
  .cds--tile--clickable,
@@ -21827,7 +21828,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21827
21828
  }
21828
21829
 
21829
21830
  .cds--toggle__switch--checked {
21830
- background-color: var(--cds-support-success, #198038);
21831
+ background-color: var(--cds-support-success, #24a148);
21831
21832
  }
21832
21833
  .cds--toggle__switch--checked::before {
21833
21834
  -webkit-transform: translateX(1.5rem);
@@ -21862,7 +21863,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21862
21863
  right: 0.3125rem;
21863
21864
  width: 0.375rem;
21864
21865
  height: 0.3125rem;
21865
- fill: var(--cds-support-success, #198038);
21866
+ fill: var(--cds-support-success, #24a148);
21866
21867
  visibility: hidden;
21867
21868
  }
21868
21869