@carbon/styles 1.55.0 → 1.55.1-rc.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 (8) hide show
  1. package/css/styles.css +32 -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/tile/_tile.scss +12 -3
  8. package/scss/utilities/_ai-gradient.scss +2 -0
package/css/styles.css CHANGED
@@ -15050,8 +15050,8 @@ button.cds--dropdown-text:focus {
15050
15050
  border-block-end: 1px solid var(--cds-border-strong);
15051
15051
  }
15052
15052
 
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 {
15053
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box[data-invalid] .cds--list-box__invalid-icon,
15054
+ .cds--list-box__wrapper--fluid .cds--list-box.cds--list-box--warning .cds--list-box__invalid-icon {
15055
15055
  inset-block-start: 5.0625rem;
15056
15056
  inset-inline-end: 1rem;
15057
15057
  pointer-events: none;
@@ -15165,6 +15165,11 @@ button.cds--dropdown-text:focus {
15165
15165
  inset-inline-end: 0.75rem;
15166
15166
  }
15167
15167
 
15168
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--slug .cds--list-box--invalid[data-invalid] .cds--slug::before,
15169
+ .cds--list-box__wrapper--slug .cds--list-box--warning .cds--slug::before {
15170
+ display: none;
15171
+ }
15172
+
15168
15173
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__field {
15169
15174
  overflow: visible;
15170
15175
  padding: 0;
@@ -16899,8 +16904,8 @@ optgroup.cds--select-optgroup:disabled,
16899
16904
  border-color: transparent;
16900
16905
  }
16901
16906
 
16902
- .cds--select--fluid .cds--select--invalid .cds--select__invalid-icon,
16903
- .cds--select--fluid .cds--select--warning .cds--select__invalid-icon {
16907
+ .cds--select--fluid .cds--select--invalid .cds--select-input__wrapper[data-invalid] .cds--select__invalid-icon,
16908
+ .cds--select--fluid .cds--select--warning .cds--select-input__wrapper .cds--select__invalid-icon {
16904
16909
  inset-block-start: 4.5625rem;
16905
16910
  inset-inline-end: 1rem;
16906
16911
  pointer-events: none;
@@ -16942,6 +16947,10 @@ optgroup.cds--select-optgroup:disabled,
16942
16947
  padding-inline-end: 4rem;
16943
16948
  }
16944
16949
 
16950
+ .cds--select--fluid .cds--select--slug:has(.cds--select__invalid-icon) .cds--slug::before {
16951
+ display: none;
16952
+ }
16953
+
16945
16954
  .cds--text-area {
16946
16955
  box-sizing: border-box;
16947
16956
  padding: 0;
@@ -17316,6 +17325,10 @@ optgroup.cds--select-optgroup:disabled,
17316
17325
  inset-inline-end: 1rem;
17317
17326
  }
17318
17327
 
17328
+ .cds--text-area--fluid .cds--text-area__wrapper--slug .cds--text-area--invalid {
17329
+ border-block-end-color: transparent;
17330
+ }
17331
+
17319
17332
  .cds--text-input--fluid.cds--text-input-wrapper {
17320
17333
  position: relative;
17321
17334
  background: var(--cds-field);
@@ -18254,14 +18267,14 @@ optgroup.cds--select-optgroup:disabled,
18254
18267
  }
18255
18268
 
18256
18269
  .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;
18270
+ 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
18271
  border: 1px solid transparent;
18259
18272
  background-color: var(--cds-layer);
18260
18273
  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
18274
  }
18262
18275
 
18263
18276
  .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;
18277
+ 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
18278
  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
18279
  }
18267
18280
 
@@ -21440,7 +21453,7 @@ span.cds--pagination__text.cds--pagination__items-count {
21440
21453
  }
21441
21454
 
21442
21455
  .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;
21456
+ 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
21457
  border: 1px solid transparent;
21445
21458
  border-radius: 0.5rem;
21446
21459
  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 +22794,7 @@ span.cds--pagination__text.cds--pagination__items-count {
22781
22794
  .cds--tile--clickable:focus {
22782
22795
  outline: 2px solid var(--cds-focus, #0f62fe);
22783
22796
  outline-offset: -2px;
22797
+ text-decoration: none;
22784
22798
  }
22785
22799
  @media screen and (prefers-contrast) {
22786
22800
  .cds--tile--clickable:focus {
@@ -23082,13 +23096,13 @@ span.cds--pagination__text.cds--pagination__items-count {
23082
23096
  }
23083
23097
 
23084
23098
  .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;
23099
+ 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
23100
  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));
23101
+ 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
23102
  }
23089
23103
 
23090
23104
  .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;
23105
+ 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
23106
  }
23093
23107
 
23094
23108
  .cds--tile--slug.cds--tile--selectable::before,
@@ -23108,7 +23122,7 @@ span.cds--pagination__text.cds--pagination__items-count {
23108
23122
  .cds--tile--slug.cds--tile--selectable::before,
23109
23123
  .cds--tile--slug.cds--tile--clickable::before {
23110
23124
  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));
23125
+ 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
23126
  }
23113
23127
 
23114
23128
  .cds--tile--slug.cds--tile--selectable:hover::before,
@@ -23116,9 +23130,14 @@ span.cds--pagination__text.cds--pagination__items-count {
23116
23130
  opacity: 1;
23117
23131
  }
23118
23132
 
23133
+ .cds--tile--slug.cds--tile--selectable:focus,
23134
+ .cds--tile--slug.cds--tile--clickable:focus {
23135
+ outline-offset: -1px;
23136
+ }
23137
+
23119
23138
  .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));
23139
+ 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;
23140
+ 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
23141
  }
23123
23142
 
23124
23143
  .cds--tile--slug.cds--tile--selectable:hover::after {