@carbon/styles 1.55.0 → 1.56.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 (9) hide show
  1. package/css/styles.css +36 -13
  2. package/css/styles.min.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/components/fluid-list-box/_fluid-list-box.scss +14 -3
  5. package/scss/components/fluid-select/_fluid-select.scss +9 -0
  6. package/scss/components/fluid-text-area/_fluid-text-area.scss +7 -0
  7. package/scss/components/text-input/_text-input.scss +4 -0
  8. package/scss/components/tile/_tile.scss +12 -3
  9. package/scss/utilities/_ai-gradient.scss +2 -0
package/css/styles.css CHANGED
@@ -7490,6 +7490,10 @@ fieldset[disabled] .cds--form__helper-text {
7490
7490
  transition: outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
7491
7491
  }
7492
7492
 
7493
+ .cds--toggle-password-tooltip .cds--popover {
7494
+ inset-inline-start: -2.5rem;
7495
+ }
7496
+
7493
7497
  .cds--text-input--sm + .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
7494
7498
  inline-size: 2rem;
7495
7499
  }
@@ -15050,8 +15054,8 @@ button.cds--dropdown-text:focus {
15050
15054
  border-block-end: 1px solid var(--cds-border-strong);
15051
15055
  }
15052
15056
 
15053
- .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box__invalid-icon,
15054
- .cds--list-box__wrapper--fluid .cds--list-box--warning .cds--list-box__invalid-icon {
15057
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box[data-invalid] .cds--list-box__invalid-icon,
15058
+ .cds--list-box__wrapper--fluid .cds--list-box.cds--list-box--warning .cds--list-box__invalid-icon {
15055
15059
  inset-block-start: 5.0625rem;
15056
15060
  inset-inline-end: 1rem;
15057
15061
  pointer-events: none;
@@ -15165,6 +15169,11 @@ button.cds--dropdown-text:focus {
15165
15169
  inset-inline-end: 0.75rem;
15166
15170
  }
15167
15171
 
15172
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--slug::before,
15173
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug::before {
15174
+ display: none;
15175
+ }
15176
+
15168
15177
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
15169
15178
  overflow: visible;
15170
15179
  padding: 0;
@@ -16899,8 +16908,8 @@ optgroup.cds--select-optgroup:disabled,
16899
16908
  border-color: transparent;
16900
16909
  }
16901
16910
 
16902
- .cds--select--fluid .cds--select--invalid .cds--select__invalid-icon,
16903
- .cds--select--fluid .cds--select--warning .cds--select__invalid-icon {
16911
+ .cds--select--fluid .cds--select--invalid .cds--select-input__wrapper[data-invalid] .cds--select__invalid-icon,
16912
+ .cds--select--fluid .cds--select--warning .cds--select-input__wrapper .cds--select__invalid-icon {
16904
16913
  inset-block-start: 4.5625rem;
16905
16914
  inset-inline-end: 1rem;
16906
16915
  pointer-events: none;
@@ -16942,6 +16951,10 @@ optgroup.cds--select-optgroup:disabled,
16942
16951
  padding-inline-end: 4rem;
16943
16952
  }
16944
16953
 
16954
+ .cds--select--fluid .cds--select--slug:has(.cds--select__invalid-icon) .cds--slug::before {
16955
+ display: none;
16956
+ }
16957
+
16945
16958
  .cds--text-area {
16946
16959
  box-sizing: border-box;
16947
16960
  padding: 0;
@@ -17316,6 +17329,10 @@ optgroup.cds--select-optgroup:disabled,
17316
17329
  inset-inline-end: 1rem;
17317
17330
  }
17318
17331
 
17332
+ .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid {
17333
+ border-block-end-color: transparent;
17334
+ }
17335
+
17319
17336
  .cds--text-input--fluid.cds--text-input-wrapper {
17320
17337
  position: relative;
17321
17338
  background: var(--cds-field);
@@ -18254,14 +18271,14 @@ optgroup.cds--select-optgroup:disabled,
18254
18271
  }
18255
18272
 
18256
18273
  .cds--modal--slug .cds--modal-container {
18257
- background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
18274
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
18258
18275
  border: 1px solid transparent;
18259
18276
  background-color: var(--cds-layer);
18260
18277
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
18261
18278
  }
18262
18279
 
18263
18280
  .cds--modal--slug .cds--modal-container:has(.cds--modal-footer) {
18264
- background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
18281
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) calc(0% + 64px), var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) calc(0% + 64px), 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
18265
18282
  box-shadow: inset 0 -80px 0 -16px var(--cds-layer), inset 0 -160px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
18266
18283
  }
18267
18284
 
@@ -21440,7 +21457,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21440
21457
  }
21441
21458
 
21442
21459
  .cds--slug .cds--slug-content {
21443
- background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
21460
+ background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
21444
21461
  border: 1px solid transparent;
21445
21462
  border-radius: 0.5rem;
21446
21463
  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), -40px 44px 60px -24px var(--cds-ai-popover-shadow-outer-01, rgba(0, 67, 206, 0.06)), -56px 64px 64px -24px var(--cds-ai-popover-shadow-outer-02, rgba(0, 0, 0, 0.04));
@@ -22781,6 +22798,7 @@ span.cds--pagination__text.cds--pagination__items-count {
22781
22798
  .cds--tile--clickable:focus {
22782
22799
  outline: 2px solid var(--cds-focus, #0f62fe);
22783
22800
  outline-offset: -2px;
22801
+ text-decoration: none;
22784
22802
  }
22785
22803
  @media screen and (prefers-contrast) {
22786
22804
  .cds--tile--clickable:focus {
@@ -23082,13 +23100,13 @@ span.cds--pagination__text.cds--pagination__items-count {
23082
23100
  }
23083
23101
 
23084
23102
  .cds--tile--slug.cds--tile {
23085
- background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
23103
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
23086
23104
  border: 1px solid transparent;
23087
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 24px 40px -24px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
23105
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
23088
23106
  }
23089
23107
 
23090
23108
  .cds--tile--slug.cds--tile--expandable:hover {
23091
- background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
23109
+ background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
23092
23110
  }
23093
23111
 
23094
23112
  .cds--tile--slug.cds--tile--selectable::before,
@@ -23108,7 +23126,7 @@ span.cds--pagination__text.cds--pagination__items-count {
23108
23126
  .cds--tile--slug.cds--tile--selectable::before,
23109
23127
  .cds--tile--slug.cds--tile--clickable::before {
23110
23128
  background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
23111
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
23129
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
23112
23130
  }
23113
23131
 
23114
23132
  .cds--tile--slug.cds--tile--selectable:hover::before,
@@ -23116,9 +23134,14 @@ span.cds--pagination__text.cds--pagination__items-count {
23116
23134
  opacity: 1;
23117
23135
  }
23118
23136
 
23137
+ .cds--tile--slug.cds--tile--selectable:focus,
23138
+ .cds--tile--slug.cds--tile--clickable:focus {
23139
+ outline-offset: -1px;
23140
+ }
23141
+
23119
23142
  .cds--tile--slug.cds--tile--selectable::after {
23120
- background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-border-inverse, #161616), var(--cds-border-inverse, #161616)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
23121
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
23143
+ background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-border-inverse, #161616), var(--cds-border-inverse, #161616)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
23144
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 8px 0 var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
23122
23145
  }
23123
23146
 
23124
23147
  .cds--tile--slug.cds--tile--selectable:hover::after {