@carbon/styles 1.48.1 → 1.49.0-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 (10) hide show
  1. package/css/styles.css +69 -13
  2. package/css/styles.min.css +1 -1
  3. package/package.json +3 -3
  4. package/scss/__tests__/theme-test.js +12 -0
  5. package/scss/components/button/_button.scss +6 -0
  6. package/scss/components/modal/_modal.scss +1 -1
  7. package/scss/components/number-input/_number-input.scss +6 -1
  8. package/scss/components/slug/_slug.scss +1 -7
  9. package/scss/components/tile/_tile.scss +17 -7
  10. package/scss/utilities/_ai-gradient.scss +40 -27
package/css/styles.css CHANGED
@@ -2760,6 +2760,9 @@ em {
2760
2760
  background-color: var(--cds-background);
2761
2761
  color: var(--cds-text-primary);
2762
2762
  --cds-ai-aura-end: rgba(255, 255, 255, 0);
2763
+ --cds-ai-aura-hover-background: #edf5ff;
2764
+ --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
2765
+ --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
2763
2766
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2764
2767
  --cds-ai-border-end: #d0e2ff;
2765
2768
  --cds-ai-border-start: #78a9ff;
@@ -2793,6 +2796,15 @@ em {
2793
2796
  --cds-border-tile-01: #c6c6c6;
2794
2797
  --cds-border-tile-02: #a8a8a8;
2795
2798
  --cds-border-tile-03: #c6c6c6;
2799
+ --cds-chat-avatar-agent: #161616;
2800
+ --cds-chat-avatar-bot: #0f62fe;
2801
+ --cds-chat-avatar-user: #161616;
2802
+ --cds-chat-bubble-agent: #ffffff;
2803
+ --cds-chat-bubble-agent-border: #e0e0e0;
2804
+ --cds-chat-bubble-user: #e0e0e0;
2805
+ --cds-chat-prompt-background: #ffffff;
2806
+ --cds-chat-prompt-border-end: rgba(244, 244, 244, 0);
2807
+ --cds-chat-prompt-border-start: #f4f4f4;
2796
2808
  --cds-field-01: #f4f4f4;
2797
2809
  --cds-field-02: #ffffff;
2798
2810
  --cds-field-03: #f4f4f4;
@@ -2967,6 +2979,9 @@ em {
2967
2979
  background-color: var(--cds-background);
2968
2980
  color: var(--cds-text-primary);
2969
2981
  --cds-ai-aura-end: rgba(255, 255, 255, 0);
2982
+ --cds-ai-aura-hover-background: #edf5ff;
2983
+ --cds-ai-aura-hover-end: rgba(255, 255, 255, 0);
2984
+ --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
2970
2985
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
2971
2986
  --cds-ai-border-end: #d0e2ff;
2972
2987
  --cds-ai-border-start: #78a9ff;
@@ -3000,6 +3015,15 @@ em {
3000
3015
  --cds-border-tile-01: #a8a8a8;
3001
3016
  --cds-border-tile-02: #c6c6c6;
3002
3017
  --cds-border-tile-03: #a8a8a8;
3018
+ --cds-chat-avatar-agent: #161616;
3019
+ --cds-chat-avatar-bot: #0f62fe;
3020
+ --cds-chat-avatar-user: #161616;
3021
+ --cds-chat-bubble-agent: #ffffff;
3022
+ --cds-chat-bubble-agent-border: #e0e0e0;
3023
+ --cds-chat-bubble-user: #e0e0e0;
3024
+ --cds-chat-prompt-background: #ffffff;
3025
+ --cds-chat-prompt-border-end: rgba(244, 244, 244, 0);
3026
+ --cds-chat-prompt-border-start: #f4f4f4;
3003
3027
  --cds-field-01: #ffffff;
3004
3028
  --cds-field-02: #f4f4f4;
3005
3029
  --cds-field-03: #ffffff;
@@ -3174,6 +3198,9 @@ em {
3174
3198
  background-color: var(--cds-background);
3175
3199
  color: var(--cds-text-primary);
3176
3200
  --cds-ai-aura-end: rgba(0, 0, 0, 0);
3201
+ --cds-ai-aura-hover-background: #474747;
3202
+ --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
3203
+ --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
3177
3204
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3178
3205
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3179
3206
  --cds-ai-border-start: #4589ff;
@@ -3206,6 +3233,15 @@ em {
3206
3233
  --cds-border-tile-01: #6f6f6f;
3207
3234
  --cds-border-tile-02: #8d8d8d;
3208
3235
  --cds-border-tile-03: #a8a8a8;
3236
+ --cds-chat-avatar-agent: #f4f4f4;
3237
+ --cds-chat-avatar-bot: #4589ff;
3238
+ --cds-chat-avatar-user: #f4f4f4;
3239
+ --cds-chat-bubble-agent: #262626;
3240
+ --cds-chat-bubble-agent-border: #525252;
3241
+ --cds-chat-bubble-user: #393939;
3242
+ --cds-chat-prompt-background: #161616;
3243
+ --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
3244
+ --cds-chat-prompt-border-start: #262626;
3209
3245
  --cds-field-01: #393939;
3210
3246
  --cds-field-02: #525252;
3211
3247
  --cds-field-03: #6f6f6f;
@@ -3377,6 +3413,9 @@ em {
3377
3413
  background-color: var(--cds-background);
3378
3414
  color: var(--cds-text-primary);
3379
3415
  --cds-ai-aura-end: rgba(0, 0, 0, 0);
3416
+ --cds-ai-aura-hover-background: #333333;
3417
+ --cds-ai-aura-hover-end: rgba(0, 0, 0, 0);
3418
+ --cds-ai-aura-hover-start: rgba(69, 137, 255, 0.4);
3380
3419
  --cds-ai-aura-start: rgba(69, 137, 255, 0.1);
3381
3420
  --cds-ai-border-end: rgba(166, 200, 255, 0.24);
3382
3421
  --cds-ai-border-start: #4589ff;
@@ -3409,6 +3448,15 @@ em {
3409
3448
  --cds-border-tile-01: #525252;
3410
3449
  --cds-border-tile-02: #6f6f6f;
3411
3450
  --cds-border-tile-03: #8d8d8d;
3451
+ --cds-chat-avatar-agent: #f4f4f4;
3452
+ --cds-chat-avatar-bot: #4589ff;
3453
+ --cds-chat-avatar-user: #f4f4f4;
3454
+ --cds-chat-bubble-agent: #262626;
3455
+ --cds-chat-bubble-agent-border: #525252;
3456
+ --cds-chat-bubble-user: #393939;
3457
+ --cds-chat-prompt-background: #161616;
3458
+ --cds-chat-prompt-border-end: rgba(38, 38, 38, 0);
3459
+ --cds-chat-prompt-border-start: #262626;
3412
3460
  --cds-field-01: #262626;
3413
3461
  --cds-field-02: #393939;
3414
3462
  --cds-field-03: #525252;
@@ -4643,6 +4691,11 @@ li.cds--accordion__item--disabled:last-of-type {
4643
4691
  margin: 0;
4644
4692
  }
4645
4693
 
4694
+ .cds--btn--sm:not(.cds--btn--icon-only) .cds--btn__icon,
4695
+ .cds--btn--md:not(.cds--btn--icon-only) .cds--btn__icon {
4696
+ margin-block-start: 0;
4697
+ }
4698
+
4646
4699
  .cds--btn--icon-only.cds--btn--selected {
4647
4700
  background: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
4648
4701
  }
@@ -15421,7 +15474,7 @@ button.cds--dropdown-text:focus {
15421
15474
  padding-inline-end: 7rem;
15422
15475
  }
15423
15476
 
15424
- .cds--number__input-wrapper--slug .cds--number__control-btn {
15477
+ .cds--number__input-wrapper--slug input[type=number]:not([data-invalid]):not(:has(~ .cds--slug--revert)) ~ .cds--number__controls .cds--number__control-btn {
15425
15478
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
15426
15479
  }
15427
15480
 
@@ -20929,11 +20982,7 @@ span.cds--pagination__text.cds--pagination__items-count {
20929
20982
  padding-inline: 1.5rem;
20930
20983
  }
20931
20984
 
20932
- .cds--slug.cds--slug--enabled .cds--slug-content--with-actions .cds--toggletip-content {
20933
- max-inline-size: 20.875rem;
20934
- }
20935
-
20936
- .cds--slug.cds--slug--enabled .cds--slug-content:not(.cds--slug-content--with-actions) .cds--toggletip-content {
20985
+ .cds--slug.cds--slug--enabled .cds--slug-content .cds--toggletip-content {
20937
20986
  max-inline-size: 20rem;
20938
20987
  }
20939
20988
 
@@ -22177,12 +22226,13 @@ span.cds--pagination__text.cds--pagination__items-count {
22177
22226
  }
22178
22227
 
22179
22228
  .cds--tile--slug.cds--tile {
22180
- 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-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
22181
- border: 1px solid var(--cds-border-tile);
22229
+ 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-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
22230
+ border: 1px solid transparent;
22231
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
22182
22232
  }
22183
22233
 
22184
22234
  .cds--tile--slug.cds--tile--expandable:hover {
22185
- 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-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
22235
+ 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-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
22186
22236
  }
22187
22237
 
22188
22238
  .cds--tile--slug.cds--tile--selectable::before,
@@ -22201,7 +22251,8 @@ span.cds--pagination__text.cds--pagination__items-count {
22201
22251
 
22202
22252
  .cds--tile--slug.cds--tile--selectable::before,
22203
22253
  .cds--tile--slug.cds--tile--clickable::before {
22204
- background: linear-gradient(0deg, var(--cds-slug-callout-aura-start-hover-01, rgba(255, 255, 255, 0.5)) 0%, var(--cds-slug-callout-aura-end-hover-01, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(0deg, var(--cds-slug-callout-aura-start-hover-02, rgba(208, 226, 255, 0.5)) 0%, var(--cds-slug-callout-aura-end-hover-02, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top-hover, rgba(224, 224, 224, 0.55)) 0%, var(--cds-slug-callout-gradient-bottom-hover, rgba(209, 209, 209, 0.55)) 100%) rgba(0, 0, 0, 0.01);
22254
+ background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.4)) 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, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
22255
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
22205
22256
  }
22206
22257
 
22207
22258
  .cds--tile--slug.cds--tile--selectable:hover::before,
@@ -22210,7 +22261,12 @@ span.cds--pagination__text.cds--pagination__items-count {
22210
22261
  }
22211
22262
 
22212
22263
  .cds--tile--slug.cds--tile--selectable::after {
22213
- background: linear-gradient(0deg, var(--cds-slug-callout-aura-start-selected, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end-selected, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top-selected, rgba(224, 224, 224, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom-selected, rgba(209, 209, 209, 0.85)) 100%) rgba(0, 0, 0, 0.01);
22264
+ 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;
22265
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2));
22266
+ }
22267
+
22268
+ .cds--tile--slug.cds--tile--selectable:hover::after {
22269
+ opacity: 0;
22214
22270
  }
22215
22271
 
22216
22272
  .cds--tile--slug.cds--tile--is-selected::after {
@@ -22249,11 +22305,11 @@ span.cds--pagination__text.cds--pagination__items-count {
22249
22305
  .cds--tile--slug-rounded.cds--tile--selectable::before,
22250
22306
  .cds--tile--slug-rounded.cds--tile--selectable::after,
22251
22307
  .cds--tile--slug-rounded.cds--tile--clickable::before {
22252
- border-radius: 1rem;
22308
+ border-radius: 0.5rem;
22253
22309
  }
22254
22310
 
22255
22311
  .cds--tile--slug-rounded .cds--tile__chevron {
22256
- border-end-end-radius: 1rem;
22312
+ border-end-end-radius: 0.5rem;
22257
22313
  }
22258
22314
 
22259
22315
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {